Update demo

app.py

@@ -366,75 +366,356 @@ class FaceLiftPipeline:
             raise gr.Error(f"Generation failed: {str(e)}")
 
 # -----------------------------
-# gsplat.js viewer (Option A)
+# Custom WebGL Gaussian Splatting Viewer
+# Based on antimatter15/splat viewer, modified for Gradio
 # -----------------------------
 GSPLAT_HEAD = """
-<script type="module">
-  import * as SPLAT from "https://cdn.jsdelivr.net/npm/gsplat@1.2.9/+esm";
-  let renderer, scene, camera, controls;
-
-  function ensureViewer() {
-    if (renderer) return;
-    const container = document.getElementById("splat-container");
-    if (!container) {
-      console.error("Container not found!");
-      return;
+<style>
+  #gs-canvas { width: 100%; height: 100%; display: block; cursor: grab; }
+  #gs-canvas:active { cursor: grabbing; }
+</style>
+<script>
+// Custom WebGL Gaussian Splatting Viewer - Handles PLY files natively
+(function() {
+  'use strict';
+  let canvas, gl, program, worker, texture, indexBuffer;
+  let viewMatrix, projectionMatrix;
+  let vertexCount = 0;
+  let isInitialized = false;
+  let u_view, u_projection, u_viewport, u_focal;
+
+  const vertexShaderSource = \`#version 300 es
+precision highp float;
+precision highp int;
+uniform highp usampler2D u_texture;
+uniform mat4 projection, view;
+uniform vec2 focal, viewport;
+in vec2 position;
+in int index;
+out vec4 vColor;
+out vec2 vPosition;
+
+void main () {
+    uvec4 cen = texelFetch(u_texture, ivec2((uint(index) & 0x3ffu) << 1, uint(index) >> 10), 0);
+    vec4 cam = view * vec4(uintBitsToFloat(cen.xyz), 1);
+    vec4 pos2d = projection * cam;
+    float clip = 1.2 * pos2d.w;
+    if (pos2d.z < -clip || pos2d.x < -clip || pos2d.x > clip || pos2d.y < -clip || pos2d.y > clip) {
+        gl_Position = vec4(0.0, 0.0, 2.0, 1.0);
+        return;
     }
+    uvec4 cov = texelFetch(u_texture, ivec2(((uint(index) & 0x3ffu) << 1) | 1u, uint(index) >> 10), 0);
+    vec2 u1 = unpackHalf2x16(cov.x), u2 = unpackHalf2x16(cov.y), u3 = unpackHalf2x16(cov.z);
+    mat3 Vrk = mat3(u1.x, u1.y, u2.x, u1.y, u2.y, u3.x, u2.x, u3.x, u3.y);
+    mat3 J = mat3(focal.x / cam.z, 0., -(focal.x * cam.x) / (cam.z * cam.z),
+                  0., -focal.y / cam.z, (focal.y * cam.y) / (cam.z * cam.z), 0., 0., 0.);
+    mat3 T = transpose(mat3(view)) * J;
+    mat3 cov2d = transpose(T) * Vrk * T;
+    float mid = (cov2d[0][0] + cov2d[1][1]) / 2.0;
+    float radius = length(vec2((cov2d[0][0] - cov2d[1][1]) / 2.0, cov2d[0][1]));
+    float lambda1 = mid + radius, lambda2 = mid - radius;
+    if(lambda2 < 0.0) return;
+    vec2 diagonalVector = normalize(vec2(cov2d[0][1], lambda1 - cov2d[0][0]));
+    vec2 majorAxis = min(sqrt(2.0 * lambda1), 1024.0) * diagonalVector;
+    vec2 minorAxis = min(sqrt(2.0 * lambda2), 1024.0) * vec2(diagonalVector.y, -diagonalVector.x);
+    vColor = clamp(pos2d.z/pos2d.w+1.0, 0.0, 1.0) * vec4((cov.w) & 0xffu, (cov.w >> 8) & 0xffu, (cov.w >> 16) & 0xffu, (cov.w >> 24) & 0xffu) / 255.0;
+    vPosition = position;
+    vec2 vCenter = vec2(pos2d) / pos2d.w;
+    gl_Position = vec4(vCenter + position.x * majorAxis / viewport + position.y * minorAxis / viewport, 0.0, 1.0);
+}\`;
+
+  const fragmentShaderSource = \`#version 300 es
+precision highp float;
+in vec4 vColor;
+in vec2 vPosition;
+out vec4 fragColor;
+void main () {
+    float A = -dot(vPosition, vPosition);
+    if (A < -4.0) discard;
+    float B = exp(A) * vColor.a;
+    fragColor = vec4(B * vColor.rgb, B);
+}\`;
+
+  function createWorker() {
+    const code = \`
+    let buffer, vertexCount = 0;
+    const rowLength = 32;
+    var _floatView = new Float32Array(1), _int32View = new Int32Array(_floatView.buffer);
+    function floatToHalf(float) {
+      _floatView[0] = float; var f = _int32View[0];
+      var sign = (f >> 31) & 0x0001, exp = (f >> 23) & 0x00ff, frac = f & 0x007fffff, newExp;
+      if (exp == 0) newExp = 0;
+      else if (exp < 113) { newExp = 0; frac |= 0x00800000; frac = frac >> (113 - exp); if (frac & 0x01000000) { newExp = 1; frac = 0; }}
+      else if (exp < 142) newExp = exp - 112; else { newExp = 31; frac = 0; }
+      return (sign << 15) | (newExp << 10) | (frac >> 13);
+    }
+    function packHalf2x16(x, y) { return (floatToHalf(x) | (floatToHalf(y) << 16)) >>> 0; }
+    function processPlyBuffer(inputBuffer) {
+      const ubuf = new Uint8Array(inputBuffer);
+      const header = new TextDecoder().decode(ubuf.slice(0, 10240));
+      const header_end = "end_header\\\\n", header_end_index = header.indexOf(header_end);
+      if (header_end_index < 0) throw new Error("Unable to read .ply file header");
+      const vertexCount = parseInt(/element vertex (\\\\d+)\\\\n/.exec(header)[1]);
+      console.log("Vertex Count:", vertexCount);
+      let row_offset = 0, offsets = {}, types = {};
+      const TYPE_MAP = {double: "getFloat64", int: "getInt32", uint: "getUint32", float: "getFloat32", short: "getInt16", ushort: "getUint16", uchar: "getUint8"};
+      for (let prop of header.slice(0, header_end_index).split("\\\\n").filter(k => k.startsWith("property "))) {
+        const [p, type, name] = prop.split(" ");
+        const arrayType = TYPE_MAP[type] || "getInt8";
+        types[name] = arrayType; offsets[name] = row_offset;
+        row_offset += parseInt(arrayType.replace(/[^\\\\d]/g, "")) / 8;
+      }
+      let dataView = new DataView(inputBuffer, header_end_index + header_end.length), row = 0;
+      const attrs = new Proxy({}, {
+        get(target, prop) {
+          if (!types[prop]) throw new Error(prop + " not found");
+          return dataView[types[prop]](row * row_offset + offsets[prop], true);
+        }
+      });
+      let sizeList = new Float32Array(vertexCount), sizeIndex = new Uint32Array(vertexCount);
+      for (row = 0; row < vertexCount; row++) {
+        sizeIndex[row] = row;
+        if (!types["scale_0"]) continue;
+        const size = Math.exp(attrs.scale_0) * Math.exp(attrs.scale_1) * Math.exp(attrs.scale_2);
+        const opacity = 1 / (1 + Math.exp(-attrs.opacity));
+        sizeList[row] = size * opacity;
+      }
+      sizeIndex.sort((b, a) => sizeList[a] - sizeList[b]);
+      const buffer = new ArrayBuffer(rowLength * vertexCount);
+      for (let j = 0; j < vertexCount; j++) {
+        row = sizeIndex[j];
+        const position = new Float32Array(buffer, j * rowLength, 3);
+        const scales = new Float32Array(buffer, j * rowLength + 12, 3);
+        const rgba = new Uint8ClampedArray(buffer, j * rowLength + 24, 4);
+        const rot = new Uint8ClampedArray(buffer, j * rowLength + 28, 4);
+        if (types["scale_0"]) {
+          const qlen = Math.sqrt(attrs.rot_0 ** 2 + attrs.rot_1 ** 2 + attrs.rot_2 ** 2 + attrs.rot_3 ** 2);
+          rot[0] = (attrs.rot_0 / qlen) * 128 + 128; rot[1] = (attrs.rot_1 / qlen) * 128 + 128;
+          rot[2] = (attrs.rot_2 / qlen) * 128 + 128; rot[3] = (attrs.rot_3 / qlen) * 128 + 128;
+          scales[0] = Math.exp(attrs.scale_0); scales[1] = Math.exp(attrs.scale_1); scales[2] = Math.exp(attrs.scale_2);
+        } else { scales[0] = scales[1] = scales[2] = 0.01; rot[0] = 255; rot[1] = rot[2] = rot[3] = 0; }
+        position[0] = attrs.x; position[1] = attrs.y; position[2] = attrs.z;
+        if (types["f_dc_0"]) {
+          const SH_C0 = 0.28209479177387814;
+          rgba[0] = (0.5 + SH_C0 * attrs.f_dc_0) * 255; rgba[1] = (0.5 + SH_C0 * attrs.f_dc_1) * 255; rgba[2] = (0.5 + SH_C0 * attrs.f_dc_2) * 255;
+        } else { rgba[0] = attrs.red; rgba[1] = attrs.green; rgba[2] = attrs.blue; }
+        rgba[3] = types["opacity"] ? (1 / (1 + Math.exp(-attrs.opacity))) * 255 : 255;
+      }
+      return buffer;
+    }
+    function generateTexture() {
+      if (!buffer) return;
+      const f_buffer = new Float32Array(buffer), u_buffer = new Uint8Array(buffer);
+      const texwidth = 2048, texheight = Math.ceil((2 * vertexCount) / texwidth);
+      const texdata = new Uint32Array(texwidth * texheight * 4);
+      const texdata_c = new Uint8Array(texdata.buffer), texdata_f = new Float32Array(texdata.buffer);
+      for (let i = 0; i < vertexCount; i++) {
+        texdata_f[8 * i + 0] = f_buffer[8 * i + 0]; texdata_f[8 * i + 1] = f_buffer[8 * i + 1]; texdata_f[8 * i + 2] = f_buffer[8 * i + 2];
+        texdata_c[4 * (8 * i + 7) + 0] = u_buffer[32 * i + 24 + 0]; texdata_c[4 * (8 * i + 7) + 1] = u_buffer[32 * i + 24 + 1];
+        texdata_c[4 * (8 * i + 7) + 2] = u_buffer[32 * i + 24 + 2]; texdata_c[4 * (8 * i + 7) + 3] = u_buffer[32 * i + 24 + 3];
+        let scale = [f_buffer[8 * i + 3], f_buffer[8 * i + 4], f_buffer[8 * i + 5]];
+        let rot = [(u_buffer[32 * i + 28] - 128) / 128, (u_buffer[32 * i + 29] - 128) / 128, (u_buffer[32 * i + 30] - 128) / 128, (u_buffer[32 * i + 31] - 128) / 128];
+        const M = [1.0 - 2.0 * (rot[2] * rot[2] + rot[3] * rot[3]), 2.0 * (rot[1] * rot[2] + rot[0] * rot[3]), 2.0 * (rot[1] * rot[3] - rot[0] * rot[2]),
+                   2.0 * (rot[1] * rot[2] - rot[0] * rot[3]), 1.0 - 2.0 * (rot[1] * rot[1] + rot[3] * rot[3]), 2.0 * (rot[2] * rot[3] + rot[0] * rot[1]),
+                   2.0 * (rot[1] * rot[3] + rot[0] * rot[2]), 2.0 * (rot[2] * rot[3] - rot[0] * rot[1]), 1.0 - 2.0 * (rot[1] * rot[1] + rot[2] * rot[2])].map((k, i) => k * scale[Math.floor(i / 3)]);
+        const sigma = [M[0]*M[0]+M[3]*M[3]+M[6]*M[6], M[0]*M[1]+M[3]*M[4]+M[6]*M[7], M[0]*M[2]+M[3]*M[5]+M[6]*M[8],
+                       M[1]*M[1]+M[4]*M[4]+M[7]*M[7], M[1]*M[2]+M[4]*M[5]+M[7]*M[8], M[2]*M[2]+M[5]*M[5]+M[8]*M[8]];
+        texdata[8 * i + 4] = packHalf2x16(4 * sigma[0], 4 * sigma[1]);
+        texdata[8 * i + 5] = packHalf2x16(4 * sigma[2], 4 * sigma[3]);
+        texdata[8 * i + 6] = packHalf2x16(4 * sigma[4], 4 * sigma[5]);
+      }
+      self.postMessage({ texdata, texwidth, texheight, vertexCount }, [texdata.buffer]);
+    }
+    self.onmessage = (e) => {
+      if (e.data.ply) {
+        buffer = processPlyBuffer(e.data.ply);
+        vertexCount = Math.floor(buffer.byteLength / rowLength);
+        generateTexture();
+      }
+    };
+    \`;
+    return new Worker(URL.createObjectURL(new Blob([code], { type: 'application/javascript' })));
+  }
+
+  const invert4 = (a) => {
+    let b00=a[0]*a[5]-a[1]*a[4],b01=a[0]*a[6]-a[2]*a[4],b02=a[0]*a[7]-a[3]*a[4],b03=a[1]*a[6]-a[2]*a[5],b04=a[1]*a[7]-a[3]*a[5],b05=a[2]*a[7]-a[3]*a[6];
+    let b06=a[8]*a[13]-a[9]*a[12],b07=a[8]*a[14]-a[10]*a[12],b08=a[8]*a[15]-a[11]*a[12],b09=a[9]*a[14]-a[10]*a[13],b10=a[9]*a[15]-a[11]*a[13],b11=a[10]*a[15]-a[11]*a[14];
+    let det=b00*b11-b01*b10+b02*b09+b03*b08-b04*b07+b05*b06;if(!det)return null;
+    return[(a[5]*b11-a[6]*b10+a[7]*b09)/det,(a[2]*b10-a[1]*b11-a[3]*b09)/det,(a[13]*b05-a[14]*b04+a[15]*b03)/det,(a[10]*b04-a[9]*b05-a[11]*b03)/det,
+           (a[6]*b08-a[4]*b11-a[7]*b07)/det,(a[0]*b11-a[2]*b08+a[3]*b07)/det,(a[14]*b02-a[12]*b05-a[15]*b01)/det,(a[8]*b05-a[10]*b02+a[11]*b01)/det,
+           (a[4]*b10-a[5]*b08+a[7]*b06)/det,(a[1]*b08-a[0]*b10-a[3]*b06)/det,(a[12]*b04-a[13]*b02+a[15]*b00)/det,(a[9]*b02-a[8]*b04-a[11]*b00)/det,
+           (a[5]*b07-a[4]*b09-a[6]*b06)/det,(a[0]*b09-a[1]*b07+a[2]*b06)/det,(a[13]*b01-a[12]*b03-a[14]*b00)/det,(a[8]*b03-a[9]*b01+a[10]*b00)/det];
+  };
+  const rotate4 = (a, rad, x, y, z) => {
+    let len = Math.hypot(x, y, z); x /= len; y /= len; z /= len;
+    let s = Math.sin(rad), c = Math.cos(rad), t = 1 - c;
+    let b00=x*x*t+c, b01=y*x*t+z*s, b02=z*x*t-y*s, b10=x*y*t-z*s, b11=y*y*t+c, b12=z*y*t+x*s, b20=x*z*t+y*s, b21=y*z*t-x*s, b22=z*z*t+c;
+    return [a[0]*b00+a[4]*b01+a[8]*b02,a[1]*b00+a[5]*b01+a[9]*b02,a[2]*b00+a[6]*b01+a[10]*b02,a[3]*b00+a[7]*b01+a[11]*b02,
+            a[0]*b10+a[4]*b11+a[8]*b12,a[1]*b10+a[5]*b11+a[9]*b12,a[2]*b10+a[6]*b11+a[10]*b12,a[3]*b10+a[7]*b11+a[11]*b12,
+            a[0]*b20+a[4]*b21+a[8]*b22,a[1]*b20+a[5]*b21+a[9]*b22,a[2]*b20+a[6]*b21+a[10]*b22,a[3]*b20+a[7]*b21+a[11]*b22,...a.slice(12,16)];
+  };
+  const translate4 = (a, x, y, z) => [...a.slice(0,12), a[0]*x+a[4]*y+a[8]*z+a[12], a[1]*x+a[5]*y+a[9]*z+a[13], a[2]*x+a[6]*y+a[10]*z+a[14], a[3]*x+a[7]*y+a[11]*z+a[15]];
+  const getProjectionMatrix = (fx, fy, width, height) => {
+    const znear = 0.2, zfar = 200;
+    return [(2*fx)/width, 0, 0, 0, 0, -(2*fy)/height, 0, 0, 0, 0, zfar/(zfar-znear), 1, 0, 0, -(zfar*znear)/(zfar-znear), 0];
+  };
+
+  function initViewer() {
+    if (isInitialized) return;
+    const container = document.getElementById('splat-container');
+    if (!container) { console.error('Container not found'); setTimeout(initViewer, 100); return; }
     
-    renderer = new SPLAT.WebGLRenderer();
-    renderer.canvas.style.width = '100%';
-    renderer.canvas.style.height = '100%';
-    container.appendChild(renderer.canvas);
+    canvas = document.createElement('canvas');
+    canvas.id = 'gs-canvas';
+    container.innerHTML = '';
+    container.appendChild(canvas);
     
-    scene = new SPLAT.Scene();
-    camera = new SPLAT.Camera();
-    camera.data.setPosition(0, 0, 2);
+    gl = canvas.getContext('webgl2', { antialias: false });
+    if (!gl) { console.error('WebGL2 not supported'); return; }
     
-    controls = new SPLAT.OrbitControls(camera, renderer.canvas);
+    const vShader = gl.createShader(gl.VERTEX_SHADER);
+    gl.shaderSource(vShader, vertexShaderSource);
+    gl.compileShader(vShader);
+    const fShader = gl.createShader(gl.FRAGMENT_SHADER);
+    gl.shaderSource(fShader, fragmentShaderSource);
+    gl.compileShader(fShader);
+    program = gl.createProgram();
+    gl.attachShader(program, vShader);
+    gl.attachShader(program, fShader);
+    gl.linkProgram(program);
+    gl.useProgram(program);
     
-    const loop = () => { 
-      controls.update(); 
-      renderer.render(scene, camera); 
-      requestAnimationFrame(loop); 
-    };
-    requestAnimationFrame(loop);
-    console.log("Viewer initialized");
-  }
-
-  async function loadSplat(url) {
-    console.log("Loading splat from:", url);
-    ensureViewer();
+    gl.disable(gl.DEPTH_TEST);
+    gl.enable(gl.BLEND);
+    gl.blendFuncSeparate(gl.ONE_MINUS_DST_ALPHA, gl.ONE, gl.ONE_MINUS_DST_ALPHA, gl.ONE);
+    
+    u_projection = gl.getUniformLocation(program, 'projection');
+    u_viewport = gl.getUniformLocation(program, 'viewport');
+    u_focal = gl.getUniformLocation(program, 'focal');
+    u_view = gl.getUniformLocation(program, 'view');
     
-    if (!scene) {
-      console.error("Scene not initialized!");
-      return;
+    const vBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-2, -2, 2, -2, 2, 2, -2, 2]), gl.STATIC_DRAW);
+    const a_position = gl.getAttribLocation(program, 'position');
+    gl.enableVertexAttribArray(a_position);
+    gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);
+    
+    texture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.uniform1i(gl.getUniformLocation(program, 'u_texture'), 0);
+    
+    indexBuffer = gl.createBuffer();
+    const a_index = gl.getAttribLocation(program, 'index');
+    gl.enableVertexAttribArray(a_index);
+    gl.bindBuffer(gl.ARRAY_BUFFER, indexBuffer);
+    gl.vertexAttribIPointer(a_index, 1, gl.INT, false, 0, 0);
+    gl.vertexAttribDivisor(a_index, 1);
+    
+    viewMatrix = [0.99, 0, 0.14, 0, 0, 1, 0, 0, -0.14, 0, 0.99, 0, 0, 0, 2.5, 1];
+    const fx = 500, fy = 500;
+    
+    function resize() {
+      const dpr = window.devicePixelRatio || 1;
+      const rect = container.getBoundingClientRect();
+      canvas.width = rect.width * dpr;
+      canvas.height = rect.height * dpr;
+      canvas.style.width = rect.width + 'px';
+      canvas.style.height = rect.height + 'px';
+      projectionMatrix = getProjectionMatrix(fx, fy, canvas.width, canvas.height);
+      gl.viewport(0, 0, canvas.width, canvas.height);
+      gl.uniformMatrix4fv(u_projection, false, projectionMatrix);
+      gl.uniform2fv(u_viewport, [canvas.width, canvas.height]);
+      gl.uniform2fv(u_focal, [fx, fy]);
     }
+    window.addEventListener('resize', resize);
+    resize();
+    
+    let startX, startY, down;
+    canvas.addEventListener('mousedown', (e) => { e.preventDefault(); startX = e.clientX; startY = e.clientY; down = e.ctrlKey || e.metaKey ? 2 : 1; });
+    canvas.addEventListener('mousemove', (e) => {
+      e.preventDefault();
+      if (down == 1) {
+        let inv = invert4(viewMatrix), dx = (5 * (e.clientX - startX)) / window.innerWidth, dy = (5 * (e.clientY - startY)) / window.innerHeight;
+        inv = translate4(inv, 0, 0, 2);
+        inv = rotate4(inv, dx, 0, 1, 0);
+        inv = rotate4(inv, -dy, 1, 0, 0);
+        inv = translate4(inv, 0, 0, -2);
+        viewMatrix = invert4(inv);
+        startX = e.clientX; startY = e.clientY;
+      } else if (down == 2) {
+        let inv = invert4(viewMatrix);
+        inv = translate4(inv, (-5 * (e.clientX - startX)) / window.innerWidth, 0, (5 * (e.clientY - startY)) / window.innerHeight);
+        viewMatrix = invert4(inv);
+        startX = e.clientX; startY = e.clientY;
+      }
+    });
+    canvas.addEventListener('mouseup', () => { down = false; });
+    canvas.addEventListener('wheel', (e) => {
+      e.preventDefault();
+      let inv = invert4(viewMatrix);
+      inv = translate4(inv, 0, 0, -e.deltaY * 0.001);
+      viewMatrix = invert4(inv);
+    }, { passive: false });
     
-    // clear previous
-    scene.children.length = 0;
+    function render() {
+      if (vertexCount > 0) {
+        gl.uniformMatrix4fv(u_view, false, viewMatrix);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        gl.drawArraysInstanced(gl.TRIANGLE_FAN, 0, 4, vertexCount);
+      } else {
+        gl.clearColor(0, 0, 0, 1);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+      }
+      requestAnimationFrame(render);
+    }
+    render();
     
+    worker = createWorker();
+    worker.onmessage = (e) => {
+      if (e.data.texdata) {
+        const { texdata, texwidth, texheight, vertexCount: vc } = e.data;
+        vertexCount = vc;
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32UI, texwidth, texheight, 0, gl.RGBA_INTEGER, gl.UNSIGNED_INT, texdata);
+        const depthIndex = new Uint32Array(vc);
+        for (let i = 0; i < vc; i++) depthIndex[i] = i;
+        gl.bindBuffer(gl.ARRAY_BUFFER, indexBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, depthIndex, gl.STATIC_DRAW);
+        console.log('Loaded', vc, 'gaussians');
+      }
+    };
+    
+    isInitialized = true;
+    console.log('Viewer initialized');
+  }
+
+  async function loadPlyFile(url) {
     try {
-      await SPLAT.Loader.LoadAsync(url, scene, (progress) => {
-        console.log("Loading progress:", progress);
-      });
-      console.log("Splat loaded successfully!");
-      
-      // Reset camera position after loading
-      camera.data.setPosition(0, 0, 2);
+      console.log('Loading PLY from:', url);
+      if (!isInitialized) initViewer();
+      if (!worker) { console.error('Worker not initialized'); return; }
+      const response = await fetch(url);
+      if (!response.ok) throw new Error('Failed to load: ' + response.status);
+      const arrayBuffer = await response.arrayBuffer();
+      worker.postMessage({ ply: arrayBuffer }, [arrayBuffer]);
+      console.log('PLY file sent to worker');
     } catch (error) {
-      console.error("Error loading splat:", error);
+      console.error('Error loading PLY:', error);
     }
   }
 
-  // Expose callable function for Gradio
-  window.__load_splat__ = loadSplat;
-  
-  // Initialize viewer when DOM is ready
+  window.__load_splat__ = loadPlyFile;
   if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', ensureViewer);
+    document.addEventListener('DOMContentLoaded', () => setTimeout(initViewer, 100));
   } else {
-    setTimeout(ensureViewer, 100);
+    setTimeout(initViewer, 100);
   }
+})();
 </script>
 """
 
