Azure LUISとNuxt.jsでチャットボットを作る

どうも、shoheiです。

Nuxt.jsとAzure LUISを用いてカンタンなチャットボットの作り方をご紹介します。


仕事で使うことがあったので備忘録としてまとめます。

開発環境

  • macOS High Sierra 10.13.4
  • Google Chrome
  • nuxt-community/typescript-template
  • Nuxt.js
  • TypeScript
  • Azure LUIS

Azure LUISとは

Azure LUISとはMicrosoftが開発した自然言語処理を行うサービスです。
理解した自然言語に応じて結果を出力してくれます。

日本語対応済みであり、カンタンなチャットボットを作ることができます。
Azure LUIS

IntentとEntity

Azure LUISにはIntent(意図)とEntity(値)があります。

Intent(意図)

Intent(意図)とは、その言葉が意味する「やりたいこと・目的」を指します。
例えば「徳島県までの行き方を教えてほしい」や「徳島県がどこにあるか教えてほしい」といった質問があるとします。
それぞれの言葉の意図としては「徳島県の位置を知りたい」ということになります。

この場合、意図は「徳島県の位置を知りたい」となり、
意図を表す言葉は「徳島県までの行き方を教えてほしい」、「徳島県がどこにあるか教えてほしい」となります。

Azure LUISでは予め意図とその意図を表す言葉を設定し、学習させることで自然言語を理解することができます。

Entity(値)

Entity(値)とは、その名の通り言葉の中にある単語を示します。
例えば「徳島県までの行き方を教えてほしい」であれば「徳島県」「行き方」「教えてほしい」がEntityとして扱えることができます。

チャットボットを作る

さっそくチャットボットを作っていきます。
完成図はこんな感じです。徳島県について答えてくれるチャットボットです。

Azure LUIS

遊んでみる

「小便小僧」と質問すると、
「小便小僧の案内サイト」を別タブで表示とその旨の回答をするシンプルなチャットボットです。

Azure LUISを使う

Azure LUISの使い方を紹介します。

まずはAzure LUISのアカウントを作成します(事前にMicrosoftのアカウントが必要です)。
Azure LUISのアカウント作成

Azure LUIS

Azure LUIS

「Create new app」又は「Import new app」でLUISアプリケーションを新規作成できます。

「Create new app」で作成できますが、決まったフォーマットのJSONファイルをインポートして作成することもできます。

開発効率を考えると、JSONファイルをインポートして作成したほうが良いのでここでは「Import new app」での作り方を解説します。

教師データを作成しインポートする

※本解説は以下の記事を参考にさせていただいております。
※また本解説で利用するpythonコードは以下の記事にあるpythonコードをベースにして変更を加えたものです。
Qiita – AzureのLUISの学習用テキストを、Pythonスクリプトで楽に入力する

Azure LUIS用の教師データを作り、インポートしてLUISアプリケーションを作成します。
予め以下のファイルを全てダウンロードしてください。
luis_learning_data

手順としては以下のとおりです。

  1. 教師データを記入したCSVファイルを作成
  2. CSVファイルをJSONファイルへ変換
  3. JSONファイルをAzure LUISへインポート

まずはCSVファイル(input.csv)を以下のように作成します。

Azure LUIS

Textに対してIntentとEntityを記入していきます。

注意として、Textにない文言をEntityに設定するとLUISへインポートする際にエラーとなるため、間違えないようにしてください。

また、中途半端な文言をEntityに設定してもLUIS側で単語区切りができないと言われエラーとなります。

例えば「教えてほしい」というTextに対して、Entityを 「教え」 「て」 「ほしい」 と言ったように区切ることはできません。この場合は必ず「教えて」「ほしい」と言ったように単語区切りにしてください(これでも実は区切れるか怪しい)。

CSVが作れたらJSONファイルへ変換します。
以下のコマンドを実行してください(実行にはpython3のインストールが必要です)。

実行すると、output.jsonが作成されます。

次に作成されたoutput.jsonをAzure LUISへインポートします(ここの自動化はあるかどうかわからない)。
以下の画面で必要事項を記入し、インポートします。

Azure LUIS

Azure LUIS

無事、インポートされました。
Intentを開くと以下のようにIntentに対してTextとEntityが登録されています。

Azure LUIS

学習する

インポートした教師データを元に学習します。

画面右上の「Train」を選択と学習します。

Azure LUIS

学習が終わると画面右上の「Test」を選択できるようになります。

試しにちゃんと学習できているか確認します。

「Test」を選択し、「徳島」と入力してみます。

Tokushima (0.93) と結果がでています。
これは入力した「徳島」という言葉の意図を Tokushima と判断し、その認識率は0.93(93%)の結果を得たという意味です。

他にも適当に言葉を入力してみます。

Azure LUIS

学習させた言葉はほぼ狙い通りに判断できていますね。

REST APIを取得

ここまで学習させたLUISを他のアプリケーションから利用させるためにREST APIを発行します。

画面上の「PUBLISH」を選択します。

Azure LUIS

