GCP で画像文字起こしアプリを作る(FastAPI, React)

要旨

GCP で画像文字起こしアプリ Giovanni を作成したので概要メモ
具体的な作りも後々記事にしていきます。

サンプル画像

TBD
バックエンド編
フロントエンド編
GCP 編(CloudRun, CloudBuild, Artifact Registry)

構成

バックエンド

• FastAPI(Python)
• CloudFunction(Go)

フロントエンド

• React+Next(JS)

外部API, Storage

• VisionAPI(文字起こしのため)
• FireStore(文字起こしデータ保存のため)
• Cloud Storage(画像データ保存のため)

シーケンス

画像文字起こしアプリでの処理の流れは以下のようになっています。

1. ユーザーがブラウザ上から画像ファイルをアップロード
2. API サーバーから CloudStorage へ画像ファイルをアップロード
3. ファイルアップロードをトリガーとして、CloudFunction 起動
4. CloudFunction で画像からテキスト抽出
   1. 画像ファイルを CloudStorage から取得
   2. 画像ファイルを Vision API へ送信してレスポンスとして画像中のテキスト情報を取得
   3. テキスト情報を FireStore へ保存
5. ファイルアップロード・解析完了後、ユーザーはブラウザ上で結果を確認
6. 不備があれば編集して保存(ブラウザから API サーバーへ更新リクエスト)
7. API サーバーから FireStore へテキスト情報の更新リクエスト

バックエンドでやること

API サーバー

• ファイルアップロード
• テキスト情報取得/更新(削除も今後実装予定)

CloudFunction

• CloudStorage から画像ファイル取得
• Vision API に画像を送信してテキスト情報を取得
• FireStore へテキスト情報を保存

フロントエンドでやること

• Google アカウントでのログイン
• ユーザーのアカウントページの表示
• 画像のアップロード
• ユーザーのアップロードした画像とテキスト情報の表示
  (ポーリングして一定間隔で定期的に取得)
• 文字起こしされた文字列の編集