demo

README.md

@@ -1,12 +1,12 @@
 ---
-title: My Space
-emoji: 🚀
-colorFrom: indigo
-colorTo: pink
-short_description: One-line pitch shown on the tile
+title: FaceLift
+emoji: 🎭
+colorFrom: blue
+colorTo: purple
+short_description: Single Image 3D Face Reconstruction with Gaussian Splatting
 sdk: gradio
 app_file: app.py
-thumbnail: https://huggingface.co/spaces/wlyu/FaceLift/blob/main/examples/teaser.png
+thumbnail: examples/teaser.png
 pinned: false
 ---
 

app.py

@@ -365,511 +365,7 @@ class FaceLiftPipeline:
             print(f"Error details:\n{error_details}")
             raise gr.Error(f"Generation failed: {str(e)}")
 
-# -----------------------------
-# Custom WebGL Gaussian Splatting Viewer
-# Based on antimatter15/splat viewer, modified for Gradio
-# -----------------------------
-GSPLAT_HEAD = """
-<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 workerCode = `
-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";
-  const header_end_index = header.indexOf(header_end);
-  if (header_end_index < 0) throw new Error("Unable to read PLY header");
-  
-  const match = /element vertex (\\d+)\\n/.exec(header);
-  const vertexCount = parseInt(match[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"
-  };
-  
-  const lines = header.slice(0, header_end_index).split("\\n");
-  for (let line of lines) {
-    if (line.startsWith("property ")) {
-      const parts = line.split(" ");
-      const type = parts[1];
-      const name = parts[2];
-      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);
-  let 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);
-  let 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);
-  const u_buffer = new Uint8Array(buffer);
-  const texwidth = 2048;
-  const texheight = Math.ceil((2 * vertexCount) / texwidth);
-  const texdata = new Uint32Array(texwidth * texheight * 4);
-  const texdata_c = new Uint8Array(texdata.buffer);
-  const 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, idx) => k * scale[Math.floor(idx / 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) => {
-  console.log('[Worker] Message received');
-  if (e.data.ply) {
-    try {
-      console.log('[Worker] Processing PLY buffer...');
-      buffer = processPlyBuffer(e.data.ply);
-      vertexCount = Math.floor(buffer.byteLength / rowLength);
-      console.log('[Worker] Vertex count:', vertexCount);
-      generateTexture();
-      console.log('[Worker] Texture sent');
-    } catch (error) {
-      console.error('[Worker] Error:', error);
-    }
-  }
-};
-`;
-    return new Worker(URL.createObjectURL(new Blob([workerCode], { 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() {
-    console.log('initViewer called, isInitialized:', isInitialized);
-    if (isInitialized) {
-      console.log('Already initialized, skipping');
-      return;
-    }
-    
-    const container = document.getElementById('splat-container');
-    if (!container) { 
-      console.error('Container #splat-container not found, retrying in 100ms'); 
-      setTimeout(initViewer, 100); 
-      return; 
-    }
-    
-    console.log('Container found:', container);
-    canvas = document.createElement('canvas');
-    canvas.id = 'gs-canvas';
-    container.innerHTML = '';
-    container.appendChild(canvas);
-    console.log('Canvas created and added');
-    
-    gl = canvas.getContext('webgl2', { antialias: false });
-    if (!gl) { 
-      console.error('WebGL2 not supported'); 
-      return; 
-    }
-    console.log('WebGL2 context created');
-    
-    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);
-    
-    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');
-    
-    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 });
-    
-    let renderCount = 0;
-    function render() {
-      if (vertexCount > 0) {
-        if (renderCount === 0) console.log('First render with', vertexCount, 'vertices');
-        gl.uniformMatrix4fv(u_view, false, viewMatrix);
-        gl.clear(gl.COLOR_BUFFER_BIT);
-        gl.drawArraysInstanced(gl.TRIANGLE_FAN, 0, 4, vertexCount);
-        renderCount++;
-      } else {
-        if (renderCount % 60 === 0) console.log('Rendering black screen, waiting for data...');
-        gl.clearColor(0, 0, 0, 1);
-        gl.clear(gl.COLOR_BUFFER_BIT);
-        renderCount++;
-      }
-      requestAnimationFrame(render);
-    }
-    console.log('Starting render loop');
-    render();
-    
-    worker = createWorker();
-    console.log('Worker created');
-    
-    worker.onmessage = (e) => {
-      console.log('Worker message received:', e.data);
-      if (e.data.texdata) {
-        const { texdata, texwidth, texheight, vertexCount: vc } = e.data;
-        console.log('Texture data:', {texwidth, texheight, vertexCount: vc, textureSize: texdata.byteLength});
-        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('✓ Successfully loaded', vc, 'gaussians');
-      }
-    };
-    
-    worker.onerror = (error) => {
-      console.error('Worker error:', error);
-    };
-    
-    isInitialized = true;
-    console.log('✓ Viewer initialized successfully');
-  }
-
-  async function loadPlyFile(url) {
-    try {
-      console.log('=== Starting PLY load ===');
-      console.log('URL:', url);
-      console.log('Initialized?', isInitialized);
-      console.log('Worker?', !!worker);
-      
-      if (!isInitialized) {
-        console.log('Initializing viewer...');
-        initViewer();
-        // Wait for initialization
-        await new Promise(resolve => setTimeout(resolve, 500));
-      }
-      
-      if (!worker) { 
-        console.error('Worker not initialized after init attempt'); 
-        return; 
-      }
-      
-      console.log('Fetching:', url);
-      const response = await fetch(url);
-      console.log('Response status:', response.status);
-      console.log('Response headers:', [...response.headers.entries()]);
-      
-      if (!response.ok) throw new Error('Failed to load: ' + response.status);
-      
-      const arrayBuffer = await response.arrayBuffer();
-      console.log('ArrayBuffer size:', arrayBuffer.byteLength, 'bytes');
-      
-      // Check PLY magic bytes
-      const magic = new Uint8Array(arrayBuffer.slice(0, 4));
-      console.log('Magic bytes:', magic, 'Expected: [112, 108, 121, 10] for "ply\\n"');
-      
-      worker.postMessage({ ply: arrayBuffer }, [arrayBuffer]);
-      console.log('PLY file sent to worker');
-    } catch (error) {
-      console.error('=== Error loading PLY ===');
-      console.error('Error:', error);
-      console.error('Stack:', error.stack);
-    }
-  }
-
-  window.__load_splat__ = loadPlyFile;
-  
-  // Initialize on load
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => {
-      console.log('DOM loaded, initializing viewer in 100ms');
-      setTimeout(initViewer, 100);
-    });
-  } else {
-    console.log('DOM already loaded, initializing viewer in 100ms');
-    setTimeout(initViewer, 100);
-  }
-})();
-</script>
-"""
+# No custom head needed - using Gradio's built-in Model3D component
 
 def main():
     """Run the FaceLift application with an embedded gsplat.js viewer and per-session files."""
