使用 Svelte 和 ElizaBot 構(gòu)建簡單的聊天機(jī)器人

您是否曾經(jīng)想過創(chuàng)建一個(gè)簡單的聊天機(jī)器人？在本文中，我們將使用 Svelte 和經(jīng)典的 ElizaBot 構(gòu)建一個(gè)輕量級聊天機(jī)器人應(yīng)用程序。您將學(xué)習(xí)如何處理用戶交互、管理反應(yīng)狀態(tài)，甚至模擬打字延遲以獲得真實(shí)的體驗(yàn)。

讓我們開始吧！

先決條件

要繼續(xù)操作，您需要：

• Svelte的基本知識。
• 構(gòu)建 Svelte 應(yīng)用程序的工作環(huán)境。如果您沒有，請查看 Svelte 入門指南。

設(shè)置項(xiàng)目

首先安裝 ElizaBot，一個(gè)簡單的聊天機(jī)器人庫：

npm install elizabot

使用您喜歡的方法創(chuàng)建一個(gè)新的 Svelte 應(yīng)用程序，然后將以下代碼包含在 Svelte 組件文件中（例如 Chatbot.svelte）。

守則

這是聊天機(jī)器人的完整代碼：

腳本

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

HTML 標(biāo)記

<div>




<hr>

<h2>
  
  
  它是如何運(yùn)作的
</h2>

<ol>
<li>
<p><strong>用戶輸入處理</strong>:</p>

<ul>
<li>當(dāng)用戶鍵入消息并按“Enter”鍵時(shí)，該消息將添加到評論數(shù)組中，并將作者設(shè)置為用戶。</li>
</ul>
</li>
<li>
<p><strong>ElizaBot 回復(fù)</strong>：</p>

<ul>
<li>消息通過 eliza.transform(text) 傳遞給 ElizaBot 進(jìn)行響應(yīng)。</li>
<li>在模擬打字延遲期間會顯示占位符消息 (...)。然后在短暫的隨機(jī)延遲后顯示最終響應(yīng)以模擬打字。</li>
</ul>
</li>
<li>
<p><strong>自動滾動</strong>:</p>

<ul>
<li>beforeUpdate 和 afterUpdate 生命周期掛鉤確保聊天自動滾動到最新消息，除非用戶手動向上滾動。</li>
</ul>
</li>
<li>
<p><strong>造型</strong>：</p>

<ul>
<li>來自機(jī)器人和用戶的消息使用動態(tài) CSS 類（eliza 和用戶）設(shè)置不同的樣式。這有助于在視覺上區(qū)分機(jī)器人的響應(yīng)和用戶的輸入。</li>
</ul>
</li>
</ol>


<hr>

<h2>
  
  
  運(yùn)行應(yīng)用程序
</h2>

<p>啟動您的 Svelte 應(yīng)用程序，您將看到與 ElizaBot 的聊天界面。嘗試輸入消息并觀察機(jī)器人的響應(yīng)。延遲給交互帶來自然的感覺。</p>


<hr>

<h2>
  
  
  增強(qiáng)功能
</h2>

<p>想要更進(jìn)一步嗎？這里有一些想法：</p>
<ul>
<li>
<strong>添加發(fā)送按鈕</strong>：除了按“Enter”之外，還包括一個(gè)發(fā)送消息的按鈕。這可以提高可訪問性和用戶體驗(yàn)。</li>
<li>
<strong>特定于關(guān)鍵字的響應(yīng)</strong>：通過為某些關(guān)鍵字或短語添加自定義邏輯來增強(qiáng) ElizaBot 的響應(yīng)。</li>
<li>
<strong>消息時(shí)間戳</strong>：顯示每條消息的時(shí)間戳，讓聊天感覺更真實(shí)。</li>
<li>
<strong>保留聊天歷史記錄</strong>：將聊天歷史記錄保存在本地存儲或數(shù)據(jù)庫中，以便用戶可以重新訪問之前的對話。</li>
<li>
<strong>打字動畫</strong>：為 ElizaBot 添加動畫或旋轉(zhuǎn)器，使打字延遲更具視覺吸引力。</li>
<li>
<strong>移動響應(yīng)能力</strong>：確保聊天界面能夠很好地適應(yīng)不同的屏幕尺寸，從而在移動設(shè)備上提供無縫體驗(yàn)。</li>
</ul>


<hr>

<h2>
  
  
  結(jié)論
</h2>

<p>在本教程中，我們使用 Svelte 和 ElizaBot 構(gòu)建了一個(gè)簡單的聊天機(jī)器人。此示例演示了 Svelte 的反應(yīng)性和生命周期掛鉤的實(shí)際應(yīng)用，同時(shí)還提供了一種有趣且交互式的方式來試驗(yàn)聊天機(jī)器人。</p>


          </div>

            
        

以上是使用 Svelte 和 ElizaBot 構(gòu)建簡單的聊天機(jī)器人的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！