Amazon Web Services ブログ

How to : Amazon Lex と Babylon.js と AR/VR のハンズフリーインタラクション

本ブログは “How to: Hands-free interaction for AR/VR with Amazon Lex and Babylon.js” を翻訳したものです。

クラウドが空間コンピューティングアプリケーションの開発にどのように役立つのか疑問に思うのはよくあることです。空間コンピューティング/拡張現実 (AR) /バーチャルリアリティ (VR) /3D での作業のほとんどは、フロントエンドの設計とハードウェアの最適化に焦点を当てています。アプリケーションの統合性が高くなり、開発が容易になるにつれて、クラウドは完全な空間アプリケーションにおいて重要な役割を果たします。継続的インテグレーション/継続的デプロイメントなどの DevOps の原則や、Amazon Lex などのアプリケーション層の機械学習サービスは、空間コンピューティングワークロードの相互作用とエンゲージメントの新しい効率的な方法を実現するのに役立ちます。

この記事では、継続的インテグレーション/継続的デプロイ (CI/CD) パイプライン管理に AWS クラウドを使用するシンプルなアプリケーションを作成する手順について説明します。また、Amazon Lex を使用して、自分の声でやり取りやエンゲージメントを制御する方法も示します。最終製品は、デジタルハウスを案内する音声制御の Web アプリケーションです。ボタンをクリックするか、または音声を使用して、家のプリセットビューと色をコントロールできます。

3D/AR/VR にウェブ開発者ツールを使用する

ソフトウェアエンジニアリングと DevOps の実践者は、作業のコラボレーションとバージョン管理を支援するために、アプリケーションに CI/CD パイプラインが必要です。AR/VR 開発者にとって、これは新しい概念かもしれません。特に Web アセットを操作する場合です。原則は簡単です。コードの中央リポジトリを作成し、信頼できるチームメイト（またはパブリック）がプロジェクトに貢献できるようにし、変更を承認し、更新されたバージョンをウェブ上に自動的にデプロイしてすぐに利用できるようにします。このプロセス中に管理するサーバーはありません。

Amazon Cognito、AWS Amplify、Amazon Lex を統合した AWS リファレンスアーキテクチャ

初期要件とセットアップ

まず、AWS CodeCommit を使用してコードの場所を作成しました。リポジトリを作成するには、名前を付け、ローカルワークステーションにリポジトリをクローンする必要があります。AWS CodeCommit は、個別の認証情報を必要とせずに AWS CodeCommit リポジトリをクローンするために、認証情報ヘルパー git-remote-codeCommit をリリースしました。これにより、クレデンシャル数を減らすことができます。

Amplify it up!

コードのリポジトリがあるので、Web アプリケーションを公開してデプロイする場所が必要です。これを行う方法はたくさんありますが、AWS Amplify の AWS CodeCommit と AWS CodePipeline への統合を使用します。プロジェクトに変更をコミットすると、ビルドジョブが自動的に起動され、その結果がグローバルにデプロイされます。

    1. AWS Amplify プロジェクトを作成し、プロジェクトのソースリポジトリとして AWS CodeCommit を選択してください。私が持っている唯一のブランチを選択しますが、テスト環境やバックアップ環境を操作したい場合は、追加の git ブランチを作成できた可能性があります。
    2. 3D Webアプリケーションは純粋なHTML/JavaScriptで書かれ、配信され、ビルドを必要としないため、ビルド手順だけを残します。
    3. Amplify が終了すると、サイトの一意の URL と、最新の AWS CodeCommit コメントからのメモが提供されます。テストのために必要なのはこれだけです。将来的には Amazon Route 53 で完全修飾ドメイン名 (FQDN) をいつでも割り当てることができます

チャットボットに話しかける

Amazon Lex は、自然言語処理 (NLP) を使用してチャットボットとの直接的な会話を推進するサービスです。以前にAmazon Lex チャットボットをビルドしたことがない場合は、目的のあるボットを構築することが重要です。Amazon Lex は、エンドユーザーがターゲットを絞ったリクエストや質問がある場合に最も効果的です。デモアプリケーションでは、ユーザーがカメラをプリセット位置に移動したり、家の色を変更したりするたびに Amazon Lex チャットボットをアクティブにしたいと考えています。

  1. Amazon Lex に移動して、新しいカスタムボットを選択します。必要な音声プロファイル、タイムアウト、および COPPA 要件を示した後、空のボットを設定する準備ができました。

