Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Node-REDを使ってシンプルな音声チャットボットを作る手順
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Kohei Nishikawa
July 23, 2021
Programming
1.3k
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Node-REDを使ってシンプルな音声チャットボットを作る手順
Kohei Nishikawa
July 23, 2021
More Decks by Kohei Nishikawa
See All by Kohei Nishikawa
メタバース空間作成講座 (2022年11月現在)
kolinz
0
350
Cloud Foundryの移行先はどこか? オープンソースPaaS探し
kolinz
0
1.6k
A3-1 IBM Championが本音で語る「IBM Cloud」
kolinz
0
670
IBM Cloudで、Node-REDとTeachable Machineで試す画像認識
kolinz
0
650
Watson Assistant Actions Skill によるノーコードチャットボット開発入門
kolinz
0
580
Watson Discoveryにおける文書削除はどうしているか
kolinz
0
790
地上用ドローン試作 ver1.0
kolinz
0
150
IBM Cloud Festa Online 2021 keynote session BMXUGパネルディスカッション
kolinz
0
420
2021 Call for Code Global Challengeへのお誘い (2021.04.30)
kolinz
0
1.2k
Other Decks in Programming
See All in Programming
Generative UI & AI-Assistants for Your Angular Solutions
manfredsteyer
PRO
1
190
AIエージェントで 変わるAndroid開発環境
takahirom
2
680
Laravelで学ぶ Webアプリケーションチューニング入門/web_application_tuning_101
hanhan1978
4
740
AI時代、エンジニアはどう育つのか -未経験エンジニアの成長を間近で見て考えたこと-
thasu0123
0
130
Generative UI & AI-Assistants for Your Angular Solutions
manfredsteyer
PRO
0
110
PHP Application における Kubernetes 内 gRPC 通信
ganchiku
0
480
Haskell/Servantを通してWebミドルウェアを捉え直す
pizzacat83
1
580
LaravelLive Japan の裏方のすべて — 第188回 PHP勉強会@東京 (2026-06-24)
suguruooki
2
150
AI 輔助遺留系統現代化的經驗分享
jame2408
1
1.2k
PHP に部分適用が来るぞ!……ところで何それ?おいしいの? #phpcon / phpcon-2026
shogogg
0
240
symfony/aiとlaravel/boost
77web
0
130
Foundation Models frameworkで画像分析
ryodeveloper
1
120
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
528
40k
Bash Introduction
62gerente
615
220k
Stewardship and Sustainability of Urban and Community Forests
pwiseman
0
350
So, you think you're a good person
axbom
PRO
2
2.1k
Raft: Consensus for Rubyists
vanstee
141
7.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
1
230
The Power of CSS Pseudo Elements
geoffreycrofte
82
6.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.4k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
1.2k
Google's AI Overviews - The New Search
badams
0
1.1k
Transcript
2021 音声認識編 音声認識を活用したチャットボットを作ってみよう
p. 1 目次 Node-RED にノードを追加 ................................................................................................................................................... 3 node-red-dashboard の追加 .......................................................................................................................................
3 作業 ................................................................................................................................................................................ 4 IBM Cloud で音声認識サービスの有効化 ............................................................................................................................. 5 音声 – テキスト変換サービス (speech to text) .............................................................................................................. 5 API 鍵と URL の取得 ................................................................................................................................................... 6 テキスト – 音声変換サービス (text to speech) .............................................................................................................. 6 API 鍵と URL の取得 ................................................................................................................................................... 7 チャットボット会話エンジン ....................................................................................................................................................... 8 Watson Assistant の有効化 .......................................................................................................................................... 8 API 鍵と URL の取得 ....................................................................................................................................................... 8 skill の作成 ..................................................................................................................................................................... 9 skill ファイルのダウンロード............................................................................................................................................. 10 アップロードの実行 ....................................................................................................................................................... 11 Dialog の確認 ............................................................................................................................................................... 12 Skill ID(Workspace ID)の取得 .................................................................................................................................. 13 Node-RED サンプルの実行 ................................................................................................................................................ 14 Node-RED サンプルフローのダウンロード ........................................................................................................................... 14 サンプルのフローの読み込み .............................................................................................................................................. 14 各ノードの設定 ............................................................................................................................................................... 16 speech to text ........................................................................................................................................................ 16 assistant .................................................................................................................................................................. 17 text to speech ........................................................................................................................................................ 18 play audio ............................................................................................................................................................... 18
p. 2 デプロイによる動作確認 ................................................................................................................................................... 19 デバッグの表示 ............................................................................................................................................................ 19 デプロイの実行 ............................................................................................................................................................
19 Dashboard の表示 ................................................................................................................................................... 19 動作確認 ................................................................................................................................................................... 20
p. 3 Node-RED にノードを追加 node-red-dashboard の追加 Node-RED の画面右上の「三」>>「パレットの管理」の順にクリックします。 「パレット」が表示されます。「ノードを追加」タブをクリックします。 「ノードを検索」で、dashboard
と入力し、Enter キーを押します。
p. 4 インストールしたいノードは、node-red-dashboard です。「ノードを追加」をクリックします。既に追加されている場合は、「追加 しました」と表示されています。 画面中央上部に上図のように表示されます。「追加」をクリックします。しばらくし、問題なく追加が終われば、「ノードを追加」が「追 加しました。」に表示が変わります。 作業 同じ手順で、次のノードを追加してください。
node-red-node-ui-microphone node-red-contrib-play-audio
p. 5 IBM Cloud で音声認識サービスの有効化 音声 – テキスト変換 サービス (speech
to text) IBM Cloud にログインします。画面右上の「カタログ」をクリックします。「カタログ」>>「サービ ス」の順にクリックします。 カテゴリーの「AI/Machine Learning」にチェックを入れます。 「Speech to Text」を探し出し、クリックします。 初期値で、料金プランとして「ライト」が選ばれているはずです。ロケーションは「ダラス」のまま、「作成」をクリックします。
p. 6 Speech to Text のサービスが有効になります。Watson Speech to Text (STT)
とも言います。 「Speech to Text - ◦◦◦」と表示されます。〇の部分は人によって異なります。画面内の「管理」をクリックします。 API 鍵と URL の取得 「資格情報を表示」をクリックします。その後、「API 鍵」と「URL」の2つをメモ帳などにコピー/貼り付けしておきましょう。Node- RED では、API 鍵は、API Key、URL は、Service Endpoint の名称で呼ばれています。 テキスト – 音声変換サービス (text to speech) 画面右上の「カタログ」をクリックします。「カタログ」>>「サービス」の順にクリックします。カテゴリーの「AI/Machine Learning」に チェックを入れます。 「Text to Speech」を探し出し、クリックします。
p. 7 初期値で、料金プランとして「ライト」が選ばれているはずです。ロケーションは「ダラス」のまま、「作成」をクリックします。 Text to Speech のサービスが有効になります。Watson Text to Speech
(TTS) とも言います。 「Text to Speech - ◦◦◦」と表示されます。〇の部分は人によって異なります。画面内の「管理」をクリックします。 API 鍵と URL の取得 「資格情報を表示」をクリックします。その後、「API 鍵」と「URL」の2つをメモ帳などにコピー/貼り付けしておきましょう。Node- RED では、API 鍵は、API Key、URL は、Service Endpoint の名称で呼ばれています。
p. 8 チャットボット会話エンジン Watson Assistant の有効化 画面右上の「カタログ」をクリックします。「カタログ」>>「サービス」の順にクリックします。カテゴリーの「AI/Machine Learning」に チェックを入れます。 「assistant」を探し出し、クリックします。第
3 回で、Watson Assistant を有効化しており、今現在も、IBM Cloud のリ ソースリストに Watson Assistant が表示されている場合は、「有効化」の作業は飛ばしてください。 初期値で、料金プランとして「ライト」が選ばれているはずです。ロケーションは「ダラス」のまま、「作成」をクリックします。 Watson Assistant のサービスが有効になります。 API 鍵と URL の取得 「Watson Assistant - ◦◦◦」と表示されます。〇の部分は人によっ て異なります。画面内の「管理」をクリックします。 IBM Cloud のリソースリストに Watson Assistant が表示されている 場合は、サービス名をクリックすることで、「管理」の画面に移動できます。
p. 9 「資格情報を表示」をクリックします。その後、「API 鍵」と「URL」の2つをメモ帳などにコピー/貼り付けしておきましょう。Node- RED では、API 鍵は、API Key、URL は、Service Endpoint
の名称で呼ばれています。 skill の作成 「Watson Assistant」の起動をクリックします。 画面左側の「Skills」のアイコンをクリックします。 「Create skill」をクリックします。
p. 10 「Dialog skill」を選び、「Next」をクリックします。Actions Skill は、第 3 回で扱った内容です。 「Upload skill」をクリックします。
skill ファイルのダウンロード 作業中の Web ブラウザで、新規ウィンドウまたは新規タブで、本講座のサンプルデータを公開している下記にアク セスします。https://app.box.com/s/c0aaktqgrb2ctevcr8u57aitx19pl50w アクセス後、「skill-System-Help-Desk.json」をクリックし、ダウンロードを実行します。
p. 11 「skill-System-Help-Desk.json」は、Watson Assistant で作成した、ヘルプデスクのスキルデータです。 アップロードの実行 「Create dialog skill」の画面に戻ります。 Drag
and drop file here or click to select a file の点線の枠に、「skill-System-Help-Desk.json」をドラッグ&ド ロップします。すると、上図のように表示されます。「Upload」をクリックします。
p. 12 Dialog の確認 画面左側で、「Dialog」をクリックします。Dialog は、チャットボットによる会話の流れを制御しています。「>」をクリックするこ とで、階層となっている会話のルールを確認することができます。 今回は、動作確認だけ行うため、画面右上の「Try it」をクリックします。 チャットボットにおける、入出力について確認することができます。
p. 13 たとえば、「インターネットにつながらない」と入力すると、システムからの返答が返ってきますので、「はい」か「いいえ」で回答する ことで、次の会話となります。「Clear」をクリックすることで、会話を再実行できます。閉じる場合は、「X」をクリックします。 Skill ID(Workspace ID)の取得 画面左側の「Skills」のアイコンをクリックします。表示される「skill」のうち、「System Help Desk」において、「⁝」をクリックし、表
示される「View API Details」をクリックします。
p. 14 表示される「skill ID」ををメモ帳などにコピー/貼り付けしておきましょう。Node-RED では、Workspace ID とも言います。 NODE-RED サンプルの実行 Node-RED
サンプルフローのダウンロード 作業中の Web ブラウザで、新規ウィンドウまたは新規タブで、本講座のサンプルデータを公開している下記にアク セスします。https://app.box.com/s/c0aaktqgrb2ctevcr8u57aitx19pl50w アクセス後、「flows_node-red-voice-chatbot.json」をクリックし、ダウンロードを実行します。 サンプルのフローの読み込み Node-RED の画面右上の「三」>>「読み込み」の順にクリックします。 「フローを読み込み」で、「読み込むファイルの選択」をクリックします。 ダウンロードしておいた flows_node-red-voice-chatbot.json」を選びます。
p. 15 読み込み先として「新規タブ」を選び、「読み込み」をクリックします。 下記が表示された場合は、「コピーを読み込み」をクリックします。 「読み込みました」と表示されれば完了です。余白をクリックすると、メッセージは消えます。 「voice chatbot」タブをクリックします。
p. 16 各ノードの設定 下図のようにサンプルが読み込まれて表示されています。 ここからは、各ノードの設定について説明します。 speech to text 「speech to
text」有効化の際に取得した、API 鍵と URL を入力します。API Key に「API 鍵」を入力、Service Endpoint に「URL」を入力します。「Language」が「Japanese」であること確認し、「完了」をクリックします。
p. 17 assistant 「assistant」有効化の際に取得した、API 鍵と URL を入力します。また、skill 作成により取得した「Skill ID(Workspace ID)を入力します。
API Key に「API 鍵」を入力、Service Endpoint に「URL」を入力します。Workspace ID に「Skill ID」を入力します。各 項目を入力吾、「完了」をクリックします。
p. 18 text to speech 「text to speech」有効化の際に取得した、API 鍵と URL
を入力します。API Key に「API 鍵」を入力、Service Endpoint に「URL」を入力します。「Language」が「Japanese」であること確認し、「完了」をクリックします。 play audio 日本語の音声は、Google のもの以外に、Microsoft の音声に変えることも可能です。
p. 19 デプロイによる動作確認 デバッグの表示 画面右上の虫型のアイコンをクリックし、デバッグを表示します。ここに音声認識結果と出力結果が表示されます。 デプロイの実行 画面右上の「デプロイ」をクリックします。 Dashboard の表示 音声入力は、Node-RED
上で動作する「Dashboard」で行います。「Dashboard」にアクセスするためには、画面右上の「▼」 から、「Dashboard」をクリックします。
p. 20 動作確認 Web ブラウザで、下図のように表示されているかと思います。マイクのアイコンが表示されている箇所をクリックします。タッチ対応ディ スプレイの場合は、タッチします。 マイクの許可を求めてきた場合は、「許可」をクリック、あるいはタッチします。 下図のように、矢印が回転しているアイコンが表示されている間に、「インターネットにつながらない」と話します。音声認識により、チ ャットボットの会話ルールが起動し、返答が音声で出力されます。また、Node-RED のデバッグにも、一連の処理が表示されます
ので、確認します。