🖼️

【第4回 Agentic AI Hackathon with Google Cloud】English Visualizer の紹介

に公開
AI
Google
Gemini
tech

はじめに

個人開発で英語学習アプリを作っている際、最も頭を悩ませられるのが「学習用イメージの素材集め」です。

フリー素材で探すと画風がバラバラになり、統一感が損なわれてしまいます。かといって、全てのイラストを依頼するのは個人開発では予算的に不可能です。

そこで、「CSVで英文を流し込んだら、統一された画風でイラストを全自動生成してくれるツール」 を自作しました。

今回は、Google Gemini 活用して開発した English Visualizer の技術スタックと工夫した点を紹介します。

English Visualizer とは？

English Visualizer は、リスト化された英文に対し、指定した画風（スタイル）で挿絵をバッチ生成する Web アプリケーションです。

主な特徴は以下の3点です。

  1. 一貫性のあるスタイル維持: プロンプトに共通の「スタイル記述（例：教材用マンガ風、水彩画風）」を埋め込むことで、生成される全画像のトーンを統一します。
  2. ブラウザ完結のバッチ処理: IDと英文の CSV を読み込ませるだけで、バックグラウンドで次々と画像を生成します。
  3. ローカルファースト: 生成された画像データはブラウザの IndexedDB に保存されます。サーバー代をかけず、プライバシーも守られる設計です。

技術スタック

  • Frontend: React 19, TypeScript, Vite
  • UI Framework: Tailwind CSS
  • AI Model: Google Gemini (gemini-2.5-flash-image)
  • Storage: IndexedDB (dexie.js などのラッパーは使わず、軽量な独自ラッパーを実装)
  • Export: JSZip (ブラウザ内で ZIP 圧縮してダウンロード)

開発のポイント

1. Gemini 2.5 Flash Image による高速生成

画像生成モデルには、Google の gemini-2.5-flash-image を採用しました。
以前のモデルや他社モデルと比較して、以下の点でこのツールに最適でした。

  • 生成速度: バッチ処理で数百枚を生成するため、1枚あたりの生成速度が重要です。Flash モデルは非常に高速です。
  • プロンプトへの忠実性: 「文字を含めないで（negative prompt）」や「教材風のスタイルで」という指示に対し、比較的素直に従ってくれます。

コード上では、ユーザーが入力した英文とスタイル設定を組み合わせて、以下のようなプロンプトを動的に構築しています。

// services/geminiService.ts (抜粋)
const contents = {
  parts: [
    { 
      text: `Create an image for the English sentence: "${text}". 
             Style: ${styleGuidance}. 
             Ensure the tone and manner matches the described style. 
             Do not include any text, words, or letters in the image...` 
    }
  ]
};

2. IndexedDB を活用した永続化

生成された画像は Base64 形式などで受け取りますが、大量の画像を React の State だけで管理するとメモリが溢れてしまいます。また、生成には時間がかかるため「途中でブラウザを閉じても再開できる」ことが必須要件でした。

そこで、ブラウザ標準の IndexedDB を利用し、生成されたそばからハードディスク（ブラウザ領域）に保存する仕様にしました。これにより、数千枚規模のデータでもブラウザがクラッシュすることなく、スムーズな無限スクロールを実現しています。

3. データのポータビリティ（バックアップと ZIP 出力）

Web アプリケーションですが、データはユーザーの手元にあるべきという思想で設計しました。

  • ZIP エクスポート: JSZip を使い、生成された画像を ID.png というファイル名で一括ダウンロードできます。これにより、Anki デッキや自作アプリへの組み込みが容易になります。
  • 独自バックアップ (.evb): 作業状態そのものを JSON ベースで書き出し、別の PC で復元できる機能を実装しました。

まとめ

AI の進化により、英語学習アプリの開発者が直面していた「素材作成の壁」は劇的に低くなりました。

特に gemini-2.5-flash のような高速・安価（または無料枠あり）なモデルの登場は、EdTech 分野での個人開発を大きく加速させると感じています。

もし興味があれば、GitHub でリポジトリを公開していますので覗いてみてください。

https://github.com/t-cool/English-visualizer

https://youtu.be/0vW3Itb2i7Q

Discussion