app.py

import gradio as gr
from huggingface_hub import InferenceClient

# Hugging Face inference client
client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")

def respond(message, history, system_message, max_tokens, temperature, top_p):
    messages = [{"role": "system", "content": system_message}]

    for user_msg, bot_msg in history:
        if user_msg:
            messages.append({"role": "user", "content": user_msg})
        if bot_msg:
            messages.append({"role": "assistant", "content": bot_msg})
    
    messages.append({"role": "user", "content": message})
    response = ""
    
    for msg in client.chat_completion(
        messages,
        max_tokens=max_tokens,
        stream=True,
        temperature=temperature,
        top_p=top_p,
    ):
        token = msg.choices[0].delta.content
        response += token
        yield response

# Enhanced UI with ChatGPT-like design
with gr.Blocks(css="""
    body {background-color: #212121; color: #EAEAEA; font-family: Arial, sans-serif;}
    .chat-container { max-width: 800px; margin: auto; padding: 20px; }
    .chat-message { border-radius: 10px; padding: 10px 15px; margin: 5px 0; max-width: 80%; }
    .user-message { background: #007AFF; color: white; align-self: flex-end; }
    .bot-message { background: #333333; color: white; align-self: flex-start; }
    .gradio-container { max-width: 900px; margin: auto; }
""") as demo:
    gr.Markdown("""
    <h1 style='text-align: center; color: #FFFFFF;'>💬 AI Chat Assistant</h1>
    <p style='text-align: center;'>An interactive chatbot experience with a modern UI.</p>
    """)
    
    with gr.Row():
        system_message = gr.Textbox(
            value="You are a helpful and intelligent assistant.",
            label="System Message",
            interactive=True,
            show_label=False,
        )
    
    with gr.Row():
        max_tokens = gr.Slider(
            minimum=1, maximum=2048, value=512, step=1, label="Max Tokens"
        )
        temperature = gr.Slider(
            minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature"
        )
        top_p = gr.Slider(
            minimum=0.1, maximum=1.0, value=0.95, step=0.05, label="Top-p"
        )
    
    chatbot = gr.ChatInterface(
        respond,
        additional_inputs=[system_message, max_tokens, temperature, top_p],
        bubble_colors=("#007AFF", "#444444"),
        show_copy_button=True,
    )

demo.launch()