Update app.py

app.py

@@ -145,28 +145,110 @@ def generate_description(image, prompt, max_length):
         logger.error(f"Error generating description: {str(e)}", exc_info=True)
         return f"Error: {str(e)}"
 
-def create_interface():
-    with gr.Blocks() as demo:
-        gr.Markdown("# Multimodal Image Description")
+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;
+        padding: 30px;
+        box-shadow: 0 10px 24px rgba(0,0,0,0.1);
+        max-width: 900px;
+        margin: auto;
+    }
+    h1 {
+        color: #0f766e;
+        text-align: center;
+        font-size: 2.2em;
+        margin-bottom: 0.3em;
+    }
+    .input-container, .output-container {
+        background: #ffffff;
+        border: 1px solid #cbd5e1;
+        border-radius: 10px;
+        padding: 20px;
+        margin-bottom: 20px;
+    }
+    .output-container {
+        font-size: 1.05em;
+        line-height: 1.6;
+        background-color: #f0fdf4;
+    }
+    button {
+        background-color: #14b8a6 !important;
+        color: white !important;
+        border-radius: 8px !important;
+        padding: 12px 24px !important;
+        font-weight: 600 !important;
+        font-size: 1em !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;
+    }
+    """
+
+    with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as iface:
+        gr.Markdown("## 🌼 OmniPhi: Multi-Modal LLM with BLIP or Custom Model")
+
         with gr.Row():
-            with gr.Column():
-                image_input = gr.Image(label="Upload Image")
-                prompt_input = gr.Textbox(
-                    label="Prompt",
-                    value="[IMG] A detailed description of this image is:",
-                    lines=2
-                )
-                max_length = gr.Slider(minimum=10, maximum=100, value=50, step=10, label="Max Length")
-                submit_btn = gr.Button("Generate Description")
-            with gr.Column():
-                output_text = gr.Textbox(label="Generated Description", lines=12)
+            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"
+                    )
+
+            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
+            )
+
         submit_btn.click(
-            generate_description,
-            inputs=[image_input, prompt_input, max_length],
-            outputs=output_text
+            fn=generate_fn,
+            inputs=[image_input, text_input, audio_input, model_choice],
+            outputs=output
         )
-    return demo
+
+    return iface
 
 if __name__ == "__main__":
-    demo = create_interface()
+    demo = create_gradio_interface()
     demo.launch()  # Remove ssr=False