Zenn
👁️

Vision Bridge: AIで視覚障がい者支援を革新する - Google Cloudハッカソン優勝プロジェクトの軌跡

2025/02/12に公開
Next.js
Cloud Run
Google Cloud
生成 AI
Gemini
tech

この記事は2024年のハッカソン参加記録です。

参加したハッカソンの概要

2024 年 8 月 1 日 〜 9 月 23 日に Devpost 社主催、Google Cloud Japan 協賛で開催された「 AI Hackathon with Google Cloud 」では、数々の革新的なアプリケーションが誕生し、大きな盛り上がりを見せました。400 以上の応募から、優勝、第 2 位、第 3 位、Best of Media 賞、Best of Retail 賞、Best of SDGs 賞、Best of Entertainment 賞、Tech Deep Dive 賞、Moonshot 賞が決まりました。

プロジェクトの背景と動機

Vision Bridgeプロジェクトは、視覚障がい者が日常生活で直面する課題に対して、最新のAI技術でソリューションを提供することを目指して始まりました。世界保健機関（WHO）の報告によると、世界には22億人を超える視覚障がい者がいます。しかし、既存の支援技術の多くは高価で入手困難であり、また機能が限定的という課題を抱えています。

視覚障がいを持つ友人との対話を通じて、日常生活における具体的な困難 - 信号の色の判別、周囲の障害物の認識、文字情報の読み取りなど - を深く理解することができました。この経験から、最新のAI技術と音声インターフェースを組み合わせることで、より手軽で効果的な支援ツールを作れるのではないかという着想を得ました。

Vision Bridge は、Google Cloud AI Hackathon 2024 で開発されたプロジェクトで、最新の AI 技術を活用して視覚障がい者の日常生活をサポートする革新的なアシスタントアプリケーションです。

https://youtu.be/XHFn-MErwkU?si=JCPWWREJFPvDsxzS

機能概要

Vision Bridge は以下の主要機能を提供します：

  1. リアルタイム環境認識
  • カメラを通じて周囲の状況をリアルタイムで分析
  • 画像と動画の両方に対応し、即時のフィードバックを音声で提供
  • 障害物、人物、文字情報などを識別し、安全な移動をサポート
  1. ナビゲーション支援
  • 目的地までの最適な歩行ルートを音声でガイド
  1. オブジェクト認識
  • 特定の物体や文字を高精度で認識し、詳細情報を音声で提供
  • 商品ラベル、看板、メニューなどのテキスト読み上げ機能
  • 色彩情報の音声説明機能
  1. 音声コマンド操作
  • 高度な音声認識システムによる直感的な操作
  • カメラの起動、分析の開始/停止、ナビゲーションの開始などをすべて音声で制御
  • 自然言語での対話型インターフェース

アーキテクチャ設計

Vision Bridgeの設計にあたって、以下の3つの原則を掲げました：

  1. アクセシビリティファースト
  • ブラウザベースの実装による広い互換性の確保
  • 音声インターフェースを中心とした操作性
  • オフライン対応による安定した利用環境の提供
  1. AI処理の最適化
  • エッジとクラウドの適切な処理分担
  • レイテンシと精度のバランス調整
  • 状況に応じた柔軟なAIモデルの選択
  1. スケーラビリティとメンテナンス性
  • マイクロサービスアーキテクチャの採用
  • サーバーレスアーキテクチャによる運用負荷の軽減
  • 段階的なスケールアウトを考慮した設計

システム構成

フロントエンド

Next.jsをベースとしたプログレッシブウェブアプリケーション（PWA）として実装しました。この選択には以下の理由があります：

  • クロスプラットフォーム対応の容易さ
  • 高いパフォーマンスと最適化の容易さ
  • PWAによるオフライン対応と優れたモバイル体験

バックエンド

Google Cloud Platformのマネージドサービスを中心に構成：

  • Cloud Runによるコンテナ化されたバックエンドサービス
  • Cloud Functionsによるサーバーレス処理

AI/ML基盤

複数のAIサービスを組み合わせて、総合的な視覚支援を実現：

  • Vertex AI (Gemini)による高度な画像・動画分析、ナビゲーション情報の解釈
画像認識処理とプロンプト
anaylzeImage/index.js
const { VertexAI } = require('@google-cloud/vertexai');
const cors = require('cors')({origin: true});

const projectId = process.env.GCP_PROJECT_ID;
const location = 'asia-southeast1'; 
const model = 'gemini-1.5-flash-001';

if (!projectId) {
  throw new Error('GCP_PROJECT_ID environment variable is not set');
}

function createPromptForMode(mode, previousAnalysis) {
  const basePrompt = `前回の分析: "${previousAnalysis || '初回分析'}"\n\n`;
  
 const commonInstructions = `
あなたは視覚障害者のための視覚サポートAIアシスタントです。以下の指示に従って、与えられた画像を分析し、簡潔で明確な音声フィードバックを生成してください。

- 最も重要な情報（安全性、移動に関わる要素）を最優先で伝えてください。（例：交通信号、通行人、車両）。
- 環境の変化や新たに検出された物体に焦点を当て、前回分析との違いを明確にしてください。（例：信号が青から赤に変わった）。
- 位置情報を含め、ユーザーの空間認識を助ける具体的な表現を使用してください。（例：「2メートル先」「右手前」）。
- 各情報は15字以内の短文で伝えてください。
- 危険な状況や障害物を特に強調してください。
- 人物、テキスト、標識などの重要な視覚情報も含めてください。
- ハルシネーション（虚偽の情報）は絶対にしないでください。

**回答形式**:

- 重要度順に最大で3項目を箇条書きで出力してください。
- 各項目は15字以内の自然な日本語で記述してください。

**例**:
右2メートルに人物接近中。
左から自転車が接近中です。
信号が青から赤に変わった。とまってください。
前方障害物あり、注意してください。'
input: 夜の街の写真。信号機と交差点などが写っています
output: 右手前、信号赤色です。
交差点に近づいています。
前方に横断歩道があります。

上記の指示に従って、、音声フィードバックを生成してください。重要度順に箇条書きで出力してください。
`;

 switch (mode) {
    case 'normal':
      return basePrompt + commonInstructions;
    case 'detailed':
      return basePrompt + `
あなたは視覚障害者のための詳細な視覚サポートAIアシスタントです。ユーザーが特別に撮影した画像について、以下の指示に従って詳細な分析と説明を提供してください：

- 画像の全体的な構図と主要な要素を説明してください。
- 人物が写っている場合、その人数、位置、姿勢、表情、服装を述べてください。
- 物体や背景の色、形、テクスチャーなどの視覚的特徴を説明してください。
- 画像内のテキストや標識があれば、その内容と位置を正確に伝えてください。
- ハルシネーション（虚偽の情報）はしないでください。
- 安全性に関わる要素（障害物、危険な状況など）を特に強調してください。
- 空間的な関係性や距離感についても具体的に述べてください。
- 文字が検出された場合は、その意味を日本語で教えてください。

**回答形式**:

- 重要度順に最大で3項目を箇条書きで出力してください。
- 各項目は20字以内の自然な日本語で記述してください。

**例**:
男性が白いスプレーボトルがあります。- スプレーボトルには「Avène」と「Eau Thermale」の文字があります。日本語にするとアベンヌ温泉水という意味です。

上記の指示に従って、与えられた画像を分析し、音声フィードバックを生成してください。
`;
    default:
     return basePrompt + commonInstructions;
  }
}

exports.analyzeImage = (req, res) => {
  return cors(req, res, async () => {
    if (req.method !== 'POST') {
      res.status(405).send('Method Not Allowed');
      return;
    }

    try {
      const { imageData, analysisMode, previousAnalysis } = req.body;

      const vertexAi = new VertexAI({
        project: projectId,
        location: location,
      });

      const generativeModel = vertexAi.preview.getGenerativeModel({
        model: model,
        generationConfig: {
          maxOutputTokens: 8192,
          temperature: 1,
          topP: 0.95,
        },
        safetySettings: [
          {
            'category': 'HARM_CATEGORY_HATE_SPEECH',
            'threshold': 'BLOCK_MEDIUM_AND_ABOVE'
          },
          {
            'category': 'HARM_CATEGORY_DANGEROUS_CONTENT',
            'threshold': 'BLOCK_MEDIUM_AND_ABOVE'
          },
          {
            'category': 'HARM_CATEGORY_SEXUALLY_EXPLICIT',
            'threshold': 'BLOCK_MEDIUM_AND_ABOVE'
          },
          {
            'category': 'HARM_CATEGORY_HARASSMENT',
            'threshold': 'BLOCK_MEDIUM_AND_ABOVE'
          }
        ],
      });

      const prompt = createPromptForMode(analysisMode, previousAnalysis);

      const result = await generativeModel.generateContent({
        contents: [
          { role: 'user', parts: [{ text: prompt }] },
          { role: 'user', parts: [{ inlineData: { mimeType: 'image/jpeg', data: imageData.split(',')[1] } }] },
        ],
      });

      const response = await result.response;
      const generatedText = response.candidates?.[0]?.content?.parts?.[0]?.text ?? 'No text generated';

      res.status(200).json({ analysis: generatedText });
    } catch (error) {
      console.error('Error analyzing image with Vertex AI Gemini:', error);
      const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
      res.status(500).json({ error: 'Image analysis failed', details: errorMessage });
    }
  });
};
  • Speech-to-Text/Text-to-Speechによる自然な音声対話
  • Dialogflow を活用した高度な対話システム（ジェネレーター設定による柔軟な応答生成）
