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 と user) を使用して異なるスタイルで表示されます。これは、ボットの応答とユーザーの入力を視覚的に区別するのに役立ちます。</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 中国語 Web サイトの他の関連記事を参照してください。