Update app.py

app.py

@@ -7,88 +7,91 @@ BASE_URL = "https://router.huggingface.co/v1"
 def get_headers():
     key = os.environ.get("HF_API_KEY")
     if not key:
-        return None, "HF_API_KEY missing (Settings → Variables)"
-    return {
-        "Authorization": f"Bearer {key}",
-        "Content-Type": "application/json",
-    }, None
-
-def list_models(headers):
-    r = requests.get(f"{BASE_URL}/models", headers=headers, timeout=20)
-    if r.status_code != 200:
-        return None, f"HTTP {r.status_code}: {r.text}"
+        raise RuntimeError("HF_API_KEY missing (Space Settings → Variables)")
+    return {"Authorization": f"Bearer {key}", "Content-Type": "application/json"}
+
+HEADERS = get_headers()
+
+def list_models():
+    r = requests.get(f"{BASE_URL}/models", headers=HEADERS, timeout=20)
+    r.raise_for_status()
     data = r.json()
     models = [m.get("id") for m in data.get("data", []) if m.get("id")]
     if not models:
-        return None, "No models available for this account"
-    return models, None
+        raise RuntimeError("No models available for this account (enable a provider in HF settings)")
+    return models
 
-def call_model(headers, model, history, user_msg):
-    messages = [{"role": "system", "content": "You are a helpful assistant."}]
-    for u, b in history:
-        messages.append({"role": "user", "content": u})
-        messages.append({"role": "assistant", "content": b})
-    messages.append({"role": "user", "content": user_msg})
+MODELS = list_models()
+DEFAULT_MODEL = MODELS[0]
 
+def chat_call(model, messages):
     r = requests.post(
         f"{BASE_URL}/chat/completions",
-        headers=headers,
-        json={
-            "model": model,
-            "messages": messages,
-            "temperature": 0.7,
-            "max_tokens": 200,
-        },
+        headers=HEADERS,
+        json={"model": model, "messages": messages, "temperature": 0.7, "max_tokens": 200},
         timeout=60,
     )
-
     if r.status_code != 200:
         return f"HTTP {r.status_code}: {r.text}"
-
     return r.json()["choices"][0]["message"]["content"]
 
-with gr.Blocks(title="My AI Chatbot") as demo:
-    status = gr.Markdown("Starting…")
-    model_dd = gr.Dropdown(label="Model", choices=[], interactive=True)
-
-    # FORCE tuple mode (prevents the “messages format” error)
-    chat = gr.Chatbot(type="tuples", height=520)
-
-    msg = gr.Textbox(placeholder="Type a message…", show_label=False)
-    send = gr.Button("Send")
-    clear = gr.Button("Clear")
-
-    def init():
-        headers, err = get_headers()
-        if err:
-            return f"❌ {err}", gr.update(choices=[], value=None)
-
-        models, err = list_models(headers)
-        if err:
-            return f"❌ {err}", gr.update(choices=[], value=None)
-
-        default_model = models[0]
-        return f"✅ Ready (model: `{default_model}`)", gr.update(choices=models, value=default_model)
-
-    def respond(user_msg, history, model):
+CSS = """
+:root{--bg:#0b0f19;--panel:rgba(255,255,255,.06);--panel2:rgba(255,255,255,.09);--text:rgba(255,255,255,.92);--muted:rgba(255,255,255,.65);--border:rgba(255,255,255,.12);--accent:#7c3aed;}
+body.light{--bg:#f6f7fb;--panel:rgba(0,0,0,.04);--panel2:rgba(0,0,0,.06);--text:rgba(0,0,0,.88);--muted:rgba(0,0,0,.60);--border:rgba(0,0,0,.10);--accent:#2563eb;}
+.gradio-container{background:var(--bg)!important;color:var(--text)!important;}
+.card{background:var(--panel);border:1px solid var(--border);border-radius:18px;}
+"""
+
+TOGGLE = """
+<div style="display:flex;align-items:center;gap:10px;user-select:none;">
+  <span style="color:var(--muted);font-size:13px;">Theme</span>
+  <label style="display:flex;align-items:center;gap:10px;">
+    <span style="color:var(--muted);font-size:13px;">Light</span>
+    <input id="themeToggle" type="checkbox"/>
+    <span style="color:var(--muted);font-size:13px;">Dark</span>
+  </label>
+</div>
+<script>
+  const saved = localStorage.getItem("theme") || "dark";
+  if(saved==="light") document.body.classList.add("light");
+  const t=document.getElementById("themeToggle");
+  t.checked=(saved!=="light");
+  t.addEventListener("change",()=>{
+    if(t.checked){document.body.classList.remove("light");localStorage.setItem("theme","dark");}
+    else{document.body.classList.add("light");localStorage.setItem("theme","light");}
+  });
+</script>
+"""
+
+with gr.Blocks(css=CSS, title="My AI Chatbot") as demo:
+    with gr.Column():
+        with gr.Group(elem_classes=["card"]):
+            with gr.Row():
+                gr.Markdown(f"## My AI Chatbot\nModel: `{DEFAULT_MODEL}`")
+                gr.HTML(TOGGLE)
+
+            model = gr.Dropdown(choices=MODELS, value=DEFAULT_MODEL, label="Model")
+
+            chatbot = gr.Chatbot(type="messages", height=520, show_copy_button=True)
+
+            msg = gr.Textbox(placeholder="Type a message…", show_label=False)
+            send = gr.Button("Send")
+            clear = gr.Button("Clear")
+
+    def respond(user_msg, history, model_name):
         history = history or []
+        messages = [{"role": "system", "content": "You are a helpful assistant."}]
+        messages.extend(history)
+        messages.append({"role": "user", "content": user_msg})
 
-        headers, err = get_headers()
-        if err:
-            history.append((user_msg, err))
-            return "", history
-
-        if not model:
-            models, _ = list_models(headers)
-            model = models[0]
+        bot = chat_call(model_name, messages)
 
-        bot = call_model(headers, model, history, user_msg)
-        history.append((user_msg, bot))
+        history.append({"role": "user", "content": user_msg})
+        history.append({"role": "assistant", "content": bot})
         return "", history
 
-    demo.load(init, outputs=[status, model_dd])
-    send.click(respond, inputs=[msg, chat, model_dd], outputs=[msg, chat])
-    msg.submit(respond, inputs=[msg, chat, model_dd], outputs=[msg, chat])
-    clear.click(lambda: [], outputs=chat)
+    send.click(respond, [msg, chatbot, model], [msg, chatbot])
+    msg.submit(respond, [msg, chatbot, model], [msg, chatbot])
+    clear.click(lambda: [], outputs=chatbot)
 
 demo.launch()