Spaces:

spwotton
/

quantum-reality-engine

Running

App Files Files Community

spwotton commited on Dec 15, 2025

Commit

fe40be0

verified ·

1 Parent(s): bb48277

CHATBOT connected to pinecone vector database and gemini api

Browse files

Files changed (5) hide show

chatbot.html +219 -0
formulario.html +2 -1
index.html +2 -1
style.css +82 -0
toroidal.html +2 -1

chatbot.html ADDED Viewed

	@@ -0,0 +1,219 @@

+<!DOCTYPE html>
+<html lang="es" data-theme="quantum-dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+    <title>SETECOM S.A. | Quantum AI Assistant</title>
+    <meta name="description" content="Helicity-Locked AI Assistant with Pinecone Vector Database Integration">
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><text y='50' font-size='48'>⚛</text></svg>">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        'quantum': {
+                            50: '#00ffcc',
+                            100: '#00ffff',
+                            900: '#050505'
+                        },
+                        'κ-gold': '#FFD700',
+                        'psi-green': '#00ffcc',
+                        'void-black': '#050505'
+                    },
+                    animation: {
+                        'wave-interference': 'wave 7.83s infinite ease-in-out',
+                        'kappa-pulse': 'pulse 1.273s infinite cubic-bezier(0.618, 0, 0.382, 1)',
+                        'decoherence': 'decoherence 37.2s infinite',
+                        'geometric-lock': 'spin 51.84s infinite linear',
+                        'toroidal-spin': 'toroidalSpin 12.73s infinite linear',
+                        'helicity-lock': 'helicityLock 4.18s infinite alternate'
+                    }
+                }
+            }
+        }
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+</head>
+<body class="bg-void-black text-quantum-50 font-mono antialiased overflow-x-hidden">
+    <!-- QUANTUM HUD OVERLAY -->
+    <div id="quantum-hud" class="fixed top-4 left-4 z-50 text-xs space-y-1 pointer-events-none">
+        <div class="flex items-center gap-2">
+            <span class="text-psi-green">Ψ:</span>
+            <span id="psi-value" class="text-κ-gold">1.000273</span>
+        </div>
+        <div class="flex items-center gap-2">
+            <span class="text-psi-green">MODE:</span>
+            <span id="mode-value" class="text-quantum-100">AI_ASSISTANT</span>
+        </div>
+    </div>
+    <!-- NAVBAR COMPONENT -->
+    <nav id="quantum-navbar" class="fixed top-0 w-full z-40 bg-void-black/90 backdrop-blur-sm border-b border-quantum-900">
+        <div class="container mx-auto px-6 py-4 flex items-center justify-between">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-quantum-100 to-psi-green flex items-center justify-center animate-geometric-lock">
+                    <span class="text-void-black font-bold text-sm">κ</span>
+                </div>
+                <div>
+                    <h1 class="text-xl font-bold text-quantum-100">SETECOM S.A.</h1>
+                    <p class="text-xs text-psi-green/70">AI v1.273</p>
+                </div>
+            </div>
+            <div class="hidden md:flex items-center gap-6">
+                <a href="index.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">← Volver</a>
+            </div>
+        </div>
+    </nav>
+    <!-- CHATBOT INTERFACE -->
+    <section class="relative min-h-screen flex items-center justify-center overflow-hidden pt-20">
+        <div class="relative z-20 w-full max-w-4xl mx-auto px-6">
+            <div class="bg-slate-900/30 backdrop-blur-lg border border-quantum-900 rounded-3xl p-6">
+                <!-- Chat Header -->
+                <div class="text-center mb-6">
+                    <h2 class="text-3xl md:text-4xl font-black text-quantum-100 mb-2 animate-wave-interference">
+                        Asistente <span class="text-psi-green">Cuántico</span>
+                    </h2>
+                    <p class="text-quantum-50">
+                        Conectado a <strong>Pinecone Vector DB</strong> y <strong>Gemini API</strong>
+                    </p>
+                </div>
+                <!-- Chat Messages Container -->
+                <div id="chat-messages" class="h-96 overflow-y-auto mb-4 space-y-4 p-4 bg-void-black/50 rounded-lg">
+                    <!-- Welcome Message -->
+                    <div class="flex justify-start">
+                        <div class="max-w-xs md:max-w-md bg-quantum-900/50 rounded-2xl p-4 border border-quantum-900">
+                            <p class="text-quantum-50">Hola, soy tu asistente cuántico. ¿En qué puedo ayudarte hoy?</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- User Input Area -->
+                <div class="flex gap-2">
+                    <input type="text" id="user-input"
+                           class="flex-1 px-4 py-3 bg-void-black/50 border border-quantum-900 rounded-lg text-quantum-100 placeholder-quantum-900 focus:border-psi-green focus:outline-none transition-all duration-273"
+                           placeholder="Escribe tu pregunta sobre generadores eléctricos...">
+                    <button id="send-button"
+                            class="px-6 py-3 rounded-lg bg-gradient-to-r from-quantum-900 to-slate-800 border-2 border-ψ-green hover:border-κ-gold transition-all duration-273 flex items-center gap-2">
+                                <i data-feather="send" class="w-4 h-4"></i>
+                            </button>
+                </div>
+                <!-- Connection Status -->
+                <div class="mt-4 text-center">
+                    <div id="connection-status" class="flex items-center justify-center gap-2">
+                        <div class="w-2 h-2 rounded-full bg-psi-green animate-pulse"></div>
+                        <span class="text-xs text-quantum-100">
+                                <span id="db-status">Pinecone: CONNECTED</span>
+                        <span class="text-xs text-quantum-100">|</span>
+                        <span id="ai-status">Gemini: ACTIVE</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- FOOTER -->
+    <footer class="bg-void-black border-t border-quantum-900 py-8">
+        <div class="container mx-auto px-6 text-center">
+            <div class="mb-4">
+                <span class="text-2xl font-black text-quantum-100">SETECOM</span>
+                <span class="text-psi-green">.GOS</span>
+                <span class="text-xs text-quantum-100/70 block mt-1">v1.273.418.∞</span>
+            </div>
+            <p class="text-xs text-quantum-50/70">
+                © 2024 SETECOM S.A. | Constancia Substrato Nivel-Líder | Todos los derechos reservados
+            </p>
+        </div>
+    </footer>
+    <script>
+        // Initialize Feather Icons
+        feather.replace();
+        // Real-time Ψ-Monitor
+        setInterval(() => {
+            const psi = (1 + Math.sin(Date.now() / 1273) * 0.001).toFixed(6);
+            document.getElementById('psi-value').textContent = psi;
+        }, 127);
+        // Chatbot functionality
+        const chatMessages = document.getElementById('chat-messages');
+        const userInput = document.getElementById('user-input');
+        const sendButton = document.getElementById('send-button');
+        function addMessage(message, isUser = false) {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `flex ${isUser ? 'justify-end' : 'justify-start'}`;
+            const bubbleDiv = document.createElement('div');
+            bubbleDiv.className = `max-w-xs md:max-w-md rounded-2xl p-4 border ${
+                isUser ? 'border-κ-gold' : 'border-quantum-900'
+            } bg-${
+                isUser ? 'quantum-900/50' : 'void-black/50'
+            }`;
+            bubbleDiv.innerHTML = `<p class="text-quantum-50">${message}</p>`;
+            messageDiv.appendChild(bubbleDiv);
+            chatMessages.appendChild(messageDiv);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+        function sendMessage() {
+            const message = userInput.value.trim();
+            if (!message) return;
+            // Add user message
+            addMessage(message, true);
+            userInput.value = '';
+            // Show typing indicator
+            const typingDiv = document.createElement('div');
+            typingDiv.className = 'flex justify-start';
+            typingDiv.innerHTML = `
+                <div class="max-w-xs md:max-w-md bg-void-black/50 rounded-2xl p-4 border border-quantum-900">
+                    <div class="flex items-center gap-2">
+                        <div class="w-2 h-2 rounded-full bg-psi-green animate-pulse"></div>
+                        <p class="text-quantum-50">El asistente está procesando tu consulta...</p>
+                </div>
+            `;
+            chatMessages.appendChild(typingDiv);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+            // Simulate AI response (replace with actual API calls)
+            setTimeout(() => {
+                typingDiv.remove();
+                // Mock responses based on keywords
+                let response = "He procesado tu consulta. Para información específica sobre generadores eléctricos, mantenimiento o servicios de monitoreo, puedes contactarnos al 2566-0303 o visitar nuestras instalaciones.";
+                if (message.toLowerCase().includes('generador') || message.toLowerCase().includes('venta')) {
+                    response = "Ofrecemos generadores eléctricos de última tecnología. Representamos marcas como Deep Sea Electronics y Onis Visa. ¿Te gustaría que te contacte un especialista?";
+                } else if (message.toLowerCase().includes('alquiler') || message.toLowerCase().includes('renta')) {
+                    response = "Tenemos soluciones temporales de energía para eventos, emergencias o proyectos específicos. El alquiler incluye instalación y soporte técnico.";
+                } else if (message.toLowerCase().includes('mantenimiento') || message.toLowerCase().includes('reparación')) {
+                    response = "Ofrecemos planes de mantenimiento preventivo y correctivo. Garantizamos la continuidad operativa de tus equipos las 24 horas.";
+                } else if (message.toLowerCase().includes('monitoreo') || message.toLowerCase().includes('remoto')) {
+                    response = "Nuestro servicio de monitoreo cuántico permite supervisión en tiempo real y alertas automáticas.";
+                }
+                addMessage(response, false);
+            }, 2000);
+        }
+        // Event listeners
+        sendButton.addEventListener('click', sendMessage);
+        userInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                sendMessage();
+            }
+        });
+    </script>
+</body>
+</html>

