はじめに
久しぶりに記事を書きました。25年1月以来の11か月ぶりです。
会社ではITに関する大きな組織変更があり、かつ責任分界点が不明瞭のため、抱える仕事が大幅に増えてしまったこと、4月からMBAに通いだして、宿題対応でめちゃくちゃ忙しくなったこと、それから今年から本格的にアプリ開発の副業を始めたのですが、それも好評でそのプログラミング作業で非常に忙しくなったためです。
そのおかげで、副業で稼いだお金で、家族４人分の韓国旅行費用を出すことができました。これについては後日プログラム関連ではない記事で書きたいと思います。
今回は、そんな中、副業で「インタラクティブアバターを構築してほしい」というご依頼があり、それに対応した内容を書いていきたいと思います。
方針
アバターと言えば私は「HeyGen」をまず思い出しました。
以前も「HeyGen」の記事を書いたことがあるのですが、そのクオリティの高さや、プログラマブルな設計思想で、開発者がプログラム開発しやすいようなベースができています。SDKやAPIの提供などがあります。
ほかのサービスも見てみたのですが、やはり「HeyGen」が一番しっくり来たので、これで開発することにしました。
また、開発のシステム構成ですが、「HeyGen」のSDKを適用するには、PythonのほかにNext.jsやTypeScriptをある程度習得する必要がある事を知りました。
私はPythonしかできないので、今回はSDKを使わず、プログラミングをしない方向で実施することにしました。
いろいろなシステム構成案を検討しましたが、最後の案にしました。
案1 RAGを自前で開発する案
案2 Difyを使って開発する案
案3 自前での開発をせず「HeyGen」ですべて対応する案
案3ですと、プログラミングの必要が無く、またサーバなどの別途準備も必要なく、システム開発のコストは大幅に抑えることができるものの、「HeyGen」に標準で備え付けられている「知識ベース」（いわゆるベクトルDBのようなもの）でしかローカルナレッジを蓄積することができません。
そのようなデメリットもありますが、今回はリーン開発を目指し、案3のシステム構成を取りました。
インタラクティブアバター生成
今回は @AI-Bridge Lab さんの記事を参考に、インタラクティブアバターを作ってみました。
設定には、以下の図のように「動画撮影」「プロンプト作成」「音声作成」そして「インタラクティブアバター作成」という順序で進めていくことになります。
ただ、「動画撮影」で動画と音声について特に変更がないのであれば、「音声作成」を別途実施する必要はありません。
それでは、操作手順を説明していきます。
まず、「私のアバター(MyAvatar)」ボタンをクリックしてください。
動画撮影の注意点が表示されますので、より確認をして、「次のステップ」ボタンをクリックしてください。
今回はこの時点で動画撮影をしますので、「ウェブカメラで録画する」をクリックしてください。
特に問題が無ければ「次」ボタンをクリックします。
「Record via webcom」をクリックしてください。
文章内容はちょっとおかしいのですが、「電話から始めましょう」をクリックします。
チェックボックスに全てオンにして、「私の映像はよさそうに見える」をクリックします。
撮影のをするときに、表示されている日本語を読み上げる必要があります。また最後に直前に表示されるパスコードを読み上げる必要があります。はっきりした口調で話さないとエラーになる場合もあるので気を付けてください。
ステータスが進んでいき、100%になれば完了です。
完了したら、「MyAvatar」として先ほど撮影したものが表示されます。
ただ「処理中」になっていると思います。最大２４時間待つ必要がるようです。
知識ベース
ここからは知識ベースの登録をします。新規追加をクリックします。
プロンプト情報などを入力します。
「オープニングイントロ」には必ず文章を入力する必要があります。アバターが最初に起動した時に話す文言です。
またナレッジとして蓄積したい文章をプロンプトとして入力します。
完了したら「保存して適用してください」ボタンをクリックします。
そうすると、それほど時間がかからずに、知識ベースが生成されます。
ブラウザデザイン
私はWebデザインにはとても疎いのですが、生成AIなどの力を借りて、作成することにしました。
お客様からのオーダーは、別途ボタンを設けて、有人チャットに行くようにしてほしいという事でしたので、GoogleMeatのURLに遷移するように実装しました。
また、iframeにて「HeyGen」の動画部分を実装するため、提供されているスクリプトを埋め込む必要があります。
画面の右上に「embedding」というボタンがあるので、これをコピーして、HTMLファイルに実装しました。
また、スマホやタブレットで確認できるようにしてほしいというオーダーがありました。ただ、HTMLファイルをそのままタブレット内に設置しても上手くアバターが動かなかったので、今回はAWSの「S3」上にHTMLファイルを設置することにしました。これであれば、PCやタブレットで問題なく稼働することを確認しています。
確認
実際に確認してみました。「知識ベース」のプロンプトを基にちゃんと回答しています。
プロンプトの情報量はそれほど多くは無いのですが、先ず先ずかと思います。
おわりに
プログラム実装を全くせずに、インタラクティブアバターを作成することができました。
このアバターに多くの知識を設定することで、コールセンター対応なども問題なくできると思います。
今後に大きな期待が持てます。
一方で、もっと多くの知識を持たせるためには、「RAG」の実装が必要となり、Next.jsやTSによるフロントエンドの実装が必須となりそうです。
これからNext.jsを勉強して、今年中にはフロントエンドからバックエンドまで一気通貫でSDKを用いたインタラクティブアバターの実装ができるようになろうと思います。
最後までご覧いただき、ありがとうございました。