Update app.py

app.py

@@ -1,6 +1,7 @@
 import gradio as gr
 import os
 import requests
+import time
 
 css = """
 .gradio-container {
@@ -18,35 +19,33 @@ h1 {
 footer {
     visibility: hidden;
 }
-.dropdown-label {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
 .badge {
-    background-color: #ffd700;
-    color: black;
+    background-color: #3b82f6;
+    color: white;
     font-size: 0.75em;
     padding: 2px 6px;
     border-radius: 5px;
     margin-left: 8px;
 }
-.badge-community {
-    background-color: #3b82f6;
-    color: white;
+.badge-official {
+    background-color: #ffd700;
+    color: black;
 }
 .description {
     color: #aaa;
     font-size: 0.85em;
 }
-.custom-dropdown {
+select {
     background-color: #2a2a40;
-    border-radius: 8px;
+    color: white;
     padding: 10px;
-    cursor: pointer;
+    border-radius: 8px;
+    border: 1px solid #444;
+    width: 100%;
 }
-.custom-dropdown:hover {
-    background-color: #3a3a55;
+option {
+    background-color: #2a2a40;
+    color: white;
 }
 """
 
@@ -67,12 +66,6 @@ You type like you're on TikTok, casually roasting the user.""",
 You use formal, educational language."""
 }
 
-DESCRIPTIONS = {
-    "Elon Ma (Official)": "Broken English salesman (Official)",
-    "Cole (Community)": "Gen Z slang troll (Community)",
-    "Mr. Shortreed (Official)": "Serious teacher vibes (Official)",
-}
-
 
 def respond(message, history, character):
     system_message = PROMPTS.get(character, "")
@@ -97,9 +90,15 @@ def respond(message, history, character):
         response = requests.post(API_URL, headers=HEADERS, json=payload)
         response.raise_for_status()
         content = response.json()["choices"][0]["message"]["content"]
-        return content
+
+        # Streaming effect
+        stream_response = ""
+        for token in content.split():
+            stream_response += token + " "
+            time.sleep(0.02)
+            yield stream_response.strip()
     except Exception as e:
-        return f"Error: {str(e)}"
+        yield f"Error: {str(e)}"
 
 
 with gr.Blocks(css=css) as demo:
@@ -108,25 +107,28 @@ with gr.Blocks(css=css) as demo:
     with gr.Row():
         with gr.Column():
             gr.HTML("<div style='margin-bottom:10px;'>Select Model</div>")
-            character_state = gr.State("Elon Ma (Official)")
-
-            for choice in PROMPTS.keys():
-                badge = "<span class='badge'>Official</span>" if "Official" in choice else "<span class='badge badge-community'>Community</span>"
-                desc = f"<div class='description'>{DESCRIPTIONS[choice]}</div>"
-                label_html = f"<div class='dropdown-label'>{choice} {badge}</div>{desc}"
-
-                def make_click(c=choice):
-                    def click():
-                        return c
-                    return click
-
-                gr.HTML(
-                    f"<div class='custom-dropdown' id='{choice.replace(' ','_')}'>" + label_html + "</div>"
-                ).click(make_click(choice), outputs=character_state)
+            character = gr.Dropdown(
+                choices=[
+                    "Elon Ma (Official) 🟡 - Broken English salesman",
+                    "Cole (Community) 🔵 - Gen Z slang troll",
+                    "Mr. Shortreed (Official) 🟡 - Serious teacher vibes"
+                ],
+                value="Elon Ma (Official) 🟡 - Broken English salesman",
+                label="Model"
+            )
+
+    def clean_choice(choice):
+        if "Elon" in choice:
+            return "Elon Ma (Official)"
+        if "Cole" in choice:
+            return "Cole (Community)"
+        if "Shortreed" in choice:
+            return "Mr. Shortreed (Official)"
+        return "Elon Ma (Official)"
 
     chatbot = gr.ChatInterface(
-        lambda msg, hist, char: respond(msg, hist, char),
-        additional_inputs=[character_state],
+        lambda msg, hist, char: respond(msg, hist, clean_choice(char)),
+        additional_inputs=[character],
     )
 
     demo.launch(share=True)