Update app.py

app.py

@@ -1,4 +1,3 @@
-# app.py
 import gradio as gr
 import os, time, re, json, base64, asyncio, threading, uuid, io
 import numpy as np
@@ -8,7 +7,7 @@ from openai import OpenAI
 from websockets import connect
 from dotenv import load_dotenv
 
-# Load secrets
+# Load environment secrets
 load_dotenv()
 OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")
 ASSISTANT_ID = os.getenv("ASSISTANT_ID")
@@ -71,7 +70,7 @@ class WebSocketClient:
             if data["type"] == "conversation.item.input_audio_transcription.delta":
                 self.transcript += data["delta"]
 
-# WebSocket Connection Manager
+# WebSocket connection manager
 def create_ws():
     cid = str(uuid.uuid4())
     client = WebSocketClient(WS_URI, HEADERS, cid)
@@ -91,9 +90,18 @@ def clear_transcript_only(cid):
         connections[cid].transcript = ""
     return ""
 
+def format_response(content, user_prompt):
+    summary_block = f"""### ❓ {user_prompt}\n\n---\n\n### 🧠 In summary:\n{content}"""
+    thumbnails = ""
+    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):
     if not OPENAI_API_KEY or not ASSISTANT_ID:
-        return "❌ Missing secrets!", thread_id, "", None
+        return "❌ Missing secrets!", thread_id
 
     try:
         if thread_id is None:
@@ -113,25 +121,20 @@ def handle_chat(user_input, thread_id):
         for msg in reversed(msgs.data):
             if msg.role == "assistant":
                 content = msg.content[0].text.value
-                match = re.search(
-                    r'https://raw\.githubusercontent\.com/AndrewLORTech/surgical-pathology-manual/main/[\w\-/]*\.png',
-                    content
-                )
-                image_url = match.group(0) if match else None
-                response = f"### ❓ Question\n{user_input}\n\n---\n\n### 💡 Answer\n{content}"
-                return response, thread_id, image_url
+                return format_response(content, user_input), thread_id
 
-        return "No response from assistant.", thread_id, None
+        return "⚠️ No assistant reply", thread_id
 
     except Exception as e:
-        return f"❌ {e}", thread_id, None
+        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, None
+        return gr.update(), thread_id
     if cid in connections:
         connections[cid].transcript = ""
-    return handle_chat(transcript, thread_id,)
+    return handle_chat(transcript, thread_id)
 
 # ============ Gradio UI ============
 
@@ -140,21 +143,64 @@ with gr.Blocks(theme=gr.themes.Soft()) as app:
     <style>
     body {
         font-family: 'Inter', sans-serif;
-        background-color: #f9f9fb;
+        background-color: #0f0f0f;
+        color: #f0f0f0;
     }
-    .big-btn {
-        font-size: 16px;
-        padding: 12px 20px;
+    #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%;
-        background-color: #4f46e5;
+        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;
     }
-    .voice-area {
-        padding-top: 16px;
-        margin-top: 16px;
-        border-top: 1px solid #ddd;
+    .big-btn {
+        width: 100%;
+        padding: 12px;
+        font-size: 16px;
+        background: #333;
+        color: white;
+        border: none;
+        border-radius: 8px;
     }
     </style>
     """)
@@ -162,42 +208,39 @@ with gr.Blocks(theme=gr.themes.Soft()) as app:
     thread_state = gr.State()
     client_id = gr.State()
 
-    with gr.Row(equal_height=True):
-        with gr.Column(scale=1):
-            user_input = gr.Textbox(placeholder="Ask your question...", label="Prompt")
-            submit_btn = gr.Button("🚀 Ask", variant="primary")
-            result_md = gr.Markdown()
-            image_output = gr.Image(label="🖼️ Preview", type="filepath", show_download_button=False)
+    with gr.Column():
+        gr.HTML("<div id='centered-prompt'><h1>How can I help you today?</h1></div>")
 
-            with gr.Column(elem_classes="voice-area"):
-                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)
+        output_area = gr.Markdown(elem_id="response", label="💡 Assistant", show_label=False)
 
-                voice_submit_btn = gr.Button("Send Voice", elem_classes="big-btn")
-                clear_transcript_btn = gr.Button("🧹 Clear Transcript", elem_classes="big-btn")
+        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.Column(scale=1.4):
-            gr.Markdown("### ⏱️ Assistant Response")
-            result_area = gr.Markdown()
+    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")
 
     # Bindings
-    submit_btn.click(fn=handle_chat,
-                     inputs=[user_input, thread_state],
-                     outputs=[result_area, thread_state, image_output])
+    send_button.click(fn=handle_chat,
+                      inputs=[prompt_box, thread_state],
+                      outputs=[output_area, thread_state])
 
     voice_input.stream(fn=send_audio,
                        inputs=[voice_input, client_id],
                        outputs=transcript_box,
                        stream_every=0.5)
 
-    voice_submit_btn.click(fn=feed_transcript,
-                           inputs=[transcript_box, thread_state, client_id],
-                           outputs=[result_area, thread_state, image_output])
+    voice_btn.click(fn=feed_transcript,
+                    inputs=[transcript_box, thread_state, client_id],
+                    outputs=[output_area, thread_state])
 
-    clear_transcript_btn.click(fn=clear_transcript_only,
-                               inputs=[client_id],
-                               outputs=transcript_box)
+    clear_btn.click(fn=clear_transcript_only,
+                    inputs=[client_id],
+                    outputs=transcript_box)
 
     app.load(fn=create_ws, outputs=[client_id])