Implement proper CSS/JS path fixing for iframe compatibility in Hugging Face Spaces

app.py

@@ -63,6 +63,39 @@ def image_to_data_url(image_path):
         print(f"Error converting image to data URL: {e}")
         return None
 
+def patch_css_js_paths(soup: BeautifulSoup, output_dir: Path):
+    """
+    Fix CSS and JS paths in the HTML to work with Gradio's file serving.
+    Converts relative paths to /file= paths or removes them if files don't exist.
+    """
+    # CSS
+    for link in soup.find_all("link", rel=lambda x: x and "stylesheet" in x):
+        href = link.get("href", "")
+        if href.startswith(("http", "data:")):
+            continue
+        f = output_dir / href.lstrip("./")
+        if f.exists():
+            link["href"] = f"/file={f}"
+            print(f"Fixed CSS path: {href} -> /file={f}")
+        else:
+            print(f"Removing non-existent CSS: {href}")
+            link.decompose()
+
+    # JS
+    for script in soup.find_all("script", src=True):
+        src = script["src"]
+        if src.startswith(("http", "data:")):
+            continue
+        f = output_dir / src.lstrip("./")
+        if f.exists():
+            script["src"] = f"/file={f}"
+            print(f"Fixed JS path: {src} -> /file={f}")
+        else:
+            print(f"Removing non-existent JS: {src}")
+            script.decompose()
+
+    return soup
+
 def render_preview(code: str, width: int, height: int, scale: float) -> str:
     """
     Preview renderer with both width and height control for the inner canvas.
@@ -71,13 +104,12 @@ def render_preview(code: str, width: int, height: int, scale: float) -> str:
         # Clean up the HTML code to remove problematic script and CSS references
         soup = BeautifulSoup(code, 'html.parser')
         
-        # Remove any script tags that reference problematic files
+        # For preview, we'll just remove problematic references since we don't have the output_dir context
         for script in soup.find_all('script'):
             src = script.get('src', '')
             if src and any(pattern in src for pattern in ['assets/', 'index-', 'iframeResizer']):
                 script.decompose()
         
-        # Remove any link tags that reference problematic CSS files
         for link in soup.find_all('link'):
             href = link.get('href', '')
             if href and any(pattern in href for pattern in ['assets/', 'index-']):
@@ -86,12 +118,6 @@ def render_preview(code: str, width: int, height: int, scale: float) -> str:
         # Get the cleaned HTML
         cleaned_code = str(soup)
         
-        # Additional string-based cleanup for any remaining references
-        cleaned_code = cleaned_code.replace('index-BQPjLISY.js', '')
-        cleaned_code = cleaned_code.replace('index-BOW2xVAS.css', '')
-        cleaned_code = cleaned_code.replace('./assets/', '')
-        cleaned_code = cleaned_code.replace('assets/', '')
-        
     except Exception as e:
         print(f"Error cleaning HTML in render_preview: {e}")
         # Fallback to original code if cleaning fails
@@ -162,32 +188,12 @@ def process_and_generate(image_np, image_path_from_state, sidebar_prompt, header
     
     print(f"Processing HTML for run_id: {run_id}")
     
-    # Clean up problematic script and CSS references with error handling
+    # Fix CSS and JS paths to work with Gradio's file serving
     try:
-        for script in soup.find_all('script'):
-            src = script.get('src', '')
-            if src and any(pattern in src for pattern in ['assets/', 'index-', 'iframeResizer']):
-                print(f"Removing problematic script: {src}")
-                script.decompose()
-        
-        for link in soup.find_all('link'):
-            href = link.get('href', '')
-            if href and any(pattern in href for pattern in ['assets/', 'index-']):
-                print(f"Removing problematic CSS link: {href}")
-                link.decompose()
-        
-        # Additional string-based cleanup for any remaining references
-        html_content = str(soup)
-        html_content = html_content.replace('index-BQPjLISY.js', '')
-        html_content = html_content.replace('index-BOW2xVAS.css', '')
-        html_content = html_content.replace('./assets/', '')
-        html_content = html_content.replace('assets/', '')
-        
-        # Re-parse the cleaned HTML
-        soup = BeautifulSoup(html_content, 'html.parser')
-        
+        output_dir = base_dir / 'screencoder' / 'data' / 'output' / run_id
+        soup = patch_css_js_paths(soup, output_dir)
     except Exception as e:
-        print(f"Error cleaning HTML in process_and_generate: {e}")
+        print(f"Error fixing CSS/JS paths: {e}")
     
     for img in soup.find_all('img'):
         if img.get('src') and not img['src'].startswith(('http', 'data:')):