【大阪】Bluemix勉強会 - Watson ハンズオン -

Preview:

Citation preview

© 2016 IBM Corporation

Watsonを使ってAIアプリを作ってみよう!

2017年7月20日(木)

日本アイ・ビー・エム株式会社岸田 吉弘

Bluemix ハンズオン

BMXUG 大阪支部

2© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbot

1. WatsonのAPI、Conversationの使い方がわかる

2. Watsonと外部APIを組み合わせてWebアプリがつくれる

今日のゴール

3© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbot

1. WatsonのAPI、Conversationの使い方がわかる

– (ハンズオン1)シンプルなチャットボットをつくる

2. Watsonと外部APIを組み合わせてWebアプリがつくれる

– (ハンズオン2)「楽天ウェブサービス」へ登録する

– (ハンズオン3)ホテル検索ができるチャットボットをつくる

今日のゴール

4© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbot

Watsonと外部APIを組み合わせてWebアプリがつくれる

今日つくるもの

7月12日に東京駅周辺で1泊したい!

予算は1万円!

「ホテルXX」ってところが空いてるよ!

Watson君

(イメージ図)

5© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbot

1. WatsonのAPI、Conversationの使い方がわかる

– (ハンズオン1)シンプルなチャットボットをつくる

2. Watsonと外部APIを組み合わせてWebアプリがつくれる

– (ハンズオン2)「楽天ウェブサービス」へ登録する

– (ハンズオン3)ホテル検索ができるチャットボットをつくる

今日のゴール

6© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotまずはWatsonについて

7© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbot

http://www.ibm.com/smarterplanet/jp/ja/ibmwatson/

Watsonは、コンピューターでありながら、人と同じように情報から学び、

経験から学習するコグニティブ・テクノロジーです。

Watson = AI = Augmented Intelligence (拡張知能)

LearningUnderstanding Reasoning

学習により専門知識を身につける。

ヒトのコミュニケーション(言語・音声・画像)を理解する。

事実から紐付けて答えを見つけ出す。(推論する)

Watsonとは?

8© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotWatson API一覧

Personality Insightsテキストから筆者の性格を推定する

Language Translator(一部日本語未対応)

自然言語テキストについて他言語へ翻訳を行う

Conversationアプリケーションに自然言語インターフェースを追加してエンドユーザとのやり取りを自動化

Natural Language Understanding(日本語未対応)

自然言語処理を通じてキーワード抽出、エンティティー抽出、心情分析、感情分析、概念タグ付け、関係抽出、分類法種別、作成者抽出などを行う

Text to Speechテキスト文章を音声に変換する

Speech to Text音声をテキスト文章に変換する

Visual Recognition画像コンテンツに含まれる意味を検出する

Natural Language Classifierテキスト文章の分類を行う(質問の意図推定など)

Tone Analyzer(日本語未対応)

テキストの感情、社交性、文体を解析する

Retrieve and Rank自然言語の質問に対して回答の候補を返す

分析系

音声系

画像系

言語系

Document Conversion文書を新しい形式に変換する

Discovery(日本語未対応)

認知検索およびコンテンツ分析エンジンをアプリケーションに追加して、優れた意思決定を行うのに役立つパターン、傾向、およびアクション可能な洞察を識別する

(2017年6月現在)

9© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotConversationとは

チャットアプリ

XXさん、おはようございます

10時-12時 お客様MTG @箱崎

…19時 新人歓迎会 @

銀座

今日の予定を教えて

Conversation を呼び出す

回答メッセージを受け取る

今日の予定を教えて

10時-12時 お客様MTG...

対話フローに沿って、意図と目的語に対する応答メッセージを返す

意図:「知りたい」目的語:「今日」「予定」

Conversationはチャットボットを実装するためのAPIです

ユーザの発言の意図を理解し、その意図に応じて応答メッセージを返します

会話に必要な情報をやりとりをしながら抜き出し、適切な応答を選択します

10© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotConversationで重要な3つの要素

Intents(インテント / 意図)

✓対話相手の要求・意図を認識する- 「ライトをつけて」 → スイッチ入

- 「音楽をかけて」 → スイッチ入

- 「音量をもっと大きく」 → 大きくする

Entities(エンティティ / 目的語)

✓要求の対象を明確にする- 「ライトをつけて」 → ライト

- 「音楽をかけて」 → 音楽

- 「音量をもっと大きく」 → 音量

Dialogs(ダイアログ / 対話フロー)

✓対話の流れを設計する- 「音楽をかけて」→ 「音楽のジャンル取得」→ 指定ジャンルの音楽を開始

11© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotインテントの登録

異なる表現や言葉のゆらぎを吸収し、意図を正しく理解するため 同じ行為を要求したとしても、様々な言い方があるため 例:食べたい、おなかがすいた、腹減った

同じ意図の文章を複数登録すると、類似の表現を「食事」に関係があると理解するようになる

12© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotエンティティの登録

インテントの「目的」となる対象物を特定するため 例:”何を”食べるのか。そば?パスタ?ラーメン?

同じ意味の単語でも、様々な言い方があるため、シノニム(類義語)も登録する 例:晩ご飯、夜ご飯、夕飯、夕食、ディナー

”何を”食べるか、を明確にするための「food」のエンティティ

13© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotビルトインされているエンティティ

Conversationには、デフォルトで提供しているエンティティも存在する

種別 認識できるもの 例

sys-time 時間 13時20分、13:20

sys-date 曜日と日付 今日、金曜日、7月12日

sys-currency 通過 20 cents、$20

sys-percentage 割合 15%、10パーセント

sys-number 数値 123、3.1415、百七十

System entities 一覧

14© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbot

近くにおすすめの蕎麦屋がありますよ

ダイアログとは

ユーザーの要求(インテントとエンティティ)と、それに応じた回答を組み合わせていく 各ノードはコンディション(条件)とレスポンス(対応)で構成される

ご用件はなんですか

何が食べたいですか

またどうぞ!

お腹が空いた そばがいいな

やっぱ今はいいや

#食事(インテント) @そば(エンティティ)

15© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotハンズオン1

シンプルなチャットボットをつくる

チャットボット

こんにちは!お元気ですか?

こんにちは

うん、いい感じ!

素晴らしい!その調子で頑張ってください!

(イメージ図)

やること・Node-REDの環境構築・Conversation サービスの作成・Conversationでのワークスペース作成

16© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotBluemixへログイン

ブラウザで「bluemix.net」と入力し、Bluemixへログインします地域を「米国南部」に変更してください

17© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbot

右上の「カタログ」をクリックし、「ボイラープレート」カテゴリにある「Node-RED Starter」をクリックします

Node-RED環境の準備

18© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbot

アプリ名のところに

「noderedapp-名前」と入力

Node-RED環境の準備

アプリの名前を入力し、右下の「作成」ボタンをクリックします

19© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotNode-RED環境の準備

アプリが「実行中」になるまで待ちます「実行中」になったら、右側の「アプ...」をクリックします

20© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbot

Node-REDとは、デバイス、API、オンラインサービスなどの機能を繋げてアプリケーションを作成していくプラットフォームです

ノード

(カプセル化された機能)

Node-REDとは?

21© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbot

Node-REDを最初に使う時には、認証情報の登録が必要です Node-REDの編集者を制限し、他人からの改変を防ぐことができます

右下の「Next」ボタンをクリックし、ユーザー名とパスワードを入力します

Node-REDのセットアップ

任意のユーザー名とパスワードを入力

(その下のチェックはつけない)

22© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotNode-REDのセットアップ

その後は何もせず、右下の「Next」、「Finish」をクリックします

23© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotNode-REDのセットアップ

