Update app.py

app.py

@@ -48,7 +48,7 @@ from utils.lua_converter import LuaConverter
 from transformers import Qwen2VLForConditionalGeneration, AutoProcessor
 from qwen_vl_utils import process_vision_info
 import torch
-from utils.lua2lrt import lua_to_lrtemplate
+from lua2lrt import lua_to_lrtemplate
 from huggingface_hub import snapshot_download
 import spaces
 
@@ -1102,888 +1102,183 @@ def process_analysis_pipeline_stream(image_dict, user_prompt, max_new_tokens, to
 # Create Gradio interface
 def create_interface():
     """
-    Create and configure the modern chat-style Gradio web interface
+    Create and configure the Gradio web interface similar to example.py style
     
     Returns:
-        gr.Blocks: Configured Gradio interface with chat-style layout
+        gr.Blocks: Configured Gradio interface
     """
-    # Custom CSS styles mimicking modern chat interfaces
-    custom_css = """
-    /* Global styles */
-    .gradio-container {
-        max-width: 1200px !important;
-        margin: 0 auto !important;
-        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
-    }
     
-    /* Header styles - clean white background */
-    .app-header {
-        background: white;
-        color: #1f2937;
-        padding: 0.1rem 2rem;
-        border-radius: 12px 12px 0 0;
-        margin-bottom: 0 !important;
-        text-align: center;
-        border: 1px solid #e5e7eb;
-        border-bottom: 1px solid #e5e7eb;
-    }
-    
-    .app-title {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 1.6rem;
-        font-weight: 600;
-        margin: 0;
-        color: #1f2937;
-    }
-    .centered-image {
-        display: flex !important;
-        justify-content: center !important;
-        align-items: center !important;
-        margin: auto !important;
-    }
-    .centered-image img {
-        max-width: 100% !important;
-        max-height: 100% !important;
-        object-fit: contain;
-    }
-    .jarvis_image_container {
-        display: flex !important;
-        justify-content: center !important;
-        background: white;
-        align-items: center !important;
-    }
-    .tight-container {
-        padding: 0 !important;
-        margin: 0 !important;
-        height: fit-content !important;  /* Container height adapts to content */
-    }
-    /* Main chat area - ensure borders are visible and connect seamlessly with header */
-    .chat-container {
-        height: 600px;
-        border: 1px solid #e5e7eb !important;
-        border-top: 1px solid #e5e7eb !important;
-        border-radius: 0 0 12px 12px;
-        background: #ffffff !important;
-        margin-top: -1px !important;
-        margin-bottom: 0 !important;
-        overflow-y: auto !important;
-        max-height: none !important;
-    }
-    
-    /* Chat message styles */
-    .chatbot {
-        border: 1px solid #e5e7eb !important;
-        border-top: none !important;
-        background: #ffffff !important;
-        border-radius: 0 0 12px 12px !important;
-        margin-top: 0 !important;
-        margin-bottom: 0 !important;
-        overflow-y: auto !important;
-        max-height: none !important;
-    }
-    
-    /* Reduce spacing between messages */
-    .chatbot .message {
-        margin-bottom: 0 !important;
-        padding-bottom: 0 !important;
-        margin-top: 0 !important;
-        padding-top: 0 !important;
-    }
-    
-    /* Reduce spacing between message containers */
-    .chatbot .block {
-        gap: 0 !important;
-        margin-bottom: -8px !important;
-    }
-
-    /* Reduce spacing between thinking and recommendation messages */
-    .chatbot .message-wrap {
-        margin-bottom: -8px !important;
-    }
-
-    /* Reduce spacing between adjacent messages */
-    .chatbot .message + .message {
-        margin-top: -10px !important;
-    }
-
-    /* Reduce spacing between bot messages */
-    .chatbot .bot-message {
-        margin-top: -5px !important;
-    }
-
-    /* Special control over spacing between thinking and recommendation messages */
-    .chatbot .message:nth-child(odd) + .message:nth-child(even) {
-        margin-top: -15px !important;
-    }
-    
-    /* Ensure message content area fully expands */
-    .chatbot .message .content {
-        max-height: none !important;
-        overflow: visible !important;
-        white-space: pre-wrap !important;
-        word-wrap: break-word !important;
-        line-height: 1.2 !important;
-        margin: 0 !important;
-        padding: 0 !important;
-    }
-    
-    /* Remove any height limitations */
-    .chatbot .message-bubble {
-        max-height: none !important;
-        overflow: visible !important;
-        margin: 0 !important;
-        padding: 0 !important;
-    }
-    
-    /* Ensure entire chat area can scroll, but individual messages fully expand */
-    .chatbot .messages-container {
-        max-height: 550px !important;
-        overflow-y: auto !important;
-    }
-    
-    /* Image styles in user messages */
-    .chatbot .message img {
-        max-width: 300px !important;
-        max-height: 400px !important;
-        border-radius: 12px !important;
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
-        margin-bottom: 4px !important;
-        margin-top: 4px !important;
-        object-fit: cover !important;
-        display: block !important;
-    }
-    
-    /* Processed image styles - larger display for results */
-    .chatbot .message img[src*="lr_processed"] {
-        max-width: 450px !important;
-        max-height: 500px !important;
-        border: 2px solid #e5e7eb !important;
-        border-radius: 16px !important;
-        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
-        margin: 8px 0 !important;
-        object-fit: contain !important;
-    }
-    
-    /* All processed result images - enhance visibility */
-    .chatbot .message img[src*="results/"] {
-        max-width: 500px !important;
-        max-height: 600px !important;
-        border: 3px solid #3b82f6 !important;
-        border-radius: 20px !important;
-        box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2) !important;
-        margin: 12px auto !important;
-        object-fit: contain !important;
-        display: block !important;
-        background: white !important;
-        padding: 4px !important;
-    }
-    
-    /* Enhanced display for assistant images */
-    .chatbot .bot-message img {
-        border: 2px solid #059669 !important;
-        border-radius: 16px !important;
-        box-shadow: 0 6px 12px rgba(5, 150, 105, 0.15) !important;
-        max-width: 100% !important;
-        height: auto !important;
-    }
-    
-    /* Processed image container styling */
-    .chatbot .message .processed-image-container {
-        display: flex !important;
-        flex-direction: column !important;
-        align-items: center !important;
-        margin: 8px 0 !important;
-        padding: 8px !important;
-        background: #f8fafc !important;
-        border-radius: 12px !important;
-        border: 1px solid #e2e8f0 !important;
-    }
-    
-    /* Multimodal message container */
-    .chatbot .message-content {
-        display: flex !important;
-        flex-direction: column !important;
-        gap: 2px !important;
-    }
-    
-    .chatbot .message .multimodal-content {
-        display: flex !important;
-        flex-direction: column !important;
-        gap: 4px !important;
-    }
-    
-    .chatbot .message .multimodal-content img {
-        max-width: 100% !important;
-        height: auto !important;
-        border-radius: 12px !important;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
-        margin: 2px 0 !important;
-    }
-    
-    .chatbot .message .multimodal-content .text-content {
-        font-size: 0.95rem !important;
-        line-height: 1.2 !important;
-        color: inherit !important;
-        margin: 0 !important;
-        padding: 0 !important;
-    }
-    
-    /* User message bubble styles */
-    .chatbot .user-message {
-        background: #f3f4f6 !important;
-        color: #1f2937 !important;
-        border-radius: 18px 18px 4px 18px !important;
-        padding: 8px 12px !important;
-        margin: 4px 0 !important;
-        max-width: 80% !important;
-        margin-left: auto !important;
-        border: 1px solid #e5e7eb !important;
-    }
-    
-    /* AI message bubble styles */
-    .chatbot .bot-message {
-        background: white !important;
-        color: #374151 !important;
-        border-radius: 18px 18px 18px 4px !important;
-        padding: 8px 12px !important;
-        margin: 2px 0 !important;
-        max-width: 80% !important;
-        border: 1px solid #e5e7eb !important;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
-        margin-top: -5px !important;
-        margin-bottom: 0 !important;
-    }
-
-    /* Special styles for titles */
-    .chatbot .message .content strong {
-        display: inline-block !important;
-        margin-bottom: 0 !important;
-        padding-bottom: 0 !important;
-    }
-
-    /* Special styles for content following Thinking and Recommendations titles */
-    .chatbot .message .content strong + br {
-        display: none !important;
-    }
-
-    /* Further reduce spacing between thinking and recommendation messages */
-    .chatbot .message:nth-last-child(n+2) {
-        margin-bottom: -12px !important;
-    }
-    
-    /* Override paragraph spacing in messages */
-    .chatbot .message p {
-        margin: 0 !important;
-        padding: 0 !important;
-    }
-    
-    /* Override list spacing in messages */
-    .chatbot .message ul, 
-    .chatbot .message ol {
-        margin-top: 2px !important;
-        margin-bottom: 2px !important;
-        padding-left: 20px !important;
-    }
-    
-    .chatbot .message li {
-        margin: 0 !important;
-        padding: 0 !important;
-        line-height: 1.2 !important;
-    }
-    
-    /* Reduce spacing between emoji and title */
-    .chatbot .message .content span {
-        margin-right: 0 !important;
-        padding-right: 0 !important;
-    }
-    
-    /* Reduce spacing between title and content */
-    .chatbot .message .content strong + span {
-        margin-left: 0 !important;
-        padding-left: 0 !important;
-    }
-    
-    /* Input area styles */
-    .input-section {
-        background: white;
-        padding: 1.5rem;
-        border-radius: 12px;
-        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-        margin-top: 1rem;
-        border: 1px solid #e5e7eb;
-    }
-    
-    .image-upload-area {
-        border: 2px dashed #cbd5e1;
-        border-radius: 8px;
-        padding: 1.5rem;
-        margin-bottom: 1rem;
-        transition: all 0.3s ease;
-        background: #f8fafc;
-    }
-    
-    .image-upload-area:hover {
-        border-color: #667eea;
-        background: #f1f5f9;
-    }
-    
-    /* Ensure the image upload component fits within the upload area */
-    .image-upload-area .gradio-image {
-        border: none !important;
-        background: transparent !important;
-        margin: 0 !important;
-        padding: 0 !important;
-    }
-    
-    .image-upload-area .image-container {
-        border: none !important;
-        background: transparent !important;
-    }
-      
-    /* Remove borders from all child components in upload area */
-    .image-upload-area > * {
-        border: none !important;
-    }
-    
-    .image-upload-area .gradio-group {
-        border: none !important;
-        background: transparent !important;
-        margin: 0 !important;
-        padding: 0 !important;
-    }
-    
-    .image-upload-area .gradio-column {
-        border: none !important;
-        background: transparent !important;
-    }
-    
-    /* Style the upload drop zone */
-    .image-upload-area .upload-zone {
-        border: 1px solid #e2e8f0 !important;
-        border-radius: 6px !important;
-        background: white !important;
-        margin-top: 0.5rem !important;
-    }
-    
-    /* Simplified button styles */
-    .simple-button {
-        background: #f8fafc !important;
-        border: 1px solid #e2e8f0 !important;
-        border-radius: 8px !important;
-        color: #475569 !important;
-        font-weight: 500 !important;
-        padding: 0.75rem 1.5rem !important;
-        transition: all 0.2s ease !important;
-    }
-    
-    .simple-button:hover {
-        background: #e2e8f0 !important;
-        border-color: #cbd5e1 !important;
-        color: #334155 !important;
-    }
-    
-    .primary-simple-button {
-        background: #667eea !important;
-        border: 1px solid #667eea !important;
-        border-radius: 8px !important;
-        color: white !important;
-        font-weight: 500 !important;
-        padding: 0.75rem 2rem !important;
-        transition: all 0.2s ease !important;
-    }
-    
-    .primary-simple-button:hover {
-        background: #5a67d8 !important;
-        border-color: #5a67d8 !important;
-    }
-    
-    /* Text input styles */
-    .prompt-input {
-        border-radius: 8px !important;
-        border: 1px solid #e1e5e9 !important;
-        padding: 0.75rem !important;
-        font-size: 0.95rem !important;
-    }
-    
-    .prompt-input:focus {
-        border-color: #667eea !important;
-        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
-    }
-    
-    /* System prompt area */
-    .system-prompt-section {
-        margin-top: 2rem;
-        padding: 1rem;
-        background: #f8fafc;
-        border-radius: 8px;
-        border: 1px solid #e1e5e9;
-    }
-    
-    /* Example button styles */
-    .example-buttons button {
-        background: #f1f5f9 !important;
-        border: 1px solid #e2e8f0 !important;
-        border-radius: 6px !important;
-        padding: 8px 12px !important;
-        font-size: 0.85rem !important;
-        color: #475569 !important;
-        transition: all 0.2s ease !important;
-    }
-    
-    .example-buttons button:hover {
-        background: #e2e8f0 !important;
-        border-color: #667eea !important;
-        color: #667eea !important;
-    }
-    
-    /* Welcome screen styles */
-    .welcome-message {
-        text-align: center;
-        padding: 1rem;
-        color: #64748b;
-    }
-    
-    .welcome-title {
-        font-size: 1.5rem;
-        font-weight: 600;
-        color: #334155;
-        margin-bottom: 0.5rem;
-    }
-    
-    .welcome-subtitle {
-        font-size: 1rem;
-        margin-bottom: 1rem;
-        line-height: 1.4;
-    }
-    
-    .welcome-features {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-        gap: 0.5rem;
-        margin-top: 1rem;
-    }
-    
-    .welcome-feature {
-        background: white;
-        padding: 0.75rem;
-        border-radius: 8px;
-        border: 1px solid #e2e8f0;
-        text-align: center;
-    }
-    
-    .welcome-feature-icon {
-        font-size: 1.5rem;
-        margin-bottom: 0.25rem;
-    }
-    
-    .welcome-feature-title {
-        font-weight: 600;
-        margin-bottom: 0.15rem;
-        color: #334155;
-    }
-    
-    .welcome-feature-desc {
-        font-size: 0.85rem;
-        color: #64748b;
-    }
-    
-    /* Responsive design */
-    @media (max-width: 768px) {
-        .gradio-container {
-            margin: 0 1rem !important;
-        }
-        
-        .app-header {
-            padding: 0.75rem 1rem !important;
-        }
-        
-        .app-title {
-            font-size: 1.4rem !important;
-        }
-        
-        .input-section {
-            padding: 1rem !important;
-        }
+    with gr.Blocks(title="JarvisArt: AI-Powered Photo Editing Assistant", theme=gr.themes.Soft()) as demo:
+        # Header with title
+        gr.Markdown("""
+        # 🎨 JarvisArt: AI-Powered Photo Editing Assistant
         
-        .chatbot .message img {
-            max-width: 250px !important;
-            max-height: 300px !important;
-        }
-        
-        .chatbot .user-message,
-        .chatbot .bot-message {
-            max-width: 90% !important;
-        }
-        
-        .welcome-features {
-            grid-template-columns: 1fr !important;
-        }
-    }
-    
-    /* Remove gap between header and chatbot */
-    .app-header + .gradio-row {
-        margin-top: 0 !important;
-        gap: 0 !important;
-    }
-    
-    /* Ensure no gaps between Row components */
-    .gradio-row {
-        gap: 0 !important;
-        margin: 0 !important;
-    }
-    
-    /* Remove unnecessary margins and padding */
-    .block {
-        margin: 0 !important;
-        padding: 0 !important;
-    }
-    
-    /* Ensure header row has no gaps */
-    .gradio-container > .gradio-row:first-child {
-        margin: 0 !important;
-        padding: 0 !important;
-    }
-
-    /* Use negative margin to force components closer - most aggressive approach */
-    .chat-container {
-        margin-top: -30px !important;
-    }
-
-    /* Ensure row containing chatbot has no top margin */
-    .gradio-container > .gradio-row:nth-child(2) {
-        margin-top: 0 !important;
-        padding-top: 0 !important;
-    }
-    
-    /* Enforce message interval constraints */
-    .chatbot .message-wrap {
-        margin-bottom: -30px !important;
-        position: relative !important;
-        z-index: 1 !important;
-    }
-
-    /* Enforce reduced spacing between adjacent messages */
-    .chatbot .message + .message {
-        margin-top: -30px !important;
-    }
-
-    /* Special constraints for bot messages */
-    .chatbot .bot-message {
-        background: white !important;
-        color: #374151 !important;
-        border-radius: 18px 18px 18px 4px !important;
-        padding: 8px 12px !important;
-        margin: 0 !important;
-        max-width: 80% !important;
-        border: 1px solid #e5e7eb !important;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
-        margin-top: -15px !important;
-        margin-bottom: -10px !important;
-        position: relative !important;
-        z-index: 0 !important;
-    }
-
-    /* Enforce removal of whitespace between messages */
-    .chatbot .block {
-        gap: 0 !important;
-        margin: 0 !important;
-        padding: 0 !important;
-    }
-
-    /* Enforce message container constraints */
-    .chatbot .messages-container {
-        display: flex !important;
-        flex-direction: column !important;
-        gap: 0 !important;
-    }
-
-    /* Enforce removal of spacing between messages */
-    .chatbot .message {
-        margin: 0 !important;
-        padding: 0 !important;
-    }
-
-    /* Enforce removal of spacing between title and content */
-    .chatbot .message .content {
-        display: inline-block !important;
-    }
-
-    /* Special styles for titles */
-    .chatbot .message .content strong {
-        display: inline-block !important;
-        margin: 0 !important;
-        padding: 0 !important;
-    }
-
-    /* Extreme reduction of spacing between thinking and recommendation messages */
-    .chatbot .message:nth-child(n+2):nth-child(-n+3) {
-        margin-top: -50px !important;
-    }
-
-    /* Use transform to move element position */
-    .chatbot .message:nth-child(3) {
-        transform: translateY(-30px) !important;
-    }
-
-    /* Use negative margin to force elements overlap */
-    .chatbot .message:nth-child(2) {
-        margin-bottom: -40px !important;
-    }
-
-    /* Use absolute positioning to control element position */
-    .chatbot .messages-container {
-        position: relative !important;
-    }
-
-    /* Enforce removal of any potential spacing */
-    .chatbot * {
-        margin-bottom: 0 !important;
-    }
-    """
-    
-    with gr.Blocks(
-        title="JarvisArt", 
-        css=custom_css
-    ) as demo:
+        Upload an image, describe your vision, and get professional Lightroom presets!
+        """)
         
