mcpField
R
rn-replica-qc

rn-replica-qc

github.com/pluviobyteクリエイティブ・メディア1.7k242 回インストール5 週間前に更新
リポジトリ

rn-replica-qc について

rn-replica-qcは、参照動画の再現を検証・修正するスキルです。フレーム単位の証拠ゲートを定め、検証済みの動きをHyperFramesやRemotionの再利用可能なコンポーネントとして記録できます。

主な機能

  1. 01参照フレームとタイムベースの分析
  2. 023段階の証拠ゲート
  3. 03フレーム整合性を保つ再現修正
  4. 04HyperFramesとRemotionのコンポーネント記録
  5. 05レポート、比較、チェックサム証拠の作成

活用シーン

  1. 01動画再現が宣言した忠実度を満たすか確認
  2. 02最初に現れる不一致の特定と修正
  3. 03連結区間のフレーム連続性の検証
  4. 04検証済みの動きを再利用用にカタログ化

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/pluviobyte/rnskill --skill rn-replica-qc

インストール後、Claude Code で/rn-replica-qcを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

agents/
openai.yaml
references/
alignment-workflow.md
presenton-lessons.md
replica-levels.md
scripts/
build_frame_sprite_rows.py
compare_videos.py
extract_frame_range.py
extract_halfsec_frames.py
verify_frame_sequence.py
verify_frame_sprite_rows.py
verify_timeline_playback.cjs

詳細

参照動画のレプリカ品質管理

役割

参照動画の再現を赤／緑のエビデンスループに変換し、必要に応じて、位置合わせ済みのモーションを再利用可能な HyperFrames または Remotion コンポーネントとしてキャプチャします。

忠実度に関する名称や約束を決める前に、replica-levels.md を読んでください。ソースストリームのコピー、損失のない正確なレンダーフレーム、フレーム位置を合わせてエンコードした MP4、ビジュアルの再構築、スタイルの参考資料は、それぞれ異なる主張です。

正式なショーケース

  • 人が読む表示名：Presenton 复刻 Bitexact 成片
  • ファイル：assets/showcases/presenton-replica-pixel-aligned-bitexact.mp4
  • このショーケースが実証するのは、ソースストリームのビット単位の完全一致です。手作業で作成した HTML コンポジションがビット単位で完全一致する証拠として使用しないでください。

動作モード

  • 分析のみ：調査と報告を行います。実装コードは編集しません。
  • レプリカループ：宣言したエビデンスゲートに合格するまで候補を修正します。
  • コンポーネントキャプチャ：実証済みのモーションパターンを入力と制限事項とともに登録します。

ワークフロー

1. 契約を宣言する

参照元、正確な区間、レンダラー、忠実度ラベル、成果物、コンポーネントライブラリの保存先、承認に必要なエビデンスを記録します。利用できる場合は Goal モードを使用してください。利用できない場合は、プロジェクト内に alignment-report.md と patch-log.md を置いてください。

完了条件： チャットの記憶に頼らず、区間とすべての受け入れ基準を検証できます。

2. タイムベースを固定する

FPS、再生時間、開始時刻、ピクセル形式、フレーム数、音声の有無を調べます。正確さが必要な作業では、タイムスタンプをソースフレーム番号に対応付け、フレームインデックスで抽出します。両端を含む区間のフレーム数は (end_frame - start_frame) + 1 です。隣接する両端を含む区間を結合する場合は、前の区間の境界フレームを残し、次の区間の最初のフレームをスキップします。

調査には extract_halfsec_frames.py を使用し、全フレームの受け入れシーケンスには extract_frame_range.py を使用してください。

完了条件： 参照フレーム 1、最終フレーム、フレーム数、PTS の対応付けが明示され、再現可能です。

3. アーキテクチャを選ぶ
  • 完全一致の再生：検証済みの損失のないフレームまたはスプライト行から、固定された参照コンテンツをレンダリングします。自由に生成できるコンポーネントではありません。
  • パラメトリックモーション：差し替え可能なコンテンツを使う DOM/SVG/GSAP/React/Three.js です。
  • ハイブリッド：忠実度を保つために完全一致の再生を提供し、後の抽象化に備えて別途パラメトリック実装を維持します。

完全一致再生のテクスチャレイヤーを、パラメーター化された AI コンポーネントとして提示してはいけません。

4. 分析して修正する

alignment-workflow.md を読んでください。まず 0.5s のコンタクトシートを作成し、動きの速い箇所の前後に 0.1s の区間を追加してから、最も早い不一致、または最も大きな不一致を、目に見える原因ごとに一つずつ修正します。サンプリングは問題箇所の特定には役立ちますが、ピクセル単位またはフレーム位置合わせ済みの納品を承認するものではありません。

