Erstellen Sie einen einfachen Chatbot mit Svelte und ElizaBot

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!

---

Voraussetzungen

Um mitzumachen, benötigen Sie:

• Grundkenntnisse von Svelte.
• Eine Arbeitsumgebung zum Erstellen von Svelte-Apps. Wenn Sie noch keines haben, schauen Sie sich die Svelte-Anleitung „Erste Schritte“ an.

---

Einrichten des Projekts

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).

---

Der Kodex

Hier ist der vollständige Code für den Chatbot:

Skript

<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>

Styling

<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>

HTML-Markup

<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>

• Schaltfläche „Senden“ hinzufügen: Fügen Sie zusätzlich zur Eingabetaste eine Schaltfläche zum Senden von Nachrichten hinzu. Dies kann die Zugänglichkeit und Benutzererfahrung verbessern.
• Schlüsselwortspezifische Antworten: Verbessern Sie die Antworten von ElizaBot, indem Sie benutzerdefinierte Logik für bestimmte Schlüsselwörter oder Phrasen hinzufügen.
• Nachrichten-Zeitstempel: Zeigt Zeitstempel für jede Nachricht an, um dem Chat ein realistischeres Gefühl zu verleihen.
• Chat-Verlauf beibehalten: Speichern Sie den Chat-Verlauf im lokalen Speicher oder in einer Datenbank, damit Benutzer ihre vorherigen Gespräche erneut aufrufen können.
• Tippanimation: Fügen Sie eine Animation oder einen Spinner für ElizaBot hinzu, um die Tippverzögerung optisch ansprechender zu gestalten.
• Mobile Reaktionsfähigkeit: Stellen Sie sicher, dass sich die Chat-Oberfläche gut an verschiedene Bildschirmgrößen anpasst, um ein nahtloses Erlebnis auf Mobilgeräten zu gewährleisten.

---

Abschluss

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!