今年の Google I/O では、AI を活用した開発に役立つ新しい製品とツールを発表しました。また、デベロッパーの皆さんが、Google のツールの力を最大限に活用し、最も高性能な AI モデルをアプリやゲームに統合することで、ユーザーにとって素晴らしく革新的な体験を構築できるよう、Gemini API デベロッパー コンペティションを開始しました。このコンテストでは、カスタマイズした電気自動車バージョンのデロリアン（と多額の賞金）を獲得するチャンスがあります。

I/O クロスワードの遊び方

遊び方は次の通りです。

ステップ 1 : 4 つのマスコットからチームを選びましょう。選んだマスコットの色が、単語を解いたときにマスが変わる色になります。選んだチームの合計得点に各自のスコアが反映されます。

ステップ 2 : 次に、ボード上の好きな場所からスタートしましょう。

ステップ 3 : 単語が解けないときは、「ヒントを見る」ボタンを試してみてください。yes か no で回答できる質問を投げかけることで、解答に導きます。(最大 10 回まで) 

ステップ 4 : 連続で単語を解くほど、リーダーボードの順位が (チームでも個人でも) 上がります！スコアを投稿し、Google Developer Program のプロフィール用バッジを獲得しましょう。



ゲーム開発に活用した技術の裏側

Gemini: ブランドにとって安全で、時事性があり、クリエイティブなコンテンツ

I/O クロスワードを作成することが目的だったので、今年の I/O でグーグルが発表した内容を元に、単語やヒントを作成したいと思いました。そこで、Gemini Advanced に YouTube 上にアップロードされている Google I/O の基調講演 3 時間分を読み込んでもらい、I/O の製品発表を楽しく学ぶための、時事的な技術関連の単語とヒントを作成してもらいました。

Gemini アプリは、Google の最先端のAI モデルを誰でもすぐに利用できるよう、会話型インターフェースを通じて提供しています。今回私たちが Gemini Advanced を活用した主な理由は、他の多くの LLM と比較しても、ナレッジ カットオフが直近で、最新の情報をインターネットから取得できるためです。


Gemini API: Gemini モデルの機能を活用して、体験を構築する

しかし、本当にエキサイティングなのは、皆さん自身が同じ Gemini モデルを使ってさまざまなサービスを構築できることです。Gemini API を使用すると、Google の AI モデルを皆さんのアプリケーションに統合できます。今回のクロスワード パズルでは、エンゲージメントを高め、離脱を減らすために、Gemini API と Firebase Genkit を活用し、プレイヤーが行き詰まったときにゲームを続けられるように設計された「ヒント」機能を加えました。これらは、あらゆるアプリのバックエンドに AI 機能を簡単に追加できる新しいフレームワークです。 プレイヤーが「ヒントを聞く」ボタンをクリックして質問すると、Genkit フローが「はい」か「いいえ」で答えられるような質問を受け取り、関連する手がかりや過去の質問を収集、この情報を Gemini 1.5 Flash モデルに送信します。そして、ユーザーへの質問に「はい」か「いいえ」の回答をするように具体的に指示されたモデルは、プレイヤーを正しい単語へと導きます。 この機能の詳細については、Firebase ブログの詳しい記事 (英語) をご覧ください。



Flutter and Dart: インタラクティブなユーザー インターフェースとマルチ プラットフォーム パフォーマンス

ゲームの UI は Flutter で構築されています。Flutter のプラットフォームに対する柔軟性とパフォーマンスの高さは、ダイナミックでインタラクティブなゲームを構築する上で最適な選択でした。クロスワード ボードをレンダリングし、スムーズなナビゲーションを可能にするために、Flutter の InteractiveViewer ウィジェット (英語) を採用しました。このウィジェットは、大きなコンテンツ エリアでのパンやズームといったユーザー インタラクションを処理するように設計されているため、広大なクロスワード グリッドを探索するのに理想的でした。 このゲームは、プレイヤーが同じボード上で同時にプレイするコラボレーション体験を提供しているため、優れたゲーム体験を可能にするにはパフォーマンスがとても重要です。そのため、このゲームは Google I/O (英語) で Flutter ウェブアプリの Stable チャンネルに移行した WebAssembly (WASM) にコンパイルされています。InteractiveViewer ウィジェット内での行列変換の使用や、WASM が高いフレームレートを維持するために、どのように役立ったかといったトピックについての詳細は、ブログ (英語) をご覧ください。

Firebase: ホスティング、ボードのリセット、ゲーム体験の確保

Firebase は、バックエンド機能を提供するため、クロス プラットフォームで動作するさまざまなツールを提供しています。稼働中のアプリケーションは Firebase Hosting でホストされ、アプリケーションからのすべてのデータは Firestore に保存されます。Firestore はリアルタイムで動作し、世界中のユーザーがパズルを完成させるとライブ アップデートが保存され、ユーザーがゲームに参加したり離脱したりすると自動的にスケーリングします。 