@@ -459,9 +740,9 @@ def main():
         # After generation: copy ply into per-session folder and return viewer URL
         def _prep_viewer_url(ply_path: str, session_id: str):
             if not ply_path or not os.path.exists(ply_path):
-                return "Model file not found", ""
+                return "✗ Model file not found", ""
             url = copy_to_session_and_get_url(ply_path, session_id)
-            return "Loading model into viewer...", url
+            return "✓ Model loaded! Use mouse to interact.", url
         
         # Wrapper to return only the outputs we want to display
         def _generate_and_filter_outputs(image_path, auto_crop, guidance_scale, random_seed, num_steps):
@@ -469,12 +750,12 @@ def main():
                 pipeline.generate_3d_head(image_path, auto_crop, guidance_scale, random_seed, num_steps)
             return output_path, turntable_path, ply_path
 
-        gr.Markdown("## FaceLift: Single Image 3D Face Reconstruction\nTurn a single portrait image into a 3D head model and preview it interactively.")
+        gr.Markdown("## FaceLift: Single Image 3D Face Reconstruction.")
         
         gr.Markdown("""
         ### 💡 Tips for Best Results
-        - **Works best with near-frontal portrait images**
-        - **The provided checkpoints were not trained with accessories (glasses, hats, etc.). Portraits containing accessories may produce suboptimal results.**
+        - Works best with near-frontal portrait images
+        - The provided checkpoints were not trained with accessories (glasses, hats, etc.). Portraits containing accessories may produce suboptimal results.
         """)
         
         with gr.Row():
