Spaces:
Sleeping
Sleeping
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NEUROCORE V10.3 — MICTLÁN</title> | |
| <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script> | |
| <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> | |
| <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&family=JetBrains+Mono&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { --gold: #D4AF37; --obsidian: #050505; } | |
| body { background: #000; color: #e0e0e0; font-family: 'JetBrains Mono', monospace; overflow: hidden; } | |
| .mictlan-header { border-bottom: 2px solid var(--gold); background: rgba(0,0,0,0.9); backdrop-filter: blur(10px); } | |
| .gold-glow { text-shadow: 0 0 10px var(--gold); } | |
| .card-msg { background: rgba(255,255,255,0.03); border: 1px solid rgba(212,175,55,0.2); border-left: 3px solid var(--gold); } | |
| .btn-ritual { background: var(--gold); color: #000; font-family: 'Cinzel Decorative', serif; font-weight: bold; transition: 0.3s; } | |
| .btn-ritual:hover { background: #FFD700; transform: scale(1.05); box-shadow: 0 0 20px var(--gold); } | |
| #batuto-sig { position: absolute; top: 10px; left: 10px; font-family: 'Cinzel Decorative'; color: var(--gold); font-size: 14px; z-index: 50; pointer-events: none; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="batuto-sig">BATUTO-ART</div> | |
| <div id="root"></div> | |
| <script type="text/babel"> | |
| const { useState, useEffect, useRef } = React; | |
| const MODELS = ["DeepSeek-R1-0528", "DeepSeek-V3.1-cb", "Llama-4-Maverick-17B-128E-Instruct", "Qwen3-235B"]; | |
| function App() { | |
| const [tab, setTab] = useState('chat'); | |
| const [chat, setChat] = useState([{ r: 'asst', t: 'El Mictlán te recibe, Rey BATUTO. ¿Qué visión invocamos hoy?' }]); | |
| const [msg, setMsg] = useState(''); | |
| const [loading, setLoading] = useState(false); | |
| const scrollRef = useRef(null); | |
| useEffect(() => { scrollRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [chat]); | |
| const onSend = async () => { | |
| if(!msg) return; | |
| const userMsg = msg; setMsg(''); | |
| setChat(prev => [...prev, { r: 'user', t: userMsg }]); | |
| setLoading(true); | |
| try { | |
| const res = await fetch('/api/chat', { | |
| method: 'POST', | |
| headers: {'Content-Type': 'application/json'}, | |
| body: JSON.stringify({ message: userMsg, model: MODELS[0] }) | |
| }); | |
| const data = await res.json(); | |
| setChat(prev => [...prev, { r: 'asst', t: data.reply }]); | |
| } catch { setChat(prev => [...prev, { r: 'asst', t: 'Error en el portal.' }]); } | |
| setLoading(false); | |
| }; | |
| return ( | |
| <div className="h-screen flex flex-col max-w-md mx-auto border-x border-[#D4AF3733]"> | |
| <header className="p-6 pt-12 mictlan-header text-center"> | |
| <h1 className="text-sm tracking-[0.5em] text-[#D4AF37] gold-glow font-bold uppercase">Neurocore V10.3</h1> | |
| </header> | |
| <nav className="flex bg-black border-b border-[#D4AF3722]"> | |
| {['chat', 'vision'].map(t => ( | |
| <button key={t} onClick={() => setTab(t)} className={`flex-1 py-4 text-[10px] uppercase tracking-widest ${tab === t ? 'text-[#D4AF37] border-b-2 border-[#D4AF37]' : 'opacity-40'}`}>{t}</button> | |
| ))} | |
| </nav> | |
| <main className="flex-1 overflow-y-auto p-4 space-y-4"> | |
| {tab === 'chat' ? ( | |
| <> | |
| {chat.map((m, i) => ( | |
| <div key={i} className={`p-4 rounded-xl card-msg ${m.r === 'user' ? 'ml-8' : 'mr-8'}`}> | |
| <p className="text-xs leading-relaxed">{m.t}</p> | |
| </div> | |
| ))} | |
| <div ref={scrollRef} /> | |
| </> | |
| ) : ( | |
| <div className="text-center space-y-6 pt-10"> | |
| <p className="text-[10px] uppercase tracking-widest opacity-50">Espejo de Obsidiana</p> | |
| <div className="aspect-square bg-white/5 rounded-3xl border border-dashed border-[#D4AF3744] flex items-center justify-center italic text-xs opacity-20">Invocando visiones...</div> | |
| <button className="w-full py-4 btn-ritual rounded-2xl">Manifestar Arte</button> | |
| </div> | |
| )} | |
| </main> | |
| {tab === 'chat' && ( | |
| <footer className="p-4 bg-black flex gap-2"> | |
| <input value={msg} onChange={e => setMsg(e.target.value)} onKeyDown={e => e.key === 'Enter' && onSend()} className="flex-1 bg-white/5 border border-[#D4AF3733] rounded-xl px-4 text-xs outline-none focus:border-[#D4AF37]" placeholder="Escribe al inframundo..." /> | |
| <button onClick={onSend} className="w-12 h-12 btn-ritual rounded-xl">💀</button> | |
| </footer> | |
| )} | |
| </div> | |
| ); | |
| } | |
| ReactDOM.createRoot(document.getElementById("root")).render(<App />); | |
| </script> | |
| </body> | |
| </html> | |