画像やYouTubeをデジタルヒューマンのUIに表示する
DH-Conversationからデジタルヒューマンに指示して画像やYouTube、クイックリプライ(サジェステッドレスポンス)を表示する場合、下記の様に設定します。
表示例
設定方法
1. コマンドを生成する
EOL - 拡張コマンド/HTMLコマンド (拡張データー)を作成する - Reactfrontend の手順に従って、コマンドを作成します。
EXPORT(出力)する際に、フロントエンド(ビュー)の種類に合わせて
Use displayValue
切り替えてください。2.コマンドを設定する
出力されたJSONを拡張データ(任意)
にペーストします
画像を表示する場合 不要なHTMLタグが入るとエラーがでる場合があります。
その場合はref=\\\"\\\"
を削除すると上手く行く場合があります。
誤:
{
"instructions": {
"displayHtml": {
"html": "{\"displayValue\":\"<p>テストテストテスト<img src=\\\"https://www.digitalhumans.jp/wp-content/uploads/2021/06/Building-a-Digital-Workforce-eBook-cover-square-cropped-1.png\\\" caption=\\\"\\\"
正:
{
"instructions": {
"displayHtml": {
"html": "{\"displayValue\":\"<p>テストテストテスト<img src=\\\"https://www.digitalhumans.jp/wp-content/uploads/2021/06/Building-a-Digital-Workforce-eBook-cover-square-cropped-1.png\\\" caption=\\\"\\\"></p>\"}"
}
}
}
例: { "displayHtml": { "html": "<h3>商品紹介</h3><p><img src='https://digitalhumans-demo.jp/assets/images1.jpg'></p><p>AIの進化が人類の働き方を変革し、AIを使いこなせる人々の時代が到来しています。これまでと違い、AIは自然言語で命令できるツールとなり、未知のテクノロジーから便利な道具へと変貌しました。これは個人の働き方や生き方、組織、教育、文化など全てに影響を及ぼすでしょう。新時代を生き抜くためには、「AI DRIVEN」な働き方・生き方の習得が必須で、そのための支援が本書の目的です。</p><p><span style='color: rgb(255,77,79)'>定価:1, 760円</span></p><p>書籍情報<br>発売日:2023年5月30日(火)<br>ISBN:978-4-8156-1906-0<br>サイズ:46判<br>ページ数:280<br>付録:-</p>" } }
コンテンツ表示部分のデザインを編集するには
下記をご覧下さい。
CSSで修正する
customStyles <string>
デジタルヒューマンフレームに適用されるCSSの文字列です。クライアントは独自のCSSスタイルルールやオーバーライドを挿入できるようになっています。ただし、ホステッドエクスペリエンスのインターフェースは変更される可能性があるため、customStylesで大幅な変更を加えることは推奨されません。依存しているクラス名がCSSセレクタとして警告なしに変更される可能性があります。
デフォルト値:null
例:customStyles: `h1 { font-size: 150%; }`
お役に立ちましたか?
😞
😐
🤩
最終更新日 June 23, 2023