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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/2139939e-f17f-2159-484e-cae8a29be4ca.png)

[前回](https://qiita.com/yanagih/items/0aa39ff5b2e4047fe736)は電話を使った音声ボットをご紹介しました。
今回は Web Chat インターフェースにマイク入力機能を組み込み、テキストだけでなく音声での対話を可能にしてみます。

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

**マイク入力機能**を標準機能として提供していないため、さすがに no code というのは難しいです。
ただし、[Web Chat カスタマイジング](https://qiita.com/yanagih/items/286d077a81d71a254f77) の記事で紹介したように、**Web Chat** はカスタマイズが可能でユーザー・インターフェースとなっています。
[この時の記事](https://qiita.com/yanagih/items/286d077a81d71a254f77)では、パラメータ・レベルでのカスタマイズ方法をご紹介しましたが、Web Chat は[独自のAPI](https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html?to=api-overview)を多数提供していて、結構なカスタマイズが可能です。また、そのAPIを使用した[チュートリアル](https://cloud.ibm.com/docs/watson-assistant?topic=watson-assistant-web-chat-develop-tutorials)が公開されています。『この API はこうやって使うのか』といった**目から鱗**な内容も含まれていますので、興味がある方はぜひ、参照してみてください。

# いざ、カスタマイズ！

話を戻して、**マイク入力機能**です。no code とはいきませんが、low code で可能です。
[チュートリアル](https://cloud.ibm.com/docs/watson-assistant?topic=watson-assistant-web-chat-develop-tutorials)では紹介されていませんが、Github で提供されているサンプル・コードを使用して、Web Chat インターフェースをカスタマイズしていきます。

# 前提条件

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

# カスタマイズ手順

サンプル・コードは、Watson Developer Cloud の一部として公開されている [assistant-toolkit](https://github.com/watson-developer-cloud/assistant-toolkit) を使用します。

ソースコードをダウンロードします。zip 形式でダウンロードした場合は展開してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/fa0e8ba5-50e9-7b17-80fc-9015a24d56f2.png)

# サンプルコード

サンプルコードは、Watson Developer Cloud の一部として公開されている [webchat/examples/speetch-to-text](https://github.com/watson-developer-cloud/assistant-toolkit/tree/master/integrations/webchat/examples/speech-and-text)います。

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

2 つのパートに分かれています。
* API Token を取得するサーバー・コード
* Web Chat を起動するクライアント・コード

です。


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

サーバー・コードの場所に移動します。
```shell:
cd server/nodejs-express
mkdir keys
cd keys
touch serviceCredentialsSTT.json
touch serviceCredentialsTTS.json
```
[音声ボットにチャレンジ Part 1](https://qiita.com/yanagih/items/0aa39ff5b2e4047fe736)を試された方は、Speech-To-Text(STT) と Text-To-Speech(TTS) のインスタンスは作成されています。
まだの方は、[Watson Assistantのインスタンスを立てる](https://qiita.com/yanagih/items/b02db00d06de397bec64)を参考にして、STT と TTS のインスタンスを作成してください。

STT インスタンスにアクセスし、**サービス資格情報**をクリックします。
資格情報をコピーするアイコンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/db9817b7-e3b1-def6-07d5-8d3817dc0026.png)
クリップボードに資格情報がコピーされていますので、**serviceCredentialsSTT.json** にそのままペーストしてください。

TTS インスタンスにアクセスし、**サービス資格情報**をクリックします。
資格情報をコピーするアイコンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/c8ace5c5-f5d6-1f35-0578-783a20f50890.png)
クリップボードに資格情報がコピーされていますので、**serviceCredentialsTTS.json** にそのままペーストしてください。
後は、こちらのコマンドを実行します。
```shell:
cd ..
npm run start
```
このような表示になれば OK です。
```shell:
> watson-assistant-web-chat-toolkit-example@1.0.0 start
> node ./server.js

Listening on 3001
```

### Web Chat を起動する Client Code
クライアント・コードの場所に移動します。
```shell:
cd client/javascript
```
**index.html** が 1 つだけあります。
このままでは日本語に対応していませんので、少々修正します。

63 行目を追加します。
```Javascript: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```に修正します
```Javascript: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 のスニペットで置き換えます。
```Javascript:index.html 内の Javascript パート
217     window.watsonAssistantChatOptions = {
218       integrationID: "***ここを修正する***",
219       region: "***ここを修正する***",
220       serviceInstanceID: "***ここを修正する***",
221       onLoad: onLoad,
222     };
```

:::note info
[Web Chat のスニペットの探し方のリンク](https://qiita.com/yanagih/items/4ab4bbf5077f90ef73bf#web-chat-%E7%94%A8%E3%82%B9%E3%83%8B%E3%83%9A%E3%83%83%E3%83%88%E3%81%AE%E5%8F%96%E5%BE%97)です。
このようなイメージです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/63c99d1d-2e0c-c95d-0452-50fd8329efdb.png)
:::

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

(コマンドラインから起動したい方向け)h
```shell: Macの方
open index.html
```
```shell: Windowsの方
start index.html
```

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

<img src="https://i.ibb.co/YRcpfHW/2022-12-22-10-48-42.png" alt="2022-12-22-10-48-42" border="0">
             
# いかがでしたでしょうか

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

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

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

:::note info
Qiitaエンジニアの方に連絡したところ、画像削除の方法を追加開発してくれました。
Qiitaエンジニアの方に感謝です。
[画像のアップロード・削除方法](https://help.qiita.com/ja/articles/qiita-image-upload)
:::

https://qiita.com/kunrenyouAcount/items/9a8e535beea1f55bee73

# 参考情報

https://github.com/watson-developer-cloud/assistant-toolkit

https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html?to=api-overview

https://cloud.ibm.com/docs/watson-assistant?topic=watson-assistant-web-chat-develop-tutorials

https://help.qiita.com/ja/articles/qiita-image-upload