Update app.py

app.py

@@ -4,9 +4,6 @@ import gradio as gr
 
 BASE_URL = "https://router.huggingface.co/v1"
 
-# ----------------------------
-# ChatGPT-like UI + theme
-# ----------------------------
 CSS = """
 :root{
   --bg:#0b0f19;
@@ -17,7 +14,6 @@ CSS = """
   --border:rgba(255,255,255,.10);
   --shadow: 0 20px 60px rgba(0,0,0,.45);
 }
-
 body.light{
   --bg:#f6f7fb;
   --panel:rgba(0,0,0,.04);
@@ -27,70 +23,36 @@ body.light{
   --border:rgba(0,0,0,.10);
   --shadow: 0 20px 60px rgba(0,0,0,.12);
 }
-
 .gradio-container{
   background: radial-gradient(1200px 700px at 20% 10%, rgba(98, 123, 255, .22), transparent 60%),
               radial-gradient(1000px 700px at 80% 30%, rgba(255, 90, 150, .18), transparent 60%),
               var(--bg) !important;
   color: var(--text) !important;
 }
-
-#wrap{
-  max-width: 980px;
-  margin: 22px auto;
-  padding: 0 14px;
-}
-
+#wrap{ max-width: 980px; margin: 22px auto; padding: 0 14px; }
 .header{
-  display:flex;
-  justify-content:space-between;
-  align-items:center;
-  padding: 18px 14px;
-  border: 1px solid var(--border);
-  border-radius: 18px;
-  background: var(--panel);
-  box-shadow: var(--shadow);
+  display:flex; justify-content:space-between; align-items:center;
+  padding: 18px 14px; border: 1px solid var(--border);
+  border-radius: 18px; background: var(--panel); box-shadow: var(--shadow);
 }
-
 .block{
-  border: 1px solid var(--border);
-  border-radius: 18px;
-  background: var(--panel);
-  box-shadow: var(--shadow);
-  padding: 14px;
-  margin-top: 14px;
+  border: 1px solid var(--border); border-radius: 18px;
+  background: var(--panel); box-shadow: var(--shadow);
+  padding: 14px; margin-top: 14px;
 }
-
 .subtle{ color: var(--muted); }
-
 .chat_shell{
-  border: 1px solid var(--border);
-  border-radius: 18px;
-  background: var(--panel);
-  box-shadow: var(--shadow);
-  padding: 10px;
-  margin-top: 14px;
+  border: 1px solid var(--border); border-radius: 18px;
+  background: var(--panel); box-shadow: var(--shadow);
+  padding: 10px; margin-top: 14px;
 }
-
-.composer{
-  margin-top: 10px;
-}
-
+.composer{ margin-top: 10px; }
 .primary button, .secondary button{
   border-radius: 14px !important;
   border: 1px solid var(--border) !important;
 }
-
-.primary button{
-  background: rgba(98, 123, 255, .85) !important;
-  color: white !important;
-}
-
-.secondary button{
-  background: var(--panel2) !important;
-  color: var(--text) !important;
-}
-
+.primary button{ background: rgba(98, 123, 255, .85) !important; color: white !important; }
+.secondary button{ background: var(--panel2) !important; color: var(--text) !important; }
 footer{ display:none !important; }
 """
 
@@ -167,16 +129,12 @@ def chat_call(headers, model, messages, temperature, max_tokens):
 # ----------------------------
 # Message utilities
 # ----------------------------
-MAX_TURNS = 14  # keep last N user+assistant pairs in history
+MAX_TURNS = 14  # last N user+assistant pairs
 
 def trimmed_messages(msgs):
-    """Trim to last MAX_TURNS pairs (2 messages each)."""
-    if not msgs:
-        return []
-    return msgs[-MAX_TURNS * 2 :]
+    return (msgs or [])[-MAX_TURNS * 2 :]
 
 def build_messages(system_prompt, msgs, user_msg):
-    """Build request payload messages (system + recent turns + new user)."""
     return (
         [{"role": "system", "content": system_prompt}]
         + trimmed_messages(msgs)
@@ -184,11 +142,8 @@ def build_messages(system_prompt, msgs, user_msg):
     )
 
 def ui_messages_from_state(msgs):
-    """
-    Chatbot(type="messages") expects:
-      [{"role":"user"/"assistant", "content":"..."}, ...]
-    We hide "system" from the UI.
-    """
+    # Chatbot (messages format) expects list of dicts with role/content.
+    # Hide system messages from UI.
     out = []
     for m in msgs or []:
         role = m.get("role")
@@ -220,7 +175,7 @@ with gr.Blocks(title="Chat") as demo:
 
             model_override = gr.Textbox(
                 label="Model override (optional)",
-                placeholder="Paste a chat-capable model id here (takes precedence over dropdown).",
+                placeholder="Paste a chat-capable model id here (takes precedence).",
             )
 
             system_prompt = gr.Textbox(label="System prompt", value="You are a helpful assistant.")
@@ -229,10 +184,10 @@ with gr.Blocks(title="Chat") as demo:
                 max_tokens = gr.Slider(64, 2048, value=800, step=32, label="Max tokens")
 
         with gr.Column(elem_classes=["chat_shell"]):
-            chatbot = gr.Chatbot(height=560, type="messages")
+            # IMPORTANT: no type=... (your Gradio build doesn't support it)
+            chatbot = gr.Chatbot(height=560)
 
-        # Internal message state (OpenAI-style dict list)
-        msg_state = gr.State([])
+        msg_state = gr.State([])  # OpenAI-style list[dict]
 
         with gr.Column(elem_classes=["composer"]):
             msg = gr.Textbox(placeholder="Message…", show_label=False, lines=1)
@@ -249,7 +204,6 @@ with gr.Blocks(title="Chat") as demo:
         if err:
             return f"❌ {err}", gr.update(choices=[], value=None)
 
-        # Choose a default if available
         default = models[0] if models else None
         return f"✅ Models loaded ({len(models)}).", gr.update(choices=models, value=default)
 
@@ -260,7 +214,6 @@ with gr.Blocks(title="Chat") as demo:
         user_msg = (user_msg or "").strip()
         msgs = msgs or []
         if not user_msg:
-            # No-op; keep UI/state unchanged
             return "", ui_messages_from_state(msgs), msgs
 
         headers, err = get_headers()
@@ -306,5 +259,5 @@ with gr.Blocks(title="Chat") as demo:
     )
     clear.click(do_clear, outputs=[chatbot, msg_state])
 
-# Gradio 6.x: css can be passed to launch()
+# Keep this if your Gradio build supports css= on launch()
 demo.launch(css=CSS)