@@ -491,15 +772,15 @@ def main():
                     gr.Examples(
                         examples=examples,
                         inputs=[in_image, auto_crop, guidance, seed, steps],
-                        examples_per_page=8,
+                        examples_per_page=10,
                     )
 
             with gr.Column(scale=1):
-                gr.Markdown("### Interactive Gaussian Splat Viewer")
+                gr.Markdown("### Interactive Gaussian Splat Viewer\n*Drag to rotate, Ctrl+drag to pan, scroll to zoom*")
                 viewer = gr.HTML("<div id='splat-container' style='width:100%;height:600px;background:#000;border:1px solid #ccc;border-radius:8px;'></div>")
-                viewer_status = gr.Textbox(label="Viewer Status", value="Waiting for model...", interactive=False)
-                url_box = gr.Textbox(label="Model URL (for debugging)", interactive=False)
-                reload_btn = gr.Button("Reload Viewer", size="sm")
+                viewer_status = gr.Textbox(label="Viewer Status", value="Viewer ready. Generate a model to view.", interactive=False)
+                url_box = gr.Textbox(label="Model URL (for debugging)", interactive=False, visible=False)
+                reload_btn = gr.Button("Reload Viewer", size="sm", visible=False)
                 
                 out_recon = gr.Image(label="3D Reconstruction")
                 out_video = gr.PlayableVideo(label="Turntable Animation")