Initial Commit

app.py

@@ -163,61 +163,98 @@ class FluxInterface:
 interface = FluxInterface()
 
 # Create Gradio interface
-with gr.Blocks() as demo:
-    gr.Markdown("""
-    # 🎨 Qwen2vl-Flux Image Variation Demo
-    Upload an image and get AI-generated variations. You can optionally add a text prompt to guide the generation.
-    """)
-    
-    with gr.Row():
-        with gr.Column(scale=1):
-            input_image = gr.Image(
-                label="Upload Image",
-                type="pil",
-                height=384
-            )
-            prompt = gr.Textbox(
-                label="Optional Text Prompt, As Long As Possible",
-                placeholder="Enter text prompt here (optional)",
-                lines=2
-            )
+with gr.Blocks(css="""
+    .container { max-width: 1200px; margin: auto; padding: 20px; }
+    .header { text-align: center; margin-bottom: 40px; }
+    .gr-form { border: 1px solid #e0e0e0; padding: 20px; border-radius: 8px; background: white; }
+    .gr-box { border: 1px solid #e0e0e0; padding: 10px; border-radius: 4px; margin: 5px 0; }
+    .gr-button { height: 40px; }
+    .gr-gallery { min-height: 400px; }
+""") as demo:
+    with gr.Column(elem_classes="container"):
+        gr.Markdown("""
+        <div class="header">
+            # 🎨 Qwen2vl-Flux Image Variation Demo
+            Upload an image and get AI-generated variations. You can optionally add a text prompt to guide the generation.
+        </div>
+        """)
+        
+        with gr.Row():
+            with gr.Column(scale=1, min_width=400):
+                with gr.Box(elem_classes="gr-form"):
+                    input_image = gr.Image(
+                        label="Upload Image",
+                        type="pil",
+                        height=400,
+                        elem_classes="gr-box"
+                    )
+                    prompt = gr.Textbox(
+                        label="Optional Text Prompt",
+                        placeholder="Enter text prompt here (optional)",
+                        lines=2,
+                        elem_classes="gr-box"
+                    )
+                    
+                    with gr.Group():
+                        with gr.Row():
+                            with gr.Column(scale=1):
+                                guidance = gr.Slider(
+                                    minimum=1,
+                                    maximum=10,
+                                    value=3.5,
+                                    step=0.5,
+                                    label="Guidance Scale",
+                                    elem_classes="gr-box"
+                                )
+                            with gr.Column(scale=1):
+                                steps = gr.Slider(
+                                    minimum=1,
+                                    maximum=50,
+                                    value=28,
+                                    step=1,
+                                    label="Number of Steps",
+                                    elem_classes="gr-box"
+                                )
+                        with gr.Row():
+                            with gr.Column(scale=1):
+                                num_images = gr.Slider(
+                                    minimum=1,
+                                    maximum=4,
+                                    value=2,
+                                    step=1,
+                                    label="Number of Images",
+                                    elem_classes="gr-box"
+                                )
+                            with gr.Column(scale=1):
+                                seed = gr.Number(
+                                    label="Random Seed (optional)",
+                                    precision=0,
+                                    elem_classes="gr-box"
+                                )
+                    
+                    submit_btn = gr.Button(
+                        "Generate Variations", 
+                        variant="primary",
+                        elem_classes="gr-button"
+                    )
             
-            with gr.Group():
-                guidance = gr.Slider(
-                    minimum=1,
-                    maximum=10,
-                    value=3.5,
-                    step=0.5,
-                    label="Guidance Scale"
-                )
-                steps = gr.Slider(
-                    minimum=1,
-                    maximum=50,
-                    value=28,
-                    step=1,
-                    label="Number of Steps"
-                )
-                num_images = gr.Slider(
-                    minimum=1,
-                    maximum=4,
-                    value=2,
-                    step=1,
-                    label="Number of Images"
-                )
-                seed = gr.Number(
-                    label="Random Seed (optional)",
-                    precision=0
+            with gr.Column(scale=1, min_width=400):
+                output_gallery = gr.Gallery(
+                    label="Generated Variations",
+                    columns=2,
+                    rows=2,
+                    height=600,
+                    elem_classes="gr-gallery"
                 )
-            
-            submit_btn = gr.Button("Generate Variations", variant="primary")
-            
-        with gr.Column(scale=1):
-            output_gallery = gr.Gallery(
-                label="Generated Variations",
-                columns=2,
-                show_label=True
-            )
-    
+        
+        gr.Markdown("""
+        ### Tips:
+        - Higher guidance scale values (1-10) result in outputs that more closely follow the prompt
+        - More steps generally produce better quality but take longer
+        - You can generate up to 4 variations at once
+        - Set a seed for reproducible results
+        """)
+
     # Set up the generation function
     submit_btn.click(
         fn=interface.generate,