Update app.py

app.py

@@ -4,35 +4,185 @@ import gradio as gr
 
 BASE_URL = "https://router.huggingface.co/v1"
 
+# ----------------------------
+# ChatGPT-like CSS + theme vars
+# ----------------------------
 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;padding:16px;}
-button.primary{background:var(--accent)!important;border:none!important;color:white!important;}
+: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;
+
+  --bubble-user: rgba(124,58,237,.18);
+  --bubble-assistant: rgba(255,255,255,.06);
+  --input-bg: rgba(255,255,255,.06);
+}
+
+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;
+
+  --bubble-user: rgba(37,99,235,.12);
+  --bubble-assistant: rgba(0,0,0,.04);
+  --input-bg: rgba(0,0,0,.04);
+}
+
+.gradio-container{
+  background: var(--bg) !important;
+  color: var(--text) !important;
+}
+
+/* Center the app like ChatGPT */
+#app_wrap{
+  max-width: 980px;
+  margin: 0 auto;
+  padding: 18px 14px 0 14px;
+}
+
+.header{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  gap: 12px;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  background: var(--panel);
+}
+
+.header h2{
+  margin: 0;
+  font-size: 18px;
+  font-weight: 650;
+}
+
+.subtle{
+  color: var(--muted);
+  font-size: 12px;
+}
+
+/* Settings area */
+.settings{
+  margin-top: 10px;
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  background: var(--panel);
+  padding: 12px;
+}
+
+/* Chat area wrapper */
+.chat_shell{
+  margin-top: 10px;
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  background: var(--panel);
+  overflow: hidden;
+}
+
+/* Make Chatbot look like bubbles */
+.chat_shell .wrap{
+  padding: 6px 6px 0 6px;
+}
+
+.chat_shell .message{
+  border-radius: 16px !important;
+  border: 1px solid var(--border) !important;
+  padding: 12px 12px !important;
+  margin: 8px 6px !important;
+  box-shadow: none !important;
+}
+
+/* assistant bubble */
+.chat_shell .message.bot{
+  background: var(--bubble-assistant) !important;
+}
+
+/* user bubble */
+.chat_shell .message.user{
+  background: var(--bubble-user) !important;
+}
+
+/* Composer like ChatGPT (sticky-ish) */
+.composer{
+  margin-top: 10px;
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  background: var(--panel);
+  padding: 10px;
+}
+
+.composer textarea, .composer input{
+  background: var(--input-bg) !important;
+  border: 1px solid var(--border) !important;
+  color: var(--text) !important;
+  border-radius: 14px !important;
+}
+
+/* Buttons */
+button.primary{
+  background: var(--accent) !important;
+  border: none !important;
+  color: white !important;
+  border-radius: 14px !important;
+}
+
+button.secondary{
+  background: transparent !important;
+  border: 1px solid var(--border) !important;
+  color: var(--text) !important;
+  border-radius: 14px !important;
+}
+
+/* Reduce Gradio default paddings */
+.gradio-container .prose{
+  max-width: 100% !important;
+}
+
+/* Hide the default footer */
+footer{ display:none !important; }
 """
 
 TOGGLE = """
 <div style="display:flex;align-items:center;gap:10px;user-select:none;">
