https://d226lax1qjow5r.cloudfront.net/blog/blogposts/integrate-phone-calls-to-a-dialogflow-chatbot-via-websockets/dialogflow-bot_voice-call_120x600.png

WebSocket経由でDialogflowチャットボットに電話を統合する

最終更新日 July 26, 2021
#voice-api
#nodejs
#dialogflow

所要時間：4 分

はじめに

このチュートリアルでは、Dialogflow EssentialsとVonage WebSocketsインテグレーションを使用して、Dialogflowエージェントに電話をかける方法を紹介します。

下図はアーキテクチャの概要を示している。

Architecture overview showing how the parts are connectedDiagram of the call

前提条件

以下のステップで説明するアクションを実行するには、作成する必要があります：

  1. A ダイアログフローアカウント

  2. A Vonage API アカウント

ダイアログフローエージェントの作成

DialogflowはSaaS（Software as a Service）であり、会話型ユーザーインターフェースの構築に使用される自然言語理解プラットフォームです。

エージェントはDialogflowのインスタンスであり、チャットボットアプリケーションと考えることができます。このインスタンスによって、ユーザが発言した内容を インテントレスポンスを提供することができます。

手順に従ってください。

  1. 開く ダイアログフローコンソール

  2. 名前を付け、デフォルト言語を設定し、タイムゾーンを選択し、エージェントを作成するボタンをクリックしてエージェントを作成します。ボタンは Createまたは Create Agent

  3. 左のメニューから歯車のアイコンをクリックします。

  4. Googleプロジェクトで、プロジェクトID名をクリックします。例えば VonageDFこれで Google Cloudコンソール

Gif showing the steps to create the dialogflow AgentGif showing the steps to create the dialogflow Agent

Google Cloud Consoleでサービスアカウントを作成する

Dialogflowで作成した同じプロジェクトを使って、Google Cloudコンソールを介してGoogle Cloudプロジェクトとリソースを管理するためにグラフィカルユーザーインターフェースを使用します。次のステップでは、アクセス制御と認証のためにサービスアカウントを作成します。

手順に従ってください。

  1. Googleクラウドのコンソールから Google Cloud コンソールからをクリックします。 Go to project settings

  2. 左のメニューから Service accounts

  3. 一番上のバーで + Create Service Account

  4. サービス・アカウント名を覚えやすい名前にする。 VonageDF

  5. サービスアカウントの説明を追加する

  6. をクリックする。 Create and Continue

  7. 下 Grant this service account access to projectフィルタリングして役割を選択する Dialogflow API Admin

Gif showing the seven above steps while creating the Service AccountGif showing the seven above steps while creating the Service Account

サービスアカウントのページに戻ります。

  1. の下にある3つの点をクリックする。 action

  2. をクリックする。 Manage keys

  3. をクリックする。 Add Key

  4. をクリックする。 Create new Key

  5. 選択 JSON

  6. をクリックする。 Create

  7. つのファイルが .jsonファイルがダウンロードされた。このファイルを Dialogflow Reference Connection GitHubリポジトリに追加します。

Gif showing the above steps to generate the keysGif showing the above steps to generate the keys

Dialogflowリファレンス接続のセットアップ

Dialogflow リファレンス接続は ウェブソケット機能を使用します。音声通話が確立されると、Voice API アプリケーションは WebSocket 接続をトリガとして Dialogflow-reference-connection.これは音声通話の音声をリアルタイムでストリーミングします。

以下のステップでは、例として2つのオプションを示します。ngrokを使用して接続サーバーをトンネルし、Dialogflowエージェントと対話し、Herokuにデプロイする。

手順に従ってください。

  1. クローン dialogflow-reference-connection リポジトリをクローンし、ディレクトリ git clone https://github.com/nexmo-community/dialogflow-reference-connection && cd dialogflow-reference-connection

  2. お気に入りのIDEまたはテキストエディタでコードを開く。

  3. ダウンロードしたファイルを .jsonファイルをプロジェクトのルートに追加する。

  4. ファイルを作成する .envファイルを作成する。 .env.example

  5. 環境変数を設定する： GCLOUD_PROJECT_ID=<TheProjectIdFoundOnDialogflow> GOOGLE_CLOUD_CREDENTIALS=<TheJSONFileYouDownloaded.json>ターミナルから

  6. 依存関係をインストールする npm install

  7. ファイルDialogflow接続サーバーの実行 node df-connecting-server.jsApp Engine、Heroku、Cloud Runなど多くのデプロイタイプがある。