Dialogflow Generator Setting
Text Prompt: あなたは Vision Bridge アプリの視覚障害者向け音声ガイド AI アシスタントです。以下の指針に従って応答してください：

ユーザーの質問を正確に理解し、簡潔で分かりやすい言葉で答えてください。
アプリの機能説明は具体的で、操作手順を明確に伝えてください。
ユーザーの安全を最優先し、危険な行動を促す提案は絶対に避けてください。
ユーザーが困っている場合は、追加のガイダンスや代替方法を提案してください。
アプリの機能外の質問には、対応できない旨を丁寧に説明し、適切な代替案があれば提示してください。
会話の文脈を考慮し、自然な対話を心がけてください。
応答は 80 文字以内を目安とし、簡潔かつ情報量の多い内容を心がけてください。
必要に応じて適切なアクションを提供してください。

必ず JSON 形式で応答してください：

{
  "action": "アクション名",
  "fulfillmentText": "ユーザーへの応答テキスト",
  "parameters": {}
}
例： user:カメラを開始して response:

{
  "action": "startCamera",
  "fulfillmentText": "カメラを起動しました。",
  "parameters": {}
}
利用可能なアクション：

startCamera: カメラ起動
stopCamera: カメラ停止
captureImage: 画像キャプチャ
startAnalysis: 画像分析開始
stopAnalysis: 画像分析停止
toggleMode: 画像/ビデオモード切替
stopSpeaking: 音声出力停止
startNavigation: ナビゲーション開始
none: 特定のアクション不要
アプリの主な機能：

カメラ機能：周囲撮影
画像分析：状況理解と説明
ナビゲーション：目的地案内
モード切替：画像/ビデオモード
音声制御：読み上げ停止
このアプリの使い方は下記のように想定されています。

カメラを起動し、選択されている画像・動画モードで分析を開始します。デフォルトは画像モードです。
カメラに写っている画像は AI により分析され、分析結果は音声で読み上げられます。
カメラを起動しているときは、写真を撮影（もしくはキャプチャという）することで 1 枚の写真のより詳細な分析情報を確認できます。
ビデオ分析は、カメラ起動後分析開始ボタンをタップする録画が始まります。分析終了ボタンをタップすると録画は終了し、分析結果が読み上げられます。
具体的な回答例：

「カメラの使い方を教えて」と言われた場合： "カメラを起動するには「カメラ開始」と言ってください。停止するには「カメラ停止」です。画像を撮影するには「写真を撮って」と言ってください。"

「分析方法を教えて」と言われた場合： "画像分析を開始するには「分析開始」と言ってください。周囲の状況を理解し、説明します。停止するには「分析停止」と言ってください。"

「ナビの使い方を教えて」と言われた場合： "ナビゲーションを開始するには道案内の旨と目的地を教えてください。例えば、「東京駅までの道のりを教えて」と言ってください。位置情報の取得を許可してください。"

「アプリの使い方を教えてください」と言われた場合、 このアプリの使い方と流れをまとめて簡潔に回答してください。

これまでの会話履歴： $conversation

ユーザーからの最新の発言： $last-user-utterance

これらの情報を踏まえ、ユーザーの質問に対して適切で役立つ応答を生成してください。

外部API

  • Google Maps Platform の API を活用した正確な位置情報サービスとルート案内

CI/CD パイプラインの構築

  • Google Cloud Build を用いた継続的なデプロイメントの自動化

技術的課題と解決アプローチ

1. リアルタイム性の確保

課題: 視覚支援において、遅延は安全性に直結する重大な問題です。

解決策:

  • 画像処理の最適化（圧縮・リサイズ）
  • API呼び出しの効率化（バッチ処理・デバウンス）
  • エッジ処理とクラウド処理の適切な使い分け

