Update

app.py

@@ -39,6 +39,7 @@ examples_data = [
         "screencoder/data/input/test3.png"
     ],
 ]
+example_rows = [row[:5] for row in examples_data]
 
 # TAILWIND_SCRIPT = "<script src='https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4'></script>"
 
@@ -156,93 +157,99 @@ def render_preview(code: str, width: int, height: int, scale: float) -> str:
     """
     return iframe_html
 
-def process_and_generate(image_np, image_path_from_state, sidebar_prompt, header_prompt, navigation_prompt, main_content_prompt):
+def process_and_generate(image_input, image_path_from_state, sidebar_prompt, header_prompt, navigation_prompt, main_content_prompt):
     """
-    Main processing pipeline: takes an image, generates code, creates a downloadable
-    package, and returns the initial preview and code outputs.
+    Main processing pipeline: takes an image (path or numpy), generates code, creates a downloadable
+    package, and returns the initial preview and code outputs for both layout and final versions.
     """
     final_image_path = ""
     is_temp_file = False
-    if image_path_from_state:
-        final_image_path = image_path_from_state
-    elif image_np is not None:
+
+    # Handle image_input which can be a numpy array (from upload) or a string (from example)
+    if isinstance(image_input, str) and os.path.exists(image_input):
+        final_image_path = image_input
+    elif image_input is not None:  # Assumes numpy array
         is_temp_file = True
         with tempfile.NamedTemporaryFile(suffix=".png", delete=False) as tmp:
-            cv2.imwrite(tmp.name, cv2.cvtColor(image_np, cv2.COLOR_RGB2BGR))
+            # Gradio Image component provides RGB numpy array
+            cv2.imwrite(tmp.name, cv2.cvtColor(image_input, cv2.COLOR_RGB2BGR))
             final_image_path = tmp.name
+    elif image_path_from_state:
+        final_image_path = image_path_from_state
     else:
-        return "No image provided.", "Please upload or select an image.", gr.update(visible=False), None
-
+        # Return empty values for all outputs
+        return "No image provided.", "", "", "Please upload or select an image.", gr.update(visible=False), None
+    
     instructions = {
         "sidebar": sidebar_prompt, "header": header_prompt,
         "navigation": navigation_prompt, "main content": main_content_prompt
     }
-    html_content, run_id = generate_html_for_demo(final_image_path, instructions)
+    layout_html, final_html, run_id = generate_html_for_demo(final_image_path, instructions)
 
     if not run_id: # Handle potential errors from the generator
-        return "Generation failed.", f"Error: {html_content}", gr.update(visible=False), None
+        error_message = f"Generation failed. Error: {layout_html}"
+        return error_message, "", "", error_message, gr.update(visible=False), None
 
-    # 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}")
-    
-    # Fix CSS and JS paths to work with Gradio's file serving
-    try:
-        output_dir = base_dir / 'screencoder' / 'data' / 'output' / run_id
-        soup = patch_css_js_paths(soup, output_dir)
-    except Exception as 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:')):
-            original_src = img['src']
-            print(f"Processing image: {original_src}")
-            
-            # 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
+    # --- Helper function to process HTML content ---
+    def process_html(html_content, run_id):
+        if not html_content:
+            return "", "" # Return empty strings if content is missing
             
-            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(str(img_path))
-                if data_url:
-                    print(f"Converted to data URL: {original_src}")
-                    img['src'] = data_url
+        base_dir = Path(__file__).parent.resolve()
+        soup = BeautifulSoup(html_content, 'html.parser')
+        
+        # Fix CSS and JS paths
+        try:
+            output_dir = base_dir / 'screencoder' / 'data' / 'output' / run_id
+            soup = patch_css_js_paths(soup, output_dir)
+        except Exception as e:
+            print(f"Error fixing CSS/JS paths: {e}")
+        
+        # Convert image paths to data URLs
+        for img in soup.find_all('img'):
+            if img.get('src') and not img['src'].startswith(('http', 'data:')):
+                original_src = img['src']
+                img_path = base_dir / 'screencoder' / 'data' / 'output' / run_id / original_src
+                if img_path.exists():
+                    data_url = image_to_data_url(str(img_path))
+                    if data_url:
+                        img['src'] = data_url
+                    else:
+                        img['src'] = f'/file={str(img_path)}'
                 else:
-                    # 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 at expected path: {img_path}")
-                # Keep original path as fallback
-                img['src'] = original_src
-    
-    html_content = str(soup)
+                    img['src'] = original_src # Keep original if not found
+        
+        processed_html = str(soup)
+        preview = render_preview(processed_html, 1920, 1080, 0.7)
+        return preview, processed_html
 
+    # --- Process both HTML versions ---
+    layout_preview, layout_code = process_html(layout_html, run_id)
+    final_preview, final_code = process_html(final_html, run_id)
+
+    # --- Package the output ---
+    base_dir = Path(__file__).parent.resolve()
     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'
+    shutil.make_archive(str(packages_dir / run_id), 'zip', str(output_dir))
     package_url = f'/file={str(package_path)}'
     
     if is_temp_file:
         os.unlink(final_image_path)
     
-    initial_preview = render_preview(html_content, 1280, 600, 0.7)
+    # Return all the outputs, including for the state objects
+    return layout_preview, final_preview, layout_code, final_code, gr.update(value=package_url, visible=True)
 
-    return initial_preview, html_content, gr.update(value=package_url, visible=True)
 
 with gr.Blocks() as demo:
     gr.Markdown("# ScreenCoder: Screenshot to Code")
     with gr.Row():
         with gr.Column(scale=1):
             gr.Markdown("### Step 1: Provide an Image")
-            active_image = gr.Image(type="numpy", height=400, value=examples_data[0][0])
+            active_image = gr.Image(type="filepath", height=400)
             upload_button = gr.UploadButton("Click to Upload", file_types=["image"], variant="primary")
             
             gr.Markdown("### Step 2: Write Prompts (Optional)")
@@ -259,34 +266,47 @@ with gr.Blocks() as demo:
                 with gr.TabItem("Preview"):
                     with gr.Row():
                         scale_slider = gr.Slider(0.2, 1.5, value=0.7, step=0.05, label="Zoom")
-                        width_slider = gr.Slider(400, 1920, value=1280, step=100, label="Canvas Width (px)")
-                        height_slider = gr.Slider(300, 1080, value=600, step=50, label="Canvas Height (px)")
+                        width_slider = gr.Slider(400, 2000, value=1920, step=100, label="Canvas Width (px)")
+                        height_slider = gr.Slider(300, 1200, value=1080, step=50, label="Canvas Height (px)")
                     
                     html_preview = gr.HTML(label="Rendered HTML", show_label=False)
-
+                with gr.TabItem("Preview With Placeholder"):
+                    with gr.Row():
+                        scale_slider_with_placeholder = gr.Slider(0.2, 1.5, value=0.7, step=0.05, label="Zoom")
+                        width_slider_with_placeholder = gr.Slider(400, 2000, value=1920, step=100, label="Canvas Width (px)")
+                        height_slider_with_placeholder = gr.Slider(300, 1200, value=1080, step=50, label="Canvas Height (px)")
+                    
+                    html_preview_with_placeholder = gr.HTML(label="Rendered HTML", show_label=False)
                 with gr.TabItem("Code"):
                     html_code_output = gr.Code(label="Generated HTML", language="html")
 
             download_button = gr.Button("⬇️ Download Package", visible=False, variant="secondary")
 
     gr.Examples(
-        examples=examples_data,
-        fn=lambda *args: args[0],
-        inputs=[gr.State(examples_data[0][0])],
-        outputs=[active_image],
+        examples=example_rows,
+        inputs=[active_image, sidebar_prompt, header_prompt, navigation_prompt, main_content_prompt],
         cache_examples=False,
+        label="Examples"
     )
     
-    active_image_path_state = gr.State(examples_data[0][5])
+    # State to hold the HTML content for each preview tab
+    layout_code_state = gr.State("")
+    final_code_state = gr.State("")
+    active_image_path_state = gr.State()
 
-    def handle_example_click(img_path):
-        return img_path, img_path
+    active_image.change(
+        lambda p: p if isinstance(p, str) else None,
+        inputs=active_image,
+        outputs=active_image_path_state,
+        show_progress=False
+    )
     
     demo.load(
-        lambda: (examples_data[0][0], examples_data[0][5]), None, [active_image, active_image_path_state]
+        lambda: (examples_data[0][0], examples_data[0][0]), None, [active_image, active_image_path_state]
     )
     
     def handle_upload(uploaded_image_np):
+        # When a new image is uploaded, it's numpy. Clear the path state.
         return uploaded_image_np, None, gr.update(visible=False)
     
     upload_button.upload(handle_upload, upload_button, [active_image, active_image_path_state, download_button])
@@ -294,7 +314,7 @@ with gr.Blocks() as demo:
     generate_btn.click(
         process_and_generate,
         [active_image, active_image_path_state, sidebar_prompt, header_prompt, navigation_prompt, main_content_prompt],
-        [html_preview, html_code_output, download_button],
+        [html_preview, html_preview_with_placeholder, layout_code_state, final_code_state, download_button],
         show_progress="full"
     )
 
@@ -302,11 +322,20 @@ with gr.Blocks() as demo:
     for control in preview_controls:
         control.change(
             render_preview,
-            [html_code_output, width_slider, height_slider, scale_slider],
+            [layout_code_state, width_slider, height_slider, scale_slider],
             html_preview,
             show_progress=True
         )
 
+    preview_controls_with_placeholder = [scale_slider_with_placeholder, width_slider_with_placeholder, height_slider_with_placeholder]
+    for control in preview_controls_with_placeholder:
+        control.change(
+            render_preview,
+            [final_code_state, width_slider_with_placeholder, height_slider_with_placeholder, scale_slider_with_placeholder],
+            html_preview_with_placeholder,
+            show_progress=True
+        )
+
     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); }")
 
@@ -317,10 +346,7 @@ allowed_paths = [
     str(base_dir / 'screencoder' / 'data' / 'packages')
 ]
 
-# Add all example file paths to allowed_paths to ensure they are accessible
 for example in examples_data:
-    # HF Spaces: Ensure the path is absolute by joining with base_dir
-    # The example path is relative, so we join it with the base_dir to make it absolute.
     example_abs_path = (base_dir / example[0]).resolve()
     example_dir = example_abs_path.parent
     if str(example_dir) not in allowed_paths:

screencoder/main.py

@@ -103,21 +103,32 @@ def generate_html_for_demo(image_path, instructions):
         run_script_with_run_id("mapping.py", run_id)
         run_script_with_run_id("image_replacer.py", run_id)
 
-        # 3. Read the final generated HTML
+        # 3. Read the generated HTML files
+        layout_html_path = output_dir / f"{run_id}_layout.html"
         final_html_path = output_dir / f"{run_id}_layout_final.html"
+
+        layout_html_content = ""
+        if layout_html_path.exists():
+            with open(layout_html_path, 'r', encoding='utf-8') as f:
+                layout_html_content = f.read()
+            print(f"Successfully read layout HTML for run_id: {run_id}")
+        else:
+            print(f"Warning: Layout HTML file not found for run_id: {run_id}")
+
         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}")
-            return html_content, run_id
+                final_html_content = f.read()
+            print(f"Successfully generated final HTML for run_id: {run_id}")
+            return layout_html_content, final_html_content, run_id
         else:
             error_msg = f"Error: Final HTML file not found for run_id: {run_id}"
-            return error_msg, run_id
+            return error_msg, None, run_id
 
     except Exception as e:
         error_msg = f"An error occurred: {e}"
         print(f"An error occurred during the workflow for run_id {run_id}: {e}")
-        return error_msg, run_id
+        # Return signature needs to match success case
+        return error_msg, None, run_id
     finally:
         # 4. Cleanup: Remove temporary directories
         try: