Update app.py

app.py

@@ -97,14 +97,69 @@ 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
 
-# Update the Gradio interface part
-with gr.Blocks() as demo:
-    gr.HTML(TITLE)
-    gr.Markdown(DESCRIPTION)
+# Custom CSS
+custom_css = """
+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.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=600)
-        msg = gr.Textbox(label="Message")
+        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")
@@ -112,22 +167,24 @@ with gr.Blocks() as demo:
             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")
-        clear_btn = gr.Button("Clear")
+        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():
-                vision_input_img = gr.Image(label="Input Picture")
-                vision_text_input = gr.Textbox(label="Question")
-                vision_submit_btn = gr.Button(value="Submit")
-            with gr.Column():
-                vision_output_text = gr.Textbox(label="Output Text")
+            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>")
+
 if __name__ == "__main__":
     demo.launch()