Update app.py

app.py

@@ -3,181 +3,65 @@ from huggingface_hub import InferenceClient
 from typing import List, Dict
 
 # ---------------------------
-# QUANTUM NEURAL INTERFACE
+# L U A U S T A T I C T H E M E
 # ---------------------------
-
 custom_css = """
-/* ═══════════════════════════════════════════ */
-/*         CORE SYSTEM ARCHITECTURE            */
-/* ═══════════════════════════════════════════ */
-@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');
-:root {
-    --primary-glow: #00fff7;
-    --secondary-glow: #7b2ff7;
-    --danger-glow: #ff006e;
-    --neural-dark: #0a0e27;
-    --glass-bg: rgba(255, 255, 255, 0.03);
-}
-* {
-    font-family: 'Orbitron', monospace !important;
-}
+/* PAGE BACKGROUND */
 body, .gradio-container {
-    margin: 0;
-    padding: 0;
-    background: var(--neural-dark) !important;
+    background: linear-gradient(135deg, #141e30, #243b55) !important;
     color: white !important;
-    position: relative;
-    overflow-x: hidden;
-}
-.gradio-container::before {
-    content: "";
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: 
-        radial-gradient(circle at 20% 50%, rgba(123, 47, 247, 0.15) 0%, transparent 50%),
-        radial-gradient(circle at 80% 80%, rgba(0, 255, 247, 0.15) 0%, transparent 50%),
-        radial-gradient(circle at 40% 20%, rgba(255, 0, 110, 0.1) 0%, transparent 50%);
-    animation: backgroundPulse 15s ease-in-out infinite;
-    pointer-events: none;
-    z-index: 0;
-}
-@keyframes backgroundPulse {
-    0%, 100% { opacity: 1; transform: scale(1); }
-    50% { opacity: 0.8; transform: scale(1.1); }
-}
-.gradio-container::after {
-    content: "";
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-image: 
-        radial-gradient(2px 2px at 20% 30%, white, transparent),
-        radial-gradient(2px 2px at 60% 70%, var(--primary-glow), transparent),
-        radial-gradient(1px 1px at 50% 50%, var(--secondary-glow), transparent),
-        radial-gradient(1px 1px at 80% 10%, var(--danger-glow), transparent);
-    background-size: 200% 200%;
-    animation: particleFloat 20s linear infinite;
-    opacity: 0.4;
-    pointer-events: none;
-    z-index: 0;
-}
-@keyframes particleFloat {
-    0% { background-position: 0% 0%; }
-    100% { background-position: 100% 100%; }
 }
+/* TITLE */
 #title {
-    position: relative;
-    font-size: 48px;
+    font-size: 42px;
     font-weight: 900;
     text-align: center;
-    margin: 30px 0;
-    background: linear-gradient(90deg, var(--primary-glow), var(--secondary-glow), var(--danger-glow), var(--primary-glow));
-    background-size: 300% 100%;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    animation: gradientFlow 6s linear infinite, titlePulse 3s ease-in-out infinite;
-    filter: drop-shadow(0 0 20px var(--primary-glow)) drop-shadow(0 0 40px var(--secondary-glow));
-    letter-spacing: 4px;
-    z-index: 10;
+    margin-bottom: 10px;
+    color: #00f7ff;
+    text-shadow: 0 0 20px #00f7ff;
 }
-@keyframes gradientFlow {
-    0% { background-position: 0% 50%; }
-    100% { background-position: 300% 50%; }
-}
-@keyframes titlePulse {
-    0%, 100% { transform: scale(1); }
-    50% { transform: scale(1.02); }
-}
-#title::before {
-    content: "";
-    position: absolute;
-    top: -10px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 80%;
-    height: 3px;
-    background: linear-gradient(90deg, transparent, var(--primary-glow), transparent);
-    animation: scanLine 3s linear infinite;
-}
-@keyframes scanLine {
-    0%, 100% { opacity: 0; }
-    50% { opacity: 1; }
-}
-.chatbot {
+/* CHATBOT BOX */
+.gr-chatbot {
     border-radius: 20px !important;
-    background: var(--glass-bg) !important;
-    backdrop-filter: blur(20px) saturate(180%) !important;
-    border: 1px solid rgba(0, 255, 247, 0.2) !important;
-    box-shadow: 
-        0 8px 32px rgba(0, 0, 0, 0.5),
-        inset 0 0 40px rgba(0, 255, 247, 0.05),
-        0 0 80px rgba(123, 47, 247, 0.3) !important;
-    position: relative;
-    overflow: hidden;
-    animation: chatbotIntro 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
-    z-index: 10;
-}
-@keyframes chatbotIntro {
-    0% { opacity: 0; transform: translateY(30px) scale(0.95); }
-    100% { opacity: 1; transform: translateY(0) scale(1); }
+    box-shadow: 0 0 25px rgba(0,255,255,0.4) !important;
+    background: rgba(0, 0, 0, 0.25) !important;
+    backdrop-filter: blur(10px) !important;
 }
-.message.user, .user {
-    background: linear-gradient(135deg, rgba(0, 255, 247, 0.2), rgba(0, 200, 255, 0.1)) !important;
-    border-left: 3px solid var(--primary-glow) !important;
-    border-radius: 15px 15px 5px 15px !important;
-    padding: 15px !important;
-    box-shadow: 
-        0 4px 15px rgba(0, 255, 247, 0.3),
-        inset 0 0 20px rgba(0, 255, 247, 0.1) !important;
-    position: relative;
-    overflow: hidden;
-    transition: all 0.3s ease;
+/* USER MESSAGES */
+.message.user {
+    background: rgba(0, 200, 255, 0.3) !important;
+    border-radius: 15px !important;
+    padding: 10px !important;
+    animation: fadeIn 0.3s ease-out;
 }
-.message.bot, .bot {
-    background: linear-gradient(135deg, rgba(123, 47, 247, 0.2), rgba(147, 51, 234, 0.1)) !important;
-    border-left: 3px solid var(--secondary-glow) !important;
-    border-radius: 15px 15px 15px 5px !important;
-    padding: 15px !important;
-    box-shadow: 
-        0 4px 15px rgba(123, 47, 247, 0.3),
-        inset 0 0 20px rgba(123, 47, 234, 0.1) !important;
-    position: relative;
-    overflow: hidden;
-    transition: all 0.3s ease;
+/* BOT MESSAGES */
+.message.bot {
+    background: rgba(0, 255, 110, 0.25) !important;
+    border-radius: 15px !important;
+    padding: 10px !important;
+    animation: slideUp 0.4s ease-out;
 }
-textarea, input[type="text"] {
+/* INPUT TEXTBOX */
+textarea {
     border-radius: 15px !important;
-    background: var(--glass-bg) !important;
+    background: rgba(255,255,255,0.1) !important;
     backdrop-filter: blur(10px) !important;
-    border: 1px solid rgba(0, 255, 247, 0.3) !important;
     color: white !important;
-    padding: 15px !important;
-    box-shadow: 
-        0 4px 15px rgba(0, 0, 0, 0.3),
-        inset 0 0 20px rgba(0, 255, 247, 0.05) !important;
-    transition: all 0.3s ease;
-    font-size: 14px !important;
 }
-textarea:focus, input[type="text"]:focus {
-    outline: none !important;
-    border: 1px solid var(--primary-glow) !important;
-    box-shadow: 
-        0 0 30px rgba(0, 255, 247, 0.6),
-        inset 0 0 30px rgba(0, 255, 247, 0.1) !important;
-    transform: scale(1.01);
+/* ANIMATIONS */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateX(10px); }
+    to { opacity: 1; transform: translateX(0); }
+}
+@keyframes slideUp {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
 }
 """
 
 # ---------------------------
