拡張コマンド/HTMLコマンド (拡張データー)を作成する

デジタルヒューマンのフロントエンド(サンプル)のreact-frontendにおいて、デジタルヒューマンの発話にあわせて情報を表示するコマンド(JSON文字列)を簡単に作成する方法をご紹介します。

⚠️
注意: デジタルヒューマンプラットフォームに付属しているホステッドエクスペリエンスでは拡張コマンドは利用できません。
 

リアクトフロントエンド ( React-frontend )

※React-frontendはソースコードを公開しており、お客様の用途に応じてカスタマイズ可能です。下記にあるいくつかの以外にもデザインやオリジナルのアクション(表示方法)を実装する事ができます。

 

コマンドエディタ ( UneeQ Command Editor )

拡張コマンドはUI側の機能実装とチャットボット/NLP側からのコマンド(JSON文字列)送信が必要です。JSON文字列は慣れていないと分かりにくいので、下記にコマンドエディタを公開しています。

 

React-frontendで表示できるコマンド

INFOMATION POPUP

文字列、リスト形式、画像を表示する事ができます。画像はアクセスできるURLから取得する必要がありますので、WEBサーバやAWS S3等にアップロードしてURLを取得してください。

Notion image
 

出力サンプル

{
    "instructions": {
        "displayHtml": {
            "html": "{\"information\":\"デジタルヒューマン株式会社(Digital Humans, Inc.)\\n\\n659-0093 兵庫県芦屋市船戸町5-26 マリアキャリーヌビル2F\\n\\n![](https://画像URL/map320.png)\"}"
        }
    }
}
 

表示サンプル

Notion image
 

Embedded (Video) Popup

YouTube等の動画を再生する事ができます。ページのURLではなく共有用のURLを貼り付けて下さい。

Notion image
 

出力サンプル

{
    "instructions": {
        "displayHtml": {
            "html": "{\"information\":[{\"type\":\"video\",\"source\":\"https://www.youtube.com/embed/9mXKAeNMmqg\"}]}"
        }
    }
}
 

表示サンプル

 

SUGGESTED RESPONSES

ユーザーをガイドするための、質問例やクイックリプライを表示する事出来ます。

  • Label ・・・react-frontendにボタンに表示される文字列
  • Utterance・・・チャットボットやNLPに送信される文字列
Notion image
 

出力サンプル

{
    "instructions": {
        "displayHtml": {
            "html": "{\"mainTitle\":\"こんな風に聞いて下さい\",\"suggestedResponses\":[{\"label\":\"お名前は?\",\"utterance\":\"お名前を教えて頂けますか?\"},{\"label\":\"ご出身は?\",\"utterance\":\"ご出身はどちらですか?\"},{\"label\":\"今日の天気\",\"utterance\":\"今日の天気は?\"}]}"
        }
    }
}
 

表示サンプル

Notion image
 

miscellaneous

音声入力と文字入力フォーム表示を制御する事が出来ます。

  • true – 文字入力フォームを表示
  • false – 文字入力フォームを非表示
 

出力サンプル

{
    "instructions": {
        "displayHtml": {
            "html": "{\"openInputBar\":true}"
        }
    }
}
 
💡
情報: デジタルヒューマン株式会社が別途提供している日本語版React-frontendは文字入力と音声入力を1つのコンポーネントで実現しているので対応していません。
 
お役に立ちましたか?
😞
😐
🤩

最終更新日 January 1, 2023