Spaces:

wlyu
/

FaceLift

Running on Zero

App Files Files Community

weijielyu commited on Oct 21

Commit

9b72c9a

1 Parent(s): 343399b

demo

Browse files

Files changed (1) hide show

app.py +3 -159

app.py CHANGED Viewed

@@ -46,12 +46,6 @@ import sys
 OUTPUTS_DIR = Path.cwd() / "outputs"
 OUTPUTS_DIR.mkdir(exist_ok=True)
-# Copy viewer.js to outputs so it can be served as a static file
-VIEWER_JS_SRC = Path(__file__).parent / "viewer.js"
-if VIEWER_JS_SRC.exists():
-    shutil.copy2(VIEWER_JS_SRC, OUTPUTS_DIR / "viewer.js")
-    print(f"✓ Copied viewer.js to {OUTPUTS_DIR / 'viewer.js'}")
 # -----------------------------
 # Ensure diff-gaussian-rasterization builds for current GPU
 # -----------------------------
@@ -340,136 +334,6 @@ class FaceLiftPipeline:
             print(f"Error details:\n{error_details}")
             raise gr.Error(f"Generation failed: {str(e)}")
-# Create viewer HTML file that can be served by Gradio
-def create_splat_viewer_html(ply_url: str, viewer_js_url: str, viewer_id: str) -> str:
-    """Create a standalone HTML file with embedded viewer for the PLY file."""
-    # Read viewer.js content
-    viewer_js_path = Path(__file__).parent / "viewer.js"
-    viewer_js_content = viewer_js_path.read_text() if viewer_js_path.exists() else "console.error('viewer.js not found');"
-    # Create HTML file in outputs directory
-    output_dir = Path(ply_url.replace("/file=", "").rsplit("/", 1)[0])
-    viewer_html_path = output_dir / f"viewer_{viewer_id}.html"
-    html_content = f"""<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>3D Gaussian Splat Viewer</title>
-    <style>
-        body {{ margin: 0; overflow: hidden; background: #000; }}
-        #canvas {{ width: 100vw; height: 100vh; display: block; }}
-        #spinner {{
-            position: absolute; top: 50%; left: 50%;
-            transform: translate(-50%, -50%);
-            color: white; font-family: Arial; z-index: 10;
-            text-align: center; background: rgba(0,0,0,0.8);
-            padding: 20px; border-radius: 8px;
-        }}
-        #progress {{ background: #4CAF50; height: 4px; width: 0%; transition: width 0.3s; }}
-        #message {{
-            position: absolute; top: 50%; left: 50%;
-            transform: translate(-50%, -50%);
-            color: #ff4444; font-family: Arial; font-size: 14px;
-            background: rgba(0,0,0,0.9); padding: 20px;
-            border-radius: 8px; display: none; z-index: 11;
-        }}
-        #fps, #camid {{
-            position: absolute; right: 10px;
-            color: white; font-family: monospace; font-size: 11px;
-            background: rgba(0,0,0,0.7); padding: 6px 10px;
-            border-radius: 4px; display: none;
-        }}
-        #fps {{ top: 10px; }}
-        #camid {{ top: 40px; }}
-        #controls-info {{
-            position: absolute; bottom: 10px; left: 10px;
-            color: white; font-family: Arial; font-size: 11px;
-            background: rgba(0,0,0,0.7); padding: 8px 12px;
-            border-radius: 4px;
-        }}
-    </style>
-</head>
-<body>
-    <canvas id="canvas"></canvas>
-    <div id="spinner">
-        <div style="font-size:14px; margin-bottom:10px;">Loading 3D Viewer...</div>
-        <div style="background:#333; height:4px; width:200px; border-radius:2px; overflow:hidden;">
-            <div id="progress"></div>
-        </div>
-    </div>
-    <div id="message"></div>
-    <div id="fps"></div>
-    <div id="camid"></div>
-    <div id="controls-info">
-        <strong>Controls:</strong> Drag: Rotate | Scroll: Zoom | Right-drag: Pan
-    </div>
-    <script>
-{viewer_js_content}
-    </script>
-    <script>
-        // Auto-load PLY after viewer initializes
-        const plyUrl = "{ply_url}";
-        console.log("=== Splat Viewer Init ===");
-        console.log("PLY URL:", plyUrl);
-        let attempts = 0;
-        const checkAndLoad = setInterval(function() {{
-            attempts++;
-            if (window.worker) {{
-                console.log("✓ Worker ready after", attempts * 100, "ms");
-                clearInterval(checkAndLoad);
-                fetch(plyUrl)
-                    .then(r => {{ if (!r.ok) throw new Error("HTTP " + r.status); return r.arrayBuffer(); }})
-                    .then(buffer => {{
-                        console.log("✓ PLY loaded:", buffer.byteLength, "bytes");
-                        const file = new File([buffer], "model.ply");
-                        const reader = new FileReader();
-                        reader.onload = () => {{
-                            window.worker.postMessage({{ ply: reader.result }});
-                            console.log("✓ Sent to worker");
-                        }};
-                        reader.readAsArrayBuffer(file);
-                    }})
-                    .catch(err => {{
-                        console.error("✗ Error:", err);
-                        document.getElementById("spinner").style.display = "none";
-                        const msg = document.getElementById("message");
-                        msg.textContent = "Error: " + err.message;
-                        msg.style.display = "block";
-                    }});
-            }} else if (attempts >= 50) {{
-                console.error("✗ Worker timeout");
-                clearInterval(checkAndLoad);
-                document.getElementById("spinner").style.display = "none";
-                const msg = document.getElementById("message");
-                msg.textContent = "Viewer failed to initialize.";
-                msg.style.display = "block";
-            }}
-        }}, 100);
-    </script>
-</body>
-</html>"""
-    # Write HTML file
-    viewer_html_path.write_text(html_content)
-    # Return iframe that loads this HTML file
-    viewer_html_url = f"/file={viewer_html_path}"
-    return f"""
-<iframe id="viewer-frame-{viewer_id}" src="{viewer_html_url}" style="width:100%; height:600px; border:1px solid #333; border-radius:8px;" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-<p style="font-size:11px; color:#666; margin-top:5px;">
-    <a href="{viewer_html_url}" target="_blank" style="color:#4CAF50;">Open in new tab</a> for better performance
-</p>
-"""
 def main():
     """Run the FaceLift application."""
     pipeline = FaceLiftPipeline()
