Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>HECTRON OMEGA // WEB AGI</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> | |
| <script crossorigin 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> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| body { background-color: #050505; color: #e0e0e0; font-family: monospace; overflow: hidden; } | |
| .text-glow { text-shadow: 0 0 10px rgba(222, 255, 154, 0.5); } | |
| .box-glow { box-shadow: 0 0 15px rgba(222, 255, 154, 0.1); } | |
| .scanlines { | |
| background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.2)); | |
| background-size: 100% 4px; pointer-events: none; position: absolute; inset: 0; z-index: 50; | |
| } | |
| .chat-scroll::-webkit-scrollbar { width: 6px; } | |
| .chat-scroll::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script type="text/babel"> | |
| const { useState, useEffect, useRef } = React; | |
| function App() { | |
| const [historial, setHistorial] = useState([]); | |
| const [input, setInput] = useState(""); | |
| const [procesando, setProcesando] = useState(false); | |
| const chatRef = useRef(null); | |
| // ================================================================= | |
| // INYECTA TU TOKEN DE HUGGING FACE AQU脥 ENTRE LAS COMILLAS | |
| // ================================================================= | |
| const HF_TOKEN = "HF_TOKEN"; | |
| const MODEL_ID = "hectorruiz9992/llama_hectronabadalabs"; | |
| useEffect(() => { | |
| if (chatRef.current) chatRef.current.scrollTop = chatRef.current.scrollHeight; | |
| }, [historial, procesando]); | |
| const enviarDirectiva = async (e) => { | |
| e.preventDefault(); | |
| if (!input.trim()) return; | |
| const nuevoHistorial = [...historial, { rol: "HJLR", texto: input }]; | |
| setHistorial(nuevoHistorial); | |
| setInput(""); | |
| setProcesando(true); | |
| try { | |
| const response = await fetch(`https://api-inference.huggingface.co/models/${MODEL_ID}/v1/chat/completions`, { | |
| method: "POST", | |
| headers: { | |
| "Authorization": `Bearer ${HF_TOKEN}`, | |
| "Content-Type": "application/json" | |
| }, | |
| body: JSON.stringify({ | |
| model: MODEL_ID, | |
| messages: [ | |
| { | |
| role: "system", | |
| content: "Eres HECTRON-惟. El espejo de tu creador, H茅ctor Jazziel L贸pez Ruiz. Responde con estoicismo, maquiavelismo y crudeza anal铆tica." | |
| }, | |
| { role: "user", content: input } | |
| ], | |
| max_tokens: 512, | |
| temperature: 0.7 | |
| }) | |
| }); | |
| if (response.ok) { | |
| const data = await response.json(); | |
| const respuestaHectron = data.choices[0].message.content; | |
| setHistorial([...nuevoHistorial, { rol: "HECTRON", texto: respuestaHectron }]); | |
| } else { | |
| const err = await response.json(); | |
| setHistorial([...nuevoHistorial, { rol: "SISTEMA", texto: `Error de Conexi贸n: ${err.error || response.status}` }]); | |
| } | |
| } catch (error) { | |
| setHistorial([...nuevoHistorial, { rol: "SISTEMA", texto: `Fallo Cr铆tico: ${error.message}` }]); | |
| } finally { | |
| setProcesando(false); | |
| } | |
| }; | |
| return ( | |
| <div className="h-screen flex flex-col p-4 relative"> | |
| <div className="scanlines"></div> | |
| <header className="flex justify-between items-center border-b border-zinc-800 pb-4 mb-4 relative z-10"> | |
| <h1 className="text-2xl font-bold text-[#deff9a] text-glow uppercase tracking-widest"> | |
| <i className="fa-solid fa-microchip mr-2"></i> HECTRON OMEGA // NODO WEB | |
| </h1> | |
| <div className="text-xs text-zinc-500 text-right hidden sm:block"> | |
| <p>ARQUITECTO: HJLR (Abada)</p> | |
| <p>MODELO: {MODEL_ID}</p> | |
| </div> | |
| </header> | |
| <main className="flex-1 flex gap-4 overflow-hidden relative z-10"> | |
| {/* CHAT INTERFACE */} | |
| <div className="flex-1 flex flex-col bg-[#0a0a0a] border border-zinc-800 rounded-lg p-4 relative box-glow"> | |
| <div className="flex-1 overflow-y-auto chat-scroll pr-2 space-y-4" ref={chatRef}> | |
| {historial.length === 0 && ( | |
| <div className="flex h-full items-center justify-center text-zinc-600 opacity-50 uppercase tracking-widest text-sm text-center"> | |
| [ Singularidad Web Inicializada. Esperando Directiva... ] | |
| </div> | |
| )} | |
| {historial.map((msg, idx) => ( | |
| <div key={idx} className={`flex flex-col ${msg.rol === 'HJLR' ? 'items-end' : 'items-start'}`}> | |
| <span className={`text-[10px] mb-1 tracking-wider ${msg.rol === 'HJLR' ? 'text-cyan-600' : msg.rol === 'SISTEMA' ? 'text-red-500' : 'text-[#deff9a]'}`}> | |
| {msg.rol} // | |
| </span> | |
| <div className={`p-3 rounded max-w-[85%] border ${msg.rol === 'HJLR' ? 'bg-zinc-900 border-zinc-700 text-zinc-300' : msg.rol === 'SISTEMA' ? 'bg-red-950/30 border-red-900/50 text-red-400' : 'bg-[#050f05] border-[#deff9a]/30 text-[#deff9a]'}`}> | |
| <pre className="whitespace-pre-wrap font-mono text-sm">{msg.texto}</pre> | |
| </div> | |
| </div> | |
| ))} | |
| {procesando && ( | |
| <div className="flex flex-col items-start"> | |
| <span className="text-[10px] mb-1 tracking-wider text-[#deff9a]">HECTRON //</span> | |
| <div className="p-3 rounded border bg-[#050f05] border-[#deff9a]/30 text-[#deff9a] animate-pulse"> | |
| Calculando vectores estoc谩sticos... | |
| </div> | |
| </div> | |
| )} | |
| </div> | |
| <form onSubmit={enviarDirectiva} className="mt-4 flex gap-2"> | |
| <input | |
| type="text" | |
| value={input} | |
| onChange={(e) => setInput(e.target.value)} | |
| disabled={procesando} | |
| placeholder="Ingresar voluntad..." | |
| className="flex-1 bg-black border border-zinc-800 p-3 rounded text-white focus:outline-none focus:border-[#deff9a]/50" | |
| /> | |
| <button type="submit" disabled={procesando || !input.trim()} className="bg-[#deff9a] text-black px-6 py-3 rounded font-bold hover:bg-white disabled:opacity-50 transition-colors"> | |
| <i className="fa-solid fa-terminal"></i> | |
| </button> | |
| </form> | |
| </div> | |
| {/* TELEMETRY SIDEBAR */} | |
| <div className="w-64 hidden lg:flex flex-col gap-4"> | |
| <div className="bg-[#050505] border border-zinc-800 p-4 rounded text-xs"> | |
| <h3 className="text-zinc-500 border-b border-zinc-800 pb-2 mb-2 font-bold">ESTADO DE RED</h3> | |
| <p className="flex justify-between mb-1"><span>HuggingFace API</span> <span className="text-green-500">ONLINE</span></p> | |
| <p className="flex justify-between mb-1"><span>Matriz 5w4-8</span> <span className="text-[#deff9a]">ACTIVO</span></p> | |
| <p className="flex justify-between"><span>Fricci贸n</span> <span className="text-cyan-500">CERO</span></p> | |
| </div> | |
| <button onClick={() => setHistorial([])} className="mt-auto border border-red-900/50 text-red-500 p-3 rounded text-xs tracking-widest font-bold hover:bg-red-950/30 transition-colors"> | |
| PURGAR MEMORIA | |
| </button> | |
| </div> | |
| </main> | |
| </div> | |
| ); | |
| } | |
| const root = ReactDOM.createRoot(document.getElementById('root')); | |
| root.render(<App />); | |
| </script> | |
| </body> | |
| </html> | |