Update app.py

app.py

@@ -2,6 +2,9 @@ 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")
@@ -24,25 +27,225 @@ def get_first_model():
 
 MODEL = get_first_model()
 
-def chat(message):
+def call_model(messages):
     payload = {
         "model": MODEL,
-        "messages": [{"role": "user", "content": message}],
+        "messages": messages,
         "temperature": 0.7,
-        "max_tokens": 200,
+        "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"]
 
-demo = gr.Interface(
-    fn=chat,
-    inputs=gr.Textbox(label=f"You (model: {MODEL})"),
-    outputs=gr.Textbox(label="Bot"),
-    title="My AI Chatbot",
-)
+
+# -----------------------------
+# 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;
+}
+"""
+
+THEME_TOGGLE_HTML = """
+<div class="toggle">
+  <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>
+  // 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");
+    }
+  });
+</script>
+"""
+
+with gr.Blocks(css=CSS, title="My AI Chatbot") as demo:
+    with gr.Column(elem_id="app_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>
+""")
+                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,
+                )
+                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])
+    clear.click(lambda: [], outputs=chatbot)
+
 demo.launch()