この記事について
この記事は、IBM Cloud Advent Calendar 2024の24日目の記事です。
IBM Cloud Code Engineを使い、お店や博物館、美術館、学校に設置されている対話できるデジタルサイネージのプロトタイプを作りましたので、その仕組みについて説明しています。
作ったものについて
スマートフォンで質問を送ると、商品棚などにデジタルサイネージとして設置しているタブレット端末に表示されているAIキャラクターが音声でいろいろと教えてくれる仕組みになります。
Raspberry Pi4や5にタッチ操作が可能なディスプレイを接続し、台に設置する方法もおすすめです。Raspberry Piを活用する場合はセンサー関係やカメラ等との連携もできました。
画像生成AIを使ってデジタルサイネージとして設置しているタブレット端末をイメージするとこんな感じです。
必要なもの
IBM Cloud Code Engine を使い、2つのアプリケーションを用意します。作業としては３段階になります。
- IBM Cloud Code Engineで、AITuberKitを動かす
- AITuberKitで、外部からの指示を受け付けるをONにする
- IBM Cloud Code Engineで、Node-REDを動かす
- Node-REDにWebフォームを実装する
IBM Cloud Code Engineで、AITuberKitを動かす
こちらは、以前書いた「AITuberKitを、IBM Cloud Code Engineで動かすまで」を参考に、AITuberKitをデプロイしてください。
AITuberKitで、外部からの指示を受け付けるをONにする
AITuberKitをアプリケーションとして作成後、Webブラウザでアクセスします。
画面左上の歯車のアイコンをクリックします。
「その他」をクリックします。
「外部からの指示を受け付ける」の状態をONにします。その後、「メッセージ送信ページを開く」をクリックします。
表示された画面で下部に移動します。
「Send user input」に表示された「Curl Sample」をもとに、Node-REDにWebフォームを実装します。
IBM Cloud Code Engineで、Node-REDを動かす
AITuberKitをIBM Cloud Code Engineで動かす手順とほぼ同じです。違う点は、次のとおりです。
Image ReferenceのURLに、Node-REDのイメージを指定
アプリケーション作成時に「Image ReferenceのURL」には、Node-RED用のコンテナイメージとして、DockerHubにあるものを指定しています。下記を入力します。
docker.io/nodered/node-red
Resources & scaling は少なめに
Node-REDは、AITuberKitに比べて低めのスペックでも十分に動きますので、図のように少なめに「CPU and memory」に設定します。図の設定値ではまだ大きいので、もう少し減らしても良いでしょう。Node-REDは、割り当てメモリが512MBでも十分に動きます。
Node-REDをIBM Code Engineで立ち上げると、先に立ち上げたAITuberKitもあるので、下図のように表示されます。２つ並んで表示されていれば良いです。
図では、上がNode-REDで、下がAITuberKitです。
Node-REDにWebフォームを実装する
AITuberKitの「外部からの指示を受け付ける」の「メッセージ送信ページを開く」をクリックしたことで表示される「Send user input」に表示された「Curl Sample」をもとに、Node-REDにWebフォームを実装します。
Webフォームとして動作するように、Node-REDでは次のように形（フロー）になります。
1 http in node
MethodをGET、URLに /form を指定しました。Node-REDのURLの、#flowの部分をformに書き換えることで、実装するWebフォームを表示させることができます。
2 template node
簡単なWebフォームを作成します。フォームを送信すると /postmsgに送信されるようにしています。
3 http response node
「http in node」を使っている場合は「http response node」が必須なので設置しています。
4 http in node
MethodをPOST、URLに /postmsg を指定しました。Webフォームに入力され、送信された値を受信します。
5 function node
前のノードで、Webフォームから届いた値を受け取ったので、この値を、AITuberKitの「外部からの指示を受け付ける」における「Send user input」向けに加工する仕組みを実装します。
6 http request node
前のノードで、JSON形式に変換できるようにしたので、これをAITuberKitに送信する設定を記述します。
「URL」の欄には、AITuberKitの「外部からの指示を受け付ける」の「メッセージ送信ページを開く」をクリックしたことで表示される「Send user input」に表示された「Curl Sample」のエンドポイント（https://aituberkit-cc...ではじまり、=user_inputで終わる長めのURL）を記述します。
また、「Headers」には、Content-Type: application/json を設定します。
Deployをクリック
必要に応じてdebugノードを追加します。debugノードがあることで、各ノードにおける処理の状況を確認できますし、エラーが起きてもどこでエラーが起きたか把握しやすくなります。
各ノードを線で結び、画面右上の「Deploy」をクリックします。
動作確認
AITUberKitには、パソコンやタブレット端末からアクセスし、Node-RED上で作成したWebフォームにはスマートフォンでアクセスします。スマートフォンに表示されたフォームから質問文を送信すると、AITuberKitに表示されたAIキャラクターが音声で話してくれます。
まとめ
生成AIとモデルを作成していた際に、AIキャラクターによる各種案内や雑談ができる仕組みをつくることができないか相談されたことがありますので、今回の対話できるデジタルサイネージの試作になりました。
店舗や図書館、博物館などでの建物内でAIキャラクターに向かって話しかける人はなかなかいないと思うので、スマートフォンから質問を送信する形をとっています。
IBM Cloud Code EngineとNode-RED、AITuberKitを使うことでさくっとプロトタイプを作ることができました。