Amazon Lex チャットボットを作成する

  1. チャットボットに 2 つのことをしたいので、ChangeColor と changeView という 2 つの新しいインテントを作成します。各インテント内で、インテントを特定して呼び出すためにユーザーが何を言えるかを推測するのに役立ついくつかの発話を定義します。また、単一のスロット値 (changeView インテントの cameraViewPosition、changeColor インテントには houseColor) を作成し、値が空の場合は適切なプロンプトを表示します。
  2. また、カメラビューのカスタムスロットタイプを作成します。これは、提供された AMAZON.* 値内に定義されていないためです。
    キャプチャされたスロットの値を参照するなど、応答としてプロンプトを作成します。発話内では、ユーザーが最初のリクエスト内でスロット値を発音するのをサポートするように発話を構成します。
  3. 次に、エイリアス prod でボットを構築して公開します。これで、チャットボットが自分の 3D Web アプリケーション内で使用できる状態になりました。

アクセス許可

3Dアプリケーションを掘り下げる前に必要なことがもう1つあります。ユーザーがウェブアプリケーションに移動すると、先ほど作成した Amazon Lex チャットボットをリクエストに使用します。これには、AWS アカウント内のボットを参照する必要があります。この交換の認証情報を提供したくありません。これがAmazon Cognito ID の出番です。

  1. Amazon Cognito サービスに移動して Amazon Cognito ID を作成し、新しい ID プールを作成します。これは、認証されたユーザーと認証されていないユーザーの 2 種類のユーザーを処理します。このアプリケーションにはユーザーがログインしていないため、認証されていないユーザーに分類されます。
  2. Amazon Cognito ID の作成プロセスでは、新しい IAM ロールも作成されます。IAM に移動し、認証されていないトークンにアタッチされているロールを検索し、ポリシー AmazonPollyReadOnlyAccess と AmazonLexFullAccess を追加します。ユーザーがボットとの間で返信を送受信するため、Amazon Lex へのフルアクセス権をユーザーに付与します。ただし、Amazon Lex からの返信（テキスト）を音声に変換するために使用されるため、Amazon Polly に ReadOnlyAccess しか必要ありません。

インタラクティブサイトの作成

さあ、創造的になりましょう！Babylon.js はオープンソースで、3D コンテンツの操作を簡単に開始できるので使っています。Babylon.js の使用方法の詳細については説明しません。コミュニティから既に入手可能な優れたドキュメントがいくつかあるからです。ただし、プロジェクトで使用する重要な詳細がいくつかあります。コードを書く前に、自分が何をしているのか理解する必要があります。これは、インタラクション設計フェーズと呼ばれ、テクノロジーに深く潜る前に、高レベルの対話性目標の概要を説明することを含みます。このプロジェクトについて概説した目標には、次のようなものがあります。

  1. どのデバイスでも動作するシーンを用意してください。
  2. Amazon Lex に依存しないインタラクティブ性の要素を含めます。ここでは、Babylon.js のインタラクションメソッドの仕組みについて説明します。
  3. 理解できたら、シーンに音声コントロールを追加して、インタラクションを広げましょう。

これらの目標を設定して、AWS CodeCommit で作成した空のリポジトリをクローンすることから始めます。まず、Babylon.js の CDN を含めて、自分の環境をレイアウトすることから始めます。ビクトリア朝の家のモデルをインポートし、メッシュ階層をクリーンアップします。通常、3D モデルは大きく、3D シーンには多数のインスタンスが含まれています。1 つの小さなモデルしか使用していないため、AWS CodeCommit リポジトリ内で適切にクローンを作成します。

地面、HDRI のワールド Skybox、HDRI 反射環境、テクスチャの凹凸のある高さマップを持つ芝生のような他の要素をシーンに追加します。今のシーンは私が望むように見える（自分のPCに負荷を与えず）。次に、カメラのコントロールやデバッグ用のボタンなど UI 要素を追加し、Babylon.js のGUI 拡張機能を使用したカラーピッカーを追加します。Amazon Lex をシーンに接続する前に、各ボタンで目的のインタラクティブ性をコーディングします。満足したら、AWS SDK と Amazon Lex の統合に移行します。

AWS JavaScript SDK をウェブページに統合するにはいくつかの方法がありますが、以前に作成した個別の Amazon Cognito トークンを使用します。最初に AWS SDK CDN を含めて、AWS オブジェクト用に作成された Amazon Cognito ID を使用します。このトークンを使用すると、ゲストは個別のログイン認証情報を必要とせずに AWS にリクエストを行うことができます。

使用する Amazon Cognito ID の挿入

AWS と Amazon Lex からデータを送受信する権限がユーザーにあるので、2 つの選択肢があります。Amazon Lex PostContent API 呼び出しにリクエストを送信できました。ただし、これには、発話されたメッセージを定義してエンコードし、それらをブロブにパックし、PostContent を使用して処理するために送信し、返信 BLOB をデコードし、ブラウザで再生する必要があります。Babylon.js を使用する Web ページを作成しているので、ウェブアセットとまったく同じように動作します。これは、プロジェクトでサードパーティのライブラリを使用できることを意味します。

