Update app.py

app.py

@@ -7,7 +7,7 @@ from openai import OpenAI
 from websockets import connect, Data, ClientConnection
 from dotenv import load_dotenv
 
-# ---------------- Environment & Client Setup ----------------
+# ============ Load Secrets ============
 load_dotenv()
 OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")
 ASSISTANT_ID = os.getenv("ASSISTANT_ID")
@@ -17,7 +17,7 @@ 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 ----------------
+# ============ WebSocket Client for Voice ============
 class WebSocketClient:
     def __init__(self, uri, headers, client_id):
         self.uri, self.headers, self.client_id = uri, headers, client_id
@@ -74,7 +74,7 @@ def clear_transcript(cid):
     if cid in connections: connections[cid].transcript = ""
     return ""
 
-# ---------------- Chat Functionality ----------------
+# ============ Chat Assistant Logic ============
 def handle_chat(user_input, history, thread_id, image_url):
     if not OPENAI_API_KEY or not ASSISTANT_ID:
         return "❌ Missing secrets!", history, thread_id, image_url
@@ -106,7 +106,7 @@ def handle_chat(user_input, history, thread_id, image_url):
     except Exception as e:
         return f"❌ {e}", history, thread_id, image_url
 
-# ---------------- Gradio UI Layout ----------------
+# ============ Gradio UI ============
 with gr.Blocks(theme=gr.themes.Soft()) as app:
     gr.Markdown("# 📄 Document AI Assistant")
 
@@ -116,23 +116,22 @@ with gr.Blocks(theme=gr.themes.Soft()) as app:
     image_state = gr.State()
     client_id = gr.State()
 
-    with gr.Row():
-        with gr.Column(scale=1):
-            # IMAGE VIEWER (left)
-            image_display = gr.Image(label="🖼️ Document", type="filepath")
-
-            # VOICE (under)
-            voice_transcript = gr.Textbox(label="🎙️ Transcript", lines=4, interactive=False)
-            voice_input = gr.Audio(label="🔴 Record", streaming=True)
+    with gr.Row(equal_height=True):
+        # LEFT COLUMN — Image + Voice
+        with gr.Column(scale=1, min_width=400):
+            image_display = gr.Image(label="🖼️ Document Image", type="filepath", show_download_button=False, show_label=False)
+            with gr.Row():
+                voice_input = gr.Audio(label="🎙️ Mic", streaming=True)
+                voice_transcript = gr.Textbox(label="📝 Transcript", lines=3, interactive=False)
             clear_btn = gr.Button("🧹 Clear Transcript")
 
-        with gr.Column(scale=2):
-            # CHATBOT (right)
-            chat = gr.Chatbot(label="💬 Chat", height=450)
-            user_prompt = gr.Textbox(show_label=False, placeholder="Ask your question...")
-            send_btn = gr.Button("Send")
+        # RIGHT COLUMN — Chatbot
+        with gr.Column(scale=1.4, min_width=500):
+            chat = gr.Chatbot(label="💬 Chat", height=480)
+            user_prompt = gr.Textbox(placeholder="Ask your question...", show_label=False)
+            send_btn = gr.Button("Send", variant="primary")
 
-    # HANDLERS
+    # HOOKS
     send_btn.click(handle_chat,
                    inputs=[user_prompt, chat_state, thread_state, image_state],
                    outputs=[user_prompt, chat, thread_state, image_state])