Update app.py

app.py

@@ -4,13 +4,19 @@ from datetime import datetime
 from pydub import AudioSegment
 import whisper
 import requests
+import emoji
 
-# 🔐 Load API key securely from environment
+# 🔐 Load API key
 groq_key = os.getenv("GROQ_API_KEY")
 
 # 🧠 Load Whisper model
 whisper_model = whisper.load_model("base")
 
+# 🎯 Emoji filter
+def filter_emojis(text):
+    allowed_emojis = {"😊", "😄", "👍", "🤖", "✨", "🎉", "💬", "🙌", "😎", "📢", "🧠", "✅"}
+    return "".join(char if char not in emoji.EMOJI_DATA or char in allowed_emojis else "" for char in text)
+
 # 💬 Chat function
 def chat_with_groq(message, history):
     messages = [{"role": "system", "content": "You are JAWERIA'SBOT 🤖 – cheerful, emoji-savvy, and sleek."}]
@@ -27,7 +33,8 @@ def chat_with_groq(message, history):
     }
 
     response = requests.post("https://api.groq.com/openai/v1/chat/completions", headers=headers, json=payload)
-    reply = response.json()["choices"][0]["message"]["content"]
+    raw_reply = response.json()["choices"][0]["message"]["content"]
+    reply = filter_emojis(raw_reply)
 
     history += [{"role": "user", "content": message}, {"role": "assistant", "content": reply}]
     return "", history, history
@@ -71,52 +78,78 @@ def load_chat(name):
 # 🌌 Gradio UI
 
 with gr.Blocks(css="""
-    body {
-        background-color: #111 !important;
-        color: white !important;
-    }
-    * {
-        color: white !important;
-    }
-    h1, h2, h3, label, .gr-label, .gr-markdown {
-        color: white !important;
-        text-align: center !important;
-    }
-    /* Voice box, input, buttons, dropdowns, etc. */
-    .gr-chatbot-message, .gr-textbox, textarea, input[type='text'], input, select,
-    .gr-dropdown, .gr-markdown, .gr-label, .gr-button, .gr-audio, .gr-audio-label,
-    .gr-row, .gr-column, .form, .form-wrap {
-        background-color: #000 !important;
-        color: white !important;
-        border-radius: 8px;
-        border: 1px solid #333 !important;
-    }
-
-    /* Hover effect for buttons */
-    .gr-button:hover {
-        background-color: #222 !important;
-    }
-
-    /* Voice box tweaks */
-    audio, .gr-audio-box {
-        background-color: #000 !important;
-        color: white !important;
-    }
-
-    /* Make dropdown scrollable */
-    .gr-dropdown {
-        max-height: 150px;
-        overflow-y: auto;
-    }
+body {
+    background-color: #111 !important;
+    font-family: 'Segoe UI', sans-serif !important;
+    margin: 0;
+    padding: 0;
+}
+
+.gr-block {
+    padding: 1rem;
+}
+
+.gr-chatbot {
+    border-radius: 10px;
+    border: 1px solid #333;
+    background-color: #1e1e1e !important;
+}
+
+.gr-chatbot-message {
+    background-color: #292929 !important;
+    color: #f1f1f1 !important;
+    border-radius: 10px;
+    margin-bottom: 5px;
+}
+
+textarea, input[type='text'] {
+    background-color: #222 !important;
+    color: #fff !important;
+    border-radius: 8px !important;
+    border: 1px solid #444 !important;
+    padding: 10px;
+}
+
+.gr-button {
+    background-color: #333 !important;
+    color: #fff !important;
+    border: 1px solid #444 !important;
+    border-radius: 8px;
+    padding: 8px 14px;
+    font-weight: bold;
+    transition: background-color 0.2s;
+}
+
+.gr-button:hover {
+    background-color: #555 !important;
+    cursor: pointer;
+}
+
+.gr-dropdown {
+    background-color: #222 !important;
+    color: #fff !important;
+    border-radius: 8px;
+    border: 1px solid #444;
+    padding: 8px;
+}
+
+h1, h2, h3, .gr-markdown {
+    color: #f1f1f1 !important;
+    text-align: center;
+}
+
+audio {
+    background-color: #000 !important;
+    border: 1px solid #333 !important;
+}
 """) as demo:
-    # ... same interface elements and event bindings as before ...
 
     state = gr.State([])
 
     gr.Markdown("# ✨ JAWERIA'SBOT 🤖")
-    gr.Markdown("<div style='text-align:center;'>Speak or type — your assistant listens and replies with text 💬</div>")
+    gr.Markdown("Speak or type — your assistant listens and replies with text and emojis 💬")
 
-    chatbot = gr.Chatbot(type="messages", height=350)
+    chatbot = gr.Chatbot(type="messages", height=400)
     chat_input = gr.Textbox(label="💬 Message", placeholder="Type or speak your message...")
 
     send_btn = gr.Button("Send 🚀")
@@ -130,8 +163,9 @@ with gr.Blocks(css="""
         save_btn = gr.Button("💾 Save")
         saved_dropdown = gr.Dropdown(label="📂 Load Saved", choices=list_saved_files())
         load_btn = gr.Button("📥 Load")
-        save_msg = gr.Markdown()
-        load_msg = gr.Markdown()
+
+    save_msg = gr.Markdown()
+    load_msg = gr.Markdown()
 
     # 🔗 Bind events
     send_btn.click(chat_with_groq, inputs=[chat_input, state], outputs=[chat_input, chatbot, state])