refine

app.py

@@ -1,199 +1,192 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+"""
+Private multi-backend playground (Falcon-H1 family).
+
+Visual refresh + collapsible “⚙️  Parameters” panel toggled by a gear button.
+All secrets stay server-side.
+"""
 import os
 from datetime import date
 import gradio as gr
 import openai
 
-# Model configuration dictionary
+
+# ───────────────────────────  CONFIG  ────────────────────────────
 MODEL_CONFIGS = {
     "Falcon-H1-34B-Instruct": {
         "model_id": "tiiuae/Falcon-H1-34B-Instruct",
         "api_key_env": "XXL_API_KEY",
         "base_url_env": "XXL_URL",
-        "description": "XXL (34B)"
     },
     "Falcon-H1-7B-Instruct": {
         "model_id": "tiiuae/Falcon-H1-7B-Instruct",
         "api_key_env": "L_API_KEY",
         "base_url_env": "L_URL",
-        "description": "L (7B)"
     },
     "Falcon-H1-3B-Instruct": {
         "model_id": "tiiuae/Falcon-H1-3B-Instruct",
         "api_key_env": "M_API_KEY",
         "base_url_env": "M_URL",
-        "description": "M (3B)"
     },
     "Falcon-H1-1.5B-Deep-Instruct": {
         "model_id": "tiiuae/Falcon-H1-1.5B-Deep-Instruct",
         "api_key_env": "S_API_KEY",
         "base_url_env": "S_URL",
-        "description": "S (1.5B Deep)"
     },
     "Falcon-H1-1.5B-Instruct": {
         "model_id": "tiiuae/Falcon-H1-1.5B-Instruct",
         "api_key_env": "XS_API_KEY",
         "base_url_env": "XS_URL",
-        "description": "XS (1.5B)"
     },
     "Falcon-H1-0.5B-Instruct": {
         "model_id": "tiiuae/Falcon-H1-0.5B-Instruct",
         "api_key_env": "XXS_API_KEY",
         "base_url_env": "XXS_URL",
-        "description": "XXS (0.5B)"
     },
 }
 
-today = date.today()
+# ───────────────────────────  STYLING  ────────────────────────────
+TITLE = "<h1><center>Private multi-backend playground</center></h1>"
+SUBTITLE = "<center>Keys &amp; endpoints stay <em>server-side</em>; the browser never sees them.</center>"
 
-# Simplified CSS focusing on essential elements
 CSS = """
-/* Main style improvements */
-.container {
-    max-width: 900px !important;
-    margin-left: auto !important;
-    margin-right: auto !important;
-}
-
-/* Title styling */
-h1 {
-    background: linear-gradient(90deg, #4776E6 0%, #8E54E9 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    font-weight: 700 !important;
-    text-align: center;
-    margin-bottom: 0.5rem !important;
-}
-
-.subtitle {
-    text-align: center;
-    color: #666;
-    margin-bottom: 1rem;
-}
-
-/* Button styling */
-.duplicate-button {
-    margin: 1rem auto !important;
-    display: block !important;
-    color: #fff !important;
-    background: linear-gradient(90deg, #4776E6 0%, #8E54E9 100%) !important;
-    border-radius: 100vh !important;
-    padding: 0.5rem 1.5rem !important;
-    font-weight: 600 !important;
-    border: none !important;
-    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
-}
-
-/* Parameter accordion styling */
-.accordion {
-    border-radius: 8px !important;
-    overflow: hidden !important;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
-    margin-bottom: 1rem !important;
-}
-
-/* Model dropdown styling */
-.model-dropdown .label-wrap span:first-child {
-    font-weight: 600 !important;
-}
-
-/* Improve model description display */
-.model-dropdown .wrap .value-wrap span {
-    display: flex !important;
-    align-items: center !important;
-    gap: 6px !important;
-}
-
-.model-description {
-    font-size: 0.85rem !important;
-    opacity: 0.75 !important;
-    font-weight: normal !important;
-}
+body{font-family:'Inter',system-ui,sans-serif;background:linear-gradient(135deg,#eef2f8 0%,#f5f9fd 100%) fixed;}
+.gradio-container{max-width:900px;margin:0 auto;padding-bottom:48px;}
+h1{font-weight:700;font-size:2.4rem;margin:0.6em 0;color:#111;}
+#dup-btn{margin:auto!important;border-radius:1.5rem!important;background:#1f1f1f!important;color:#fff!important}
+#settings-btn{position:absolute;top:14px;right:14px;border:none;background:transparent;font-size:1.55rem;cursor:pointer;transition:transform .15s}
+#settings-btn:hover{transform:scale(1.18);}
+.gr-chat-message.user{background:#e5f2ff;border-radius:1.25rem!important}
+.gr-chat-message.assistant{background:#ffffff;border-radius:1.25rem!important}
 """
 
