Créez un chatbot avec JavaScript et Gemini AI

DEV - 11/12
Et oui, tudo bom? J'ai déjà commencé certains projets sur mon github et je m'en vais avec un chatbot que...
!DOCTYPE html

Et oui, tudo bom?

J'ai déjà lancé certains projets sur mon github et je suis parti avec un chatbot qui a récemment utilisé Google Gemini. Une idée était de créer un assistant d'idiomes, où vous vous engagez à converser avec l'IA pour acquérir vos capacités dans l'idiome que vous désirez.

Alors je pense : « Pourquoi ne pas partager ce projet avec tout le monde ? E por isso que estou escrevendo aqui, para te montrer como fiz cada parte. Nous allons donc commencer à utiliser le front-end de l'application.

Démarrer un nouveau projet

Bon, pour justifier certaines actions que vous faites dans votre projet, vous devez créer un logo avec express.js, et nous fournirons une rotation d'API '/chat' qui servira à la communication entre le front-end et l'API Gemini. .

Alors, nous allons précisément lancer notre projet avec la commandenpm init -y. Le résultat est un archivagepackage.jsonmais ou moins avec cette personne :

{ "name": "chatbot-ia", "version": "1.0.0", "main": "index.js", "scripts": { "test": "echo \"Erreur : aucun test spécifié\ " && exit 1" }, "keywords": [], "author": "", "license": "ISC", "description": "" }
Entrer en mode plein écran Quitter le mode plein écran

Et en plus, nous allons précisément organiser nos archives de la forme suivante :

public |__ index.html |__ style.css |__ script.js package.json
Entrer en mode plein écran Quitter le mode plein écran

Feito est donc, nous allons crier une partie visuelle de notre chatbot. Vamos la!

Créer le visuel du chat

Comme j'ai eu l'idée de créer un projet pour un live coding de 1h, j'ai résolu de créer une interface en u...
[Courte citation de 8% de l'article original]