Update app.py

app.py

@@ -151,63 +151,247 @@ def remove_objects(image, object_name, guidance_scale, steps):
     except Exception as e:
         return image, f"❌ Error: {str(e)}"
 
-def _remove(image, object_name, guidance, steps):
-    img, ok = flux_inpainting(image, object_name, guidance, steps)
-    if ok:
-        status = f"✅ Removed **{object_name}**  |  Guidance={guidance}, Steps={steps}"
-    else:
-        status = f"⚠️ Failed to remove **{object_name}** – try adjusting settings."
-    return img, status
-
-def chat_pipeline(image, object_name, guidance, steps, history):
-    """
-    Triggered on each “Remove” click.
-    - history is a list of [user_msg, bot_msg] pairs
-    """
-    # 1) record the user turn
-    user_msg = f"🖼️ Uploaded image & remove **{object_name}**"
-    # 2) run your model
-    result_img, status = _remove(image, object_name, guidance, steps)
-    # 3) record the assistant turn
-    bot_msg = status
-    # 4) append to history
-    history = history + [[user_msg, bot_msg]]
-    # 5) return updated history + preview
-    return history, history, result_img, status
+# Custom CSS for modern chat-like interface
+custom_css = """
+/* Global Styles */
+.gradio-container {
+    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%) !important;
+    color: white !important;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
+}
+/* Header Styling */
+.header-text h1 {
+    background: linear-gradient(45deg, #00ff88, #00ccff) !important;
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    font-size: 2.5rem !important;
+    text-align: center !important;
+    margin-bottom: 1rem !important;
+}
+.header-text p {
+    text-align: center !important;
+    color: rgba(255, 255, 255, 0.8) !important;
+    font-size: 1.1rem !important;
+    margin-bottom: 2rem !important;
+}
+/* Chat Panel Styling */
+.chat-panel {
+    background: rgba(20, 20, 30, 0.8) !important;
+    backdrop-filter: blur(20px) !important;
+    border-radius: 16px !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    padding: 1.5rem !important;
+    margin-bottom: 1rem !important;
+}
+.chat-panel .gr-form {
+    background: transparent !important;
+}
+/* Input Styling */
+.gr-textbox input, .gr-slider input {
+    background: rgba(255, 255, 255, 0.1) !important;
+    border: 1px solid rgba(255, 255, 255, 0.3) !important;
+    border-radius: 25px !important;
+    color: white !important;
+    padding: 12px 16px !important;
+}
+.gr-textbox input:focus, .gr-slider input:focus {
+    border-color: #00ff88 !important;
+    box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.2) !important;
+}
+.gr-textbox input::placeholder {
+    color: rgba(255, 255, 255, 0.5) !important;
+}
+/* Button Styling */
+.gr-button {
+    background: linear-gradient(135deg, #00ff88, #00ccff) !important;
+    border: none !important;
+    border-radius: 25px !important;
+    color: #000 !important;
+    font-weight: 600 !important;
+    padding: 12px 24px !important;
+    transition: all 0.3s ease !important;
+}
+.gr-button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 8px 25px rgba(0, 255, 136, 0.3) !important;
+}
+/* Output Panel Styling */
+.output-panel {
+    background: rgba(10, 10, 20, 0.8) !important;
+    backdrop-filter: blur(20px) !important;
+    border-radius: 16px !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    padding: 1.5rem !important;
+    text-align: center !important;
+}
+.gr-image {
+    border-radius: 16px !important;
+    border: 2px solid rgba(255, 255, 255, 0.1) !important;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
+}
+/* Status Text Styling */
+.gr-textbox textarea {
+    background: rgba(255, 193, 7, 0.1) !important;
+    border: 1px solid rgba(255, 193, 7, 0.3) !important;
+    color: #ffc107 !important;
+    border-radius: 12px !important;
+}
+/* File Upload Styling */
+.gr-file-upload {
+    background: rgba(255, 255, 255, 0.1) !important;
+    border: 2px dashed rgba(255, 255, 255, 0.3) !important;
+    border-radius: 16px !important;
+    color: white !important;
+}
+/* Examples Styling */
+.gr-examples {
+    background: rgba(255, 255, 255, 0.05) !important;
+    border-radius: 12px !important;
+    padding: 1rem !important;
+}
+.gr-examples .gr-button {
+    background: rgba(255, 255, 255, 0.1) !important;
+    color: white !important;
+    border: 1px solid rgba(255, 255, 255, 0.3) !important;
+    font-size: 0.9rem !important;
+}
+/* Accordion Styling */
+.gr-accordion {
+    background: rgba(255, 255, 255, 0.05) !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    border-radius: 12px !important;
+}
+.gr-accordion summary {
+    color: white !important;
+    font-weight: 500 !important;
+}
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .gr-row {
+        flex-direction: column !important;
+    }
+    
+    .header-text h1 {
+        font-size: 2rem !important;
+    }
+}
+"""
 
