Update app.py

app.py

@@ -1,133 +1,315 @@
 import gradio as gr
 from huggingface_hub import InferenceClient
 
-# ---------------------------------------------------------
-# L U A U S T A U S T I C T H E M E
-# ---------------------------------------------------------
+# ---------------------------
+# L U A U   S T A T I C   T H E M E
+# ---------------------------
 custom_css = """
-/* PAGE BACKGROUND ----------------------------------------------------- */
+/* GLOBAL PAGE BACKGROUND + FONT */
 body, .gradio-container {
-    background: linear-gradient(135deg, #141e30, #243b55);
-    color: #f0f0f0;
-    font-family: 'Inter', sans-serif;
+    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;
 }
 
-/* TITLE ------------------------------------------------------------- */
+/* SCROLLBAR */
+::-webkit-scrollbar {
+    width: 8px;
+}
+::-webkit-scrollbar-track {
+    background: rgba(255,255,255,0.05);
+}
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, #00f7ff, #00ff9d);
+    border-radius: 10px;
+}
+
+/* TITLE */
 #title {
-    font-size: 48px;
+    font-size: 42px;
     font-weight: 900;
     text-align: center;
-    margin-bottom: 24px;
+    margin-top: 10px;
+    margin-bottom: 6px;
     color: #00f7ff;
-    text-shadow: 0 0 30px #00f7ff;
+    text-shadow: 0 0 18px #00f7ff, 0 0 35px rgba(0, 247, 255, 0.9);
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    animation: glowPulse 3s ease-in-out infinite;
 }
 
-/* CHATBOT BOX -------------------------------------------------------- */
+/* SUBTITLE */
+#subtitle {
+    font-size: 14px;
+    text-align: center;
+    color: #9fdfff;
+    opacity: 0.9;
+    margin-bottom: 18px;
+}
+
+/* SIDEBAR */
+.gradio-container .sidebar {
+    background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.8)) !important;
+    border-right: 1px solid rgba(0,247,255,0.2);
+    backdrop-filter: blur(20px);
+    box-shadow: 12px 0 25px rgba(0, 0, 0, 0.7);
+}
+
+/* LOGIN BUTTON */
+button.login-button {
+    border-radius: 999px !important;
+    border: 1px solid rgba(0,247,255,0.4) !important;
+    background: radial-gradient(circle at 0 0, #00f7ff 0%, #006eff 40%, #002b7f 100%) !important;
+    color: white !important;
+    font-weight: 600 !important;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    box-shadow: 0 0 15px rgba(0,247,255,0.6);
+    transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, filter 0.18s ease-out;
+}
+button.login-button:hover {
+    transform: translateY(-1px) scale(1.02);
+    box-shadow: 0 0 24px rgba(0,247,255,0.9);
+    filter: saturate(1.4);
+}
+
+/* CHATBOT CONTAINER */
 .gr-chatbot {
-    border-radius: 20px;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
-    background: rgba(0, 0, 0, 0.25);
-    backdrop-filter: blur(10px);
+    border-radius: 24px !important;
+    box-shadow: 0 0 35px rgba(0,255,255,0.42), 0 0 60px rgba(0,0,0,0.9) !important;
+    background: radial-gradient(circle at 0 0, rgba(0,247,255,0.1), rgba(0,0,0,0.85)) !important;
+    border: 1px solid rgba(0,247,255,0.45) !important;
+    overflow: hidden !important;
+}
+
+/* CHAT AREA BACKGROUND */
+.gr-chatbot > div {
+    background: linear-gradient(145deg, rgba(0,0,0,0.74), rgba(3,16,40,0.95)) !important;
+}
+
+/* USER & BOT MESSAGES (Gradio v4 structure) */
+.message.user, .message.bot {
+    border-radius: 16px !important;
+    padding: 10px 12px !important;
+    margin: 4px 0 !important;
+    max-width: 92%;
+    line-height: 1.45;
+    font-size: 14px;
+    backdrop-filter: blur(12px);
+    border: 1px solid transparent;
 }
 
-/* USER MESSAGES ----------------------------------------------------- */
+/* USER MESSAGES */
 .message.user {
-    background: rgba(0, 200, 255, 0.2);
-    border-radius: 15px;
-    padding: 12px 18px;
-    animation: typing 0.6s forwards;
+    background: linear-gradient(135deg, rgba(0, 200, 255, 0.35), rgba(0, 76, 255, 0.35)) !important;
+    border-color: rgba(0,247,255,0.6);
+    box-shadow: 0 0 12px rgba(0,247,255,0.5);
+    animation: fadeInRight 0.35s ease-out;
 }
 
-/* BOT MESSAGES ------------------------------------------------------ */
+/* BOT MESSAGES */
 .message.bot {
-    background: rgba(0, 255, 110, 0.15);
-    border-radius: 15px;
-    padding: 12px 18px;
-    animation: fadeIn 0.4s ease-out;
+    background: linear-gradient(135deg, rgba(62, 252, 167, 0.3), rgba(20, 140, 90, 0.18)) !important;
+    border-color: rgba(0,255,153,0.6);
+    box-shadow: 0 0 12px rgba(0,255,153,0.4);
+    animation: fadeInUp 0.4s ease-out;
+}
+
+/* AVATARS (if enabled) */
+.message.user .avatar, .message.bot .avatar {
+    filter: drop-shadow(0 0 5px rgba(0,247,255,0.8));
+}
+
+/* INPUT AREA */
+textarea, .gr-textbox textarea {
+    border-radius: 18px !important;
+    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(0,0,0,0.7)) !important;
+    backdrop-filter: blur(18px) !important;
+    color: #f7feff !important;
+    border: 1px solid rgba(0,247,255,0.45) !important;
+    box-shadow: 0 0 18px rgba(0,247,255,0.3);
+    resize: none !important;
+}
+textarea::placeholder {
+    color: rgba(200, 240, 255, 0.65);
 }
 
-/* INPUT TEXTBOX ----------------------------------------------------- */
-textarea {
-    border-radius: 15px;
-    background: rgba(255,255,255,0.1);
-    color: #ffffff;
-    padding: 12px;
-    border: none;
-    outline: none;
+/* GLOBAL BUTTON STYLE */
+button {
+    border-radius: 999px !important;
+    font-weight: 600 !important;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    border: 1px solid rgba(0,247,255,0.45) !important;
+    background: linear-gradient(120deg, #00f7ff, #00ff9d) !important;
+    color: #021318 !important;
+    box-shadow: 0 0 15px rgba(0,247,255,0.7);
+    transition: transform 0.16s ease-out, box-shadow 0.16s ease-out, filter 0.16s ease-out;
+}
+button:hover {
+    transform: translateY(-1px) scale(1.02);
+    box-shadow: 0 0 24px rgba(0,247,255,0.95);
+    filter: saturation(1.3);
+}
+
+/* SLIDERS + LABELS */
+label, .gr-slider label, .gr-textbox label {
+    font-weight: 600 !important;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    font-size: 11px;
+    color: #88f6ff !important;
 }
 
-/* ANIMATIONS -------------------------------------------------------- */
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(10px); }
-    to   { opacity: 1; transform: translateY(0); }
+input[type="range"]::-webkit-slider-thumb {
+    background: #00f7ff;
 }
-@keyframes typing {
-    0%  { width: 0; opacity: 0.4; }
-    50% { opacity: 0.6; }
-    100%{ width: 100%; opacity: 1; }
+input[type="range"]::-moz-range-thumb {
+    background: #00f7ff;
+}
+
+/* FOOTER / POWERED BY */
+#footer {
+    text-align: center;
+    color: #7bc5ff;
+    font-size: 11px;
+    margin-top: 10px;
+    opacity: 0.75;
+}
+#footer a {
+    color: #00f7ff;
+    text-decoration: none;
+}
+#footer a:hover {
+    text-decoration: underline;
+}
+
+/* ANIMATIONS */
+@keyframes glowPulse {
+    0% {
+        text-shadow: 0 0 10px #00f7ff, 0 0 25px rgba(0, 247, 255, 0.7);
+    }
+    50% {
+        text-shadow: 0 0 20px #00f7ff, 0 0 55px rgba(0, 247, 255, 1);
+    }
+    100% {
+        text-shadow: 0 0 10px #00f7ff, 0 0 25px rgba(0, 247, 255, 0.7);
+    }
+}
+
+@keyframes fadeInRight {
+    from { opacity: 0; transform: translateX(14px); }
+    to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes fadeInUp {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
 }
 """
 
