Update app.py

app.py

@@ -147,108 +147,277 @@ def generate_description(image, prompt, max_length):
 
 import gradio as gr
 
-def create_gradio_interface(generate_description):
-    # Enhanced CSS styling
-    custom_css = """
-    body {
-        font-family: 'Segoe UI', sans-serif;
-        background-color: #f0fdf4;
-    }
-    .gradio-container {
-        background: linear-gradient(135deg, #e0f7fa, #f8fafc);
-        border-radius: 16px;
+# Gradio interface
+def create_gradio_interface(generate_fn, color_theme=COLOR_THEME):
+    # Set color variables based on theme
+    if color_theme == "blue":
+        primary_gradient = "linear-gradient(145deg, #e0f2fe, #dbeafe)"
+        header_gradient = "linear-gradient(135deg, #bfdbfe, #93c5fd)"  # Blue gradient for header
+        button_gradient = "linear-gradient(135deg, #3b82f6, #1d4ed8)"
+        button_hover_gradient = "linear-gradient(135deg, #2563eb, #1e40af)"
+        primary_color = "#1e40af"
+        icon_color = "#2563eb"
+        shadow_color = "rgba(59, 130, 246, 0.15)"
+        button_shadow = "rgba(29, 78, 216, 0.25)"
+    else:
+        primary_gradient = "linear-gradient(145deg, #fff7ed, #ffedd5)"
+        header_gradient = "linear-gradient(135deg, #fed7aa, #fdba74)"  # Orange gradient for header
+        button_gradient = "linear-gradient(135deg, #f97316, #ea580c)"
+        button_hover_gradient = "linear-gradient(135deg, #ea580c, #c2410c)"
+        primary_color = "#9a3412"
+        icon_color = "#ea580c"
+        shadow_color = "rgba(249, 115, 22, 0.15)"
+        button_shadow = "rgba(234, 88, 12, 0.25)"
+
+    
+# Gradio interface
+def create_gradio_interface(generate_fn, color_theme=COLOR_THEME):
+    # Set color variables based on theme
+    if color_theme == "blue":
+        primary_gradient = "linear-gradient(145deg, #e0f2fe, #dbeafe)"
+        header_gradient = "linear-gradient(135deg, #bfdbfe, #93c5fd)"
+        header_background = "#dbeafe"  # Light blue for section headers
+        button_gradient = "linear-gradient(135deg, #3b82f6, #1d4ed8)"
+        button_hover_gradient = "linear-gradient(135deg, #2563eb, #1e40af)"
+        primary_color = "#1e40af"
+        icon_color = "#2563eb"
+        shadow_color = "rgba(59, 130, 246, 0.15)"
+        button_shadow = "rgba(29, 78, 216, 0.25)"
+    else:
+        primary_gradient = "linear-gradient(145deg, #fff7ed, #ffedd5)"
+        header_gradient = "linear-gradient(135deg, #fed7aa, #fdba74)"
+        header_background = "#ffedd5"  # Light orange for section headers
+        button_gradient = "linear-gradient(135deg, #f97316, #ea580c)"
+        button_hover_gradient = "linear-gradient(135deg, #ea580c, #c2410c)"
+        primary_color = "#9a3412"
+        icon_color = "#ea580c"
+        shadow_color = "rgba(249, 115, 22, 0.15)"
+        button_shadow = "rgba(234, 88, 12, 0.25)"
+
+    # Custom CSS with dynamic color variables
+    custom_css = f"""
+    body {{ 
+        font-family: 'Inter', 'Segoe UI', sans-serif; 
+        background-color: #f8fafc;
+    }}
+    .container {{ 
+        background: {primary_gradient}; 
+        border-radius: 16px; 
         padding: 30px;
-        box-shadow: 0 10px 24px rgba(0,0,0,0.1);
-        max-width: 900px;
-        margin: auto;
-    }
-    h1 {
-        color: #0f766e;
+        max-width: 1200px;
+        margin: 0 auto;
+        box-shadow: 0 10px 25px {shadow_color};
+    }}
+    .app-header {{
         text-align: center;
+        margin-bottom: 30px;
+        background: {header_gradient};
+        border-radius: 12px;
+        padding: 20px;
+        box-shadow: 0 4px 12px {shadow_color};
+    }}
+    .app-title {{
+        color: {primary_color};
         font-size: 2.2em;
-        margin-bottom: 0.3em;
-    }
-    .input-container, .output-container {
+        font-weight: 700;
+        margin-bottom: 10px;
+    }}
+    .app-description {{
+        color: #334155;
+        font-size: 1.1em;
+        line-height: 1.5;
+        max-width: 700px;
+        margin: 0 auto;
+    }}
+    .card {{
         background: #ffffff;
-        border: 1px solid #cbd5e1;
-        border-radius: 10px;
+        border-radius: 12px;
         padding: 20px;
         margin-bottom: 20px;
-    }
-    .output-container {
+        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+        border: 1px solid rgba(226, 232, 240, 0.8);
+        transition: transform 0.2s, box-shadow 0.2s;
+        height: 100%;
+    }}
+    .card:hover {{
+        transform: translateY(-2px);
+        box-shadow: 0 6px 16px rgba(0,0,0,0.08);
+    }}
+    .input-label {{
+        color: {primary_color};
+        font-weight: 600;
+        margin-bottom: 8px;
         font-size: 1.05em;
+        background: {header_background};  /* Add background to section headers */
+        padding: 5px 10px;
+        border-radius: 6px;
+        display: inline-block;
+    }}
+    .output-card {{
+        background: #ffffff;
+        border-radius: 12px;
+        padding: 25px;
+        border: 1px solid rgba(226, 232, 240, 0.8);
+        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+    }}
+    .output-content {{
+        font-size: 1.1em;
         line-height: 1.6;
-        background-color: #f0fdf4;
-    }
-    button {
-        background-color: #14b8a6 !important;
+        color: #1e293b;
+        flex-grow: 1;
+    }}
+    .btn-generate {{
+        background: {button_gradient} !important;
         color: white !important;
         border-radius: 8px !important;
         padding: 12px 24px !important;
         font-weight: 600 !important;
-        font-size: 1em !important;
+        font-size: 1.05em !important;
         border: none !important;
-        margin-top: 10px;
-    }
-    button:hover {
-        background-color: #0d9488 !important;
-    }
-    .input-label {
-        color: #0f766e;
-        font-weight: 600;
-        margin-bottom: 8px;
-        font-size: 0.95em;
-    }
+        box-shadow: 0 4px 12px {button_shadow} !important;
+        transition: all 0.3s ease !important;
+        width: 100% !important;
+        margin-top: 15px;
+    }}
+    .btn-generate:hover {{
+        background: {button_hover_gradient} !important;
+        box-shadow: 0 6px 16px {button_shadow} !important;
+        transform: translateY(-2px) !important;
+    }}
+    .footer {{
+        text-align: center;
+        margin-top: 30px;
+        color: #64748b;
+        font-size: 0.9em;
+    }}
+    .model-selector {{
+        margin-bottom: 15px;
+    }}
+    .input-icon {{
+        font-size: 1.5em;
+        margin-right: 8px;
+        color: {icon_color};
+    }}
+    .divider {{
+        border-top: 1px solid #e2e8f0;
+        margin: 15px 0;
+    }}
+    .input-section {{
+        height: 100%;
+    }}
+    .result-heading {{
+        margin-bottom: 15px;
+        color: {primary_color};
+        background: {header_background};  /* Add background to result header */
+        padding: 5px 10px;
+        border-radius: 6px;
+        display: inline-block;
+    }}
     """
 
-    with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
-        gr.Markdown("## 🌼 OmniPhi: Multi-Modal LLM with BLIP or Custom Model")
-
+    # Create Blocks interface with improved structure and parallel layout
+    with gr.Blocks(css=custom_css) as iface:
+        with gr.Group():
+            icon = "🔷" if color_theme == "blue" else "🔶"
+            app_name = "OmniPhi Blue" if color_theme == "blue" else "OmniPhi Orange"
+            
+            gr.Markdown(
+                f"""
+                <div class="app-header">
+                    <div class="app-title">{icon} {app_name}</div>
+                    <div class="app-description">Advanced Multi-Modal AI with BLIP or Custom Model Integration. Upload an image and provide instructions through text or voice to generate detailed descriptions.</div>
+                </div>
+                """
+            )
+        
+        # Main content in a 2-column layout (inputs and output side by side)
         with gr.Row():
-            with gr.Column(scale=1):
-                with gr.Group(elem_classes="input-container"):
-                    image_input = gr.Image(
-                        type="pil",
-                        label="Upload Image",
-                        elem_classes="input-label"
+            # Left column for all inputs
+            with gr.Column(scale=3):
+                with gr.Group():
+                    # Image upload card
+                    with gr.Group():
+                        gr.Markdown('<span class="input-icon">🖼️</span><span class="input-label">Upload Image</span>')
+                        image_input = gr.Image(
+                            type="pil",
+                            label=None
+                        )
+                    
+                    # Text and voice input card
+                    with gr.Group():
+                        gr.Markdown('<span class="input-icon">💬</span><span class="input-label">Text Instruction</span>')
+                        text_input = gr.Textbox(
+                            label=None,
+                            placeholder="e.g., Describe this image in detail, focusing on the environment...",
+                            lines=3
+                        )
+                        
+                        gr.Markdown('<div class="divider"></div>')
+                        
+                        gr.Markdown('<span class="input-icon">🎙️</span><span class="input-label">Voice Instruction (optional)</span>')
+                        audio_input = gr.Audio(
+                            type="microphone",
+                            label=None
+                        )
+                        
+                        gr.Markdown('<div class="divider"></div>')
+                        
+                        gr.Markdown('<span class="input-icon">⚙️</span><span class="input-label">Model Selection</span>')
+                        with gr.Group():
+                            model_choice = gr.Radio(
+                                choices=["BLIP", "OmniPhi"],
+                                value="BLIP",
+                                label=None,
+                                interactive=True
+                            )
+                        
+                        submit_btn = gr.Button("Generate Description")
+            
+            # Right column for output
+            with gr.Column(scale=2):
+                with gr.Group():
+                    gr.Markdown('<span class="input-icon">✨</span><span class="input-label result-heading">Generated Description</span>')
+                    output = gr.Textbox(
+                        label=None,
+                        lines=12,
+                        placeholder="Your description will appear here after generation..."
                     )
-
-            with gr.Column(scale=1):
-                with gr.Group(elem_classes="input-container"):
-                    text_input = gr.Textbox(
-                        label="Text Instruction",
-                        placeholder="e.g., Describe the image of two dogs in a field of flowers",
-                        elem_classes="input-label"
-                    )
-                    audio_input = gr.Audio(
-                        sources="microphone",
-                        type="filepath",
-                        label="🎤 Record Voice (optional)",
-                        elem_classes="input-label"
-                    )
-                    model_choice = gr.Dropdown(
-                        choices=["BLIP", "OmniPhi"],
-                        label="Select Model",
-                        value="BLIP",
-                        elem_classes="input-label"
-                    )
-                    submit_btn = gr.Button("✨ Generate Description")
-
-        with gr.Group(elem_classes="output-container"):
-            output = gr.Textbox(
-                label="Generated Description",
-                show_label=True,
-                lines=5
-            )
-
+        
+        # Footer
+        gr.Markdown(
+            f"""
+            <div class="footer">
+                Powered by OmniPhi Technology • Upload your image and provide instructions through text or voice
+            </div>
+            """
+        )
+        
+        # Connect the button to the function
         submit_btn.click(
             fn=generate_fn,
             inputs=[image_input, text_input, audio_input, model_choice],
             outputs=output
         )
-
+    
     return iface
 
+# Main execution
 if __name__ == "__main__":
-    demo = create_gradio_interface()
-    demo.launch()  # Remove ssr=False
+    # Load models
+    transcriber = initialize_transcriber(WHISPER_MODEL)
+    blip_model, blip_processor = load_blip(BLIP_MODEL, DEVICE, TORCH_DTYPE)
+    clip_model, clip_processor = load_clip(CLIP_MODEL, DEVICE, TORCH_DTYPE)
+    omniphi_model, omniphi_tokenizer = load_omniphi(CHECKPOINT_DIR, PHI_MODEL, CLIP_MODEL, DEVICE)
+
+    # Define generate function
+    generate_fn = lambda image, text_prompt, audio, model_choice: generate_description(
+        image, text_prompt, audio, model_choice, transcriber, blip_model, blip_processor,
+        clip_model, clip_processor, omniphi_model, omniphi_tokenizer, DEVICE
+    )
+
+    # Launch Gradio interface
+    iface = create_gradio_interface(generate_fn, color_theme=COLOR_THEME)
+    iface.launch(server_name="0.0.0.0", server_port=7860)