Refine UI layout

app.py

@@ -244,7 +244,7 @@ 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(css="""
+with gr.Blocks(theme=gr.theme.soft(), css="""
     @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
     
     * {
@@ -368,26 +368,28 @@ with gr.Blocks(css="""
 
         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 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.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.Examples(
         examples=example_rows,