使用 Svelte 和 ElizaBot 建立簡單的聊天機(jī)器人

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

讓我們開始吧！

先決條件

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

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

設(shè)定項目

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

npm install elizabot

使用您喜歡的方法建立一個新的 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è)定為使用者。 </li>
</ul>
</li>
<li>
<p><strong>ElizaBot 回覆</strong>：</p>

<ul>
<li>訊息透過 eliza.transform(text) 傳遞給 ElizaBot 回應(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」之外，還包括一個發(fā)送訊息的按鈕。這可以提高可訪問性和用戶體驗。 </li>
<li>
<strong>特定於關(guān)鍵字的回應(yīng)</strong>：透過為某些關(guān)鍵字或短語添加自訂邏輯來增強(qiáng) ElizaBot 的回應(yīng)。 </li>
<li>
<strong>訊息時間戳</strong>：顯示每個訊息的時間戳，讓聊天感覺更真實。 </li>
<li>
<strong>保留聊天歷史記錄</strong>：將聊天歷史記錄保存在本機(jī)儲存或資料庫中，以便使用者可以重新存取先前的對話。 </li>
<li>
<strong>打字動畫</strong>：為 ElizaBot 添加動畫或旋轉(zhuǎn)器，使打字延遲更具視覺吸引力。 </li>
<li>
<strong>行動響應(yīng)能力</strong>：確保聊天介面能夠很好地適應(yīng)不同的螢?zāi)怀叽?，從而在行動裝置上提供無縫體驗。 </li>
</ul>


<hr>

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

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


          </div>

            
        

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