Svelte と ElizaBot を使用してシンプルなチャットボットを構(gòu)築する

シンプルなチャットボットを作成したいと思ったことはありますか?この記事では、Svelte と古典的な ElizaBot を使用して、軽量のチャットボット アプリケーションを構(gòu)築します。ユーザー インタラクションの処理方法、反応?duì)顟B(tài)の管理方法、さらには入力遅延をシミュレートして現(xiàn)実的なエクスペリエンスを?qū)g現(xiàn)する方法を?qū)Wびます。

飛び込んでみましょう!

前提條件

この手順を進(jìn)めるには、次のものが必要です:

• Svelte の基礎(chǔ)知識(shí)。
• Svelte アプリを構(gòu)築するための作業(yè)環(huán)境。お持ちでない場(chǎng)合は、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」を押すと、作成者がユーザーとして設(shè)定されたメッセージがコメント配列に追加されます。</li>
</ul>
</li>
<li>
<p><strong>ElizaBot の返信</strong>:</p>

<ul>
<li>メッセージは、eliza.transform(text) を使用して応答のために ElizaBot に渡されます。</li>
<li>入力の遅延がシミュレートされている間、プレースホルダー メッセージ (...) が表示されます。その後、入力をシミュレートするために、短いランダムな遅延の後に最終応答が表示されます。</li>
</ul>
</li>
<li>
<p><strong>自動(dòng)スクロール</strong>:</p>

<ul>
<li>beforeUpdate および afterUpdate ライフサイクル フックにより、ユーザーが手動(dòng)で上にスクロールしない限り、チャットが最新のメッセージまで自動(dòng)的にスクロールされます。</li>
</ul>
</li>
<li>
<p><strong>スタイリング</strong>:</p>

<ul>
<li>ボットとユーザーからのメッセージは、動(dòng)的 CSS クラス (eliza と user) を使用して異なるスタイルで表示されます。これは、ボットの応答とユーザーの入力を視覚的に區(qū)別するのに役立ちます。</li>
</ul>
</li>
</ol>


<hr>

<h2>
  
  
  アプリの実行
</h2>

<p>Svelte アプリを起動(dòng)すると、ElizaBot とのチャット インターフェイスが表示されます。メッセージを入力してボットの応答を確認(rèn)してください。遅延により、インタラクションに自然な感觸が與えられます。</p>


<hr>

<h2>
  
  
  機(jī)能強(qiáng)化
</h2>

<p>これをさらに進(jìn)めたいですか?以下にいくつかのアイデアを示します:</p>
<ul>
<li>
<strong>送信ボタンを追加</strong>: 「Enter」を押す以外にメッセージを送信するボタンを追加します。これにより、アクセシビリティとユーザー エクスペリエンスが向上します。</li>
<li>
<strong>キーワード固有の応答</strong>: 特定のキーワードまたはフレーズにカスタム ロジックを追加して、ElizaBot の応答を強(qiáng)化します。</li>
<li>
<strong>メッセージのタイムスタンプ</strong>: 各メッセージのタイムスタンプを表示して、チャットをより現(xiàn)実的なものにします。</li>
<li>
<strong>チャット履歴の保存</strong>: チャット履歴をローカル ストレージまたはデータベースに保存して、ユーザーが以前の會(huì)話を再訪できるようにします。</li>
<li>
<strong>タイピング アニメーション</strong>: ElizaBot のアニメーションまたはスピナーを追加して、タイピングの遅延をより視覚的に魅力的にします。</li>
<li>
<strong>モバイルの応答性</strong>: モバイル デバイスでのシームレスなエクスペリエンスを?qū)g現(xiàn)するために、チャット インターフェイスがさまざまな畫面サイズに適切に適応していることを確認(rèn)します。</li>
</ul>


<hr>

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

<p>このチュートリアルでは、Svelte と ElizaBot を使用して単純なチャットボットを構(gòu)築しました。この例では、Svelte の反応性とライフサイクル フックの動(dòng)作を示すとともに、チャットボットを?qū)g験する楽しくインタラクティブな方法も提供します。</p>


          </div>

            
        

以上がSvelte と ElizaBot を使用してシンプルなチャットボットを構(gòu)築するの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。