video-wrapper

インタビュー動画プロセッサー

Python + Playwright + MoviePy に基づく動画エフェクト処理ツールです。HTML/CSS/Anime.js を使用して高品質な視覚効果をレンダリングします。

ワークフロー

ステップ 1：字幕の内容を分析する

ユーザーから動画と字幕ファイルが提供されたら、まず字幕の内容を分析し、エフェクトを提案します。

1. 字幕ファイル (.srt) を読み込みます
2. 内容を分析し、次の項目を特定します。
   • ゲスト情報（人物バーに使用）
   • 話題の切り替わり（章タイトルに使用）
   • キーワードと用語（装飾テキストに使用）
   • 専門用語（用語カードに使用）
   • 印象的な意見（名言カードに使用）
   • 数値データ（データアニメーションに使用）
   • 重要なポイント（箇条書きリストに使用）
3. 提案リストを作成し、ユーザーに確認してもらいます

ステップ 2：ユーザーによる確認

提案を Markdown 形式でユーザーに表示します。

## 视觉特效建议

**主题**: notion

### 1. 人物条 (Lower Third)
- **姓名**: Dario Amodei
- **职位**: CEO
- **公司**: Anthropic
- **出现时间**: 1000ms

### 2. 花字高亮 (Fancy Text)
1. **通用人工智能** (emphasis)
   时间: 2630ms - 5500ms
   原因: 核心概念首次提及

...

ユーザーは次の操作を行えます。

• すべての提案を承認する
• 一部の提案を変更する
• 不要なコンポーネントを削除する
• 新しいコンポーネントを追加する

ステップ 3：設定を生成してレンダリングする

ユーザーが承認した提案に基づいて config.json を生成し、動画をレンダリングします。

利用可能なコンポーネント

コンポーネント	用途	設定フィールド
人物バー (lower_third)	ゲスト情報を表示	name, role, company, startMs, durationMs
章タイトル (chapter_title)	話題の切り替わりを表示	number, title, subtitle, startMs, durationMs
装飾テキスト (fancy_text)	現在の意見を要約	text, style, startMs, endMs, position
用語カード (term_card)	用語を説明	chinese, english, description, firstAppearanceMs
名言カード (quote_callout)	印象的な意見を強調	text, author, startMs, durationMs, position
データアニメーション (animated_stats)	数値を表示	prefix, number, unit, label, startMs
箇条書きリスト (bullet_points)	重要なポイントをまとめる	title, points[], startMs, durationMs
ソーシャルメディアバー (social_bar)	フォローを促す	platform, label, handle, startMs, durationMs

装飾テキストの使用規則

⚠️ 重要：装飾テキストは次の規則に従う必要があります。

1. 短いフレーズにする：話者のその時点での意見を、簡潔な文で要約します。

   • ✅ 正しい：「AIの発展は滑らかな曲線」「知能の成長はムーアの法則に似ている」
   • ❌ 誤り：「人工知能」「ムーアの法則」（これらは単語なので、用語カードを使用してください）

2. 用語カードと相互補完する：

   • 装飾テキスト：意見を要約する（例：「知能は毎年倍増する」）
   • 用語カード：用語を説明する（例：「ムーアの法則：集積回路のトランジスタ数は18～24か月ごとに倍増する」）

3. 上部に配置する：デフォルトでは画面上部（字幕の上）に表示し、顔を隠さないようにします。

ソーシャルメディアバーの使用規則

• デフォルトの表示時間：8 秒（他のコンポーネントより長く、ユーザーが覚える時間を確保します）
• 通常は動画の最後に表示します
• 対応プラットフォーム：twitter, weibo, youtube

テーマシステム

4 種類のビジュアルテーマに対応しています。

テーマ	スタイル	適用シーン
notion	温かみのある知識系	教育、知識共有
cyberpunk	ネオンが輝く未来的な雰囲気	テクノロジー、先端的な話題
apple	ミニマルで上品	ビジネス、専門的なインタビュー
aurora	グラデーションの光の流れ	クリエイティブ、アートコンテンツ

