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("""
""")
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("""
Ready
""")
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("""
Login required for free inference API access
""")
# 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("""
""")
# Update system message when preset changes
system_preset.change(
fn=update_system_message,
inputs=[system_preset],
outputs=[system_message]
)
if __name__ == "__main__":
demo.launch()