app.py

import gradio as gr
from huggingface_hub import InferenceClient

# -- 1) DEFINE YOUR MODELS HERE --
models = [
    {
        "name": "Tiny Model",
        "description": "A small chat model.",
        "id": "amusktweewt/tiny-model-500M-chat-v2",
        "enabled": True
    },
    {
        "name": "Another Model",
        "description": "A bigger chat model (disabled).",
        "id": "another-model",
        "enabled": False
    }
]

# Build the custom HTML for a disabled-capable <select>.
dropdown_options = ""
for model in models:
    label = f"{model['name']}: {model['description']}"
    disabled_attr = "disabled" if not model["enabled"] else ""
    if not model["enabled"]:
        # Mark label visually so the user sees it's disabled
        label = f"{model['name']} (Disabled): {model['description']}"
    dropdown_options += f'<option value="{model["id"]}" {disabled_attr}>{label}</option>\n'

# Updated CSS to follow system theme and enlarge chat area.
custom_css = """
<style>
  /* Style for the custom dropdown, using inherited colors */
  .custom-select {
    background-color: transparent; /* Inherit system background */
    color: inherit; /* Inherit system text color */
    border: 1px solid var(--border-color, #ccc);
    padding: 8px;
    border-radius: 4px;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 1rem;
  }
  /* Increase the minimum height of the chat area */
  #chat_interface .chatbox {
    min-height: 500px;
  }
</style>
"""

dropdown_html = f"""
{custom_css}
<label for="model_select"><strong>Select Model:</strong></label>
<select id="model_select" class="custom-select" 
        onchange="document.getElementById('hidden_model').value = this.value;">
  {dropdown_options}
</select>
"""

def respond(message, history: list[tuple[str, str]], model_id, system_message, max_tokens, temperature, top_p):
    """
    Build a chat prompt and stream the response token-by-token from the model.
    """
    client = InferenceClient(model_id)
    messages = []
    if system_message:
        messages.append({"role": "system", "content": system_message})
    if history:
        for user_msg, bot_msg in history:
            messages.append({"role": "user", "content": user_msg})
            messages.append({"role": "assistant", "content": bot_msg})
    messages.append({"role": "user", "content": message})
    messages.append({"role": "assistant", "content": ""})
    response_text = ""
    for resp in client.chat_completion(
        messages,
        max_tokens=max_tokens,
        stream=True,
        temperature=temperature,
        top_p=top_p,
    ):
        token = resp.choices[0].delta.content
        response_text += token
        yield response_text

# -- 3) BUILD THE UI IN A BLOCKS CONTEXT --
with gr.Blocks() as demo:
    # Custom HTML dropdown for model selection.
    gr.HTML(value=dropdown_html)
    
    # Hidden textbox to store the current model ID.
    hidden_model = gr.Textbox(
        value=models[0]["id"],  # Default to the first model
        visible=False,
        elem_id="hidden_model"
    )
    
    # ChatInterface with an element ID for styling.
    chat = gr.ChatInterface(
        respond,
        additional_inputs=[
            hidden_model,
            gr.Textbox(
                value="You are a friendly Chatbot.",
                label="System message"
            ),
            gr.Slider(
                minimum=1,
                maximum=2048,
                value=512,
                step=1,
                label="Max new tokens"
            ),
            gr.Slider(
                minimum=0.1,
                maximum=4.0,
                value=0.7,
                step=0.1,
                label="Temperature"
            ),
            gr.Slider(
                minimum=0.1,
                maximum=1.0,
                value=0.95,
                step=0.05,
                label="Top-p (nucleus sampling)"
            ),
        ],
        elem_id="chat_interface"
    )

if __name__ == "__main__":
    demo.launch()