peekobotダウンロード - peekobotソースコードのダウンロード

peekobot

AI ソースコード

1.0.0

ダウンロード

ピーコボット

Peekobot は、100 行弱の ES6 バニラ JavaScript (および一部の CSS) で記述された、Web サイト向けのシンプルで選択主導型のチャットボットフレームワークです。

/docsフォルダーにボットの例があります。

いじることができる CodePen もあります。

特徴

小さく、シンプルで、依存関係はありません (古いブラウザーとの互換性が必要な場合を除く)
会話を単純な JavaScript オブジェクトとして定義します
選択/ボタン主導の会話
URL や会話の他の部分にリンクするオプション

ブラウザの互換性

私は async/await および CSS カスタムプロパティを使用しているため、大まかに言えば、Internet Explorer と Opera Mini はサポートされていません。

Babel などを使用して、JavaScript に IE11 互換性をもたらすことができます。

必要に応じて、CSS カスタムプロパティを手動でインライン化することもできます。

使用法

Peekobot はパッケージやライブラリではありません。 npm installできません。スターターキットまたはフレームワークとして考えてください。アイデアは、そのコピーを取得して、それを使って独自のことを行うということです。

もし使ったら、私にラインを送って、あなたが作ったものを見せてください！他の人がそれを使って何をしているのか見てみたいです。ありがとう！ ?

Peekobot を使用するには、次のことを行う必要があります。

Peekobot のスクリプトとスタイルを HTML に追加する
Peekobot マークアップを HTML に追加する
会話を定義する

1. Peekobot のスクリプトとスタイルを HTML に追加します

peekobot.jsファイルとpeekobot.cssファイルをプロジェクトにダウンロードします。

これを行うには、GitHub からこれらのファイルの生のコードを取得するか、プロジェクトのクローンを作成します。

次に、Peekobot のスクリプトとスタイルを HTML に追加します。

これらはhead中に入れるべきです:

    <!-- Peekobot カスタム プロパティ (CSS 変数) - これらを設定します。 --><スタイル>:root {
            --peekobot-高さ: 80vh;
            --peekobot-アバター: url();
        }</style><!-- Peekobot スタイル --><link rel="stylesheet" href="peekobot.css">

ここでチャットボットウィンドウの高さを変更したり、チャットボットがチャットで使用する「アバター」URL を定義したりできることに注意してください。これは小さく、正方形で、円形の中に収まる必要があります。私の CSS は 24 ピクセル四方で表示されるため、48 ピクセル x 48 ピクセルの画像で問題ありません。

これらは JavaScript をロードするために HTML の下部に配置する必要があります。

    <script src="conversation.js"></script><script src="peekobot.js"></script>

2. Peekobot マークアップを HTML 本文に追加します

チャットボットを表示する HTML 本文に Peekobot マークアップを追加します。

    <div id="peekobot-container"><div id="peekobot-inner"><div id="peekobot"></div></div></div>

3. 会話を定義する

会話定義は、 chatという JavaScript 変数に配置する必要があります。これをconversation.jsファイルで定義します。必要に応じてインライン化できます。

chat変数はオブジェクトである必要があります。チャットオブジェクト内:

最初のプロパティ名/キーは数値 1 である必要があります
後続のプロパティ名には数値または文字列を使用できます。文字列を使用すると、会話の一部をグループ化できます。
各プロパティ値は会話のエントリです。

会話エントリには次のものが必要です。

会話のこの時点でチャットボットが発言するtextプロパティ
どちらか：

nextプロパティ。チャットオブジェクトの数値キーを記述することで次のチャットエントリを定義し、チャットボットがユーザーからの入力なしにいくつかのことを順番に言う必要がある場合に使用されます。または
ユーザーが選択できる選択肢を定義するoptionsプロパティ。これはオプションオブジェクトの配列です。

オプションオブジェクトには次のものが必要です。

ユーザーの選択のラベルであるtextプロパティ、およびそのいずれか
チャットオブジェクトのプロパティキーを記述することで次のチャットエントリを定義するnextプロパティ。ユーザーがこのオプションを選択したときに使用されます。または
ユーザーが移動するリンクを定義するurlプロパティ

チャットオブジェクトの簡単な例は次のとおりです。

 const chat = {1: {text: 'おはようございます',next: 'question1'},question1: {text: '朝食と一緒に紅茶かコーヒーはいかがですか?',options: [{text: 'Tea', next: 'response1'},{text: 'Coffee',next: 'response2'}]},response1: {text: '素晴らしい - 美味しい飲み物私自身そう言っています。'},response2: {text: 'ご希望どおり'}}