-# ---------------------------------------------------------
-# L U A U B O T L O G I C
-# ---------------------------------------------------------
+# ---------------------------
+# L U A U   B O T   L O G I C
+# ---------------------------
 def respond(
-    message: str,
+    message,
     history: list[dict[str, str]],
-    system_message: str,
-    hf_token: str,
+    system_message,
+    max_tokens,
+    temperature,
+    top_p,
+    hf_token: gr.OAuthToken,
 ):
-    """
-    Stream the assistant's response.
-    """
-    # Prepare the system prompt
-    system_prompt = (
+    # Inject Luau personality, but still allow overriding a bit via UI
+    merged_system_message = (
         "You are Luau, a friendly, stylish AI assistant. "
-        "Speak clearly, helpfully, and keep a calm, fun tone."
+        "You speak clearly and helpfully. Respond in a calm and fun tone. "
+        "Keep answers informative and concise unless asked for more detail. "
+        f"Extra instructions: {system_message}"
     )
 
-    # Initialise HuggingFace inference client
     client = InferenceClient(
-        token=hf_token,
-        model="openai/gpt-oss-20b"   # replace with your actual model ID
+        token=hf_token.token,
+        model="openai/gpt-oss-20b"
     )
 
-    # Build the message list for the LLM
-    messages = [{"role": "system", "content": system_prompt}]
+    messages = [{"role": "system", "content": merged_system_message}]
     messages.extend(history)
     messages.append({"role": "user", "content": message})
 
-    # Stream tokens from the model
     response = ""
-    for chunk in client.chat_completion(
-        messages,
-        temperature=1.0,
-        top_p=0.9,
+    # Streaming response
+    for msg in client.chat_completion(
+        messages=messages,
+        max_tokens=max_tokens,
         stream=True,
+        temperature=temperature,
+        top_p=top_p,
     ):
-        token = chunk.choices[0].delta.content or ""
+        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
 
-# ---------------------------------------------------------
-# UI + ANIMATIONS
-# ---------------------------------------------------------
+
+# ---------------------------
+#  U I   +   A N I M A T I O N S
+# ---------------------------
+
 chatbot = gr.ChatInterface(
-    respond,
+    fn=respond,
     type="messages",
     title="⭐ L U A U — The Animated AI Chatbot ⭐",
     css=custom_css,
     additional_inputs=[
-        gr.Textbox(value="You are Luau, a friendly AI.", label="System Message"),
-        gr.Textbox(value="", label="HuggingFace Token", placeholder="hf_..."),
+        gr.Textbox(
+            value="You are Luau, a friendly AI.",
+            label="System Message",
+            lines=2,
+        ),
+        # Remove artificial cap, allow big values; actual cap depends on model
+        gr.Slider(
+            minimum=1,
+            maximum=4096,
+            value=1024,
+            step=1,
+            label="Max Tokens",
+        ),
+        gr.Slider(
+            minimum=0.1,
+            maximum=4.0,
+            value=1.0,
+            step=0.1,
+            label="Temperature",
+        ),
+        gr.Slider(
+            minimum=0.1,
+            maximum=1.0,
+            value=0.9,
+            step=0.05,
+            label="Top-p",
+        ),
     ],
 )
 
-with gr.Blocks(css=custom_css) as demo:
+with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
     gr.HTML("<div id='title'>⭐ Meet Luau — Your AI Companion ⭐</div>")
-    with gr.Sidebar():
-        gr.LoginButton()
-    chatbot.render()
+    gr.HTML("<div id='subtitle'>Neon-lit, glassy, and ready to chat in style.</div>")
+
+    with gr.Row(equal_height=True):
+        with gr.Column(scale=1):
+            with gr.Sidebar():
+                gr.HTML("<h3 style='color:#9ffcff;letter-spacing:0.15em;text-transform:uppercase;font-size:11px;margin-top:0;'>Luau Panel</h3>")
+                gr.LoginButton()
+        with gr.Column(scale=4):
+            chatbot.render()
+
+    gr.HTML(
+        "<div id='footer'>Powered by <a href='https://huggingface.co' target='_blank'>Hugging Face</a> • Styled for Luau</div>"
+    )
 
 if __name__ == "__main__":
-    demo.launch(share=False)
+    demo.launch()