Spaces:

wlyu
/

FaceLift

Running on Zero

App Files Files Community

weijielyu commited on Oct 21

Commit

f423985

1 Parent(s): 918c308

demo

Browse files

Files changed (1) hide show

app.py +47 -55

app.py CHANGED Viewed

@@ -331,74 +331,54 @@ class FaceLiftPipeline:
             print(f"Error details:\n{error_details}")
             raise gr.Error(f"Generation failed: {str(e)}")
-# Create viewer HTML that references external viewer.js
 def create_splat_viewer_html(ply_url: str, viewer_js_url: str, viewer_id: str) -> str:
-    """Create HTML with splat viewer that loads a PLY file via external script."""
-    return f"""
-<iframe id="viewer-frame-{viewer_id}" style="width:100%; height:600px; border:1px solid #333; border-radius:8px;" srcdoc='
-<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <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>
@@ -418,14 +398,15 @@ def create_splat_viewer_html(ply_url: str, viewer_js_url: str, viewer_id: str) -
         <strong>Controls:</strong> Drag: Rotate | Scroll: Zoom | Right-drag: Pan
     </div>
-    <script src="{viewer_js_url}"></script>
     <script>
         // Auto-load PLY after viewer initializes
         const plyUrl = "{ply_url}";
-        const viewerJsUrl = "{viewer_js_url}";
         console.log("=== Splat Viewer Init ===");
         console.log("PLY URL:", plyUrl);
-        console.log("Viewer JS URL:", viewerJsUrl);
         let attempts = 0;
         const checkAndLoad = setInterval(function() {{
@@ -459,14 +440,25 @@ def create_splat_viewer_html(ply_url: str, viewer_js_url: str, viewer_id: str) -
                 clearInterval(checkAndLoad);
                 document.getElementById("spinner").style.display = "none";
                 const msg = document.getElementById("message");
-                msg.textContent = "Viewer failed to initialize. Check console for viewer.js errors.";
                 msg.style.display = "block";
             }}
         }}, 100);
     </script>
 </body>
-</html>
-'></iframe>
 """
 def main():

             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>
         <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() {{
                 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():