refine

app.py

@@ -3,43 +3,183 @@ from datetime import date
 import gradio as gr
 import openai
 
+# Model configuration dictionary
 MODEL_CONFIGS = {
     "Falcon-H1-34B-Instruct": {
-        "model_id":     "tiiuae/Falcon-H1-34B-Instruct",
-        "api_key_env":  "XXL_API_KEY",
+        "model_id": "tiiuae/Falcon-H1-34B-Instruct",
+        "api_key_env": "XXL_API_KEY",
         "base_url_env": "XXL_URL",
+        "badge_color": "red",
+        "description": "Largest model (34B parameters)"
     },
     "Falcon-H1-7B-Instruct": {
-        "model_id":     "tiiuae/Falcon-H1-7B-Instruct",
-        "api_key_env":  "L_API_KEY",
+        "model_id": "tiiuae/Falcon-H1-7B-Instruct",
+        "api_key_env": "L_API_KEY",
         "base_url_env": "L_URL",
+        "badge_color": "orange",
+        "description": "Large model (7B parameters)"
     },
     "Falcon-H1-3B-Instruct": {
-        "model_id":     "tiiuae/Falcon-H1-3B-Instruct",
-        "api_key_env":  "M_API_KEY",
+        "model_id": "tiiuae/Falcon-H1-3B-Instruct",
+        "api_key_env": "M_API_KEY",
         "base_url_env": "M_URL",
+        "badge_color": "yellow",
+        "description": "Medium model (3B parameters)"
     },
     "Falcon-H1-1.5B-Deep-Instruct": {
-        "model_id":     "tiiuae/Falcon-H1-1.5B-Deep-Instruct",
-        "api_key_env":  "S_API_KEY",
+        "model_id": "tiiuae/Falcon-H1-1.5B-Deep-Instruct",
+        "api_key_env": "S_API_KEY",
         "base_url_env": "S_URL",
+        "badge_color": "green",
+        "description": "Small model with deeper training (1.5B parameters)"
     },
     "Falcon-H1-1.5B-Instruct": {
-        "model_id":     "tiiuae/Falcon-H1-1.5B-Instruct",
-        "api_key_env":  "XS_API_KEY",
+        "model_id": "tiiuae/Falcon-H1-1.5B-Instruct",
+        "api_key_env": "XS_API_KEY",
         "base_url_env": "XS_URL",
+        "badge_color": "blue",
+        "description": "Extra small model (1.5B parameters)"
     },
     "Falcon-H1-0.5B-Instruct": {
-        "model_id":     "tiiuae/Falcon-H1-0.5B-Instruct",
-        "api_key_env":  "XXS_API_KEY",
+        "model_id": "tiiuae/Falcon-H1-0.5B-Instruct",
+        "api_key_env": "XXS_API_KEY",
         "base_url_env": "XXS_URL",
+        "badge_color": "indigo",
+        "description": "Extra-extra small model (0.5B parameters)"
     },
 }
 
 today = date.today()
-TITLE = "<h1><center>Private multi-backend playground</center></h1>"
-SUB_TITLE = "<center>Keys & endpoints stay server-side; the browser never sees them.</center>"
-CSS = """.duplicate-button{margin:auto!important;color:#fff!important;background:#000!important;border-radius:100vh!important}h3{text-align:center;}"""
+
+# Enhanced styling with modern, clean look
+CSS = """
+/* Overall theming */
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+/* Header and title styling */
+.header-container {
+    margin-bottom: 1.5rem;
+    text-align: center;
+}
+
+h1.main-title {
+    font-size: 2.5rem !important;
+    font-weight: 700 !important;
+    background: linear-gradient(90deg, #4776E6 0%, #8E54E9 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 0.5rem !important;
+}
+
+.subtitle {
+    font-size: 1.1rem;
+    color: #666;
+    margin-bottom: 1rem;
+}
+
+/* Model selection styling */
+.model-dropdown label span:first-of-type {
+    font-weight: 600 !important;
+    font-size: 1.1rem !important;
+}
+
+/* Parameter styling */
+.parameters-container {
+    border-radius: 12px !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
+    margin-top: 1rem !important;
+    overflow: hidden !important;
+}
+
+.parameters-header {
+    font-weight: 600 !important;
+    font-size: 1.1rem !important;
+}
+
+/* Slider styling */
+.gradio-slider {
+    margin: 1rem 0 !important;
+}
+
+.gradio-slider label span:first-of-type {
+    font-weight: 500 !important;
+}
+
+/* Chatbot container */
+.chatbot-container {
+    border-radius: 12px !important;
+    border: 1px solid #eaeaea !important;
+}
+
+/* Badge styling */
+.model-badge {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 12px;
+    font-size: 0.8rem;
+    font-weight: 500;
+    margin-left: 8px;
+    color: white;
+}
+
+.badge-red { background-color: #e53e3e; }
+.badge-orange { background-color: #ed8936; }
+.badge-yellow { background-color: #d69e2e; }
+.badge-green { background-color: #38a169; }
+.badge-blue { background-color: #3182ce; }
+.badge-indigo { background-color: #5a67d8; }
+
+/* Duplicate 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;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
+}
+
+.duplicate-button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08) !important;
+}
+
+/* Mode color indicators */
+.mode-info {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin: 1rem 0;
+}
+
+.mode-item {
+    display: flex;
+    align-items: center;
+    font-size: 0.85rem;
+}
+
+.mode-color {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    margin-right: 6px;
+}
+"""
+
+def format_model_option(model_name):
+    """Format the model dropdown options with colored badges"""
+    config = MODEL_CONFIGS[model_name]
+    color = config["badge_color"]
+    description = config["description"]
+    
+    # This creates a string with HTML that will be rendered in the dropdown
+    return f"{model_name} <span class='model-badge badge-{color}'>{description}</span>"
 
 def stream_chat(
     message: str,
@@ -48,71 +188,108 @@ def stream_chat(
     temperature: float = 0.7,
     max_new_tokens: int = 1024,
     top_p: float = 1.0,
-    top_k: int = 20,          
-    penalty: float = 1.2,
+    presence_penalty: float = 1.2,
 ):
-    cfg = MODEL_CONFIGS[model_label]
-
-    api_key   = os.getenv(cfg["api_key_env"])
-    base_url  = os.getenv(cfg.get("base_url_env", ""), None)
-
+    # Extract the model name from the formatted option
+    # The label now includes HTML, so we need to extract just the model name
+    model_name = model_label.split(" <span")[0] if "<span" in model_label else model_label
+    
+    cfg = MODEL_CONFIGS[model_name]
+    api_key = os.getenv(cfg["api_key_env"])
+    base_url = os.getenv(cfg.get("base_url_env", ""), None)
+    
     if not api_key:
         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."
         return
-
+        
     client = openai.OpenAI(api_key=api_key, base_url=base_url)
-    msgs=[]
+    
+    msgs = []
     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:
-        if (delta := chunk.choices[0].delta).content:
-            partial += delta.content
-            yield partial
+                {"role": "assistant", "content": a}]
+    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)}"
 
