使用 Svelte 和 ElizaBot 建立簡單的聊天機器人

使用 Svelte 和 ElizaBot 建立簡單的聊天機器人

您是否曾經想過要創建一個簡單的聊天機器人？在本文中，我們將使用 Svelte 和經典的 ElizaBot 建立一個輕量級聊天機器人應用程式。您將學習如何處理使用者互動、管理反應狀態，甚至模擬打字延遲以獲得真實的體驗。

讓我們開始吧！

---

先決條件

要繼續操作，您需要：

• Svelte的基本知識。
• 建構 Svelte 應用程式的工作環境。如果您沒有，請查看 Svelte 入門指南。

---

設定項目

先安裝 ElizaBot，一個簡單的聊天機器人庫：

npm install elizabot

使用您喜歡的方法建立一個新的 Svelte 應用程序，然後將以下程式碼包含在 Svelte 元件檔案中（例如 Chatbot.svelte）。

---

守則

這是聊天機器人的完整程式碼：

腳本

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

<div>




<hr>

<h2>
  
  
  它是如何運作的
</h2>

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

<ul>
<li>當使用者鍵入訊息並按下「Enter」鍵時，訊息將會加入到評論陣列中，並將作者設定為使用者。 </li>
</ul>
</li>
<li>
<p><strong>ElizaBot 回覆</strong>：</p>

<ul>
<li>訊息透過 eliza.transform(text) 傳遞給 ElizaBot 回應。 </li>
<li>在模擬打字延遲期間會顯示佔位符訊息 (...)。然後在短暫的隨機延遲後顯示最終響應以模擬打字。 </li>
</ul>
</li>
<li>
<p><strong>自動捲動</strong>:</p>

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

<ul>
<li>來自機器人和使用者的消息使用動態 CSS 類別（eliza 和使用者）設定不同的樣式。這有助於在視覺上區分機器人的回應和使用者的輸入。 </li>
</ul>
</li>
</ol>


<hr>

<h2>
  
  
  運行應用程式
</h2>

<p>啟動您的 Svelte 應用程序，您將看到與 ElizaBot 的聊天介面。嘗試輸入訊息並觀察機器人的回應。延遲給互動帶來自然的感覺。 </p>


<hr>

<h2>
  
  
  增強功能
</h2>

<p>想要更進一步嗎？這裡有一些想法：</p>
<ul>
<li>
<strong>新增發送按鈕</strong>：除了按下「Enter」之外，還包括一個發送訊息的按鈕。這可以提高可訪問性和用戶體驗。 </li>
<li>
<strong>特定於關鍵字的回應</strong>：透過為某些關鍵字或短語添加自訂邏輯來增強 ElizaBot 的回應。 </li>
<li>
<strong>訊息時間戳</strong>：顯示每個訊息的時間戳，讓聊天感覺更真實。 </li>
<li>
<strong>保留聊天歷史記錄</strong>：將聊天歷史記錄保存在本機儲存或資料庫中，以便使用者可以重新存取先前的對話。 </li>
<li>
<strong>打字動畫</strong>：為 ElizaBot 添加動畫或旋轉器，使打字延遲更具視覺吸引力。 </li>
<li>
<strong>行動響應能力</strong>：確保聊天介面能夠很好地適應不同的螢幕尺寸，從而在行動裝置上提供無縫體驗。 </li>
</ul>


<hr>

<h2>
  
  
  結論
</h2>

<p>在本教程中，我們使用 Svelte 和 ElizaBot 建立了一個簡單的聊天機器人。此範例示範了 Svelte 的反應性和生命週期掛鉤的實際應用，同時也提供了一種有趣且互動的方式來試驗聊天機器人。 </p>


          </div>

            
        

以上是使用 Svelte 和 ElizaBot 建立簡單的聊天機器人的詳細內容。更多資訊請關注PHP中文網其他相關文章！