Update index.html

index.html

@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>MC Rodrigo AI Chatbot</title>
 <style>
-@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap');
+@import url('fonts.googleapis.com');
 * { margin:0; padding:0; box-sizing:border-box; font-family:'Share Tech Mono', monospace; }
 body {
     background: linear-gradient(135deg, #000000, #1a0033, #33001a);
@@ -14,225 +14,119 @@ body {
     display:flex;
     flex-direction:column;
     overflow-x:hidden;
-    position:relative;
-}
-body::before {
-    content:"";
-    position:absolute;
-    top:0; left:0; width:100%; height:100%;
-    background-image:
-        radial-gradient(circle at 20% 30%, rgba(0, 255, 157, 0.05) 2px, transparent 2px),
-        radial-gradient(circle at 60% 70%, rgba(128, 0, 255, 0.05) 2px, transparent 2px),
-        radial-gradient(circle at 80% 20%, rgba(255, 0, 128, 0.05) 2px, transparent 2px);
-    background-size: 100px 100px, 150px 150px, 120px 120px;
-    opacity:0.3;
-    z-index:-1;
-    animation: scanlines 0.5s linear infinite;
-}
-@keyframes scanlines {
-    0% { background-position: 0 0, 0 0, 0 0; }
-    100% { background-position: 0 100px, 0 150px, 0 120px; }
 }
 header {
     text-align:center;
     padding:20px;
     background: rgba(0, 0, 0, 0.85);
-    backdrop-filter: blur(10px);
     border-bottom:3px solid #00ff9d;
     box-shadow: 0 0 30px rgba(0, 255, 157, 0.3);
 }
 h1 { 
     font-size:2.5rem; 
-    margin-bottom:10px; 
-    text-shadow:0 0 10px #00ff9d, 0 0 20px #00ff9d; 
-    animation: textGlitch 3s infinite; 
     font-family:'Orbitron', sans-serif;
-    font-weight:900;
     letter-spacing:2px;
 }
-@keyframes textGlitch {
-    0%, 100% { transform:translateX(0); text-shadow:0 0 10px #00ff9d, 0 0 20px #00ff9d; }
-    95% { transform:translateX(0); }
-    96% { transform:translateX(-1px); text-shadow:0 0 10px #ff009d, 0 0 20px #ff009d; }
-    97% { transform:translateX(1px); text-shadow:0 0 10px #009dff, 0 0 20px #009dff; }
-    98% { transform:translateX(0); }
-}
-.subtitle { 
-    font-size:1.2rem; 
-    color:#00ff9d; 
-    font-family:'Orbitron', sans-serif;
-    text-shadow:0 0 5px #00ff9d;
-    animation: pulse 2s infinite;
-}
-@keyframes pulse { 0%, 100% { opacity:1; } 50% { opacity:0.7; } }
-.techno-grid {
-    position:absolute;
-    top:0; left:0; width:100%; height:100%;
-    background-image:
-        linear-gradient(rgba(0, 255, 157, 0.03) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(0, 255, 157, 0.03) 1px, transparent 1px);
-    background-size: 50px 50px;
-    z-index:-2;
-    animation: gridMove 20s linear infinite;
-}
-@keyframes gridMove { 0% { transform:translate(0, 0); } 100% { transform:translate(-50px, -50px); } }
-main { flex:1; max-width:800px; margin:20px auto; width:100%; padding:0 20px; }
 .chat-section {
+    flex:1;
+    max-width:800px;
+    margin:20px auto;
+    width:100%;
     background: rgba(0, 0, 0, 0.85);
     border-radius:15px;
     padding:20px;
-    backdrop-filter: blur(10px);
-    box-shadow:0 0 50px rgba(0, 255, 157, 0.2);
+    border:2px solid #00ff9d;
     display:flex;
     flex-direction:column;
-    border:2px solid #00ff9d;
-    position:relative;
-    height:calc(100vh - 250px);
-    overflow:hidden;
 }
-.chat-messages { 
+#chatMessages { 
     flex:1; 
     overflow-y:auto; 
-    padding:10px; 
     margin-bottom:20px; 
     display:flex; 
     flex-direction:column; 
-    gap:15px; 
-}
-.message { 
-    max-width:80%; 
-    padding:12px 15px; 
-    border-radius:8px; 
-    position:relative; 
-    animation: fadeIn 0.3s ease-in-out;
-    border:1px solid;
-    font-size:0.9rem;
-}
-@keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
-.user-message { 
-    align-self:flex-end; 
-    background:rgba(0, 50, 30, 0.4); 
-    color:#00ff9d; 
-    border-color:rgba(0, 255, 157, 0.5);
-}
-.ai-message { 
-    align-self:flex-start; 
-    background:rgba(20, 0, 40, 0.4); 
-    color:#00ff9d; 
-    border-color:rgba(128, 0, 255, 0.5);
+    gap:10px; 
 }
-.ai-message::before {
-    content:"RODRIGO_SYS_";
-    position:absolute;
-    top:-8px;
-    left:10px;
-    font-size:0.6rem;
-    color:#8000ff;
-    font-family:'Orbitron', sans-serif;
-}
-.typing-indicator { 
-    display:none; 
-    align-self:flex-start; 
-    padding:12px 15px; 
-    background:rgba(20, 0, 40, 0.4); 
-    border-radius:8px; 
-    color: #8000ff;
-    font-size: 0.8rem;
-}
-.typing-indicator.active { display:block; }
+.message { padding:10px; border-radius:8px; border:1px solid; max-width:85%; }
+.user { align-self:flex-end; background:rgba(0, 50, 30, 0.4); border-color:#00ff9d; }
+.bot { align-self:flex-start; background:rgba(20, 0, 40, 0.4); border-color:#8000ff; }
+.status-bar { font-size: 0.7rem; color: #8000ff; margin-bottom: 10px; text-align: center; }
 .chat-input { display:flex; gap:10px; }
-.chat-input input { 
-    flex:1; 
-    padding:12px 15px; 
-    border-radius:25px; 
-    background:rgba(0, 255, 157, 0.1); 
-    color:#00ff9d; 
-    border:1px solid rgba(0, 255, 157, 0.3); 
-}
-.chat-input button { 
-    padding:12px 20px; 
-    border-radius:25px; 
-    background:linear-gradient(45deg, #00ff9d, #8000ff);
-    color:#000; 
-    font-weight:bold; 
-    cursor:pointer; 
-    font-family:'Orbitron', sans-serif;
-}
+input { flex:1; padding:12px; background:rgba(0, 255, 157, 0.1); color:#00ff9d; border:1px solid rgba(0, 255, 157, 0.3); border-radius:25px; }
+button { padding:12px 25px; background:linear-gradient(45deg, #00ff9d, #8000ff); border:none; border-radius:25px; cursor:pointer; font-weight:bold; }
 </style>
 </head>
 <body>
-    <div class="techno-grid"></div>
     <header>
         <h1>MC RODRIGO</h1>
-        <div class="subtitle">DUCKDUCKGO HUMOR CORE v2.6</div>
+        <div style="color:#00ff9d; font-size:0.8rem;">DUCKDUCKGO HUMOR CORE v2.6</div>
     </header>
 
-    <main>
-        <div class="chat-section">
-            <div id="chatMessages" class="chat-messages">
-                <div class="message ai-message">SIGNAL ESTABLISHED. HUMOR PROTOCOLS AT 100%. READY TO ROAST.</div>
-            </div>
-            <div id="typing" class="typing-indicator">INFERRING WITTY COMEBACK...</div>
-            <div class="chat-input">
-                <input type="text" id="userInput" placeholder="TYPE SIGNAL..." autocomplete="off">
-                <button id="sendBtn">TRANSMIT</button>
-            </div>
+    <main class="chat-section">
+        <div id="status" class="status-bar">CONNECTING TO RODRIGO_SYS...</div>
+        <div id="chatMessages"></div>
+        <div class="chat-input">
+            <input type="text" id="userInput" placeholder="TRANSMIT SIGNAL..." autocomplete="off">
+            <button id="sendBtn">SEND</button>
         </div>
     </main>
 
 <script type="module">
+    // Using official 2026 HF Inference library
     import { HfInference } from "cdn.jsdelivr.net";
 
-    // Access the variable securely from Space Settings
+    // 2026 Protocol: Securely accessing Space Variables
     const KEY = window.huggingface?.variables?.HF_TOKEN;
-    const MODEL = "Qwen/Qwen2.5-7B-Instruct";
+    const MODEL = "Qwen/Qwen2.5-7B-Instruct"; // Warm and stable free-tier model
     
-    if (!KEY) console.error("HF_TOKEN missing in Space Settings.");
-
-    const client = new HfInference(KEY);
-    const msgs = document.getElementById('chatMessages');
-    const input = document.getElementById('userInput');
-    const sendBtn = document.getElementById('sendBtn');
-    const typing = document.getElementById('typing');
+    const client = KEY ? new HfInference(KEY) : null;
+    const log = document.getElementById('chatMessages');
+    const status = document.getElementById('status');
 
-    function addMessage(text, role) {
-        const div = document.createElement('div');
-        div.className = `message ${role === 'user' ? 'user-message' : 'ai-message'}`;
-        div.innerText = text;
-        msgs.appendChild(div);
-        msgs.scrollTop = msgs.scrollHeight;
+    if (client) {
+        status.innerText = "✅ SYSTEM ACTIVE: DUCKDUCKGO HUMOR PROTOCOLS LOADED";
+    } else {
+        status.innerText = "❌ ERROR: HF_TOKEN NOT FOUND IN SETTINGS > VARIABLES";
     }
 
     async function handleChat() {
+        const input = document.getElementById('userInput');
         const text = input.value.trim();
-        if (!text || !KEY) return;
+        if (!text || !client) return;
 
-        addMessage(text, 'user');
+        addMsg(text, 'user');
         input.value = '';
-        typing.classList.add('active');
-        sendBtn.disabled = true;
+        status.innerText = "INFERRING WITTY RESPONSE...";
 
         try {
-            const response = await client.chatCompletion({
+            // New 2026 Router endpoint standard
+            const res = await client.chatCompletion({
                 model: MODEL,
                 messages: [
-                    { role: "system", content: "You are MC Rodrigo. Use sharp, sarcastic DuckDuckGo style humor. You are technically superior, brief, and very funny. Avoid cliches." },
+                    { role: "system", content: "You are MC Rodrigo. Use sharp, sarcastic DuckDuckGo-style humor. Be technically superior, brief, and very funny." },
                     { role: "user", content: text }
                 ],
                 max_tokens: 250
             });
 
-            addMessage(response.choices.message.content, 'bot');
+            addMsg(res.choices[0].message.content, 'bot');
+            status.innerText = "✅ SYSTEM READY";
         } catch (err) {
-            addMessage("CONNECTION LOST. REBOOT TOKEN OR CHECK QUOTA.", 'bot');
-        } finally {
-            typing.classList.remove('active');
-            sendBtn.disabled = false;
+            addMsg("SIGNAL LOST: " + err.message, 'bot');
+            status.innerText = "❌ CONNECTION FAILED";
         }
     }
 
-    sendBtn.onclick = handleChat;
-    input.onkeypress = (e) => { if(e.key === 'Enter') handleChat(); };
+    function addMsg(t, type) {
+        const d = document.createElement('div');
+        d.className = `message ${type}`;
+        d.innerText = t;
+        log.appendChild(d);
+        log.scrollTop = log.scrollHeight;
+    }
+
+    document.getElementById('sendBtn').onclick = handleChat;
+    document.getElementById('userInput').onkeypress = (e) => { if(e.key === 'Enter') handleChat(); };
 </script>
 </body>
-</html>
+</html>