このチュートリアルでは ngrokトンネリングを使用した例を示します。 ngrokとHerokuについて詳しく説明しているリンクはこちらです。と Heroku について説明しているリンクです。

オプション1：ngrokを使った例

  1. 走る ngrok http 5000

  2. コンソールに表示されたURLをメモしておく（例えば xxxx.ngrok.io).この情報はチュートリアルの DF_CONNECTING_SERVERチュートリアルの「Dialogflow Voice APIサンプルアプリケーションのセットアップ」の部分で追加します。

The ngrok URL highlighted on the Visual Studio Code IDEThe ngrok URL highlighted on the IDE

オプション2：Herokuを使った例

  1. インストール ギット

  2. インストール HerokuコマンドラインHerokuアカウントにログインします。

  3. まだローカルにgitリポジトリがない場合は、作成してください： git init

  4. Heroku CLIを使用してコマンドラインからHeroku上にこのアプリケーションを作成することから始めます。注意: 以下のコマンドでは thisappnameをHerokuプラットフォーム全体でユニークな名前に置き換えてください。 heroku create thisappname

  5. アプリケーションページが表示されているHerokuダッシュボード上で Settingsボタンをクリックし Config Varsを追加し、それぞれの値を設定します：

GCLOUD_PROJECT_ID GOOGLE_APPLICATION_CREDENTIALS

  1. アプリケーションをデプロイする git push heroku masterまたは git push heroku mainブランチ名に応じて

  2. コンソールに表示されたURLをメモしておく（例えば thisappname.herokuapp.com).この情報はチュートリアルの DF_CONNECTING_SERVERチュートリアルの「Dialogflow Voice APIサンプルアプリケーションのセットアップ」の引数でこの情報を追加します。

Vonage Voice API アプリケーションの認証情報と電話番号の設定

An image explaining that to complete this tutorial you need a VONAGE API Account and to purchase a virtual number

手順に従ってください。

  1. アプリケーションの作成 Vonage API ダッシュボード

  2. アプリケーションに名前をつける。 VonageDF

  3. ボタンをクリックし、公開鍵と秘密鍵を生成します。 private.keyファイルがダウンロードされます。このチュートリアルの次のセクションで、このファイルをDialogflow Voice APIサンプルアプリケーションに追加します。

  4. このアプリケーションに電話番号をリンクします。まだお持ちでない場合は、左のメニューから Numbersをクリックし Buy Numbersをクリックし、手順に従って購入してください。

Dialogflow Voice APIサンプルアプリケーションをセットアップし、このVonageアプリケーションダッシュボードに情報を追加します。

Dialogflow Voice API サンプルアプリケーションのセットアップ

このサンプルアプリケーションは、Vonage Voice APIを使用して着信した音声通話に応答し、各通話ごとにDialogflow参照接続との間で音声をストリーミングするためのWebSocket接続を設定します。

ダイアログフローの ダイアログフロー参照接続コードは

  • 通話音声をDialogflowエージェントに送信します、

  • Dialogflowエージェントからの音声応答をWebSocket経由で発信者にストリーミングします、

  • Webhooksコールバックを介して、リアルタイムでトランスクリプトと発信者のスピーチセンチメントスコアをこのアプリケーションにポストバックする。 Voice APIサンプルアプリケーション.

このアプリケーションが実行されると、アプリケーションにリンクされた電話番号に電話をかけ、Dialogflowエージェントと音声で対話します。

ここでは、Dialogflowエージェントと対話する接続サーバーのトンネルにngrokを使用しますが、Herokuを使用した例をご覧になりたい場合は、以下の手順に従ってください。 Dialogflow Voice APIサンプルアプリケーションを参照してください。

