refine

app.py

@@ -3,276 +3,149 @@ from datetime import date
 import gradio as gr
 import openai
 
+# -----------------------  Model registry  -----------------------
 MODEL_CONFIGS = {
-    "Falcon-H1-34B-Instruct": {
+    "34B": {  # keys are what you show in the dropdown
         "model_id": "tiiuae/Falcon-H1-34B-Instruct",
         "api_key_env": "XXL_API_KEY",
         "base_url_env": "XXL_URL",
     },
-    "Falcon-H1-7B-Instruct": {
+    "7B": {
         "model_id": "tiiuae/Falcon-H1-7B-Instruct",
         "api_key_env": "L_API_KEY",
         "base_url_env": "L_URL",
     },
-    "Falcon-H1-3B-Instruct": {
+    "3B": {
         "model_id": "tiiuae/Falcon-H1-3B-Instruct",
         "api_key_env": "M_API_KEY",
         "base_url_env": "M_URL",
     },
-    "Falcon-H1-1.5B-Deep-Instruct": {
+    "1.5B-Deep": {
         "model_id": "tiiuae/Falcon-H1-1.5B-Deep-Instruct",
         "api_key_env": "S_API_KEY",
         "base_url_env": "S_URL",
     },
-    "Falcon-H1-1.5B-Instruct": {
+    "1.5B": {
         "model_id": "tiiuae/Falcon-H1-1.5B-Instruct",
         "api_key_env": "XS_API_KEY",
         "base_url_env": "XS_URL",
     },
-    "Falcon-H1-0.5B-Instruct": {
+    "0.5B": {
         "model_id": "tiiuae/Falcon-H1-0.5B-Instruct",
         "api_key_env": "XXS_API_KEY",
         "base_url_env": "XXS_URL",
     },
 }
 
-today = date.today()
-
-# Enhanced Titles
-TITLE_HTML = "<h1 style='text-align: center; color: #6d28d9; margin-top: 1rem; margin-bottom: 0.5rem;'>✨ Private Multi-Backend Playground ✨</h1>" # A slightly deeper purple for prominent title
-SUB_TITLE_HTML = "<p style='text-align: center; color: #52525b; margin-bottom: 1.5rem;'>Keys & endpoints stay server-side; the browser never sees them.</p>"
-
-# Enhanced CSS for a light purple theme
+# -----------------------  CSS  -----------------------
 CSS = """
-body, .gradio-container {
-    --primary-50: #f5f3ff;
-    --primary-100: #ede9fe;
-    --primary-200: #ddd6fe;   /* Lightest purple, good for backgrounds/borders */
-    --primary-300: #c4b5fd;   /* Light purple */
-    --primary-400: #a78bfa;   /* Medium-light purple, good for interactive elements */
-    --primary-500: #8b5cf6;   /* Main purple accent */
-    --primary-600: #7c3aed;   /* Darker purple for hover/text */
-    --primary-700: #6d28d9;
-    --primary-800: #5b21b6;
-    --primary-900: #4c1d95;
-    --primary-950: #2e1065;
-
-    --button-primary-background-fill: var(--primary-400) !important;
-    --button-primary-background-fill-hover: var(--primary-500) !important;
-    --button-primary-text-color: white !important;
-
-    --body-background-fill: linear-gradient(to bottom right, #f5f3ff, #ede9fe); /* Subtle gradient background */
-}
-
-.duplicate-button {
-    margin: auto !important;
-    color: #fff !important;
-    background: #333 !important; /* Dark grey instead of pure black for a softer look */
-    border-radius: 100vh !important;
-    border: none !important;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-.duplicate-button:hover {
-    background: #444 !important;
-}
-
-/* Accordion styling for parameters */
-.gradio-accordion {
-    border-radius: 8px !important;
-    border: 1px solid var(--primary-200) !important;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
-}
-.gradio-accordion > .accordion-header {
-    background-color: var(--primary-100) !important;
-    color: var(--primary-700) !important;
-    border-bottom: 1px solid var(--primary-200) !important;
-    font-weight: 600;
-}
-.gradio-accordion > .accordion-header:hover {
-    background-color: var(--primary-200) !important;
-}
-.gradio-accordion > div > .gradio-html.component.min { /* Accordion arrow icon */
-    color: var(--primary-700) !important;
-}
-
-/* Chat interface specific styling */
-.gradio-chatinterface-input-box { /* The container for textbox and buttons */
-    background-color: #ffffff !important;
-    border-top: 1px solid var(--primary-200) !important;
-    padding: 10px !important;
-}
-.gradio-chatbot { /* The main chat display area */
-    background-color: #ffffff !important;
-    border-radius: 8px;
-    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
-}
-
-/* Chat bubble styling */
-.message-bubble-user {
-    background: var(--primary-400) !important;
-    color: white !important;
-    border-radius: 18px 18px 5px 18px !important;
-    padding: 10px 15px !important;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
-}
-.message-bubble-bot {
-    background: var(--neutral-100) !important; /* Using a neutral color from the 'soft' theme */
-    color: var(--neutral-800) !important;
-    border: 1px solid var(--neutral-200) !important;
-    border-radius: 18px 18px 18px 5px !important;
-    padding: 10px 15px !important;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
-}
-
-/* Styling for sliders and dropdowns within the accordion */
-.gradio-accordion .gradio-slider label span,
-.gradio-accordion .gradio-dropdown label span {
-    color: var(--primary-700) !important;
-    font-size: 0.95em;
-    font-weight: 500;
-}
-.gradio-accordion .gradio-slider input[type=range]::-webkit-slider-thumb {
-    background: var(--primary-500) !important;
-    border: 2px solid white !important; /* Add a border to the thumb */
-    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
-}
-.gradio-accordion .gradio-slider input[type=range]::-moz-range-thumb {
-    background: var(--primary-500) !important;
-    border: 2px solid white !important;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
-}
-.gradio-accordion .gradio-dropdown .multiselect__tags {
-    border: 1px solid var(--primary-300) !important;
-    background: white !important;
-}
-.gradio-accordion .gradio-dropdown .multiselect__option--selected {
-    background: var(--primary-500) !important;
-    color: white !important;
-}
-.gradio-accordion .gradio-dropdown .multiselect__option--highlight {
-    background: var(--primary-200) !important;
-    color: var(--primary-700) !important;
-}
-.gradio-accordion .gradio-dropdown .multiselect__input::placeholder {
-    color: var(--neutral-400);
-}
-
-/* Making sure the Parameters section title is clear */
-.gradio-accordion > .accordion-header > .label-wrap > span {
-    font-size: 1.1em !important;
-}
+body{font-family:'Inter',sans-serif;}
+h1{font-size:32px;font-weight:700;margin:12px 0;text-align:center;color:#12233d}
+.subtitle{text-align:center;color:#4b5563;font-size:14px;margin-top:-6px}
+.section-label{display:inline-block;background:#e2e8f9;color:#5b6bce;
+               font-size:12px;font-weight:600;padding:2px 8px;border-radius:6px}
+.card{border:1px solid #e5e7eb;border-radius:8px;padding:8px;margin-bottom:12px}
+#refresh-btn{width:100%;height:42px;font-weight:600;
+             background:#ffffff;border:1px solid #e5e7eb;border-radius:8px}
+#refresh-btn:hover{background:#f9fafb}
+.gr-chatbot-message{background:#ffffff;border:1px solid #e5e7eb;
+                    border-radius:6px;padding:8px;font-size:14px}
+.gr-user-message{background:#edf2ff;border:1px solid #dbe4ff;}
+.gradio-button.primary{background:#6262f2 !important;color:#fff !important}
 """
 
+# -----------------------  Chat backend  -----------------------
 def stream_chat(
-    message: str,
-    history: list,
-    model_label: str,
-    temperature: float = 0.7,
-    max_new_tokens: int = 1024,
-    top_p: float = 1.0,
-    # top_k: int = 20, # top_k was defined but not used in client.chat.completions.create
-    penalty: float = 1.2,
+    message, history, model_key, temperature=0.7, max_new_tokens=1024,
+    top_p=1.0, presence_penalty=1.2,
 ):
-    cfg = MODEL_CONFIGS[model_label]
+    cfg = MODEL_CONFIGS[model_key]
     api_key = os.getenv(cfg["api_key_env"])
-    base_url = os.getenv(cfg.get("base_url_env", ""), None)
-
     if not api_key:
-        yield f"❌ API Key Error: Environment variable {cfg['api_key_env']} not set."
+        yield f"❌ `{cfg['api_key_env']}` env-var missing."
         return
-    if cfg.get("base_url_env") and not base_url:
-        yield f"❌ Endpoint URL Error: Environment variable {cfg['base_url_env']} not set."
-        return
-
+    base_url = os.getenv(cfg["base_url_env"]) or None
     client = openai.OpenAI(api_key=api_key, base_url=base_url)
-    msgs = []
-    for u, a in history:
-        msgs.extend([{"role": "user", "content": u}, {"role": "assistant", "content": a}])
-    msgs.append({"role": "user", "content": message})
+
+    messages = [
+        m for (u, a) in history
+        for m in ({"role":"user","content":u},{"role":"assistant","content":a})
+    ] + [{"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=penalty,
-            # top_k was not a standard OpenAI API parameter for chat completions,
-            # it's often used in other models or sampling strategies.
-            # If your backend supports it, you might need to pass it differently.
+            model=cfg["model_id"], messages=messages,
+            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) and delta.content:
+            delta = chunk.choices[0].delta
+            if delta and delta.content:
                 partial += delta.content
                 yield partial
-    except openai.APIConnectionError as e:
-        yield f"❌ API Connection Error: {e}"
-    except openai.RateLimitError as e:
-        yield f"❌ Rate Limit Exceeded: {e}"
-    except openai.APIStatusError as e:
-        yield f"❌ API Status Error: {e.status_code} - {e.response.text}"
     except Exception as e:
-        yield f"❌ An unexpected error occurred: {str(e)}"
-
+        yield f"❌ Error: {e}"
 
-chatbot = gr.Chatbot(
-    height=600,
-    bubble_full_width=False, # Allows for the nice bubble shapes
-    avatar_images=(None, "https://img.icons8.com/fluency/96/chatbot.png") # Example bot avatar
-)
+# -----------------------  UI -----------------------
+today = date.today()
+default_model = list(MODEL_CONFIGS.keys())[0]
 
 with gr.Blocks(css=CSS, theme="soft") as demo:
-    gr.HTML(TITLE_HTML)
-    gr.HTML(SUB_TITLE_HTML)
-    gr.DuplicateButton(value="Duplicate Space", elem_classes="duplicate-button")
+    # Header
+    gr.Markdown("# Falcon-H1 Playground")
+    gr.HTML(
+        f"""<p class="subtitle">
+              Falcon-H1 is a new model by TII in Abu Dhabi. It is open source and
+              available on Hugging Face for research or application purposes.<br>
+              This playground connects to backend vLLM servers running different
+              Falcon-H1 checkpoints.
+            </p>"""
+    )
 
-    gr.ChatInterface(
-        fn=stream_chat,
-        chatbot=chatbot,
-        fill_height=True,
-        additional_inputs_accordion=gr.Accordion(label="⚙️ Parameters", open=False),
-        additional_inputs=[
-            gr.Dropdown(
+    # Model row
+    with gr.Row(equal_height=False):
+        with gr.Column(scale=3):
+            gr.HTML('<span class="section-label">Select Falcon-H1 Model</span>')
+            model_dd = gr.Dropdown(
                 choices=list(MODEL_CONFIGS.keys()),
-                value=list(MODEL_CONFIGS.keys())[0] if MODEL_CONFIGS else None,
-                label="Select Model",
-            ),
-            gr.Slider(minimum=0, maximum=1, step=0.05, value=0.7, label="Temperature (Randomness)"),
-            gr.Slider(minimum=64, maximum=4096, step=64, value=1024, label="Max New Tokens (Length)"),
-            gr.Slider(minimum=0, maximum=1, step=0.05, value=1.0, label="Top P (Nucleus Sampling)"),
-            # Removed top_k as it was not used in the OpenAI call
-            gr.Slider(minimum=0, maximum=2, step=0.1, value=1.0, label="Presence Penalty (Repetition)"), # Corrected: original used 1.2, but slider was 0-2 with value 1
-        ],
-        examples=[
-            ["Hello, how are you today?", list(MODEL_CONFIGS.keys())[0] if MODEL_CONFIGS else None, 0.7, 512, 1.0, 1.0],
-            ["Explain quantum computing in simple terms.", list(MODEL_CONFIGS.keys())[0] if MODEL_CONFIGS else None, 0.5, 1024, 0.95, 1.2],
+                value=default_model,
+                show_label=False,
+            )
+        with gr.Column(scale=2):
+            refresh_btn = gr.Button("↻ Refresh Models", elem_id="refresh-btn")
+
+    # Status
+    gr.HTML('<span class="section-label">Status</span>')
+    status_box = gr.Textbox(value="Status: Done.", interactive=False, show_label=False)
+
+    # Chat
+    gr.HTML('<span class="section-label">Falcon-H1 Chat</span>')
+    chatbot = gr.Chatbot(height=520)
+
+    # Parameters accordion
+    with gr.Accordion("⚙️ Parameters", open=False):
+        temperature = gr.Slider(0,1,0.7,label="Temperature",step=0.05)
+        max_tokens = gr.Slider(64,4096*8,1024,label="Max new tokens",step=64)
+        top_p = gr.Slider(0,1,1,label="Top-p",step=0.05)
+        presence_pen = gr.Slider(0,2,1.2,label="Presence penalty",step=0.1)
+
+    # Examples bar (optional)
+    examples = [
+        "Hello there, can you suggest few places to visit in UAE?",
+        "What UAE is known for?",
+        "Write a short poem about the desert.",
+        "Translate 'Welcome to Abu Dhabi' into Arabic.",
+    ]
+    gr.Examples(examples, chatbot)
+
+    # Chat interface wiring
+    gr.ChatInterface(
+        fn=stream_chat, chatbot=chatbot, additional_inputs=[
+            model_dd, temperature, max_tokens, top_p, presence_pen
         ],
-        cache_examples=False,
-        retry_btn="🔄 Retry",
-        undo_btn="↩️ Undo",
-        clear_btn="🗑️ Clear",
-        submit_btn="💬 Send",
-        autofocus=True,
     )
 
 if __name__ == "__main__":
-    # For local testing, you'd set your environment variables before running.
-    # Example (do not commit real keys to code):
-    # os.environ["XXL_API_KEY"] = "your_xxl_api_key_here"
-    # os.environ["XXL_URL"] = "your_xxl_url_here"
-    # ... and so on for other models if you intend to test them.
-
-    # Check if at least one model has its API key set for a better startup experience
-    is_any_model_configured = any(
-        os.getenv(MODEL_CONFIGS[model_key]["api_key_env"]) for model_key in MODEL_CONFIGS
-    )
-    if not is_any_model_configured and MODEL_CONFIGS:
-        first_model_key_env = MODEL_CONFIGS[list(MODEL_CONFIGS.keys())[0]]["api_key_env"]
-        print(f"Warning: No model API keys seem to be set. Set environment variables like '{first_model_key_env}'.")
-    elif not MODEL_CONFIGS:
-        print("Warning: MODEL_CONFIGS is empty. No models to select.")
-
-    demo.launch()
+    demo.launch()