Update app.py

app.py

@@ -5,13 +5,13 @@ from pydub import AudioSegment
 import whisper
 import requests
 
-# 🔐 API key
-groq_key = "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"  # Replace with your actual Groq key
+# 🔐 Load API key securely from environment
+groq_key = os.getenv("GROQ_API_KEY")
 
-# 🧠 Load Whisper locally
-whisper_model = whisper.load_model("base")  # Use "small"/"medium"/"large" for better results
+# 🧠 Load Whisper model
+whisper_model = whisper.load_model("base")
 
-# 💬 Chat using Groq
+# 💬 Chat function
 def chat_with_groq(message, history):
     messages = [{"role": "system", "content": "You are JAWERIA'SBOT 🤖 – cheerful, emoji-savvy, and sleek."}]
     messages += history + [{"role": "user", "content": message}]
@@ -32,7 +32,7 @@ def chat_with_groq(message, history):
     history += [{"role": "user", "content": message}, {"role": "assistant", "content": reply}]
     return "", history, history
 
-# 🎙️ Transcribe voice to text
+# 🎙️ Audio transcription
 def transcribe_audio(audio_path):
     if audio_path is None or not os.path.exists(audio_path):
         return "⚠️ No audio recorded."
@@ -68,17 +68,39 @@ def load_chat(name):
     except Exception as e:
         return [], [], f"❌ Load error: {e}"
 
-# 🌙 Gradio UI
+# 🌌 Gradio UI
 with gr.Blocks(css="""
-body {background-color: #111 !important; color: white;}
-.gr-chatbot-message {background-color: #222 !important; color: white !important; border-radius: 6px;}
-input[type='text'], textarea, select, .gr-textbox {background-color: #222 !important; color: white !important;}
-.gr-button {background-color: #007acc !important; color: white !important;}
+    body {
+        background-color: #111 !important;
+        color: white !important;
+    }
+    * {
+        color: white !important;
+    }
+    h1 {
+        text-align: center !important;
+        color: #00ccff !important;
+        margin: auto !important;
+    }
+    .gr-chatbot-message, .gr-textbox, textarea, input[type='text'],
+    select, .gr-dropdown, .gr-markdown, .gr-label {
+        background-color: #222 !important;
+        color: white !important;
+        border-radius: 6px;
+    }
+    .gr-button {
+        background-color: #007acc !important;
+        color: white !important;
+    }
+    .gr-dropdown {
+        max-height: 150px;
+        overflow-y: auto;
+    }
 """) as demo:
 
     state = gr.State([])
 
-    gr.Markdown("<h1 style='text-align:center; color:#00ccff;'>✨ JAWERIA'SBOT 🤖</h1>")
+    gr.Markdown("# ✨ JAWERIA'SBOT 🤖")
     gr.Markdown("<div style='text-align:center;'>Speak or type — your assistant listens and replies with text 💬</div>")
 
     chatbot = gr.Chatbot(type="messages", height=350)
@@ -98,7 +120,7 @@ input[type='text'], textarea, select, .gr-textbox {background-color: #222 !impor
         save_msg = gr.Markdown()
         load_msg = gr.Markdown()
 
-    # 🔗 Bind actions
+    # 🔗 Bind events
     send_btn.click(chat_with_groq, inputs=[chat_input, state], outputs=[chat_input, chatbot, state])
     chat_input.submit(chat_with_groq, inputs=[chat_input, state], outputs=[chat_input, chatbot, state])
     voice_btn.click(transcribe_audio, inputs=[voice_input], outputs=[chat_input])