小児のアクセシビリティの拡大: Eye Aim Arena が Google WebAI エコシステムを活用する方法- LiteRT.js
1数か月前に公開7712

小児のアクセシビリティの拡大: Eye Aim Arena が Google WebAI エコシステムを活用する方法- LiteRT.js + メディアパイプアイリス

写真[1]-小児のアクセシビリティの拡大: Eye Aim Arena が Google WebAI エコシステムを活用する方法- Windows 7、8、10、11 用 LiteRT.js - Winpcsoft.com

1. 導入: 小児眼球運動療法におけるアクセシビリティの重要性

眼球運動視覚トレーニングは、小児の理学療法および作業療法の基本的な柱です, 特に脳性麻痺などの複雑な神経発達障害や身体障害のある子供たちにとって, 痙縮, および皮質視覚障害 (CVI). 視線追跡やインタラクティブなターゲット練習のための従来の臨床ソリューションは、歴史的に専門的なツールに依存してきました。, 独自のハードウェアスイート. これらの閉鎖的なシステムは、教育機関や家族にとって経済的および物流上の厳しい障壁となっています。.

この課題に対処するには, アイエイムアリーナ クライアント側で提供する, 最新の Web ブラウザでネイティブに実行される、リアルタイムの視線制御フレームワーク. ソフトウェアエンジニアと教育研究者によって開発されました。 香港信息大学 (汗), このプラットフォームは標準の Web カメラ ハードウェアを活用して、正確な視線推定を実現します。. オープンソースの機械学習フレームワークをブラウザ内で直接使用することにより、, このアプリケーションは、外部ハードウェアを必要とせずに、忠実度の高い眼球運動トレーニングを提供します。.

システム構造は低摩擦として機能します。, 小児リハビリテーションのための臨床的に実行可能なツール. 継続的なゲームベースのタスクを通じて, ゲームは視覚的な追跡の発達に役立ちます, 固定, 視覚と運動の調整, 反復性の高い筋力強化エクササイズを魅力的なデジタル体験に変える.

今すぐゲームをプレイしてください — https://wongcyrus.github.io/Eye-Aim-Arena/

写真[2]-小児のアクセシビリティの拡大: Eye Aim Arena が Google WebAI エコシステムを活用する方法- Windows 7、8、10、11 用 LiteRT.js - Winpcsoft.com

2. システムアーキテクチャと処理パイプライン

Eye Aim Arena の中核となる運用パラダイムは、厳密にクライアント側の実行モデルです。. すべての視覚的推論を行うことによって, ユーザー視線マッピング, ブラウザ内でローカルに言語モデルを生成, アプリケーションは遅延ゼロの実行を実現します, クラウドホスティングコストを軽減します, 患者の絶対的なプライバシーを保証します.

以下のブロック図は、データジャーニーとフィードバックループをマッピングしています。:

写真[3]-小児のアクセシビリティの拡大: Eye Aim Arena が Google WebAI エコシステムを活用する方法- Windows 7、8、10、11 用 LiteRT.js - Winpcsoft.com

この多層実行パイプラインは、6 つの異なる運用ステップを通じて分析されます。:

  1. 実行時の初期化: システム設定, 校正データ, ボリューム レベルは localStorage から解析され、追跡エンジンのパラメータとインターフェイス構成が定義されます。.
  2. ウェブカメラ入力処理: 選択したカメラ デバイスからリアルタイム フレームがキャプチャされます (カメラ選択) そして、安全なコンテキスト内のアクティブなコンピューター ビジョン トラッキング ライブラリに直接渡されます。 (HTTPS/ローカルホスト).
  3. トラッキング & 座標マッピング: アクティブな追跡ライブラリ (Google MediaPipe Iris または WebGazer.js) 解剖学的ランドマークベクトルを検出して生の画面視線座標を生成します.
  4. フィルタリングと信号処理: 生の座標はアフィン変換を受けます, 指数移動平均 (EMA) スムージング, 軸反転チェック (invertXCheckbox/invertYCheckbox), および感度スケーリング.
  5. インタラクティブなゲームループ: 洗練された座標により衝突検出が促進される, スコア計算, 状態遷移, 各アニメーション フレームでのカスタム アセット レンダリング.
  6. Aria Edge AI コパイロットの実行: ゲームプレイイベント (トラッキングジッターなど, 縞模様, または見逃します) 優先イベントキューに送信されます. このキューは、WebGPU 経由でローカル LiteRT-LM フレームワークにフィードし、音声による治療フィードバックを動的に生成します。.