PostContent リクエストを使用してオーディオ BLOB を Amazon Lex に送信し、返信を再生する-難しい方法

aws-lex リポジトリの aws-lex-browser-audio-capture プロジェクト https://github.com/awslabs/aws-lex-browser-audio-capture では、手動でのエンコードやパッケージングを必要とせずに Amazon Lex にメッセージをパッケージ化して送信する方法が用意されています。”conversation”と呼ばれる抽象オブジェクトを作成します。このライブラリは、無音検出で会話をパッシブからリスニング、送信、スピーキングに自動的に移動することもサポートしています。つまり、ユーザーは毎回会話が終了するタイミングを示す必要はありません。

“aws-lex-browser-audio-capture” ヘルパーライブラリの信号フロー

Babylon.js でインタラクティブ性を実現するために、アクションまたはオブザーバブルを使用します。アクションは 3D エンティティに割り当てられた離散イベントに反応します。オブザーバブルは DOM 上のイベントトリガーと同義で、Babylon.js シーン全体で実行されます。このシーンでは、Observable onpointerupObservable の組み込み関数を使用しますが、カスタムオブザーバブルを作成することもできます。OnPointerupobservable を、ユーザーがクリックしてチャットボットとの会話を開始するボタンにアタッチします。設定オブジェクトが作成され、話したい Amazon Lex ボット (この場合は HouseTour) を示す LexConfig オブジェクトが割り当てられます。

簡単な方法:ヘルパーライブラリを使用してオーディオ BLOB を Amazon Lex に送信して再生する

次に、conversation オブジェクトが作成され、config オブジェクトが渡されます。conversation オブジェクトは、PostContent API リクエストの抽象化であり、Amazon Lex への発話のエンコード、パッケージング、および送信を処理します。Amazon Lex が応答すると、コールバックが実行され、Amazon Lex からの返信ペイロードが関数に渡されます。スピーカーがカメラの変更や家の色の変更を依頼できるので、Amazon Lex インテントが呼び出されたペイロードを確認します。インテントとスロットの両方が値で満たされている場合、適切な大文字と小文字を区別すると、シーン内で何が起こるかをシーンに指示します。簡単にするために、各ビューの座標を含むヘルパー関数 MoveCamera とヘルパー配列を作成します。

返されるスロット値は、シーン内で実行するアクション (カメラの移動/色の変更) を決定します。

最後に、チャットボットが会話を聞いているかどうかをユーザーに通知するインジケータを追加します。これを行うには、Amazon Lex チャットボットの状態を、ユーザーが話し始めたときにクリックしたボタンテキストに記録します。これは、「ボットが聞こえたのですか？」という質問に答えるのに役立つはずです。

試してみましょう

最終シーンを試してみたい場合は、バックグラウンドノイズのない部屋にいることを確認し、https://master.d3dn2h4ioek1dc.amplifyapp.com/ に移動します。「カメラを動かす」と言ってカメラを変更するように依頼し、希望するカメラ (1、2、3、4) を指示します。コンソールに記録したデータのナゲットがいくつかありますが、Amazon Lex が返信したときにペイロードがどのように見えるか興味があるかどうかを確認できます。これにより、初期開発要件を通じてクラウドコンピューティングのメリットがプロジェクトにもたらされ、Amazon Lex などの機械学習アプリケーションサービスを使用してエクスペリエンスをコンポーネント化すると結論付けられます。Babylon.js はブラウザ内で実行されるため、AWS Amplify を使用すると、プロジェクトの配布と共有が簡単になります。

次のステップ

このプロジェクトは、あなたができる多くのインタラクションの出発点です。Babylon.js は、WebXR スタックと 1 行のコードも統合します。つまり、このプロジェクトをバーチャルリアリティや拡張現実体験に変えるのは簡単です（GUI調整が必要です）。Babylon.js には、メッシュをスライスして内部の内容を確認できるクリッププレーン機能があります。また、ユーザーインタラクションのメトリクスをデータベースに記録したり、Amazon DynamoDB などのデータベースからハウスに関するメタデータ（価格や年齢など）を取り込むなど、AWS に統合されていることにも追加できます。このプロジェクトが、クラウドが開発プロセスと最終的なインタラクションの結果の両方にどのように役立つのかを検討するのに役立つことを願っています。限界は本当にあなたの想像力です。だから、クリエイティブで世界と共有しましょう！

執筆者について

William Cannady

William Cannady は、AR/VR に焦点を当てたシニアスペシャリストソリューションアーキテクトです。彼は新しいテクノロジーを発見し、最先端のソリューションに取り組んでいます。彼が何かをいじっていないとき、おそらく彼はトレイルでさまようか、森の中でキャンプをしているのを見つけるでしょう。

本ブログはソリューションアーキテクトの大井が翻訳しました。