Spaces:

Revrse
/

SaltedAI

Sleeping

App Files Files Community

Revrse commited on Jul 24, 2025

Commit

1f9e50b

verified ·

1 Parent(s): d709b64

Update app.py

Browse files

Files changed (1) hide show

app.py +413 -597

app.py CHANGED Viewed

@@ -1,610 +1,426 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI Object Removal - Chat Interface</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
-            color: #ffffff;
-            height: 100vh;
-            overflow: hidden;
-        }
-        .container {
-            display: flex;
-            height: 100vh;
-        }
-        /* Left Panel - Chat Interface */
-        .chat-panel {
-            width: 40%;
-            background: rgba(20, 20, 30, 0.8);
-            backdrop-filter: blur(20px);
-            border-right: 1px solid rgba(255, 255, 255, 0.1);
-            display: flex;
-            flex-direction: column;
-        }
-        .chat-header {
-            padding: 20px;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-            background: rgba(0, 0, 0, 0.3);
-        }
-        .chat-header h1 {
-            font-size: 24px;
-            background: linear-gradient(45deg, #00ff88, #00ccff);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            margin-bottom: 8px;
-        }
-        .chat-header p {
-            color: rgba(255, 255, 255, 0.7);
-            font-size: 14px;
-        }
-        .chat-messages {
-            flex: 1;
-            overflow-y: auto;
-            padding: 20px;
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-        }
-        .message {
-            max-width: 85%;
-            padding: 12px 16px;
-            border-radius: 18px;
-            font-size: 14px;
-            line-height: 1.4;
-            animation: slideIn 0.3s ease-out;
-        }
-        .message.user {
-            align-self: flex-end;
-            background: linear-gradient(135deg, #00ff88, #00ccff);
-            color: #000;
-            font-weight: 500;
-        }
-        .message.ai {
-            align-self: flex-start;
-            background: rgba(255, 255, 255, 0.1);
-            border: 1px solid rgba(255, 255, 255, 0.2);
-        }
-        .message.status {
-            align-self: center;
-            background: rgba(255, 193, 7, 0.2);
-            border: 1px solid rgba(255, 193, 7, 0.4);
-            color: #ffc107;
-            font-size: 12px;
-            text-align: center;
-        }
-        .image-preview {
-            max-width: 200px;
-            border-radius: 12px;
-            margin: 8px 0;
-            border: 2px solid rgba(255, 255, 255, 0.2);
-        }
-        .chat-input {
-            padding: 20px;
-            border-top: 1px solid rgba(255, 255, 255, 0.1);
-            background: rgba(0, 0, 0, 0.3);
-        }
-        .input-container {
-            display: flex;
-            gap: 12px;
-            margin-bottom: 12px;
-        }
-        .text-input {
-            flex: 1;
-            padding: 12px 16px;
-            background: rgba(255, 255, 255, 0.1);
-            border: 1px solid rgba(255, 255, 255, 0.3);
-            border-radius: 25px;
-            color: #fff;
-            font-size: 14px;
-            transition: all 0.3s ease;
-        }
-        .text-input:focus {
-            outline: none;
-            border-color: #00ff88;
-            box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.2);
-        }
-        .text-input::placeholder {
-            color: rgba(255, 255, 255, 0.5);
-        }
-        .send-btn {
-            padding: 12px 20px;
-            background: linear-gradient(135deg, #00ff88, #00ccff);
-            border: none;
-            border-radius: 25px;
-            color: #000;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-size: 14px;
-        }
-        .send-btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 8px 25px rgba(0, 255, 136, 0.3);
-        }
-        .send-btn:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-            transform: none;
-        }
-        .file-input-container {
-            display: flex;
-            gap: 8px;
-            align-items: center;
-        }
-        .file-input {
-            display: none;
-        }
-        .file-label {
-            padding: 8px 16px;
-            background: rgba(255, 255, 255, 0.1);
-            border: 1px solid rgba(255, 255, 255, 0.3);
-            border-radius: 20px;
-            cursor: pointer;
-            font-size: 12px;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 6px;
-        }
-        .file-label:hover {
-            background: rgba(255, 255, 255, 0.2);
-        }
-        .settings-panel {
-            padding: 12px 0;
-            border-top: 1px solid rgba(255, 255, 255, 0.1);
-        }
-        .setting-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 8px;
-        }
-        .setting-label {
-            font-size: 12px;
-            color: rgba(255, 255, 255, 0.7);
-        }
-        .slider {
-            width: 100px;
-            height: 4px;
-            background: rgba(255, 255, 255, 0.2);
-            border-radius: 2px;
-            outline: none;
-            -webkit-appearance: none;
-        }
-        .slider::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            width: 16px;
-            height: 16px;
-            background: #00ff88;
-            border-radius: 50%;
-            cursor: pointer;
-        }
-        /* Right Panel - Output */
-        .output-panel {
-            width: 60%;
-            background: rgba(10, 10, 20, 0.8);
-            backdrop-filter: blur(20px);
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            position: relative;
-        }
-        .output-content {
-            text-align: center;
-            max-width: 90%;
-        }
-        .output-image {
-            max-width: 100%;
-            max-height: 70vh;
-            border-radius: 16px;
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
-            border: 2px solid rgba(255, 255, 255, 0.1);
-            transition: all 0.3s ease;
-        }
-        .output-image:hover {
-            transform: scale(1.02);
-            box-shadow: 0 25px 80px rgba(0, 255, 136, 0.2);
-        }
-        .placeholder {
-            color: rgba(255, 255, 255, 0.4);
-            font-size: 18px;
-            margin-bottom: 20px;
-        }
-        .loading {
-            display: none;
-            flex-direction: column;
-            align-items: center;
-            gap: 20px;
-        }
-        .spinner {
-            width: 40px;
-            height: 40px;
-            border: 3px solid rgba(255, 255, 255, 0.3);
-            border-top: 3px solid #00ff88;
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-        }
-        .download-btn {
-            margin-top: 20px;
-            padding: 12px 24px;
-            background: rgba(255, 255, 255, 0.1);
-            border: 1px solid rgba(255, 255, 255, 0.3);
-            border-radius: 25px;
-            color: #fff;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            text-decoration: none;
-            display: inline-block;
-        }
-        .download-btn:hover {
-            background: rgba(255, 255, 255, 0.2);
-            transform: translateY(-2px);
-        }
-        @keyframes slideIn {
-            from {
-                opacity: 0;
-                transform: translateY(20px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        /* Scrollbar Styling */
-        .chat-messages::-webkit-scrollbar {
-            width: 6px;
-        }
-        .chat-messages::-webkit-scrollbar-track {
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 3px;
-        }
-        .chat-messages::-webkit-scrollbar-thumb {
-            background: rgba(255, 255, 255, 0.3);
-            border-radius: 3px;
-        }
-        .chat-messages::-webkit-scrollbar-thumb:hover {
-            background: rgba(255, 255, 255, 0.5);
-        }
-        /* Responsive Design */
-        @media (max-width: 768px) {
-            .container {
-                flex-direction: column;
-            }
-            .chat-panel {
-                width: 100%;
-                height: 60%;
-            }
-            .output-panel {
-                width: 100%;
-                height: 40%;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <!-- Left Panel - Chat Interface -->
-        <div class="chat-panel">
-            <div class="chat-header">
-                <h1>🚀 AI Object Removal</h1>
-                <p>Upload an image and tell me what to remove</p>
-            </div>
-            <div class="chat-messages" id="chatMessages">
-                <div class="message ai">
-                    <div>👋 Hi! I'm your AI assistant for object removal. Upload an image and tell me what object you'd like me to remove from it.</div>
-                </div>
-                <div class="message ai">
-                    <div>💡 Try objects like: person, car, dog, bottle, chair, sign, tree, phone, etc.</div>
-                </div>
-            </div>
-            <div class="chat-input">
-                <div class="input-container">
-                    <input
-                        type="text"
-                        class="text-input"
-                        id="objectInput"
-                        placeholder="What object should I remove? (e.g., person, car, dog...)"
-                        value="person"
-                    />
-                    <button class="send-btn" id="processBtn">Remove Object</button>
-                </div>
-                <div class="file-input-container">
-                    <input type="file" class="file-input" id="imageInput" accept="image/*" />
-                    <label for="imageInput" class="file-label">
-                        📷 Upload Image
-                    </label>
-                    <span id="fileName" style="font-size: 12px; color: rgba(255,255,255,0.6);"></span>
-                </div>
-                <div class="settings-panel">
-                    <div class="setting-item">
-                        <span class="setting-label">Guidance Scale: <span id="guidanceValue">2.5</span></span>
-                        <input type="range" class="slider" id="guidanceSlider" min="1" max="10" step="0.1" value="2.5" />
-                    </div>
-                    <div class="setting-item">
-                        <span class="setting-label">Steps: <span id="stepsValue">28</span></span>
-                        <input type="range" class="slider" id="stepsSlider" min="10" max="50" step="2" value="28" />
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!-- Right Panel - Output -->
-        <div class="output-panel">
-            <div class="output-content" id="outputContent">
-                <div class="placeholder" id="placeholder">
-                    <div style="font-size: 48px; margin-bottom: 20px;">🖼️</div>
-                    <div>Your processed image will appear here</div>
-                    <div style="margin-top: 10px; font-size: 14px; opacity: 0.6;">Upload an image and specify an object to remove</div>
-                </div>
-                <div class="loading" id="loading">
-                    <div class="spinner"></div>
-                    <div>Processing your image...</div>
-                    <div style="font-size: 12px; opacity: 0.7;">This may take a few moments</div>
                 </div>
-            </div>
-        </div>
-    </div>
-    <script>
-        let uploadedImage = null;
-        let currentImageUrl = null;
-        // DOM elements
-        const chatMessages = document.getElementById('chatMessages');
-        const objectInput = document.getElementById('objectInput');
-        const processBtn = document.getElementById('processBtn');
-        const imageInput = document.getElementById('imageInput');
-        const fileName = document.getElementById('fileName');
-        const outputContent = document.getElementById('outputContent');
-        const placeholder = document.getElementById('placeholder');
-        const loading = document.getElementById('loading');
-        const guidanceSlider = document.getElementById('guidanceSlider');
-        const stepsSlider = document.getElementById('stepsSlider');
-        const guidanceValue = document.getElementById('guidanceValue');
-        const stepsValue = document.getElementById('stepsValue');
-        // Update slider values
-        guidanceSlider.addEventListener('input', (e) => {
-            guidanceValue.textContent = e.target.value;
-        });
-        stepsSlider.addEventListener('input', (e) => {
-            stepsValue.textContent = e.target.value;
-        });
-        // Handle image upload
-        imageInput.addEventListener('change', (e) => {
-            const file = e.target.files[0];
-            if (file) {
-                fileName.textContent = file.name;
-                const reader = new FileReader();
-                reader.onload = (e) => {
-                    uploadedImage = e.target.result;
-                    addMessage('user', `📷 Uploaded: ${file.name}`, uploadedImage);
-                    addMessage('ai', '✅ Image uploaded successfully! Now tell me what object you\'d like me to remove.');
-                };
-                reader.readAsDataURL(file);
-            }
-        });
-        // Handle enter key
-        objectInput.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') {
-                processImage();
-            }
-        });
-        // Handle process button
-        processBtn.addEventListener('click', processImage);
-        function addMessage(type, text, imageUrl = null) {
-            const messageDiv = document.createElement('div');
-            messageDiv.className = `message ${type}`;
-            let content = `<div>${text}</div>`;
-            if (imageUrl) {
-                content += `<img src="${imageUrl}" class="image-preview" alt="Uploaded image" />`;
-            }
-            messageDiv.innerHTML = content;
-            chatMessages.appendChild(messageDiv);
-            chatMessages.scrollTop = chatMessages.scrollHeight;
-        }
-        function addStatusMessage(text) {
-            const messageDiv = document.createElement('div');
-            messageDiv.className = 'message status';
-            messageDiv.innerHTML = `<div>${text}</div>`;
-            chatMessages.appendChild(messageDiv);
-            chatMessages.scrollTop = chatMessages.scrollHeight;
-        }
-        function showLoading() {
-            placeholder.style.display = 'none';
-            loading.style.display = 'flex';
-            if (currentImageUrl) {
-                const existingImage = outputContent.querySelector('.output-image');
-                if (existingImage) {
-                    existingImage.style.opacity = '0.3';
-                }
-            }
-        }
-        function hideLoading() {
-            loading.style.display = 'none';
-            if (currentImageUrl) {
-                const existingImage = outputContent.querySelector('.output-image');
-                if (existingImage) {
-                    existingImage.style.opacity = '1';
-                }
-            }
-        }
-        function displayResult(imageUrl, downloadUrl = null) {
-            hideLoading();
-            placeholder.style.display = 'none';
-            // Remove existing image
-            const existingImage = outputContent.querySelector('.output-image');
-            const existingDownload = outputContent.querySelector('.download-btn');
-            if (existingImage) existingImage.remove();
-            if (existingDownload) existingDownload.remove();
-            // Add new image
-            const img = document.createElement('img');
-            img.src = imageUrl;
-            img.className = 'output-image';
-            img.alt = 'Processed result';
-            outputContent.appendChild(img);
-            // Add download button if URL provided
-            if (downloadUrl) {
-                const downloadBtn = document.createElement('a');
-                downloadBtn.href = downloadUrl;
-                downloadBtn.download = 'removed_object_result.png';
-                downloadBtn.className = 'download-btn';
-                downloadBtn.textContent = '💾 Download Result';
-                outputContent.appendChild(downloadBtn);
-            }
-            currentImageUrl = imageUrl;
-        }
-        function processImage() {
-            if (!uploadedImage) {
-                addMessage('ai', '❌ Please upload an image first!');
-                return;
-            }
-            const objectName = objectInput.value.trim();
-            if (!objectName) {
-                addMessage('ai', '❌ Please specify what object you want me to remove!');
-                return;
-            }
-            const guidance = guidanceSlider.value;
-            const steps = stepsSlider.value;
-            // Add user message
-            addMessage('user', `Remove "${objectName}" from the image (Guidance: ${guidance}, Steps: ${steps})`);
-            // Show processing status
-            addStatusMessage('🔄 Processing your request...');
-            showLoading();
-            // Simulate processing (replace with actual API call)
-            simulateProcessing(objectName, guidance, steps);
-        }
-        function simulateProcessing(objectName, guidance, steps) {
-            // This is a simulation - replace with your actual API endpoint
-            setTimeout(() => {
-                // Generate a mock result (you'll replace this with actual processing)
-                const canvas = document.createElement('canvas');
-                const ctx = canvas.getContext('2d');
-                const img = new Image();
-                img.onload = () => {
-                    canvas.width = img.width;
-                    canvas.height = img.height;
-                    // Draw original image
-                    ctx.drawImage(img, 0, 0);
-                    // Add some visual indication of processing (optional)
-                    ctx.fillStyle = 'rgba(0, 255, 136, 0.1)';
-                    ctx.fillRect(0, 0, canvas.width, canvas.height);
-                    // Add text overlay to show it's processed
-                    ctx.fillStyle = 'rgba(0, 255, 136, 0.8)';
-                    ctx.font = '20px Arial';
-                    ctx.fillText(`${objectName} removed`, 20, 40);
-                    const resultUrl = canvas.toDataURL();
-                    // Display result
-                    displayResult(resultUrl, resultUrl);
-                    // Add success message
-                    addMessage('ai', `✅ Successfully removed "${objectName}" from your image!`);
-                    addStatusMessage(`⚙️ Settings used: Guidance=${guidance}, Steps=${steps}`);
-                };
-                img.src = uploadedImage;
-            }, 2000); // Simulate 2 second processing time
-        }
-        // Initialize with some example messages
-        setTimeout(() => {
-            addMessage('ai', '🎯 Quick tip: I work best with clear, well-lit images where the object is clearly visible.');
-        }, 1000);
-    </script>
-</body>
-</html>

+import gradio as gr
+import numpy as np
+from PIL import Image, ImageDraw
+import requests
+import io
+import os
+import spaces
+import json
+import re
+import torch
+from diffusers import FluxKontextPipeline
+# Initialize FLUX model for advanced inpainting
+@spaces.GPU
+def load_flux_model():
+    """Load FLUX.1 Kontext model for high-quality object removal"""
+    try:
+        pipe = FluxKontextPipeline.from_pretrained(
+            "black-forest-labs/FLUX.1-Kontext-dev",
+            torch_dtype=torch.bfloat16
+        ).to("cuda")
+        return pipe
+    except Exception as e:
+        print(f"Failed to load FLUX model: {e}")
+        return None
+# Global variable to store the model (loaded once)
+flux_pipe = None
+def fuzzy_match_object(user_input, detected_labels):
+    """
+    Advanced matching function that handles synonyms, plurals, and fuzzy matching
+    """
+    user_input = user_input.lower().strip()
+    matches = []
+    # Direct matching
+    for detection in detected_labels:
+        label = detection.get('label', '').lower()
+        # Exact match
+        if label == user_input:
+            matches.append(detection)
+            continue
+        # Handle plurals
+        if user_input.endswith('s') and label == user_input[:-1]:
+            matches.append(detection)
+            continue
+        if label.endswith('s') and user_input == label[:-1]:
+            matches.append(detection)
+            continue
+        # Substring matching
+        if user_input in label or label in user_input:
+            matches.append(detection)
+            continue
+        # Handle common synonyms
+        synonyms = {
+            'person': ['human', 'people', 'man', 'woman', 'individual'],
+            'car': ['vehicle', 'automobile', 'auto'],
+            'bike': ['bicycle', 'cycle'],
+            'phone': ['mobile', 'cellphone', 'smartphone'],
+            'tv': ['television', 'telly'],
+            'couch': ['sofa', 'settee'],
+            'bag': ['purse', 'handbag', 'backpack'],
+            'glasses': ['spectacles', 'eyeglasses'],
+            'plane': ['airplane', 'aircraft'],
+            'boat': ['ship', 'vessel'],
+            'dog': ['puppy', 'canine'],
+            'cat': ['kitten', 'feline']
+        }
+        # Check if user input matches any synonym
+        for main_word, synonym_list in synonyms.items():
+            if (user_input == main_word and label in synonym_list) or \
+               (user_input in synonym_list and label == main_word):
+                matches.append(detection)
+                break
+    return matches
+@spaces.GPU
+def flux_inpainting(image, object_name, guidance_scale=2.5, steps=28):
+    """
+    Use FLUX.1 Kontext for intelligent object removal
+    """
+    global flux_pipe
+    try:
+        # Load FLUX model if not already loaded
+        if flux_pipe is None:
+            print("Loading FLUX.1 Kontext model...")
+            flux_pipe = load_flux_model()
+        if flux_pipe is None:
+            raise Exception("Failed to load FLUX model")
+        # Create intelligent removal prompt
+        removal_prompt = f"Remove the {object_name} from this image, fill with background that matches the surrounding environment, photorealistic, seamless, high quality"
+        # Use FLUX for contextual editing
+        result = flux_pipe(
+            image=image.convert("RGB"),
+            prompt=removal_prompt,
+            guidance_scale=guidance_scale,
+            width=image.size[0],
+            height=image.size[1],
+            num_inference_steps=steps,
+            generator=torch.Generator().manual_seed(42),
+        ).images[0]
+        return result, True
+    except Exception as e:
+        print(f"FLUX inpainting error: {str(e)}")
+        return None, False
+@spaces.GPU
+def remove_objects(image, object_name, guidance_scale, steps):
+    """
+    Main function to remove any specified object using advanced detection + FLUX inpainting
+    """
+    try:
+        if image is None:
+            raise gr.Error("Please upload an image")
+        if not object_name or not object_name.strip():
+            raise gr.Error("Please enter the name of the object you want to remove")
+        # Try to get token from multiple sources
+        token = os.getenv("HF_TOKEN") or os.getenv("HUGGINGFACE_HUB_TOKEN")
+        if not token:
+            raise gr.Error("Please provide your Hugging Face token or set HF_TOKEN in Space secrets")
+        # Use FLUX.1 Kontext for intelligent object removal
+        print("Using FLUX.1 Kontext for advanced object removal...")
+        result_image, flux_success = flux_inpainting(image, object_name, guidance_scale, steps)
+        if flux_success and result_image:
+            status_msg = f"✅ Successfully removed '{object_name}' object(s)\n"
+            status_msg += f"⚙️ Settings: Guidance={guidance_scale}, Steps={steps}"
+            return result_image, status_msg
+        else:
+            # Fallback: show detection areas
+            status_msg = f"⚠️ Inpainting failed, but detection was successful\n"
+            status_msg += f"💡 Try adjusting guidance scale or steps, or check GPU availability"
+            return result_image, status_msg
+    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
+    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
+            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
+            )
+    # Chat-like Examples
+    gr.Examples(
+        examples=[
+            ["https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=300", "person"],
+            ["https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=300", "car"],
+            ["https://images.unsplash.com/photo-1552053831-71594a27632d?w=300", "dog"]
+        ],
+        inputs=[input_image, object_name],
+        label="💡 Try these examples"
+    )
+    # Event Handlers
+    process_btn.click(
+        fn=remove_objects,
+        inputs=[input_image, object_name, guidance_scale, steps],
+        outputs=[output_image, status_text]
+    )
+    # Auto-process on Enter key
+    object_name.submit(
+        fn=remove_objects,
+        inputs=[input_image, object_name, guidance_scale, steps],
+        outputs=[output_image, status_text]
+    )
+if __name__ == "__main__":
+    demo.launch()