app.py

import gradio as gr
from huggingface_hub import InferenceClient

client = InferenceClient("Qwen/Qwen2.5-Coder-32B-Instruct")

def respond(message, history, system_message, max_tokens, temperature, top_p):
    messages = [{"role": "system", "content": system_message}]
    
    for user_msg, assistant_msg in history:
        messages.extend([
            {"role": "user", "content": user_msg},
            {"role": "assistant", "content": assistant_msg}
        ])
    
    messages.append({"role": "user", "content": message})

    full_response = ""
    for chunk in client.chat_completion(
        messages,
        max_tokens=max_tokens,
        stream=True,
        temperature=temperature,
        top_p=top_p,
    ):
        token = chunk.choices[0].delta.content or ""
        full_response += token
        yield full_response

custom_css = """
:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --dark: #1e293b;
    --light: #f8fafc;
    --gray: #94a3b8;
    --success: #10b981;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #f1f5f9 !important;
}

.message-user {
    background: white !important;
    border-left: 4px solid var(--primary) !important;
}

.message-assistant {
    background: white !important;
    border-left: 4px solid var(--success) !important;
}

.code-block {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
    font-family: 'Fira Code', monospace !important;
    padding: 1rem !important;
    border-radius: 0.5rem !important;
    margin: 0.5rem 0 !important;
}

.settings-panel {
    background: #f8fafc !important;
    padding: 1rem !important;
    border-radius: 0.5rem !important;
    margin-bottom: 1rem !important;
}

.avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.avatar-user { background: var(--primary) !important; }
.avatar-bot { background: var(--success) !important; }
"""

with gr.Blocks(css=custom_css, title="Qwen2.5 Coder - AI Assistant") as demo:
    # Header
    gr.Markdown("""
    <div class="flex items-center justify-between p-4 border-b">
        <h1 class="text-xl font-semibold">Chat with Qwen2.5 Coder</h1>
        <div class="flex gap-2">
            <button class="p-2 rounded-full hover:bg-gray-100">
                <i class="fas fa-cog text-gray-500"></i>
            </button>
            <button class="p-2 rounded-full hover:bg-gray-100">
                <i class="fas fa-question-circle text-gray-500"></i>
            </button>
        </div>
    </div>
    """)
    
    # Main Content
    with gr.Row():
        # Sidebar
        with gr.Column(scale=1, min_width=256):
            with gr.Blocks():
                gr.Markdown("""
                <div class="p-4 border-b flex items-center gap-3">
                    <div class="avatar avatar-bot text-white">Q</div>
                    <div>
                        <h2 class="font-semibold">Qwen2.5 Coder</h2>
                        <p class="text-xs text-gray-500">32B Instruct</p>
                    </div>
                </div>
                """)
                
                gr.Button("New Chat", variant="primary", size="sm", icon="fa-plus")
                gr.Markdown("""<div class="p-2 text-sm font-medium text-gray-500">Recent Chats</div>""")
                gr.Chatbot(label="Chat History", elem_classes="overflow-y-auto h-[calc(100vh-240px)]")

        # Main Chat Area
        with gr.Column(scale=3):
            chatbot = gr.Chatbot(
                elem_classes="h-[calc(100vh-240px)] overflow-y-auto",
                bubble_full_width=False,
                avatar_images=(
                    None, 
                    "https://i.ibb.co/4sYt3yd/robot.png"  # Replace with your bot avatar
                )
            )
            
            # Settings Panel
            with gr.Accordion("Settings", open=False, elem_classes="settings-panel"):
                system_msg = gr.Textbox(
                    "You are a helpful AI assistant that specializes in coding and technical questions.",
                    label="System Message"
                )
                max_tokens = gr.Slider(1, 200000, 512, label="Max Tokens")
                temperature = gr.Slider(0.1, 4.0, 0.7, label="Temperature")
                top_p = gr.Slider(0.1, 1.0, 0.95, label="Top-p")

            # Input Area
            with gr.Row():
                msg = gr.Textbox(
                    placeholder="Type your message here...",
                    lines=2,
                    max_lines=8,
                    autofocus=True,
                    container=False,
                )
                submit_btn = gr.Button("Send", variant="primary", size="sm", icon="fa-paper-plane")

            gr.Markdown("""
            <p class="text-xs text-gray-500 mt-2">
                Qwen2.5 Coder may produce inaccurate information about people, places, or facts.
            </p>
            """)

    # Event Handlers
    msg.submit(
        respond,
        [msg, chatbot, system_msg, max_tokens, temperature, top_p],
        [chatbot, msg],
        api_name="respond"
    ).then(lambda: None, None, msg, queue=False)
    
    submit_btn.click(
        respond,
        [msg, chatbot, system_msg, max_tokens, temperature, top_p],
        [chatbot, msg],
        api_name="respond"
    )

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