notasimrazzaq/AI-Video-Editor

ユーザーの動画へのモーショングラフィックス追加

インストール済みのHyperFramesスキル上にレイヤーとして機能するワークスペース。HTML/タイムラインの仕組みについては、hyperframes-core（構成コントラクト）とhyperframes-animation（GSAPルール）をロードしてください。最も近い上流ルートはtalking-head-recutです。このスキルはクリエイターのハウスルールを追加し、競合時にはこれらが優先されます。

高速パス（reel-sep30、3:20 ウルドゥー語/英語リール、Paper Cutで実証済み）

1. powershell -NoProfile -ExecutionPolicy Bypass -File tools/new-project.ps1 -Name <n> -Video raw/<file> -Transcribe → Deepgramによる文字起こしが数秒で完了。
2. transcript-words.txt（index:text@start）をダンプ → 読み取り、要約し、瞬間を選ぶ。
3. キャプション: captions-src.json（単語インデックスによるRoman Hinglishチャンク） → node tools/build-captions.mjs projects/<n>。
4. スタイルテンプレート: kit/templates/paper-cut-vertical.htmlをindex.htmlにコピー。両方のdata-durationを設定。EXAMPLEコールをこの動画の瞬間に置き換える。
5. lint → snapshot --at ...（約12フレームを2バッチ） → コンタクトシートを表示 → 修正。
6. サウンド: mg-soundのオフセットテーブルからsfx.jsonを作成 → node tools/sfx.mjs projects/<n>（レンダリング前に行い、一度のレンダリングにサウンドを含める）。
7. レンダリング時間を事前にユーザーに伝える（mg-export参照: 4コアラップトップで1080x1920動画1分あたり約25〜30分）。その後、一度だけレンダリングし、exports/にコピーする。
8. 後での微調整: オーディオのみ → sfx.mjs --mix（秒単位、再レンダリング不要）。視覚的な微調整 → 最初にスナップショットを撮り、その後一度だけ再レンダリング。

やってはいけないこと: ローカル音声モデルのインストール、停止したダウンロードの再開、「確認」のためのレンダリング（代わりにスナップショットを使用）、VS Codeのプレーヤーでのプレビュー（AACオーディオなし → VLCを使用）。

1. プロジェクトのセットアップ

1. 動画がraw/にない場合は、そのままの場所で構いません。ファイル名から短いケバブケースのプロジェクト名を選びます。
2. ワークスペースルートから以下を実行:

   powershell -NoProfile -ExecutionPolicy Bypass -File tools/new-project.ps1 -Name "<name>" -Video "<path>" -Transcribe
   

   • 文字起こしはDeepgramを使用（nova-3、デフォルトではlanguage=multi: ウルドゥー語/ヒンディー語 + 英語のコードスイッチングを処理。ヒンディー語/ウルドゥー語の単語はデーバナーガリーで返される場合があるため、Hinglishにローマ字化し、タイミングを保持）。環境変数DEEPGRAM_API_KEYが必要。存在しない場合は、ユーザー自身にpowershell -NoProfile -ExecutionPolicy Bypass -File tools/set-deepgram-key.ps1を実行するよう依頼（チャット内では決して実行しない）。英語のみの動画: -Language en。再実行のみ: powershell -NoProfile -ExecutionPolicy Bypass -File tools/transcribe-deepgram.ps1 -Project projects/<name>。
   • npx hyperframes transcribeをwhisperで使用したり、インストールしたりしないでください（遅すぎる/うるさい）。Deepgramを使用してください。
   • projects/<name>/にclip.mp4（CFR H.264）、audio.mp3、metadata.json、transcript.json、fonts/、sfx/、renders/が作成される。
   • ユーザーが特定の瞬間のスクリーンショットを提供する場合は、-Screenshots "<folder>" を追加。
3. 以降はprojects/<name>/内で作業する（npx hyperframesコマンドの前にcdで移動する）。

2. 動画を徹底的に分析する

• metadata.json（幅、高さ、fps = r_frame_rate、duration）とtranscript.json（フラットな[{text,start,end}]）を読む。
• 明白なASRの誤りをその場で修正し、タイムスタンプは保持する。音声認識は約1秒ずれることがあるため、瞬間が重要な場合は、数値を信頼するのではなく、ffmpeg -ss <t-0.5> -t 2 -i clip.mp4 ... またはスナップショットで確認する。
• 長いまたは複数言語の文字起こし: インデックス付き単語リスト（index:text@start、1文1行）をtranscript-words.txtにダンプして読む。

キャプション（ユーザーが希望する場合）