+# Format model options for the dropdown
+model_options = {format_model_option(model): model for model in MODEL_CONFIGS.keys()}
 
-chatbot = gr.Chatbot(height=600)
-
+# Create the Gradio interface
 with gr.Blocks(css=CSS, theme="soft") as demo:
-    gr.HTML(TITLE)
-    gr.HTML(SUB_TITLE)
+    # Header section
+    with gr.Row(elem_classes="header-container"):
+        with gr.Column():
+            gr.HTML("<h1 class='main-title'>Falcon Playground</h1>")
+            gr.HTML("<p class='subtitle'>Private multi-backend interface • Keys & endpoints stay server-side</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")
-
-    gr.ChatInterface(
+    
+    # Info section with model size indicators
+    with gr.Row(elem_classes="mode-info"):
+        for model, config in MODEL_CONFIGS.items():
+            gr.HTML(f"""
+                <div class='mode-item'>
+                    <div class='mode-color' style='background-color: var(--{config["badge_color"]}-500);'></div>
+                    <div>{model.split('-')[-2]}</div>
+                </div>
+            """)
+    
+    # Main chat interface
+    chatbot = gr.Chatbot(height=600, elem_classes="chatbot-container")
+    
+    with gr.ChatInterface(
         fn=stream_chat,
         chatbot=chatbot,
         fill_height=True,
-        additional_inputs_accordion=gr.Accordion(label="⚙️ Parameters", open=False),
-        additional_inputs=[
-            gr.Dropdown(
-                choices=list(MODEL_CONFIGS.keys()),
-                value=list(MODEL_CONFIGS.keys())[0],
-                label="Model",
-            ),
-            gr.Slider(0, 1, 0.1, 0.7,  label="Temperature"),
-            gr.Slider(64, 4096, 1, 1024, label="Max new tokens"),
-            gr.Slider(0, 1, 0.05, 1.0,  label="top_p"),
-            gr.Slider(1, 20, 1, 20,     label="top_k (ignored)"),
-            gr.Slider(0, 2, 0.1, 1.2,   label="Presence penalty"),
-        ],
-        cache_examples=False,
-    )
+        additional_inputs_accordion="closed",
+    ) as chat_interface:
+        # Model selection dropdown with styled options 
+        model_dropdown = gr.Dropdown(
+            choices=list(model_options.keys()),
+            value=list(model_options.keys())[0],
+            label="Model Selection",
+            elem_classes="model-dropdown"
+        )
+        
+        # Parameters in accordion
+        with gr.Accordion("⚙️ Advanced Parameters", open=False, elem_classes="parameters-container"):
+            with gr.Group():
+                temperature = gr.Slider(0, 1, value=0.7, step=0.05, label="Temperature", info="Higher values produce more diverse outputs")
+                max_new_tokens = gr.Slider(64, 4096*8, value=1024, step=64, label="Max new tokens", info="Maximum length of generated response")
+                top_p = gr.Slider(0, 1, value=1.0, step=0.05, label="Top-p (nucleus sampling)", info="1.0 means no filtering")
+                presence_penalty = gr.Slider(0, 2, value=1.2, step=0.1, label="Presence penalty", info="Penalizes repetition")
+    
+    # Connect the inputs to the chat interface
+    chat_interface.additional_inputs = [
+        model_dropdown,
+        temperature,
+        max_new_tokens,
+        top_p,
+        presence_penalty
+    ]
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()