Deep Chat: un componente de chat con IA para una rápida integración en el sitio web

Introducción general

Deep Chat es un componente de chat de IA de código abierto diseñado para desarrolladores web. Desarrollado por Ovidijus Parsiunas y alojado en GitHub, actualmente cuenta con más de 2.000 estrellas. Los usuarios pueden integrarlo en sus sitios web a través de una sencilla configuración, lo que permite interactuar con las principales interfaces de IA, como OpenAI, HuggingFace o servicios personalizados. Su principal ventaja es que es altamente personalizable, con ajustes flexibles en el estilo de la interfaz y la funcionalidad, Deep Chat también soporta entrada de voz, texto a voz y carga de archivos, e incluso puede ejecutar pequeños modelos de IA directamente en el navegador sin soporte de servidor. La documentación oficial es exhaustiva y rica en ejemplos, por lo que es fácil empezar.

Lista de funciones

• Admite interfaces con OpenAI, HuggingFace, Cohere, Azure y otras interfaces de IA.
• Proporciona funciones personalizadas de conexión de servicios, que pueden utilizarse mediante la configuración de la API.
• Admite entrada de voz y conversión de texto a voz, lo que permite a los usuarios interactuar con sus voces.
• Permite cargar archivos multimedia haciendo fotos con la cámara y grabando con el micrófono.
• Admite el formato Markdown para facilitar la presentación de código y texto estructurado.
• Permite configurar el avatar y el nombre, así como agrupar mensajes.
• Incluye un panel de introducción y ventanas emergentes dinámicas para ayudar a los usuarios a comprender las funciones.
• Permite ejecutar pequeños modelos de IA en el navegador sin soporte de back-end.
• Compatible con los principales marcos de interfaz de usuario, como React, Vue, Angular, etc.
• Permite personalizar los estilos de la interfaz, incluida la apariencia del cuadro de mensajes y los botones.

Utilizar la ayuda

Los pasos de instalación y uso de Deep Chat son claros y sencillos. A continuación encontrará una guía detallada que le ayudará a hacerse una idea completa desde la instalación hasta el funcionamiento.

Proceso de instalación

1. Descargar el código del proyecto
   Ejecute el siguiente comando en el terminal para obtener el código fuente de Deep Chat:

git clone https://github.com/OvidijusParsiunas/deep-chat.git

2. Vaya al directorio e instale las dependencias
   Vaya a la carpeta del proyecto:

cd deep-chat

Instale las dependencias necesarias:

npm install

3. Componentes del edificio
   Ejecute el comando build para generar archivos utilizables:

npm run build

Si necesita previsualizar el efecto del código en tiempo real, puede utilizar:

npm run build:watch

4. prueba local
   Inicie el servidor local:

npm run start

Abra su navegador y visite http://localhostPuedes ver la pantalla del chat.

5. Para usuarios de React (opcional)
   Si utiliza React, instale la versión especial:

npm install deep-chat-react

Introducido en el código:

import 'deep-chat-react';

6. Generar paquete de un solo archivo (opcional)
   Si necesita un archivo JS independiente, ejecútelo:

   npm run build:bundle
   

   El archivo de salida se encuentra en la carpeta dist/deepChat.bundle.js.

Conexión de los servicios de IA

Deep Chat admite varios métodos de conexión y es fácil de configurar.

• Conexiones OpenAI
  Añade el siguiente código al HTML:

  <deep-chat directConnection='{"openAI": {"key": "你的API密钥"}}' />
  

  Nota: Este método se puede utilizar para el desarrollo, y se recomienda ocultar la clave con el servicio proxy para su uso en línea.

• Conexión a Azure OpenAI
  Configure el servicio Azure:

  <deep-chat directConnection='{"azure": {"openAI": {"key": "你的密钥", "endpoint": "你的端点"}}}' />
  

