refine

app.py

@@ -1,192 +1,199 @@
-#!/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
 
-
-# ───────────────────────────  CONFIG  ────────────────────────────
+# Model configuration dictionary
 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)"
     },
 }
 
-# ───────────────────────────  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>"
+today = date.today()
 
+# Simplified CSS focusing on essential elements
 CSS = """
-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}
+/* 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;
+}
 """
 
-# ────────────────────────  CHAT FUNCTION  ────────────────────────
 def stream_chat(
     message: str,
     history: list,
-    model_label: str,
+    model_name: str,
     temperature: float = 0.7,
     max_new_tokens: int = 1024,
     top_p: float = 1.0,
-    penalty: float = 1.2,
+    presence_penalty: float = 1.2,
 ):
-    cfg = MODEL_CONFIGS[model_label]
+    """Chat function that streams responses from the selected model"""
+    
+    cfg = MODEL_CONFIGS[model_name]
     api_key = os.getenv(cfg["api_key_env"])
-    base_url = os.getenv(cfg["base_url_env"], None)
-
+    base_url = os.getenv(cfg.get("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 user_msg, bot_msg in history:
-        msgs.append({"role": "user", "content": user_msg})
-        msgs.append({"role": "assistant", "content": bot_msg})
+    for u, a in history:
+        msgs += [{"role": "user", "content": u},
+                {"role": "assistant", "content": a}]
     msgs.append({"role": "user", "content": message})
-
-    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,
-    )
-
-    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
+    
+    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,
         )
-
-    gear_btn.click(
-        _toggle_panel,
-        inputs=params_open,
-        outputs=[params_open, param_panel],
-        queue=False,
+        
+        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"
+    )
+    
+    # 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")
     )
-
-    # 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()