STACK DIAGRAM / CAMP-vol6 · main / 2026-11

おれを捌け — 技術構成

カメラ内の魚検出と、ボタン操作で呼ぶGemini解析は別経路。モデル学習からCloudflareへの配布も示す。

ブラウザ内で完結する魚検出 · apps/web
ブラウザ · Geminiへ送る入口
Cloudflare · 本番API / セッション
Google Gemini
学習済みTFLiteモデルの作成と本番配布
カメラ
getUserMedia
React画面
React 19 · TS · Vite 8
MediaPipe Worker
ObjectDetector · WASM
head-tail.tflite
head / tail検出
端末内推論 映像フレームはブラウザ内だけで処理。約1秒ごとに縮小してWorkerへ渡し、検出した頭・尾の矩形を画面に重ねる。Geminiには流さない。
React画面
押したときだけ解析
送るのは静止画1枚 ユーザーが「解析」を押すと、現在の手順IDと縮小JPEGを送信。連続動画の送信も、自動で次の手順へ進む処理もない。
Cloudflare Worker
/api/* · Gemini key
Durable Object
SQLite · session / limit
保存: セッション進捗と回数制限。解析画像は保存しない。Gemini APIキーはWorker側のSecret。
Gemini API
gemini-3.5-flash-lite
返すのは確認結果 certainty / visibleParts / evidence / caution をJSONで返し、Zodで検証。魚の手順本文は固定データで、手順の進行はユーザーが行う。
画像データ
Mendeley · YOLOラベル
オフライン学習
Model Maker · MobileNetV2 I320
TFLiteモデル
Release ZIP · git外
GitHub Actions
hash検証 · build
Cloudflare本番
static assets + Worker
配備先・モデルの注意
  • 頭・尾検出の評価は撮影日を分けた26枚で macro F1 0.8002 / AP50 0.7943。スマホ実機の検証値ではない。
  • 魚の工程分類モデルは読み込み口のみ。学習済みモデルは同梱されていない。
  • ChatGPT Sitesに静的配置した場合、Cloudflare Worker / Durable Objectは付属しない。Gemini APIは別途つなぐ必要がある（コードからの推定）。
  • MediaPipe Model Makerは公式に非推奨。

1. VISION

CameragetUserMedia
React
MediaPipeObjectDetector · WASM
TFLitehead / tail

ローカル推論

2. GEMINI

ReactJPEG × 1
CloudflareWorker · API
GeminigenerateContent
Durable Object · SQLite

3. MODEL · DEPLOY

MendeleyYOLO
Model MakerMobileNetV2
TFLiteRelease ZIP
GitHub ActionsBuild · Deploy
CloudflarePages · Worker
アプリ内 / API サービス間の処理 学習・配布
GitHub main · アプリ実装 · MediaPipe · Cloudflare Worker · ML README icons: SVGL · Lucide · gilbarbara/logos · made with stack-diagram