Hugging Face's logo

Spaces:
hectorruiz9
/
Hectron
Running

App Files Community
Hectron
File size: 10,026 Bytes
e23ed3c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<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 = "TU_HUGGINGFACE_TOKEN_AQUI"; 
            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>