🤖

デジタルヒューマンを構築して会話する (応用編)

2022/01/16に公開

概要

こんにちは、maKunugiです。

本記事は、「デジタルヒューマンを構築して会話する(基本編)」の応用編になります。

基本編では、デジタルヒューマンを構築し、デフォルトの会話画面で会話をするまでの方法をご紹介しました。応用編では独自の会話画面を用意し、デジタルヒューマンと会話をする方法について説明していきます。まずは基本編をお読みいただいてから本記事をご覧ください。

この記事の対象者

基本編を既にお読みの方
基本編で既にデジタルヒューマンを構築している方
独自の会話画面でデジタルヒューマンとの会話を行う方法を知りたい方

本記事のGOAL

独自の会話画面でデジタルヒューマンを扱うことができる

独自の会話画面とは

React.jsのソースコードを自分で動かし、デジタルヒューマンの会話画面を立ち上げます。Uneeq社が提供するデフォルトの会話画面ではできないことを実現したり、その他自由なカスタマイズをすることが可能です。

必要なスキルセット

本記事は下記ができることを前提とします。

Gitの基本操作ができる
Shell Scriptを利用できる
※React.jsの知識
※Node.jsの知識

全体構成

会話画面を独自構築するにあたり、用意する必要がある仕組みは下記のイメージです。

DH Frontend: デジタルヒューマンの会話画面となるFrontendです。
Token API: 会話に必要なアクセストークンを取得するためのAPIです。
Uneeq Platform: Uneeq社が提供する機能です。
mebo: 基本編で紹介した会話を行うためのシステムです。

独自の会話画面を用意する場合は、「DH Frontend」と「Token API」を自前で用意する必要があります。この２つを構築する方法を説明していきます。

尚、公式のドキュメントはこちらです。この記事よりも詳細を知りたい方はご参照ください。
https://docs.uneeq.io/#/js_sdk

構築手順

1. DH Frontendの構築

まずは、「DH Frontend」を構築していきます。Uneeq社が提供しているReactのfrontendのソースコードをベースにします。

react-frontend

基本的な利用方法は、READ.mdに書いてあるので、要点を掻い摘んで紹介していきます。

リポジトリの用意

react-frontendのリポジトリをcloneもしくはforkします。

cloneの場合

git clone --origin upstream git@gitlab.com:uneeq-oss/react-frontend.git
git remote add origin git@github.com:you/your_repo.git

プロジェクトの作成

cloneしたルートディレクトリにある「example-app」というフォルダが、プロジェクトの本体です。このフォルダをコピーして利用します。

cp example-app my-app

「my-app」を作成したら、それに伴いpackage.jsonを変更します。

package.jsonの変更点

workspacesに「my-app」を追加
scriptsの「start」と「build」の内容を変更

./package.json

...
"workspaces": [
  "packages/*",
  "example-app", 👈 追加
  "my-app"
],
"scripts": {
  "start-my-app-only": "yarn workspace my-app start",
  "start-my-app": "concurrently \"yarn:start-packages\" \"yarn:start-my-app-only\"",
  "build-my-app-only": "yarn workspace my-app build",
  "build-my-app": "yarn build-packages && yarn build-my-app-only",　👈 example-appをmy-appに変更

  "start": "yarn start-my-app",　 👈 example-appをmy-appに変更
  "build": "yarn build-my-app", 👈 example-appをmy-appに変更

  ...
}
...

my-appフォルダ内にもpackage.jsonがあるので、nameを変更します。

./my-app/package.json

