Deep Chat : un composant de chat AI pour une intégration rapide sur le site web

Dernières ressources sur l'IAPosté il y a 4 mois Cercle de partage de l'IA

1.3K 00

Introduction générale

Deep Chat est un composant de chat IA open source conçu pour les développeurs web. Développé par Ovidijus Parsiunas et hébergé sur GitHub, il compte actuellement plus de 2 000 étoiles. Les utilisateurs peuvent l'intégrer dans leurs sites web grâce à une configuration simple, permettant l'interfaçage avec des interfaces d'IA courantes telles que OpenAI, HuggingFace, ou des services personnalisés. Deep Chat prend également en charge la saisie vocale, la synthèse vocale et le téléchargement de fichiers, et peut même exécuter de petits modèles d'IA directement dans le navigateur sans support de serveur. La documentation officielle est complète et riche en exemples, de sorte qu'il est facile de commencer.

Liste des fonctions

Prise en charge de l'interface avec OpenAI, HuggingFace, Cohere, Azure et d'autres interfaces d'IA.
Fournit des fonctions de connexion à des services personnalisés, qui peuvent être utilisées par le biais de la configuration de l'API.
Prise en charge de la saisie vocale et de la synthèse vocale, permettant aux utilisateurs d'interagir avec leur voix.
Permet de télécharger des fichiers multimédias en prenant des photos avec l'appareil photo et en enregistrant avec le microphone.
Prise en charge du formatage Markdown pour une présentation aisée du code et du texte structuré.
Permet de paramétrer l'avatar et le nom, ainsi que de regrouper les messages.
Comprend un panneau d'introduction et des fenêtres contextuelles dynamiques pour aider les utilisateurs à comprendre les fonctionnalités.
Permet d'exécuter de petits modèles d'intelligence artificielle dans le navigateur sans support de back-end.
Compatible avec les principaux frameworks d'interface utilisateur, tels que React, Vue, Angular, etc.
Permet de personnaliser les styles d'interface, y compris l'apparence des boîtes de messages et des boutons.

Utiliser l'aide

Les étapes d'installation et d'utilisation de Deep Chat sont claires et simples. Vous trouverez ci-dessous un guide détaillé qui vous permettra d'avoir une vue d'ensemble de l'installation à l'utilisation.

Processus d'installation

Télécharger le code du projet
Exécutez la commande suivante dans le terminal pour obtenir le code source de Deep Chat :

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

Allez dans le répertoire et installez les dépendances
Allez dans le dossier du projet :

cd deep-chat

Installer les dépendances nécessaires :

npm install

bloc de construction
Exécutez la commande "build" pour générer des fichiers utilisables :

npm run build

Si vous avez besoin de prévisualiser l'effet du code en temps réel, vous pouvez utiliser :

npm run build:watch

test local
Démarrer le serveur local :

npm run start

Ouvrez votre navigateur et visitez http://localhostVous pouvez voir l'écran de chat.

Pour les utilisateurs de React (optionnel)
Si vous utilisez React, installez la version spéciale :

npm install deep-chat-react

Introduit dans le code :

import 'deep-chat-react';

Générer un fichier unique (optionnel)
Si vous avez besoin d'un fichier JS autonome, exécutez-le :
```
npm run build:bundle
```
Le fichier de sortie est situé dans le répertoire dist/deepChat.bundle.js.

Connecter les services d'IA

Deep Chat prend en charge plusieurs méthodes de connexion et est facile à configurer.

Connexions OpenAI
Ajoutez le code suivant au code HTML :
```
<deep-chat directConnection='{"openAI": {"key": "你的API密钥"}}' />
```
Note : Cette méthode peut être utilisée pour le développement, et il est recommandé de cacher la clé avec un service proxy pour une utilisation en ligne.

Connexion à Azure OpenAI
Configurer le service Azure :

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