クロスワードが完成すると、ボード全体がリセットされるため、ゲームは常にオン状態で、新しいユーザーが参加してもすぐにプレイできます。この機能は Cloud Functions for Firebase によって実現されています。 Flutter アプリが Firestore に直接アクセスする場合、App Check と anonymous auth を設定してリーダーボード API を保護し、認証されたユーザーだけがアクセスできるようにします。Firebase Authentication を使用すると、ゲームに参加するすべてのユーザーが匿名で認証され、個々のスコアを追跡し、リーダーボードに表示することができます。

Dart Frog and Cloud Run: フロントエンドとバックエンドのコード共有

Dart で構築されたバックエンドは、API コールの管理、データベースとの連携、Flutter アプリからのリクエスト処理を行います。Cloud Run は自動スケーリング機能を提供し、スムーズなユーザー エクスペリエンスを保証します。 

不正行為を防ぐため、Dart Frog (英語) バックエンドを採用しています。アプリは Firestore からデータを読み込むことができますが、変更を加えることができるのは Dart Frog バックエンドのみです。このアーキテクチャと認証メカニズムにより、フェアプレーが保証されます。

遊んでみよう

I/O クロスワードを実際に体験してください。ご興味のある方のために、コードはオープンソース化されています。私たちは、この事例を Gemini API デベロッパー コンテストで、皆さんの作品に活かしていただけることを楽しみにしています。 開発を始めるにあたって、開発プロセスをサポートするためのコンテンツ (英語) をご用意しました。ぜひご覧ください。
Posted by Tamao Imura - Developer Marketing Manager, Google Developer Marketing 



以下の記事に記載されている情報、用途、およびアプリケーションは、すべてゲスト著者の KDDI に帰属するものであることをご了承ください。

KDDI はバーチャル ヒューマン『メタコ』にテキスト読み上げ機能とクラウド レンダリング技術を統合


VTuber（バーチャル YouTuber）は、コンピュータ グラフィックスによって生成されたバーチャル アバターを使用するオンライン エンターテイナーです。このデジタル トレンドは 2010 年代半ばに日本で始まり、オンラインで国際的に活動する現象が起こりました。ほとんどの VTuber は、アバターのデザインを使用した YouTuber またはライブ配信者で、英語と日本語の両方を話します。


KDDI は、4,000 万人以上の顧客を持つ日本の通信事業者です。5G ネットワーク上に構築されたさまざまなテクノロジーの実験を通じて、VTuber のさらなる進化を支援したいと考えていましたが、正確な動きや人間らしい表情をリアルタイムで表現することは困難な課題でした。


リアルタイムでバーチャル ヒューマンを生成する
5 月の Google I/O 2023 で発表された MediaPipe のフェイス ランドマーカー (英語) ソリューションは、顔のランドマークを検出し、ブレンドシェイプ スコアを出力して、ユーザーの行動に即した 3D の顔モデルをレンダリングするものです。KDDI は、Google パートナー イノベーション チームと共同で MediaPipe フェイス ランドマーカー ソリューションを使用してテストを実施し、バーチャル ヒューマンに現実感をもたらすことに成功しました。


技術実装

KDDI のデベロッパーは、Mediapipe の強力で効率的な Python パッケージを使用することで、パフォーマーの顔の特徴を検出し、52 個のブレンドシェイプをリアルタイムで抽出できました。

import mediapipe as mp

from mediapipe.tasks import python as mp_python

MP_TASK_FILE = "face_landmarker_with_blendshapes.task"

class FaceMeshDetector:

    def __init__(self):

        with open(MP_TASK_FILE, mode="rb") as f:

            f_buffer = f.read()

        base_options = mp_python.BaseOptions(model_asset_buffer=f_buffer)

        options = mp_python.vision.FaceLandmarkerOptions(

            base_options=base_options,

            output_face_blendshapes=True,

            output_facial_transformation_matrixes=True,

            running_mode=mp.tasks.vision.RunningMode.LIVE_STREAM,

            num_faces=1,

            result_callback=self.mp_callback)

        self.model = mp_python.vision.FaceLandmarker.create_from_options(

            options)

        self.landmarks = None

        self.blendshapes = None

        self.latest_time_ms = 0

    def mp_callback(self, mp_result, output_image, timestamp_ms: int):

        if len(mp_result.face_landmarks) >= 1 and len(

                mp_result.face_blendshapes) >= 1:

            self.landmarks = mp_result.face_landmarks[0]

            self.blendshapes = [b.score for b in mp_result.face_blendshapes[0]]

    def update(self, frame):

        t_ms = int(time.time() * 1000)

        if t_ms <= self.latest_time_ms:

            return

        frame_mp = mp.Image(image_format=mp.ImageFormat.SRGB, data=frame)

        self.model.detect_async(frame_mp, t_ms)

        self.latest_time_ms = t_ms

    def get_results(self):

        return self.landmarks, self.blendshapes


Firebase Realtime Database に、52 個のブレンドシェイプに関する float 値のコレクションが格納されます。各行は、順番にリストされたブレンドシェイプに対応しています。 

_neutral, 

browDownLeft, 

browDownRight, 

