Table Des Matières
Créer Un Simple AI ChatBot Avec “Web Speech API” & “Node.js”
L’utilisation de commandes vocales est devenu assez répandu de nos jours, étant donné que les gens utilisent de plus en plus des assistants vocaux tels que Siri et Cortana, et des appareils tels que Amazon Echo et Google Home ont envahi nos salons. Ces systèmes sont créés avec des logiciels de reconnaissance vocale qui permettent à leurs utilisateurs d’émettre des commandes vocales. De nos jours, les navigateurs Web commencent déjà à se familiarise avec Web Speech API, qui permet aux utilisateurs d’intégrer les données vocales dans les applications Web.
Avec l’état actuel des applications Web, nous pouvons compter sur différents éléments d’interface utilisateur pour interagir avec les utilisateurs. Avec le “Web Speech API”, nous pouvons développer des applications Web riches avec des interactions utilisateur naturelles et une interface visuelle minimale, en utilisant des commandes vocales. Cela permet d’innombrables cas d’utilisation d’applications Web plus riches. En outre, l’API peut rendre les applications Web plus accessibles, en aidant les personnes ayant des handicaps physiques ou cognitifs ou des blessures. Le future du web sera plus conversationnel et accessible!
Dans ce tutoriel, nous utiliserons l’API pour créer une interface AI (intelligence artificielle)de chat vocal dans le navigateur. L’application écoutera la voix de l’utilisateur et répondra avec une voix synthétique. Parce que le “Web Speech API” est encore expérimental, l’application fonctionnera uniquement dans les navigateurs pris en charge. Les fonctionnalités utilisées pour cet article, à la fois la reconnaissance vocale et la voix synthétique, ne sont actuellement que dans les navigateurs à base de Chromium, y compris Chrome 25+ et Opera 27+, quant à Firefox, Edge et Safari ne supportent que la voix synthétique en ce moment.
Cette vidéo montre la démo dans Chrome, et c’est ce que nous allons essayer de créer dans ce tutoriel:
Pour créer l’application Web, nous allons prendre trois grandes mesures:
- Utilisez l’interface Web Speech API “SpeechRecognition” pour écouter la voix de l’utilisateur.
- Envoyez le message de l’utilisateur à une API commerciale de traitement du langage naturel en tant que chaîne (string) de texte.
- Une fois API.AI renvoie le texte de réponse, utilisez l’interface “SpeechSynthesis” pour lui donner une voix synthétique.
Pour télécharger le code source entier utilisé pour ce tutoriel, cliquez ici.
Ce tutoriel s’appuie sur Node.js. Vous devrez être à l’aise avec JavaScript et avoir une compréhension de base de Node.js.
Assurez-vous que Node.js est installé sur votre machine, si ce n’est pas le cas télécharger le et installez le pour que nous puissions commencer!
CONFIGURATION DE VOTRE APPLICATION “Node.js”
D’abord, configurez un cadre d’application Web avec Node.js. Créez votre répertoire d’application et configurez la structure de votre application comme ceci:
├── index.js ├── public │ ├── css │ │ └── style.css │ └── js │ └── script.js └── views └── index.html
Ensuite, exécutez cette commande pour initialiser votre application Node.js:
$ npm init -f
Le -f accepte le réglage par défaut, sinon vous pouvez configurer l’application manuellement sans flag. En outre, cela générera un fichier package.json contenant les informations de base de votre application.
Maintenant, installez toutes les dépendances nécessaires pour créer cette application:
$ npm install express socket.io apiai --save
Avec l’indicateur (flag) –save ajouté, votre fichier package.json sera automatiquement mis à jour avec les dépendances.
Nous allons utiliser Express, un cadre de serveur d’application Web Node.js, pour exécuter le serveur localement. Pour permettre une communication bidirectionnelle en temps réel entre le serveur et le navigateur, nous utiliserons Socket.IO. En outre, nous allons installer l’outil de service de traitement de langage naturel, API.AI pour construire un chatbot AI qui peut avoir une conversation artificielle.
Socket.IO est une bibliothèque qui nous permet d’utiliser WebSocket facilement avec Node.js. En établissant une connexion socket entre le client et le serveur, nos messages de conversation seront passés d’un côté à l’autre entre le navigateur et notre serveur, dès que les données textuelles seront retournées par l’API Web Speech (le message vocal) ou API API. (le message “AI”).
Maintenant, créons un fichier index.js et une instance Express et écoutons le serveur:
const express = require('express'); const app = express(); app.use(express.static(__dirname + '/views')); // html app.use(express.static(__dirname + '/public')); // js, css, images const server = app.listen(5000); app.get('/', (req, res) => { res.sendFile('index.html'); });
Maintenant, travaillons sur notre application! Dans l’étape suivante, nous intégrerons le code front-endl avec le Web Speech API.
RECEVOIR LA VOIX AVEC L’INTERFACE “SpeechRecognition”
Le Web Speech API possède une interface de contrôleur principale, appelée SpeechRecognition, pour recevoir le discours de l’utilisateur à partir d’un microphone et comprendre ce qu’il dit.
CRÉER L’INTERFACE DE L’UTILISATEUR
L’interface utilisateur de cette application est simple: Juste un bouton pour déclencher la reconnaissance vocale. Mettons en place notre fichier index.html et inclure notre fichier JavaScript front-end (script.js) et Socket.IO, que nous utiliserons plus tard pour permettre la communication en temps réel:
<html lang="en"> <head>…</head> <body> … <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.1/socket.io.js"></script> <script src="js/script.js"></script> </body>
Ensuite, ajoutez une interface de bouton dans body HTML:
<button>Talk</button>
Pour modifier le bouton comme indiqué dans la démo, reportez-vous au fichier style.css dans le code source.
Capturer la voix avec JavaScript
Dans script.js, invoquez une instance de SpeechRecognition, l’interface du contrôleur du Web Speech API pour la reconnaissance vocale:
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; const recognition = new SpeechRecognition();
Nous inclusons des objets préfixés et non préfixés, parceque Chrome prend actuellement en charge l’API avec les propriétés préfixées.
En outre, nous utilisons une partie de la syntaxe ECMAScript6 dans ce tutoriel, car la syntaxe, y compris les fonctions const et arrow, est disponible dans les navigateurs prenant en charge les interfaces Speech API, SpeechRecognition et SpeechSynthesis.
En option, vous pouvez définir des variétés de propriétés pour personnaliser la reconnaissance vocale:
recognition.lang = 'en-US'; recognition.interimResults = false;
Ensuite, capturez la référence DOM pour l’interface utilisateur du bouton et écoutez l’événement de clic pour lancer la reconnaissance vocale:
document.querySelector('button').addEventListener('click', () => { recognition.start(); });
Une fois que la reconnaissance vocale commenc, utilisez l’événement de résultat pour récupérer ce qui a été dit en tant que texte:
recognition.addEventListener('result', (e) => { let last = e.results.length - 1; let text = e.results[last][0].transcript; console.log('Confidence: ' + e.results[0][0].confidence); // We will use the Socket.IO here later… });
Cela renverra l’objet SpeechRecognitionResultList contenant le résultat et vous pouvez récupérer le texte dans le tableau. En outre, comme vous pouvez le voir dans l’exemple de code, cela renverra également la confidence pour la transcription.
Maintenant, utilisons Socket.IO pour transmettre le résultat à notre code de serveur.
Communication en temps réel avec Socket.IO
Socket.IO est une bibliothèque pour les applications Web en temps réel. Il permet une communication bidirectionnelle en temps réel entre les clients Web et les serveurs. Nous allons l’utiliser pour transmettre le résultat du navigateur au code Node.js, puis passer la réponse au navigateur. Vous vous demandez peut-être pourquoi nous n’utilisons pas HTTP ou AJAX au lieu de Socket.IO. Vous pouvez envoyer des données au serveur via POST. Cependant, nous utilisons WebSocket via Socket.IO car les sockets sont la meilleure solution pour la communication bidirectionnelle, en particulier lorsqu’on pousse un événement depuis le serveur vers le navigateur. Avec la connexion continue desocket, nous n’avons pas besoin de rafraichir la page du le navigateur ou continuer à envoyer une demande AJAX à intervalles fréquents.
Créer une instance Socket.IO dans script.js quelque part:
const socket = io();
Ensuite, insérez ce code où vous écoutez result event (l’événement résultant) de SpeechRecognition:
socket.emit('chat message', text);
Maintenant, revenons au code Node.js pour recevoir ce texte et utilisez AI (intelligence artificielle) pour répondre à l’utilisateur.
Obtenir une réponse de l’intelligence artificielle AI
De nombreuses plateformes et services vous permettent d’intégrer une application avec un système AI utilisant speech-to-text (voix au texte) et le langage naturel, y compris IBM’s Watson, Microsoft’s LUIS et Wit.ai. pour créer une interface de conversation rapide, nous allons utiliser API.AI, car il fournit un compte de développeur gratuit et nous permet de configurer rapidement un système de discussion rapide à l’aide de son interface Web et de la bibliothèque Node.js.
CONFIGURATION API.AI
Une fois que vous avez créé un compte, créez un “agent.” Reportez-vous au guide “Getting Started” (Mise en route), étape 1.
Ensuite, au lieu d’aller dans l’itinéraire de personnalisation complet en créant des entités et des intentions, cliquez simplement sur le préréglage “small Talk” dans le menu de gauche, puis, ensuite, basculez la commande pour activer le service.
Personnalisez votre agent “small-talk” comme vous le souhaitez en utilisant l’interface API.AI.
Accédez à la page “General Settings” (Paramètres généraux) en cliquant sur l’icône à côté du nom de votre agent dans le menu, et obtenez votre clé API. Vous aurez besoin d’un “client access token” (jeton d’accès client) pour utiliser le SDK Node.js.
UTILISER L’API.AI NODE.JS SDK
Branchons notre application Node.js à API.AI en utilisant le Node.js SDK de ce dernier! Revenez à votre fichier index.js et initialisez API.AI avec votre jeton d’accès (access token):
const apiai = require('apiai')(APIAI_TOKEN);
Si vous souhaitez simplement exécuter le code localement, vous pouvez coder votre clé API ici. Il existe plusieurs façons de définir vos variables d’environnement, mais je définis généralement un fichier .env pour inclure les variables.
Dans le code source que j’ai mis sur google drive en téléchargement, vous pouvez regarder le fichier .env-test pour voir comment il est configuré.
Maintenant, nous utilisons le Socket.IO côté serveur pour recevoir le résultat du navigateur.
Une fois la connexion établie et le message reçu, utilisez le API de “API.AI” pour récupérer la réponse au message de l’utilisateur:
io.on('connection', function(socket) { socket.on('chat message', (text) => { // Get a reply from API.AI let apiaiReq = apiai.textRequest(text, { sessionId: APIAI_SESSION_ID }); apiaiReq.on('response', (response) => { let aiText = response.result.fulfillment.speech; socket.emit('bot reply', aiText); // Send the result back to the browser! }); apiaiReq.on('error', (error) => { console.log(error); }); apiaiReq.end(); }); });
Lorsque l’API.AI renvoie le résultat, utilisez socket.emit () de Socket.IO pour le renvoyer au navigateur.
Donner à l’IA une voix avec l’interface SpeechSynthesis
Revenons à notre script.js encore une fois pour terminer l’application!
Créez la fonction pour générer une voix synthétique. Cette fois, nous utilisons l’interface du controlleur SpeechSynthesis du Web Speech API. La fonction prend la chaîne “string” comme argument et permet au navigateur de lire le texte (en parlant):
function synthVoice(text) { const synth = window.speechSynthesis; const utterance = new SpeechSynthesisUtterance(); utterance.text = text; synth.speak(utterance); }
Dans la fonction, d’abord, créez une référence au point d’entrée de l’API, window.speechSynthesis. Vous remarquerez peut-être qu’il n’y a pas de propriété préfixée cette fois: cette API est plus largement prise en charge que SpeechRecognition, et tous les navigateurs qui la supportent ont déjà abandonné le préfixe de SpeechSysthesis.
Ensuite, créez une nouvelle instance SpeechSynthesisUtterance () en utilisant son constructeur et définissez le texte qui sera synthétisé lorsque l’énoncé est prononcé. Vous pouvez définir d’autres propriétés, telles que la voix, pour choisir le type de voix que le navigateur et le système d’exploitation devraient prendre en charge.
Enfin, utilisez SpeechSynthesis.speak () pour le laisser parler!
Maintenant, obtenez la réponse du serveur à l’aide de Socket.IO à nouveau. Une fois le message reçu, appelez la fonction.
socket.on('bot reply', function(replyText) { synthVoice(replyText); });
Vous avez terminé! Essayons un chit-chat avec notre robot AI!
Notez que le navigateur vous demandera l’autorisation d’utiliser le microphone la première fois. Comme d’autres API Web, telles que l’API de géolocalisation et l’API de notification, le navigateur ne pourra jamais accéder à vos informations sensibles, sauf si vous lui accordez la permission, de sorte que votre voix ne sera pas enregistrée secrètement sans vous le sachiez.
Vous allez bientôt vous ennuyer de la conversation parce que l’IA est trop simple. Cependant, API.AI est configurable et formel. Lisez la documentation API.AI pour la rendre plus intelligente.
Poussez le Web vers l’avenir!
L’interaction vocale a transformé la façon dont les utilisateurs contrôlent le calcul et les périphériques connectés. Maintenant, avec l’API Web Speech, l’expérience utilisateur se transforme également sur le Web. Combinés avec l’IA et l’apprentissage en profondeur, vos applications Web deviendront plus intelligentes et offriront une meilleure expérience aux utilisateurs!
Enfin, j’espère que vous avez apprécié le tutoriel et créé un chatbot amusant! 🙂
Bonsoir Mr! Mon nom est Jean Max. En faisant des recherches sur google, j’ai tombé sur ton site web qui est vraiment parfait!
J’ai une question pour vous à propos des chatbots sur api.ai. Est ce qu’il n’est pas possible d’avoir la réponse du chatbot en audio? Comme je vois des applis android le font. Du text to speech comme dans Mit app inventor2… Merci!
Ravi Mr Jean Max, oui bien sur, https://www.youtube.com/watch?v=3hWg6drkeA4
j’espère que tu comprends un peux l’anglais sinon tu active les sous titres en anglais et tu les traduis via Google traducteur pour pouvoir suivre ce tuto. C’est bien dommage que ça n’existe pas encore en français mais je vais essayer de créer un article là dessus pour combler ce vide. mrc encore une fois pour ton com 🙂
Merçi bien!!!
De Rien 🙂