Initial Commit

app.py

@@ -166,10 +166,10 @@ interface = FluxInterface()
 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; }
+    .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.Column(elem_classes="container"):
         gr.Markdown("""
@@ -180,71 +180,65 @@ with gr.Blocks(css="""
         """)
         
         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"
-                    )
+            # Input Column
+            with gr.Column(scale=1, min_width=400, elem_classes="input-panel"):
+                input_image = gr.Image(
+                    label="Upload Image",
+                    type="pil",
+                    height=400
+                )
+                prompt = gr.Textbox(
+                    label="Optional Text Prompt",
+                    placeholder="Enter text prompt here (optional)",
+                    lines=2
+                )
+                
+                with gr.Column(elem_classes="control-panel"):
+                    with gr.Row():
+                        with gr.Column(scale=1):
+                            guidance = gr.Slider(
+                                minimum=1,
+                                maximum=10,
+                                value=3.5,
+                                step=0.5,
+                                label="Guidance Scale"
+                            )
+                        with gr.Column(scale=1):
+                            steps = gr.Slider(
+                                minimum=1,
+                                maximum=50,
+                                value=28,
+                                step=1,
+                                label="Number of Steps"
+                            )
+                    with gr.Row():
+                        with gr.Column(scale=1):
+                            num_images = gr.Slider(
+                                minimum=1,
+                                maximum=4,
+                                value=2,
+                                step=1,
+                                label="Number of Images"
+                            )
+                        with gr.Column(scale=1):
+                            seed = gr.Number(
+                                label="Random Seed (optional)",
+                                precision=0
+                            )
+                
+                submit_btn = gr.Button(
+                    "Generate Variations", 
+                    variant="primary",
+                    elem_classes="submit-btn"
+                )
             
-            with gr.Column(scale=1, min_width=400):
+            # Output Column
+            with gr.Column(scale=1, min_width=400, elem_classes="output-panel"):
                 output_gallery = gr.Gallery(
                     label="Generated Variations",
                     columns=2,
                     rows=2,
                     height=600,
-                    elem_classes="gr-gallery"
                 )
         
         gr.Markdown("""