• captions-src.jsonを作成: [[firstWordIndex, lastWordIndex, "caption text", ["key","words"]], ...]、各チャンク3〜7単語で、すべての単語をカバーする。 ウルドゥー語/ヒンディー語/Hinglishの音声 → テキストはRoman Hinglishで書く（例: "ke 9 maah guzar gaye hain"）、英語の単語はそのまま保持し、聞き間違いを文脈で修正する（"नौ मां" → 9 maah、"New York" → New Year）。
• ビルド: node tools/build-captions.mjs projects/<name> → captions.js（window.CAPTIONS = [{s,e,text,key}]）、カバーされていない単語を警告。<script src="captions.js">でロードする。
• 顔の位置を特定する: コンポジションが存在する前はnpx hyperframes snapshotが使用できないため、フレームを抽出する: ffmpeg -nostdin -v error -ss <t> -i clip.mp4 -frames:v 1 renders/_probe_<t>.png を3〜4ポイントで実行し、表示する。
• 1段落の要約を書く: 動画の内容と、重要な瞬間（数字、リスト、前後比較、キークレーム、CTA）を3〜8個挙げる。
• ユーザーがスタイルを指定しなかった場合は尋ねる（mg-styles参照）。デフォルト: クリーンなホワイトのフロストカード（Liquid Glass）。

3. 計画（動画が30秒を超える場合、または依頼があいまいな場合は、構築前にユーザーに提示する）

各瞬間について: トリガーワードとその正確なstart、グラフィックタイプ、コンテンツ、ゾーン、終了時間。グラフィックタイプは発言内容に従う:

• 数字 → カウントアップ · リスト → チェックリストチェック · 前後比較 → 比較 · キーライン → パンチイン または 大きいタイプ
• スクリーンショット/証拠 → ポップアップを順に表示（プロンプト12） · 新しいトピック → リフレーム（動画がカードに縮小） 動画の語彙とスタイルはmg-stylesスキルにあります。

4. ハウスルール（譲れない）

1. 動画はそのまま保つ: 同じサイズ、fps、オーディオ、カット。コンポジションのdata-width/height = 動画サイズ、fps = 動画のfps、ルートのdata-duration = 動画の長さ（metadata.jsonにクランプ）。動画は<video id="a-roll" class="clip" src="clip.mp4" data-has-audio="true" data-start="0" ...>とし、mutedやcrossoriginは付けない。
2. すべてのグラフィックは正確な単語の開始位置（文字起こし内のその単語のstart）から始める。
3. 動画全体で1つのスタイルを使用する。
4. 最初の3秒間は何も置かない — それがフックゾーン。
5. グラフィックは顔の上、下3分の1（キャプションの場所）、および幅の中央80％の外側（左右10%マージン）には配置しない。
6. フォントはプロジェクトのfonts/フォルダからのみ@font-faceで使用（Google Fonts URLは不可）。GSAPは<script src="vendor/gsap.min.js">でロード。
7. フロストガラス効果には背後に何かが必要。フッテージ上では機能するが、透明なエクスポートにはソリッドカードを使用する。

5. 構築、チェック、レビュー

1. index.html（スタンドアロンコンポジション、1つの一時停止されたGSAPタイムラインがwindow.__timelines["<id>"]に登録されている）を書く。Paper Cutスタイル: kit/templates/paper-cut-vertical.htmlから開始する。 低解像度の電話フッテージ（例: 480x864 WhatsApp）の場合でも、1080x1920キャンバス上で作成するため、グラフィック/キャプションはシャープに保たれ、動画はその下で拡大される。
2. npx hyperframes lint を実行し、次に npx hyperframes check を実行 — すべてのエラーを修正する。
3. npx hyperframes snapshot --at <t1>,<t2>,... を各グラフィックの中間点で実行し、PNGを表示する — 顔/キャプションの重なりとテキストの切り捨てを確認する。
4. ドラフトをレンダリング: npx hyperframes render . -o renders/with-cards.mp4（レンダリングは一般的なPCでは遅いため、スナップショットで反復し、フレームが正しく見えた場合のみレンダリングする）。
5. 承認された最終結果をexports/<name>.mp4にコピーする。

6. フォローアップ（同じセッション内）

• 1つのスポット（プロンプト12）: 「<フレーズ>と言ったら、<何か>を表示」。文字起こし内でフレーズを見つけ、その瞬間だけを変更し、他のすべてを同一に保ち、同じファイルに再レンダリングする。
• サウンド: mg-soundスキルを使用。バリアント/透明のエクスポート: mg-exportスキル。
• プレーンワードでの微調整（サーフェス、色、タイプ、モーション、タイミング、レイアウト） → その部分だけを編集し、他のすべては同じままにして、再度レンダリングする。

まずベースを作成し、次に一度に1スポットずつ。一度のパスですべてを取得しようとしないでください。