Update app.py

app.py

@@ -1,3 +1,4 @@
+# Final version with Perplexity-style UI, voice toggle, rich formatting, full-width input
 import gradio as gr
 import os, time, re, json, base64, asyncio, threading, uuid, io
 import numpy as np
@@ -17,7 +18,7 @@ HEADERS = {"Authorization": f"Bearer {OPENAI_API_KEY}", "OpenAI-Beta": "realtime
 WS_URI = "wss://api.openai.com/v1/realtime?intent=transcription"
 connections = {}
 
-# WebSocket Client
+# WebSocket Client for Voice
 class WebSocketClient:
     def __init__(self, uri, headers, client_id):
         self.uri = uri
@@ -70,6 +71,7 @@ class WebSocketClient:
             if data["type"] == "conversation.item.input_audio_transcription.delta":
                 self.transcript += data["delta"]
 
+# Chat Handlers
 def create_ws():
     cid = str(uuid.uuid4())
     client = WebSocketClient(WS_URI, HEADERS, cid)
@@ -90,18 +92,13 @@ def clear_transcript(cid):
     return ""
 
 def format_response(content, prompt):
-    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
+    content_md = f"""### ❓ {prompt}\n\n**🧠 In summary:**\n\n{content}\n"""
+    image_urls = re.findall(r'https://raw\\.githubusercontent\\.com/[^\s)]+\\.png', content)
+    if image_urls:
+        content_md += "\n\n**📎 Sources:**\n"
+        for url in image_urls:
+            content_md += f"![]({url})\n"
+    return content_md
 
 def handle_chat(prompt, thread_id):
     if not OPENAI_API_KEY or not ASSISTANT_ID:
@@ -132,108 +129,88 @@ def feed_transcript(transcript, thread_id, cid):
         connections[cid].transcript = ""
     return handle_chat(transcript, thread_id)
 
-# Gradio App
+# Gradio UI
 with gr.Blocks(css="""
 body {
-    background-color: #0f0f0f;
+    background: #0f0f0f;
     color: white;
     font-family: 'Inter', sans-serif;
 }
-.card {
+.markdown-container {
+    margin-top: 20px;
+    padding: 16px;
     background: #1a1a1a;
-    padding: 20px;
-    margin-top: 24px;
     border-radius: 14px;
-    box-shadow: 0 2px 8px #000;
-}
-.thumb-grid {
-    display: flex;
-    gap: 10px;
-    flex-wrap: wrap;
-    margin-top: 12px;
-}
-.thumb {
-    width: 120px;
-    border-radius: 8px;
-    border: 1px solid #333;
+    box-shadow: 0 2px 6px #000;
+    font-size: 16px;
 }
-.input-box {
+.input-bar {
     position: fixed;
     bottom: 16px;
     left: 0;
     right: 0;
-    max-width: 700px;
     margin: auto;
+    max-width: 800px;
+    background: #1c1c1c;
     display: flex;
     gap: 8px;
-    background: #1f1f1f;
     padding: 14px;
-    border-radius: 16px;
-    justify-content: space-between;
+    border-radius: 14px;
 }
-#main-input {
+#user_input {
     flex-grow: 1;
-    background: #2a2a2a;
-    border: none;
     padding: 12px;
-    color: white;
     font-size: 16px;
-    border-radius: 12px;
-}
-#send-btn, #mic-btn {
-    background: #3f3fff;
+    border-radius: 10px;
+    border: none;
+    background: #292929;
     color: white;
+}
+.mic-btn, .send-btn {
+    background: #4f46e5;
     border: none;
-    padding: 12px 16px;
+    border-radius: 10px;
+    color: white;
+    font-size: 18px;
+    padding: 10px 16px;
+}
+.voice-panel {
+    background: #222;
+    padding: 12px;
+    margin-top: 20px;
     border-radius: 12px;
-    font-size: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
 }
 """) as app:
-
     thread_state = gr.State()
     client_id = gr.State()
     voice_visible = gr.State(False)
 
-    gr.HTML("<h1 style='text-align:center; margin-top:40px;'>How can I help you today?</h1>")
-    output_md = gr.HTML()
+    gr.Markdown("<h1 style='text-align:center;'>How can I help you today?</h1>")
+    output = gr.Markdown(elem_classes="markdown-container")
 
-    with gr.Row(elem_classes="input-box"):
-        user_input = gr.Textbox(elem_id="main-input", show_label=False, placeholder="Ask a question...")
+    with gr.Row(elem_classes="input-bar"):
+        user_input = gr.Textbox(placeholder="Ask a question...", elem_id="user_input", show_label=False)
         send_btn = gr.Button("➤", elem_id="send-btn")
         mic_toggle = gr.Button("🎙", elem_id="mic-btn")
 
     with gr.Column(visible=False) as voice_area:
-        mic_audio = gr.Audio(label="Record", streaming=True, type="numpy")
+        mic_audio = gr.Audio(label="Tap to Speak", streaming=True, type="numpy")
         mic_transcript = gr.Textbox(label="Transcript", lines=2, interactive=False)
         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,
-                     stream_every=0.5)
-
-    mic_send.click(fn=feed_transcript,
-                   inputs=[mic_transcript, thread_state, client_id],
-                   outputs=[output_md, thread_state])
-
-    mic_clear.click(fn=clear_transcript,
-                    inputs=[client_id],
-                    outputs=mic_transcript)
+    send_btn.click(fn=handle_chat, inputs=[user_input, thread_state], outputs=[output, 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, stream_every=0.5)
+    mic_send.click(fn=feed_transcript, inputs=[mic_transcript, thread_state, client_id], outputs=[output, thread_state])
+    mic_clear.click(fn=clear_transcript, inputs=[client_id], outputs=mic_transcript)
 
     app.load(fn=create_ws, outputs=[client_id])