この複雑な構造をオフラインで実行するには, アプリケーションはクリーンなファイル システムとローカル ストレージ レイアウトを維持します。:

写真[4]-小児のアクセシビリティの拡大: Eye Aim Arena が Google WebAI エコシステムを活用する方法- Windows 7、8、10、11 用 LiteRT.js - Winpcsoft.com

3. コンピュータビジョンおよび空間アライメントキャリブレーションエンジン

さまざまな計算プロファイルと物理環境に対応するため, システムは、trackingModeSelect を介して 2 つの主要な追跡ライブラリを切り替えることができます。. これらの追跡モードの操作上の違いは、臨床上のトレードオフを浮き彫りにします。:

写真[5]-小児のアクセシビリティの拡大: Eye Aim Arena が Google WebAI エコシステムを活用する方法- Windows 7、8、10、11 用 LiteRT.js - Winpcsoft.com

アフィン変換による空間マッピング

トラッキング ライブラリから派生した生のピクセル視線ベクトルを画面空間のピクセル座標に変換するには, キャリブレーションが成功すると、システムは 9 点アフィン変換行列を計算します。. 数学的マッピングは次のように定義されます。:

写真[6]-小児のアクセシビリティの拡大: Eye Aim Arena が Google WebAI エコシステムを活用する方法- Windows 7、8、10、11 用 LiteRT.js - Winpcsoft.com

このマトリックスは、任意の頭とカメラの形状を標準の 2 次元モニター座標にマッピングします。, ソフトウェアが中心から外れたウェブカメラを考慮できるようにする, 画面の回転, そして傾いた姿勢.

実装リファレンス (js/calibration.js)

この変換行列は座標解決パイプライン内の js/calibration.js で評価および実行され、トラッキング入力を DOM ビューポート空間に変換します。:

// js/calibration.js にあります
関数transformGaze(ソーX, 生々しい, マトリックス) {
    const screenX = 行列.a11 * ソーX + マトリックス.a12 * 生々しい + マトリックス.a13;
    const screenY = 行列.a21 * ソーX + マトリックス.a22 * 生々しい + マトリックス.a23;
    戻る { ×: スクリーンX, y: スクリーンY };
}

結果の 9 点キャリブレーション マトリックスは、完了時に自動的に localStorage に書き込まれます。, メインメニューに「校正済み ✅」バッジを表示し、その後の治療セッション中に再校正する必要がなくなります。.

https://Medium.com/media/b3f7e013695eae7c8f61f5324370759c/href

事前校正セットアップ ガイダンス チェックリスト

キャリブレーション中の物理的なトラッキングエラーを最小限に抑えるには, インターフェースにはオプションのチェックリストモーダルが表示されます (showCalibrationGuideチェックボックス) 物理的な位置調整のための説明書付き:

写真[7]-小児のアクセシビリティの拡大: Eye Aim Arena が Google WebAI エコシステムを活用する方法- Windows 7、8、10、11 用 LiteRT.js - Winpcsoft.com

4. 震えの軽減と意図的な動作のためのデジタル信号処理

指数移動平均による振戦の軽減

運動障害のある小児患者, 脳性麻痺など, 急速なけいれん性眼球運動と微小な震えを示す. 視線レティクルを安定させ、急激な視線の変化を防ぐため, ターゲットインターフェイスのイライラするような揺れ, 追跡パイプラインは構成可能な指数移動平均を実装します。 (EMA) 平滑化アルゴリズム:

