アルファ
1.0.0
Alpha はボット、または独自の Web ベースのチャットボットを作成するための基盤です。私たちは、チャットボットが非常に便利で非常に楽しいものになると考えてこのプロジェクトを開始しましたが、現状ではほとんどのチャットボットが Facebook などの既存のメッセージング プラットフォームに限定されており、これは問題ありませんが、ボットを他の場所に常駐させたい場合はどうすればよいでしょうか。ウェブ？
独自のボットを構築し、独自のビジュアル スタイルとルールを定義できるほか、カスタマイズとロジックを無制限に制御できます。さまざまなソリューションがすでに存在しますが、制限があり、コストがかかり、実装が難しい場合があります。
ここでアルファが役に立ちます。このライブラリは、非常に簡単な方法で独自のボットを構築できるように設計されています。次のことを行うだけです。
ダウンロード
独自の Q&A ツリーを挿入する
独自の色や画像を挿入する
Alpha は、UI 全体のレンダリングとアプリケーションの状態の処理を処理します。 React (さらに言えば JavaScript) についての知識はまったく必要ありません。ただし、React と Redux の使い方を理解していれば、ボット アプリのレンダリングをさらにカスタマイズしたり、選択したバックエンドや AI エンジンに接続したりすることもできます。
インストール
ダイアログのカスタマイズ
推奨事項の作成
UIのカスタマイズ
React アプリのカスタマイズ
メールの送信 (未定)
任意のバックエンドへの接続 (TBD)
AI エンジンへの接続 (未定)
Alpha はDocker上で実行するように構築されています。ただし、システム内にNodeJSとnpmまたはYarn (推奨) があれば、ローカルで実行できます。
コンピュータにインストールして実行するには、ターミナルで次のコマンドを実行するだけです。 Docker をインストールする必要があります (Docker を使用しない手順については以下を参照してください)。
このリポジトリのクローンを作成します: git clone https://github.com/IcaliaLabs/alpha.git
ディレクトリに移動します: cd alpha
依存関係をインストールします: docker-compose run --rm alpha yarn install
その後、サーバーを持ち上げることができます: docker-compose up alpha
それでおしまい！ブラウザでlocalhost:3000 * を開くと、デモ ボットが起動して実行されていることがわかります。
開発モードで実行する場合の重要なポイントがいくつかあります。
ボット アプリではホット リロードが有効になるため、Webpack + React の利点を体験できます。
Redux DevToolsはデフォルトで有効になっているため、アプリのアクションや状態の変化をリアルタイムで検査できます。
各ボット メッセージ間の時間は0 に設定されます。これは、開発者が会話フローを何度も確認する際のフラストレーションを最小限に抑えるためです。ただし、必要に応じて、 app/containers/BotContainer/sagas.jsでこの動作を変更できます。
Heroku: git push heroku masterを実行するだけです。このボットは Heroku 対応です。
Docker を使用したローカル:イメージをコンパイルして本番環境でどのように動作するかを確認できる場合は、ビルドもまとめます。ただ実行してください:
docker-compose up release
イメージを構築し、運用サーバーを起動します。
Docker を使用せずにインストールして実行したい場合は、すべての依存関係をディレクトリに直接インストールする必要があります。
開発用:
このリポジトリのクローンを作成します: git clone https://github.com/IcaliaLabs/alpha.git
ディレクトリに移動します: cd alpha
npm installまたはyarn install実行して依存関係をインストールします。
npm start実行してサーバーを起動します
ブラウザでlocalhost:3000にアクセスします
生産の場合:
このリポジトリは Heroku に対応しています。 git push heroku master実行するだけです。
何らかの理由でpackage.jsonのスクリプトを変更する場合は、運用サーバーにデプロイする前に必ず次の手順を検討してください。
AWS の場合は、ここにリストされているのと同じ手順に従うことができます
Azure/Softlayer/その他のサーバーの場合は、サーバーに ssh で接続し、リポジトリをプルし、 yarn使用して依存関係をインストールしてから、 npm run build実行して./buildフォルダーを作成する必要があります。最後に、 start:prod使用してサーバーを起動できます。あるいは、 start:productionを実行するだけで、これらのステップが順番にまとめて実行され、さらにテストも実行されます。
Q&A ロジックを含む、ボットの発言の背後にあるすべてのロジックは、 app/BotMind/にあるBotMind内に存在します。チャット UI ではバブルとしてレンダリングされるため、個々のボットまたはユーザー入力をバブルと呼びます。
ダイアログをカスタマイズするには、 app/BotMind/_initialBubble.jsとapp/BotMind/BotMindFlows/index.jsを理解して編集するだけです。
BotMind のメイン ファイルはBotMind.jsですが、このファイルは_initialBubble.js 、 _nextBubble.js 、および_recommendationBubbles.jsに存在する関数のコレクターおよびエクスポーターとしてのみ機能します。これら 3 つのファイルは、 app/BotMind/BotMindFlows/内にある Q&A ツリーに基づいてロジックを実行します。
ここでは、初期化時、またはユーザーが会話の再開を選択したときに、会話ツリーのどの時点でボットを開始するかを設定できます。
このファイルには、ボットまたはユーザーからの最後のメッセージに基づいてボットがどのバブルまたはダイアログにジャンプするかを示すロジックが含まれています。より詳細なカスタマイズを希望しない限り、このファイルを変更する必要はありません。ご自身の責任で進めてください。
このファイルは、ダイアログ バブルでshouldEstimateRecommendation: trueが渡されたときにパスを選択するロジックを実行します。このファイルは、会話中にバッグ システムによって蓄積されたポイントに基づいて機能します。より詳細なカスタマイズを希望しない限り、このファイルを変更する必要はありません。ご自身の責任で進めてください。
BotMindFlow はapp/BotMind/BotMindFlows/にあります。デフォルトでは、ここにはindex.jsファイルのみが表示されますが、会話ツリーが大きくなりすぎた場合は、独自のファイルを作成し、このようにスプレッド演算子を使用してindex.js使用してそれらを結合できます。
import greetings from './conversation1';
import designSprint from './conversation2';
import designSprintQuestions from './conversation3';
const questions = {
...conversation1,
...conversation2,
...conversation3,
}
export default questions; BotMind は、( _nextBubble.js内で) どこに行くべきかを分析するたびに、 app/BotMind/BotMindFlows/index.js内で質問のハッシュを見つけることを期待します。質問は…ご想像のとおり、個々の質問と回答のハッシュで構成されています。ここで、会話のロジックと流れを構築し始めることができます。たとえば、デモでは次のことがわかります。
const question = {start:{botPrompt: "こんにちは、私の名前はアルファです。私は素晴らしいチャットボットです。",answers: [{nextId: "myPurpose"}] },myPurpose:{botPrompt: "私の目的は、ユーザーをガイドし、意思決定と推奨を行うことができるシンプルなチャットボットであることです。",answers: [{nextId: "yourName"}]},yourName:{botPrompt: "それで、あなたの名前は何ですか?",input: textField(),answers: [ {answer: common_greetings,nextId: "greetings_notAName", }, {answer : common_greetings_negative,catchName: true,nextId: "asYouCanSee", },],},
...}デフォルトの質問をエクスポートします。各質問ハッシュには独自の一意の ID が必要です。ボットの会話ライブラリが大きくなるにつれて、どの ID が何をするのかを覚えておくのが面倒になる可能性があるため、少し詳しく記述する必要がある場合でも、これらの ID をできるだけわかりやすいものにすることをお勧めします。すべての質問ハッシュが占有します。次のオプション:
botPrompt ([文字列] が必要):ボットからのメッセージ
回答 ([配列] 必須):ユーザーの回答に基づいてボットが返す可能性のあるさまざまな応答。配列はハッシュで構成され、それぞれが考えられる会話フローの結果を表します。 [ Answers ] 内のハッシュには次のオプションがあります。
nextId ([文字列] 必須) : この回答が満たされた場合にボットが移動するダイアログ ID を決定します。ボットからの最後のメッセージ、または推奨事項の推定 (以下を参照)にジャンプする前に、 nullを渡す必要があります。
Answer ([String | RegEx]) : このハッシュをトリガーするユーザーの回答。ユーザーに対する回答を事前定義するためにselectFieldまたはtagsField使用している場合は、文字列を使用しても問題ありません。それ以外の場合は、RegEx を使用することをお勧めします (例を参照)。
sumToBags ([Array]) : ここで、より高度なフロー制御を行ったり、ボットの目的である場合は推奨事項を出力したりするために、 BagsSystemへのポイントの追加を開始できます。 sumToBags は通常次のようになります: sumToBags:[{name: "recommendation1", points: 1}, {name: "recommendation2", points: 3}]
catchName ([Boolean]) : ユーザー メッセージからのユーザー名をアプリの状態に保存するよう React に通知します。
catchCompanyName ([Boolean]) : 上記と同じですが、会社名です。
catchMail ([Boolean]) : 電子メール アドレス以外は上記と同じです。
catchPhone ([Boolean]) : 電話番号以外は上記と同じです。
shouldEstimateRecommendation ([Boolean]) : 会話を進めるために、通常のフローを中断して推奨バッグを分析するようにBotMind に信号を送ります (例を参照)。
finishConversation ([Boolean]) : 次のダイアログで会話を終了するようボットに信号を送ります。これが発生すると、ユーザー入力は無効になり、ユーザーが「再起動」を選択するまでボットは「オフライン」になります。
注 – このダイアログ部分の botPrompt が影響を期待していない場合は、次のようにnextIdを渡すだけで済みます。
answers: [
{
nextId: "hello"
}
] input ([Object]) : このbotPrompt中にユーザーが使用できる入力の種類 (テキスト フィールド、タグ、選択、無効など) を決定します。デフォルトでは、テキストフィールドの入力は無効になっています。 index.jsファイルの先頭に含まれるStateFormatterヘルパーを使用することをお勧めします。
type ([String]) : ボットが送信するメッセージの種類 (「テキスト」、「メディア」、「リンク」、または「transformedText」)。
varName ([String]) : 入力タイプとして「transformedText」を選択した場合、このオプションを参照するbotPromptに@varNameを記述することができます。ボットはメッセージをレンダリングするときに、 React 状態に保存されている変数を検索し (以下を参照)、その変数の値を@varNameに置き換えます。
上で述べたように、いくつかの値を React 状態に保存し、後でこれらの値に基づいて反応/フロー/推奨を計算することを選択できます。私たちはこれをバッグシステムと呼んでいます。
バッグ システムのコンセプトは、会話の進行に応じて「ポイント」を詰めることができるいくつかの「バッグ」を事前に定義することです。最後に、質問と回答のハッシュの 1 つでshouldEstimateRecommendation: true呼び出すことにすると、 _recommendationBubbles.jsが呼び出され、各バッグが蓄積したポイント数に基づいて次に何を表示するかを決定します。
最初のステップは、使用するバッグを/app/BotMind/recommendationBags.jsで定義することです。これらのバッグを定義しない場合、ボットは機能しますが、 addToBagsまたはshouldEstimateRecommendation呼び出したときに何をすべきかわかりません。バッグはこんな感じです。
const recommendationBags = [
{
name: "redWine",
defaultValue: 0,
goToBubbleId: "redWine_start",
},
{
name: "whiteWine",
defaultValue: 0,
goToBubbleId: "whiteWine_start",
},
{
name: "roseWine",
defaultValue: 0,
goToBubbleId: "roseWine_start",
},
]
export default recommendationBags;その後、質問と回答のフローでaddToBags使用して追加するタイミングを定義できます。たとえば、次のようになります。
question1:{
botPrompt: "Which of these are you having?",
input: selectField(["Red Meat", "Sea Food", "Chicken", "Pasta"]),
answers: [
...
{
answer: "Red Meat",
nextId: "question2",
sumToBags:[{name: "redWine", points: 4}, {name: "roseWine", points: 1}]
},
...
]
}準備ができたら、次のようにshouldEstimateRecommendation呼び出すだけです。
question2:{
botPrompt: "What will you serve for dessert?",
input: selectField(["Chocolate", ...]),
answers: [
...
{
answer: "Chocolate",
shouldEstimateRecommendation: true,
nextId: null,
sumToBags:[{name: "redWine", points: 3}, {name: "whiteWine", points: 1}, {name: "roseWine", points: 2}]
},
...
]
},この例では_recommendationBubbles.jsが呼び出されるため、次のボット バブルはおそらくredWine_startにあるものになります。
時間を節約するために、UI を事前定義することにしました。
Bot のスタイルの大部分は、単一のファイル/app/customization/styleVariables.jsによって制御されます。ここでは、UI の背景だけでなく、すべての要素に使用されるほとんどすべての色を変更できます。
UI にさらに変更を加えたい場合は、スタイルシートファイルを直接掘り下げることができます。 /app/global-styles.jsにはグローバル ファイルがあり、一部のコンポーネントまたはコンテナーには、特定のモジュール式コンポーネントのそれぞれのフォルダーに独自のstyledComponents.jsファイルがあります。これらのファイルは、React/ES6 用の非常に素晴らしいライブラリであるStyled-Components を使用します (これは公式にベスト プラクティス支援とみなされます)。これらのファイルは、JavaScript のタグ付きテンプレート リテラルを使用して JS 変数を CSS で補間しますが、心配しないでください。これらは通常の CSS/SCSS とほぼ同じように扱うことができます。
注 - 私たちの目的は、 /app/components/UserInput/styledComponents.jsにあるような 100% 独立したモジュール式スタイルのコンポーネントに段階的に移行し、 /app/global-styles.jsにあるほぼすべてのコードを削除することです。
コンポーネントの CSS をいじるだけではカスタマイズの希望が満たされない場合は、他のほとんどすべてを自由にカスタマイズできますが、この時点を超えると、アプリの React (+Redux) 側を処理する必要があります (以下を参照してください）。
Alpha の React 側全体が、この素晴らしいリポジトリをベースとしてリファクタリングされました。 React の最も確立されたベスト プラクティスを活用する、つまり以下を使用します。
リダックス
不変JS
再選択
Redux-Saga
スタイル付きコンポーネント
Alpha の React 側をいじりたい場合は、最初にこれらのドキュメントを参照することをお勧めします。
ボットの所有者やエンドユーザーに、会話の要約などを記載した自動メールを送信したいと考えていると思います。私たちは、最も柔軟でバックエンドに依存しないソリューションを提供する方法に取り組んでいます。実質的には「プラグ アンド プレイ」だけが可能になります。
現時点での最善の策は、これを Node または Express (または Rails 5.1.x) サーバーに接続し、独自のメーラー ソリューションを活用することです。 Rails ベースの実装に使用するファイル/app/BotMind/BotMailer.jsをご覧ください。ただし、現時点では、 /app/containers/BotContainer/sagas.jsなので、独自の物語を書く必要があります。
このボットは React + Webpack のみに基づいています。つまり、Webpack で動作する限り、任意のフレームワーク、バックエンドなどにプラグインできるはずです。
現時点では、ボットは任意の API にシームレスに接続できますが、目的の動作を実現するには、独自のアクション クリエーターとストーリーを書き留める必要があります。
このボットをさまざまな実装に適応させるにつれて、途中でドキュメントをここに追加します。
上記と同様に、対話を強化するために、このボットが Api.ai や IBM の Watson などの他の人工知能エンジンに接続できるようにする予定です。これは私たちの最優先のやるべきことの 1 つです。