「Publish」を選択すると以下のようにREST APIが発行されます。
右側のurlがREST APIです。

Azure LUIS

使い方としては、urlの末尾に認識させたい言葉を設定してurlをコールするだけです。

https://westus.api.cognitive.microsoft.com/luis/v2.0/apps/29408485-2606-4254-a510-87a1dabdcb90?subscription-key=fb014b9ac6ec46beaba59f22058991e5&verbose=true&timezoneOffset=0&q=”徳島県”

コールすると結果がJSONファイルで返ってきます。

Azure LUIS

Azure LUISの設定は以上です。

Nuxt.jsでチャットボットを作る

Nuxt.jsを用いてチャットUIを作成し、Azure LUISを使ってカンタンなチャットボットを作っていきます。

Nuxt.js + TypeScriptの環境構築

nuxt-community/typescript-templateを使い環境構築していきます。

nuxt-community/typescript-templateはNuxt.js(Vue.jsをより使いやすくしたフレームワーク)をTypeScriptで開発するためのひな形であり、必要な環境が揃っています。

yarnを使ってvue-cliをインストールします(yarnがインストールされていない場合は先にyarnをインストールしてください)。

yarn devで以下のような画面が立ち上げればインストール成功です。

Azure LUIS

うむ、ええ感じや。

ライブラリのインストールと設定

必要なライブラリをインストールし、設定していきます。必要なライブラリは以下のとおりです。

  • vue-beautiful-chat
  • @nuxtjs/dotenv

vue-beautiful-chatはチャットUIをカンタンに作成できるライブラリです。

@nuxtjs/dotenvは.envファイルに設定した環境変数の設定をしてくれるライブラリです。こちら無くてもいいんですが念の為入れておきます。

インストールしたライブラリを有効にするためコードを変更していきます。
該当箇所に「追加」のコメントアウトを入れています。

nuxt.config.js

plugins/chat.ts

pluginsフォルダを作成し、vue-beautiful-chatを使えるように設定したchat.tsを作成します。

.env

環境変数を設定できる.envを作成します。
.envで設定した変数を process.env.XXXXX として利用できます。

ここではAzure LUISのREST APIを設定します。

チャットUIとボット処理を実装

チャットUIとボット処理の部分を実装していきます。
pages配下にあるindex.vueを以下のように変更します。

pages/index.vue

チャットで送信したメッセージをAzure LUISへ認識させて、その結果を元に処理をしています。

メッセージをAzure LUISへ認識させている箇所は以下のコードです。

axiosの非同期APIを用いてAzure LUISのREST APIをコールします。
awaitで応答待ちし、その結果をresultに格納しています。

結果を元にボット処理をする箇所は以下のコードです(かなりしょぼいですがw)。

Azure LUISから送られてくる結果には「topScoringIntent」というものがあります。

これは一番認識率が良かったIntentとその認識率のデータです。

ここでは「topScoringIntent」で判断し、フィルタとして認識率20%以上のものを採用して(低w)処理を行っています。

実運用で使うことを考えると、ボット処理の部分が肝になります。
topScoringIntentの認識率のチューニングもそうですが、各IntentやそれぞれのEntityの認識率など組み合わせて更に細かな処理を行うことができます。

しかしこのまま書いていくとif文のオンパレードになるのですごい微妙ですね。

このif文の処理も教師データとして扱い、機械学習できれば自動化されたオリジナルのボット処理が作れそうです。

その場合は自然言語処理のLUISを使うよりは、他の機械学習を利用したほうが良さそうです。

GitHub Pagesの利用

せっかくなんでGitHubへアップロードして、GitHub Pagesで公開しましょう。

既にrepository作成、GitHub Pagesの設定済みであること前提で解説します。

Nuxt.jsの設定

Nuxt.jsをGitHub Pagesで公開するためにはnuxt.config.jsの設定が必要です。

コード変更

GitHub Pagesはホスティングサービスのurlが repository名 であることと、参照するフォルダが docs のため、その仕様に伴う設定をしていきます。

nuxt.config.js

GH_PAGESの環境変数によってGitHub Pages用にビルドするよう設定しています。

package.json

ビルドコマンドを追加します。

build-gh(無くても良いが一応)とgenerate-ghを追加します。

.gitignore

こちらビルドには直接関係ありませんが、.envファイルをGitHubへデプロイしないように設定します。

ビルドする

以下のコマンドでビルドします。
ビルドが成功すると docsフォルダ が生成されます。

デプロイ

GitHub Desktop 又は gitコマンド を使ってプッシュするだけです。
URLにアクセスするとLuis demoのページが開きます。
https://hukusuke1007.github.io/luis_demo/

以上です。

最後に

いかがでしたでしょうか。

Azure LUISを利用することでカンタンにチャットボットを作ることができました。

Azure LUISを使うと次はGoogleやAWSが提供するサービスを使いたくなりますね。

日本語対応ができているのか?といったところが気になりますが、機会があれば他のサービスも利用してみたいと思います。

GitHub

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*

Translate »