Update app.py

app.py

@@ -1,7 +1,6 @@
 import gradio as gr
 import os
 import requests
-import time
 
 css = """
 .gradio-container {
@@ -40,6 +39,15 @@ footer {
     color: #aaa;
     font-size: 0.85em;
 }
+.custom-dropdown {
+    background-color: #2a2a40;
+    border-radius: 8px;
+    padding: 10px;
+    cursor: pointer;
+}
+.custom-dropdown:hover {
+    background-color: #3a3a55;
+}
 """
 
 ACCESS_TOKEN = os.getenv("HF_TOKEN")
@@ -52,14 +60,11 @@ HEADERS = {
 
 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.
-""",
+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.
-""",
+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.
-"""
+You use formal, educational language."""
 }
 
 DESCRIPTIONS = {
@@ -69,7 +74,7 @@ DESCRIPTIONS = {
 }
 
 
-def respond(message, history, character, max_tokens, temperature, top_p):
+def respond(message, history, character):
     system_message = PROMPTS.get(character, "")
 
     messages = [{"role": "system", "content": system_message}]
@@ -83,54 +88,45 @@ def respond(message, history, character, max_tokens, temperature, top_p):
     payload = {
         "model": "mistralai/Mistral-Small-24B-Instruct-2501",
         "messages": messages,
-        "max_tokens": max_tokens,
-        "temperature": temperature,
-        "top_p": top_p,
+        "max_tokens": 512,
+        "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()
+        return content
     except Exception as e:
-        yield f"Error: {str(e)}"
+        return f"Error: {str(e)}"
 
 
 with gr.Blocks(css=css) as demo:
-    # Use HTML instead of Markdown for custom HTML header
-    gr.HTML("<h1>QClone <span class='badge'>PLUS</span></h1>")
+    gr.HTML("<h1>QClone <span class='badge'>Public</span></h1>")
 
     with gr.Row():
         with gr.Column():
-            def format_choice(choice):
+            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>"
-                return f"<div class='dropdown-label'>{choice} {badge}</div>{desc}"
+                label_html = f"<div class='dropdown-label'>{choice} {badge}</div>{desc}"
+
+                def make_click(c=choice):
+                    def click():
+                        return c
+                    return click
 
-            character = gr.Dropdown(
-                choices=list(PROMPTS.keys()),
-                value="Elon Ma (Official)",
-                label="Model",
-                info="Choose a personality",
-                interactive=True,
-            )
+                gr.HTML(
+                    f"<div class='custom-dropdown' id='{choice.replace(' ','_')}'>" + label_html + "</div>"
+                ).click(make_click(choice), outputs=character_state)
 
     chatbot = gr.ChatInterface(
-        lambda msg, hist, char, max_tokens, temp, top_p: respond(msg, hist, char, max_tokens, temp, top_p),
-        additional_inputs=[
-            character,
-            gr.Slider(minimum=100, maximum=2048, value=512, step=10, label="Max Tokens"),
-            gr.Slider(minimum=0.1, maximum=2.0, value=0.7, step=0.1, label="Temperature"),
-            gr.Slider(minimum=0.1, maximum=1.0, value=0.95, step=0.05, label="Top-P"),
-        ]
+        lambda msg, hist, char: respond(msg, hist, char),
+        additional_inputs=[character_state],
     )
 
-if __name__ == "__main__":
-    demo.launch()
+    demo.launch(share=True)