Update app.py

app.py

@@ -57,51 +57,152 @@ def create_demo(
     pipeline = UNOPipeline(model_type, device, offload, only_lora=True, lora_rank=512)
     pipeline.gradio_generate = spaces.GPU(duratioin=120)(pipeline.gradio_generate)
 
+    # 自定义CSS样式
+    css = """
+    .gradio-container {
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    }
+    
+    .main-header {
+        text-align: center;
+        margin-bottom: 2rem;
+        background: linear-gradient(to right, #4776E6, #8E54E9);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        font-weight: 700;
+        padding: 1rem 0;
+    }
+    
+    .container {
+        border-radius: 12px;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+        padding: 20px;
+        background: white;
+        margin-bottom: 1.5rem;
+    }
+    
+    .input-container {
+        background: rgba(245, 247, 250, 0.7);
+        border-radius: 10px;
+        padding: 1rem;
+        margin-bottom: 1rem;
+    }
+    
+    .image-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        gap: 10px;
+    }
+    
+    .generate-btn {
+        background: linear-gradient(90deg, #4776E6, #8E54E9);
+        border: none;
+        color: white;
+        padding: 10px 20px;
+        border-radius: 50px;
+        font-weight: 600;
+        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+        transition: all 0.3s ease;
+    }
+    
+    .generate-btn:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 15px rgba(0,0,0,0.15);
+    }
+    
+    .badge-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+        flex-wrap: wrap;
+        margin-bottom: 1rem;
+    }
+    
+    .badge {
+        display: inline-block;
+        padding: 0.25rem 0.75rem;
+        font-size: 0.875rem;
+        font-weight: 500;
+        line-height: 1.5;
+        text-align: center;
+        white-space: nowrap;
+        vertical-align: middle;
+        border-radius: 30px;
+        color: white;
+        background: #6c5ce7;
+        text-decoration: none;
+    }
+    
+    .output-container {
+        background: rgba(243, 244, 246, 0.7);
+        border-radius: 10px;
+        padding: 1.5rem;
+    }
+    
+    .slider-container label {
+        font-weight: 600;
+        margin-bottom: 0.5rem;
+        color: #4a5568;
+    }
+    """
 
     badges_text = r"""
-    <div style="text-align: center; display: flex; justify-content: left; gap: 5px;">
-    <a href="https://github.com/bytedance/UNO"><img alt="Build" src="https://img.shields.io/github/stars/bytedance/UNO"></a> 
-    <a href="https://bytedance.github.io/UNO/"><img alt="Build" src="https://img.shields.io/badge/Project%20Page-UNO-yellow"></a> 
-    <a href="https://arxiv.org/abs/2504.02160"><img alt="Build" src="https://img.shields.io/badge/arXiv%20paper-UNO-b31b1b.svg"></a>
-    <a href="https://huggingface.co/bytedance-research/UNO"><img src="https://img.shields.io/static/v1?label=%F0%9F%A4%97%20Hugging%20Face&message=Model&color=orange"></a>
-    <a href="https://huggingface.co/spaces/bytedance-research/UNO-FLUX"><img src="https://img.shields.io/static/v1?label=%F0%9F%A4%97%20Hugging%20Face&message=demo&color=orange"></a>
+    <div class="badge-container">
+    <a href="https://github.com/bytedance/UNO" class="badge" style="background: #24292e;"><img alt="GitHub Stars" src="https://img.shields.io/github/stars/bytedance/UNO" style="vertical-align: middle;"></a> 
+    <a href="https://bytedance.github.io/UNO/" class="badge" style="background: #f1c40f; color: #333;"><img alt="Project Page" src="https://img.shields.io/badge/Project%20Page-UNO-yellow" style="vertical-align: middle;"></a> 
+    <a href="https://arxiv.org/abs/2504.02160" class="badge" style="background: #b31b1b;"><img alt="arXiv" src="https://img.shields.io/badge/arXiv%20paper-UNO-b31b1b.svg" style="vertical-align: middle;"></a>
+    <a href="https://huggingface.co/bytedance-research/UNO" class="badge" style="background: #FF9D00;"><img src="https://img.shields.io/static/v1?label=%F0%9F%A4%97%20Hugging%20Face&message=Model&color=orange" style="vertical-align: middle;"></a>
+    <a href="https://huggingface.co/spaces/bytedance-research/UNO-FLUX" class="badge" style="background: #FF9D00;"><img src="https://img.shields.io/static/v1?label=%F0%9F%A4%97%20Hugging%20Face&message=demo&color=orange" style="vertical-align: middle;"></a>
     </div>
     """.strip()
 
-    with gr.Blocks() as demo:
-        gr.Markdown(f"# UNO by UNO team")
+    with gr.Blocks(css=css) as demo:
+        gr.Markdown("# <div class='main-header'>UNO-FLUX Image Generator</div>")
         gr.Markdown(badges_text)
+        
         with gr.Row():
-            with gr.Column():
-                prompt = gr.Textbox(label="Prompt", value="handsome woman in the city")
-                with gr.Row():
-                    image_prompt1 = gr.Image(label="Ref Img1", visible=True, interactive=True, type="pil")
-                    image_prompt2 = gr.Image(label="Ref Img2", visible=True, interactive=True, type="pil")
-                    image_prompt3 = gr.Image(label="Ref Img3", visible=True, interactive=True, type="pil")
-                    image_prompt4 = gr.Image(label="Ref img4", visible=True, interactive=True, type="pil")
-
-                with gr.Row():
-                    with gr.Column():
-                        width = gr.Slider(512, 2048, 512, step=16, label="Gneration Width")
-                        height = gr.Slider(512, 2048, 512, step=16, label="Gneration Height")
-                    with gr.Column():
-                        gr.Markdown("📌 The model trained on 512x512 resolution.\n")
-                        gr.Markdown(
-                            "The size closer to 512 is more stable,"
-                            " and the higher size gives a better visual effect but is less stable"
-                        )
-
-                with gr.Accordion("Advanced Options", open=False):
-                    with gr.Row():
-                        num_steps = gr.Slider(1, 50, 25, step=1, label="Number of steps")
-                        guidance = gr.Slider(1.0, 5.0, 4.0, step=0.1, label="Guidance", interactive=True)
-                        seed = gr.Number(-1, label="Seed (-1 for random)")
-
-                generate_btn = gr.Button("Generate")
+            with gr.Column(scale=3):
+                with gr.Box(elem_classes="container"):
+                    prompt = gr.Textbox(
+                        label="Prompt",
+                        placeholder="Describe the image you want to generate...",
+                        value="handsome woman in the city",
+                        elem_classes="input-container"
+                    )
+                    
+                    gr.Markdown("### Reference Images")
+                    with gr.Row(elem_classes="image-grid"):
+                        image_prompt1 = gr.Image(label="Ref Img 1", visible=True, interactive=True, type="pil")
+                        image_prompt2 = gr.Image(label="Ref Img 2", visible=True, interactive=True, type="pil")
+                        image_prompt3 = gr.Image(label="Ref Img 3", visible=True, interactive=True, type="pil")
+                        image_prompt4 = gr.Image(label="Ref Img 4", visible=True, interactive=True, type="pil")
 
-            with gr.Column():
-                output_image = gr.Image(label="Generated Image")
-                download_btn = gr.File(label="Download full-resolution", type="filepath", interactive=False)
+                    with gr.Row():
+                        with gr.Column(scale=2):
+                            with gr.Box(elem_classes="slider-container"):
+                                width = gr.Slider(512, 2048, 512, step=16, label="Generation Width")
+                                height = gr.Slider(512, 2048, 512, step=16, label="Generation Height")
+                        
+                        with gr.Column(scale=1):
+                            gr.Markdown("<div style='background: #f8f9fa; padding: 10px; border-radius: 8px; border-left: 4px solid #4776E6;'>📌 The model was trained on 512x512 resolution.<br>Sizes closer to 512 are more stable, higher sizes give better visual effects but are less stable.</div>")
+
+                    with gr.Accordion("Advanced Options", open=False):
+                        with gr.Row():
+                            with gr.Column():
+                                num_steps = gr.Slider(1, 50, 25, step=1, label="Number of steps")
+                            with gr.Column():
+                                guidance = gr.Slider(1.0, 5.0, 4.0, step=0.1, label="Guidance", interactive=True)
+                            with gr.Column():
+                                seed = gr.Number(-1, label="Seed (-1 for random)")
+
+                    generate_btn = gr.Button("Generate", elem_classes="generate-btn")
+
+            with gr.Column(scale=2):
+                with gr.Box(elem_classes="output-container"):
+                    gr.Markdown("### Generated Result")
+                    output_image = gr.Image(label="Generated Image")
+                    download_btn = gr.File(label="Download full-resolution", type="filepath", interactive=False)
 
 
             inputs = [
@@ -117,14 +218,16 @@ def create_demo(
         example_text = gr.Text("", visible=False, label="Case For:")
         examples = get_examples("./assets/examples")
 
-        gr.Examples(
-            examples=examples,
-            inputs=[
-                example_text, prompt,
-                image_prompt1, image_prompt2, image_prompt3, image_prompt4,
-                seed, output_image
-            ],
-        )
+        with gr.Box(elem_classes="container"):
+            gr.Markdown("### <div style='text-align: center; margin-bottom: 1rem;'>Examples</div>")
+            gr.Examples(
+                examples=examples,
+                inputs=[
+                    example_text, prompt,
+                    image_prompt1, image_prompt2, image_prompt3, image_prompt4,
+                    seed, output_image
+                ],
+            )
 
     return demo