@@ -487,20 +351,7 @@ def main():
             input_path, multiview_path, output_path, turntable_path, ply_path = \
                 pipeline.generate_3d_head(image_path, auto_crop, guidance_scale, random_seed, num_steps)
-            # Create Gradio-accessible URL for the PLY file
-            ply_url = f"/file={ply_path}"
-            # viewer.js is in the outputs directory
-            viewer_js_url = f"/file={OUTPUTS_DIR}/viewer.js"
-            # Generate unique viewer ID
-            viewer_id = str(uuid.uuid4())[:8]
-            viewer_html = create_splat_viewer_html(ply_url, viewer_js_url, viewer_id)
-            # Debug info showing the paths
-            debug_info = f"PLY Path: {ply_path}\nPLY URL: {ply_url}\nViewer JS URL: {viewer_js_url}\nFile exists: {Path(ply_path).exists()}\nViewer ID: {viewer_id}"
-            return viewer_html, output_path, turntable_path, ply_path, debug_info
         gr.Markdown("## FaceLift: Single Image 3D Face Reconstruction.")
@@ -529,22 +380,15 @@ def main():
                     )
             with gr.Column(scale=1):
-                out_viewer = gr.HTML(label="🎮 Interactive 3D Viewer")
-                out_debug = gr.Textbox(label="🔍 Debug Info", lines=3, visible=True)
                 out_recon = gr.Image(label="3D Reconstruction Views")
-                out_video = gr.PlayableVideo(label="Turntable Animation (360° View)", height=400)
                 out_ply   = gr.File(label="Download 3D Model (.ply)")
-                gr.Markdown("""
-                **💡 Controls:** Drag to rotate | Scroll to zoom | Right-drag to pan
-                *Interactive viewer powered by [antimatter15/splat](https://github.com/antimatter15/splat)*
-                """)
         # Run generation and display all outputs
         run_btn.click(
             fn=_generate_and_filter_outputs,
             inputs=[in_image, auto_crop, guidance, seed, steps],
-            outputs=[out_viewer, out_recon, out_video, out_ply, out_debug],
         )
         demo.queue(max_size=10)

 OUTPUTS_DIR = Path.cwd() / "outputs"
 OUTPUTS_DIR.mkdir(exist_ok=True)
 # -----------------------------
 # Ensure diff-gaussian-rasterization builds for current GPU
 # -----------------------------
             print(f"Error details:\n{error_details}")
             raise gr.Error(f"Generation failed: {str(e)}")
 def main():
     """Run the FaceLift application."""
     pipeline = FaceLiftPipeline()
             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
         gr.Markdown("## FaceLift: Single Image 3D Face Reconstruction.")
                     )
             with gr.Column(scale=1):
                 out_recon = gr.Image(label="3D Reconstruction Views")
+                out_video = gr.PlayableVideo(label="Turntable Animation (360° View)", height=600)
                 out_ply   = gr.File(label="Download 3D Model (.ply)")
         # 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],
         )
         demo.queue(max_size=10)