Beautify

app.py

@@ -220,7 +220,7 @@ def process_and_generate(image_input, image_path_from_state, sidebar_prompt, hea
                     img['src'] = original_src # Keep original if not found
         
         processed_html = str(soup)
-        preview = render_preview(processed_html, 1920, 1080, 0.7)
+        preview = render_preview(processed_html, 1920, 1080, 0.55)
         return preview, processed_html
 
     # --- Process both HTML versions ---
@@ -244,42 +244,147 @@ 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() as demo:
-    gr.Markdown("# ScreenCoder: Screenshot to Code")
+with gr.Blocks(css="""
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+    
+    * {
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
+    }
+    
+    h1, h2, h3, h4, h5, h6 {
+        font-weight: 600 !important;
+        color: #1f2937 !important;
+        letter-spacing: -0.025em !important;
+    }
+    
+    h1 {
+        font-size: 2.25rem !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;
+    }
+    
+    h2 {
+        font-size: 1.5rem !important;
+        font-weight: 600 !important;
+        color: #374151 !important;
+        margin-bottom: 1rem !important;
+    }
+    
+    .gr-button {
+        font-weight: 500 !important;
+        border-radius: 8px !important;
+        transition: all 0.2s ease !important;
+    }
+    
+    .gr-button:hover {
+        transform: translateY(-1px) !important;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+    }
+    
+    .gr-textbox, .gr-slider {
+        border-radius: 8px !important;
+    }
+    
+    .gr-textbox input, .gr-textbox textarea {
+        font-family: 'Inter', sans-serif !important;
+        font-size: 14px !important;
+    }
+    
+    .gr-slider {
+        font-family: 'Inter', sans-serif !important;
+    }
+    
+    .gr-tabs {
+        border-radius: 12px !important;
+        overflow: hidden !important;
+    }
+    
+    .gr-tab-nav {
+        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
+    }
+    
+    .gr-tab-nav button {
+        font-weight: 500 !important;
+        color: #64748b !important;
+        transition: all 0.2s ease !important;
+    }
+    
+    .gr-tab-nav button.selected {
+        color: #3b82f6 !important;
+        background: white !important;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+    }
+    
+    .gr-accordion {
+        border-radius: 8px !important;
+        border: 1px solid #e5e7eb !important;
+    }
+    
+    .gr-accordion-header {
+        font-weight: 500 !important;
+        color: #374151 !important;
+    }
+    
+    .gr-markdown {
+        font-family: 'Inter', sans-serif !important;
+        line-height: 1.6 !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;
+    }
+    
+    .gr-examples-header {
+        font-weight: 600 !important;
+        color: #374151 !important;
+    }
+""") as demo:
+    gr.Markdown("# 🎨 ScreenCoder: Screenshot to Code")
     with gr.Row():
         with gr.Column(scale=1):
-            gr.Markdown("### Step 1: Provide an Image")
+            gr.Markdown("## 📸 Step 1: Provide an Image")
             active_image = gr.Image(type="filepath", height=400)
-            upload_button = gr.UploadButton("Click to Upload", file_types=["image"], variant="primary")
+            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...")
+            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):
-            gr.Markdown("### Preview Area")
-            gr.Markdown("**Tip**: Use the sliders below to adjust the preview size and zoom level for better viewing experience. You can also adjust the page's viewing angle by swiping up, down, left, or right.")
+            gr.Markdown("## 👀 Preview Area")
+            gr.Markdown("**💡 Tips**: - Use the sliders below to adjust the preview size and zoom level for better viewing experience. - You can also adjust the page's viewing angle by swiping up, down, left, or right.")
             with gr.Tabs():
-                with gr.TabItem("Preview"):
+                with gr.TabItem("🖼️ Preview"):
                     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=100, label="Canvas Width (px)")
-                        height_slider = gr.Slider(300, 1200, value=1080, step=50, label="Canvas Height (px)")
+                        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 Placeholder"):
+                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)")
+                        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"):
+                with gr.TabItem("💻 Code"):
                     html_code_output = gr.Code(label="Generated HTML", language="html")
 
             download_button = gr.Button("⬇️ Download Package", visible=False, variant="secondary")
@@ -288,7 +393,7 @@ with gr.Blocks() as demo:
         examples=example_rows,
         inputs=[active_image, sidebar_prompt, header_prompt, navigation_prompt, main_content_prompt],
         cache_examples=False,
-        label="Examples"
+        label="📚 Examples"
     )
     
     # State to hold the HTML content for each preview tab