import gradio as gr from huggingface_hub import InferenceClient import time # Initialize the client client = InferenceClient("HuggingFaceH4/zephyr-7b-beta") # Custom CSS for better styling custom_css = """ .container { max-width: 800px; margin: auto; padding: 20px; } .chat-message { padding: 15px; border-radius: 10px; margin-bottom: 10px; } .user-message { background-color: #e3f2fd; } .bot-message { background-color: #f5f5f5; } .controls-container { background-color: #ffffff; padding: 20px; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-top: 20px; } """ def format_timestamp(): return time.strftime("%H:%M:%S") def respond( message, history: list[tuple[str, str]], system_message, max_tokens, temperature, top_p, model_name, ): messages = [{"role": "system", "content": system_message}] # Add timestamp to messages timestamp = format_timestamp() for val in history: if val[0]: messages.append({"role": "user", "content": val[0]}) if val[1]: messages.append({"role": "assistant", "content": val[1]}) messages.append({"role": "user", "content": message}) response = "" try: for message in client.chat_completion( messages, max_tokens=max_tokens, stream=True, temperature=temperature, top_p=top_p, ): token = message.choices[0].delta.content response += token yield response except Exception as e: yield f"Error: {str(e)}" def create_demo(): # Theme configuration theme = gr.themes.Default().set( font=["Inter", "ui-sans-serif", "system-ui"], radius_size=gr.themes.sizes.radius_sm, ) with gr.Blocks(theme=theme, css=custom_css) as demo: with gr.Row(): with gr.Column(scale=3): gr.Markdown("# 🤖 Advanced Chat Interface") with gr.Row(): with gr.Column(scale=3): chatbot = gr.ChatInterface( respond, additional_inputs=[ gr.Textbox( value="You are a friendly and helpful AI assistant.", label="System Message", lines=2 ), gr.Slider( minimum=1, maximum=2048, value=512, step=1, label="Max Tokens", info="Maximum number of tokens to generate" ), gr.Slider( minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature", info="Higher values make output more random" ), gr.Slider( minimum=0.1, maximum=1.0, value=0.95, step=0.05, label="Top-p (Nucleus Sampling)", info="Controls diversity of generated text" ), gr.Dropdown( choices=["HuggingFaceH4/zephyr-7b-beta", "other-model-1", "other-model-2"], value="HuggingFaceH4/zephyr-7b-beta", label="Model", info="Select the model to use" ), ], title="Advanced Chat Interface", description="Chat with an AI assistant powered by Hugging Face models.", ) with gr.Column(scale=1): with gr.Accordion("Chat Information", open=True): total_messages = gr.Number(value=0, label="Total Messages", interactive=False) chat_duration = gr.Number(value=0, label="Chat Duration (min)", interactive=False) with gr.Accordion("Advanced Settings", open=False): gr.Checkbox(label="Enable Debug Mode", value=False) gr.Checkbox(label="Save Chat History", value=True) gr.Radio( choices=["Simple", "Detailed"], value="Simple", label="Response Mode" ) return demo if __name__ == "__main__": demo = create_demo() demo.launch(share=True, server_name="0.0.0.0", server_port=7860)