簡単にボタンや画像が作成できるUIテンプレート

簡単にボタンや画像が作成できるUIテンプレート

AI受付やAI店員など、AI搭載3Dキャラクターを街で実際に使用する際に、音声認識の制度が低く、会話にならなかった経験はありませんか?

開発者の方は、「せっかく会話エンジンを作ったけどうまく音を認識してくれない…」と嘆いたことはありませんか?

(何を隠そう、弊社でも頭を悩ませている部分でした。)

そんな問題も会話の形式によっては、このUIテンプレートを使ってボタンを設置することで解決できるんです!

※2/6 画像表示機能及びSpeech to textオンオフ機能の説明も加えました!

UIテンプレートとは

UIテンプレートとは、Watsonの会話エンジン(Watson Assistant)で作成した、

  • optionタイプの会話をボタン化する機能
  • Imageタイプで設定した画像を表示する機能
  • Speech to textオンオフ機能

などをコンソール画面から管理することができる機能です。

会話をボタン化することで、雑音が激しい環境や屋外などの音声を認識しにくい場面での利便性を高めたり、
画像を表示することで道案内や商品案内用に利用することができます。

早速ですが、UIテンプレートの設定方法を紹介していきます。

Watson Assistantの設定

※Watson Assistantの基本的な設定方法は以下の記事をご参照ください。
【画像付き】IBM Watson / Watson Assistantの設定

ボタンを表示するための設定

Watson Assistantの会話タイプをOptionに設定します。

 

ボタンに表示したい文字を「List label」に入力し、watsonが受け取りたい値を「Value」に入れることでこのUIテンプレートが利用可能な状態になります。

ちなみにこの会話エンジンでは「私について」というボタンを押すと、「名前は」とwatsonへ送られています。

watsonが「名前は」を受け取ると、「私はRAKUDOちゃんです・・・」というような返答を行うように設定したいので、「Value」をこの値で設定しています。
この返答の内容については、下位のノードで設定することになります。

ボタンの設定は以上で完了です。

 

画像を表示するための設定

Watson assistantの会話タイプをImageに設定します。

Image sourceへリンクを設定するだけで完了です!

▼RAKUDOのロゴを表示することができるリンクです。テスト用にお使いください。
https://s3-ap-northeast-1.amazonaws.com/fabcube.net/uploads/post_image/image/247/rakudo_logo.png

AI interfaceの設定

AI interface側の設定については、新規登録した時点ですでにデフォルトで適用されています。
そのため、何も設定を行わなくてもwatsonで行なった設定を使用することができます

ここからは、自分好みにカスタマイズする方法を解説していきます。

まずはコンソールからデバイス設定にいき、[UIテンプレート設定]をクリックします。

 

「編集する」をクリックします。

 

画面遷移すると、UIテンプレートを設定するためのjsonがエディター形式で表示されます。

 

変更が可能な要素は以下の通りです。

8つの設定

※コメントが設定されていると正常に機能しないので削除してから実行してください

1.Options Layout Group

ボタンを配置する

ちなみにこの設定だとこのような画面になります。

2.MicrophoneIcon

マイクアイコンを表示する

このように表示されます。
数字を変えれば大きくなったり、場所を変更することができるので試してみてください。

3.Transcript View

下部に話した内容を表示する

 

TranscriptViewを入れると、自分が話した内容を確認できるのでSpeech to textの制度チェックやデバッグが容易となります。

4.Webcam View

カメラ映像を写す

 

Viewerではこのように表示されます。

 

5.Images Layout Group

会話の中で設定したImageを表示する

 

viewerではこのように表示されます。

6.Toggle Microphone

Speech to textのオンオフを任意で行う
※オフにしてからオンすると、オフしたところから会話が再開されます。

以下のような状況下での使用を想定しています。
1. お客様へのプレゼン中に区切りのいいところで止めたい(止めないと延々と会話が繰り返されて話が進まない)
2. 開発中に止めながらノードごとの確認を行いたい
3. ボタンのみで対応したいので音声入力を遮断したい

 

viewerではこのように表示されます。

デフォルトではオフの状態です。

オンにするとマイクが表示されSpeech to textが起動します。

7.Restart Conversation Button

「ToggleMicrophoneでSpeech to textをオフにしたが、会話を再開するのではなく会話を最初から行いたい」という時のためのボタンです。
ちなみに弊社では会話の精度テストを行う際に使用していますが、意図しない会話に入った瞬間に初期化して初めから行うために使っています。

 

viewerではこのように表示されます。


 

8.Text

Viewer上で文字を表示することができるTypeです

RGBカラーの参考リンク:
Get HTML color codes, Hex color codes, RGB and HSL values with our color picker, color chart and HTML color names. Let’s go!

viewerではこのように表示されます。

 

 

 

 

さらに細かい設定

anchor:大まかな場所の設定

  • TL : Top Left , 左上
  • TR : Top Right , 左右
  • TC : Top Center , 上部中央
  • ML : Middle Left , 中央左
  • MR : Middle Right , 中央右
  • MC : Middle Center , 中央真ん中
  • BL : Bottom Left , 左下
  • BR : Bottom Right , 右下
  • BC : Bottom Center , 下部中央

position:細かい場所の設定

  • size([横, 縦]で設定)
    child-sizeを囲う枠
  • child-size([横, 縦]で設定)
    sizeの中で作成する要素のサイズを決める。
  • children
    childrenにはWatsonで設定したoptionが自動で入るようになっているので修正しないでください。
    arrayを空にしておけば自動でボタンができます。
  • spacing
    要素と要素の間のスペースを設定することができる。

ちなみに横長のUIだと、横が1920、縦が1080の設定になっています。

縦長であれば横1920、縦1080なので、用途に合わせてサイズ変更してください。

Debugについて

Debugをオンの状態では、次のようになります。

Debugをoffの状態では左側のログが消え、以下のようになります。

まとめ

どうでしたか?お分りいただけたでしょうか?

このUIテンプレートにより、画面に簡単にボタンを設置できるようになりました。
みなさんそれぞれカスタマイズして、お好みの物を作成してみてください!

また、わからないことがあればお気軽にご質問ください。

AI interfaceはまだまだ進化しますよ〜〜〜!


▼お問い合わせはこちら

▼LINE@でも受け付け中です

ーーーーーーーーーーーーーーーーーーーーーーーー
『名古屋の3D × IT企業 株式会社RAKUDO』
●AIと人のつながりを作るプラットフォーム「AI interface」
●3Dプリンターや3DCAD設計 ●AI、アプリ(Web, iOS, Android)開発
特に...3DとIT技術を組み合わせたソリューションが強み!
①最新3D技術ソフトであるCGとIT技術であるゲームエンジンを組み合わせたVR、ARコンテンツ
②3DCADでデータを作成し、それを3Dプリンターで出力。ハードウェアにPythonでプログラムしたラズベリーパイを搭載するIoTソリューション など...
ーーーーーーーーーーーーーーーーーーーーーーーー
株式会社RAKUDO、100年後の働き方を創る fabcube | 名古屋の3D CAD、3Dプリンター、CG、IT企業

AI interfaceカテゴリの最新記事