updated gradio UI

app.py

@@ -67,89 +67,133 @@ examples = [
     "an anime illustration of a wiener schnitzel",
 ]
 
-css="""
+css = """
 #col-container {
     margin: 0 auto;
-    max-width: 520px;
+    max-width: 720px;
+}
+.container {
+    margin: 0 auto;
+    padding: 20px;
+    border-radius: 10px;
+    background-color: #f0f0f0;
+}
+.title {
+    text-align: center;
+    color: #2c3e50;
+    margin-bottom: 20px;
+}
+.subtitle {
+    text-align: center;
+    color: #34495e;
+    margin-bottom: 30px;
+}
+.speed-info {
+    background-color: #e74c3c;
+    color: white;
+    padding: 10px;
+    border-radius: 5px;
+    text-align: center;
+    margin-bottom: 20px;
+}
+.prompt-container {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+.advanced-settings {
+    background-color: #ecf0f1;
+    padding: 15px;
+    border-radius: 5px;
+    margin-top: 20px;
 }
 """
 
 with gr.Blocks(css=css) as demo:
-    
     with gr.Column(elem_id="col-container"):
-        gr.Markdown(f"""# FLUX.1 [schnell]
-12B param rectified flow transformer distilled from [FLUX.1 [pro]](https://blackforestlabs.ai/) for 4 step generation
-[[blog](https://blackforestlabs.ai/announcing-black-forest-labs/)] [[model](https://huggingface.co/black-forest-labs/FLUX.1-schnell)]
-        """)
+        gr.HTML(
+            """
+            <div class="container">
+                <h1 class="title">FLUX.1 [schnell] - Mixed Precision Edition</h1>
+                <h3 class="subtitle">12B param rectified flow transformer optimized for maximum inference speed</h3>
+                <div class="speed-info">
+                    <strong>Mixed Precision Pipeline:</strong> FP32 Text Encoders + FP16 Core for optimal speed and quality
+                </div>
+            </div>
+            """
+        )
         
-        with gr.Row():
-            
+        with gr.Column(elem_id="prompt-container"):
             prompt = gr.Text(
-                label="Prompt",
-                show_label=False,
-                max_lines=1,
-                placeholder="Enter your prompt",
-                container=False,
+                label="Enter your prompt",
+                placeholder="A futuristic cityscape with flying cars",
+                lines=2
             )
-            
-            run_button = gr.Button("Run", scale=0)
+            run_button = gr.Button("Generate Image", variant="primary")
         
-        result = gr.Image(label="Result", show_label=False)
+        result = gr.Image(label="Generated Image")
         
         with gr.Accordion("Advanced Settings", open=False):
-            
-            seed = gr.Slider(
-                label="Seed",
-                minimum=0,
-                maximum=MAX_SEED,
-                step=1,
-                value=0,
-            )
-            
-            randomize_seed = gr.Checkbox(label="Randomize seed", value=True)
-            
-            with gr.Row():
-                
-                width = gr.Slider(
-                    label="Width",
-                    minimum=256,
-                    maximum=MAX_IMAGE_SIZE,
-                    step=32,
-                    value=1024,
+            with gr.Column(elem_id="advanced-settings"):
+                seed = gr.Slider(
+                    label="Seed",
+                    minimum=0,
+                    maximum=MAX_SEED,
+                    step=1,
+                    value=0,
+                    info="Set to 0 for random seed"
                 )
+                randomize_seed = gr.Checkbox(label="Randomize seed", value=True)
                 
-                height = gr.Slider(
-                    label="Height",
-                    minimum=256,
-                    maximum=MAX_IMAGE_SIZE,
-                    step=32,
-                    value=1024,
-                )
-            
-            with gr.Row():
+                with gr.Row():
+                    width = gr.Slider(
+                        label="Width",
+                        minimum=256,
+                        maximum=MAX_IMAGE_SIZE,
+                        step=32,
+                        value=1024,
+                    )
+                    height = gr.Slider(
+                        label="Height",
+                        minimum=256,
+                        maximum=MAX_IMAGE_SIZE,
+                        step=32,
+                        value=1024,
+                    )
                 
-  
                 num_inference_steps = gr.Slider(
                     label="Number of inference steps",
                     minimum=1,
                     maximum=50,
                     step=1,
                     value=4,
+                    info="Lower values = faster generation, higher values = potentially better quality"
                 )
         
+        gr.Markdown(
+            """
+            ### About FLUX.1 [schnell]
+            - Distilled from [FLUX.1 [pro]](https://blackforestlabs.ai/)
+            - Optimized for 4-step generation
+            - Mixed precision pipeline for maximum speed
+            
+            [[Blog]](https://blackforestlabs.ai/announcing-black-forest-labs/) | [[Model]](https://huggingface.co/black-forest-labs/FLUX.1-schnell)
+            """
+        )
+        
         gr.Examples(
-            examples = examples,
-            fn = infer,
-            inputs = [prompt],
-            outputs = [result, seed],
+            examples=examples,
+            fn=infer,
+            inputs=[prompt],
+            outputs=[result, seed],
             cache_examples="lazy"
         )
-
+    
     gr.on(
         triggers=[run_button.click, prompt.submit],
-        fn = infer,
-        inputs = [prompt, seed, randomize_seed, width, height, num_inference_steps],
-        outputs = [result, seed]
+        fn=infer,
+        inputs=[prompt, seed, randomize_seed, width, height, num_inference_steps],
+        outputs=[result, seed]
     )
 
 demo.launch()