手順に従ってください。

  1. ターミナルから Dialogflow Voice API サンプルアプリケーションをクローンします。をGitHubからクローンし、ディレクトリを変更します。 git clone https://github.com/nexmo-community/dialogflow-sample-voice-application && cd dialogflow-sample-voice-application以下のステップの説明、またはDialogflow Voice API Sample ApplicationのReadmeファイルを参照してください。 Dialogflow Voice API サンプルアプリケーション

  2. を追加します。 private.keyVonage Dashboardから生成され、お使いのマシンにダウンロードされたものをプロジェクトルートに追加します。

  3. から .env.exampleファイルを .envファイル

  4. 環境変数に Vonage API ダッシュボード

  • は SERVICE_NUMBERは購入したバーチャル番号です。国番号には、00や+を付けないでください。

  • は DF_CONNECTING_SERVERはすでに実行しているDialogflowリファレンスのサーバーです。

  1. 依存関係をインストールする npm install

  2. を実行します。 df-application.js node df-application.js以下に ngrok と Heroku それぞれの次のステップを示します：

    オプション1：以下はngrokを使用した手順である。

  3. 別のターミナルタブで以下を実行します。 ngrok http 8000Vonage Dashboardのウェブサイトに戻り、capabilitiesの下にある

  4. Voice を切り替えてこの機能を有効にする。

  5. で実行しているngrokのURLを dialogflow-sample-voice-applicationの後に /answerを追加します。HTTP GETが選択されていることを確認してください。

  6. で実行しているngrokのURLを dialogflow-sample-voice-applicationの後に /eventを追加します。HTTP POSTが選択されていることを確認してください。

  7. 変更を保存をクリック

Vonage DashboardVonage Dashboard

オプション2：Herokuを使用した以下のステップ

  1. 別のターミナルタブで、まだローカルにgitリポジトリがない場合は、作成してください： git init

  2. Heroku CLIを使用してコマンドラインからHeroku上にこのアプリケーションを作成することから始めます。注: コマンドでは myappnameをHerokuプラットフォーム全体でユニークな名前に置き換えてください。 heroku create myappname

  3. アプリケーションページが表示されているHerokuダッシュボード上で Settingsボタンをクリックし Config Varsファイルにあるそれぞれの値を設定します。 .envファイルにあるそれぞれの値を設定します。

API_KEY API_SECRET APP_ID SERVICE_NUMBER DF_CONNECTING_SERVER

パラメータ PRIVATE_KEY_FILEを追加する。 ./private.key

  1. アプリケーションページが表示されているHerokuダッシュボード上で Open Appボタンをクリックし、URL

  2. では、アプリケーションをデプロイしてみましょう。Vonage Dashboardのウェブサイトに戻り、capabilitiesの下にあります：

  3. Voice を切り替えてこの機能を有効にする。

  4. そのホスト名（HerokuからコピーしたURL）の後に /answerがアンサーURLに使用されます。HTTP GETが選択されていることを確認してください。

  5. イベントURLの /eventにも同じことを行います。HTTP POSTが選択されていることを確認してください。

  6. 変更を保存をクリック

Vonage DashboardVonage Dashboard

ダイアログフローエージェントの改善

チュートリアルのこの時点で電話番号に電話をかけようとすると、Dialogflowの観点から会話の開始点である Default Welcome Intent.

ユーザーの応答リストから、発信者にメッセージが送り返される。しかし、他の会話の順番のために訓練された他のデータを持っていないので、会話は交代しない。

一歩下がって、Dialogflowのコンセプトのいくつかを探ってみましょう。ユーザーが発するかもしれない発話を追加し、返答を提供し、会話の終わりを追加することで、交互に行われる完全な会話を見ることができます。

エージェントを作成したら、会話を処理し、形成するインテントを作成します。

ユーザーの発話があった場合、Dialogflowは、NLPとユーザーがそのインテントにマッチする可能性のあるトレーニングフレーズに基づいて、発話された内容をインテントに照合する。インテントの分類が行われると、応答がユーザーに送り返される。

エンティティは、会話から抽出する情報のタイプです。後述するユースケースでは、電話でテーブルを予約します。会話から抽出する情報は person, dateと time.

デフォルトのウェルカム・インテントを改良し、インテントを作成し、エンティティの概要を説明し、会話の終わりを追加してテストしてみましょう。

