Spaces:
Sleeping
Sleeping
| import gradio as gr | |
| with gr.Blocks(fill_height=True, css=".gradio-container {background-color: #f0f4f8;}") as demo: | |
| gr.Markdown( | |
| """ | |
| <style> | |
| .sidebar {background-color: #ffffff; border-right: 1px solid #e0e0e0; padding: 20px;} | |
| .main-content {padding: 20px;} | |
| .gr-button {border-radius: 8px; font-weight: bold;} | |
| </style> | |
| """ | |
| ) | |
| with gr.Row(): | |
| with gr.Column(scale=1, variant="panel", elem_classes="sidebar"): | |
| gr.Markdown("# Inference Provider") | |
| gr.Markdown("This Space showcases the openai/gpt-oss-20b model, served by the ultra-fast Groq API. Sign in with your Hugging Face account to access premium features.") | |
| button = gr.LoginButton("Sign in with Hugging Face") | |
| # Advanced feature: Model info accordion | |
| with gr.Accordion("Model Details", open=False): | |
| gr.Markdown(""" | |
| - **Model**: openai/gpt-oss-20b | |
| - **Provider**: Groq API (low-latency inference) | |
| - **Capabilities**: Natural language generation, conversation, code assistance | |
| - **Max Tokens**: Up to 4096 | |
| """) | |
| # Advanced feature: Quick links | |
| gr.Markdown("### Quick Links") | |
| gr.HTML('<a href="https://groq.com" target="_blank">Groq Website</a>') | |
| gr.HTML('<a href="https://huggingface.co" target="_blank">Hugging Face</a>') | |
| with gr.Column(scale=4, elem_classes="main-content"): | |
| # Load the model interface with authentication | |
| model_interface = gr.load("models/openai/gpt-oss-20b", accept_token=button, provider="groq") | |
| # Advanced feature: Wrap in Tabs for multi-view | |
| with gr.Tabs(): | |
| with gr.Tab("Chat Mode"): | |
| # Assuming gr.load provides a chat-like interface, but enhance with custom chatbot if needed | |
| gr.Markdown("## Interactive Chat") | |
| chatbot = gr.Chatbot(height=500, show_label=False) | |
| msg = gr.Textbox(placeholder="Type your message here...", show_label=False) | |
| with gr.Row(): | |
| submit_btn = gr.Button("Send", variant="primary") | |
| clear_btn = gr.Button("Clear Chat") | |
| # Advanced feature: Parameters for fine-tuning responses | |
| with gr.Accordion("Advanced Settings", open=False): | |
| temperature = gr.Slider(0, 2, value=1, step=0.1, label="Temperature (creativity)") | |
| max_tokens = gr.Slider(50, 2048, value=512, step=50, label="Max Tokens") | |
| system_prompt = gr.Textbox("You are a helpful AI assistant.", label="System Prompt") | |
| # Examples for quick start | |
| examples = gr.Examples( | |
| examples=[ | |
| "Explain quantum computing in simple terms.", | |
| "Write a Python function to calculate Fibonacci numbers.", | |
| "Tell me a joke about programming." | |
| ], | |
| inputs=msg | |
| ) | |
| # Event handlers (simplified; assume integration with model) | |
| # Note: In a real setup, you'd connect these to a custom predict function using Groq API | |
| def chat_handler(message, history, temp, max_t, sys_prompt): | |
| # Placeholder: Integrate with Groq API call here | |
| response = f"Echo: {message} (temp={temp}, max={max_t}, sys={sys_prompt})" | |
| history.append((message, response)) | |
| return "", history | |
| submit_btn.click( | |
| chat_handler, | |
| inputs=[msg, chatbot, temperature, max_tokens, system_prompt], | |
| outputs=[msg, chatbot] | |
| ) | |
| clear_btn.click(lambda: None, None, chatbot) | |
| msg.submit( | |
| chat_handler, | |
| inputs=[msg, chatbot, temperature, max_tokens, system_prompt], | |
| outputs=[msg, chatbot] | |
| ) | |
| with gr.Tab("API Playground"): | |
| gr.Markdown("## Test API Endpoints") | |
| input_text = gr.TextArea(placeholder="Enter your prompt here...") | |
| output_text = gr.TextArea(label="Response") | |
| generate_btn = gr.Button("Generate") | |
| # Placeholder for API call | |
| def generate(prompt): | |
| return f"Generated response for: {prompt}" | |
| generate_btn.click(generate, input_text, output_text) | |
| with gr.Tab("Documentation"): | |
| gr.Markdown(""" | |
| # Usage Guide | |
| - Log in to access the model. | |
| - Use the chat for conversations. | |
| - Adjust parameters for customized responses. | |
| - Explore the API playground for direct testing. | |
| """) | |
| demo.launch() |