-        # Header area
-        with gr.Row(elem_classes="app-header"):
-            gr.HTML("""
-                <div class="app-title">
-                    <svg t="1748332876263" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" 
-                         width="24" height="24" style="vertical-align: middle; margin-right: 8px;">
-                        <path d="M938.56 511.36a238.72 238.72 0 0 1-238.72 238.72H659.2c-35.84 0-70.08-14.72-95.04-40.32-2.24-2.24-4.16-4.48-7.04-7.04l-6.08-7.36a130.176 130.176 0 0 0-65.28-42.24 131.456 131.456 0 0 0-149.12 58.88L304 767.68c-9.28 15.68-22.4 28.16-38.08 37.12a104.48 104.48 0 0 1-113.28-7.04c-17.6-12.8-31.04-31.68-37.76-53.44-19.2-64-28.8-130.24-28.8-196.8v-35.84c0-117.76 47.68-224.32 124.8-301.44s183.68-124.8 301.44-124.8c104.96 0 201.28 38.08 275.52 101.12l-47.36 73.6-74.24 114.88-44.48 68.48c-51.2 0.64-92.8 42.24-92.8 93.76 0 13.44 2.88 26.24 8 37.76 12.48 28.16 38.4 49.28 69.76 54.4 5.12 0.96 10.56 1.6 16 1.6 51.84 0 93.76-41.92 93.76-93.76 0-25.28-9.92-48.32-26.24-64.96l133.44-251.2c71.36 75.84 114.88 178.24 114.88 290.24z" fill="#E2CCA8"></path>
-                        <path d="M564.16 709.76l-11.52 21.76c-10.24 19.2-31.36 28.48-51.52 24.96-3.52-3.52-7.36-6.08-11.52-8.64-5.44-3.2-10.88-5.44-16.32-7.04-14.72-16-17.28-40.64-4.8-59.52l18.24-28.16a133.12 133.12 0 0 1 65.28 42.24l6.08 7.36 6.08 7.04z" fill="#AA571B"></path>
-                        <path d="M517.44 852.8c-21.12 36.8-102.08 108.16-138.88 87.04-36.8-21.12-15.04-127.04 6.08-163.84a76.832 76.832 0 0 1 104.64-28.16c4.16 2.24 8 5.12 11.52 8.64 27.84 23.04 35.52 63.68 16.64 96.32z" fill="#F2C05C"></path>
-                        <path d="M231.04 639.36m-59.52 0a59.52 59.52 0 1 0 119.04 0 59.52 59.52 0 1 0-119.04 0Z" fill="#61A838"></path>
-                        <path d="M265.28 417.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z" fill="#FF737D"></path>
-                        <path d="M435.52 247.36m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z" fill="#FAAD14"></path>
-                        <path d="M740.48 259.84l-74.24 114.88a76.768 76.768 0 0 1-68.8-76.48c0-42.56 34.24-76.8 76.8-76.8 28.16 0.32 53.12 15.68 66.24 38.4z" fill="#40A9FF"></path>
-                    </svg>
-                    <span>JarvisArt</span>
-                </div>
-            """)
-        # Main chat area
         with gr.Row():
             with gr.Column(scale=1):
