Update app.py

app.py

@@ -1,4 +1,4 @@
-# Final version with Perplexity-style UI, voice toggle, rich formatting, full-width input
+# Final version with Perplexity-style UI, voice toggle, rich formatting, full-width input and working mic
 import gradio as gr
 import os, time, re, json, base64, asyncio, threading, uuid, io
 import numpy as np
@@ -18,7 +18,6 @@ HEADERS = {"Authorization": f"Bearer {OPENAI_API_KEY}", "OpenAI-Beta": "realtime
 WS_URI = "wss://api.openai.com/v1/realtime?intent=transcription"
 connections = {}
 
-# WebSocket Client for Voice
 class WebSocketClient:
     def __init__(self, uri, headers, client_id):
         self.uri = uri
@@ -31,12 +30,12 @@ class WebSocketClient:
 
     async def connect(self):
         try:
-            self.websocket = await connect(self.uri, additional_headers=self.headers)
+            self.websocket = await connect(self.uri, extra_headers=self.headers)
             with open("openai_transcription_settings.json", "r") as f:
                 await self.websocket.send(f.read())
             await asyncio.gather(self.receive_messages(), self.send_audio_chunks())
         except Exception as e:
-            print(f"🔴 WebSocket Connection Failed: {e}")
+            print(f"WebSocket failed: {e}")
 
     def run(self):
         asyncio.set_event_loop(self.loop)
@@ -71,7 +70,6 @@ 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)
@@ -92,17 +90,15 @@ def clear_transcript(cid):
     return ""
 
 def format_response(content, prompt):
-    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
+    md = f"""### ❓ {prompt}\n\n**🧠 In summary:**\n\n{content}\n"""
+    images = re.findall(r'https://raw\.githubusercontent\.com/[^\s)]+\.png', content)
+    if images:
+        md += "\n\n**📎 Sources:**\n" + "\n".join([f"![]({url})" for url in images])
+    return md
 
 def handle_chat(prompt, thread_id):
     if not OPENAI_API_KEY or not ASSISTANT_ID:
-        return "❌ Missing API Key or Assistant ID", thread_id
+        return "❌ Missing credentials", thread_id
     try:
         if thread_id is None:
             thread = client.beta.threads.create()
@@ -118,7 +114,7 @@ def handle_chat(prompt, thread_id):
         for msg in reversed(msgs.data):
             if msg.role == "assistant":
                 return format_response(msg.content[0].text.value, prompt), thread_id
-        return "⚠️ No assistant reply", thread_id
+        return "⚠️ No reply", thread_id
     except Exception as e:
         return f"❌ {e}", thread_id
 
@@ -129,54 +125,53 @@ def feed_transcript(transcript, thread_id, cid):
         connections[cid].transcript = ""
     return handle_chat(transcript, thread_id)
 
-# Gradio UI
 with gr.Blocks(css="""
 body {
-    background: #0f0f0f;
+    background-color: #0f0f0f;
     color: white;
     font-family: 'Inter', sans-serif;
 }
 .markdown-container {
-    margin-top: 20px;
-    padding: 16px;
+    margin-top: 16px;
+    padding: 18px;
     background: #1a1a1a;
-    border-radius: 14px;
-    box-shadow: 0 2px 6px #000;
+    border-radius: 12px;
     font-size: 16px;
+    box-shadow: 0 2px 6px #000;
 }
 .input-bar {
     position: fixed;
     bottom: 16px;
     left: 0;
     right: 0;
+    max-width: 1000px;
     margin: auto;
-    max-width: 800px;
-    background: #1c1c1c;
     display: flex;
-    gap: 8px;
-    padding: 14px;
-    border-radius: 14px;
+    padding: 12px;
+    gap: 10px;
+    background: #1f1f1f;
+    border-radius: 16px;
 }
 #user_input {
-    flex-grow: 1;
+    flex: 1;
     padding: 12px;
     font-size: 16px;
-    border-radius: 10px;
-    border: none;
     background: #292929;
+    border: none;
     color: white;
+    border-radius: 10px;
 }
-.mic-btn, .send-btn {
+.btn {
     background: #4f46e5;
+    color: white;
     border: none;
     border-radius: 10px;
-    color: white;
+    padding: 10px 14px;
     font-size: 18px;
-    padding: 10px 16px;
 }
-.voice-panel {
+.voice-area {
     background: #222;
-    padding: 12px;
+    padding: 14px;
     margin-top: 20px;
     border-radius: 12px;
     display: flex;
@@ -189,29 +184,25 @@ body {
     voice_visible = gr.State(False)
 
     gr.Markdown("<h1 style='text-align:center;'>How can I help you today?</h1>")
-    output = gr.Markdown(elem_classes="markdown-container")
+    response = gr.Markdown(elem_classes="markdown-container")
 
     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="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, 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)
-
+        prompt = gr.Textbox(placeholder="Ask a question...", elem_id="user_input", show_label=False)
+        send = gr.Button("➤", elem_id="send", elem_classes="btn")
+        mic = gr.Button("🎙", elem_id="mic", elem_classes="btn")
+
+    with gr.Column(visible=False, elem_classes="voice-area") as voice_box:
+        voice = gr.Audio(label="Tap to Speak", streaming=True, type="numpy")
+        transcript = gr.Textbox(label="Transcript", lines=2, interactive=False)
+        send_voice = gr.Button("Send Voice")
+        clear = gr.Button("Clear Transcript")
+
+    send.click(handle_chat, [prompt, thread_state], [response, thread_state])
+    mic.click(lambda x: not x, voice_visible, voice_visible)
+    voice_visible.change(fn=None, inputs=voice_visible, outputs=voice_box, show_progress=False)
+    voice.stream(send_audio, [voice, client_id], transcript, stream_every=0.5)
+    send_voice.click(feed_transcript, [transcript, thread_state, client_id], [response, thread_state])
+    clear.click(clear_transcript, [client_id], transcript)
     app.load(fn=create_ws, outputs=[client_id])
 
 app.launch()