Update app.py

app.py

@@ -44,7 +44,7 @@ def image_url_chat(image_url, text_query, temperature, top_p, max_output_tokens)
 
     messages = [
         {"role": "user", "content": [
-            {"type": "image_url", "image_url": {"url": image_url}},
+            {"type": "image_url", "image_url": {"url": image_url}},  # Corrected format
             {"type": "text", "text": text_query}
         ]},
     ]
@@ -71,7 +71,7 @@ def image_chat(image_file, text_query, temperature, top_p, max_output_tokens):
 
     messages = [
         {"role": "user", "content": [
-            {"type": "image_url", "image_url": {"url": image_data}},
+            {"type": "image_url", "image_url": {"url": image_data}},  # Fixed format
             {"type": "text", "text": text_query}
         ]},
     ]
@@ -103,38 +103,6 @@ def pdf_chat(pdf_file, text_query, temperature, top_p, max_output_tokens):
     except Exception as e:
         return f"Error processing the PDF: {str(e)}"
 
-# Function to process audio file and convert to text
-def process_audio(audio_file, query, temperature, top_p, max_output_tokens):
-    # Modified to handle numpy array or filepath depending on Audio component output
-    try:
-        if isinstance(audio_file, tuple):  # In case audio is returned as tuple (numpy array, sample rate)
-            # Convert numpy array to WAV bytes in memory
-            import numpy as np
-            import scipy.io.wavfile as wav
-            
-            audio_data, sample_rate = audio_file
-            buffer = io.BytesIO()
-            wav.write(buffer, sample_rate, audio_data)
-            buffer.seek(0)
-            audio_binary = buffer.read()
-        else:  # Filepath
-            with open(audio_file, "rb") as f:
-                audio_binary = f.read()
-                
-        # Transcribe the audio
-        transcription = transcribe_audio(audio_binary, api_key)
-        
-        # Use the transcription and query to get a response
-        messages = [
-            {"role": "user", "content": [
-                {"type": "text", "text": f"Transcription: {transcription}"},
-                {"type": "text", "text": f"Query: {query}"}
-            ]},
-        ]
-        return query_openai(messages, temperature, top_p, max_output_tokens)
-    except Exception as e:
-        return f"Error processing audio: {str(e)}"
-
 # Function to transcribe audio to text using OpenAI Whisper API
 def transcribe_audio(audio_binary, openai_api_key):
     if not openai_api_key:
@@ -153,9 +121,9 @@ def transcribe_audio(audio_binary, openai_api_key):
     except Exception as e:
         return f"Error transcribing audio: {str(e)}"
 
-# Function to clear the chat
+# Function to clear the chat (Fix: Returns the correct number of outputs)
 def clear_chat():
-    return "", "", "", "", "", "", "", None, "", None, "", None, "", None, "", 1.0, 1.0, 2048
+    return "", "", "", "", "", "", "", None, "", None, "", 1.0, 1.0, 2048
 
 # Gradio UI Layout
 with gr.Blocks() as demo:
@@ -163,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): 
@@ -172,6 +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>
+    """)
+    
     # API Key Input
     with gr.Row():
         api_key_input = gr.Textbox(label="Enter OpenAI API Key", type="password")
@@ -181,47 +173,40 @@ with gr.Blocks() as demo:
     with gr.Row():
         temperature = gr.Slider(0, 2, value=1.0, step=0.1, label="Temperature")
         top_p = gr.Slider(0, 1, value=1.0, step=0.1, label="Top-P")
-        max_output_tokens = gr.Slider(0, 16384, value=2048, step=512, label="Max Output Tokens")
+        max_output_tokens = gr.Slider(0, 16384, value=2048, step=512, label="Max Output Tokens")  # Changed default to 2048
     
     with gr.Tabs():
         with gr.Tab("Image URL Chat"):
             image_url = gr.Textbox(label="Enter Image URL")
             image_query = gr.Textbox(label="Ask about the Image")
             image_url_output = gr.Textbox(label="Response", interactive=False)
-            image_url_button = gr.Button("Ask", elem_id="ask_button")
+            image_url_button = gr.Button("Ask",elem_id="ask_button")
         
         with gr.Tab("Text Chat"):
             text_query = gr.Textbox(label="Enter your query")
             text_output = gr.Textbox(label="Response", interactive=False)
-            text_button = gr.Button("Ask", elem_id="ask_button")
+            text_button = gr.Button("Ask",elem_id="ask_button")
         
         with gr.Tab("Image Chat"):
             image_upload = gr.File(label="Upload an Image", type="filepath")
             image_text_query = gr.Textbox(label="Ask about the uploaded image")
             image_output = gr.Textbox(label="Response", interactive=False)
-            image_button = gr.Button("Ask", elem_id="ask_button")
+            image_button = gr.Button("Ask",elem_id="ask_button")
         
         with gr.Tab("PDF Chat"):
             pdf_upload = gr.File(label="Upload a PDF", type="filepath")
             pdf_text_query = gr.Textbox(label="Ask about the uploaded PDF")
             pdf_output = gr.Textbox(label="Response", interactive=False)
-            pdf_button = gr.Button("Ask", elem_id="ask_button")
-        
-        with gr.Tab("Voice Chat (Upload)"):
-            audio_upload = gr.File(label="Upload an Audio File")
+            pdf_button = gr.Button("Ask",elem_id="ask_button")
+
+        with gr.Tab("Voice Chat"):
+            audio_upload = gr.File(label="Upload an Audio File", type="binary")
             audio_query = gr.Textbox(label="Ask about the transcription")
             audio_output = gr.Textbox(label="Response", interactive=False)
-            audio_button = gr.Button("Ask", elem_id="ask_button")
-
-        with gr.Tab("Voice(Record) Chat"):
-            # Fix: Changed type to "numpy" which is supported in your Gradio version
-            audio_record = gr.Audio(label="Record your voice", type="numpy")
-            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")
+            audio_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])
@@ -230,26 +215,22 @@ with gr.Blocks() as demo:
     image_button.click(image_chat, [image_upload, image_text_query, temperature, top_p, max_output_tokens], image_output)
     pdf_button.click(pdf_chat, [pdf_upload, pdf_text_query, temperature, top_p, max_output_tokens], pdf_output)
     
-    # For Voice Chat (Upload)
-    audio_button.click(process_audio, 
-                      [audio_upload, audio_query, temperature, top_p, max_output_tokens], 
-                      audio_output)
-    
-    # For Voice Chat (Record)
-    audio_record_button.click(process_audio, 
-                             [audio_record, audio_record_query, temperature, top_p, max_output_tokens], 
-                             audio_record_output)
+    # For Voice Chat
+    audio_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_upload, audio_query, temperature, top_p, max_output_tokens], audio_output
+    )
 
-    # Clear button resets all necessary fields
+    # Fix: Clear button resets all necessary fields correctly
     clear_button.click(
         clear_chat,
         outputs=[
             image_url, image_query, image_url_output, 
             text_query, text_output, 
             image_text_query, image_output, 
-            pdf_upload, pdf_text_query, pdf_output,
-            audio_upload, audio_query, audio_output,
-            audio_record, audio_record_query, audio_record_output,
+            pdf_upload, pdf_text_query, pdf_output, 
             temperature, top_p, max_output_tokens
         ]
     )