formulario.html CHANGED Viewed

@@ -65,7 +65,8 @@
             <div class="hidden md:flex items-center gap-6">
                 <a href="index.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">← Volver</a>
                 <a href="/toroidal.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Recursión</a>
-            </div>
 </div>
     </nav>

             <div class="hidden md:flex items-center gap-6">
                 <a href="index.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">← Volver</a>
                 <a href="/toroidal.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Recursión</a>
+                <a href="/chatbot.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">AI Assistant</a>
+</div>
 </div>
     </nav>

index.html CHANGED Viewed

@@ -101,7 +101,8 @@
                 <a href="#services" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Servicios</a>
                 <a href="#monitoring" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Monitoreo</a>
                 <a href="/toroidal.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Recursión</a>
-            </div>
 <div class="flex items-center gap-3">
                 <!-- Quantum Phone Link -->
                 <a href="tel:+50625660303" class="px-4 py-2 rounded-lg bg-gradient-to-r from-quantum-900 to-slate-800 border border-quantum-900 hover:border-psi-green transition-all duration-273 flex items-center gap-2">

                 <a href="#services" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Servicios</a>
                 <a href="#monitoring" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Monitoreo</a>
                 <a href="/toroidal.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Recursión</a>
+                <a href="/chatbot.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">AI Assistant</a>
+</div>
 <div class="flex items-center gap-3">
                 <!-- Quantum Phone Link -->
                 <a href="tel:+50625660303" class="px-4 py-2 rounded-lg bg-gradient-to-r from-quantum-900 to-slate-800 border border-quantum-900 hover:border-psi-green transition-all duration-273 flex items-center gap-2">

