ウツシエ

日本語の一文から、声や効果音まで入った短い縦動画を作る Web アプリです。 いまは 練習モード で動きます。外部の動画 AI や LLM は一切呼ばず、public/samples/ のサンプル動画を返すので、お金はかかりません。

画面の流れ

#	画面	ファイル
①	用途を選ぶ（SNS縦型・自由。商品紹介と漫画・アニメ風は近日公開）	src/app/page.tsx
②	一文・雰囲気・長さ・音・字幕を選ぶ。写真を選べば、その写真から作る	src/app/create/page.tsx
③	AI が直した指示文を見て、下書き2本から選ぶ	src/app/drafts/page.tsx
④	本番を生成中	src/app/generating/page.tsx
⑤	字幕の切り替え・MP4 保存・共有	src/app/done/page.tsx
—	編集（トリミング・文字入れ・BGM・字幕の焼き込み）。端末の中で処理して MP4 に書き出す（src/lib/edit/）	src/app/edit/page.tsx
—	作った動画の履歴	src/app/history/page.tsx
—	共有ページ（リンクを開いた人が見る）	src/app/v/[id]/page.tsx

動かし方（自分のパソコンで）

Node.js 20 以上が必要です。

npm install
npm run dev

ブラウザで http://localhost:3000 を開きます。スマホの幅で見ると本番に近い見た目になります。

その他のコマンド:

npm test        # 指示文づくりのテスト
npm run examples  # 課題セットの変換結果（rule-based.md）を作り直す
npm run lint    # 書き方のチェック
npm run build   # 公開用にまとめる

しくみ

• 一文 → 設計図 → 指示文：POST /api/plan。設計図の形と LLM への指示書は tools/prompt-expander/system-prompt.md。 練習モードでは LLM を呼ばず、src/lib/plan/mockPlanner.ts が一文を辞書（src/lib/plan/lexicon.ts）で読み解いて設計図を作ります。 場所・時間・天気・季節・人物や動物（固定の見た目）・動き・効果音・環境音・看板の文字を英語の指示にし、動きの順にカットを分けます。 辞書にない言葉は日本語のまま指示文に残すので、一文の要素は落ちません（画面の「AIが決めたこと」にも出ます）。 用途ごとの課題セット43本（src/lib/plan/cases.ts、写真から作る例を含む）で、抜け・セリフ・カットの長さ・同じ入力で同じ出力になるかをテストし、 結果を tools/prompt-expander/examples/rule-based.md に書き出しています。辞書や変換を変えたら npm run examples で作り直します。 設計図から各モデル向けの文章と字幕を作るのは src/lib/plan/build.ts（Python の試作 build_prompts.py を移したもの。テストで同じ出力になることを確かめています）。
• モデルの選び方：写真から作るときと、セリフ（「」）があるときは Kling 3.0、それ以外は Veo 3.1（src/lib/models.ts）。
• 写真から作る：②の画面で写真を選ぶ（スマホではカメラロールかカメラ）。選んだらすぐ長い辺1600pxの JPEG に縮め、動画の縦横比（9:16 / 16:9）の枠でドラッグして切り取る位置を決める（src/components/PhotoPicker.tsx・src/lib/photo.ts）。 生成を頼むときに長い辺1280pxで切り取って POST /api/jobs の image（data URL）で送り、サーバーは形式・大きさ・縦横を確かめてから回数を使う（src/lib/startImage.ts）。写真はサーバーにもジョブIDにも残さない。 動かし方の一文は空欄でもよく、そのときは「自然にゆっくり動き出す」で作る。練習モードではほかと同じくサンプル動画が返る。
• 生成ジョブ：POST /api/jobs で始め、GET /api/jobs/:id で進み具合を見ます。練習モードではジョブIDに開始時刻を入れ、経過時間から進み具合を計算します（サーバーに状態を持たないので Vercel の無料プランでもそのまま動きます）。
• 字幕：セリフから WebVTT を作って動画に重ねています。MP4 への焼き込みは本番モードで FFmpeg を使う予定です。
• 作りかけの続き：一文・下書き・本番のジョブIDは、この端末のブラウザ（localStorage）に残します（src/lib/flow.tsx）。タブやホーム画面アプリを閉じても、トップの「前に作った…」から続きを見られます。
• 履歴：完成画面を開くと、この端末のブラウザ（localStorage）に自動で残します（最大50本、src/lib/history.ts）。端末をまたいで見られるようにするのはこれから。
• 共有：「動画を送る」は端末の共有画面で MP4 を渡します（TikTok・Instagram・YouTube 向け）。X・LINE・Facebook とリンクのコピーは共有ページ /v/:id のアドレスを送ります（src/lib/share.ts）。どれも API キーやログインは要りません。練習モードではジョブIDからサンプル動画を割り出すので、サーバーに何も保存しません。
• モード切り替え：スイッチは環境変数 UTSUSHIE_MODE の1つだけ（src/lib/mode.ts）。何も設定しなければ練習モードです。 live にすると本番モードになり、動画を本物の API に頼みます（下の「本番モード」）。