-                # Create initial welcome interface - fixed to messages format
-                initial_welcome = [
-                    {
-                        "role": "assistant",
-                        "content": """<div class="welcome-message">
-    <div class="welcome-title">👋 Welcome to JarvisArt!</div>
-    <div class="welcome-subtitle">Your AI-powered photo editing assistant is ready to help you transform your images with professional recommendations.</div>
-    <div class="welcome-features">
-        <div class="welcome-feature">
-            <div class="welcome-feature-icon">📸</div>
-            <div class="welcome-feature-title">Upload Image</div>
-            <div class="welcome-feature-desc">Upload any photo you'd like to enhance</div>
-        </div>
-        <div class="welcome-feature">
-            <div class="welcome-feature-icon">✨</div>
-            <div class="welcome-feature-title">Describe Vision</div>
-            <div class="welcome-feature-desc">Tell me your creative vision and style preferences</div>
-        </div>
-        <div class="welcome-feature">
-            <div class="welcome-feature-icon">🎨</div>
-            <div class="welcome-feature-title">Get Recommendations</div>
-            <div class="welcome-feature-desc">Receive detailed editing suggestions tailored to your needs</div>
-        </div>
-    </div>
-</div>"""
-                    }
-                ]
-                
-                chatbot = gr.Chatbot(
-                    value=initial_welcome,
-                    label="",
-                    show_label=False,
-                    elem_classes="chat-container",
-                    height=600,
-                    avatar_images=(USER_AVATAR_PATH, AI_AVATAR_PATH),
-                    show_copy_button=True,
-                    type='messages'  # Use new message format to avoid deprecation warnings
+                # Input image upload component
+                input_image = image_annotator(
+                    label="📸 Upload Your Image & Draw Bounding Box",
+                    disable_edit_boxes=True,
+                    image_type="filepath",
+                    single_box=True,
+                    show_label=True,
+                    height=400
                 )
-        
-        # Input area
-        with gr.Row(elem_classes="input-section"):
-            with gr.Column(scale=1):
-                # Image upload area
-                with gr.Group(elem_classes="image-upload-area"):
-                    gr.Markdown("### 📸 Upload Your Image & Draw Bounding Box")
-                    with gr.Column(elem_classes='jarvis_image_container'):
-                        input_image = image_annotator(
-                            label="Upload Image & Draw Bounding Box",
-                            disable_edit_boxes=True,
-                            image_type="filepath",
-                            single_box=True,
-                            show_label=False,
-                            width=300
-                        )
-                    coordinates_output = gr.Textbox(label="BBox Coordinates", interactive=False)
-
+                
                 # Prompt input
-                with gr.Group():
-                    gr.Markdown("### 💬 Describe Your Vision")
                 user_prompt = gr.Textbox(
-                        label="",
-                        show_label=False,
-                        placeholder="Describe your desired editing style(Use '<box></box>' to represent the selected region of interest in the image.)... (e.g., 'I want a blue-toned look, a calm evening. Melancholy blue style')",
-                    # value=default_user_prompt,
+                    label="💬 Describe Your Vision",
+                    placeholder="Describe your desired editing style (Use '<box></box>' to represent the selected region)... (e.g., 'I want a dreamy, romantic sunset vibe with soft, warm colors')",
                     lines=3,
-                        max_lines=5,
-                        elem_classes="prompt-input"
-                    )
+                    max_lines=5
+                )
+                
+                # Process button
+                process_btn = gr.Button(
+                    "✨ Generate Recommendations & Presets", 
+                    variant="primary",
+                    size="lg"
+                )
+                
+                # Coordinates output (hidden for simplicity)
+                coordinates_output = gr.Textbox(label="BBox Coordinates", interactive=False, visible=False)
                 