browInnerUp,

browOuterUpLeft,

...


これらのブレンドシェイプ値は、カメラが起動して FaceMesh モデルが実行されている間、リアルタイムで継続的に更新されます。データベースは各フレームで最新のブレンドシェイプ値を反映し、FaceMesh モデルによって検出された顔の表情の動的な変化をキャプチャします。



ブレンドシェイプ データを抽出したら、次のステップではそのデータを Firebase Realtime Database に送信します。この高度なデータベース システムを活用することで、リアルタイム データがシームレスにクライアントに転送され、サーバーのスケーラビリティに関する懸念が解消されます。そのため KDDI は、ユーザー エクスペリエンスを効率化することに集中できます。


import concurrent.futures

import time


import cv2

import firebase_admin

import mediapipe as mp

import numpy as np

from firebase_admin import credentials, db


pool = concurrent.futures.ThreadPoolExecutor(max_workers=4)


cred = credentials.Certificate('your-certificate.json')

firebase_admin.initialize_app(

    cred, {

        'databaseURL': 'https://your-project.firebasedatabase.app/'

    })

ref = db.reference('projects/1234/blendshapes')


def main():

    facemesh_detector = FaceMeshDetector()

    cap = cv2.VideoCapture(0)


 while True:

        ret, frame = cap.read()


        facemesh_detector.update(frame)

        landmarks, blendshapes = facemesh_detector.get_results()

        if (landmarks is None) or (blendshapes is None):

            continue


        blendshapes_dict = {k: v for k, v in enumerate(blendshapes)}

        exe = pool.submit(ref.set, blendshapes_dict)


        cv2.imshow('frame', frame)

        if cv2.waitKey(1) & 0xFF == ord('q'):

            break


    cap.release()

    cv2.destroyAllWindows()

    exit()




さらに、デベロッパーは、ブレンドシェイプ データを Firebase Realtime Database から Google Cloud の Immersive Stream for XR インスタンスにリアルタイムでシームレスに送信します。Google Cloud の Immersive Stream for XR は、クラウド側で Unreal Engine プロジェクトを実行し、写真のようにリアルで没入感のある 3D や拡張現実（AR）エクスペリエンスをリアルタイムでスマートフォンやブラウザにストリーミングしてレンダリングするマネージド サービスです。


この統合により KDDI は、キャラクターのフェイシャル アニメーションを最小限のレイテンシでリアルタイムにストリーミングし、没入型のユーザー エクスペリエンスを確実に提供できるようになりました。



Immersive Stream for XR によって実行される Unreal Engine 側では、Firebase C++ SDK を使用して Firebase からデータをシームレスに受信します。データベース リスナーを確立することにより、Firebase Realtime Database のテーブルで更新が発生したらすぐにブレンドシェイプ値を取得できます。この統合により、最新のブレンドシェイプ データにリアルタイムでアクセスできるようになるため、Unreal Engine プロジェクトにおいて動的で応答性の高いフェイシャル アニメーションを実現できます。



Firebase SDK からブレンドシェイプ値を取得したら、アニメーション ブループリントの『Modify Curve』ノードを使用して、Unreal Engine でフェイシャル アニメーションを実施します。各ブレンドシェイプ値はフレームごとにキャラクターに割り当てられるため、キャラクターの表情をリアルタイムで正確に制御できます。



Unreal Engine にリアルタイム データベース リスナーを効果的に実装するには、代替のシングルトン パターンとして GameInstance サブシステムを利用します。これにより、データベース接続、認証、バックグラウンドでの継続的なデータ受信の処理を担う専用の BlendshapesReceiver インスタンスを作成できます。


GameInstance サブシステムを利用すると、BlendshapesReceiver インスタンスを作成して、ゲーム セッションの存続期間全体で維持できます。これにより、受信したブレンドシェイプ データを使用してアニメーション ブループリントがフェイシャル アニメーションを読み取って実施している間、永続的なデータベース接続が確保されます。


KDDI は、MediaPipe を実行するローカル PC 1 台だけで、実際のパフォーマーの表情と動きをキャプチャし、質の高い 3D リターゲット アニメーションをリアルタイムで作成することに成功しました。




KDDI は、株式会社アダストリアなどのメタバースのアニメ ファッションのデベロッパーと提携しています。

はじめに

詳細については、Google I/O 2023 の次のセッションをご覧ください (動画/英語 日本語の自動字幕あり) : MediaPipe を使った簡単なオンデバイス機械学習、機械学習と MediaPipe でウェブアプリを強化する、機械学習の新機能。また、developers.google.com/mediapipe (英語) で公式ドキュメントをご確認ください。

次のステップ
この MediaPipe 統合は、誰もがクリエイターになりうるエコシステムを構築し、現実と仮想を軽やかに行き来する新世代のユーザーに寄り添うための KDDI の取り組みの一例です。KDDI の αU は、メタバース、ライブ配信、バーチャル ショッピングなど Web3 時代のサービスを提供します。


Reviewed by Bryan Tanaka - Program Manager, Google Partner Innovation