手順に従ってください。

  1. 開く ダイアログフローコンソールこのチュートリアルのために正しいエージェントにいることを確認してください。

  2. をクリックしてください。 Default Welcome Intent

  3. 下にスクロールし、回答を消して追加する： Welcome to our Demonstration Restaurant. When and for whom would you like to book a table?

  4. 保存をクリック

  5. Intentsメニュー項目をクリックする。

  6. 新しいインテント」ボタンをクリックします。

  7. という名前をつけよう。 Table Booker

  8. トレーニングフレーズの下に以下のトレーニングフレーズを追加する。

    • 10日の13時にニコールのテーブルをお願いします。

    • 2021年12月10日14:00の枠をジョセフのために予約できますか？

    • 10/09/2020の16:00にAmandaのテーブルを予約したいのですが。 文章を入力すると、いくつかの単語がカラフルなハイライトで表示されます。 @sys.person, @sys.dateそして @sys.time.

  9. アクションとパラメータ requiredにチェックを入れる。 person, dateと time

  10. 各パラメーターにプロンプトを追加することで、会話中に相手が特定の情報を言わなかった場合に、追加するよう促すことができる。

Training phrases examplesTraining phrases examples

  1. レスポンスには次のように書き加える： Table booked for $person at $time on $date. Thank you!

  2. トグル Set this intent as end of conversation以下の回答

  3. 保存をクリック

Table Booker Intent OverviewTable Booker Intent Overview

ダイアログフローエージェントとの音声対話

さて、すべてのパーツをセットアップしたところで、バーチャル電話番号に電話をかけてテストしてみましょう！

Voice API アプリケーションにリンクされた電話番号に電話をかけ、Dialogflow Agent と対話すると、確認メッセージが聞こえます： Connecting your call, please wait..Vonage APIプラットフォームからのText To Speechは、プラットフォームが電話に出るとすぐに再生されます。

WebSocketが確立されると、Vonage APIプラットフォームはText To SpeechをDialogflowエージェントに再生します。 HelloをDialogflowエージェントに再生します（発信者であるあなたには聞こえません）。

Dialogflowエージェントによって読み返されるように設定するだけです。

この時点で、このチュートリアルの前のセクションで設定したインテントを操作して、テーブルを予約します。

Dialogflowリファレンス接続アプリケーションコンソールおよびDialogflowサンプルVoice APIアプリケーションコンソールでトランスクリプションが表示されます。

センチメント分析の結果を見たい場合は、Google CloudコンソールからCloud Natural APIを有効にする必要があります。有効になっていないと、次のようなエラーが表示されます。 PERMISSION_DENIED: Cloud Natural Language API has not been used in project xxxx before or it is disabled.

では、最後のステップに進み、すべての構成要素が実際に組み合わさっているところを見てみよう！

手順に従ってください。

  1. Voice APIアプリケーションにリンクされた電話番号に電話をかけ、Dialogflowエージェントと対話します。

  2. 会話をテストする方法として、こんなものが考えられる：

    1. Vonageウェブソケット：通話を接続しています。

    2. Bot: デモンストレーション・レストランへようこそ。いつ、誰のためにテーブルを予約しますか？

    3. あなた2022年09月01日10:00にターニャのテーブルを予約したいのですが。

    4. ボットの応答：2022年09月01日10:00にターニャさんのテーブルを予約しました。ありがとうございます！

    通話終了

おめでとう

Vonage WebSocketsインテグレーションを使用してDialogflowエージェントに電話をかけるチュートリアルを完了しました。

リソース

を参照してください。 ダイアログフローリファレンスサンプルと サンプル音声アプリケーションはGithubにあります。.

をチェックしてください。 WebSocketsリファレンスガイド.

をチェックする ngrokを説明するブログ記事.

同じような例として Amazonレックスボット.

楽しんでいただけたなら幸いです。お気軽に ツイッターまたは コミュニティ・スラック・チャンネル.

シェア:

https://a.storyblok.com/f/270183/400x400/3f6b0c045f/amanda-cavallaro.png
Amanda Cavallaroデベロッパー・アドボケイト