-                # Action buttons
-                with gr.Row():
-                    clear_btn = gr.Button(
-                        "🗑️ Clear Chat", 
-                        variant="secondary",
-                        scale=1,
-                        elem_classes="simple-button"
-                    )
-                    process_btn = gr.Button(
-                        "✨ Generate Recommendations", 
-                        variant="primary",
-                        scale=1,
-                        elem_classes="primary-simple-button"
-                    )
+            with gr.Column(scale=1):
+                # Chat interface to show analysis
+                chatbot = gr.Chatbot(
+                    label="💬 AI Analysis & Recommendations",
+                    height=400,
+                    show_label=True,
+                    bubble_full_width=False
+                )
                 
                 # Download section
-                with gr.Row():
-                    download_files = gr.File(
-                        label="💾 Download Lightroom Preset Files",
-                        file_count="multiple",
-                        visible=True,
-                        interactive=False
-                    )
-                    
-                with gr.Row():
-                    gr.Markdown("""
-                    🎨 **How to use Lightroom Presets:**
-                    1. Open Adobe Lightroom
-                    2. Go to the **Presets** panel  
-                    3. Click on the **+** icon
-                    4. Select **Import Presets**
-                    5. Choose the `.lrtemplate` file(s) you downloaded and click **Import**
-                    
-                    The imported presets will now be available in your Presets panel for use on your photos.
-                    """)
+                download_files = gr.File(
+                    label="📾 Download Lightroom Preset Files",
+                    file_count="multiple",
+                    visible=True,
+                    interactive=False
+                )
+        
+        # Advanced parameter control panel (collapsible)
+        with gr.Accordion("⚙️ Advanced Generation Parameters", open=False):
+            gr.Markdown("### Generation Parameter Controls")
+            
+            with gr.Row():
+                max_new_tokens = gr.Slider(
+                    minimum=512,
+                    maximum=20480,
+                    value=10240,
+                    step=256,
+                    label="Max New Tokens",
+                    info="Maximum number of tokens to generate"
+                )
                 
