Update app.py

app.py

@@ -315,37 +315,300 @@ def run_pipeline(image: PILImage.Image, prompt: str):
         return f"Error processing request: {str(e)}", None
 
 
-with gr.Blocks(title="Seg-R1") as demo:
-    gr.Markdown("# Seg-R1: Visual Segmentation Assistant")
-    gr.Markdown("Upload an image and ask questions about segmentation.")
+# ... 之前的代码保持不变 ...
+
+# ------------------ 启动 Gradio ------------------
+# 自定义CSS样式
+custom_css = """
+:root {
+    --primary: #6C63FF;
+    --secondary: #4A44A6;
+    --accent: #FF6584;
+    --dark: #2A2A3C;
+    --light: #F8F9FF;
+    --success: #36D399;
+}
+
+body {
+    background: linear-gradient(135deg, #2A2A3C 0%, #1A1A2E 100%);
+    color: var(--light);
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.gradio-container {
+    max-width: 1200px !important;
+    margin: 0 auto;
+    background: rgba(30, 30, 46, 0.8) !important;
+    backdrop-filter: blur(10px);
+    border-radius: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
+}
+
+header {
+    text-align: center;
+    padding: 2rem 0;
+    background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
+    border-radius: 20px 20px 0 0 !important;
+    margin-bottom: 2rem;
+}
+
+h1 {
+    font-size: 2.5rem !important;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    background: linear-gradient(90deg, #FFFFFF 0%, #E0E0FF 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.description {
+    font-size: 1.1rem;
+    max-width: 800px;
+    margin: 0 auto 1.5rem;
+    color: rgba(255, 255, 255, 0.85);
+    line-height: 1.6;
+}
+
+.input-panel, .output-panel {
+    background: rgba(40, 40, 60, 0.7) !important;
+    border-radius: 15px !important;
+    padding: 1.5rem !important;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+    transition: all 0.3s ease;
+}
+
+.input-panel:hover, .output-panel:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
+}
+
+.input-panel h2, .output-panel h2 {
+    color: var(--primary) !important;
+    font-size: 1.4rem !important;
+    margin-bottom: 1.2rem !important;
+    display: flex;
+    align-items: center;
+}
+
+.input-panel h2:before, .output-panel h2:before {
+    content: "•";
+    color: var(--accent);
+    margin-right: 10px;
+    font-size: 1.8rem;
+}
+
+.image-preview {
+    border-radius: 12px !important;
+    overflow: hidden;
+    border: 2px solid rgba(255, 255, 255, 0.1);
+}
+
+textarea, input {
+    background: rgba(30, 30, 50, 0.8) !important;
+    color: white !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    border-radius: 10px !important;
+    padding: 12px 15px !important;
+}
+
+textarea:focus, input:focus {
+    border-color: var(--primary) !important;
+    box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.3) !important;
+}
+
+button {
+    background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 50px !important;
+    padding: 12px 30px !important;
+    font-weight: 600 !important;
+    font-size: 1.1rem !important;
+    box-shadow: 0 5px 15px rgba(108, 99, 255, 0.4) !important;
+    transition: all 0.3s ease !important;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+button:hover {
+    transform: translateY(-3px) !important;
+    box-shadow: 0 8px 20px rgba(108, 99, 255, 0.6) !important;
+}
+
+button:active {
+    transform: translateY(1px) !important;
+}
+
+.examples {
+    background: rgba(40, 40, 60, 0.7) !important;
+    border-radius: 15px !important;
+    padding: 1.5rem !important;
+    margin-top: 1.5rem;
+}
+
+.examples h2 {
+    color: var(--accent) !important;
+    font-size: 1.4rem !important;
+    margin-bottom: 1.2rem !important;
+}
+
+.example-image {
+    border-radius: 12px !important;
+    overflow: hidden;
+    transition: all 0.3s ease;
+    border: 2px solid transparent;
+}
+
+.example-image:hover {
+    transform: scale(1.03);
+    border-color: var(--primary);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
+}
+
+.output-text {
+    background: rgba(30, 30, 50, 0.8) !important;
+    color: white !important;
+    border-radius: 12px !important;
+    padding: 20px !important;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    min-height: 150px;
+    font-family: monospace;
+    white-space: pre-wrap;
+    overflow: auto;
+    max-height: 300px;
+}
+
+.footer {
+    text-align: center;
+    padding: 1.5rem 0;
+    margin-top: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-size: 0.9rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+@keyframes pulse {
+    0% { box-shadow: 0 0 0 0 rgba(108, 99, 255, 0.7); }
+    70% { box-shadow: 0 0 0 10px rgba(108, 99, 255, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(108, 99, 255, 0); }
+}
+
+.pulse {
+    animation: pulse 2s infinite;
+}
+"""
+
+# 创建界面
+with gr.Blocks(
+    title="Seg-R1 | Advanced Visual Segmentation",
+    css=custom_css,
+    theme=gr.themes.Default(
+        primary_hue="purple",
+        secondary_hue="indigo",
+        neutral_hue="slate"
+    )
+) as demo:
+    # 标题区域
+    gr.Markdown("""
+    <div style='text-align: center; padding: 2rem 0;'>
+        <h1>Seg-R1: Advanced Visual Segmentation Assistant</h1>
+        <p class='description'>
+        Upload an image and describe what you want to segment. Our AI will analyze the image, 
+        generate segmentation prompts, and highlight the selected objects with precision.
+        </p>
+    </div>
+    """)
     
