Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MC Rodrigo AI Chatbot</title> | |
| <style> | |
| @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); | |
| color: #00ff9d; | |
| min-height: 100vh; | |
| display:flex; | |
| flex-direction:column; | |
| overflow-x:hidden; | |
| } | |
| header { | |
| text-align:center; | |
| padding:20px; | |
| background: rgba(0, 0, 0, 0.85); | |
| border-bottom:3px solid #00ff9d; | |
| box-shadow: 0 0 30px rgba(0, 255, 157, 0.3); | |
| } | |
| h1 { | |
| font-size:2.5rem; | |
| font-family:'Orbitron', sans-serif; | |
| letter-spacing:2px; | |
| } | |
| .chat-section { | |
| flex:1; | |
| max-width:800px; | |
| margin:20px auto; | |
| width:100%; | |
| background: rgba(0, 0, 0, 0.85); | |
| border-radius:15px; | |
| padding:20px; | |
| border:2px solid #00ff9d; | |
| display:flex; | |
| flex-direction:column; | |
| } | |
| #chatMessages { | |
| flex:1; | |
| overflow-y:auto; | |
| margin-bottom:20px; | |
| display:flex; | |
| flex-direction:column; | |
| gap:10px; | |
| } | |
| .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; } | |
| 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> | |
| <header> | |
| <h1>MC RODRIGO</h1> | |
| <div style="color:#00ff9d; font-size:0.8rem;">DUCKDUCKGO HUMOR CORE v2.6</div> | |
| </header> | |
| <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"; | |
| // 2026 Protocol: Securely accessing Space Variables | |
| const KEY = window.huggingface?.variables?.HF_TOKEN; | |
| const MODEL = "Qwen/Qwen2.5-7B-Instruct"; // Warm and stable free-tier model | |
| const client = KEY ? new HfInference(KEY) : null; | |
| const log = document.getElementById('chatMessages'); | |
| const status = document.getElementById('status'); | |
| 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 || !client) return; | |
| addMsg(text, 'user'); | |
| input.value = ''; | |
| status.innerText = "INFERRING WITTY RESPONSE..."; | |
| try { | |
| // 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. Be technically superior, brief, and very funny." }, | |
| { role: "user", content: text } | |
| ], | |
| max_tokens: 250 | |
| }); | |
| addMsg(res.choices[0].message.content, 'bot'); | |
| status.innerText = "✅ SYSTEM READY"; | |
| } catch (err) { | |
| addMsg("SIGNAL LOST: " + err.message, 'bot'); | |
| status.innerText = "❌ CONNECTION FAILED"; | |
| } | |
| } | |
| 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> |