Update app.py

app.py

@@ -70,7 +70,7 @@ class WebSocketClient:
             if data["type"] == "conversation.item.input_audio_transcription.delta":
                 self.transcript += data["delta"]
 
-# Real-time transcription connection manager
+# WebSocket connection setup
 def create_ws():
     cid = str(uuid.uuid4())
     client = WebSocketClient(WS_URI, HEADERS, cid)
@@ -136,22 +136,23 @@ def clear_chat_and_transcript(client_id):
         connections[client_id].transcript = ""
     return [], "", None, None
 
-def toggle_record_visibility(is_visible):
-    return not is_visible, gr.update(visible=not is_visible)
-
 # UI
 with gr.Blocks(theme=gr.themes.Soft()) as app:
     gr.Markdown("# 📄 Document AI Assistant")
 
     gr.HTML("""
     <style>
-    #ask-btn, #clear-chat-btn, #record-btn {
+    #ask-btn, #clear-chat-btn {
         font-size: 16px !important;
         padding: 10px 24px !important;
         margin-top: 6px;
     }
-    #audio-stream button {
-        display: none !important;
+    #record-audio button {
+        font-size: 16px !important;
+        padding: 12px 24px !important;
+        background-color: #f2f2f2 !important;
+        border-radius: 6px;
+        margin-top: 6px;
     }
     </style>
     """)
@@ -160,7 +161,6 @@ with gr.Blocks(theme=gr.themes.Soft()) as app:
     thread_state = gr.State()
     image_state = gr.State()
     client_id = gr.State()
-    voice_enabled = gr.State(False)
 
     with gr.Row(equal_height=True):
         with gr.Column(scale=1):
@@ -173,36 +173,25 @@ with gr.Blocks(theme=gr.themes.Soft()) as app:
                 send_btn = gr.Button("Send", variant="primary", scale=2)
 
             with gr.Accordion("🎤 Voice Transcription", open=False) as voice_section:
-                voice_input = gr.Audio(label="🎙️ Mic Input", streaming=True, visible=False, elem_id="audio-stream")
+                voice_input = gr.Audio(label="🎙️ Record", streaming=True, elem_id="record-audio")
                 voice_transcript = gr.Textbox(label="Transcript", lines=2, interactive=False)
 
                 with gr.Row():
-                    record_toggle_btn = gr.Button("🎙️ Record", elem_id="record-btn")
                     ask_btn = gr.Button("🟢 Ask", elem_id="ask-btn")
                     clear_chat_btn = gr.Button("🧹 Clear Chat", elem_id="clear-chat-btn")
 
-    # Functional bindings
+    # Bindings
     send_btn.click(fn=handle_chat,
                    inputs=[user_prompt, chat_state, thread_state, image_state],
                    outputs=[user_prompt, chat, thread_state, image_state])
     image_state.change(fn=lambda x: x, inputs=image_state, outputs=image_display)
-
     voice_input.stream(fn=send_audio, inputs=[voice_input, client_id], outputs=voice_transcript, stream_every=0.5)
-
-    record_toggle_btn.click(
-        fn=toggle_record_visibility,
-        inputs=[voice_enabled],
-        outputs=[voice_enabled, voice_input]
-    )
-
     ask_btn.click(fn=send_transcript_to_assistant,
                   inputs=[voice_transcript, chat_state, thread_state, image_state],
                   outputs=[user_prompt, chat, thread_state, image_state])
-
     clear_chat_btn.click(fn=clear_chat_and_transcript,
                          inputs=[client_id],
                          outputs=[chat, voice_transcript, thread_state, image_state])
-
     app.load(fn=create_ws, outputs=[client_id])
 
 app.launch()