本番モード（動画 API につなぐ）

⚠️ 本番モードは 1本ごとにお金がかかります。テストはすべて偽の通信で行っていて、本物の API はまだ一度も呼んでいません。

	セリフあり	セリフなし
モデル	Kling 3.0（公式 API）	Veo 3.1（Gemini API）
下書き2本	std・5秒・音なし	Veo 3.1 Fast・8秒
本番	pro・10秒/15秒・音あり	8秒を作ってから「延長」でつなぐ（720p）
コード	src/lib/video/kling.ts	src/lib/video/veo.ts

無料で試す（CogVideoX-Flash）：UTSUSHIE_VIDEO=free と ZHIPU_API_KEY を入れると、本番モードの動画をすべて智谱 BigModel の無料モデル CogVideoX-Flash に頼みます（src/lib/video/cogvideo.ts）。お金もクレジットも使いません。 ただし数秒の1本しか作れず（10秒/15秒を選んでも短い）、日本語のセリフの声や口の動きは出ず、動画に AI 生成の印が付きます。指示文は512文字までなので、最初のカットだけを送ります。 無料の機能は利用規約で「非商用・個人の研究や学習」に限られるため、オーナーが自分で仕上がりを確かめるときだけに使い、一般公開の前に外してください。

写真から作るときは、セリフの有無にかかわらず Kling 3.0 の画像→動画（/v1/videos/image2video、写真は base64 で渡し、縦横比は写真で決まる）を使います。下書き・本番の設定は上の表と同じです。

• つなぎ役は src/lib/video/live.ts。練習モードと同じくサーバーに状態を持たず、動画 API のタスクIDを 署名付きのジョブID に入れます（作り替えたIDで勝手に生成を始められないように）。
• できた動画は GET /api/jobs/:id/video からサーバー経由で返します（Veo の動画は API キーがないと読めないため）。
• 必要な環境変数は .env.example を見てください。足りないときは API を呼ばずにエラーになります。
• 指示文の書き直し（LLM）はまだなので、本番モードでも設計図は練習モードと同じ辞書での変換で作ります。

本番に切り替える前にやること

1. 公開ドキュメントから組み立てた部分の確認（Kling 3.0 のモデル名 kling-v3、画像→動画で sound が使えるか、Veo の延長リクエストの形）。最初は1本だけ試す
2. ログインと回数制限 → 済み（下の「ログインと回数制限」）。Supabase の設定がないと本番モードは動きません
3. 動画を自分の保存場所に移す → 済み（Supabase Storage）
4. Veo の延長はジョブIDの受け渡しで行っていて、延長を頼んだ直後に画面を再読み込みすると二重に頼む可能性がある。保存場所（KV など）を足して防ぐ
5. 画面の「練習モード」の表示を、本番モードでは出さないようにする
6. 10秒の Veo は 8秒＋延長で約15秒になるので、FFmpeg で切りそろえる

ログインと回数制限（Supabase 無料プラン）

Supabase の環境変数（.env.example の3つ）を入れると、次のようになります。入れなければ今まで通りログインなしで使えます。