少し待つと、認証情報が登録され、以下の画面が表示されます 右下の「Go to your Node-RED flow editor」をクリックし、先ほど登録し

た認証情報を入力。入力を終えたら「ログイン」をクリックします

24© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbot

このような画面が表示されます

Node-REDのセットアップ

Node-REDの環境構築完了です! ノードのドラッグ&ドロップでアプリケーションを開発していきます

25© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotBluemixの画面へ戻り、Watson APIを追加

Node-REDのアプリからWatsonを使うためには、Watson APIのサービスを新たに作成し、Node-REDのアプリと接続する必要があります

Bluemixの画面に戻り、左側のメニューの「接続」をクリックしてから右上にある「新規に接続」をクリックします

26© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotWatson APIの追加

「Watson」カテゴリーにある「Conversation」をクリックします

27© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotWatson APIの追加

「接続」で先ほど作成したアプリを指定し、右下の「作成」をクリックします

28© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotWatson APIの追加

アプリの再ステージを行い、「実行中」になるまで再度待ちます 「実行中」になったら、先ほど追加した「Conversation-XX」をクリックします

29© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotConversationのワークスペースを開く

サービスの詳細画面が開きます 「Launch tool」をクリックし、Conversationツールを起動します

30© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotConversationのワークスペースを開く

以下の画面が出てきた場合は、「Log in with IBM ID」をクリックしてください

31© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotワークスペースの作成

新規にチャットボットを作成してみましょう 「Create」ボタンをクリックし、ワークスペースを作成します

ワークスペースは一連の会話のパッケージです

ワークスペースの名前を入力

(例:サンプル・チャットボット)

名前を入力したら「Create」をクリック

32© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbot作成するシナリオ

チャットボット

こんにちは!お元気ですか?

こんにちは

うん、いい感じ!

素晴らしい!その調子で頑張ってください!

(イメージ図)

33© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotインテントの作成

「Create new」ボタンをクリックして、インテントを作成します 「Import」で既存のインテントをインポートすることも可能です

34© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbot

「Intent name」に「#あいさつ」と入力し、インテントを作成してみましょう あいさつの文書をいくつか入力してください

ここに文章を入力して例文を登録していく

典型的な文をいくつか入力すると類似の言葉を「あいさつ」の話であると理解するようになる

入力が終わったら「Done」をクリック

35© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotインテントの作成

画面右上のボタンをクリックすると、テストツールが開けます インテントが正しく設定できたか、確認できます

あいさつに関する文章であることを理解して

いる

36© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotTips

インテントやエンティティを作成すると、自動的にWatsonのトレーニングが開始されます

トレーニングが完了しないと変更が反映されません トレーニングが完了してから、テストツールでの動作確認を行ってください

37© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotエンティティの作成

エンティティタブをクリックし、中央にある「Create new」ボタンをクリックして、エンティティを作成します 「Import」で既存のエンティティをインポートすることも可能です

38© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotエンティティの作成

「はい」と「いいえ」の返答を認識できるようにするために、「yes」と「no」のエンティティを作成します

エンティティ名

言葉の揺らぎや癖に対応できるように同じ意味を指す単語(シノニム)を登録

39© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotダイアログの作成

ダイアログタブをクリックし、中央にある「Create」ボタンをクリックして、ダイアログを作成します

40© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotダイアログの作成

ダイアログには、はじめから「ようこそ」と「その他」ノードが入っています

どのインテント、エンティティにも属さない文章だった時に出す

メッセージ(エラー処理)

会話が始まった時に出すメッセージ

41© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotダイアログの作成

「Add node」をクリックし、ノードを追加します 各ノードはcondition(条件)とresponse(対応)で構成されます

<? input.text ?>は、ユーザーの入力メッセージをオウム返しする

変数

条件:“ユーザの入力が「あいさつ」に関する文章だった場合”

複数の回答を順番に返したり、ランダムに返したりできる

ノード名

42© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotダイアログの作成

返答が「はい」だった場合の応答メッセージを設定します あいさつノードが選択されている状態で、「Add child node」をクリックし、

子ノードを追加してください

入力が終わったら「×」をクリック

43© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotダイアログの作成

返答が「いいえ」だった場合の応答メッセージを設定します あいさつノードが選択されている状態で、「Add child node」をクリックし、

子ノードを追加します

入力が終わったら「×」をクリック

44© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotダイアログの作成

以下のようなフローの構成になっていればOKです ノードの位置が異なっている場合は、メニューから「Move」をクリックし、適

切な場所に移動してください

45© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotダイアログの作成

テストツールを起動して、作成したフローの動作確認をしてみましょう

46© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbot

1. WatsonのAPI、Conversationの使い方がわかる

– (ハンズオン1)シンプルなチャットボットをつくる

2. Watsonと外部APIを組み合わせてWebアプリがつくれる

– (ハンズオン2)「楽天ウェブサービス」へ登録する

– (ハンズオン3)ホテル検索ができるチャットボットをつくる

今日のゴール

47© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbot楽天トラベル

宿泊予約・航空券予約ができるオンライン総合旅行サイト

https://travel.rakuten.co.jp/

48© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbot楽天トラベルAPI

今回はこの「楽天トラベル空室検索API」を使います!https://webservice.rakuten.co.jp/document/#travelApi

49© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotハンズオン2

「楽天ウェブサービス」へ登録する

やること・楽天ウェブサービスへ登録する・「楽天トラベル空室検索API」の仕様を確認する

50© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotAPIの準備