+# ────────────────────────  CHAT FUNCTION  ────────────────────────
 def stream_chat(
     message: str,
     history: list,
-    model_name: str,
+    model_label: str,
     temperature: float = 0.7,
     max_new_tokens: int = 1024,
     top_p: float = 1.0,
-    presence_penalty: float = 1.2,
+    penalty: float = 1.2,
 ):
-    """Chat function that streams responses from the selected model"""
-    
-    cfg = MODEL_CONFIGS[model_name]
+    cfg = MODEL_CONFIGS[model_label]
     api_key = os.getenv(cfg["api_key_env"])
-    base_url = os.getenv(cfg.get("base_url_env", ""), None)
-    
+    base_url = os.getenv(cfg["base_url_env"], None)
+
     if not api_key:
-        yield f"❌ Env-var `{cfg['api_key_env']}` not set."
+        yield f"❌ Env-var {cfg['api_key_env']} not set."
         return
-        
     if cfg.get("base_url_env") and not base_url:
-        yield f"❌ Env-var `{cfg['base_url_env']}` not set."
+        yield f"❌ Env-var {cfg['base_url_env']} not set."
         return
-        
+
     client = openai.OpenAI(api_key=api_key, base_url=base_url)
-    
+
+    # Build message list from history
     msgs = []
-    for u, a in history:
-        msgs += [{"role": "user", "content": u},
-                {"role": "assistant", "content": a}]
+    for user_msg, bot_msg in history:
+        msgs.append({"role": "user", "content": user_msg})
+        msgs.append({"role": "assistant", "content": bot_msg})
     msgs.append({"role": "user", "content": message})