写真[8]-小児のアクセシビリティの拡大: Eye Aim Arena が Google WebAI エコシステムを活用する方法- Windows 7、8、10、11 用 LiteRT.js - Winpcsoft.com

ここで、St は最終的な安定化された座標を表します, Yt は、アクティブな追跡ライブラリから抽出された生の視線座標です。, アルファはユーザーの設定プロファイルから導出される可変平滑化係数です:

実装リファレンス (js/eyetracker.js または js/game.js)

この DSP ロジックは、不規則な動きをスケールダウンするための標準のフレームベースの更新ステップとして実装されています。:

// js/eyetracker.js または js/game.js にあります (視線スムージングのアップデート)
関数スムーズ座標(ソーX, 生々しい, 最後X, 最後に, アルファ) {
    const 平滑化X = アルファ * ソーX + (1.0 - アルファ) * 最後X;
    const 平滑化Y = アルファ * 生々しい + (1.0 - アルファ) * 最後に;
    戻る { ×: 平滑化X, y: 平滑化されたY };
}

重震フィルタリング モードは、入ってくる高周波信号を大幅に減衰させます。, 軌道の一貫性を優先し、首の動きがけいれんしているユーザーでも持続的にターゲットに集中できるようにします。.

目のアスペクト比による意図的な瞬きの検出

まばたき検出を利用する撮影モードに設定されている場合, システムは解剖学的目のアスペクト比を計算します (耳) 上まぶたと下まぶたをマッピングする 6 つの座標点に基づいて:

写真[9]-小児のアクセシビリティの拡大: Eye Aim Arena が Google WebAI エコシステムを活用する方法- Windows 7、8、10、11 用 LiteRT.js - Winpcsoft.com

ここで、p1 と p4 は水平方向の目尻を表します, 残りの座標ペアはまぶたの垂直境界を示します。.

実装リファレンス (js/eyetracker.js)

このアイ ジェスチャ パーサーは、各アニメーション フレームの垂直方向と水平方向の比率を評価します。:

// js/eyetracker.js にあります
関数calculateEAR(p1, p2, p3, p4, p5, p6) {
    constvertical1 = Math.hypot(p2.x - p6.x, p2.y - p6.y);
    constvertical2 = Math.hypot(p3.x - p5.x, p3.y - p5.y);
    const 水平 = Math.hypot(p1.x - p4.x, p1.y - p4.y);
    戻る (縦1 + 垂直2) / (2.0 * 水平);
}

物理的なまばたきが鋭い音を引き起こします, EAR 値が個別のしきい値を下回る一時的な低下, タクトスイッチを必要とせずに物理的な入力を可能にする.

適応型インタラクションと滞留メカニズム

まばたきがしっかりできない患者様へ, システムの特徴は、 ドウェルトリガー 設定された期間、視線レティクルをターゲット上にホバリングするとショットが登録されるモード:

  • トリガータイミングのプリセット: 臨床医は事前設定された滞在場所から選択可能, ショート含む (0.5s), 中くらい (0.8s), そして長い (1.2s).
  • カスタム滞留時間スライダー: 高度な臨床シナリオ向け, システムはスライダーを提供します (視線滞留スライダー) ドウェルトリガーの調整 1.0 に 4.0 0.25秒刻み. これは、意図的な治療が必要な患者に役立ちます, ゆっくりと焦点を合わせる視覚目標トレーニング.
  • 安全領域マージンの制約: 可動域が制限されているユーザーに対応するため, システムはターゲットが画面の端近くにスポーンするのを制限できます (最大で安全なエリアマージンを選択します 38% 差し込み), ターゲットを快適な範囲内に保つ, 狭い視野.

5. アリア: Adaptive Edge LLM セラピストと動的難易度調整

アリアの統合, 地元の AI 適応療法士, リハビリテーション ゲーム デザインにおける Edge AI の高度な実装を表す. LiteRT.js 経由でローカルで実行し、WebGPU API を利用する, Aria はリアルタイムとして機能します, コンテキスト認識型デジタルコーチ.

