Update app.py

app.py

@@ -7,7 +7,7 @@ from openai import OpenAI
 from websockets import connect
 from dotenv import load_dotenv
 
-# Load environment secrets
+# Load secrets
 load_dotenv()
 OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")
 ASSISTANT_ID = os.getenv("ASSISTANT_ID")
@@ -70,7 +70,6 @@ class WebSocketClient:
             if data["type"] == "conversation.item.input_audio_transcription.delta":
                 self.transcript += data["delta"]
 
-# WebSocket connection manager
 def create_ws():
     cid = str(uuid.uuid4())
     client = WebSocketClient(WS_URI, HEADERS, cid)
@@ -85,50 +84,44 @@ def send_audio(chunk, cid):
     connections[cid].enqueue_audio_chunk(sr, arr)
     return connections[cid].transcript.strip()
 
-def clear_transcript_only(cid):
+def clear_transcript(cid):
     if cid in connections:
         connections[cid].transcript = ""
     return ""
 
-def format_response(content, user_prompt):
-    summary_block = f"""### ❓ {user_prompt}\n\n---\n\n### 🧠 In summary:\n{content}"""
-    thumbnails = ""
+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:
-        thumbnails = "\n\n### 📎 Sources:\n" + "\n".join([f"![]({url})" for url in image_urls])
-    return summary_block + thumbnails
-
-# Assistant chat handler
-def handle_chat(user_input, thread_id):
+        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
+
+def handle_chat(prompt, thread_id):
     if not OPENAI_API_KEY or not ASSISTANT_ID:
-        return "❌ Missing secrets!", thread_id
-
+        return "❌ Missing API Key or Assistant ID", thread_id
     try:
         if thread_id is None:
             thread = client.beta.threads.create()
             thread_id = thread.id
-
-        client.beta.threads.messages.create(thread_id=thread_id, role="user", content=user_input)
+        client.beta.threads.messages.create(thread_id=thread_id, role="user", content=prompt)
         run = client.beta.threads.runs.create(thread_id=thread_id, assistant_id=ASSISTANT_ID)
-
         while True:
             status = client.beta.threads.runs.retrieve(thread_id=thread_id, run_id=run.id)
             if status.status == "completed":
                 break
             time.sleep(1)
-
         msgs = client.beta.threads.messages.list(thread_id=thread_id)
         for msg in reversed(msgs.data):
             if msg.role == "assistant":
-                content = msg.content[0].text.value
-                return format_response(content, user_input), thread_id
-
+                return format_response(msg.content[0].text.value, prompt), thread_id
         return "⚠️ No assistant reply", thread_id
-
     except Exception as e:
         return f"❌ {e}", thread_id
 
-# Feed transcript as assistant input
 def feed_transcript(transcript, thread_id, cid):
     if not transcript.strip():
         return gr.update(), thread_id
@@ -136,111 +129,98 @@ def feed_transcript(transcript, thread_id, cid):
         connections[cid].transcript = ""
     return handle_chat(transcript, thread_id)
 
