Heim >Web-Frontend >js-Tutorial >Erstellen Sie einen einfachen Chatbot mit Svelte und ElizaBot
Wollten Sie schon immer einen einfachen Chatbot erstellen? In diesem Artikel verwenden wir Svelte und den klassischen ElizaBot, um eine schlanke Chatbot-Anwendung zu erstellen. Sie erfahren, wie Sie mit Benutzerinteraktionen umgehen, den reaktiven Zustand verwalten und sogar eine Tippverzögerung für ein realistisches Erlebnis simulieren.
Lass uns eintauchen!
Um mitzumachen, benötigen Sie:
Beginnen Sie mit der Installation von ElizaBot, einer einfachen Chatbot-Bibliothek:
npm install elizabot
Erstellen Sie eine neue Svelte-App mit Ihrer bevorzugten Methode und fügen Sie dann den folgenden Code in eine Svelte-Komponentendatei ein (z. B. Chatbot.svelte).
Hier ist der vollständige Code für den Chatbot:
<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>
<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>
<div> <hr> <h2> Wie es funktioniert </h2> <ol> <li> <p><strong>Benutzereingabeverarbeitung</strong>:</p> <ul> <li>Wenn der Benutzer eine Nachricht eingibt und die Eingabetaste drückt, wird sie dem Kommentararray hinzugefügt, wobei der Autor als Benutzer festgelegt ist.</li> </ul> </li> <li> <p><strong>ElizaBot-Antwort</strong>:</p> <ul> <li>Die Nachricht wird an ElizaBot weitergeleitet, um mit eliza.transform(text) eine Antwort zu erhalten.</li> <li>Während der simulierten Tippverzögerung wird eine Platzhaltermeldung (...) angezeigt. Die endgültige Antwort wird dann nach einer kurzen zufälligen Verzögerung angezeigt, um das Tippen zu simulieren.</li> </ul> </li> <li> <p><strong>Auto-Scroll</strong>:</p> <ul> <li>Die Lebenszyklus-Hooks beforeUpdate und afterUpdate stellen sicher, dass der Chat automatisch zur neuesten Nachricht scrollt, es sei denn, der Benutzer scrollt manuell nach oben.</li> </ul> </li> <li> <p><strong>Styling</strong>:</p> <ul> <li>Nachrichten vom Bot und vom Benutzer werden mithilfe dynamischer CSS-Klassen (Eliza und Benutzer) unterschiedlich gestaltet. Dies hilft dabei, visuell zwischen den Antworten des Bots und den Eingaben des Benutzers zu unterscheiden.</li> </ul> </li> </ol> <hr> <h2> Ausführen der App </h2> <p>Starten Sie Ihre Svelte-App und Sie sehen eine Chat-Oberfläche mit ElizaBot. Versuchen Sie, Nachrichten einzugeben, und beobachten Sie, wie der Bot antwortet. Die Verzögerung verleiht der Interaktion ein natürliches Gefühl.</p> <hr> <h2> Verbesserungen </h2> <p>Möchten Sie noch weiter gehen? Hier sind einige Ideen:</p>
In diesem Tutorial haben wir einen einfachen Chatbot mit Svelte und ElizaBot erstellt. Dieses Beispiel demonstriert die Reaktivität und Lebenszyklus-Hooks von Svelte in Aktion und bietet gleichzeitig eine unterhaltsame und interaktive Möglichkeit, mit Chatbots zu experimentieren.
Das obige ist der detaillierte Inhalt vonErstellen Sie einen einfachen Chatbot mit Svelte und ElizaBot. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!