Initial Commit

app.py

@@ -163,92 +163,122 @@ class FluxInterface:
 interface = FluxInterface()
 
 # Create Gradio interface
-with gr.Blocks(css="""
-    .container { max-width: 1200px; margin: auto; padding: 20px; }
-    .header { text-align: center; margin-bottom: 40px; }
-    .input-panel { border: 1px solid #e0e0e0; padding: 20px; border-radius: 8px; background: white; }
-    .control-panel { padding: 10px; margin: 10px 0; }
-    .output-panel { border: 1px solid #e0e0e0; padding: 20px; border-radius: 8px; }
-    .submit-btn { height: 40px; margin: 10px 0; }
-""") as demo:
+with gr.Blocks(
+    theme=gr.themes.Soft(),
+    css="""
+        .container { 
+            max-width: 1200px; 
+            margin: auto; 
+            padding: 0 20px;
+        }
+        .header { 
+            text-align: center; 
+            margin: 20px 0 40px 0;
+            padding: 20px;
+            background: #f7f7f7;
+            border-radius: 12px;
+        }
+        .param-row {
+            padding: 10px 0;
+        }
+        footer {
+            margin-top: 40px;
+            padding: 20px;
+            border-top: 1px solid #eee;
+        }
+    """
+) 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>
-        """)
+        gr.Markdown(
+            """
+            <div class="header">
+                # 🎨 Qwen2vl-Flux Image Variation Demo
+                Generate creative variations of your images with optional text guidance
+            </div>
+            """
+        )
         
-        with gr.Row():
-            # Input Column
-            with gr.Column(scale=1, min_width=400, elem_classes="input-panel"):
+        with gr.Row(equal_height=True):
+            with gr.Column(scale=1):
+                # Input Section
                 input_image = gr.Image(
-                    label="Upload Image",
+                    label="Upload Your Image",
                     type="pil",
-                    height=400
-                )
-                prompt = gr.Textbox(
-                    label="Optional Text Prompt",
-                    placeholder="Enter text prompt here (optional)",
-                    lines=2
+                    height=384,
+                    sources=["upload", "clipboard"]
                 )
                 
-                with gr.Column(elem_classes="control-panel"):
-                    with gr.Row():
-                        with gr.Column(scale=1):
+                with gr.Accordion("Advanced Settings", open=False):
+                    with gr.Group():
+                        prompt = gr.Textbox(
+                            label="Text Prompt (Optional)",
+                            placeholder="Describe how you want to modify the image...",
+                            lines=3
+                        )
+                        
+                        with gr.Row(elem_classes="param-row"):
                             guidance = gr.Slider(
                                 minimum=1,
                                 maximum=10,
                                 value=3.5,
                                 step=0.5,
-                                label="Guidance Scale"
+                                label="Guidance Scale",
+                                info="Higher values follow prompt more closely"
                             )
-                        with gr.Column(scale=1):
                             steps = gr.Slider(
                                 minimum=1,
                                 maximum=50,
                                 value=28,
                                 step=1,
-                                label="Number of Steps"
+                                label="Sampling Steps",
+                                info="More steps = better quality but slower"
                             )
-                    with gr.Row():
-                        with gr.Column(scale=1):
+                            
+                        with gr.Row(elem_classes="param-row"):
                             num_images = gr.Slider(
                                 minimum=1,
                                 maximum=4,
                                 value=2,
                                 step=1,
-                                label="Number of Images"
+                                label="Number of Images",
+                                info="Generate multiple variations at once"
                             )
-                        with gr.Column(scale=1):
                             seed = gr.Number(
-                                label="Random Seed (optional)",
-                                precision=0
+                                label="Random Seed",
+                                value=None,
+                                precision=0,
+                                info="Set for reproducible results"
                             )
                 
                 submit_btn = gr.Button(
-                    "Generate Variations", 
+                    "🎨 Generate Variations",
                     variant="primary",
-                    elem_classes="submit-btn"
+                    size="lg"
                 )
             
-            # Output Column
-            with gr.Column(scale=1, min_width=400, elem_classes="output-panel"):
+            with gr.Column(scale=1):
+                # Output Section
                 output_gallery = gr.Gallery(
                     label="Generated Variations",
                     columns=2,
                     rows=2,
-                    height=600,
+                    height=700,
+                    object_fit="contain",
+                    show_label=True,
+                    allow_preview=True,
+                    preview=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
-        """)
-
+        with gr.Row(elem_classes="footer"):
+            gr.Markdown("""
+                ### Tips:
+                - 📸 Upload any image to get started
+                - 💡 Add an optional text prompt to guide the generation
+                - 🎯 Adjust guidance scale to control prompt influence
+                - ⚙️ Increase steps for higher quality
+                - 🎲 Use seeds for reproducible results
+            """)
+    
     # Set up the generation function
     submit_btn.click(
         fn=interface.generate,
@@ -260,8 +290,10 @@ with gr.Blocks(css="""
             num_images,
             seed
         ],
-        outputs=output_gallery
+        outputs=output_gallery,
+        show_progress="minimal"
     )
 
+# Launch the app
 if __name__ == "__main__":
     demo.launch()