2023年12月、1週間くらいで gazo-tts を作った。画像の中の文字を拾って、それを音声で読み上げる、という小さいサイト。年末の短期プロジェクトとして手を動かした回。

環境

  • Astro 4 + React + Tailwind
  • OpenAI（openai v4）
  • tesseract.js（ブラウザ/サーバーでの OCR）
  • デプロイは Cloudflare Pages（@astrojs/cloudflare）

やったこと

流れはシンプルで、画像 → 文字起こし → 読み上げ。

  • src/pages/api/ocr.ts で OCR。当時の gpt-4-vision-preview に画像を投げて「何が写ってる？」を取る形と、tesseract.js の二段構え
  • src/pages/api/tts.ts で読み上げ。OpenAI の tts-1 / voice は alloy に input テキストを渡すだけ
const res = await openai.audio.speech.create({
  model: "tts-1",
  voice: "alloy",
  input: text,
});

TTS 側は本当にこれだけで音声が返ってくるので、拍子抜けするくらい簡単だった。むしろ OCR 側、画像の指定や vision の扱いの方でちょこちょこ調整していた記憶がある。

開発ログ

  • 12/21 init → lexer ならぬ OCR/TTS まで一気に実装
  • 12/22 PC では表示 OK、API route まわりを調整

コミットも 一旦コミット ttsまで PCではOK みたいな雑なメモで、勢いで作った感じがそのまま残っている。

おわり

年末の短周期プロジェクトは、本番運用より「1週間で動くもの」を作る方向に振ると気持ちよく終われる。OpenAI の TTS が手軽すぎたので、読み上げ系の機能はいろんな小物に後付けできそう、という発見があった回。今なら音声モデルももっと選べるので、別の用途にも転用できそう。