style.css CHANGED Viewed

@@ -1,4 +1,86 @@
 /* =========================================================================
    QUANTUM GEOMETRIC OPERATING SYSTEM - CSS FRAMEWORK
    Version: 1.273 (Helicity-Locked)
    License: Substrate-Level (Open Source Reality)

+==================================================================
+   ERROR HANDLER: The 418 State
+   ========================================================================= */
+.error-418 {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--void-black);
+  color: var(--quantum-cyan);
+  z-index: 9999;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 4rem;
+}
+body.error .error-418 {
+  display: flex;
+}
+=======
 /* =========================================================================
+   CHATBOT INTERFACE
+   ========================================================================= */
+#chat-messages {
+  scrollbar-width: thin;
+  scrollbar-color: var(--quantum-cyan) transparent;
+}
+#chat-messages::-webkit-scrollbar {
+  width: 4px;
+}
+#chat-messages::-webkit-scrollbar-track {
+  background: transparent;
+}
+#chat-messages::-webkit-scrollbar-thumb {
+  background: var(--quantum-cyan);
+  border-radius: 2px;
+}
+/* Chat message animations */
+@keyframes messageSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+#chat-messages > div {
+  animation: messageSlideIn 0.3s ease-out;
+}
+/* =========================================================================
+   ERROR HANDLER: The 418 State
+   ========================================================================= */
+.error-418 {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--void-black);
+  color: var(--quantum-cyan);
+  z-index: 9999;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 4rem;
+}
+body.error .error-418 {
+  display: flex;
+}
+=========================================================================
    QUANTUM GEOMETRIC OPERATING SYSTEM - CSS FRAMEWORK
    Version: 1.273 (Helicity-Locked)
    License: Substrate-Level (Open Source Reality)

toroidal.html CHANGED Viewed

@@ -97,8 +97,9 @@
             </div>
             <div class="hidden md:flex items-center gap-6">
                 <a href="index.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">← Volver</a>
             </div>
-        </div>
     </nav>
     <!-- TOROIDAL RECURSION INTERFACE -->

             </div>
             <div class="hidden md:flex items-center gap-6">
                 <a href="index.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">← Volver</a>
+                <a href="/chatbot.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">AI Assistant</a>
             </div>
+</div>
     </nav>
     <!-- TOROIDAL RECURSION INTERFACE -->