-                # System prompt viewing area (collapsible)
-                with gr.Accordion("🔧 System Prompt Settings", open=False):
-                    system_prompt_display = gr.Textbox(
-                        value=system_prompt,
-                        label="Current System Prompt (Preview)",
-                        interactive=False,
-                        lines=8,
-                        max_lines=15
-                    )
-                    
-                    gr.Markdown("""
-                    **Note:** This system provides AI-powered image editing recommendations. 
-                    Upload your image, describe your vision, and get professional editing suggestions powered by JarvisArt.
-                    """)
+            with gr.Row():
+                top_k = gr.Slider(
+                    minimum=1,
+                    maximum=100,
+                    value=50,
+                    step=1,
+                    label="Top-K",
+                    info="Sample from top K tokens with highest probability"
+                )
                 
-                # Advanced parameter control panel (collapsible)
-                with gr.Accordion("⚙️ Advanced Generation Parameters", open=False):
-                    gr.Markdown("### Generation Parameter Controls")
-                    
-                    with gr.Row():
-                        max_new_tokens = gr.Slider(
-                            minimum=512,
-                            maximum=20480,
-                            value=10240,
-                            step=256,
-                            label="Max New Tokens",
-                            info="Maximum number of tokens to generate"
-                        )
-                        
-                    with gr.Row():
-                        top_k = gr.Slider(
-                            minimum=1,
-                            maximum=100,
-                            value=50,
-                            step=1,
-                            label="Top-K",
-                            info="Sample from top K tokens with highest probability"
-                        )
-                        
-                        top_p = gr.Slider(
-                            minimum=0.1,
-                            maximum=1.0,
-                            value=0.8,
-                            step=0.05,
-                            label="Top-P (Nucleus Sampling)",
-                            info="Cumulative probability threshold, controls generation diversity"
-                        )
-                    
-                    with gr.Row():
-                        temperature = gr.Slider(
-                            minimum=0.1,
-                            maximum=2.0,
-                            value=0.7,
-                            step=0.1,
-                            label="Temperature",
-                            info="Generation randomness, higher values mean more random"
-                        )
-                    
-                    with gr.Row():
-                        reset_params_btn = gr.Button(
-                            "🔄 Reset to Default",
-                            variant="secondary",
-                            size="sm"
-                        )
-                        
-                        # Preset parameter buttons
-                        conservative_btn = gr.Button(
-                            "🎯 Conservative",
-                            variant="secondary", 
-                            size="sm"
-                        )
-                        
-                        creative_btn = gr.Button(
-                            "🎨 Creative",
-                            variant="secondary",
-                            size="sm"
-                        )
-                        
-                        balanced_btn = gr.Button(
-                            "⚖️ Balanced",
-                            variant="secondary",
-                            size="sm"
-                        )
+                top_p = gr.Slider(
+                    minimum=0.1,
+                    maximum=1.0,
+                    value=0.8,
+                    step=0.05,
+                    label="Top-P (Nucleus Sampling)",
+                    info="Cumulative probability threshold, controls generation diversity"
+                )
+            
+            with gr.Row():
+                temperature = gr.Slider(
+                    minimum=0.1,
+                    maximum=2.0,
+                    value=0.7,
+                    step=0.1,
+                    label="Temperature",
+                    info="Generation randomness, higher values mean more random"
+                )
+            
+            with gr.Row():
+                reset_params_btn = gr.Button(
+                    "🔄 Reset to Default",
+                    variant="secondary",
+                    size="sm"
+                )
+                
+                # Preset parameter buttons
+                conservative_btn = gr.Button(
+                    "🎯 Conservative",
+                    variant="secondary", 
+                    size="sm"
+                )
+                
+                creative_btn = gr.Button(
+                    "🎨 Creative",
+                    variant="secondary",
+                    size="sm"
+                )
+                
+                balanced_btn = gr.Button(
+                    "⚖️ Balanced",
+                    variant="secondary",
+                    size="sm"
+                )
+        
+        # Instructions section at the bottom
+        gr.Markdown("### 📝 How to Use:")
+        gr.Markdown("""
+        1. **Upload an image** you'd like to enhance (any photo format)
+        2. **Optional**: Draw a bounding box on specific regions you want to focus on
+        3. **Describe your vision** - what style or mood you want to achieve
+        4. **Click 'Generate'** to get AI-powered editing recommendations
+        5. **Download** the generated Lightroom preset files (.lrtemplate)
+        6. **Import** the presets into Adobe Lightroom using the guide below
+        """)
+        
+        # Lightroom import guide
+        gr.Markdown("### 🎨 How to Import Lightroom Presets:")
+        gr.Markdown("""
+        1. Open Adobe Lightroom
+        2. Go to the **Presets** panel
+        3. Click on the **+** icon
+        4. Select **Import Presets**
+        5. Choose the `.lrtemplate` file(s) you downloaded and click **Import**
+        
+        The imported presets will now be available in your Presets panel for use on your photos.
+        """)
         
         # Quick examples
