Update app.py

app.py

@@ -9,7 +9,7 @@ import gradio as gr
 import torch
 from diffusers import FluxPipeline
 
-# Setup and initialization code remains the same
+# Setup and initialization code
 cache_path = path.join(path.dirname(path.abspath(__file__)), "models")
 os.environ["TRANSFORMERS_CACHE"] = cache_path
 os.environ["HF_HUB_CACHE"] = cache_path
@@ -35,142 +35,101 @@ pipe.load_lora_weights(hf_hub_download("ByteDance/Hyper-SD", "Hyper-FLUX.1-dev-8
 pipe.fuse_lora(lora_scale=0.125)
 pipe.to(device="cuda", dtype=torch.bfloat16)
 
-# Custom CSS for enhanced visual design
+# Custom CSS
 css = """
 footer {display: none !important}
-.container {max-width: 1200px; margin: auto;}
-.gr-form {border-radius: 12px; padding: 20px; background: rgba(255, 255, 255, 0.05);}
-.gr-box {border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1);}
-.gr-button {
-    border-radius: 8px;
-    background: linear-gradient(90deg, #4B79A1 0%, #283E51 100%);
-    border: none;
-    color: white;
-    transition: transform 0.2s ease;
+.gradio-container {max-width: 1200px; margin: auto;}
+.contain {background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 20px;}
+.generate-btn {
+    background: linear-gradient(90deg, #4B79A1 0%, #283E51 100%) !important;
+    border: none !important;
+    color: white !important;
 }
-.gr-button:hover {
+.generate-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 5px 15px rgba(0,0,0,0.2);
 }
-.gr-input {background: rgba(255, 255, 255, 0.05) !important;}
-.gr-input:focus {border-color: #4B79A1 !important;}
-.title-text {
+.title {
     text-align: center;
     font-size: 2.5em;
     font-weight: bold;
+    margin-bottom: 1em;
     background: linear-gradient(90deg, #4B79A1 0%, #283E51 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-    margin-bottom: 1em;
 }
 """
 
-# Create Gradio interface with enhanced design
-with gr.Blocks(theme=gr.themes.Soft(
-    primary_hue="blue",
-    secondary_hue="slate",
-    neutral_hue="slate",
-    font=gr.themes.GoogleFont("Inter")
-), css=css) as demo:
-    
-    gr.HTML("""
-        <div class="title-text">AI Image Generator</div>
-        <div style="text-align: center; margin-bottom: 2em; color: #666;">
-            Create stunning images from your descriptions using advanced AI
-        </div>
-    """)
+# Create Gradio interface
+with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
+    gr.HTML('<div class="title">AI Image Generator</div>')
+    gr.HTML('<div style="text-align: center; margin-bottom: 2em; color: #666;">Create stunning images from your descriptions</div>')
     
-    with gr.Row().style(equal_height=True):
+    with gr.Row():
         with gr.Column(scale=3):
-            with gr.Group():
-                prompt = gr.Textbox(
-                    label="Image Description",
-                    placeholder="Describe the image you want to create...",
-                    lines=3,
-                    elem_classes="gr-input"
-                )
+            prompt = gr.Textbox(
+                label="Image Description",
+                placeholder="Describe the image you want to create...",
+                lines=3
+            )
+            
+            with gr.Accordion("Advanced Settings", open=False):
+                with gr.Row():
+                    height = gr.Slider(
+                        label="Height",
+                        minimum=256,
+                        maximum=1152,
+                        step=64,
+                        value=1024
+                    )
+                    width = gr.Slider(
+                        label="Width",
+                        minimum=256,
+                        maximum=1152,
+                        step=64,
+                        value=1024
+                    )
                 
-                with gr.Accordion("Advanced Settings", open=False):
-                    with gr.Group():
-                        with gr.Row():
-                            with gr.Column(scale=1):
-                                height = gr.Slider(
-                                    label="Height",
-                                    minimum=256,
-                                    maximum=1152,
-                                    step=64,
-                                    value=1024,
-                                    elem_classes="gr-input"
-                                )
-                            with gr.Column(scale=1):
-                                width = gr.Slider(
-                                    label="Width",
-                                    minimum=256,
-                                    maximum=1152,
-                                    step=64,
-                                    value=1024,
-                                    elem_classes="gr-input"
-                                )
-                        
-                        with gr.Row():
-                            with gr.Column(scale=1):
-                                steps = gr.Slider(
-                                    label="Inference Steps",
-                                    minimum=6,
-                                    maximum=25,
-                                    step=1,
-                                    value=8,
-                                    elem_classes="gr-input"
-                                )
-                            with gr.Column(scale=1):
-                                scales = gr.Slider(
-                                    label="Guidance Scale",
-                                    minimum=0.0,
-                                    maximum=5.0,
-                                    step=0.1,
-                                    value=3.5,
-                                    elem_classes="gr-input"
-                                )
-                        
-                        seed = gr.Number(
-                            label="Seed (for reproducibility)",
-                            value=3413,
-                            precision=0,
-                            elem_classes="gr-input"
-                        )
+                with gr.Row():
+                    steps = gr.Slider(
+                        label="Inference Steps",
+                        minimum=6,
+                        maximum=25,
+                        step=1,
+                        value=8
+                    )
+                    scales = gr.Slider(
+                        label="Guidance Scale",
+                        minimum=0.0,
+                        maximum=5.0,
+                        step=0.1,
+                        value=3.5
+                    )
                 
-                generate_btn = gr.Button(
-                    "✨ Generate Image",
-                    variant="primary",
-                    scale=1,
-                    elem_classes="gr-button"
+                seed = gr.Number(
+                    label="Seed (for reproducibility)",
+                    value=3413,
+                    precision=0
                 )
-                
-                gr.HTML("""
-                    <div style="margin-top: 1em; padding: 1em; border-radius: 8px; background: rgba(255, 255, 255, 0.05);">
-                        <h4 style="margin: 0 0 0.5em 0;">Tips for best results:</h4>
-                        <ul style="margin: 0; padding-left: 1.2em;">
-                            <li>Be specific in your descriptions</li>
-                            <li>Include details about style, lighting, and mood</li>
-                            <li>Experiment with different guidance scales</li>
-                        </ul>
-                    </div>
-                """)
-        
-        with gr.Column(scale=4):
-            output = gr.Image(
-                label="Generated Image",
-                elem_classes="gr-box",
-                height=512
+            
+            generate_btn = gr.Button(
+                "✨ Generate Image",
+                elem_classes=["generate-btn"]
             )
             
-            with gr.Group(visible=False) as loading_info:
-                gr.HTML("""
-                    <div style="text-align: center; padding: 1em;">
-                        <div style="display: inline-block; animation: spin 1s linear infinite;">⚙️</div>
-                        <p>Generating your image...</p>
-                    </div>
-                """)
+            gr.HTML("""
+                <div style="margin-top: 1em; padding: 1em; border-radius: 8px; background: rgba(255, 255, 255, 0.05);">
+                    <h4 style="margin: 0 0 0.5em 0;">Tips for best results:</h4>
+                    <ul style="margin: 0; padding-left: 1.2em;">
+                        <li>Be specific in your descriptions</li>
+                        <li>Include details about style, lighting, and mood</li>
+                        <li>Experiment with different guidance scales</li>
+                    </ul>
+                </div>
+            """)
+        
+        with gr.Column(scale=4):
+            output = gr.Image(label="Generated Image")
     
     @spaces.GPU
     def process_image(height, width, steps, scales, prompt, seed):
@@ -186,18 +145,10 @@ with gr.Blocks(theme=gr.themes.Soft(
                 max_sequence_length=256
             ).images[0]
     
-    # Add loading state
     generate_btn.click(
-        fn=lambda: gr.update(visible=True),
-        outputs=[loading_info],
-        queue=False
-    ).then(
         process_image,
         inputs=[height, width, steps, scales, prompt, seed],
         outputs=output
-    ).then(
-        fn=lambda: gr.update(visible=False),
-        outputs=[loading_info]
     )
 
 if __name__ == "__main__":