-    with gr.Row():
-        with gr.Column():
-            image_input = gr.Image(type="pil", label="Upload Image")
-            text_input = gr.Textbox(lines=2, label="Question", placeholder="Ask about objects in the image...")
-            submit_btn = gr.Button("Submit", variant="primary")
+    # 主内容区
+    with gr.Row(equal_height=True):
+        # 左侧输入面板
+        with gr.Column(scale=5):
+            with gr.Group(elem_classes="input-panel"):
+                gr.Markdown("## 📷 Image Input")
+                image_input = gr.Image(
+                    type="pil", 
+                    label="Upload Image",
+                    elem_classes="image-preview",
+                    height=400
+                )
+                
+                gr.Markdown("## 💬 Question")
+                text_input = gr.Textbox(
+                    lines=3,
+                    label="Describe what you want to segment",
+                    placeholder="Example: 'Segment the dog in the image' or 'Find all cars in the scene'",
+                    interactive=True
+                )
+                
+                with gr.Row():
+                    clear_btn = gr.Button("Clear", variant="secondary")
+                    submit_btn = gr.Button("Analyze & Segment", variant="primary", elem_classes="pulse")
         
-        with gr.Column():
-            text_output = gr.Textbox(label="Model Response", interactive=False)
-            image_output = gr.Image(type="pil", label="Segmentation Result", interactive=False)
+        # 右侧输出面板
+        with gr.Column(scale=5):
+            with gr.Group(elem_classes="output-panel"):
+                gr.Markdown("## 🧠 Model Response")
+                text_output = gr.Textbox(
+                    label="Reasoning & Output",
+                    interactive=False,
+                    elem_classes="output-text"
+                )
+                
+                gr.Markdown("## 🎯 Segmentation Result")
+                image_output = gr.Image(
+                    type="pil", 
+                    label="Highlighted Objects",
+                    elem_classes="image-preview",
+                    height=400
+                )
     
+    # 示例区域
+    with gr.Group(elem_classes="examples"):
+        gr.Markdown("## 🚀 Try These Examples")
+        
+        examples = gr.Examples(
+            examples=[
+                ["imgs/cards.jpg", "Identify and segment the Ace of Spades."],
+                ["imgs/painting.jpg", "Identify and segment the man an the house."],
+                ["imgs/dogs.jpg", "Identify and segment the tongue of the dog."],
+            ],
+            inputs=[image_input, text_input],
+            outputs=[text_output, image_output],
+            fn=run_pipeline,
+            cache_examples=False,
+            label="Click any example to load it",
+            examples_per_page=2
+        )
+    
+    # 页脚
+    gr.Markdown("""
+    <div class='footer'>
+        <p>Seg-R1: Advanced Visual Segmentation Assistant | Built with ❤️ using Qwen-VL and SAM</p>
+        <p>Note: Processing may take 10-20 seconds for complex images</p>
+    </div>
+    """)
+    
+    # 事件处理
     submit_btn.click(
         fn=run_pipeline,
         inputs=[image_input, text_input],
-        outputs=[text_output, image_output]
+        outputs=[text_output, image_output],
+        api_name="segment"
     )
     
-    # gr.Examples(
-    #     examples=[
-    #         ["examples/dog.jpg", "Segment the dog in the image"],
-    #         ["examples/street.jpg", "Find all cars in the image"],
-    #         ["examples/fruits.jpg", "Identify the apples"]
-    #     ],
-    #     inputs=[image_input, text_input],
-    #     outputs=[text_output, image_output],
-    #     fn=run_pipeline,
-    #     cache_examples=False
-    # )
+    clear_btn.click(
+        fn=lambda: [None, "", "", None],
+        inputs=[],
+        outputs=[image_input, text_input, text_output, image_output]
+    )
 
 if __name__ == "__main__":
-    demo.launch(server_name="0.0.0.0", server_port=7860)
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=False,
+        # favicon_path="favicon.ico"  # 可选：添加自定义favicon
+    )