写真[10]-小児のアクセシビリティの拡大: Eye Aim Arena が Google WebAI エコシステムを活用する方法- Windows 7、8、10、11 用 LiteRT.js - Winpcsoft.com

動的臨床調整

Aria はゲームプレイ中にテレメトリ ログを評価し、システム設定をリアルタイムで変更します, プレーヤーのフラストレーションを防ぎ、身体の進歩を促進します:

  • 動的難易度調整 (DDA): テレメトリ ストリームが登録されている場合 2回連続ターゲットミス, システムはターゲットの寸法を即座にスケールします。 1.6× 彼らの標準的なサイズ, 物理的な視線の当たり判定を拡大する. 子どもが登録したら 6連続ヒット成功, スケーリング係数は次の値に戻ります 1.0× 精密なモーター精度を促進するため.
  • 自動トレマーフィルタリング適応: システムが持続的な高振幅の視線のジッターを検出した場合、 連続4秒間, 自動的に関与します ヘビーゲイズスムージング フィルター. これにより視線レティクルが安定し、患者は手動による臨床調整を行わずに快適に照準を合わせることができます。.

プロンプトインジェクションとシステムペルソナのカスタマイズ

セラピストは設定パネルを通じて Aria の仮想コーチング スタイルをカスタマイズできます (aiシステムプロンプト). システムは、ローカル Gemma モデルを実行する前に、このプロンプトをリアルタイムのゲームプレイ メトリクスとマージします。 [引用する: 6]. プロンプトの構造は次のように構成されています:

[システム命令の境界]
あなたはアリアです, ティミーに話しかける温かい理学療法士. 彼は恐竜が大好きです. 
応答を以下に保持します 15 言葉, 非常に励ましの口調を維持する, マークダウンは使用しないでください.
[コンテキスト境界]
現在のイベント: ユーザーは 2 回連続でターゲットを外しました. 
システムアクション: 照準を合わせやすくするためにターゲットを 1.6 倍のサイズに拡大.
[世代の境界]
Aria's Speech Output:

これにより、理学療法戦略と個別の臨床目標が融合されます。. 結果として得られる音声出力は、アクティブなインターネット接続を必要とせずに、サポート的で医学的に関連したままになります。 .

さまざまなクライアント デバイス間でローカル推論パフォーマンスを最適化するには, 設定パネルには詳細なパラメータコントロールが用意されています:

写真[11]-小児のアクセシビリティの拡大: Eye Aim Arena が Google WebAI エコシステムを活用する方法- Windows 7、8、10、11 用 LiteRT.js - Winpcsoft.com

https://Medium.com/media/f4cf5bb9e9922f22afa8de5b073c1965/href

6. 視聴覚アクセシビリティと小児用カスタマイズ プロファイル

多言語音声アシスタントのヒューリスティック

反復療法セッション中に幼児のやる気を引き出すため, このゲームは音声アシスタントを採用しています (音声ガイドチェックボックス) クライアント側の JavaScript ヒューリスティック アルゴリズムを使用して、フレンドリーなものを自動的に見つけて選択します。, natural-sounding female voices on the user's operating system:

  • 音声選択パイプライン: ネイティブ Web Speech API を使用して、利用可能なシステム音声をヒューリスティック クエリします。 (window.speechSynthesis.getVoices()).

ヒューリスティックスコアとペナルティ: 音声プロパティをスキャンします (メタデータ文字列とロケール) 特定のプラットフォーム固有のキーワードに一致する:

macOS / iOS: 広東語の Sin-ji や中国語の Mei-Jia など、高品質の音声を優先します。.

窓 / マイクロソフトエッジ: 最新のオンライン音声を選択, Microsoft Hiuting Online を含む (自然) 広東語および Microsoft Tracy Online 用 (自然) 北京語用.

  • Google Chrome / アンドロイド: 広東語の出力を Google にルーティングします.
  • デフォルトのような単語を含む音声名に負の重みを適用します。, 男, またはロボットによるフォールバックで快適な生活を保証します, ソフトな小児エクスペリエンス.

