見出し画像

AIとのコミュニケーションを深化！リアルなAIアバターとの対面会話UIを爆速構築する

Takuro Mori

チャット形式でAIと会話することは、みなさんの仕事や生活の中に馴染みつつあるかと思います。
ただ、対面の会話でこそ、相手に親しみを持てたり、ぽろっと悩みが出たり、深いコミュニケーションができるのではないでしょうか。
この記事では、AIとビデオ通話するように対面で喋る仕組みを、作り方を交えて紹介します。


※ 本記事は株式会社miiboの提供です

AIとの対面での会話

miiboについて学習させた、弊社代表の功刀を模したエージェントとの会話デモをご覧ください。

もう一つ、料理研究家を模したエージェントとの会話デモです。

人ととの会話まではいかないまでも、質問に対してスムーズな流れで回答しています！（独創性があるレシピかは疑問ですが、そこは一旦おいておきましょう）

このような顔を合わせてAIと会話を導入することで、さまざまな場面で、チャットでは物足りないやり取りを進化させる事ができます。

  • 1on1
    相手の反応を見ながら口に出すことで、頭の中が整理されたり、アイデア発想が促進されたりします。

  • 英会話
    相手のうなづきや表情があることで、リアル感が向上し、モチベーション向上に繋がります。

  • 営業への問い合わせ
    担当者と予定を合わせる必要なく、資料だけでは分からないポイントについてもQ&Aを通じて、内容を深掘りすることができます。

みなさんの頭の中でも、こういった事に使えそう！というアイデアが浮かんでいるかと思います。

どうやって実現するか

では、どうやって実現すれば良いのでしょうか。
これを全てを実装するのは、実際少し骨が折れます。そこで今回は、
 javascriptのライブラリを作成しました！これを読み込むだけで簡単に実現ができます。

このライブラリでは、miiboとD-IDのAPIを利用しています。
まずは、このセットアップをしましょう。両者ともお試し枠があるため、無料で検証可能です。

miiboのアカウントを作成

miiboは、さまざまなLLMに様々な機能を加え、誰でも簡単に効率的にAIを開発できる環境です。
以下の記事を参考に、miiboのアカウントを作成してください。

今回は、APIを使うためAPI機能をONにします。
外部サービス連携 > APIを利用して会話やデータの入稿を行う から設定できます。

APIの設定項目

APIを有効にすると、API KEYとエージェントIDが発行されます。これらは後ほど使うため控えておきましょう。APIを使うにあたって、公開設定も忘れずに行いましょう。

D-IDのアカウントを作成

公式ページからトライアルアカウントを作成してください。

D-IDのプロフィールページから、API Keyを発行できますので、それを取得してください。

実装する

では、ここから実際に作って行ってみましょう。
以下が、HTMLの全容になります。

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Miibo Avatar Sample</title>
    <script src="https://cdn.jsdelivr.net/gh/miibo-ai/prototypes@0.0.1/miibo-avatar/miibo-avatar.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/recorderjs/0.1.0/recorder.min.js" integrity="sha512-Dc8aBUPSsnAiEtyqTYZrldxDfs2FnS8cU7BVHIJ1m5atjKrtQCoPRIn3gsVbKm2qY8NwjpTVTnawoC4XBvEZiQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <style>
<!--
#my-video {
    width: 512px;
    height: 512px;
}
-->
    </style>
</head>
<body>
    <video id="my-video" autoplay></video>

    <script>
        const miiboAvatar = new MiiboAvatar({
            container: "my-video",
            option: {
                miibo: {
                    api_key: "<miibo API-KEY>",
                    agent_id: "<miibo Agent-ID>",
                    user_id: "user",
                },
                d_id: {
                    key: "<D-ID API-KEY>",
                    service: "talks",
                    priority: "cost",
                    presenter:{
                        gender: "female",
                        image_url: "https://raw.githubusercontent.com/miibo-takumori/resorces/main/portorate-image.png",
                        idle_movie: "https://github.com/miibo-takumori/resorces/raw/main/portorate-idle.mp4",
                        loading_movie: "https://github.com/miibo-takumori/resorces/raw/main/portorate-loading.mp4",
                    }
                }
            }
        })
        
        miiboAvatar.autoRecognize();
    </script>
</body>
</html>

たったこれだけ！？ と思われた方もいらっしゃるのではないでしょうか？
これだけで、デモ動画と同じ事ができます。

option.miiboの中には、"miiboのアカウントを作成"で控えておいた、API-KeyとAgent-IDを、option.d_idの中には、"D-IDのアカウントを作成"で控えたAPI-Keyを入れてください
最後に、 index.html という名前で保存しChromeで開くと実際に動きます。

D-IDのpresenterには任意の画像が設定可能です。
このサンプルでは、DALL·E 3を使って作成した人物画像を使用しています。

運用コストと商用利用

最後にサービスを運用した時のコストについても触れておきます。
miiboもD-IDも契約するプランや会話内容によって前後しますので、目安としてお考えください。

・D-IDのLaunch 540 Creditsで契約した場合
このライブラリでは、D-IDのストリーミング機能を利用しているため、15秒までの720動画まで生成可能になります。

例えば、定型説明動画の最後にQ&Aセッションを行うと考え、1人につき平均3問答と考えると、240人分の質疑応答ができることになります。

この場合、月額 約25,000円（2/21時点）になります。
・¥ 9,800 - miibo スタンダードプラン
・$ 99 - D-ID Launch 360Credits

※ 従量課金制は、両方ともエンタープライズを検討する必要があります。

miiboの料金プラン

D-IDの料金プラン

商用利用に関しては、
・miiboは、いずれのプランでも可能
・D-IDは、Launch以上のプランで可能
　テキストや画像が商用利用可能な場合に限る
になります。

また、D-IDはプランによって、動画に付与される透かしが異なる点にも注意をしてください。（D-IDの料金プランのページ参照）

おわりに

AIと対面での自由な会話は、昨今の生成AIの凄まじい進化によって、より手軽に実現できるようになってきました。
仕事や生活にAIを溶け込ませていくために、対面での会話は重要性が高いです。その一方、どの企業もまだ使い方を確立できていないタイミングかと思います。

ぜひこの機会に、まずはトライアルとしてお試しください！

※ 記事内のjavascriptライブラリはデモ用であり、商用利用に適合する品質でない事に注意してください。
※ 動画内の応答時間は、利用するLLMモデル、返答内容、ネットワーク状況などにより変化します。

この記事が気に入ったらサポートをしてみませんか？