app.py

import gradio as gr
from huggingface_hub import InferenceClient

# ---------------------------
# L U A U   T H E M E   (S I M P L E)
# ---------------------------
custom_css = """
/* GLOBAL PAGE BACKGROUND + FONT */
body, .gradio-container {
    background: radial-gradient(circle at top left, #1f2a3c 0%, #050812 40%, #050812 100%) !important;
    color: #f8feff !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
}

/* MAKE CONTENT WIDE AND CENTERED */
.gradio-container .app {
    max-width: 1200px;
    margin: 0 auto;
}

/* SCROLLBAR */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
}
::-webkit-scrollbar-thumb {
    background: #00f7ff;
    border-radius: 10px;
}

/* TITLE */
#title {
    font-size: 40px;
    font-weight: 900;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 6px;
    color: #00f7ff;
}

/* SUBTITLE */
#subtitle {
    font-size: 16px;
    text-align: center;
    color: #c5eaff;
    opacity: 0.9;
    margin-bottom: 18px;
}

/* CHATBOT CONTAINER:
   - BIG HEIGHT
   - EASY TO SEE */
.gr-chatbot {
    border-radius: 20px !important;
    box-shadow: 0 0 25px rgba(0,255,255,0.3), 0 0 40px rgba(0,0,0,0.8) !important;
    background: rgba(3, 16, 40, 0.95) !important;
    border: 1px solid rgba(0,247,255,0.35) !important;
    overflow: hidden !important;
    height: 70vh !important;          /* LARGE CHAT WINDOW */
    min-height: 500px !important;
}

/* CHAT INNER AREA */
.gr-chatbot > div {
    background: linear-gradient(145deg, #050810, #060c18) !important;
}

/* MESSAGE TEXT: BIGGER FONT, GOOD LINE SPACING */
.message.user, .message.bot {
    border-radius: 14px !important;
    padding: 10px 12px !important;
    margin: 6px 0 !important;
    max-width: 92%;
    line-height: 1.6;
    font-size: 16px;
    border: 1px solid transparent;
}

/* USER MESSAGES */
.message.user {
    background: rgba(0, 160, 255, 0.35) !important;
    border-color: rgba(0,200,255,0.7);
}

/* BOT MESSAGES */
.message.bot {
    background: rgba(0, 220, 150, 0.28) !important;
    border-color: rgba(0,255,153,0.6);
}

/* INPUT AREA: BIG, CLEAR, EASY TO CLICK */
textarea, .gr-textbox textarea {
    border-radius: 16px !important;
    background: rgba(15, 30, 50, 0.9) !important;
    color: #f7feff !important;
    border: 1px solid rgba(0,247,255,0.45) !important;
    resize: none !important;
    font-size: 16px;
    padding: 10px 12px !important;
}
textarea::placeholder {
    color: rgba(200, 240, 255, 0.8);
}

/* CONTROL PANEL UNDER CHAT */
#controls-panel {
    margin-top: 16px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(0,247,255,0.4);
}

/* LABELS: CLEAR AND READABLE */
label, .gr-slider label, .gr-textbox label {
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 12px;
    color: #88f6ff !important;
}

/* DESCRIPTIVE TEXT */
.control-help {
    font-size: 13px;
    color: #c9f3ff;
    opacity: 0.9;
    margin-top: 4px;
    margin-bottom: 10px;
}

/* BUTTONS: CLEAR BUT NOT FLASHY */
button {
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid rgba(0,247,255,0.7) !important;
    background: #00bcd4 !important;
    color: #021318 !important;
    font-size: 14px !important;
    padding: 8px 16px !important;
}

/* FOOTER */
#footer {
    text-align: center;
    color: #7bc5ff;
    font-size: 12px;
    margin-top: 10px;
    opacity: 0.85;
}
#footer a {
    color: #00f7ff;
    text-decoration: none;
}
#footer a:hover {
    text-decoration: underline;
}
"""

# ---------------------------
# L U A U   B O T   L O G I C
# ---------------------------
def respond(
    message,
    history: list[dict[str, str]],
    system_message,
    max_tokens,
    temperature,
    top_p,
    hf_token: gr.OAuthToken,
):
    merged_system_message = (
        "You are Luau, a friendly, clear AI assistant. "
        "You explain things simply so anyone can understand. "
        "Use short paragraphs and avoid complex jargon unless the user asks. "
        f"Extra instructions: {system_message}"
    )

    client = InferenceClient(
        token=hf_token.token,
        model="openai/gpt-oss-20b"
    )

    messages = [{"role": "system", "content": merged_system_message}]
    messages.extend(history)
    messages.append({"role": "user", "content": message})

    response = ""
    for msg in client.chat_completion(
        messages=messages,
        max_tokens=max_tokens,
        stream=True,
        temperature=temperature,
        top_p=top_p,
    ):
        choices = getattr(msg, "choices", [])
        token = ""
        if choices and choices[0].delta and choices[0].delta.get("content"):
            token = choices[0].delta["content"]

        response += token
        yield response


# ---------------------------
# U I
# ---------------------------

chatbot = gr.ChatInterface(
    fn=respond,
    type="messages",
    title="Luau — Simple AI Chat",
    css=custom_css,
    additional_inputs=[
        gr.Textbox(
            value="You are Luau, a friendly AI. Explain things simply.",
            label="System Message (optional)",
            lines=2,
        ),
        gr.Slider(
            minimum=64,
            maximum=4096,
            value=1024,
            step=64,
            label="Max Tokens (answer length)",
        ),
        gr.Slider(
            minimum=0.1,
            maximum=2.0,
            value=1.0,
            step=0.1,
            label="Temperature (creativity)",
        ),
        gr.Slider(
            minimum=0.1,
            maximum=1.0,
            value=0.9,
            step=0.05,
            label="Top-p (sampling)",
        ),
    ],
)

with gr.Blocks(css=custom_css) as demo:
    gr.HTML("<div id='title'>Luau</div>")
    gr.HTML("<div id='subtitle'>A clear, easy-to-use AI chat assistant.</div>")

    chatbot.render()

    with gr.Row(elem_id="controls-panel"):
        with gr.Column():
            gr.Markdown("### Controls (optional)")
            gr.Markdown(
                "<div class='control-help'>"
                "<b>System Message</b> – Extra instructions for Luau (you can leave this as it is).<br>"
                "<b>Max Tokens</b> – How long the answer can be (higher = longer).<br>"
                "<b>Temperature</b> – Higher is more creative, lower is more strict.<br>"
                "<b>Top-p</b> – Another way to control randomness; 0.9 is usually fine.<br>"
                "</div>",
                elem_classes=["control-help"],
            )

    gr.HTML(
        "<div id='footer'>Powered by <a href='https://huggingface.co' target='_blank'>Hugging Face</a></div>"
    )

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