Créer un chatbot avec JavaScript et Gemini AI

Alors, comment vas-tu ?

Je regardais quelques projets sur mon github et je suis tombé sur un chatbot que j'ai récemment créé à l'aide de Google Gemini. L'idée était de créer un assistant linguistique, où vous pourriez parler à l'IA pour améliorer vos compétences dans la langue de votre choix.

Alors je me suis dit : « Pourquoi ne pas partager comment j'ai réalisé ce projet avec tout le monde ? ». Et c'est pourquoi j'écris ici, pour vous montrer comment j'ai réalisé chaque partie. Commençons donc par le front-end de l’application.

Démarrer un nouveau projet

Eh bien, pour justifier certaines actions que je vais entreprendre dans le projet, je vais dire tout de suite que nous allons créer un "serveur" avec express.js, où nous fournirons une API route '/chat' qui sera utilisée pour la communication entre le front-end et l'API Gemini.

Nous devrons donc démarrer notre projet avec la commande npm init -y. Le résultat est un fichier package.json qui ressemble à ceci :

{
  "name": "chatbot-ia",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

Et aussi, nous devrons organiser nos fichiers comme suit :

public
  |__ index.html
  |__ style.css
  |__ script.js
package.json 

Une fois cela fait, créons la partie visuelle de notre chatbot. C'est parti !

Création du look Chat

Comme l'idée était de créer un projet pendant 1 heure de live coding, j'ai décidé de créer une interface très simple utilisant HTML, CSS et JavaScript pour le Chatbot. Je suis plutôt mauvais en design, alors j'ai choisi la police et les couleurs qui me plaisaient le plus. Alors c'est parti, en commençant par HTML.

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chatbot Assistente de Idiomas</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
  
  
    <div>



<p>E agora o CSS da página<br>
</p>

<pre class="brush:php;toolbar:false">* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f2f2f2;
}

.chat-container {
  width: 100%;
  max-width: 400px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.chat-box {
  height: 300px;
  max-height: 500px;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.chat-form {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.message {
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 20px;
  width: auto;
  display: inline-flex;
  max-width: 50%;
  word-wrap: break-word;
}

.model {
  background-color: #e0e0e0;
  color: #333;
  align-self: flex-start;
  justify-content: flex-start;
}

.user {
  background-color: #4caf50;
  color: white;
  align-self: flex-end;
  justify-content: flex-end;
  margin-left: auto;
}

.input-container {
  display: flex;
  padding: 10px;
  border-top: 1px solid #ddd;
}

#user-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 20px;
  outline: none;
}

#send-button {
  margin-left: 10px;
  padding: 10px 15px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
}

#send-button:hover {
  background-color: #45a049;
}

Le résultat devrait être un écran similaire à celui présenté ci-dessous :

Créer une logique client

Notre application est un chatbot qui va communiquer avec l'API Gemini. Nous devons donc créer la logique qui fera cette communication. Pour clarifier ce que nous devons faire, je vais l'énumérer ci-dessous :

• Obtenir ce qui est tapé par l'utilisateur
• Faites une requête POST vers la route '/chat' que nous allons créer
• Afficher le message de l'utilisateur et du modèle (l'IA) sur l'écran de discussion

Alors c'est parti, ajoutons d'abord un écouteur d'événement pour exécuter notre logique uniquement une fois le contenu DOM entièrement chargé :

// script.js
document.addEventListener("DOMContentLoaded", () => {
  const chatForm = document.getElementById("chat-form");
  const chatWindow = document.getElementById("chat-window");
  const userInput = document.getElementById("user-input");

  // ...
});

Nous créons des constantes pour capturer les éléments qui nous intéressent, comme l'entrée où l'utilisateur tape, la fenêtre où les messages apparaîtront et le champ du formulaire, car nous écouterons quand il sera soumis puis exécuterons notre logique.

En continuant, passons à la deuxième étape, qui consiste à faire la demande de l'itinéraire que nous allons créer en envoyant le message de l'utilisateur.

{
  "name": "chatbot-ia",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

Dans ce code, nous écoutons l'événement submit sur l'élément form. Ainsi, au début, nous utilisons PreventDefault pour empêcher la page de recharger chaque fois que nous envoyons un message. Ensuite, nous prenons ce que l'utilisateur a tapé, en supprimant les espaces vides du message, du début et de la fin avec trim() et vérifions si le message n'est pas vide, vide. Si le message est vide, nous arrêterons notre processus immédiatement.

Maintenant, si nous avons le message de l'utilisateur, nous l'affichons à l'écran grâce à la fonction addMessage(). Cette fonction est définie comme suit :

public
  |__ index.html
  |__ style.css
  |__ script.js
package.json 

Fondamentalement, il reçoit qui a envoyé le message et le texte du message et affiche ces informations dans le chat, en ajoutant les styles corrects de l'utilisateur et du modèle, le modèle d'IA.

D'accord, revenons maintenant à la logique de notre requête, si nous avons un message utilisateur, nous devons faire une requête POST en utilisant l'API fetch, et le corps de cette requête est le message utilisateur.

Enfin, si nous recevons une réponse à cette demande, nous afficherons le message du modèle dans le chat. Sinon, nous prenons l'erreur et l'affichons dans la console, avec console.error() ou affichons un message dans le chat lui-même de manière personnalisée. Et pour améliorer la convivialité du chat, nous avons nettoyé l'entrée du message utilisateur avec userInput.value = "";.

Le fichier script.js ressemble à ceci :

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chatbot Assistente de Idiomas</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
  
  
    <div>



<p>E agora o CSS da página<br>
</p>

<pre class="brush:php;toolbar:false">* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f2f2f2;
}

.chat-container {
  width: 100%;
  max-width: 400px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.chat-box {
  height: 300px;
  max-height: 500px;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.chat-form {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.message {
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 20px;
  width: auto;
  display: inline-flex;
  max-width: 50%;
  word-wrap: break-word;
}

.model {
  background-color: #e0e0e0;
  color: #333;
  align-self: flex-start;
  justify-content: flex-start;
}

.user {
  background-color: #4caf50;
  color: white;
  align-self: flex-end;
  justify-content: flex-end;
  margin-left: auto;
}

.input-container {
  display: flex;
  padding: 10px;
  border-top: 1px solid #ddd;
}

#user-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 20px;
  outline: none;
}

#send-button {
  margin-left: 10px;
  padding: 10px 15px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
}

#send-button:hover {
  background-color: #45a049;
}

---

Et avec ça on termine la partie front-end du chatbot. La prochaine étape sera de créer notre "serveur", de communiquer avec l'API Gemini et de lui parler de la vie, de l'univers et de tout le reste !

À la prochaine fois !