Update app.py

app.py

@@ -2,191 +2,26 @@ import os
 import requests
 import gradio as gr
 
-# -----------------------------
-# Hugging Face Router (OpenAI-compatible)
-# -----------------------------
-HF_API_KEY = os.environ.get("HF_API_KEY")
-if not HF_API_KEY:
-    raise RuntimeError("HF_API_KEY is not set in Space variables")
-
 BASE_URL = "https://router.huggingface.co/v1"
-HEADERS = {
-    "Authorization": f"Bearer {HF_API_KEY}",
-    "Content-Type": "application/json",
-}
-
-def get_first_model():
-    r = requests.get(f"{BASE_URL}/models", headers=HEADERS, timeout=30)
-    if r.status_code != 200:
-        raise RuntimeError(f"Cannot list models. HTTP {r.status_code}: {r.text}")
-    data = r.json()
-    models = data.get("data", [])
-    if not models:
-        raise RuntimeError("No models returned for your account. Enable an Inference Provider in HF settings.")
-    return models[0]["id"]
-
-MODEL = get_first_model()
-
-def call_model(messages):
-    payload = {
-        "model": MODEL,
-        "messages": messages,
-        "temperature": 0.7,
-        "max_tokens": 250,
-    }
-    r = requests.post(f"{BASE_URL}/chat/completions", headers=HEADERS, json=payload, timeout=60)
-    if r.status_code != 200:
-        return f"HTTP {r.status_code}: {r.text}"
-    data = r.json()
-    return data["choices"][0]["message"]["content"]
-
-
-# -----------------------------
-# UI + Chat logic
-# -----------------------------
-def respond(user_msg, history):
-    history = history or []
-    # Convert Gradio history (list of [user, bot]) -> OpenAI-style messages
-    messages = [{"role": "system", "content": "You are a helpful assistant. Keep answers concise unless asked otherwise."}]
-    for u, b in history:
-        messages.append({"role": "user", "content": u})
-        messages.append({"role": "assistant", "content": b})
-
-    messages.append({"role": "user", "content": user_msg})
-    bot_msg = call_model(messages)
-
-    history.append([user_msg, bot_msg])
-    return "", history
-
 