ターゲットのカスタマイズとオーディオアセットの最適化

ローカル IndexedDB ストレージ レイヤーの使用, 親とセラピストは、カスタム画像と背景トラックをゲームのインターフェイスに直接アップロードして、子供たちの関心を維持できます。:

  • カスタムグラフィックの統合 (ターゲット画像アップロード): ユーザーは最大までアップロードできます 10 PNG, JPG, または WebP 画像 (最大 2 ファイルあたり MB) IndexedDB に直接アクセスしてデフォルトのターゲットを置き換えます. カスタム ターゲットが存在しない場合、ゲームは自動的に標準のビジュアル バブルに戻ります。.
  • カスタム BGM (bg音楽アップロード): MP3 オーディオ ファイルのアップロードをサポートします。 20 MB. Music automatically pauses and resumes with the game's state, 音量レベルは専用のスライダーで設定できます (bg音楽音量スライダー).
  • ビジュアルテーマの選択 (ターゲットテーマ選択): 事前設定されたテーマ テンプレートをすばやく切り替えることができます。, 含む パステルバブル, 人懐っこい動物たち, またはハイコントラスト 輝く星 視覚障害のあるユーザー向けに設計されています.
  • ハイコントラストキャンバスオプション (ゲームテーマ選択): 高コントラストを実現 白黒 または ブルー＆ライムグリーン CVI または色覚異常のある子供が背景のキャンバスからインタラクティブな要素を区別できるようにするテーマ.

7. テレメトリ分析, 診断ヒートマップ, および臨床輸出

理学療法における大きな課題は、客観的な目標を達成することです, 患者の運動制御の経時的な進行を示す定量化可能な指標. Eye Aim Arena は、ゲームプレイの追跡座標を診断テレメトリに変換することでこの問題を解決します。.

https://Medium.com/media/d6529430d9ec4e13309e4df319dc405e/href

マルチモードのクリニカルフォーカス

このアプリケーションは、特定の治療目標に合わせて調整された 4 つのターゲット追跡構造を備えています。:

写真[12]-小児のアクセシビリティの拡大: Eye Aim Arena が Google WebAI エコシステムを活用する方法- Windows 7、8、10、11 用 LiteRT.js - Winpcsoft.com

ビジュアルヒートマップとテレメトリのエクスポート

各ゲームセッションの終了時, 追跡データは診断処理を受けてセッションレビューパネルを生成します:

  • インタラクティブな視線ヒートマップ: ゲームは、画面の座標フィールドにオーバーレイされた視線パスの視覚的表現をレンダリングします。, 患者の目が残っているクラスターをマッピングする, 追跡された, または集中するのに苦労しました.
  • ビジュアル テレメトリのエクスポート: 実践者は、処理されたヒートマップを PNG 画像としてエクスポートして、視覚的にすばやく参照できます。.
  • 未加工のテレメトリ ログ (CSV): システムのエクスポートが完了しました, タイムスタンプ付きの座標リスト (計算された画面位置 X および Y とともにミリ秒間隔を記録します), 臨床医が患者データを分析ソフトウェアにインポートして、運動能力の回復を長期的に深く評価できるようにする.

8. 導入, セキュリティフレームワーク, およびコンプライアンス分析

最新のブラウザでは Web カメラのアクセスが安全なコンテキストに制限されているため、, ローカル デプロイメントは HTTPS または localhost 経由で実行する必要があります. これは、バンドルされているserve_https.pyサーバースクリプトによって管理されます。:

# serve_https.py にあります
http.server をインポートする
インポートSSL
サーバーアドレス = ('localhost', 8000)
httpd = http.server.HTTPServer(サーバーアドレス, http.server.SimpleHTTPRequestHandler)
context = ssl.create_default_context(ssl.Purpose.CLIENT_AUTH)
context.load_cert_chain(certfile="cert.pem", keyfile="key.pem")
httpd.socket = context.wrap_socket(httpd.ソケット, サーバー側=真)
印刷する("Secure server active at https://ローカルホスト:8000")
httpd.serve_forever()

