Update app.py

app.py

@@ -315,300 +315,38 @@ def run_pipeline(image: PILImage.Image, prompt: str):
         return f"Error processing request: {str(e)}", None
 
 
-# ... 之前的代码保持不变 ...
-
-# ------------------ 启动 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(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(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.Blocks(title="Seg-R1") as demo:
+    gr.Markdown("# Seg-R1")
+    # gr.Markdown("Upload an image and ask questions about segmentation.")
     
-    # 示例区域
-    with gr.Group(elem_classes="examples"):
-        gr.Markdown("## 🚀 Try These Examples")
+    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")
         
-        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
-        )
+        with gr.Column():
+            text_output = gr.Textbox(label="Model Response", interactive=False)
+            image_output = gr.Image(type="pil", label="Segmentation Result", interactive=False)
     
-    # 页脚
-    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],
-        api_name="segment"
+        outputs=[text_output, image_output]
     )
     
-    clear_btn.click(
-        fn=lambda: [None, "", "", None],
-        inputs=[],
-        outputs=[image_input, text_input, text_output, image_output]
+    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=True
     )
 
 if __name__ == "__main__":
-    demo.launch(
-        server_name="0.0.0.0",
-        server_port=7860,
-        share=False,
-        # favicon_path="favicon.ico"  # 可选：添加自定义favicon
-    )
+    demo.launch(server_name="0.0.0.0", server_port=7860)