+        gr.Markdown("### 💡 Example Prompts:")
+        examples = [
+            "Make it feel like a magical moment with vivid hues and a touch of fantasy style.",
+            "I want a blue-toned look, a calm evening. Melancholy blue style.",
+            "Create a vintage film look with soft highlights and muted tones.",
+            "Give it a Hong Kong cinema feel with vibrant contrasts and moody atmosphere.",
+            "Make this photo more vibrant and cinematic with warm colors."
+        ]
+        
+        example_buttons = []
         with gr.Row():
-            with gr.Column(scale=1):
-                gr.Markdown("### 💡 Quick Examples")
-                example_buttons = []
-                examples = [
-                    "Make it feel like a magical moment with vivid hues and a touch of fantasy style.",
-                    "I want a blue-toned look, a calm evening. Melancholy blue style.",
-                    "Create a vintage film look with soft highlights and muted tones.",
-                    "Give it a Hong Kong cinema feel with vibrant contrasts and moody atmosphere.",
-                    "Make this photo more vibrant and cinematic with warm colors."
-                ]
-                
-                with gr.Row():
-                    for i, example in enumerate(examples):
-                        btn = gr.Button(
-                            example[:40] + "...", 
-                            size="sm",
-                            scale=1,
-                            elem_classes="example-buttons"
-                        )
-                        example_buttons.append(btn)
-                        # Bind click event to set prompt
-                        btn.click(
-                            lambda ex=example: ex,
-                            outputs=user_prompt
-                        )
+            for i, example in enumerate(examples):
+                btn = gr.Button(
+                    example[:30] + "...", 
+                    size="sm",
+                    scale=1
+                )
+                example_buttons.append(btn)
+                # Bind click event to set prompt
+                btn.click(
+                    lambda ex=example: ex,
+                    outputs=user_prompt
+                )
         
         # Event binding
         
@@ -2004,12 +1299,6 @@ def create_interface():
             outputs=[chatbot, download_files]
         )
         
-        # Clear chat history
-        clear_btn.click(
-            lambda: ([], None),
-            outputs=[chatbot, download_files]
-        )
-        
         # Submit on Enter, pass all parameters
         user_prompt.submit(
             fn=process_analysis_pipeline_stream,
@@ -2043,7 +1332,6 @@ def create_interface():
         )
     
     return demo
-
 if __name__ == "__main__":
     local_dict={}
     latest_session_dir = None  # Track latest session for downloads
@@ -2124,4 +1412,4 @@ if __name__ == "__main__":
             print("   1. Close other programs occupying the port")
             print("   2. Use --server_port parameter to specify a different port")
             print("   3. Check firewall settings")
-            sys.exit(1)
+            sys.exit(1)