-# NEURAL PROCESSING CORE
+# L U A U  B O T  L O G I C
 # ---------------------------
-
 def respond(
     message,
     history: List[Dict[str, str]],
@@ -185,12 +69,15 @@ def respond(
     max_tokens,
     temperature,
     top_p,
-    hf_token,
+    hf_token: gr.OAuthToken,
 ):
+    """
+    Generates the AI response using HuggingFace InferenceClient with streaming.
+    """
+    # Inject Luau personality
     system_message = (
-        "You are a highly advanced AI system. "
-        "Provide precise, intelligent responses with technical accuracy. "
-        "Maintain a professional and sophisticated tone."
+        "You are Luau, a friendly, stylish AI assistant. "
+        "You speak clearly and helpfully. Respond in a calm and fun tone."
     )
 
     client = InferenceClient(
@@ -213,81 +100,59 @@ def respond(
     ):
         choices = getattr(msg, "choices", [])
         token = ""
-
         if len(choices) and getattr(choices[0].delta, "content", None):
             token = choices[0].delta.content
-
         response += token
         yield response
 
 # ---------------------------
-# INTERFACE INITIALIZATION
+# U I + A N I M A T I O N S
 # ---------------------------
-
-with gr.Blocks(css=custom_css, theme=gr.themes.Base()) as demo:
-    gr.HTML("<div id='title'>NEURAL QUANTUM INTERFACE</div>")
+with gr.Blocks(css=custom_css) as demo:
+    gr.HTML("<div id='title'>⭐ Meet Luau — Your AI Companion ⭐</div>")
 
     with gr.Row():
         with gr.Column(scale=4):
             chatbot = gr.Chatbot(
-                label="SYSTEM CORE",
-                type="messages",
-                height=600,
-                elem_classes=["chatbot"]
+                label="LUAU AI",
+                elem_classes=["gr-chatbot"],
+                height=500,
+                type="messages"
             )
 
             with gr.Row():
                 msg = gr.Textbox(
-                    label="INPUT STREAM",
-                    placeholder="Initialize command sequence...",
+                    placeholder="Type a message...",
                     scale=4
                 )
-                submit = gr.Button("TRANSMIT", scale=1)
+                submit = gr.Button("Send", scale=1)
 
         with gr.Column(scale=1):
             gr.LoginButton()
-            gr.Markdown("### SYSTEM PARAMETERS")
-
             system_message_box = gr.Textbox(
-                value="Advanced AI System",
-                label="CORE DIRECTIVE"
-            )
-            max_tokens = gr.Slider(
-                minimum=1,
-                maximum=2048,
-                value=512,
-                step=1,
-                label="TOKEN LIMIT"
-            )
-            temperature = gr.Slider(
-                minimum=0.1,
-                maximum=2.0,
-                value=0.7,
-                step=0.1,
-                label="THERMAL INDEX"
-            )
-            top_p = gr.Slider(
-                minimum=0.1,
-                maximum=1.0,
-                value=0.9,
-                step=0.05,
-                label="PROBABILITY THRESHOLD"
+                value="You are Luau, a friendly AI.",
+                label="System Message"
             )
-
-            clear = gr.Button("RESET SYSTEM")
+            max_tokens_slider = gr.Slider(1, 2048, value=450, step=1, label="Max Tokens")
+            temperature_slider = gr.Slider(0.1, 4.0, value=1.0, step=0.1, label="Temperature")
+            top_p_slider = gr.Slider(0.1, 1.0, value=0.9, step=0.05, label="Top-p")
+            clear = gr.Button("Clear Chat")
 
     # Event handlers
     msg.submit(
         respond,
-        [msg, chatbot, system_message_box, max_tokens, temperature, top_p],
+        [msg, chatbot, system_message_box, max_tokens_slider, temperature_slider, top_p_slider, gr.LoginButton()],
         [chatbot]
     )
     submit.click(
         respond,
-        [msg, chatbot, system_message_box, max_tokens, temperature, top_p],
+        [msg, chatbot, system_message_box, max_tokens_slider, temperature_slider, top_p_slider, gr.LoginButton()],
         [chatbot]
     )
     clear.click(lambda: None, None, chatbot, queue=False)
 
+# ---------------------------
+# Launch
+# ---------------------------
 if __name__ == "__main__":
     demo.launch()