【ITニュース解説】I Built an AI That Judges Your Drawings

ITニュース概要

オンラインお絵かきゲームの判定に不満を感じた開発者が、AIが絵を採点するWebアプリ「Artbitrator」を開発。Next.js 14とWebRTCを使用し、リアルタイムな描画とAIによる採点を実現。最大8人同時プレイ可能で、描画データはWebRTCで共有、Azure Speech Servicesで実況も行う。現在ベータ版を公開し、フィードバックを募集中。

ITニュース解説

このニュース記事は、オンラインお絵かきゲームにおける不公平さを解消するために開発された、AIが絵を評価するWebアプリケーション「Artbitrator」について解説している。開発者は、オンラインお絵かきゲームで、上手く描けた絵が評価されず、知り合い同士で有利になる状況に不満を感じ、公平な評価を行うAIを開発することにした。 Artbitratorは、描いた絵をAIが即座に評価し、スコアを表示する。複数人で同時にプレイでき、全員が同じお題の絵を描き、最も高いスコアを獲得した人が勝利する。他のプレイヤーの描画過程をリアルタイムで観察できる機能も搭載されている。 このアプリケーションは、Next.js 14とWebRTCを用いて開発された。技術的な要素は主に以下の通り。 リアルタイムキャンバス同期: WebRTCを用いて、最大8つのHTML5キャンバス間で描画データをリアルタイムに同期する。描画データの遅延は100ミリ秒以下に抑えられており、描画イベントの差分圧縮によって帯域幅を最小限に抑えている。プレイヤーがゲームから離脱・再参加した場合でも、キャンバスの状態を復元できる。 WebRTCデータチャネル: ピアツーピアで描画データを伝送する。オプションでボイスチャット機能も統合可能。ネットワーク接続が途絶えた場合のフォールバックとしてTURNサーバーを経由する。 AI統合: クライアント側でキャンバス上の描画を画像に変換し、REST APIを通じてリアルタイムに画像分析を行う。AIは、正確さ、創造性、テクニックなどの複数の基準に基づいてスコアリングを行う。 ライブ解説システム: Azure Speech Servicesを用いて、テキスト読み上げによる解説を行う。AIが描画の進捗状況に基づいて解説を生成し、プレイヤーの行動やスコアをリアルタイムでナレーションする。 ゲーム状態管理: サーバー側でスコアリングとタイミングを管理し、リアルタイムでリーダーボードを更新する。プレイヤー認証とデータの永続化、招待コードによるルーム管理も行う。 パフォーマンス最適化: メモリ効率のためにキャンバスの仮想化を行い、変更された領域のみを選択的にレンダリングする。WebGLをサポートする環境ではWebGLによる高速化を行う。描画イベントのスムーズな処理のために、描画イベントのスロットリングも行う。 Artbitratorは現在ベータ版として公開されており、開発者はユーザーからのフィードバックを求めている。特に、WebRTC接続の安定性、キャンバスの描画パフォーマンス、AIによる評価の精度、ライブ解説の品質、バグやエッジケースに関するフィードバックを重視している。 開発者は、WebRTCを用いたリアルタイム通信や、Canvas APIを用いた描画処理、AIによる画像認識といった技術を組み合わせることで、クリエイティブなマルチプレイヤーゲームを実現できることを示している。 使用されている技術スタックは以下の通り。 フロントエンド: Next.js 14, TypeScript, Tailwind CSS リアルタイム通信: WebRTCデータチャネル + シグナリングサーバー キャンバス: HTML5 Canvas APIとカスタム描画エンジン AI: REST APIによる画像分析とスコアリング 音声: Azure Speech Servicesによるライブ解説 状態管理: Zustand (クライアント状態), PostgreSQL (データ永続化) 認証: Clerkによるユーザー管理 デプロイメント: Dockerコンテナによるクラウドインフラストラクチャ 開発者は、WebRTCを用いた同様のリアルタイムマルチプレイヤーWebアプリケーションを開発した経験のある開発者からの意見を求めている。