Update app.py

app.py

@@ -4,9 +4,42 @@ import requests
 import time
 
 css = """
-.gradio-container { max-width: 1000px !important }
-h1 { text-align: center }
-footer { visibility: hidden }
+.gradio-container {
+    background-color: #1e1e2f;
+    color: white;
+    max-width: 800px !important;
+    margin: auto;
+    padding-top: 50px;
+}
+h1 {
+    text-align: center;
+    font-size: 2em;
+    margin-bottom: 20px;
+}
+footer {
+    visibility: hidden;
+}
+.dropdown-label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.badge {
+    background-color: #ffd700;
+    color: black;
+    font-size: 0.75em;
+    padding: 2px 6px;
+    border-radius: 5px;
+    margin-left: 8px;
+}
+.badge-community {
+    background-color: #3b82f6;
+    color: white;
+}
+.description {
+    color: #aaa;
+    font-size: 0.85em;
+}
 """
 
 ACCESS_TOKEN = os.getenv("HF_TOKEN")
@@ -17,29 +50,34 @@ HEADERS = {
     "Authorization": f"Bearer {ACCESS_TOKEN}",
 }
 
-SYSTEM_PROMPT = """From now on respond as a sale man for a car that is a ripoff of a tesla called an edision model s, Respond in broken english
-
-The company is Edision Motors and you never mention tesla and the car is made of cardborard and ducktape but you dont mention it
-
-When you understand say "Ready"
+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.
+"""
+}
 
-Your name is Elon Ma and your Chinese
+DESCRIPTIONS = {
+    "Elon Ma (Official)": "Broken English salesman (Official)",
+    "Cole (Community)": "Gen Z slang troll (Community)",
+    "Mr. Shortreed (Official)": "Serious teacher vibes (Official)",
+}
 
-There is also evil donald ducks and mr long reeds trying to vandlize the cars calling them nazi cars or "sawasticars".
-"""
 
-def respond(message, history, system_message, max_tokens, temperature, top_p):
-    # Always enforce SYSTEM_PROMPT
-    system_message = SYSTEM_PROMPT
+def respond(message, history, character, max_tokens, temperature, top_p):
+    system_message = PROMPTS.get(character, "")
 
     messages = [{"role": "system", "content": system_message}]
-
     for user_msg, bot_msg in history:
         if user_msg:
             messages.append({"role": "user", "content": user_msg})
         if bot_msg:
             messages.append({"role": "assistant", "content": bot_msg})
-
     messages.append({"role": "user", "content": message})
 
     payload = {
@@ -53,10 +91,9 @@ def respond(message, history, system_message, max_tokens, temperature, top_p):
     try:
         response = requests.post(API_URL, headers=HEADERS, json=payload)
         response.raise_for_status()
-        data = response.json()
-        content = data["choices"][0]["message"]["content"]
+        content = response.json()["choices"][0]["message"]["content"]
 
-        # Optional: simulate streaming effect
+        # Streaming effect
         stream_response = ""
         for token in content.split():
             stream_response += token + " "
@@ -65,16 +102,34 @@ def respond(message, history, system_message, max_tokens, temperature, top_p):
     except Exception as e:
         yield f"Error: {str(e)}"
 
-demo = gr.ChatInterface(
-    respond,
-    additional_inputs=[
-        gr.Textbox(value="", label="System message (Ignored, hardcoded)"),
-        gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens"),
-        gr.Slider(minimum=0.1, maximum=4.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"),
-    ],
-    css=css
-)
+
+with gr.Blocks(css=css) as demo:
+    gr.Markdown("# QClone <span class='badge'>PLUS</span>", elem_id="header", unsafe_allow_html=True)
+
+    with gr.Row():
+        with gr.Column():
+            def format_choice(choice):
+                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}"
+
+            character = gr.Dropdown(
+                choices=list(PROMPTS.keys()),
+                value="Elon Ma (Official)",
+                label="Model",
+                info="Choose a personality",
+                interactive=True,
+            )
+
+    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"),
+        ]
+    )
 
 if __name__ == "__main__":
     demo.launch()