Presenton の失敗パターンと動的画像のデコード競合については、presenton-lessons.md を読んでください。

完了条件： 候補が宣言した視覚状態に達し、後の修正で隠された既知の先行不一致が残っていません。

5. 3 つのエビデンスゲートに合格する
  1. アセットゲート：参照元の抽出数が正確であり、生成したスプライトセルまたは損失のない中間ファイルが、エラーなしで元のフレームに往復変換できます。
  2. ランタイムゲート：実際に登録されたタイムラインが、必要なすべてのフレームを順に進みます。テスト専用のセッターを呼び出してはいけません。任意のシーク、すべての動的アセット境界、位置合わせ済みの隣接区間を以前と同様に確認してください。
  3. 納品ゲート：レンダラーを実行し、納品する MP4 をデコードしてすべてのフレームを比較し、時間方向の候補を確認し、最悪のフレームと境界フレームを調べ、メディアのメタデータを調査し、アーカイブのコピーを SHA-256 で検証します。

HyperFrames では、レンダリング前に npx hyperframes check . が成功する必要があります。レンダリングログが成功していても、それだけでは納品のエビデンスになりません。Remotion では、プロジェクトに対応するランタイムとデコード済みフレームのチェックを使用してください。

完了条件： 3 つのゲートすべてが合格し、各指標がどのレイヤーを実証するのかをレポートに明記しています。

6. 続行して結合する

レプリカを複数のセグメントに分けて続行する場合は、前のセグメントを再実行し、新しいセグメントを個別にレンダリングし、重複する両端の境界フレームをスキップします。各結合箇所の直前、結合箇所、直後のフレームを確認します。その後、結合後のフレーム数と再生時間を調べます。

完了条件： 古い範囲と新しい範囲の両方が合格し、結合箇所でフレームの重複、欠落、巻き戻りがないこと。

7. コンポーネントを登録する

正確なリプレイとパラメトリックモーションは別々に登録します。各エントリには次の情報を含めます。

  • type：exact-replay または parametric-motion
  • ソースとタイムスタンプの範囲
  • 想定するコンテンツパターン
  • 入力とタイミングの仕様
  • 実装スタックとアセット
  • 証拠ファイルと受け入れレベル
  • 既知の制限
8. 判定する

現在の証拠で立証された忠実度ラベルのみを承認します。ゲートが不合格の場合は、not aligned と記載し、最初に失敗したフレームまたはタイムスタンプを示して、レプリカのループを続けます。

スクリプトの使い方

# Discovery samples and contact sheets
python3 scripts/extract_halfsec_frames.py reference.mp4 --out analysis/sample --contact

# Exact inclusive frame range
python3 scripts/extract_frame_range.py reference.mp4 --start-frame 720 --end-frame 1020 --out analysis/reference-fullfps

# Lossless sprite rows and round-trip proof
python3 scripts/build_frame_sprite_rows.py analysis/reference-fullfps assets/textures --prefix replica-row --frames-per-row 7
python3 scripts/verify_frame_sprite_rows.py analysis/reference-fullfps assets/textures --prefix replica-row --frames-per-row 7

# Real timeline capture, followed by full-frame comparison
node scripts/verify_timeline_playback.cjs --html ./index.html --timeline-id composition_id --start 24 --frames 301 --fps 30 --out analysis/runtime
python3 scripts/verify_frame_sequence.py analysis/reference-fullfps analysis/runtime --output analysis/runtime-metrics.json --boundary-every 7

# Delivered video comparison and decoded-frame gate
python3 scripts/compare_videos.py reference.mp4 candidate.mp4 --out analysis/delivery --reference-start-frame 720 --candidate-start-frame 0 --frame-count 301 --boundary-every 7

フレームとスプライトの検証には、Pillow を使用する Python ランタイムを使います。タイムラインのキャプチャには、Node ランタイムで Playwright が必要です。

必須の出力

  • alignment-report.md と patch-log.md
  • ソースと候補のコンタクトシート
  • 全フレームのランタイムおよび配信メトリクス JSON
  • 最悪フレームと境界フレームの証拠
  • 並べて比較できる動画またはシート
  • メディアのプローブとチェックサムの証拠
  • 要求された場合のコンポーネントカタログエントリ
  • 最終的な合否の概要

コンテンツ制作プロジェクトでは、最終動画を 成片/ に、簡潔な QC 証拠を兄弟ディレクトリの 质检/ にコピーします。

コメント

Markdown 対応