update the UI

app.py

@@ -126,10 +126,11 @@ 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: 1920px; margin: 0 auto; overflow-x: auto; overflow-y: hidden;">
+    <div style="width: 100%; max-width: 100%; margin: 0 auto; overflow-x: auto; overflow-y: hidden;">
         <div style="
-            width: 1920px;
-            height: 1000px;
+            width: 100%;
+            max-width: 1200px;
+            height: 600px;
             margin: 0 auto;
             display: flex;
             justify-content: center;
@@ -143,7 +144,7 @@ def render_preview(code: str, width: int, height: int, scale: float) -> str:
                 width: {width}px;
                 height: {height}px;
                 transform: scale({scale});
-                transform-origin: top left;
+                transform-origin: center center;
                 border: none;
                 position: relative;">
                 <iframe
@@ -237,45 +238,116 @@ 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() 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...")
+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...")
 
-            generate_btn = gr.Button("Generate HTML", variant="primary")
+                generate_btn = gr.Button("Generate HTML", variant="primary")
 
-        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.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.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")
 
-    gr.Examples(
-        examples=examples_data,
-        fn=lambda *args: args[0],
-        inputs=[gr.State(examples_data[0][0])],
-        outputs=[active_image],
-        cache_examples=False,
-    )
+        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,
+            )
     
     active_image_path_state = gr.State(examples_data[0][5])