retrieve

app.py

@@ -126,11 +126,10 @@ def render_preview(code: str, width: int, height: int, scale: float) -> str:
     
     safe_code = html.escape(cleaned_code).replace("'", "'")
     iframe_html = f"""
-    <div style="width: 100%; max-width: 100%; margin: 0 auto; overflow-x: auto; overflow-y: hidden;">
+    <div style="width: 100%; max-width: 1920px; margin: 0 auto; overflow-x: auto; overflow-y: hidden;">
         <div style="
-            width: 100%;
-            max-width: 1200px;
-            height: 600px;
+            width: 1920px;
+            height: 1000px;
             margin: 0 auto;
             display: flex;
             justify-content: center;
@@ -144,7 +143,7 @@ def render_preview(code: str, width: int, height: int, scale: float) -> str:
                 width: {width}px;
                 height: {height}px;
                 transform: scale({scale});
-                transform-origin: center center;
+                transform-origin: left center;
                 border: none;
                 position: relative;">
                 <iframe
@@ -238,116 +237,45 @@ def process_and_generate(image_np, image_path_from_state, sidebar_prompt, header
 
     return initial_preview, html_content, gr.update(value=package_url, visible=True)
 
-with gr.Blocks(css="""
-    .main-container {
-        height: 100vh;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-    }
-    .content-row {
-        flex: 1;
-        overflow: hidden;
-        display: flex;
-        min-height: 0;
-    }
-    .left-column {
-        width: 33%;
-        min-width: 350px;
-        overflow-y: auto;
-        padding: 20px;
-        border-right: 1px solid #e0e0e0;
-        background: #fafafa;
-        display: flex;
-        flex-direction: column;
-    }
-    .right-column {
-        flex: 1;
-        overflow-y: auto;
-        padding: 20px;
-        background: white;
-        display: flex;
-        flex-direction: column;
-    }
-    .header {
-        padding: 20px;
-        border-bottom: 1px solid #e0e0e0;
-        background: white;
-        flex-shrink: 0;
-    }
-    .examples-section {
-        padding: 20px;
-        border-top: 1px solid #e0e0e0;
-        background: #f5f5f5;
-        flex-shrink: 0;
-    }
-    .left-column > * {
-        margin-bottom: 15px;
-    }
-    .right-column .tabs {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-    }
-    .right-column .tab-nav {
-        flex-shrink: 0;
-    }
-    .right-column .tab-content {
-        flex: 1;
-        overflow: auto;
-    }
-    @media (max-width: 768px) {
-        .content-row {
-            flex-direction: column;
-        }
-        .left-column, .right-column {
-            width: 100%;
-            min-width: auto;
-        }
-    }
-""") as demo:
-    with gr.Column(elem_classes=["main-container"]):
-        with gr.Column(elem_classes=["header"]):
-            gr.Markdown("# ScreenCoder: Screenshot to Code")
-        
-        with gr.Row(elem_classes=["content-row"]):
-            with gr.Column(elem_classes=["left-column"]):
-                gr.Markdown("### Step 1: Provide an Image")
-                active_image = gr.Image(type="numpy", height=400, value=examples_data[0][0])
-                upload_button = gr.UploadButton("Click to Upload", file_types=["image"], variant="primary")
-                
-                gr.Markdown("### Step 2: Write Prompts (Optional)")
-                with gr.Accordion("Component-specific Prompts", open=False):
-                    sidebar_prompt = gr.Textbox(label="Sidebar", placeholder="Instructions for the sidebar...")
-                    header_prompt = gr.Textbox(label="Header", placeholder="Instructions for the header...")
-                    navigation_prompt = gr.Textbox(label="Navigation", placeholder="Instructions for the navigation...")
-                    main_content_prompt = gr.Textbox(label="Main Content", placeholder="Instructions for the main content...")
+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])
+            upload_button = gr.UploadButton("Click to Upload", file_types=["image"], variant="primary")
+            
+            gr.Markdown("### Step 2: Write Prompts (Optional)")
+            with gr.Accordion("Component-specific Prompts", open=False):
+                sidebar_prompt = gr.Textbox(label="Sidebar", placeholder="Instructions for the sidebar...")
+                header_prompt = gr.Textbox(label="Header", placeholder="Instructions for the header...")
+                navigation_prompt = gr.Textbox(label="Navigation", placeholder="Instructions for the navigation...")
+                main_content_prompt = gr.Textbox(label="Main Content", placeholder="Instructions for the main content...")
 
-                generate_btn = gr.Button("Generate HTML", variant="primary")
+            generate_btn = gr.Button("Generate HTML", variant="primary")
 
-            with gr.Column(elem_classes=["right-column"]):
-                with gr.Tabs():
-                    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)")
-                        
-                        html_preview = gr.HTML(label="Rendered HTML", show_label=False)
+        with gr.Column(scale=2):
+            with gr.Tabs():
+                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)")
+                    
+                    html_preview = gr.HTML(label="Rendered HTML", show_label=False)
 
-                    with gr.TabItem("Code"):
-                        html_code_output = gr.Code(label="Generated HTML", language="html")
+                with gr.TabItem("Code"):
+                    html_code_output = gr.Code(label="Generated HTML", language="html")
 
-                download_button = gr.Button("⬇️ Download Package", visible=False, variant="secondary")
+            download_button = gr.Button("⬇️ Download Package", visible=False, variant="secondary")
 
-        with gr.Column(elem_classes=["examples-section"]):
-            gr.Examples(
-                examples=examples_data,
-                fn=lambda *args: args[0],
-                inputs=[gr.State(examples_data[0][0])],
-                outputs=[active_image],
-                cache_examples=False,
-            )
+    gr.Examples(
+        examples=examples_data,
+        fn=lambda *args: args[0],
+        inputs=[gr.State(examples_data[0][0])],
+        outputs=[active_image],
+        cache_examples=False,
+    )
     
     active_image_path_state = gr.State(examples_data[0][5])