Update app.py

app.py

@@ -131,7 +131,7 @@ with gr.Blocks() as demo:
 
     # Accordion for explaining hyperparameters
     with gr.Accordion("Hyperparameters", open=False):
-        gr.Markdown("""
+        gr.Markdown(""" 
         ### Temperature: 
         Controls the randomness of the model's output. A lower temperature makes the model more deterministic, while a higher temperature makes it more creative and varied.
         ### Top-P (Nucleus Sampling): 
@@ -140,30 +140,30 @@ with gr.Blocks() as demo:
         Limits the number of tokens (words or subwords) the model can generate in its response. You can use this to control the length of the response.
         """)
 
-    gr.HTML("""
-    <style>
-        #api_key_button {
-            margin-top: 27px; /* Add margin-top to the button */
-            background: linear-gradient(135deg, #4a00e0 0%, #8e2de2 100%); /* Purple gradient */
-        }
-        #api_key_button:hover {
-            background: linear-gradient(135deg, #5b10f1 0%, #9f3ef3 100%); /* Slightly lighter */
-        }
-        #clear_chat_button {
-            background: linear-gradient(135deg, #e53e3e 0%, #f56565 100%); /* Red gradient */
-        }
-        #clear_chat_button:hover {
-            background: linear-gradient(135deg, #c53030 0%, #e53e3e 100%); /* Slightly darker red gradient on hover */
-        }
-        #ask_button {
-            background: linear-gradient(135deg, #fbd38d 0%, #f6e05e 100%); /* Yellow gradient */
-        }
-        #ask_button:hover {
-            background: linear-gradient(135deg, #ecc94b 0%, #fbd38d 100%); /* Slightly darker yellow gradient on hover */
-        }
-    </style>
+    gr.HTML(""" 
+    <style> 
+        #api_key_button { 
+            margin-top: 27px; 
+            background: linear-gradient(135deg, #4a00e0 0%, #8e2de2 100%); 
+        } 
+        #api_key_button:hover { 
+            background: linear-gradient(135deg, #5b10f1 0%, #9f3ef3 100%); 
+        } 
+        #clear_chat_button { 
+            background: linear-gradient(135deg, #e53e3e 0%, #f56565 100%); 
+        } 
+        #clear_chat_button:hover { 
+            background: linear-gradient(135deg, #c53030 0%, #e53e3e 100%); 
+        } 
+        #ask_button { 
+            background: linear-gradient(135deg, #fbd38d 0%, #f6e05e 100%); 
+        } 
+        #ask_button:hover { 
+            background: linear-gradient(135deg, #ecc94b 0%, #fbd38d 100%); 
+        } 
+    </style> 
     """)
-    
+
     # API Key Input
     with gr.Row():
         api_key_input = gr.Textbox(label="Enter OpenAI API Key", type="password")
@@ -205,8 +205,14 @@ with gr.Blocks() as demo:
             audio_output = gr.Textbox(label="Response", interactive=False)
             audio_button = gr.Button("Ask",elem_id="ask_button")
 
+        with gr.Tab("Voice(Record) Chat"):
+            audio_record = gr.Audio(source="microphone", type="binary", label="Record your voice")
+            audio_record_query = gr.Textbox(label="Ask about the transcription")
+            audio_record_output = gr.Textbox(label="Response", interactive=False)
+            audio_record_button = gr.Button("Ask", elem_id="ask_button")
+
     # Clear chat button
-    clear_button = gr.Button("Clear Chat",elem_id="clear_chat_button")
+    clear_button = gr.Button("Clear Chat", elem_id="clear_chat_button")
 
     # Button Click Actions
     api_key_button.click(set_api_key, inputs=[api_key_input], outputs=[api_key_output])
@@ -223,6 +229,14 @@ with gr.Blocks() as demo:
         ), [audio_upload, audio_query, temperature, top_p, max_output_tokens], audio_output
     )
 
+    # For Voice(Record) Chat
+    audio_record_button.click(
+        lambda audio_binary, query, temperature, top_p, max_output_tokens: query_openai(
+            [{"role": "user", "content": [{"type": "text", "text": transcribe_audio(audio_binary, api_key)}, {"type": "text", "text": query}]}],
+            temperature, top_p, max_output_tokens
+        ), [audio_record, audio_record_query, temperature, top_p, max_output_tokens], audio_record_output
+    )
+
     # Fix: Clear button resets all necessary fields correctly
     clear_button.click(
         clear_chat,