使用 Svelte 和 ElizaBot 构建简单的聊天机器人

php中文网 2024-12-06 11:48:13

使用 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 class="chat">
    <h1>Eliza</h1>
    <div class="scrollable" bind:this={div}>
        {#each comments as comment}
            <article class={comment.author}>
                <span>{comment.text}</span>
            </article>
        {/each}
    </div>
    <input type="text" on:keydown={handleKeydown} placeholder="Type your message and press Enter">
</div>

它是如何运作的

用户输入处理:
- 当用户键入消息并按“enter”键时，该消息就会添加到评论数组中，并将作者设置为用户。
elizabot 回复：
- 消息通过 eliza.transform(text) 传递给 elizabot 进行响应。
- 在模拟打字延迟期间会显示占位符消息 (...)。然后在短暂的随机延迟后显示最终响应以模拟打字。
自动滚动:
- beforeupdate 和 afterupdate 生命周期挂钩确保聊天自动滚动到最新消息，除非用户手动向上滚动。
造型：
- 来自机器人和用户的消息使用动态 css 类（eliza 和用户）设置不同的样式。这有助于在视觉上区分机器人的响应和用户的输入。