app.py

import gradio as gr
from huggingface_hub import InferenceClient

# Model configuration - easy to add more models
MODELS = {
    "Lancode 1.7B": "jkleeedo/lancode-1.7b",
    "Lancode 0.6B": "jkleeedo/lancode-0.6b",
}

# Default system messages for different use cases
DEFAULT_SYSTEM_MESSAGES = {
    "General Assistant": "You are a helpful and friendly AI assistant.",
    "Code Expert": "You are an expert programmer. Provide clear, well-commented code with explanations.",
    "Creative Writer": "You are a creative writing assistant. Help with stories, poems, and creative content.",
    "Technical Explainer": "You explain complex technical concepts in simple, accessible terms.",
}

CSS = """
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --secondary: #a855f7;
    --accent: #ec4899;
    --bg-dark: #0f0f23;
    --bg-card: #1a1a2e;
    --bg-input: #16162a;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --border: #2d2d44;
}

body {
    font-family: 'Inter', sans-serif !important;
    background: linear-gradient(135deg, var(--bg-dark) 0%, #1a1025 50%, #0f0f23 100%) !important;
    min-height: 100vh;
}

.gradio-container {
    background: transparent !important;
    max-width: 1200px !important;
}

/* Header styling */
.header-container {
    text-align: center;
    padding: 2rem 0;
    margin-bottom: 1rem;
}

.header-title {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 50%, var(--accent) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    margin-bottom: 0.5rem !important;
}

.header-subtitle {
    color: var(--text-secondary) !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
}

/* Card styling */
.card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1) !important;
}

/* Input styling */
.input-container {
    background: var(--bg-input) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
}

/* Button styling */
.primary-btn {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.primary-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4) !important;
}

/* Slider styling */
input[type="range"] {
    accent-color: var(--primary) !important;
}

/* Chat styling */
.chatbot {
    background: var(--bg-card) !important;
    border-radius: 16px !important;
    border: 1px solid var(--border) !important;
}

.chat-message {
    border-radius: 12px !important;
}

/* Dropdown styling */
select {
    background: var(--bg-input) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    color: var(--text-primary) !important;
}

/* Sidebar styling */
.sidebar {
    background: var(--bg-card) !important;
    border-radius: 16px !important;
    border: 1px solid var(--border) !important;
    padding: 1.5rem !important;
}

/* Model badge */
.model-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(168, 85, 247, 0.2) 100%);
    border: 1px solid var(--primary);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.model-indicator {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Footer */
.footer {
    text-align: center;
    padding: 2rem 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.footer a {
    color: var(--primary);
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}
"""


def respond(
    message,
    history,
    model_name,
    system_message,
    max_tokens,
    temperature,
    top_p,
    hf_token,
):
    """Generate a response from the selected model."""
    if hf_token is None or not hf_token.token:
        yield "⚠️ Please log in with your Hugging Face account to use the inference API."
        return
    
    model_id = MODELS.get(model_name, MODELS["Lancode 1.7B"])
    client = InferenceClient(token=hf_token.token, model=model_id)
    
    messages = [{"role": "system", "content": system_message}]
    messages.extend(history)
    messages.append({"role": "user", "content": message})
    
    response = ""
    try:
        for chunk in client.chat_completion(
            messages,
            max_tokens=max_tokens,
            stream=True,
            temperature=temperature,
            top_p=top_p,
        ):
            choices = chunk.choices
            if choices and choices[0].delta.content:
                response += choices[0].delta.content
                yield response
    except Exception as e:
        yield f"❌ Error: {str(e)}"


def update_system_message(preset_name):
    """Update system message based on preset selection."""
    return DEFAULT_SYSTEM_MESSAGES.get(preset_name, DEFAULT_SYSTEM_MESSAGES["General Assistant"])


# Build the interface
with gr.Blocks(css=CSS, title="Lancode Chat") as demo:
    # Header
    gr.HTML("""
        <div class="header-container">
            <h1 class="header-title">🚀 Lancode Chat</h1>
            <p class="header-subtitle">Chat with the Lancode family of language models</p>
        </div>
    """)
    
    with gr.Row():
        # Sidebar with controls
        with gr.Column(scale=1):
            with gr.Group(elem_classes=["sidebar"]):
                gr.Markdown("### ⚙️ Settings")
                
                # Model selector
                model_dropdown = gr.Dropdown(
                    choices=list(MODELS.keys()),
                    value="Lancode 1.7B",
                    label="🤖 Select Model",
                    info="Choose your preferred model version"
                )
                
                # Model badge display
                model_status = gr.HTML("""
                    <div class="model-badge">
                        <span class="model-indicator"></span>
                        <span>Ready</span>
                    </div>
                """)
                
                gr.Markdown("---")
                
                # System message preset
                system_preset = gr.Dropdown(
                    choices=list(DEFAULT_SYSTEM_MESSAGES.keys()),
                    value="General Assistant",
                    label="🎭 Persona",
                    info="Select a conversation style"
                )
                
                # System message
                system_message = gr.Textbox(
                    value=DEFAULT_SYSTEM_MESSAGES["General Assistant"],
                    label="💭 System Message",
                    lines=3,
                    info="Instructions for the AI"
                )
                
                gr.Markdown("---")
                gr.Markdown("### 🔧 Parameters")
                
                # Generation parameters
                max_tokens = gr.Slider(
                    minimum=64,
                    maximum=2048,
                    value=512,
                    step=64,
                    label="Max Tokens",
                    info="Maximum response length"
                )
                
                temperature = gr.Slider(
                    minimum=0.1,
                    maximum=2.0,
                    value=0.7,
                    step=0.1,
                    label="Temperature",
                    info="Higher = more creative, Lower = more focused"
                )
                
                top_p = gr.Slider(
                    minimum=0.1,
                    maximum=1.0,
                    value=0.9,
                    step=0.05,
                    label="Top-p",
                    info="Nucleus sampling threshold"
                )
                
                gr.Markdown("---")
                
                # Login button
                login_btn = gr.LoginButton(
                    "🔑 Login with Hugging Face",
                    variant="primary"
                )
                
                gr.Markdown("""
                    <div style="margin-top: 1rem; font-size: 0.75rem; color: #64748b;">
                        Login required for free inference API access
                    </div>
                """)
        
        # Chat area
        with gr.Column(scale=2):
            chatbot = gr.ChatInterface(
                fn=respond,
                additional_inputs=[
                    model_dropdown,
                    system_message,
                    max_tokens,
                    temperature,
                    top_p,
                ],
                chatbot=gr.Chatbot(
                    elem_classes=["chatbot"],
                    height=500,
                    bubble_full_width=False,
                ),
                textbox=gr.Textbox(
                    placeholder="Type your message here...",
                    container=False,
                    scale=7,
                ),
                submit_btn=gr.Button("➤ Send", variant="primary", scale=1, elem_classes=["primary-btn"]),
                examples=[
                    ["Explain quantum computing in simple terms"],
                    ["Write a Python function to calculate fibonacci numbers"],
                    ["What are the key differences between transformers and RNNs?"],
                    ["Help me brainstorm ideas for a sci-fi short story"],
                ],
                fill_height=True,
            )
    
    # Footer
    gr.HTML("""
        <div class="footer">
            <p>Powered by <a href="https://huggingface.co/jkleeedo" target="_blank">jkleeedo/lancode</a> • 
            Built with <a href="https://gradio.app" target="_blank">Gradio</a></p>
        </div>
    """)
    
    # Update system message when preset changes
    system_preset.change(
        fn=update_system_message,
        inputs=[system_preset],
        outputs=[system_message]
    )

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