• ログイン：メールに届く「Sign in」のリンクを開く（パスワードなし、/login）。Supabase で Google を有効にすれば Google でも入れます。 リンクはページを開いたのと別のブラウザで開かれることが多い（ホーム画面アプリ、Gmail アプリ → Chrome など）ので、合言葉の要らない implicit 方式にしています。 リンクを開いたブラウザでログインするので、ホーム画面アプリの中ではログインが続きません。数字のコードでのログインも作ってあり、独自のメール送信（SMTP）をつないで Supabase のメールの文面に {{ .Token }} を足し、NEXT_PUBLIC_UTSUSHIE_EMAIL_CODE=1 にすると出ます（標準のメール送信では文面を変えられません）。 画面は Supabase の公開キーでログインし、サーバーへ頼むときにトークンを付けます。サーバーはトークンを Supabase に確かめてから受け付けます（src/lib/account.ts）。
• 回数制限：1人あたり・1日あたりの上限（既定は下書き3回・本番1回）と、全員の合計の上限（下書き30回・本番10回）。日本時間の0時に戻ります。 数えるのは Supabase の関数 use_generation で、同時に頼まれても上限を超えません。回数は生成を頼む 前 に使い、動画 API の設定が足りないときは使う前に止めます（src/lib/quota.ts）。
• 動画の保存場所：本番モードで完成した動画は、Supabase Storage の videos（公開・50MB まで）に ユーザーID/推測できない名前.mp4 で移します。 履歴や共有ページはそちらを指すので、動画 API 側の動画が消えても見られます。移せなかったときは今まで通りサーバー経由で返します。無料プランの保存容量は 1GB（15秒の動画で数十本〜百本ほど）。
• 本番モードは Supabase の設定がないと動きません（URL を知っている人が誰でも生成できてしまうため）。
• オーナー用リンク：オーナーだけはメールでログインしなくても使えます。推測できない長い合言葉の付いたリンク（/api/owner?key=…）を一度開くと、その端末に約400日残るクッキー（JavaScript からは読めない）を置き、以後はログインなしで作れます。スマホと PC など、端末やブラウザごとに一度開きます。外すときはログインの画面の「この端末のオーナーの設定を外す」。 コードには合言葉の SHA-256 だけを置き、合言葉そのものは置きません（src/lib/owner.ts）。合言葉を変えるときは環境変数 UTSUSHIE_OWNER_KEY_SHA256 に新しい SHA-256 を、止めるときは off を入れます。 練習モードではオーナーの回数を数えません（上限なし）。本番モードでは既定でほかの人と同じ上限になり、UTSUSHIE_OWNER_DAILY_DRAFTS / UTSUSHIE_OWNER_DAILY_FINALS で変えられます。本番モードで数えるには、回数を記録する Supabase のユーザーID を UTSUSHIE_OWNER_USER_ID に入れます（ないと本番の生成は止まります）。全員の合計の上限はオーナーにもかかります。

Supabase の表・関数・保存場所は supabase/schema.sql にまとめてあり、Supabase の「SQL Editor」に貼って「Run」を押すと作られます（何度実行しても大丈夫）。 どれもシークレットキーを持つサーバーからしか読み書きできません。

メールでのログインは、Supabase の標準のメール送信を使うので 1時間に数通まで です。一般公開の前に、Google ログインを有効にするか、メール送信サービス（Resend など、無料枠あり）を Supabase につなぎます。

サンプル動画を作り直す

bash scripts/make-samples.sh   # ffmpeg が必要

Vercel で公開する

1. https://vercel.com に GitHub でログインし、「Add New → Project」からこのリポジトリを選ぶ
2. 設定は変えずに「Deploy」を押す（環境変数は不要）
3. ○○.vercel.app のアドレスで見られます

まだ作っていないもの

• 本物の LLM（指示文の書き直し）へのつなぎ込み（動画 API は本番モードとして用意済み。本物ではまだ試していない）
• 履歴を端末をまたいで見られるようにすること（ログインは済み。Supabase に表を足す）
• クレジットと決済
• 入力・出力のモデレーション
• 生成時の字幕の焼き込み（FFmpeg）。いまは編集画面でユーザーが焼き込める
• 編集した動画を履歴に残すこと（いまは書き出したら端末に保存してもらう）