使用 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中文网其他相关文章！