-# ============ Gradio UI ============
-
-with gr.Blocks(theme=gr.themes.Soft()) as app:
-    gr.HTML("""
-    <style>
-    body {
-        font-family: 'Inter', sans-serif;
-        background-color: #0f0f0f;
-        color: #f0f0f0;
-    }
-    #centered-prompt {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        height: 65vh;
-        text-align: center;
-    }
-    .prompt-input {
-        background: #1f1f1f;
-        color: white;
-        padding: 16px;
-        border-radius: 12px;
-        border: none;
-        width: 100%;
-        font-size: 16px;
-    }
-    .input-container {
-        position: fixed;
-        bottom: 20px;
-        left: 0;
-        right: 0;
-        margin: auto;
-        max-width: 700px;
-        display: flex;
-        gap: 8px;
-        background: #1f1f1f;
-        padding: 12px;
-        border-radius: 16px;
-        justify-content: space-between;
-        align-items: center;
-    }
-    .icon-btn {
-        background: #292929;
-        color: white;
-        border: none;
-        border-radius: 50%;
-        padding: 10px 14px;
-        cursor: pointer;
-        font-size: 18px;
-    }
-    .assistant-response {
-        margin-top: 20px;
-        padding: 16px;
-        background: #1a1a1a;
-        border-radius: 16px;
-    }
-    .big-btn {
-        width: 100%;
-        padding: 12px;
-        font-size: 16px;
-        background: #333;
-        color: white;
-        border: none;
-        border-radius: 8px;
-    }
-    </style>
-    """)
+# === Gradio UI ===
+with gr.Blocks(css="""
+body {
+    background-color: #0f0f0f;
+    color: #f1f1f1;
+    font-family: 'Inter', sans-serif;
+}
+.response-card {
+    background: #1a1a1a;
+    padding: 20px;
+    border-radius: 14px;
+    margin-top: 16px;
+    box-shadow: 0 2px 6px #000;
+}
+.source-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 10px;
+}
+.thumbnail {
+    width: 120px;
+    border-radius: 8px;
+    border: 1px solid #333;
+}
+.input-wrap {
+    position: fixed;
+    bottom: 20px;
+    left: 0;
+    right: 0;
+    max-width: 700px;
+    margin: auto;
+    display: flex;
+    gap: 10px;
+    padding: 12px;
+    background: #1a1a1a;
+    border-radius: 16px;
+}
+#chat-input {
+    flex-grow: 1;
+    padding: 14px;
+    border-radius: 12px;
+    background: #2a2a2a;
+    border: none;
+    color: white;
+    font-size: 16px;
+}
+#send-btn {
+    font-size: 18px;
+    background: #3f3fff;
+    color: white;
+    border: none;
+    padding: 12px 16px;
+    border-radius: 10px;
+}
+""") as app:
 
     thread_state = gr.State()
     client_id = gr.State()
 
     with gr.Column():
-        gr.HTML("<div id='centered-prompt'><h1>How can I help you today?</h1></div>")
-
-        output_area = gr.Markdown(elem_id="response", label="💡 Assistant", show_label=False)
+        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="input-row", elem_classes="input-container"):
-            prompt_box = gr.Textbox(placeholder="Ask a question...", elem_classes="prompt-input", show_label=False)
-            send_button = gr.Button("⬆️", elem_classes="icon-btn")
+    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...")
+        send_btn = gr.Button("➤", elem_id="send-btn")
 
     with gr.Column():
         gr.Markdown("🎙️ Real-time Voice Input")
-        voice_input = gr.Audio(label="Tap to Speak", streaming=True, type="numpy")
-        transcript_box = gr.Textbox(label="Transcript", lines=2, interactive=False)
-        voice_btn = gr.Button("Send Voice", elem_classes="big-btn")
-        clear_btn = gr.Button("🧹 Clear Transcript", elem_classes="big-btn")
+        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", elem_classes="big-btn")
+        mic_clear = gr.Button("Clear Transcript", elem_classes="big-btn")
 
     # Bindings
-    send_button.click(fn=handle_chat,
-                      inputs=[prompt_box, thread_state],
-                      outputs=[output_area, thread_state])
+    send_btn.click(fn=handle_chat,
+                   inputs=[user_input, thread_state],
+                   outputs=[output_md, thread_state])
 
-    voice_input.stream(fn=send_audio,
-                       inputs=[voice_input, client_id],
-                       outputs=transcript_box,
-                       stream_every=0.5)
+    mic_audio.stream(fn=send_audio,
+                     inputs=[mic_audio, client_id],
+                     outputs=mic_transcript,
+                     stream_every=0.5)
 
-    voice_btn.click(fn=feed_transcript,
-                    inputs=[transcript_box, thread_state, client_id],
-                    outputs=[output_area, thread_state])
+    mic_send.click(fn=feed_transcript,
+                   inputs=[mic_transcript, thread_state, client_id],
+                   outputs=[output_md, thread_state])
 
-    clear_btn.click(fn=clear_transcript_only,
+    mic_clear.click(fn=clear_transcript,
                     inputs=[client_id],
-                    outputs=transcript_box)
+                    outputs=mic_transcript)
 
     app.load(fn=create_ws, outputs=[client_id])