v0でUI遷移検出&遷移図編集アプリを作る: スマホ録画から画面候補を抽出しSupabaseに保存

Build a full-stack prototype called “Screen Transition Mapper” for game UI estimation.

Context:
- Used by a single developer on desktop Chrome.
- Input videos are smartphone screen recordings: vertical 1080x1920, 30fps, up to 5 minutes.
- Goal is AUTO extraction accuracy first; editor polish is secondary.
- No authentication needed for this PoC.

Tech constraints:
- Next.js App Router + TypeScript + Tailwind + shadcn/ui.
- Use React Flow for the transition diagram.
- Use Supabase (Postgres + Storage) via v0’s Supabase integration (Integrations/Connect).
- Do NOT upload large video payloads through Vercel Functions (4.5MB limit); process the video in the browser and only upload extracted thumbnails/metadata to Supabase.

Core features (MVP):
1) Home page (single page is OK):
   - Version input (default “0.0.1”).
   - Video import:
     a) Upload existing mp4 from disk (primary).
     b) Optional “Record a short test video” using MediaRecorder (camera) for quick testing (note: screen recording of other apps is not required).
   - Processing controls:
     - Sampling FPS selector (default 1 fps).
     - Hash threshold slider (default Hamming distance 10).
     - Stability requirement (default: accept a new screen only if it persists for 2 consecutive samples).
   - Button “Process locally” -> generates candidate screens + transitions.
   - Show results:
     - A list/table of detected screens with timestamp, thumbnail, hash, and cluster id.
     - A React Flow graph (nodes = screens w/ thumbnails, edges = transitions w/ confidence).
     - Allow manual edits: rename screen, delete/merge screens, add/remove edges.
   - Button “Save to Supabase” saves the run, screens, transitions, and any edits.

2) Video processing algorithm (client-side):
   - Load the file into a <video> element via URL.createObjectURL.
   - Sample at N fps (default 1) by seeking to timestamps.
   - For each sample frame:
     - Draw to an offscreen canvas.
     - Downscale to something small (e.g., 160px width) and convert to grayscale.
     - Compute a 64-bit dHash (or pHash) and store as hex string.
   - Clustering / dedupe:
     - Compare hash to last accepted screen hash.
     - If distance <= threshold -> same screen cluster.
     - If distance > threshold, treat as “candidate new screen”, but only accept if it stays different for the next sample too (stability = 2).
     - Drop “one-off” transient frames.
   - Transitions:
     - Create edges between consecutive accepted screen clusters in time order.
     - Confidence based on (hash distance, stability count).
   - Export:
     - Provide “Export JSON” for the current graph.

3) Supabase persistence:
   - Use @supabase/supabase-js.
   - Read env vars: NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY.
   - Storage:
     - Create a bucket name: “frames”.
     - Upload screen thumbnails as JPEG (reasonable compression).
     - Store object path in DB.
   - Database tables (generate SQL file at /supabase/schema.sql and also include in README):
     - runs(id uuid, version text, created_at timestamptz, params jsonb)
     - screens(id uuid, run_id uuid, version text, idx int, time_ms int, title text, hash text, cluster_key text, thumbnail_path text, created_at timestamptz)
     - transitions(id uuid, run_id uuid, version text, from_screen_id uuid, to_screen_id uuid, confidence real, created_at timestamptz)
     - edits(id uuid, run_id uuid, version text, graph jsonb, updated_at timestamptz)
   - Since there is no auth, keep it simple for PoC:
     - Provide SQL to either disable RLS for these tables OR add permissive policies for anon (clearly marked as “PoC only, insecure”).
   - Storage policies:
     - Supabase Storage requires RLS policies to allow uploads. Provide minimal INSERT policy for storage.objects for bucket_id='frames' (PoC-only). Also provide SELECT policy if needed for listing.
     - Put these policy SQL snippets in /supabase/policies.sql and explain in README how to apply them.

4) UX / UI basics:
   - Make the UI usable but not over-engineered.
   - The graph view should show thumbnails in nodes.
   - Provide a right-side inspector panel for selected node/edge.

Deliverables:
- Working Next.js app with the above.
- README.md with:
  - How to connect Supabase via v0 integration (Integrations/Connect).
  - Where to paste schema.sql and policies.sql in Supabase SQL editor.
  - How to run locally (npm install / dev).
- Keep code clean and modular (lib/videoProcessing.ts, lib/hash.ts, lib/supabaseClient.ts, components/*).

screen 間の transition を示す図形が square なのが気になります。矢印などの表現に変更できますか。