Create client-example.js

client-example.js

@@ -0,0 +1,100 @@
+/**
+ * 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
+}
+