Update app.py

app.py

@@ -125,7 +125,7 @@ body {
     background-color: #f0f4f8;
 }
 .container {
-    max-width: 800px;
+    max-width: 1200px;
     margin: 0 auto;
     padding: 20px;
     background-color: white;
@@ -141,6 +141,7 @@ h1 {
     border: 1px solid #bdc3c7;
     border-radius: 5px;
     padding: 10px;
+    margin-bottom: 10px;
 }
 .input-box:focus, .output-box:focus {
     border-color: #3498db;
@@ -158,23 +159,40 @@ h1 {
 .submit-btn:hover {
     background-color: #3498db;
 }
+.gr-form {
+    border: 1px solid #e0e0e0;
+    border-radius: 10px;
+    padding: 20px;
+    margin-bottom: 20px;
+    background-color: #f9f9f9;
+}
+.gr-box {
+    border: 1px solid #e0e0e0;
+    border-radius: 10px;
+    padding: 20px;
+    margin-bottom: 20px;
+    background-color: #ffffff;
+}
 """
 
     
 # Gradio Interface
 with gr.Blocks(css=css) as demo:
-    gr.Markdown("# SD3 Image Generator + VLM Captioner + Prompt Enhancer")
+    gr.Markdown("# VLM Captioner + Prompt Enhancer + SD3 Image Generator")
     
     with gr.Row():
-        with gr.Column():
-            input_image = gr.Image(label="Input Image for VLM")
-            text_prompt = gr.Textbox(label="Text Prompt")
-            use_vlm = gr.Checkbox(label="Use VLM Captioner", value=False)
-            use_enhancer = gr.Checkbox(label="Use Prompt Enhancer", value=False)
-            model_choice = gr.Radio(["Medium", "Long"], label="Enhancer Model", value="Long")
+        with gr.Column(scale=1):
+            with gr.Box():
+                input_image = gr.Image(label="Input Image for VLM", elem_classes="input-box")
+                use_vlm = gr.Checkbox(label="Use VLM Captioner", value=False)
+            
+            with gr.Box():
+                text_prompt = gr.Textbox(label="Text Prompt", elem_classes="input-box")
+                use_enhancer = gr.Checkbox(label="Use Prompt Enhancer", value=False)
+                model_choice = gr.Radio(["Medium", "Long"], label="Enhancer Model", value="Long")
             
             with gr.Accordion("Advanced Settings", open=False):
-                negative_prompt = gr.Textbox(label="Negative Prompt")
+                negative_prompt = gr.Textbox(label="Negative Prompt", elem_classes="input-box")
                 seed = gr.Slider(label="Seed", minimum=0, maximum=MAX_SEED, step=1, value=0)
                 randomize_seed = gr.Checkbox(label="Randomize Seed", value=True)
                 width = gr.Slider(label="Width", minimum=256, maximum=MAX_IMAGE_SIZE, step=64, value=1024)
@@ -182,12 +200,12 @@ with gr.Blocks(css=css) as demo:
                 guidance_scale = gr.Slider(label="Guidance Scale", minimum=0.0, maximum=10.0, step=0.1, value=5.0)
                 num_inference_steps = gr.Slider(label="Inference Steps", minimum=1, maximum=50, step=1, value=28)
             
-            generate_btn = gr.Button("Generate Image")
+            generate_btn = gr.Button("Generate Image", elem_classes="submit-btn")
         
-        with gr.Column():
-            output_image = gr.Image(label="Generated Image")
-            final_prompt = gr.Textbox(label="Final Prompt Used")
-            used_seed = gr.Number(label="Seed Used")
+        with gr.Column(scale=1):
+            output_image = gr.Image(label="Generated Image", elem_classes="output-box")
+            final_prompt = gr.Textbox(label="Final Prompt Used", elem_classes="output-box")
+            used_seed = gr.Number(label="Seed Used", elem_classes="output-box")
     
     generate_btn.click(
         fn=process_workflow,