update

app.py

@@ -244,7 +244,163 @@ def process_and_generate(image_input, image_path_from_state, sidebar_prompt, hea
     return layout_preview, final_preview, final_code, layout_code, final_code, gr.update(value=package_url, visible=True)
 
 
-with gr.Blocks(theme=gr.themes.Soft()) as demo:
+with gr.Blocks(css="""
+    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+    
+    * {
+        font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
+        font-feature-settings: 'liga' 1, 'calt' 1 !important;
+        text-rendering: optimizeLegibility !important;
+        -webkit-font-smoothing: antialiased !important;
+        -moz-osx-font-smoothing: grayscale !important;
+    }
+    
+    h1, h2, h3, h4, h5, h6 {
+        font-weight: 600 !important;
+        color: #1f2937 !important;
+        letter-spacing: -0.02em !important;
+        line-height: 1.2 !important;
+    }
+    
+    h1 {
+        font-size: 2.5rem !important;
+        font-weight: 700 !important;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        margin-bottom: 1.5rem !important;
+        letter-spacing: -0.03em !important;
+    }
+    
+    h2 {
+        font-size: 1.75rem !important;
+        font-weight: 600 !important;
+        color: #374151 !important;
+        margin-bottom: 1rem !important;
+        letter-spacing: -0.01em !important;
+    }
+    
+    .gr-button {
+        font-weight: 500 !important;
+        font-family: 'Poppins', sans-serif !important;
+        border-radius: 10px !important;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+        letter-spacing: 0.01em !important;
+    }
+    
+    .gr-button:hover {
+        transform: translateY(-2px) !important;
+        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
+    }
+    
+    .gr-textbox, .gr-slider {
+        border-radius: 10px !important;
+        font-family: 'Poppins', sans-serif !important;
+    }
+    
+    .gr-textbox input, .gr-textbox textarea {
+        font-family: 'Poppins', sans-serif !important;
+        font-size: 14px !important;
+        font-weight: 400 !important;
+        letter-spacing: 0.01em !important;
+        line-height: 1.5 !important;
+    }
+    
+    .gr-slider {
+        font-family: 'Poppins', sans-serif !important;
+        font-weight: 500 !important;
+    }
+    
+    .gr-tabs {
+        border-radius: 12px !important;
+        overflow: hidden !important;
+        font-family: 'Poppins', sans-serif !important;
+    }
+    
+    .gr-tab-nav {
+        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
+        font-family: 'Poppins', sans-serif !important;
+    }
+    
+    .gr-tab-nav button {
+        font-weight: 500 !important;
+        font-family: 'Poppins', sans-serif !important;
+        color: #64748b !important;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+        letter-spacing: 0.01em !important;
+    }
+    
+    .gr-tab-nav button.selected {
+        color: #3b82f6 !important;
+        background: white !important;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
+        font-weight: 600 !important;
+    }
+    
+    .gr-accordion {
+        border-radius: 12px !important;
+        border: 1px solid #e5e7eb !important;
+        font-family: 'Poppins', sans-serif !important;
+    }
+    
+    .gr-accordion-header {
+        font-weight: 500 !important;
+        font-family: 'Poppins', sans-serif !important;
+        color: #374151 !important;
+        letter-spacing: 0.01em !important;
+    }
+    
+    .gr-markdown {
+        font-family: 'Poppins', sans-serif !important;
+        line-height: 1.7 !important;
+        font-weight: 400 !important;
+        letter-spacing: 0.01em !important;
+    }
+    
+    .gr-markdown strong {
+        color: #059669 !important;
+        font-weight: 600 !important;
+    }
+    
+    .gr-examples {
+        border-radius: 12px !important;
+        border: 1px solid #e5e7eb !important;
+        background: #f9fafb !important;
+        font-family: 'Poppins', sans-serif !important;
+    }
+    
+    .gr-examples-header {
+        font-weight: 600 !important;
+        font-family: 'Poppins', sans-serif !important;
+        color: #374151 !important;
+        letter-spacing: 0.01em !important;
+    }
+    
+    .gr-code {
+        font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', monospace !important;
+        font-size: 13px !important;
+        line-height: 1.6 !important;
+        letter-spacing: 0.01em !important;
+    }
+    
+    .gr-label {
+        font-family: 'Poppins', sans-serif !important;
+        font-weight: 500 !important;
+        color: #374151 !important;
+        letter-spacing: 0.01em !important;
+    }
+    
+    .gr-dropdown {
+        font-family: 'Poppins', sans-serif !important;
+        font-weight: 400 !important;
+    }
+    
+    .gr-checkbox {
+        font-family: 'Poppins', sans-serif !important;
+        font-weight: 400 !important;
+    }
+""") as demo:
     gr.Markdown("# ScreenCoder: Screenshot to Code")
     with gr.Row():
         with gr.Column(scale=1):
@@ -263,28 +419,26 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
 
         with gr.Column(scale=2):
             gr.Markdown("## Preview Area")
-            gr.Markdown("**Tips**: \n- Use the sliders below to adjust the preview size and zoom level for better viewing experience. \n- Adjust the page's viewing angle by swiping up, down, left, or right. \n- Click the download button on the right to download the generated package.")
-            with gr.Row():
-                with gr.Column(scale=4):
-                    with gr.Tabs():
-                        with gr.TabItem("Preview With Placeholder"):
-                            with gr.Row():
-                                scale_slider = gr.Slider(0.2, 1.5, value=0.55, step=0.05, label="Zoom")
-                                width_slider = gr.Slider(400, 2000, value=1920, step=50, 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 gr.Row():
-                                scale_slider_with_placeholder = gr.Slider(0.2, 1.5, value=0.55, 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")
-                with gr.Column(scale=1):
-                    download_button = gr.Button("Download Package", visible=False, variant="secondary", size="sm")
+            gr.Markdown("**Tips**: \n- Use the sliders below to adjust the preview size and zoom level for better viewing experience. \n- Adjust the page's viewing angle by swiping up, down, left, or right. \n- Click the button at the bottom to download the generated package.")
+            with gr.Tabs():
+                with gr.TabItem("Preview With Placeholder"):
+                    with gr.Row():
+                        scale_slider = gr.Slider(0.2, 1.5, value=0.55, step=0.05, label="Zoom")
+                        width_slider = gr.Slider(400, 2000, value=1920, step=50, 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 gr.Row():
+                        scale_slider_with_placeholder = gr.Slider(0.2, 1.5, value=0.55, 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=example_rows,