Créez un chatbot simple avec Svelte et ElizaBot

Créez un chatbot simple avec Svelte et ElizaBot

Avez-vous déjà eu envie de créer un chatbot simple ? Dans cet article, nous utiliserons Svelte et le classique ElizaBot pour créer une application de chatbot légère. Vous apprendrez à gérer les interactions des utilisateurs, à gérer l'état réactif et même à simuler un délai de frappe pour une expérience réaliste.

Plongeons-nous !

---

Conditions préalables

Pour suivre, vous aurez besoin de :

• Connaissance de base de Svelte.
• Un environnement de travail pour créer des applications Svelte. Si vous n'en avez pas, consultez le guide de démarrage Svelte.

---

Mise en place du projet

Commencez par installer ElizaBot, une simple bibliothèque de chatbot :

npm install elizabot

Créez une nouvelle application Svelte en utilisant votre méthode préférée, puis incluez le code suivant dans un fichier de composant Svelte (par exemple, Chatbot.svelte).

---

Le code

Voici le code complet du chatbot :

Scénario

<script>
    import Eliza from 'elizabot';
    import { afterUpdate, beforeUpdate } from 'svelte';

    let div;
    let autoscroll;
    const eliza = new Eliza();
    let comments = [{ author: 'eliza', text: eliza.getInitial() }];

    function handleKeydown(event) {
        if (event.key === 'Enter') {
            const text = event.target.value.trim();
            if (!text) return;

            comments = comments.concat({ author: 'user', text });
            event.target.value = '';

            const reply = eliza.transform(text);
            setTimeout(() => {
                comments = comments.concat({ author: 'eliza', text: '...', placeholder: true });
                setTimeout(() => {
                    comments = comments.filter((comment) => !comment.placeholder).concat({
                        author: 'eliza',
                        text: reply
                    });
                }, Math.random() * 500);
            }, Math.random() * 200);
        }
    }

    beforeUpdate(() => {
        autoscroll = div && (div.offsetHeight + div.scrollTop) > (div.scrollHeight - 20);
    });

    afterUpdate(() => {
        if (autoscroll) div.scrollTo(0, div.scrollHeight);
    });
</script>

Stylisme

<style>
    .chat {
        display: flex;
        flex-direction: column;
        height: 100%;
        max-width: 320px;
    }

    .scrollable {
        flex: 1 1 auto;
        border-top: 1px solid #eee;
        margin: 0 0 0.5em 0;
        overflow-y: auto;
    }

    article {
        margin: 0.5em 0;
    }

    .user {
        text-align: right;
    }

    span {
        padding: 0.5em 1em;
        display: inline-block;
    }

    .eliza span {
        background-color: #eee;
        border-radius: 1em 1em 1em 0;
    }

    .user span {
        background-color: #ea0a0a;
        color: white;
        border-radius: 1em 1em 0 1em;
        word-break: break-all;
    }
</style>

Balisage HTML

<div>




<hr>

<h2>
  
  
  Comment ça marche
</h2>

<ol>
<li>
<p><strong>Gestion des entrées utilisateur</strong> :</p>

<ul>
<li>Lorsque l'utilisateur saisit un message et appuie sur « Entrée », il est ajouté au tableau des commentaires avec l'auteur défini comme utilisateur.</li>
</ul>
</li>
<li>
<p><strong>Réponse d'ElizaBot</strong> :</p>

<ul>
<li>Le message est transmis à ElizaBot pour une réponse en utilisant eliza.transform(text).</li>
<li>Un message d'espace réservé (...) s'affiche pendant le délai de frappe simulé. La réponse finale est ensuite affichée après un court délai aléatoire pour simuler la saisie.</li>
</ul>
</li>
<li>
<p><strong>Défilement automatique</strong> :</p>

<ul>
<li>Les hooks de cycle de vie beforeUpdate et afterUpdate garantissent que le chat défile automatiquement jusqu'au dernier message, à moins que l'utilisateur ne fasse défiler manuellement vers le haut.</li>
</ul>
</li>
<li>
<p><strong>Style</strong> :</p>

<ul>
<li>Les messages du bot et de l'utilisateur sont stylisés différemment à l'aide de classes CSS dynamiques (eliza et utilisateur). Cela permet de distinguer visuellement les réponses du bot et les entrées de l'utilisateur.</li>
</ul>
</li>
</ol>


<hr>

<h2>
  
  
  Exécuter l'application
</h2>

<p>Démarrez votre application Svelte et vous verrez une interface de discussion avec ElizaBot. Essayez de taper des messages et regardez le bot répondre. Le retard donne une impression naturelle à l'interaction.</p>


<hr>

<h2>
  
  
  Améliorations
</h2>

<p>Vous voulez aller plus loin ? Voici quelques idées :</p>
<ul>
<li>
<strong>Ajouter un bouton d'envoi</strong> : incluez un bouton pour envoyer des messages en plus d'appuyer sur "Entrée". Cela peut améliorer l'accessibilité et l'expérience utilisateur.</li>
<li>
<strong>Réponses spécifiques aux mots-clés</strong> : améliorez les réponses d'ElizaBot en ajoutant une logique personnalisée pour certains mots-clés ou expressions.</li>
<li>
<strong>Horodatage des messages</strong> : affichez les horodatages pour chaque message pour donner au chat une impression plus réaliste.</li>
<li>
<strong>Conserver l'historique des discussions</strong> : enregistrez l'historique des discussions dans un stockage local ou dans une base de données afin que les utilisateurs puissent revoir leurs conversations précédentes.</li>
<li>
<strong>Animation de frappe</strong> : ajoutez une animation ou un spinner pour ElizaBot afin de rendre le délai de frappe plus attrayant visuellement.</li>
<li>
<strong>Réactivité mobile</strong> : assurez-vous que l'interface de chat s'adapte bien aux différentes tailles d'écran pour une expérience fluide sur les appareils mobiles.</li>
</ul>


<hr>

<h2>
  
  
  Conclusion
</h2>

<p>Dans ce tutoriel, nous avons construit un chatbot simple en utilisant Svelte et ElizaBot. Cet exemple démontre la réactivité et les hooks de cycle de vie de Svelte en action, tout en offrant également une manière amusante et interactive d'expérimenter les chatbots.</p>


          </div>

            
        

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!