Update app.py

app.py

@@ -151,265 +151,63 @@ def remove_objects(image, object_name, guidance_scale, steps):
     except Exception as e:
         return image, f"❌ Error: {str(e)}"
 
-# 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;
-    }
-}
-"""
-
-# 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
+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
+
+with gr.Blocks(css=custom_css, title="🚀 AI Object Removal Chat") as demo:
+    # two‑column layout
     with gr.Row():
-        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
+        # ─── 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():
-                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
-            )
+                input_image = gr.Image(type="pil", label="📷 Upload") 
+                object_name = gr.Textbox(label="🎯 What to remove?", value="person")
+            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")
 
-    
-    # Event Handlers
+        # ─── RIGHT: preview ───────────────────────────────────
+        with gr.Column(scale=3):
+            output_image = gr.Image(label="🖼 Result", interactive=False)
+            status_text  = gr.Markdown("", label="📊 Info")
+
+    # wire up the chat pipeline
     process_btn.click(
-        fn=remove_objects,
-        inputs=[input_image, object_name, guidance_scale, steps],
-        outputs=[output_image, status_text]
+        fn=chat_pipeline,
+        inputs=[input_image, object_name, guidance, steps, state],
+        outputs=[chat, state, output_image, status_text]
     )
-    
-    # Auto-process on Enter key
+
+    # also send on Enter in the textbox
     object_name.submit(
-        fn=remove_objects,
-        inputs=[input_image, object_name, guidance_scale, steps],
-        outputs=[output_image, status_text]
+        fn=chat_pipeline,
+        inputs=[input_image, object_name, guidance, steps, state],
+        outputs=[chat, state, output_image, status_text]
     )
 
 if __name__ == "__main__":