設定ファイル形式

{
  "theme": "notion",
  "lowerThirds": [
    {
      "name": "Dario Amodei",
      "role": "CEO",
      "company": "Anthropic",
      "startMs": 1000,
      "durationMs": 5000
    }
  ],
  "chapterTitles": [
    {
      "number": "Part 1",
      "title": "指数增长的本质",
      "subtitle": "The Nature of Exponential Growth",
      "startMs": 0,
      "durationMs": 4000
    }
  ],
  "keyPhrases": [
    {
      "text": "通用人工智能",
      "style": "emphasis",
      "startMs": 2630,
      "endMs": 5500
    }
  ],
  "termDefinitions": [
    {
      "chinese": "摩尔定律",
      "english": "Moore's Law",
      "description": "集成电路晶体管数量每18-24个月翻一番",
      "firstAppearanceMs": 37550,
      "displayDurationSeconds": 6
    }
  ],
  "quotes": [
    {
      "text": "AI 的发展是一个非常平滑的指数曲线",
      "author": "— Dario Amodei",
      "startMs": 30000,
      "durationMs": 5000
    }
  ],
  "stats": [
    {
      "prefix": "增长率 ",
      "number": 240,
      "unit": "%",
      "label": "计算能力年增长",
      "startMs": 45000,
      "durationMs": 4000
    }
  ],
  "bulletPoints": [
    {
      "title": "核心观点",
      "points": [
        "AI 发展是平滑的指数曲线",
        "类似摩尔定律的智能增长",
        "没有突然的奇点时刻"
      ],
      "startMs": 50000,
      "durationMs": 6000
    }
  ]
}

依存関係のインストール

# 进入虚拟环境
cd ~/.claude/skills/video-wrapper
source venv/bin/activate

# 安装依赖
pip install -r requirements.txt

# 安装 Playwright 浏览器
playwright install chromium

コマンドラインでの使用方法

# 使用浏览器渲染器（推荐）
python src/video_processor.py video.mp4 subs.srt config.json output.mp4

# 指定渲染器
python src/video_processor.py video.mp4 subs.srt config.json -r browser
python src/video_processor.py video.mp4 subs.srt config.json -r pil

技術的な実装

• ビジュアルレンダリング：HTML + CSS + Anime.js（Playwright でスクリーンショットを撮影）
• 動画合成：MoviePy
• アニメーションエンジン：Anime.js（Spring 物理アニメーション）
• 代替レンダリング：Python PIL

ファイル構成

~/.claude/skills/video-wrapper/
├── src/
│   ├── video_processor.py    # 主处理脚本
│   ├── browser_renderer.py   # Playwright 渲染器
│   ├── content_analyzer.py   # 内容分析器
│   ├── fancy_text.py         # PIL 花字（备用）
│   └── term_card.py          # PIL 卡片（备用）
├── templates/
│   ├── fancy-text.html       # 花字模板
│   ├── term-card.html        # 名词卡片模板
│   ├── lower-third.html      # 人物条模板
│   ├── chapter-title.html    # 章节标题模板
│   ├── quote-callout.html    # 金句卡片模板
│   ├── animated-stats.html   # 数据动画模板
│   └── bullet-points.html    # 要点列表模板
├── static/
│   ├── css/
│   │   ├── effects.css       # 基础效果
│   │   ├── theme-notion.css  # Notion 主题
│   │   ├── theme-cyberpunk.css
│   │   ├── theme-apple.css
│   │   └── theme-aurora.css
│   └── js/
│       └── anime.min.js      # Anime.js
└── requirements.txt

注意事項

• 動画の処理には時間がかかるため、しばらくお待ちください
• 出力動画を保存するための十分なディスク容量を確保してください
• Playwright はより良いレンダリング結果を得られますが、Chromium のインストールが必要です
• Playwright を利用できない場合は、自動的に PIL によるレンダリングに切り替わります