-    
-    try:
-        stream = client.chat.completions.create(
-            model=cfg["model_id"],
-            messages=msgs,
-            temperature=temperature,
-            top_p=top_p,
-            max_tokens=max_new_tokens,
-            presence_penalty=presence_penalty,
-            stream=True,
-        )
-        
-        partial = ""
-        for chunk in stream:
-            if (delta := chunk.choices[0].delta).content:
-                partial += delta.content
-                yield partial
-    except Exception as e:
-        yield f"❌ Error: {str(e)}"
-
-# Create the Gradio interface
-with gr.Blocks(css=CSS, theme="soft") as demo:
-    # Header section
-    gr.HTML("<h1>Private multi-backend playground</h1>")
-    gr.HTML("<p class='subtitle'>Keys & endpoints stay server-side; the browser never sees them.</p>")
-    gr.HTML(f"<p class='subtitle' style='font-size: 0.9rem; color: #888;'>Today: {today.strftime('%B %d, %Y')}</p>")
-    
-    gr.DuplicateButton(value="Duplicate Space", elem_classes="duplicate-button")
-    
-    # Create chatbot
-    chatbot = gr.Chatbot(height=600)
-    
-    # Create model selection with descriptions
-    model_options = list(MODEL_CONFIGS.keys())
-    model_dropdown = gr.Dropdown(
-        choices=model_options,
-        value=model_options[0],
-        label="Model",
-        elem_classes="model-dropdown"
+
+    stream = client.chat.completions.create(
+        model=cfg["model_id"],
+        messages=msgs,
+        temperature=temperature,
+        top_p=top_p,
+        max_tokens=max_new_tokens,
+        presence_penalty=penalty,
+        stream=True,
     )
-    
-    # Create ChatInterface with collapsible parameters
-    chat_interface = gr.ChatInterface(
-        fn=stream_chat,
-        chatbot=chatbot,
-        additional_inputs=[
-            model_dropdown,
-            gr.Slider(0, 1, value=0.7, step=0.05, label="Temperature", info="Higher values produce more diverse outputs"),
-            gr.Slider(64, 4096*8, value=1024, step=64, label="Max new tokens", info="Maximum length of generated response"),
-            gr.Slider(0, 1, value=1.0, step=0.05, label="top_p", info="1.0 means no filtering"),
-            gr.Slider(0, 2, value=1.2, step=0.1, label="Presence penalty", info="Penalizes repetition")
-        ],
-        additional_inputs_accordion=gr.Accordion("⚙️ Parameters", open=False, elem_classes="accordion")
+
+    partial = ""
+    for chunk in stream:
+        delta = chunk.choices[0].delta
+        if delta and delta.content:
+            partial += delta.content
+            yield partial
+
+
+# ────────────────────────────  UI  ───────────────────────────────
+with gr.Blocks(css=CSS, theme="soft") as demo:
+    gr.HTML(TITLE)
+    gr.HTML(SUBTITLE)
+
+    # Duplicate-space helper
+    gr.DuplicateButton(value="Duplicate Space", elem_id="dup-btn")
+
+    # Gear button (absolute-positioned)
+    gear_btn = gr.Button("⚙️", elem_id="settings-btn", variant="secondary")
+
+    # Hidden/visible state for the parameter panel
+    params_open = gr.State(False)
+
+    # Collapsible parameter section (starts closed & invisible)
+    with gr.Accordion("Parameters", open=False, visible=False, elem_id="param-panel") as param_panel:
+        model_dd = gr.Dropdown(
+            choices=list(MODEL_CONFIGS.keys()),
+            value=list(MODEL_CONFIGS.keys())[0],
+            label="Model",
+        )
+        temp = gr.Slider(0, 1, value=0.7, step=0.1, label="Temperature")
+        max_tok = gr.Slider(64, 4096 * 8, value=1024, step=64, label="Max new tokens")
+        top_p = gr.Slider(0, 1, value=1.0, step=0.01, label="Top-p")
+        penalty = gr.Slider(0, 2, value=1.2, step=0.1, label="Presence penalty")
+
+    # Toggle logic: gear button ↔ parameter accordion
+    def _toggle_panel(open_now: bool):
+        """Flip visibility + open/close state."""
+        new_state = not open_now
+        return (
+            new_state,                     # update hidden state
+            gr.update(visible=True, open=new_state),  # accordion update
+        )
+
+    gear_btn.click(
+        _toggle_panel,
+        inputs=params_open,
+        outputs=[params_open, param_panel],
+        queue=False,
     )
 
+    # Chatbot component
+    chatbot = gr.Chatbot(height=560)
+
+    # Textbox & interaction handled by ChatInterface-like row
+    with gr.Row():
+        txt = gr.Textbox(
+            scale=8,
+            placeholder="Ask anything…",
+            show_label=False
+        )
+        submit = gr.Button("Send", scale=1)
+
+    def _proxy_send(user_message, chat_hist, mdl, t, mx_toks, tp, pp):
+        return stream_chat(
+            user_message,
+            chat_hist,
+            model_label=mdl,
+            temperature=t,
+            max_new_tokens=int(mx_toks),
+            top_p=tp,
+            penalty=pp,
+        )
+
+    # Wiring
+    submit.click(
+        _proxy_send,
+        inputs=[txt, chatbot, model_dd, temp, max_tok, top_p, penalty],
+        outputs=chatbot,
+    ).then(lambda: "", None, txt)          # clear textbox afterwards
+
+    txt.submit(
+        _proxy_send,
+        inputs=[txt, chatbot, model_dd, temp, max_tok, top_p, penalty],
+        outputs=chatbot,
+    ).then(lambda: "", None, txt)
+
+
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()