Update app.py

app.py

@@ -106,7 +106,7 @@ 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
 
-# Combined chat function
+# 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
@@ -117,42 +117,41 @@ def combined_chat(message, image, history, system_prompt, temperature, max_new_t
         # 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: #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;}
-.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>
+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; }
 """
 
 # 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)
-
-    chatbot = gr.Chatbot(height=400)
-    msg = gr.Textbox(label="Message", placeholder="Type your message here...")
-    image_input = gr.Image(label="Upload an Image (optional)", type="pil")
+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")
@@ -160,12 +159,10 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Base().set(
         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(combined_chat, [msg, image_input, chatbot, system_prompt, temperature, max_new_tokens, top_p, top_k], [chatbot, image_input])
-    clear_btn.click(lambda: ([], None), None, [chatbot, image_input], queue=False)
+    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)
 
     gr.HTML("<footer>Powered by Phi 3.5 Multimodal AI</footer>")