楽天ウェブサービス(https://webservice.rakuten.co.jp/) にアクセスし、「+アプリID発行」をクリックします

楽天会員でログインしてください

51© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotAPIの準備

アプリ新規作成フォームに必要事項を入力します

アプリ名:任意の名前(例:Watson-botアプリ)

アプリURL:作成したアプリのURL

(例:https://noderedapp-名前.mybluemix.net)

52© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotAPIの準備

アプリIDが発行されるので、コピーしておいてくださいのちほど、APIコールの時に必要になります

53© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotAPIの使い方

ベースURLに、パラメータを付加してHTTP(S)リクエストを送信する

➢ 楽天トラベル空室検索APIの場合

• ベースURL: https://app.rakuten.co.jp/services/api/Travel/VacantHotelSearch/20170426

• パラメータ(必須):アプリID、地区情報• パラメータ(任意):チェックイン日、チェックアウト日、上限金額…

54© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbot

1. WatsonのAPI、Conversationの使い方がわかる

– (ハンズオン1)シンプルなチャットボットをつくる

2. Watsonと外部APIを組み合わせてWebアプリがつくれる

– (ハンズオン2)「楽天ウェブサービス」へ登録する

– (ハンズオン3)ホテル検索ができるチャットボットをつくる

今日のゴール

55© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotハンズオン3

ホテル検索ができるチャットボットをつくる

やること・Conversationのワークスペース作成・Node-REDでのアプリ構築

56© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbot

Webアプリ

Node.js

Conversation

入力

応答

楽天トラベル空室検索API

Conversationで「宿泊日」、「宿泊日数」、「地域」、「予算」を聞き、それをパラメータとして楽天トラベルAPIを呼び出すアプリです

API呼び出し

アプリの構成

検索結果

1.Conversationで、ユーザに条件を確認する(宿泊日、宿泊日数、地域、予算)

2.確認した条件をアプリ内で保持する 3.条件を元に

楽天トラベルAPIを呼び出す

57© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotワークスペースのインポート

Conversationのワークスペース画面に移動して、ホテル検索用のワークスペースをインポートします。ファイルは「conversation_complete.json」を指定してください

58© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotワークスペースIDの確認

作成したワークスペースをAPIから利用するために「Workspace ID」を確認します

Conversationツールのワークスペース一覧へ戻り、Workspace IDをコピーしておきます

Workspace IDをコピーして控えておく

どちらかをクリックし、ワークスペース一覧画面に戻る

どちらかをクリックし、ワークスペース一覧画面に戻る

59© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbot

2. 「bot-flow.txt」ファイルを全コピーし、貼り付け

1.右メニューから[読み込み]→[クリップボード]を選択

3.読み込みボタンをクリック

Node-REDフローのインポート

Node-REDの編集画面に戻りますWebアプリ用のNode-REDフローをインポートします

ダウンロードした「bot-flow.txt」をコピーし、貼り付けてください

60© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbot

1.ダブルクリックして開き、workspace_idを設定する

3.ノードの左横のボタンをクリック

4.デバッグタブに回答が返ってくるのを確認する

Node-REDでConversationを動かす

ConversationがNode-REDでどのように動くか確認してみましょう

2. デプロイボタンを押す。

61© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbot

前ページと同様にworkspace_idを設定する

楽天アプリIDを設定する

※次ページ参照

その下にあるフローの、Conversationノードのworkspace_id と楽天API アプリIDを設定します

資格情報の設定

62© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbot楽天アプリID設定

2. 「XXX…」の部分をメモしておいたapplicationIdで上書きする。

3. デプロイボタンを押す。

楽天トラベルAPIを利用するためには「楽天アプリID」の設定が必要ですメモしておいたIDを、URLの末尾に上書きして設定します

(XXXXXXの部分を上書きしてください)

1. ノードをダブルクリック

63© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbot

これでアプリは完成です。お疲れさまでした!Node-REDのURLを元に、httpノードで設定したパスを指定してアプリに

アクセスします http://noderedapp-名前.mybluemix.net/bot

完成!

64© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotおまけ

65© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotまだ余力のある方へ

ダウンロードした「conversation.json」をインポートすると、一部虫食い状態のワークスペースがインポートされます

次ページ以降に従って、ホテル検索のワークスペースを完成させてみてください

ここで「conversation.json」を指定

66© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotインテントの作成

「ホテル検索」というインテントを作成します ”ホテルを探したい”という意味の文章をいろいろと登録してください作成したら、正しく登録できたかテストツールで動作確認してみましょう

ホテル検索に関する文章だと認識されている

67© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotダイアログにインテントを設定する

#ホテル検索 と入力

ダイアログ編集画面に移動しますホテル検索に関するする文章が入力されると会話が続くようにするために、

ダイアログの「ホテル検索」ノードの条件に「#ホテル検索」と入力します

ホテル検索に関する文章だと、

会話が続いていく

68© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotシステムエンティティ

エンティティ編集画面に移動します会話中に日付を認識する「@sys-date」と、数字を認識する

「@sys-number」が有効になっているので、「今日」や「7月12日」のような表現でもWatsonが認識してくれます

「今日」が2017−07-12だと認識している

@sys-dateがオフだと「今日」が日付だと

認識されない

69© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotダイアログの追加

「地域確認」ノードの子ノードとして、「値段確認」ノードを追加します

ノード名:値段確認

条件:@sys-number

レスポンス:予算は1泊あたり<? @sys-number ?>円ですね。ではこれより、宿泊可能なホテルを検索します。

70© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbot

これでConversationの設定は完了です作成したワークスペースのWorkspace IDをNode-REDのconversationノードで

指定すると、Webアプリから利用できるようになります

71© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbotさらに余力がある方へ

Conversationでは、利用者に聞きたい項目をまとめて聞くこともできます 詳細な情報は公式ドキュメントを参照ください この設定でWebアプリを実装する場合はNode-RED側のフローを変更する必要があります

チェックを有効にする

https://console.bluemix.net/docs/services/conversation/dialog-build.html#slots

72© 2017 IBM Corporation

資料:

ibm.biz/bmxug-chatbot

Recommended