-  <span style="color:var(--muted);font-size:13px;">Theme</span>
+  <span class="subtle">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>
+    <span class="subtle">Light</span>
+    <input id="themeToggle" type="checkbox" style="transform:scale(1.1);"/>
+    <span class="subtle">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");}
+
+  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>
 """
 
+# ----------------------------
+# API helpers
+# ----------------------------
 def get_headers():
     key = os.environ.get("HF_API_KEY")
     if not key:
@@ -49,75 +199,115 @@ def list_models(headers):
         return None, "No models available for this account"
     return models, None
 
-def chat_call(headers, model, messages):
+def chat_call(headers, model, messages, temperature=0.7, max_tokens=800):
     r = requests.post(
         f"{BASE_URL}/chat/completions",
         headers=headers,
-        json={"model": model, "messages": messages, "temperature": 0.7, "max_tokens": 220},
+        json={
+            "model": model,
+            "messages": messages,
+            "temperature": temperature,
+            "max_tokens": max_tokens,
+        },
         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:
-    with gr.Column(elem_classes=["card"]):
-        gr.Markdown("## My AI Chatbot")
-        gr.HTML(TOGGLE)
+    data = r.json()
+    try:
+        return data["choices"][0]["message"]["content"]
+    except Exception:
+        return f"Unexpected response: {data}"
+
+# ----------------------------
+# Conversation management
+# ----------------------------
+MAX_TURNS = 14  # number of user+assistant pairs to keep
+
+def build_messages(history, user_msg):
+    # history is already in [{"role": "...", "content": "..."}] format
+    trimmed = (history or [])[-MAX_TURNS * 2 :]
+    return [{"role": "system", "content": "You are a helpful assistant."}] + trimmed + [
+        {"role": "user", "content": user_msg}
+    ]
+
+# ----------------------------
+# Gradio UI
+# ----------------------------
+with gr.Blocks(title="ChatGPT-style Gradio Chat", css=CSS) as demo:
+    with gr.Column(elem_id="app_wrap"):
 
-        status = gr.Markdown("Starting…")
-        model_dd = gr.Dropdown(label="Model", choices=[], value=None, interactive=True)
+        with gr.Row(elem_classes=["header"]):
+            gr.Markdown("## My AI Chatbot", elem_classes=[])
+            gr.HTML(TOGGLE)
 
-        # Gradio 6.x Chatbot expects messages format by default:
-        # history = [{"role":"user","content":"..."}, {"role":"assistant","content":"..."} ...]
-        chatbot = gr.Chatbot(height=520)
+        status = gr.Markdown("Starting…", elem_classes=["subtle"])
 
+        with gr.Column(elem_classes=["settings"]):
+            model_dd = gr.Dropdown(label="Model", choices=[], value=None, interactive=True)
+            temperature = gr.Slider(0.0, 1.5, value=0.7, step=0.05, label="Temperature")
+            max_tokens = gr.Slider(64, 2048, value=800, step=32, label="Max tokens")
 
-        msg = gr.Textbox(placeholder="Type a message…", show_label=False)
-        with gr.Row():
-            send = gr.Button("Send", elem_classes=["primary"])
-            clear = gr.Button("Clear")
+        with gr.Column(elem_classes=["chat_shell"]):
+            # Gradio 6.x supports "messages" style history for Chatbot
+            chatbot = gr.Chatbot(height=560)
+
+        with gr.Column(elem_classes=["composer"]):
+            msg = gr.Textbox(
+                placeholder="Message…",
+                show_label=False,
+                lines=1,
+            )
+            with gr.Row():
+                send = gr.Button("Send", elem_classes=["primary"])
+                clear = gr.Button("Clear", elem_classes=["secondary"])
 
     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. Using model: `{default_model}`", gr.update(choices=models, value=default_model)
 
-    def respond(user_msg, history, model):
+    def respond(user_msg, history, model, temp, mx):
         history = history or []
+        user_msg = (user_msg or "").strip()
+        if not user_msg:
+            return "", history
 
         headers, err = get_headers()
         if err:
-            history += [{"role": "user", "content": user_msg},
-                        {"role": "assistant", "content": f"Setup error: {err}"}]
+            history += [
+                {"role": "user", "content": user_msg},
+                {"role": "assistant", "content": f"Setup error: {err}"},
+            ]
             return "", history
 
         if not model:
-            models, m_err = list_models(headers)
-            if m_err:
-                history += [{"role": "user", "content": user_msg},
-                            {"role": "assistant", "content": f"Model error: {m_err}"}]
-                return "", history
-            model = models[0]
-
-        messages = [{"role": "system", "content": "You are a helpful assistant."}] + history + [
-            {"role": "user", "content": user_msg}
-        ]
-        bot = chat_call(headers, model, messages)
+            history += [
+                {"role": "user", "content": user_msg},
+                {"role": "assistant", "content": "Please select a model first."},
+            ]
+            return "", history
 
-        history += [{"role": "user", "content": user_msg},
-                    {"role": "assistant", "content": bot}]
+        messages = build_messages(history, user_msg)
+        bot = chat_call(headers, model, messages, temperature=float(temp), max_tokens=int(mx))
+
+        history += [
+            {"role": "user", "content": user_msg},
+            {"role": "assistant", "content": bot},
+        ]
         return "", history
 
     demo.load(init, 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])
+    send.click(respond, inputs=[msg, chatbot, model_dd, temperature, max_tokens], outputs=[msg, chatbot])
+    msg.submit(respond, inputs=[msg, chatbot, model_dd, temperature, max_tokens], outputs=[msg, chatbot])
     clear.click(lambda: [], outputs=chatbot)
 
-# Gradio 6.x: pass css here, not in Blocks()
-demo.launch(css=CSS)
+demo.launch()