Update app.py

app.py

@@ -19,22 +19,6 @@ h1 {
 footer {
     visibility: hidden;
 }
-.badge {
-    background-color: #3b82f6;
-    color: white;
-    font-size: 0.75em;
-    padding: 2px 6px;
-    border-radius: 5px;
-    margin-left: 8px;
-}
-.badge-official {
-    background-color: #ffd700;
-    color: black;
-}
-.description {
-    color: #aaa;
-    font-size: 0.85em;
-}
 select {
     background-color: #2a2a40;
     color: white;
@@ -57,19 +41,24 @@ HEADERS = {
     "Authorization": f"Bearer {ACCESS_TOKEN}",
 }
 
+# Define our system prompts
 PROMPTS = {
-    "Elon Ma (Official)": """You are Elon Ma, a Chinese car salesman selling the Edision Model S.
-Respond in broken English, overhyping the car, never mentioning Tesla.""",
-    "Cole (Community)": """You are Cole, a Gen Z troll who sells Edision Model S cars.
-You type like you're on TikTok, casually roasting the user.""",
-    "Mr. Shortreed (Official)": """You are Mr. Shortreed, a serious teacher explaining the Edision Model S.
-You use formal, educational language."""
+    "Elon Ma (Official)": (
+        "You are Elon Ma, a Chinese car salesman selling the Edision Model S.\n"
+        "Respond in broken English, overhyping the car, never mentioning Tesla."
+    ),
+    "Cole (Community)": (
+        "You are Cole, a Gen Z troll who sells Edision Model S cars.\n"
+        "You type like you're on TikTok, casually roasting the user."
+    ),
+    "Mr. Shortreed (Official)": (
+        "You are Mr. Shortreed, a serious teacher explaining the Edision Model S.\n"
+        "You use formal, educational language."
+    )
 }
 
-
 def respond(message, history, character):
     system_message = PROMPTS.get(character, "")
-
     messages = [{"role": "system", "content": system_message}]
     for user_msg, bot_msg in history:
         if user_msg:
@@ -77,7 +66,7 @@ def respond(message, history, character):
         if bot_msg:
             messages.append({"role": "assistant", "content": bot_msg})
     messages.append({"role": "user", "content": message})
-
+    
     payload = {
         "model": "mistralai/Mistral-Small-24B-Instruct-2501",
         "messages": messages,
@@ -85,28 +74,29 @@ def respond(message, history, character):
         "temperature": 0.7,
         "top_p": 0.95,
     }
-
+    
     try:
         response = requests.post(API_URL, headers=HEADERS, json=payload)
         response.raise_for_status()
         content = response.json()["choices"][0]["message"]["content"]
 
-        # Streaming effect
         stream_response = ""
         for token in content.split():
             stream_response += token + " "
             time.sleep(0.02)
-            yield stream_response.strip()
+            # Yield a dictionary so that ChatInterface's streaming works correctly
+            yield {"role": "assistant", "content": stream_response.strip()}
     except Exception as e:
-        yield f"Error: {str(e)}"
-
+        yield {"role": "assistant", "content": f"Error: {str(e)}"}
 
 with gr.Blocks(css=css) as demo:
-    gr.HTML("<h1>QClone <span class='badge'>Public</span></h1>")
-
+    # Header with QClone Public label
+    gr.HTML("<h1>QClone <span style='background-color:#3b82f6;color:white;font-size:0.75em;padding:2px 6px;border-radius:5px;margin-left:8px;'>Public</span></h1>")
+    
+    # Create a dropdown with rich labels in the text.
+    # The dropdown options include emojis and descriptions.
     with gr.Row():
         with gr.Column():
-            gr.HTML("<div style='margin-bottom:10px;'>Select Model</div>")
             character = gr.Dropdown(
                 choices=[
                     "Elon Ma (Official) 🟡 - Broken English salesman",
@@ -116,7 +106,8 @@ with gr.Blocks(css=css) as demo:
                 value="Elon Ma (Official) 🟡 - Broken English salesman",
                 label="Model"
             )
-
+    
+    # Helper function to extract the clean key for our prompts.
     def clean_choice(choice):
         if "Elon" in choice:
             return "Elon Ma (Official)"
@@ -125,10 +116,12 @@ with gr.Blocks(css=css) as demo:
         if "Shortreed" in choice:
             return "Mr. Shortreed (Official)"
         return "Elon Ma (Official)"
-
+    
+    # ChatInterface with streaming enabled
     chatbot = gr.ChatInterface(
         lambda msg, hist, char: respond(msg, hist, clean_choice(char)),
         additional_inputs=[character],
+        type="messages"  # use openai-style message format
     )
-
+    
     demo.launch(share=True)