Update app.py

app.py

@@ -6,7 +6,7 @@ from threading import Thread
 import numpy as np
 from PIL import Image
 import subprocess
-import spaces
+import spaces  # Add this import
 
 # Install flash-attention
 subprocess.run('pip install flash-attn --no-build-isolation', env={'FLASH_ATTENTION_SKIP_CUDA_BUILD': "TRUE"}, shell=True)
@@ -106,63 +106,92 @@ def process_vision_query(image, text_input):
     response = vision_processor.batch_decode(generate_ids, skip_special_tokens=True, clean_up_tokenization_spaces=False)[0]
     return response
 
-# Modified combined chat function
-def combined_chat(message, image, history, system_prompt, temperature, max_new_tokens, top_p, top_k):
-    if image is not None:
-        # Process image query
-        response = process_vision_query(image, message)
-        history.append((message, response))
-        return history, None
-    else:
-        # Process text query
-        return stream_text_chat(message, history, system_prompt, temperature, max_new_tokens, top_p, top_k), None
-
-# Function to toggle between text and image input
-def toggle_input(choice):
-    if choice == "Text":
-        return gr.update(visible=True), gr.update(visible=False)
-    else:
-        return gr.update(visible=False), gr.update(visible=True)
-
 # Custom CSS
 custom_css = """
-body { background-color: #343541; color: #ececf1; font-family: 'Arial', sans-serif; }
-.gradio-container { max-width: 800px !important; margin: auto; }
-#chatbot { height: 400px; overflow-y: auto; }
-#input-container { display: flex; align-items: center; }
-#msg, #image-input { flex-grow: 1; margin-right: 10px; }
-#submit-btn { min-width: 60px; }
-footer { text-align: center; margin-top: 2rem; color: #acacbe; }
+body { background-color: #0b0f19; color: #e2e8f0; font-family: 'Arial', sans-serif;}
+#custom-header { text-align: center; padding: 20px 0; background-color: #1a202c; margin-bottom: 20px; border-radius: 10px;}
+#custom-header h1 { font-size: 2.5rem; margin-bottom: 0.5rem;}
+#custom-header h1 .blue { color: #60a5fa;}
+#custom-header h1 .pink { color: #f472b6;}
+#custom-header h2 { font-size: 1.5rem; color: #94a3b8;}
+.suggestions { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin: 20px 0;}
+.suggestion { background-color: #1e293b; border-radius: 0.5rem; padding: 1rem; display: flex; align-items: center; transition: transform 0.3s ease; width: 200px;}
+.suggestion:hover { transform: translateY(-5px);}
+.suggestion-icon { font-size: 1.5rem; margin-right: 1rem; background-color: #2d3748; padding: 0.5rem; border-radius: 50%;}
+.gradio-container { max-width: 100% !important;}
+#component-0, #component-1, #component-2 { max-width: 100% !important;}
+footer { text-align: center; margin-top: 2rem; color: #64748b;}
+"""
+
+# Custom HTML for the header
+custom_header = """
+<div id="custom-header">
+    <h1><span class="blue">Phi 3.5</span> <span class="pink">Multimodal Assistant</span></h1>
+    <h2>Text and Vision AI at Your Service</h2>
+</div>
+"""
+
+# Custom HTML for suggestions
+custom_suggestions = """
+<div class="suggestions">
+    <div class="suggestion">
+        <span class="suggestion-icon">💬</span>
+        <p>Chat with the Text Model</p>
+    </div>
+    <div class="suggestion">
+        <span class="suggestion-icon">🖼️</span>
+        <p>Analyze Images with Vision Model</p>
+    </div>
+    <div class="suggestion">
+        <span class="suggestion-icon">🤖</span>
+        <p>Get AI-generated responses</p>
+    </div>
+    <div class="suggestion">
+        <span class="suggestion-icon">🔍</span>
+        <p>Explore advanced options</p>
+    </div>
+</div>
 """
 
 # Gradio interface