Services personnalisés
mettre en place request pour s'interfacer avec sa propre API :
```
<deep-chat request='{"url": "https://你的服务地址/chat"}' />
```
Le service doit prendre en charge les formats de demande et de réponse de Deep Chat, comme indiqué dans le document suivant deepchat.dev/docs/connect.
Ajuster les données à l'aide d'intercepteurs
Si les formats de service ne correspondent pas, utilisez l'intercepteur pour les ajuster :
```
<deep-chat request='{"url": "https://你的服务地址/chat"}' interceptor='{"onSend": "调整请求数据函数"}' />
```

Activation des fonctions vocales et multimédias

Les fonctions vocales et multimédias de Deep Chat sont faciles à utiliser.

Activer l'entrée et la sortie vocales
Ajouter des attributs :
```
<deep-chat speechToText="true" textToSpeech="true" />
```
Touchez l'icône du microphone pour entrer par la voix et la réponse sera lue automatiquement à haute voix.
Photographier et enregistrer
Activez la caméra et le microphone :
```
<deep-chat camera="true" microphone="true" />
```
Cliquez sur l'appareil photo pour prendre une photo, ou sur le microphone pour enregistrer, et le fichier est téléchargé directement dans la fenêtre de chat.

Styles et caractéristiques personnalisés

L'interface et les fonctionnalités peuvent être adaptées à la demande.

Ajuster le style du message
Modifier la couleur de la bulle du message de l'utilisateur :
```
<deep-chat messageStyles='{"user": {"bubble": {"backgroundColor": "blue"}}}' />
```
Messagerie par paquets
Activer le regroupement des messages :
```
<deep-chat groupedMessages="true" />
```
Prise en charge du format Markdown
Activer le rendu Markdown :
```
<deep-chat markdown="true" />
```
importation # 标题 s'affichera sous forme d'en-tête.

Exécution de modèles d'IA dans le navigateur

Utiliser l'IA sans serveur.

Installation du module de modèle Web
Exécuter la commande :
```
npm install deep-chat-web-llm
```
Favoriser les modèles locaux
Propriétés de configuration :
```
<deep-chat webModel='{"model": "RedPajama"}' />
```
Les modèles tels que RedPajama, TinyLlama, etc. sont pris en charge.

Exemple de déroulement des opérations

Ajouter le <deep-chat> Étiquettes.
Configurer des interfaces d'IA telles que OpenAI ou des services personnalisés.
Saisissez du texte ou posez une question à l'aide du microphone.
Visualisez les réponses de l'IA et écoutez-les grâce à la fonction de synthèse vocale.
Téléchargez des images ou des enregistrements et adaptez le style de l'interface.

Pour plus d'informations, veuillez consulter le site deepchat.devLa documentation officielle et les exemples sont tous disponibles.

scénario d'application

Site personnel Assistant intelligent
Incorporez le Deep Chat à votre blog ou à votre site de portfolio, où les utilisateurs peuvent poser des questions sur le contenu à l'aide de la voix ou du texte pour stimuler l'interactivité.
Service clientèle de la plate-forme de commerce électronique
Économisez sur les coûts de main-d'œuvre en utilisant le Deep Chat pour répondre aux questions courantes telles que l'état de la commande et le processus de retour.
Outils interactifs pour l'enseignement en ligne
Les étudiants posent des questions sur des points difficiles du cours par l'intermédiaire de Deep Chat, et l'IA y répond en temps réel, ce qui le rend adapté à l'apprentissage à distance.

QA

Quels sont les services d'IA pris en charge par Deep Chat ?
Prise en charge d'OpenAI, HuggingFace, Cohere, Stability AI, Azure et AssemblyAI, ainsi que de l'interface avec des services personnalisés.
Dans quels cadres peut-on l'utiliser ?
Prise en charge de React, Vue, Angular, Svelte, Next.js et d'autres frameworks grand public, exemples spécifiques voir. deepchat.dev/examples/frameworks.
Comment charger un message d'historique ?
utiliser loadHistory Chargement asynchrone de l'historique par l'intercepteur, prise en charge de la pagination, voir détails dans deepchat.dev/docs/interceptors.