-# -----------------------------
-# Modern CSS + theme toggle (light/dark)
-# -----------------------------
 CSS = """
-:root{
-  --bg: #0b0f19;
-  --panel: rgba(255,255,255,0.06);
-  --panel-2: rgba(255,255,255,0.08);
-  --text: rgba(255,255,255,0.92);
-  --muted: rgba(255,255,255,0.68);
-  --border: rgba(255,255,255,0.12);
-  --accent: #7c3aed; /* purple */
-  --shadow: 0 10px 30px rgba(0,0,0,0.35);
-}
-
-body.light{
-  --bg: #f6f7fb;
-  --panel: rgba(0,0,0,0.04);
-  --panel-2: rgba(0,0,0,0.06);
-  --text: rgba(0,0,0,0.88);
-  --muted: rgba(0,0,0,0.60);
-  --border: rgba(0,0,0,0.10);
-  --accent: #2563eb; /* blue */
-  --shadow: 0 10px 30px rgba(0,0,0,0.10);
-}
-
-.gradio-container{
-  background: var(--bg) !important;
-  color: var(--text) !important;
-}
-
-#app_wrap{
-  max-width: 980px;
-  margin: 0 auto;
-}
-
-.card{
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: 18px;
-  box-shadow: var(--shadow);
-}
-
-.header{
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 18px 18px 10px 18px;
-}
-
-.title{
-  font-size: 22px;
-  font-weight: 700;
-  letter-spacing: 0.2px;
-}
-
-.subtitle{
-  font-size: 13px;
-  color: var(--muted);
-  margin-top: 4px;
-}
-
-.badge{
-  padding: 6px 10px;
-  border-radius: 999px;
-  background: var(--panel-2);
-  border: 1px solid var(--border);
-  color: var(--muted);
-  font-size: 12px;
-  white-space: nowrap;
-}
-
-/* Chat area */
-#chat{
-  border-top: 1px solid var(--border);
-  padding: 14px 14px 0 14px;
-}
-
-#chat .wrap{
-  border-radius: 16px;
-}
-
-/* Input row */
-#input_row{
-  display: flex;
-  gap: 10px;
-  padding: 14px;
-  border-top: 1px solid var(--border);
-}
-
-#input_row textarea, #input_row input{
-  background: var(--panel-2) !important;
-  border: 1px solid var(--border) !important;
-  color: var(--text) !important;
-  border-radius: 14px !important;
-}
-
-button.primary{
-  background: var(--accent) !important;
-  border: none !important;
-  color: white !important;
-  border-radius: 14px !important;
-}
-
-button.secondary{
-  background: var(--panel-2) !important;
-  border: 1px solid var(--border) !important;
-  color: var(--text) !important;
-  border-radius: 14px !important;
-}
-
-/* Toggle */
-.toggle{
-  display:flex;
-  align-items:center;
-  gap:10px;
-  user-select:none;
-}
-
-.toggle input{
-  width: 44px;
-  height: 24px;
-}
+:root{--bg:#0b0f19;--panel:rgba(255,255,255,0.06);--panel2:rgba(255,255,255,0.08);--text:rgba(255,255,255,0.92);--muted:rgba(255,255,255,0.68);--border:rgba(255,255,255,0.12);--accent:#7c3aed;}
+body.light{--bg:#f6f7fb;--panel:rgba(0,0,0,0.04);--panel2:rgba(0,0,0,0.06);--text:rgba(0,0,0,0.88);--muted:rgba(0,0,0,0.60);--border:rgba(0,0,0,0.10);--accent:#2563eb;}
+.gradio-container{background:var(--bg)!important;color:var(--text)!important;}
+#wrap{max-width:980px;margin:0 auto;}
+.card{background:var(--panel);border:1px solid var(--border);border-radius:18px;}
+.header{display:flex;justify-content:space-between;align-items:center;padding:18px 18px 10px;}
+.title{font-size:22px;font-weight:700;}
+.subtitle{font-size:13px;color:var(--muted);margin-top:4px;}
+.badge{padding:6px 10px;border-radius:999px;background:var(--panel2);border:1px solid var(--border);color:var(--muted);font-size:12px;white-space:nowrap;}
+#inputrow{display:flex;gap:10px;padding:14px;border-top:1px solid var(--border);}
+#inputrow textarea{background:var(--panel2)!important;border:1px solid var(--border)!important;color:var(--text)!important;border-radius:14px!important;}
+button.primary{background:var(--accent)!important;border:none!important;color:white!important;border-radius:14px!important;}
+button.secondary{background:var(--panel2)!important;border:1px solid var(--border)!important;color:var(--text)!important;border-radius:14px!important;}
 """
 
 THEME_TOGGLE_HTML = """
-<div class="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>
@@ -194,58 +29,96 @@ THEME_TOGGLE_HTML = """
     <span style="color:var(--muted); font-size:13px;">Dark</span>
   </label>
 </div>
-
 <script>
-  // default to dark unless user saved preference
   const saved = localStorage.getItem("theme") || "dark";
   if (saved === "light") document.body.classList.add("light");