• Servicios personalizados
  establecer request para conectarse a su propia API:

  <deep-chat request='{"url": "https://你的服务地址/chat"}' />
  

  El servicio debe ser compatible con los formatos de solicitud y respuesta de Deep Chat, como se detalla en deepchat.dev/docs/connect.

• Ajuste de datos mediante interceptores
  Si los formatos de servicio no coinciden, utilice el interceptor para ajustarlos:

  <deep-chat request='{"url": "https://你的服务地址/chat"}' interceptor='{"onSend": "调整请求数据函数"}' />
  

Activación de funciones de voz y multimedia

Las funciones de voz y multimedia de Deep Chat son fáciles de usar.

• Activar la entrada y salida de voz
  Añadir atributos:

  <deep-chat speechToText="true" textToSpeech="true" />
  

  Toca el icono del micrófono para responder con la voz y la respuesta se leerá automáticamente en voz alta.

• Fotografiar y grabar
  Activa la cámara y el micrófono:

  <deep-chat camera="true" microphone="true" />
  

  Haz clic en la cámara para hacer una foto o en el micrófono para grabar, y el archivo se cargará directamente en la ventana de chat.

Estilos y funciones personalizados

La interfaz y las funciones pueden ajustarse a voluntad.

• Ajustar el estilo del mensaje
  Modificar el color de la burbuja de mensajes del usuario:

  <deep-chat messageStyles='{"user": {"bubble": {"backgroundColor": "blue"}}}' />
  

• Mensajería por paquetes
  Activar la agrupación de mensajes:

  <deep-chat groupedMessages="true" />
  

• Compatibilidad con Markdown
  Activa el renderizado Markdown:

  <deep-chat markdown="true" />
  

  importación # 标题 se mostrará en formato de cabecera.

Ejecutar modelos de IA en el navegador

Utilizar la IA sin servidores.

• Instalación del módulo Web Model
  Ejecutar comando:

  npm install deep-chat-web-llm
  

• Habilitación de modelos locales
  Propiedades de configuración:

  <deep-chat webModel='{"model": "RedPajama"}' />
  

  Se admiten modelos como RedPajama, TinyLlama, etc.

Ejemplo de flujo de operaciones

1. Añada el <deep-chat> Etiquetas.
2. Configure interfaces de IA como OpenAI o servicios personalizados.
3. Introduzca texto o formule una pregunta mediante la voz del micrófono.
4. Vea las respuestas de la IA y escúchelas con la función de texto a voz.
5. Sube fotos o grabaciones y ajusta el estilo de la interfaz.

Para más información, visite deepchat.devLa documentación oficial y los ejemplos están disponibles.

escenario de aplicación

1. Asistente inteligente para sitios web personales
   Incorpore Deep Chat a su blog o sitio de portafolio, donde los usuarios pueden hacer preguntas sobre el contenido mediante voz o texto para potenciar la interactividad.
2. Servicio de atención al cliente de plataformas de comercio electrónico
   Ahorre en costes de mano de obra utilizando Deep Chat para responder a preguntas habituales como el estado del pedido y el proceso de devolución.
3. Herramientas interactivas para la educación en línea
   Los estudiantes hacen preguntas sobre puntos difíciles del curso a través de Deep Chat, y la IA les responde en tiempo real, lo que lo hace adecuado para el aprendizaje a distancia.

CONTROL DE CALIDAD

1. ¿Qué servicios de IA admite Deep Chat?
   Compatibilidad con OpenAI, HuggingFace, Cohere, Stability AI, Azure y AssemblyAI, así como interfaz con servicios personalizados.
2. ¿En qué marcos puede utilizarse?
   Soporta React, Vue, Angular, Svelte, Next.js y otros frameworks principales, ejemplos específicos ver deepchat.dev/examples/frameworks.
3. ¿Cómo se carga un mensaje del historial?
   utilizar loadHistory Interceptor de carga asíncrona del historial, soporte para paginación, ver detalles en deepchat.dev/docs/interceptors.