Web Chat カスタマイジング (音声に対応させる)

前回は電話を使った音声ボットをご紹介しました。
今回は Web Chat インターフェースにマイク入力機能を組み込み、テキストだけでなく音声での対話を可能にしてみます。

え！ さすがに no code では難しそうですね。。。

マイク入力機能を標準機能として提供していないため、さすがに no code というのは難しいです。
ただし、Web Chat カスタマイジング の記事で紹介したように、Web Chat はカスタマイズが可能でユーザー・インターフェースとなっています。
この時の記事では、パラメータ・レベルでのカスタマイズ方法をご紹介しましたが、Web Chat は独自のAPIを多数提供していて、結構なカスタマイズが可能です。また、そのAPIを使用したチュートリアルが公開されています。『この API はこうやって使うのか』といった目から鱗な内容も含まれていますので、興味がある方はぜひ、参照してみてください。

いざ、カスタマイズ！

話を戻して、マイク入力機能です。no code とはいきませんが、low code で可能です。
チュートリアルでは紹介されていませんが、Github で提供されているサンプル・コードを使用して、Web Chat インターフェースをカスタマイズしていきます。

前提条件

サンプルコードは、node.js が前提になっていますので、自身の環境に合わせて事前に node.js の導入を済ませておいてください。
node.js のバージョンは、 2022/12/22 現在で最新安定版の 18.12.1 で確認しました。

カスタマイズ手順

サンプル・コードは、Watson Developer Cloud の一部として公開されている assistant-toolkit を使用します。

ソースコードをダウンロードします。zip 形式でダウンロードした場合は展開してください。

サンプルコード

サンプルコードは、Watson Developer Cloud の一部として公開されている webchat/examples/speetch-to-textいます。

場所は assistant-toolkit/integrations/webchat/examples/speech-and-text です。

cd assistant-toolkit/integrations/webchat/examples/speech-and-text

2 つのパートに分かれています。

• API Token を取得するサーバー・コード
• Web Chat を起動するクライアント・コード

です。

API Token を取得するサーバー・コード

サーバー・コードの場所に移動します。

cd server/nodejs-express
mkdir keys
cd keys
touch serviceCredentialsSTT.json
touch serviceCredentialsTTS.json

音声ボットにチャレンジ Part 1を試された方は、Speech-To-Text(STT) と Text-To-Speech(TTS) のインスタンスは作成されています。
まだの方は、Watson Assistantのインスタンスを立てるを参考にして、STT と TTS のインスタンスを作成してください。

STT インスタンスにアクセスし、サービス資格情報をクリックします。
資格情報をコピーするアイコンをクリックします。

クリップボードに資格情報がコピーされていますので、serviceCredentialsSTT.json にそのままペーストしてください。

TTS インスタンスにアクセスし、サービス資格情報をクリックします。
資格情報をコピーするアイコンをクリックします。

クリップボードに資格情報がコピーされていますので、serviceCredentialsTTS.json にそのままペーストしてください。
後は、こちらのコマンドを実行します。

cd ..
npm run start

このような表示になれば OK です。

> watson-assistant-web-chat-toolkit-example@1.0.0 start
> node ./server.js

Listening on 3001

Web Chat を起動する Client Code

クライアント・コードの場所に移動します。

cd client/javascript

index.html が 1 つだけあります。
このままでは日本語に対応していませんので、少々修正します。

63 行目を追加します。

index.html 内の Javascript パート

 58     function handleMessageReceive(event) {
 59       const synthText = generateTextFromMessage(event.data);
 60       const audio = WatsonSpeech.TextToSpeech.synthesize({
 61         text: synthText,
 62         accessToken: serviceTokens.ttsToken,
 63         voice:'ja-JP_EmiV3Voice',
 64         url: serviceTokens.ttsURL,
 65       });
 66       audio.onerror = function (error) {
 67         console.error('TextToSpeech error', error);
 68       }
 69     }

86 行目を ja-JP_Multimediaに修正します

index.html 内の Javascript パート

 82     function onStartRecord() {
 83       const stream = WatsonSpeech.SpeechToText.recognizeMicrophone({
 84         accessToken: serviceTokens.sttToken,
 85         url: serviceTokens.sttURL,
 86         model: 'ja-JP_Multimedia',
 87         objectMode: true,
 88       });

218 - 220 行目を Web Chat のスニペットで置き換えます。

index.html 内の Javascript パート

217     window.watsonAssistantChatOptions = {
218       integrationID: "***ここを修正する***",
219       region: "***ここを修正する***",
220       serviceInstanceID: "***ここを修正する***",
221       onLoad: onLoad,
222     };

Web Chat のスニペットの探し方のリンクです。
このようなイメージです。

修正したら、index.html を開きます。

(コマンドラインから起動したい方向け)h

Macの方

open index.html

Windowsの方

start index.html

Web Chat のテキスト入力フィールドの上に、マイク・ボタンが追加されています。
このマイク・ボタンを押すと、パソコンのマイクから音声を拾ってくれます。
(話し終わったら、またマイクボタンを押す必要があります)

いかがでしたでしょうか

シンプルなインターフェースではありますが、マイク・ボタンが追加され、音声を使った音声ボットの体験が可能になりました。

アップロードした画像が 100 MB を超えたようです

ここでちょっと問題が発生してしまいました。
画像のアップロードをするとエラーが発生します。
調べると Qiita にこんな記事がありました。
100MBを超えていたのか。。。ガーン。どうしよう。。。

Qiitaエンジニアの方に連絡したところ、画像削除の方法を追加開発してくれました。
Qiitaエンジニアの方に感謝です。
画像のアップロード・削除方法

参考情報