生産用, リポジトリをフォークし、GitHub Pages を有効にすることで、このアプリケーションを実行できます。.

リアルタイム顔追跡の実行, 物理計算, クライアント側のニューラル言語推論, ブラウザ内でテキスト読み上げエンジンを同時に使用すると、固有のリソース要求が発生します. アプリケーションは、ハードウェア アクセラレーション API を通じてこれらに対処します。:

写真[13]-小児のアクセシビリティの拡大: Eye Aim Arena が Google WebAI エコシステムを活用する方法- Windows 7、8、10、11 用 LiteRT.js - Winpcsoft.com

WebGPU並列処理

WebGPU規格を活用することで, LiteRT.js は、Gemma LLM の大量の行列計算をシステムのグラフィックス カードに直接オフロードします。, CPUのメインスレッドを解放する [引用する: 6]. これにより、ゲーム ループがターゲットのレンダリングをスムーズに継続できるようになります。 60 1秒あたりのフレーム数, 追跡エラーや患者の視覚的不快感を引き起こす可能性のある遅延スパイクを防止します。.

スマートモデルキャッシング

各治療セッションの前にダウンロード時間が長くなるのを防ぐため, ブラウザのキャッシュ ストレージ API は、最初のダウンロード時にモデルの重みと構成ファイルを保存します。. これにより、アプリケーションは即座に起動し、教室や遠隔診療所でも完全にオフラインで実行できるようになります。.

絶対的なセキュリティと規制遵守

ゲームは視線データの処理や AI テキストの生成をクラウド サービスに依存しないため、, 本質的に多くの複雑な規制上のハードルを回避します . 患者の生体座標と顔のビデオ フレームがローカル デバイスから離れることはありません, HIPAA や GDPR などのプライバシー法との完全な整合性を確保する. これにより、学校にとってツールが使いやすくなります, 病院, 複雑なデータ処理契約なしで導入できるクリニック.

9. 結論: エッジインテリジェンスによるリハビリテーション支援の変革

Eye Aim Arena は、最新の Web フレームワークを組み合わせる方法を示します, エッジコンピューティング, クライアント側の機械学習は、アクセス可能な健康ツールに革命をもたらす可能性があります. 軽量の視線追跡と、応答性の高い難易度スケーリングおよび心地よい AI セラピストを統合することにより、, このアプリケーションは、消費者向けウェブカメラが小児運動リハビリテーションにおいて高価な医療ハードウェアをうまく​​置き換えることができる方法を示しています。.

スマートなゲームデザインのエレガントな融合を実現, エッジAI, と臨床的有用性, このプラットフォームは、現代のシステムにとって非常に効果的なモデルとして機能します。, アクセス可能な支援技術.

GitHub リポジトリ — https://github.com/wongcyrus/Eye-Aim-Arena

著者について

写真[14]-小児のアクセシビリティの拡大: Eye Aim Arena が Google WebAI エコシステムを活用する方法- Windows 7、8、10、11 用 LiteRT.js - Winpcsoft.com

サイラス・ウォン の上級講師です 香港信息大学 (汗) @ ライブ(リー・ワイ・リー).彼はパブリック クラウド テクノロジの教育に重点を置いています. 彼は、さまざまなメディアやイベントにおけるクラウド テクノロジーの導入を熱心に支持しています。. 彼の豊富な知識と専門知識により、, 彼は次のような権威ある評価を獲得しています AWS AI ヒーロー, マイクロソフト MVP — マイクロソフトファウンダリー, そして Google デベロッパー エキスパート — クラウド(AI).

blank

小児のアクセシビリティの拡大: Eye Aim Arena が Google WebAI エコシステムを活用する方法- LiteRT.js はもともと Google Developer Experts on Medium で公開されました, 人々がこのストーリーをハイライトして応答することで会話を続けている場所.

ニュースを検索
ニュース
ニュースを検索
テーマのドキュメント