Spaces:
Sleeping
Sleeping
File size: 5,870 Bytes
cd27dfd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
<!DOCTYPE html>
<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>
|