Update app.py

app.py

@@ -90,15 +90,18 @@ def clear_transcript(cid):
     return ""
 
 def format_response(content, prompt):
-    header = f"<div class='response-card'><h3>❓ {prompt}</h3><p><b>🧠 In summary:</b></p><p>{content}</p>"
-    image_urls = re.findall(r'https://raw\.githubusercontent\.com/[^\s)]+\.png', content)
-    if image_urls:
-        header += "<div class='source-grid'><h4>📎 Sources:</h4>"
-        for url in image_urls:
-            header += f"<img src='{url}' class='thumbnail' />"
-        header += "</div>"
-    header += "</div>"
-    return header
+    summary = f"""<div class="card">
+    <h3>❓ {prompt}</h3>
+    <p><b>🧠 In summary:</b></p>
+    <p>{content}</p>"""
+    thumbnails = re.findall(r'https://raw\.githubusercontent\.com/[^\s)]+\.png', content)
+    if thumbnails:
+        summary += "<h4>📎 Sources:</h4><div class='thumb-grid'>"
+        for url in thumbnails:
+            summary += f"<img src='{url}' class='thumb' />"
+        summary += "</div>"
+    summary += "</div>"
+    return summary
 
 def handle_chat(prompt, thread_id):
     if not OPENAI_API_KEY or not ASSISTANT_ID:
@@ -129,86 +132,96 @@ def feed_transcript(transcript, thread_id, cid):
         connections[cid].transcript = ""
     return handle_chat(transcript, thread_id)
 
-# === Gradio UI ===
+# Gradio App
 with gr.Blocks(css="""
 body {
     background-color: #0f0f0f;
-    color: #f1f1f1;
+    color: white;
     font-family: 'Inter', sans-serif;
 }
-.response-card {
+.card {
     background: #1a1a1a;
     padding: 20px;
+    margin-top: 24px;
     border-radius: 14px;
-    margin-top: 16px;
-    box-shadow: 0 2px 6px #000;
+    box-shadow: 0 2px 8px #000;
 }
-.source-grid {
+.thumb-grid {
     display: flex;
-    flex-wrap: wrap;
     gap: 10px;
-    margin-top: 10px;
+    flex-wrap: wrap;
+    margin-top: 12px;
 }
-.thumbnail {
+.thumb {
     width: 120px;
     border-radius: 8px;
     border: 1px solid #333;
 }
-.input-wrap {
+.input-box {
     position: fixed;
-    bottom: 20px;
+    bottom: 16px;
     left: 0;
     right: 0;
     max-width: 700px;
     margin: auto;
     display: flex;
-    gap: 10px;
-    padding: 12px;
-    background: #1a1a1a;
+    gap: 8px;
+    background: #1f1f1f;
+    padding: 14px;
     border-radius: 16px;
+    justify-content: space-between;
 }
-#chat-input {
+#main-input {
     flex-grow: 1;
-    padding: 14px;
-    border-radius: 12px;
     background: #2a2a2a;
     border: none;
+    padding: 12px;
     color: white;
     font-size: 16px;
+    border-radius: 12px;
 }
-#send-btn {
-    font-size: 18px;
+#send-btn, #mic-btn {
     background: #3f3fff;
     color: white;
     border: none;
     padding: 12px 16px;
-    border-radius: 10px;
+    border-radius: 12px;
+    font-size: 16px;
 }
 """) as app:
 
     thread_state = gr.State()
     client_id = gr.State()
+    voice_visible = gr.State(False)
 
-    with gr.Column():
-        gr.HTML("<h1 style='text-align:center; margin-top:40px;'>How can I help you today?</h1>")
-        output_md = gr.HTML()
+    gr.HTML("<h1 style='text-align:center; margin-top:40px;'>How can I help you today?</h1>")
+    output_md = gr.HTML()
 
-    with gr.Row(elem_id="chat-row", elem_classes="input-wrap"):
-        user_input = gr.Textbox(elem_id="chat-input", show_label=False, placeholder="Ask something...")
+    with gr.Row(elem_classes="input-box"):
+        user_input = gr.Textbox(elem_id="main-input", show_label=False, placeholder="Ask a question...")
         send_btn = gr.Button("➤", elem_id="send-btn")
+        mic_toggle = gr.Button("🎙", elem_id="mic-btn")
 
-    with gr.Column():
-        gr.Markdown("🎙️ Real-time Voice Input")
-        mic_audio = gr.Audio(label="Tap to Speak", streaming=True, type="numpy")
+    with gr.Column(visible=False) as voice_area:
+        mic_audio = gr.Audio(label="Record", streaming=True, type="numpy")
         mic_transcript = gr.Textbox(label="Transcript", lines=2, interactive=False)
-        mic_send = gr.Button("Send Voice", elem_classes="big-btn")
-        mic_clear = gr.Button("Clear Transcript", elem_classes="big-btn")
+        mic_send = gr.Button("Send Voice")
+        mic_clear = gr.Button("Clear Transcript")
 
     # Bindings
     send_btn.click(fn=handle_chat,
                    inputs=[user_input, thread_state],
                    outputs=[output_md, thread_state])
 
+    mic_toggle.click(fn=lambda v: not v,
+                     inputs=voice_visible,
+                     outputs=voice_visible)
+
+    voice_visible.change(fn=None,
+                         inputs=voice_visible,
+                         outputs=voice_area,
+                         show_progress=False)
+
     mic_audio.stream(fn=send_audio,
                      inputs=[mic_audio, client_id],
                      outputs=mic_transcript,