Spaces:
Sleeping
Sleeping
| import gradio as gr | |
| from huggingface_hub import InferenceClient | |
| # Define available models. | |
| # Each model has a name, description, model ID, and an "enabled" flag. | |
| 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 HTML for the custom dropdown. | |
| dropdown_options = "" | |
| for model in models: | |
| # If a model is disabled, add the "disabled" attribute and modify its label. | |
| disabled_attr = "disabled" if not model["enabled"] else "" | |
| label = f"{model['name']}: {model['description']}" | |
| if not model["enabled"]: | |
| label = f"{model['name']} (Disabled): {model['description']}" | |
| dropdown_options += f'<option value="{model["id"]}" {disabled_attr}>{label}</option>\n' | |
| # This HTML dropdown will be displayed. When the user selects an option, | |
| # an inline JavaScript updates the value of the hidden textbox with the chosen model ID. | |
| dropdown_html = f""" | |
| <div> | |
| <label for="model_select"><strong>Select Model:</strong></label> | |
| <select id="model_select" onchange="document.getElementById('hidden_model').value = this.value;"> | |
| {dropdown_options} | |
| </select> | |
| </div> | |
| """ | |
| # The respond function now accepts the model_id as one of its inputs. | |
| def respond(message, history: list[tuple[str, str]], model_id, system_message, max_tokens, temperature, top_p): | |
| # Instantiate the InferenceClient with the selected 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 = "" | |
| # Stream the response token-by-token. | |
| 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 | |
| # Create Gradio components. | |
| # The HTML component displays our custom dropdown. | |
| html_dropdown = gr.HTML(value=dropdown_html) | |
| # The hidden textbox will hold the selected model ID. | |
| hidden_model = gr.Textbox(value=models[0]["id"], visible=False, elem_id="hidden_model") | |
| # Create the Gradio ChatInterface. | |
| # Note: Only components that supply a value are passed to the function. | |
| # The HTML component is for display only. | |
| demo = gr.ChatInterface( | |
| fn=respond, | |
| additional_inputs=[ | |
| # hidden_model supplies the model_id. | |
| 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)") | |
| ], | |
| # You can include the HTML dropdown in a layout so that it is visible to the user. | |
| layout=[html_dropdown] | |
| ) | |
| if __name__ == "__main__": | |
| demo.launch() | |