refine

app.py

@@ -9,126 +9,68 @@ MODEL_CONFIGS = {
         "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)"
+        "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",
-        "badge_color": "orange",
-        "description": "Large model (7B parameters)"
+        "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",
-        "badge_color": "yellow",
-        "description": "Medium model (3B parameters)"
+        "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",
-        "badge_color": "green",
-        "description": "Small model with deeper training (1.5B parameters)"
+        "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",
-        "badge_color": "blue",
-        "description": "Extra small model (1.5B parameters)"
+        "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",
-        "badge_color": "indigo",
-        "description": "Extra-extra small model (0.5B parameters)"
+        "description": "XXS (0.5B)"
     },
 }
 
-# Hex colors for badges (matching the CSS)
-BADGE_HEX_COLORS = {
-    "red": "#e53e3e",
-    "orange": "#ed8936",
-    "yellow": "#d69e2e",
-    "green": "#38a169",
-    "blue": "#3182ce",
-    "indigo": "#5a67d8",
-}
-
 today = date.today()
-# Enhanced styling with modern, clean look
+
+# Simplified CSS focusing on essential elements
 CSS = """
-/* Overall theming */
-body {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+/* Main style improvements */
+.container {
+    max-width: 900px !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
 }
-/* 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;
+
+/* 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 {
-    font-size: 1.1rem;
+    text-align: center;
     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 */
+
+/* Button styling */
 .duplicate-button {
     margin: 1rem auto !important;
     display: block !important;
@@ -138,72 +80,67 @@ h1.main-title {
     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;
+
+/* 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;
 }
-/* Mode color indicators */
-.mode-info {
-    display: flex;
-    justify-content: center;
-    gap: 20px;
-    margin: 1rem 0;
+
+/* Model dropdown styling */
+.model-dropdown .label-wrap span:first-child {
+    font-weight: 600 !important;
 }
-.mode-item {
-    display: flex;
-    align-items: center;
-    font-size: 0.85rem;
+
+/* Improve model description display */
+.model-dropdown .wrap .value-wrap span {
+    display: flex !important;
+    align-items: center !important;
+    gap: 6px !important;
 }
-.mode-color {
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    margin-right: 6px;
+
+.model-description {
+    font-size: 0.85rem !important;
+    opacity: 0.75 !important;
+    font-weight: normal !important;
 }
 """
 
-def format_model_option(model_name: str) -> str:
-    """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 label
-    return f"{model_name} <span class='model-badge badge-{color}'>{description}</span>"
-
 def stream_chat(
     message: str,
     history: list,
-    model_name: str,  # Changed: This will now be the plain model name
+    model_name: str,
     temperature: float = 0.7,
     max_new_tokens: int = 1024,
     top_p: float = 1.0,
     presence_penalty: float = 1.2,
 ):
-    # Removed: model_name extraction from HTML, as model_name is now passed directly.
-    # model_name = model_label.split(" <span")[0] if "<span" in model_label else 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.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 = []
     for u, a in history:
-        msgs.append({"role": "user", "content": u})
-        msgs.append({"role": "assistant", "content": a})
+        msgs += [{"role": "user", "content": u},
+                {"role": "assistant", "content": a}]
     msgs.append({"role": "user", "content": message})
-
+    
     try:
         stream = client.chat.completions.create(
             model=cfg["model_id"],
@@ -214,74 +151,49 @@ def stream_chat(
             presence_penalty=presence_penalty,
             stream=True,
         )
+        
         partial = ""
         for chunk in stream:
-            if (delta := chunk.choices[0].delta) and delta.content: # Ensure delta and delta.content are not None
+            if (delta := chunk.choices[0].delta).content:
                 partial += delta.content
                 yield partial
     except Exception as e:
         yield f"❌ Error: {str(e)}"
 
-# Prepare model choices for the dropdown: list of (display_label, actual_value)
-ordered_model_names = list(MODEL_CONFIGS.keys())
-model_choices_list = [
-    (format_model_option(name), name) for name in ordered_model_names
-]
-
 # Create the Gradio interface
 with gr.Blocks(css=CSS, theme="soft") as demo:
     # 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")
-
-    # Info section with model size indicators
-    with gr.Row(elem_classes="mode-info"):
-        for model_key, config in MODEL_CONFIGS.items():
-            # Use the hex color from our BADGE_HEX_COLORS map
-            hex_color = BADGE_HEX_COLORS.get(config["badge_color"], "#ccc") # Default to gray if color not found
-            gr.HTML(f"""
-            <div class='mode-item'>
-                <div class='mode-color' style='background-color: {hex_color};'></div>
-                <div>{model_key.split('-')[-2]}</div>
-            </div>
-            """)
-
-    # Main chat interface
-    chatbot = gr.Chatbot(height=600, elem_classes="chatbot-container")
+    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>")
     
-    with gr.ChatInterface(
-        fn=stream_chat,
-        chatbot=chatbot,
-        fill_height=True,
-        additional_inputs_accordion_name="⚙️ Advanced Parameters & Model Selection", # Renamed for clarity
-        # additional_inputs_accordion="closed", # This was the old way, now part of additional_inputs
-    ) as chat_interface:
-   
-        pass # ChatInterface handles its own input fields. We add ours via additional_inputs.
-
+    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_choices_list,
-        value=ordered_model_names[0] if ordered_model_names else None, # Default to the actual name of the first model
-        label="Model Selection",
+        choices=model_options,
+        value=model_options[0],
+        label="Model",
         elem_classes="model-dropdown"
     )
-
-    temperature_slider = gr.Slider(0, 1, value=0.7, step=0.05, label="Temperature", info="Higher values produce more diverse outputs")
-    max_new_tokens_slider = gr.Slider(64, 4096*8, value=1024, step=64, label="Max new tokens", info="Maximum length of generated response")
-    top_p_slider = gr.Slider(0, 1, value=1.0, step=0.05, label="Top-p (nucleus sampling)", info="1.0 means no filtering")
-    presence_penalty_slider = gr.Slider(0, 2, value=1.2, step=0.1, label="Presence penalty", info="Penalizes repetition")
-
-    chat_interface.additional_inputs = [
-        model_dropdown,
-        temperature_slider,
-        max_new_tokens_slider,
-        top_p_slider,
-        presence_penalty_slider
-    ]
+    
+    # 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")
+    )
 
 if __name__ == "__main__":
     demo.launch()