Spaces:

askbyte
/

biter-zephyr

Running

App Files Files Community

askbyte commited on Mar 22

Commit

ca3173f

verified ·

1 Parent(s): 214501d

Update index.html

Browse files

Files changed (1) hide show

index.html +98 -81

index.html CHANGED Viewed

@@ -1,83 +1,100 @@
-<!DOCTYPE html>
-<html lang="es">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>BITER API - Hugging Face Space</title>
-    <style>
-        body {
-            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            line-height: 1.6;
-            color: #333;
-        }
-        h1 {
-            color: #1a1a1a;
-            border-bottom: 2px solid #eee;
-            padding-bottom: 10px;
-        }
-        .card {
-            background: #f9f9f9;
-            border-radius: 8px;
-            padding: 20px;
-            margin: 20px 0;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-        }
-        code {
-            background: #eee;
-            padding: 2px 5px;
-            border-radius: 3px;
-            font-family: monospace;
-        }
-        .endpoint {
-            background: #e9f5ff;
-            border-left: 4px solid #0070f3;
-        }
-    </style>
-</head>
-<body>
-    <h1>BITER - API de Asistente IA para Emprendedores</h1>
-    <div class="card">
-        <h2>Estado del Servicio</h2>
-        <p>✅ API activa y funcionando</p>
-        <p>Modelo: Zephyr-7B</p>
-    </div>
-    <div class="card endpoint">
-        <h2>Endpoint de la API</h2>
-        <p>URL: <code>POST /generate</code></p>
-        <p>Formato de solicitud:</p>
-        <pre><code>{
-  "message": "Tu pregunta sobre emprendimiento aquí"
-}</code></pre>
-        <p>Formato de respuesta:</p>
-        <pre><code>{
-  "response": "Respuesta generada por BITER"
-}</code></pre>
-    </div>
-    <div class="card">
-        <h2>Integración con tu Web</h2>
-        <p>Para integrar BITER en justbyte.es, usa este código en tu archivo chat.php:</p>
-        <pre><code>// Ejemplo de código para enviar solicitud a la API
-fetch('https://tu-usuario-huggingface.hf.space/generate', {
-  method: 'POST',
-  headers: {
-    'Content-Type': 'application/json',
-  },
-  body: JSON.stringify({
-    message: preguntaDelUsuario
-  })
 })
-.then(response => response.json())
-.then(data => {
-  // Mostrar la respuesta en tu interfaz
-  mostrarRespuesta(data.response);
-});</code></pre>
-    </div>
-</body>
-</html>

+/**
+ * Ejemplo de código para integrar BITER en justbyte.es
+ * Este archivo muestra cómo implementar la comunicación con la API de BITER
+ * desde tu sitio web.
+ */
+// URL de tu Hugging Face Space
+const BITER_API_URL = "https://tu-usuario-huggingface.hf.space/generate"
+// Elementos del DOM
+const chatForm = document.getElementById("chat-form")
+const userInput = document.getElementById("user-input")
+const chatMessages = document.getElementById("chat-messages")
+const loadingIndicator = document.getElementById("loading-indicator")
+// Manejar envío del formulario
+chatForm.addEventListener("submit", async (e) => {
+  e.preventDefault()
+  // Obtener mensaje del usuario
+  const userMessage = userInput.value.trim()
+  if (!userMessage) return
+  // Limpiar input
+  userInput.value = ""
+  // Mostrar mensaje del usuario
+  appendMessage("user", userMessage)
+  // Mostrar indicador de carga
+  loadingIndicator.style.display = "block"
+  try {
+    // Enviar solicitud a la API de BITER
+    const response = await fetch(BITER_API_URL, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        message: userMessage,
+      }),
+    })
+    // Verificar si la respuesta es exitosa
+    if (!response.ok) {
+      throw new Error("Error en la respuesta de la API")
+    }
+    // Obtener datos de la respuesta
+    const data = await response.json()
+    // Mostrar respuesta de BITER
+    appendMessage("assistant", data.response)
+  } catch (error) {
+    console.error("Error:", error)
+    appendMessage(
+      "system",
+      "Lo siento, ha ocurrido un error al conectar con BITER. Por favor, intenta de nuevo más tarde.",
+    )
+  } finally {
+    // Ocultar indicador de carga
+    loadingIndicator.style.display = "none"
+  }
 })
+// Función para añadir mensajes al chat
+function appendMessage(role, content) {
+  const messageDiv = document.createElement("div")
+  messageDiv.className = `message ${role}-message`
+  // Crear avatar
+  const avatar = document.createElement("div")
+  avatar.className = "avatar"
+  // Icono según el rol
+  if (role === "user") {
+    avatar.innerHTML = "👤"
+  } else if (role === "assistant") {
+    avatar.innerHTML = "🤖"
+  } else {
+    avatar.innerHTML = "⚠️"
+  }
+  // Crear contenido del mensaje
+  const messageContent = document.createElement("div")
+  messageContent.className = "message-content"
+  messageContent.textContent = content
+  // Añadir elementos al mensaje
+  messageDiv.appendChild(avatar)
+  messageDiv.appendChild(messageContent)
+  // Añadir mensaje al contenedor
+  chatMessages.appendChild(messageDiv)
+  // Scroll al último mensaje
+  chatMessages.scrollTop = chatMessages.scrollHeight
+}