@@ -881,26 +377,13 @@ def main():
         examples = [[str(f), True, 3.0, 4, 50] for f in sorted(pipeline.examples_dir.iterdir()) 
                    if f.suffix.lower() in {'.png', '.jpg', '.jpeg'}]
 
-    with gr.Blocks(head=GSPLAT_HEAD, title="FaceLift: Single Image 3D Face Reconstruction") as demo:
-        session = gr.State()
-
-        # Light GC + session init
-        def _init_session():
-            cleanup_old_sessions()
-            return new_session_id()
+    with gr.Blocks(title="FaceLift: Single Image 3D Face Reconstruction") as demo:
 
-        # 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", ""
-            url = copy_to_session_and_get_url(ply_path, session_id)
-            return "✓ Model loaded! Use mouse to interact.", url
-        
-        # Wrapper to return only the outputs we want to display
+        # Wrapper to return all outputs including 3D model for viewer
         def _generate_and_filter_outputs(image_path, auto_crop, guidance_scale, random_seed, num_steps):
             input_path, multiview_path, output_path, turntable_path, ply_path = \
                 pipeline.generate_3d_head(image_path, auto_crop, guidance_scale, random_seed, num_steps)
-            return output_path, turntable_path, ply_path
+            return ply_path, output_path, turntable_path, ply_path
 
         gr.Markdown("## FaceLift: Single Image 3D Face Reconstruction.")
         
@@ -928,36 +411,20 @@ def main():
                     )
 
             with gr.Column(scale=1):
-                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="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)
+                gr.Markdown("### 3D Model Viewer\n*Use mouse to rotate and zoom*")
+                viewer_3d = gr.Model3D(label="Interactive 3D Viewer", height=600)
                 
                 out_recon = gr.Image(label="3D Reconstruction")
                 out_video = gr.PlayableVideo(label="Turntable Animation")
                 out_ply   = gr.File(label="3D Gaussians (.ply)")
 
-        # Initialize per-browser session
-        demo.load(fn=_init_session, inputs=None, outputs=session)
-
-        # Chain: run → show outputs → prepare viewer URL → load viewer (JS)
+        # Run generation and display all outputs
         run_btn.click(
             fn=_generate_and_filter_outputs,
             inputs=[in_image, auto_crop, guidance, seed, steps],
-            outputs=[out_recon, out_video, out_ply],
-        ).then(
-            fn=_prep_viewer_url,
-            inputs=[out_ply, session],
-            outputs=[viewer_status, url_box],
-        ).then(
-            fn=None, inputs=url_box, outputs=None,
-            js="(url)=>{console.log('Calling __load_splat__ with:', url); return window.__load_splat__(url);}"
+            outputs=[viewer_3d, out_recon, out_video, out_ply],
         )
 
-        # Manual reload if needed
-        reload_btn.click(fn=None, inputs=url_box, outputs=None, js="(url)=>window.__load_splat__(url)")
-
         demo.queue(max_size=10)
         demo.launch(share=True, server_name="0.0.0.0", server_port=7860, show_error=True)