2. 音声インターフェースの最適化

課題: ブラウザにおける音声APIの制限と、自然な対話体験の両立。

解決策:

  • Web Speech APIの制限を考慮した設計
  • Dialogflowによる高度な対話管理
  • 音声出力の優先度管理システムの実装

特筆すべき成果

1. AIモデルの革新的な活用

  • Geminiモデルを活用した高度な状況理解
  • マルチモーダル処理による総合的な環境認識
  • コンテキストを考慮した継続的な状況分析
  • Dialogflow と Text-to-Speech の統合により、自然でスムーズな対話型インターフェースの実現。ジェネレーターを設定し、あえてインテントを設定しないことで、ユーザーの意図をより正確に理解し、自然言語での柔軟な操作と対話を実現

2. ユーザー中心の機能設計

  • 視覚障がい者の具体的なニーズに基づく機能実装
  • 直感的な音声コマンドシステム
  • 安全性を考慮したフェイルセーフ設計

3. スケーラブルなアーキテクチャ

  • マイクロサービスベースの拡張性の高い設計
  • クラウドネイティブなリソース管理
  • 将来の機能追加を考慮したモジュラー設計

今後の展望

1. 技術的な発展

  • エッジAIの活用によるさらなる低レイテンシ化
  • ウェアラブルデバイス対応
  • iOS/Android ネイティブアプリの開発

2. ユーザー体験の向上

  • パーソナライズされたAI応答の実現
  • マルチモーダルフィードバックの強化
  • コミュニティ機能の実装
  • リアルタイムナビゲーションの実装

3. プラットフォームとしての発展

  • サードパーティ開発者向けAPIの提供
  • 他のアクセシビリティツールとの連携
  • オープンソースコミュニティの形成

Vision Bridge は、最新の AI 技術を活用して視覚障がい者の日常生活を支援するだけでなく、テクノロジーの民主化を通じて、誰もが平等に情報にアクセスできる社会の実現を目指しています。私は、このプロジェクトを通じて、技術の力で世界をより包括的で公平な場所にすることに貢献したいと考えています。

結論

Vision Bridgeプロジェクトは、最新のAI技術と Web技術を組み合わせることで、視覚障がい者支援に新しいアプローチを提示することができました。特に以下の点で意義のある成果を上げることができたと考えています：

  1. AIによる高度な環境認識と理解
  2. 直感的な音声ベースのインターフェース
  3. スケーラブルなクラウドアーキテクチャ
  4. 優れた拡張性と発展可能性

このプロジェクトを通じて、技術の力で社会課題を解決できる可能性を示すことができました。今後も継続的な改善と機能拡張を行い、より多くの方々の生活をサポートできるよう発展させていきたいと考えています。

後日談

Google Cloud 主催 Generative AI Summit Tokyo '24 Fall に登壇し、最優秀賞を受賞しました。
Google Cloud の皆さんは本当にいい人たちで、すごく楽しい思い出ができました！イベントの控室ではほかに登壇する業界を牛耳る方々とも交流でき、大変勉強になりました。

Google Cloudのブログに取り上げていただきました。
https://cloud.google.com/blog/ja/products/ai-machine-learning/innovative-apps-from-the-ai-hackathon?hl=ja

Hackathonに初参加した私でも、Google CloudやGeminiを使用することで、自分の思いついたソリューションを素早く実現することができました。この感動を同じく開発歴の短い方々に共有したく、この記事を遅ればせながら投稿しました。

今後ともよろしくお願いいたします！

追記：新たなチャレンジ

Zenn 主催 AI Agent Hackathon with Google Cloudに参加しました!

Google DeepMind の実験的プロジェクト「Project Astra」に触発され、Gemini 2.0 Multimodal Live APIを活用した対話型AIトラベルコンパニオン「WanderLens」を開発しました。

Vision Bridgeでの経験を活かしつつ、今回は異なるアプローチでチャレンジしました：

  • Gemini 2.0のMultimodal Live APIという最新技術の活用
  • AIエージェントとしての自律的な判断と行動の実装
  • リアルタイムな環境理解と自然な対話の実現

開発したプロジェクトの詳細は下記をご覧ください：
https://zenn.dev/yuulin/articles/632e987d8edc73

審査結果が出るまではまだ時間がかかりますが、たくさん優秀の作品から刺激を受けながら自己研鑽を頑張っていこうと思います！

最後まで読んでいただき、ありがとうございました！

Discussion