update

README.md

@@ -1,14 +1,23 @@
 ---
 title: ScreenCoder
-emoji: 🏃
-colorFrom: purple
-colorTo: pink
+emoji: 🖼️
+colorFrom: blue
+colorTo: green
 sdk: gradio
-sdk_version: 5.38.0
+sdk_version: 4.29.0
 app_file: app.py
 pinned: false
-license: mit
-short_description: Private Space For ScreenCoder Demo
+post_install: "bash setup.sh"
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# ScreenCoder: Screenshot to Code
+
+This is a Hugging Face Space for ScreenCoder, a tool that converts screenshots into HTML code.
+
+## How it works
+
+1.  **Upload a screenshot**: Provide an image of a user interface.
+2.  **Generate HTML**: The tool analyzes the image and generates the corresponding HTML and CSS code.
+3.  **Preview and Download**: You can preview the generated code live and download the complete package.
+
+This application uses various computer vision and code generation techniques to achieve the conversion.

app.py

@@ -10,8 +10,10 @@ import shutil
 import html
 import base64
 from bs4 import BeautifulSoup
+from pathlib import Path
 
 # Predefined examples
+# HF Spaces: Update paths to be relative to the app's root
 examples_data = [
     [
         "screencoder/data/input/test1.png",
@@ -124,7 +126,9 @@ def process_and_generate(image_np, image_path_from_state, sidebar_prompt, header
     if not run_id: # Handle potential errors from the generator
         return "Generation failed.", f"Error: {html_content}", gr.update(visible=False), None
 
-    base_dir = os.path.dirname(os.path.abspath(__file__))
+    # Rewrite image paths to be absolute for Gradio serving
+    # HF Spaces: Use Path objects for robust path handling
+    base_dir = Path(__file__).parent.resolve()
     soup = BeautifulSoup(html_content, 'html.parser')
     
     print(f"Processing HTML for run_id: {run_id}")
@@ -134,64 +138,34 @@ def process_and_generate(image_np, image_path_from_state, sidebar_prompt, header
             original_src = img['src']
             print(f"Processing image: {original_src}")
             
-            if original_src.startswith('/'):
-                img_path = os.path.join(base_dir, original_src.lstrip('/'))
-            else:
-                possible_paths = [
-                    os.path.join(base_dir, 'screencoder', 'data', 'output', run_id, original_src),
-                    os.path.join(base_dir, 'screencoder', 'data', 'output', run_id, 'cropped_images', original_src),
-                    os.path.join(base_dir, 'screencoder', 'data', 'output', run_id, f'cropped_images_{run_id}', original_src),
-                    os.path.join(base_dir, 'screencoder', 'data', 'output', run_id, os.path.basename(original_src)),
-                    os.path.join(base_dir, 'screencoder', 'data', 'output', run_id, original_src.lstrip('./').lstrip('../')),
-                ]
-                
-                img_path = None
-                for path in possible_paths:
-                    if os.path.exists(path):
-                        img_path = path
-                        print(f"Found image at: {path}")
-                        break
-                
-                if not img_path:
-                    print(f"Could not find image: {original_src}")
-                    # Try to convert to data URL as last resort
-                    fallback_path = os.path.join(base_dir, 'screencoder', 'data', 'output', run_id, original_src)
-                    data_url = image_to_data_url(fallback_path)
-                    if data_url:
-                        print(f"Converted to data URL: {original_src}")
-                        img['src'] = data_url
-                    else:
-                        img['src'] = original_src
-                    continue
+            # In HF Spaces, paths can be tricky. We'll rely on the fact
+            # that the image replacer creates a predictable structure.
+            img_path = base_dir / 'screencoder' / 'data' / 'output' / run_id / original_src
             
-            # Check if the image file actually exists
-            if img_path and os.path.exists(img_path):
-                print(f"Found image: {img_path}")
+            if img_path.exists():
+                print(f"Found image at: {img_path}")
                 # Convert to base64 data URL for better iframe compatibility
-                data_url = image_to_data_url(img_path)
+                data_url = image_to_data_url(str(img_path))
                 if data_url:
                     print(f"Converted to data URL: {original_src}")
                     img['src'] = data_url
                 else:
-                    # Fallback to Gradio file path
-                    img['src'] = f'/file={img_path}'
+                    # Fallback to Gradio file path (might not work in all Spaces configs)
+                    img['src'] = f'/file={str(img_path)}'
             else:
-                print(f"Image not found: {img_path}")
-                data_url = image_to_data_url(img_path)
-                if data_url:
-                    print(f"Converted to data URL: {original_src}")
-                    img['src'] = data_url
-                else:
-                    img['src'] = original_src
+                print(f"Image not found at expected path: {img_path}")
+                # Keep original path as fallback
+                img['src'] = original_src
     
     html_content = str(soup)
 
-    output_dir = os.path.join(base_dir, 'screencoder', 'data', 'output', run_id)
-    packages_dir = os.path.join(base_dir, 'screencoder', 'data', 'packages')
-    os.makedirs(packages_dir, exist_ok=True)
-    shutil.make_archive(os.path.join(packages_dir, run_id), 'zip', output_dir)
-    package_path = os.path.join(packages_dir, f'{run_id}.zip')
-    package_url = f'/file={package_path}'
+    output_dir = base_dir / 'screencoder' / 'data' / 'output' / run_id
+    packages_dir = base_dir / 'screencoder' / 'data' / 'packages'
+    packages_dir.mkdir(exist_ok=True)
+    
+    shutil.make_archive(str(packages_dir / run_id), 'zip', str(output_dir))
+    package_path = packages_dir / f'{run_id}.zip'
+    package_url = f'/file={str(package_path)}'
     
     if is_temp_file:
         os.unlink(final_image_path)
@@ -273,15 +247,20 @@ with gr.Blocks(head=TAILWIND_SCRIPT, theme=gr.themes.Soft(primary_hue="blue", se
     download_button.click(None, download_button, None, js= \
         "(url) => { const link = document.createElement('a'); link.href = url; link.download = ''; document.body.appendChild(link); link.click(); document.body.removeChild(link); }")
 
-base_dir = os.path.dirname(os.path.abspath(__file__))
+base_dir = Path(__file__).parent.resolve()
 allowed_paths = [
-    os.path.join(base_dir),
-    os.path.join(base_dir, 'screencoder', 'data'),
-    os.path.join(base_dir, 'screencoder', 'data', 'output'),
-    os.path.join(base_dir, 'screencoder', 'data', 'packages')
+    str(base_dir),
+    str(base_dir / 'screencoder' / 'data' / 'output'),
+    str(base_dir / 'screencoder' / 'data' / 'packages')
 ]
 
-print(f"Allowed paths for file serving:")
+# Add all example file paths to allowed_paths to ensure they are accessible
+for example in examples_data:
+    example_path = Path(example[0]).parent
+    if str(example_path) not in allowed_paths:
+        allowed_paths.append(str(example_path))
+
+print("Allowed paths for file serving:")
 for path in allowed_paths:
     print(f"  - {path}")
 

packages.txt

@@ -0,0 +1,2 @@
+libvips-dev
+libpangocairo-1.0-0 

requirements.txt

@@ -1,4 +1,4 @@
-gradio
+gradio==4.29.0
 Pillow>=10.0.0
 beautifulsoup4>=4.12.0
 volcengine-python-sdk[ark]>=1.0.0

screencoder/image_box_detection.py

@@ -117,10 +117,8 @@ def main():
 
     # --- Dynamic Path Construction ---
     base_dir = Path(__file__).parent.resolve()
-    # Go up one level to the project root to find the data directory
-    project_root = base_dir.parent 
-    tmp_dir = project_root / 'screencoder' / 'data' / 'tmp' / run_id
-    output_dir = project_root / 'screencoder' / 'data' / 'output' / run_id
+    tmp_dir = base_dir / 'data' / 'tmp' / run_id
+    output_dir = base_dir / 'data' / 'output' / run_id
     
     html_path = output_dir / f"{run_id}_layout.html"
     screenshot_path = tmp_dir / f"{run_id}.png"

screencoder/main.py

@@ -5,6 +5,7 @@ import json
 import uuid
 import shutil
 from PIL import Image
+from pathlib import Path
 
 # This function is now more robust, injecting the prompt into a temporary copy of the generator.
 def inject_prompt_to_generator(prompt_text, temp_generator_path):
@@ -35,20 +36,21 @@ def inject_prompt_to_generator(prompt_text, temp_generator_path):
 
 def run_script_with_run_id(script_name, run_id, instructions=None):
     """Executes a script with a specific run_id and optional instructions."""
-    screencoder_dir = os.path.dirname(os.path.abspath(__file__))
-    script_path = os.path.join(screencoder_dir, script_name)
-    if not os.path.exists(script_path):
+    # HF Spaces: Use absolute paths based on the script's location
+    screencoder_dir = Path(__file__).parent.resolve()
+    script_path = screencoder_dir / script_name
+    if not script_path.exists():
         # Handle scripts inside subdirectories like UIED/
-        script_path = os.path.join(screencoder_dir, "UIED", script_name)
-    
-    command = ["python", script_path, "--run_id", run_id]
-    
+        script_path = screencoder_dir / "UIED" / script_name
+
+    command = [sys.executable, str(script_path), "--run_id", run_id]
+
     # Add instructions to the command if provided
-    if instructions and script_name == "html_generator.py":
+    if instructions and "html_generator.py" in str(script_path):
         instructions_json = json.dumps(instructions)
         command.extend(["--instructions", instructions_json])
 
-    print(f"\n--- Running script: {script_name} ---")
+    print(f"\n--- Running script: {script_path.name} ---")
     try:
         # Pass the current environment variables to the subprocess
         result = subprocess.run(command, check=True, capture_output=True, text=True, env=os.environ)
@@ -57,7 +59,7 @@ def run_script_with_run_id(script_name, run_id, instructions=None):
             print("Error:")
             print(result.stderr)
     except subprocess.CalledProcessError as e:
-        print(f"Error executing {script_name}:")
+        print(f"Error executing {script_path.name}:")
         print(e.stdout)
         print(e.stderr)
         raise  # Re-raise the exception to stop the workflow if a script fails
@@ -73,15 +75,16 @@ def generate_html_for_demo(image_path, instructions):
     run_id = str(uuid.uuid4())
     print(f"--- Starting Screencoder workflow for run_id: {run_id} ---")
     
-    base_dir = os.path.dirname(os.path.abspath(__file__))
-    tmp_dir = os.path.join(base_dir, 'data', 'tmp', run_id)
-    output_dir = os.path.join(base_dir, 'data', 'output', run_id)
+    # HF Spaces: Use absolute paths and pathlib for robustness
+    base_dir = Path(__file__).parent.resolve()
+    tmp_dir = base_dir / 'data' / 'tmp' / run_id
+    output_dir = base_dir / 'data' / 'output' / run_id
     os.makedirs(tmp_dir, exist_ok=True)
     os.makedirs(output_dir, exist_ok=True)
 
     try:
         # 1. Copy user-uploaded image to the temp input directory
-        new_image_path = os.path.join(tmp_dir, f"{run_id}.png")
+        new_image_path = tmp_dir / f"{run_id}.png"
         img = Image.open(image_path)
         img.save(new_image_path, "PNG")
 
@@ -94,8 +97,8 @@ def generate_html_for_demo(image_path, instructions):
         run_script_with_run_id("image_replacer.py", run_id)
 
         # 3. Read the final generated HTML
-        final_html_path = os.path.join(output_dir, f"{run_id}_layout_final.html")
-        if os.path.exists(final_html_path):
+        final_html_path = output_dir / f"{run_id}_layout_final.html"
+        if final_html_path.exists():
             with open(final_html_path, 'r', encoding='utf-8') as f:
                 html_content = f.read()
             print(f"Successfully generated HTML for run_id: {run_id}")
@@ -120,15 +123,12 @@ def generate_html_for_demo(image_path, instructions):
 def main():
     """Main function to run the entire Screencoder workflow (legacy)."""
     print("Starting the Screencoder full workflow (legacy)...")
-    # This main function is now considered legacy and does not use dynamic run_ids.
-    # It will continue to use the hardcoded paths.
+    # This main function is now considered legacy and should not be used in HF Spaces.
     run_id = "test1"  # Hardcoded for legacy main
-    run_script_with_run_id("UIED/run_single.py", run_id)
-    run_script_with_run_id("block_parsor.py", run_id)
-    run_script_with_run_id("html_generator.py", run_id)
-    run_script_with_run_id("image_box_detection.py", run_id)
-    run_script_with_run_id("mapping.py", run_id)
-    run_script_with_run_id("image_replacer.py", run_id)
+    # Use a dummy image path for legacy run
+    dummy_image_path = Path(__file__).parent.resolve() / "data" / "input" / "test1.png"
+    instructions = {"main content": "Generate the HTML for this screenshot."}
+    generate_html_for_demo(str(dummy_image_path), instructions)
     print("\nScreencoder workflow completed successfully!")
 
 if __name__ == "__main__":

setup.sh

@@ -0,0 +1,9 @@
+#!/bin/bash
+
+# This script is executed after the 'pip install -r requirements.txt' and before the execution of the app.
+
+# 1. Install playwright browsers
+echo "Installing playwright browsers..."
+python -m playwright install --with-deps
+
+echo "Setup complete."