{
  "name": "my-app", 👈 example-appからmy-appに変更
  "version": "1.1.2",
  "private": true,
  "dependencies": {
    "@react-hook/window-size": "^3.0.6",
    "@rebass/forms": "^4.0.6",
    "emotion-theming": "^10.0.27",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.4.0",
    "rebass": "^4.0.7",
    "uneeq-react-ui": "1.3.1"
  },

環境ファイルの用意

my-appファイル内にあるmy-app/.env.exampleを「.env」にリネームします。
Token APIを用意していないので、まだ環境ファイルを完全に用意できませんが、現時点で設定できる項目を設定しましょう。

.env

REACT_APP_UNEEQ_PERSONA_ID=ペルソナのID
REACT_APP_UNEEQ_URL=https://api.us.uneeq.io
REACT_APP_UNEEQ_TOKEN_URL=Token APIのURL (あとで準備)

ペルソナのIDはUneeq Creatorで作成したペルソナのIDです。基本編で作成したペルソナのIDを利用しましょう。

REACT_APP_UNEEQ_URLにはUneeqの提供するAPIのURLを入力します。リージョンによってURLがあるようです。お好みのリージョンのURLを利用しましょう。

Token APIのURLはこのあと構築後に追加します。

インストール

ルートディレクトリで下記のコマンドを実行します。

yarn install

ローカルで起動

ルートディレクトリで下記のコマンドを実行します。

yarn start

コンパイルが完了したら、ブラウザで下記のURLを開いてみましょう。
http://localhost:3000

この画面が表示されれば成功です。

2. Token APIの構築

リポジトリの用意

Token APIはこちらのソースコードをベースにします。
https://gitlab.com/uneeq-oss/examples

利用するのは、このリポジトリにある「token/node」のディレクトリのみです。このリポジトリをforkもしくはcloneしましょう。

cloneの場合

git clone --origin upstream git@gitlab.com:uneeq-oss/examples.git
git remote add origin git@github.com:you/your_repo.git

環境ファイルの変更

token/nodeディレクトリ内の.envの内容を変更します。

UNEEQ_URI=https://api.us.uneeq.io
UNEEQ_SECRET=Uneeq Secret
UNEEQ_WORKSPACE=ペルソナID

UNEEQ_URIはfrontendの.envで利用した、UneeqのAPIです。
UNEEQ_SECRETはUneeq Creator上で取得できる「Tenant JWT Secret」です。

Uneeq Creatorの「Deploy」->「Build your own」と移動すると、取得できます。
UNEEQ_WORKSPACEは、DH Frontendで利用したペルソナIDと同じ値を利用します。

インストール

「token/node」ディレクトリ内で下記のコマンドを実行します。

npm i

ポートの変更

ローカルで実行する際、DH Frontendの利用するポートと被るのでポート番号を変更します。(この記事では、3001を割り当てています。)
「token/node」ディレクトリの「bin/www.js」を変更します。

#!/usr/bin/env node

/**
 * Module dependencies.
 */

var app = require('../app');
var debug = require('debug')('backend-eeva-test:server');
var http = require('http');

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3001'); 👈 任意のポート番号に
app.set('port', port);

ローカルで実行

「token/node」ディレクトリ内で下記のコマンドを実行します。

npm start

起動後、下記のURLを開いて「pong」と表示されれば成功です。
http://localhost:3001/ping

DH Frontendの.envを編集

Token APIが構築できたので、DH Frontendの.envファイルにToken APIのURLを設定しましょう。

.env

REACT_APP_UNEEQ_PERSONA_ID=ペルソナのID
REACT_APP_UNEEQ_URL=https://api.us.uneeq.io
REACT_APP_UNEEQ_TOKEN_URL=http://localhost:3001/token 👈 追加

.envファイルを更新したら、DH Frontendも再度起動し直す必要があります。一度DH Frontendを終了し、再度下記を実行しましょう。

yarn start

3. 動作確認

ここまでの手順で、ローカルに「DH frontend」と「Token API」が用意できました。
下記のURLにアクセスして、会話を試しましょう。
http://localhost:3000

「Let's Chat」を押して会話が開始できれば成功です。

今回立ち上げた会話画面は、基本編で利用したUneeqデフォルトの会話画面といくつか違う機能が既に実装されています。違う機能を２つ紹介します。

A. 発話候補の表示

このReact製のfrontendでは、meboが返す応答にクイックリプライが含まれる場合、会話画面上に発話候補を表示します。これは、frontendの実装が下記のコマンドに対応しているためです。

command

{
 	"mainTitle": "Call to action text: ",
 	"suggestedResponses": [{
 		"label": "Suggested Response #1",
 		"utterance": "response 1"
 	}, {
 		"label": "Suggested Response #2",
 		"utterance": "response 2"
 	}, {
 		"label": "Suggested Response #3",
 		"utterance": "response 3"
 	}]
 }

会話時にmeboからUneeqに返されるjsonには、下記のようなdisplayHtmlというオブジェクトが含まれます。

  instructions: {
    displayHtml: {
      html: JSON.stringify(command),
    },
  },

このcommandにsuggestedResponsesが格納されていると、会話画面上に発話候補が表示されるよう実装されています。meboはクイックリプライがある場合は、このsuggestedResponsesコマンドを作成してUneeqにレスポンスを返しています。

その他、このfrontendは下記のコマンドに対応しています。

B. 音声認識時の挙動

今回ベースにしているreact frontendの実装は、Uneeqの用意しているデフォルトの会話画面と異なり、音声認識した結果の文字列を会話画面上に表示してくれます。

ユーザは音声認識で正しく発話を認識できたか心配になるので、こういった細かい挙動がユーザ体験を大きく左右します。

meboの拡張データを利用する

先ほどfrontendが対応しているコマンドについてご紹介しましたが、meboでは応答ごとに自由な拡張データ(json)を設定することができます。その機能を利用して、frontendにコマンドのjsonを送信することができます。

基本編で作成したmeboのエージェントを開き、任意の発話の編集画面を開きましょう。

※前回の記事の該当箇所

発話の編集画面では「詳細設定」を開くと、「拡張データ」を入力する項目があります。ここにコマンドに相当するjsonを入力しましょう。

今回はYouTubeの情報が表示されるようなjsonを入力してみています。

{ "information": [{ "type": "video", "source": "https://www.youtube.com/embed/rF2u7RTPsHI"}] }

設定が終わったら保存を行い、公開設定画面でトレーニングの反映およびエージェントの公開を行いましょう。
公開ができたら、DH Frontendを起動して、先ほど設定した応答を呼び出します。

会話画面にYouTubeの動画が表示されることが確認できれば成功です。
このように、meboの拡張データにjsonを追加することで、frontend対応のコマンドを扱うことができます。下記のページに記載があるコマンドであればすぐに利用ができますのでぜひお試しください。

フロントエンドを改修する

A, Bのようにデフォルトの会話画面とは異なる機能が既にありましたが、会話画面のソースコードが手元にあるわけなので、それ以外にも自由な改修が可能です。Reactでのコーディングが可能な方は、ぜひお試しください。

デプロイ

本記事ではデプロイの方法までは言及しませんが、上記手順で作成した「DH Frontend」と「Token API」をデプロイすることで、独自の会話画面を公開できます。

まとめ

独自に用意した会話画面でデジタルヒューマンを扱う方法について、紹介させていただきました。デフォルトの会話画面ではできない様々なカスタマイズが可能なので、デジタルヒューマンの活用の可能性がさらに広がります。ぜひお試しください！

デジタルヒューマンはデジタル空間と現実の世界を違和感なく繋ぐ新しいインターフェースとして、大きな可能性を秘めている感じています。今後もデジタルヒューマン関連の記事を書いていこうと思っていますので、よろしければ下記アカウントのフォローをお願いいたします。

https://twitter.com/maKunugi

最後に、デジタルヒューマン構築に関してのご不明点やご相談に関しましては、maKunugiもしくはデジタルヒューマン株式会社さんにお問い合わせください。

本記事をお読みいただきありがとうございました！

概要

この記事の対象者

本記事のGOAL

独自の会話画面とは

必要なスキルセット

全体構成

構築手順

1. DH Frontendの構築

リポジトリの用意

プロジェクトの作成

環境ファイルの用意

インストール

ローカルで起動

2. Token APIの構築

リポジトリの用意

環境ファイルの変更

インストール

ポートの変更

ローカルで実行

DH Frontendの.envを編集

3. 動作確認

A. 発話候補の表示

B. 音声認識時の挙動

meboの拡張データを利用する

フロントエンドを改修する

デプロイ

まとめ

Discussion