-with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
-    chatbot = gr.Chatbot(elem_id="chatbot")
-    
-    with gr.Row(elem_id="input-container"):
-        input_type = gr.Radio(["Text", "Image"], value="Text", label="Input Type")
-        with gr.Column(visible=True) as text_input:
-            msg = gr.Textbox(
-                show_label=False,
-                placeholder="Send a message...",
-                elem_id="msg"
-            )
-        with gr.Column(visible=False) as image_input:
-            image = gr.Image(type="pil", elem_id="image-input")
-    
-    submit_btn = gr.Button("Send", elem_id="submit-btn")
-    clear_btn = gr.Button("Clear Chat", variant="secondary")
-
-    with gr.Accordion("Advanced Options", open=False):
-        system_prompt = gr.Textbox(value="You are a helpful assistant", label="System Prompt")
-        temperature = gr.Slider(minimum=0, maximum=1, step=0.1, value=0.8, label="Temperature")
-        max_new_tokens = gr.Slider(minimum=128, maximum=8192, step=1, value=1024, label="Max new tokens")
-        top_p = gr.Slider(minimum=0.0, maximum=1.0, step=0.1, value=1.0, label="top_p")
-        top_k = gr.Slider(minimum=1, maximum=20, step=1, value=20, label="top_k")
-
-    input_type.change(toggle_input, input_type, [text_input, image_input])
-    submit_btn.click(combined_chat, [msg, image, chatbot, system_prompt, temperature, max_new_tokens, top_p, top_k], [chatbot, image])
-    clear_btn.click(lambda: ([], None), None, [chatbot, image], queue=False)
+with gr.Blocks(css=custom_css, theme=gr.themes.Base().set(
+    body_background_fill="#0b0f19",
+    body_text_color="#e2e8f0",
+    button_primary_background_fill="#3b82f6",
+    button_primary_background_fill_hover="#2563eb",
+    button_primary_text_color="white",
+    block_title_text_color="#94a3b8",
+    block_label_text_color="#94a3b8",
+)) as demo:
+    gr.HTML(custom_header)
+    gr.HTML(custom_suggestions)
+
+    with gr.Tab("Text Model (Phi-3.5-mini)"):
+        chatbot = gr.Chatbot(height=400)
+        msg = gr.Textbox(label="Message", placeholder="Type your message here...")
+        with gr.Accordion("Advanced Options", open=False):
+            system_prompt = gr.Textbox(value="You are a helpful assistant", label="System Prompt")
+            temperature = gr.Slider(minimum=0, maximum=1, step=0.1, value=0.8, label="Temperature")
+            max_new_tokens = gr.Slider(minimum=128, maximum=8192, step=1, value=1024, label="Max new tokens")
+            top_p = gr.Slider(minimum=0.0, maximum=1.0, step=0.1, value=1.0, label="top_p")
+            top_k = gr.Slider(minimum=1, maximum=20, step=1, value=20, label="top_k")
+        
+        submit_btn = gr.Button("Submit", variant="primary")
+        clear_btn = gr.Button("Clear Chat", variant="secondary")
+
+        submit_btn.click(stream_text_chat, [msg, chatbot, system_prompt, temperature, max_new_tokens, top_p, top_k], [chatbot])
+        clear_btn.click(lambda: None, None, chatbot, queue=False)
+
+    with gr.Tab("Vision Model (Phi-3.5-vision)"):
+        with gr.Row():
+            with gr.Column(scale=1):
+                vision_input_img = gr.Image(label="Upload an Image", type="pil")
+                vision_text_input = gr.Textbox(label="Ask a question about the image", placeholder="What do you see in this image?")
+                vision_submit_btn = gr.Button("Analyze Image", variant="primary")
+            with gr.Column(scale=1):
+                vision_output_text = gr.Textbox(label="AI Analysis", lines=10)
+        
+        vision_submit_btn.click(process_vision_query, [vision_input_img, vision_text_input], [vision_output_text])
 
     gr.HTML("<footer>Powered by Phi 3.5 Multimodal AI</footer>")