-  const toggle = document.getElementById("themeToggle");
-  // checked = dark
-  toggle.checked = (saved !== "light");
-
-  toggle.addEventListener("change", () => {
-    if (toggle.checked) {
-      document.body.classList.remove("light");
-      localStorage.setItem("theme", "dark");
-    } else {
-      document.body.classList.add("light");
-      localStorage.setItem("theme", "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>
 """
 
+def get_headers():
+    key = os.environ.get("HF_API_KEY")
+    if not key:
+        return None, "HF_API_KEY is missing. Go to Space Settings → Variables and add HF_API_KEY, then restart/build."
+    return {
+        "Authorization": f"Bearer {key}",
+        "Content-Type": "application/json",
+    }, None
+
+def list_models(headers):
+    r = requests.get(f"{BASE_URL}/models", headers=headers, timeout=30)
+    if r.status_code != 200:
+        return None, f"Cannot list models. HTTP {r.status_code}: {r.text}"
+    data = r.json()
+    models = data.get("data", [])
+    if not models:
+        return None, "No models returned for your account. You likely need to enable an Inference Provider in HF settings."
+    return [m["id"] for m in models if "id" in m], None
+
+def chat_call(headers, model, history, user_msg):
+    messages = [{"role": "system", "content": "You are a helpful assistant. Keep answers concise unless asked otherwise."}]
+    for u, b in history:
+        messages.append({"role": "user", "content": u})
+        messages.append({"role": "assistant", "content": b})
+    messages.append({"role": "user", "content": user_msg})
+
+    payload = {"model": model, "messages": messages, "temperature": 0.7, "max_tokens": 250}
+    r = requests.post(f"{BASE_URL}/chat/completions", headers=headers, json=payload, timeout=60)
+    if r.status_code != 200:
+        return f"HTTP {r.status_code}: {r.text}"
+    data = r.json()
+    return data["choices"][0]["message"]["content"]
+
 with gr.Blocks(css=CSS, title="My AI Chatbot") as demo:
-    with gr.Column(elem_id="app_wrap"):
+    with gr.Column(elem_id="wrap"):
         with gr.Group(elem_classes=["card"]):
             with gr.Row(elem_classes=["header"]):
                 with gr.Column(scale=3):
-                    gr.Markdown(f"""
-<div class="title">My AI Chatbot</div>
-<div class="subtitle">Modern UI • Light/Dark mode toggle • Running model: <span class="badge">{MODEL}</span></div>
-""")
+                    title = gr.Markdown("<div class='title'>My AI Chatbot</div><div class='subtitle'>Modern UI • Light/Dark mode toggle</div>")
                 gr.HTML(THEME_TOGGLE_HTML)
 
-            chatbot = gr.Chatbot(
-                elem_id="chat",
-                height=520,
-                show_copy_button=True,
-                bubble_full_width=False,
-            )
-
-            with gr.Row(elem_id="input_row"):
-                msg = gr.Textbox(
-                    placeholder="Type a message…",
-                    show_label=False,
-                    container=False,
-                    scale=8,
-                )
+            status = gr.Markdown("")  # shows key/model errors without crashing
+            model_dd = gr.Dropdown(label="Model", choices=[], value=None, interactive=True)
+
+            chatbot = gr.Chatbot(height=520, show_copy_button=True, bubble_full_width=False)
+
+            with gr.Row(elem_id="inputrow"):
+                msg = gr.Textbox(placeholder="Type a message…", show_label=False, container=False, scale=8)
                 send = gr.Button("Send", variant="primary", elem_classes=["primary"], scale=2)
                 clear = gr.Button("Clear", variant="secondary", elem_classes=["secondary"], scale=2)
 
-    # Wire events
-    send.click(respond, inputs=[msg, chatbot], outputs=[msg, chatbot])
-    msg.submit(respond, inputs=[msg, chatbot], outputs=[msg, chatbot])
+    def init():
+        headers, err = get_headers()
+        if err:
+            return gr.update(value=f"**Setup error:** {err}"), gr.update(choices=[], value=None)
+
+        models, err = list_models(headers)
+        if err:
+            return gr.update(value=f"**Provider error:** {err}"), gr.update(choices=[], value=None)
+
+        default_model = models[0]
+        return gr.update(value=f"**Ready.** Using model: `{default_model}`"), gr.update(choices=models, value=default_model)
+
+    def respond(user_msg, history, model):
+        headers, err = get_headers()
+        if err:
+            history = history or []
+            history.append([user_msg, f"Setup error: {err}"])
+            return "", history
+
+        history = history or []
+        bot = chat_call(headers, model, history, user_msg)
+        history.append([user_msg, bot])
+        return "", history
+
+    demo.load(init, inputs=None, outputs=[status, model_dd])
+    send.click(respond, inputs=[msg, chatbot, model_dd], outputs=[msg, chatbot])
+    msg.submit(respond, inputs=[msg, chatbot, model_dd], outputs=[msg, chatbot])
     clear.click(lambda: [], outputs=chatbot)
 
 demo.launch()