-with gr.Blocks(css=custom_css, title="🚀 AI Object Removal Chat") as demo:
-    # two‑column layout
+# Create the Gradio interface with modern styling
+with gr.Blocks(
+    title="🚀 AI Object Removal Chat",
+    theme=gr.themes.Base(
+        primary_hue="emerald",
+        secondary_hue="blue",
+        neutral_hue="slate",
+        font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui", "sans-serif"]
+    ),
+    css=custom_css,
+    fill_height=True
+) as demo:
+    
+    # Header Section
     with gr.Row():
-        # ─── LEFT: chat + controls ─────────────────────────────
-        with gr.Column(scale=2):
-            chat   = gr.Chatbot(label="💬 Conversation").style(height=450)
-            state  = gr.State([])  # to store history
-            # controls below chat
-            with gr.Row():
-                input_image = gr.Image(type="pil", label="📷 Upload") 
-                object_name = gr.Textbox(label="🎯 What to remove?", value="person")
+        with gr.Column():
+            gr.HTML("""
+                <div class="header-text">
+                    <h1>🚀 AI Object Removal Chat</h1>
+                    <p>Upload an image and tell me what object you want to remove with professional results!</p>
+                </div>
+            """)
+    
+    # Main Content Layout
+    with gr.Row(equal_height=True):
+        # Left Panel - Chat-like Interface
+        with gr.Column(scale=2, elem_classes=["chat-panel"]):
+            gr.Markdown("### 💬 Chat Interface")
+            
+            # Image Upload
+            input_image = gr.Image(
+                label="📷 Upload Your Image",
+                type="pil",
+                height=250,
+                container=True
+            )
+            
+            # Object Input
+            object_name = gr.Textbox(
+                label="🎯 What should I remove?",
+                placeholder="Type any object name (e.g., person, car, dog, bottle, tree, sign...)",
+                value="person",
+                container=True,
+                info="💡 I understand synonyms and variations!"
+            )
+            
+            # Quick Examples
             with gr.Row():
-                guidance = gr.Slider(1.0, 10.0, value=2.5, label="Guidance")
-                steps    = gr.Slider(10, 50, value=28, step=2, label="Steps")
-            process_btn = gr.Button("🚀 Remove Object", variant="primary")
-
-        # ─── RIGHT: preview ───────────────────────────────────
-        with gr.Column(scale=3):
-            output_image = gr.Image(label="🖼 Result", interactive=False)
-            status_text  = gr.Markdown("", label="📊 Info")
+                example_buttons = []
+                examples = ["person", "car", "dog", "cat", "bottle", "chair", "tree", "sign"]
+                for example in examples:
+                    btn = gr.Button(example, size="sm", variant="secondary")
+                    btn.click(lambda x=example: x, outputs=object_name)
+                    example_buttons.append(btn)
+            
+            # Advanced Settings
+            with gr.Accordion("⚙️ Advanced Settings", open=False):
+                guidance_scale = gr.Slider(
+                    minimum=1.0,
+                    maximum=10.0,
+                    value=2.5,
+                    step=0.1,
+                    label="🎯 Guidance Scale",
+                    info="Higher = more faithful to prompt, lower = more creative"
+                )
+                
+                steps = gr.Slider(
+                    minimum=10,
+                    maximum=50,
+                    value=28,
+                    step=2,
+                    label="🔄 Processing Steps",
+                    info="More steps = higher quality but slower processing"
+                )
+            
+            # Process Button
+            process_btn = gr.Button(
+                "🚀 Remove Object",
+                variant="primary",
+                size="lg",
+                elem_id="process-btn"
+            )
+        
+        # Right Panel - Output
+        with gr.Column(scale=3, elem_classes=["output-panel"]):
+            gr.Markdown("### 🖼️ Result")
+            
+            output_image = gr.Image(
+                label="Processed Image",
+                type="pil",
+                height=400,
+                container=True,
+                interactive=False
+            )
+            
+            status_text = gr.Textbox(
+                label="📊 Status & Information",
+                max_lines=4,
+                interactive=False,
+                container=True
+            )
 
-    # wire up the chat pipeline
+    
+    # Event Handlers
     process_btn.click(
-        fn=chat_pipeline,
-        inputs=[input_image, object_name, guidance, steps, state],
-        outputs=[chat, state, output_image, status_text]
+        fn=remove_objects,
+        inputs=[input_image, object_name, guidance_scale, steps],
+        outputs=[output_image, status_text]
     )
-
-    # also send on Enter in the textbox
+    
+    # Auto-process on Enter key
     object_name.submit(
-        fn=chat_pipeline,
-        inputs=[input_image, object_name, guidance, steps, state],
-        outputs=[chat, state, output_image, status_text]
+        fn=remove_objects,
+        inputs=[input_image, object_name, guidance_scale, steps],
+        outputs=[output_image, status_text]
     )
 
 if __name__ == "__main__":