Kiratuu/Video-Wrapper-Skills

Interview-Videoprozessor

Ein Tool zur Videobearbeitung mit Python + Playwright + MoviePy, das hochwertige visuelle Effekte mit HTML/CSS/Anime.js rendert.

Arbeitsablauf

Erster Schritt: Analyse des Untertiteltexts

Wenn der Benutzer eine Video- und eine Untertiteldatei bereitstellt, analysiert das Tool den Untertiteltext und generiert Effektvorschläge:

1. Liest die Untertiteldatei (.srt)
2. Analysiert den Inhalt und identifiziert:
   • Gästeinformationen (für Personenleisten)
   • Themenwechsel (für Kapitelüberschriften)
   • Schlüsselwörter und Begriffe (für überlagerten Text)
   • Fachbegriffe (für Begriffskarten)
   • Hervorragende Zitate (für Zitatkarten)
   • Zahlen und Daten (für Datenanimationen)
   • Kernpunkte (für Aufzählungspunkte)
3. Generiert eine Liste von Vorschlägen, die dem Benutzer zur Prüfung vorgelegt werden

Zweiter Schritt: Benutzerprüfung

Die Vorschläge werden dem Benutzer im Markdown-Format angezeigt:

## Vorschläge für visuelle Effekte

**Thema**: notion

### 1. Personenleiste (Lower Third)
- **Name**: Dario Amodei
- **Rolle**: CEO
- **Firma**: Anthropic
- **Erscheinungszeitpunkt**: 1000ms

### 2. Überlagerter Text (Fancy Text)
1. **Allgemeine künstliche Intelligenz** (Hervorhebung)
   Zeit: 2630ms - 5500ms
   Grund: Erstmalige Erwähnung des Kernkonzepts

...

Der Benutzer kann:

• Alle Vorschläge bestätigen
• Einige Vorschläge ändern
• Nicht benötigte Komponenten löschen
• Neue Komponenten hinzufügen

Dritter Schritt: Konfiguration generieren und rendern

Basierend auf den genehmigten Vorschlägen wird eine config.json generiert und das Video gerendert.

Verfügbare Komponenten

Komponente	Verwendung	Konfigurationsfelder
Personenleiste (lower_third)	Gästeinformationen anzeigen	name, role, company, startMs, durationMs
Kapitelüberschrift (chapter_title)	Themenwechsel-Titel	number, title, subtitle, startMs, durationMs
Überlagerter Text (fancy_text)	Aktuelle Aussage zusammenfassen	text, style, startMs, endMs, position
Begriffskarte (term_card)	Begriff erklären	chinese, english, description, firstAppearanceMs
Zitatkarte (quote_callout)	Hervorragende Aussage hervorheben	text, author, startMs, durationMs, position
Datenanimation (animated_stats)	Zahlen anzeigen	prefix, number, unit, label, startMs
Aufzählungspunkte (bullet_points)	Kernpunkte zusammenfassen	title, points[], startMs, durationMs
Soziale-Medien-Leiste (social_bar)	Folgen-Lenkung	platform, label, handle, startMs, durationMs

Nutzungsregeln für überlagerten Text

⚠️ Wichtig: Der überlagerte Text muss folgende Regeln einhalten:

1. Muss eine Phrase sein: Fassen Sie die aktuelle Aussage des Sprechers kurz zusammen

   • ✅ Richtig: «KI-Entwicklung ist eine glatte exponentielle Kurve» «Intelligenzwachstum ähnlich dem Mooreschen Gesetz»
   • ❌ Falsch: «Künstliche Intelligenz» «Mooresches Gesetz» (das sind Wörter, die in die Begriffskarte gehören)

2. Ergänzt die Begriffskarte:

   • Überlagerter Text: Fasst Aussage zusammen (z.B. «Intelligenz verdoppelt sich jährlich»)
   • Begriffskarte: Erklärt den Begriff (z.B. «Mooresches Gesetz: Die Anzahl der Transistoren auf einem Chip verdoppelt sich alle 18-24 Monate»)

3. Position oben: Standardmäßig im oberen Bildschirmbereich (über dem Untertitel), um Gesichter nicht zu verdecken

Nutzungsregeln für die Soziale-Medien-Leiste

• Standard-Anzeigedauer: 8 Sekunden (länger als andere Komponenten, damit Benutzer sie sich merken können)
• Tritt normalerweise am Ende des Videos auf
• Unterstützte Plattformen: twitter, weibo, youtube

Themensystem

Unterstützt 4 visuelle Themen:

Thema	Stil	Anwendungsfall
notion	Warmer Wissensstil	Bildung, Wissensaustausch
cyberpunk	Neon-Zukunftslook	Technologie, zukunftsweisende Themen
apple	Minimalistisch-elegant	Geschäftlich, professionelle Interviews
aurora	Farbverlauf-Lichtstrom	Kreativ, künstlerische Inhalte

Konfigurationsdatei-Format

{
  "theme": "notion",
  "lowerThirds": [
    {
      "name": "Dario Amodei",
      "role": "CEO",
      "company": "Anthropic",
      "startMs": 1000,
      "durationMs": 5000
    }
  ],
  "chapterTitles": [
    {
      "number": "Teil 1",
      "title": "Die Essenz des exponentiellen Wachstums",
      "subtitle": "The Nature of Exponential Growth",
      "startMs": 0,
      "durationMs": 4000
    }
  ],
  "keyPhrases": [
    {
      "text": "Allgemeine künstliche Intelligenz",
      "style": "emphasis",
      "startMs": 2630,
      "endMs": 5500
    }
  ],
  "termDefinitions": [
    {
      "chinese": "摩尔定律",
      "english": "Moore's Law",
      "description": "Die Anzahl der Transistoren auf einem Chip verdoppelt sich alle 18-24 Monate",
      "firstAppearanceMs": 37550,
      "displayDurationSeconds": 6
    }
  ],
  "quotes": [
    {
      "text": "Die Entwicklung der KI ist eine sehr glatte exponentielle Kurve",
      "author": "— Dario Amodei",
      "startMs": 30000,
      "durationMs": 5000
    }
  ],
  "stats": [
    {
      "prefix": "Wachstumsrate ",
      "number": 240,
      "unit": "%",
      "label": "Jährlicher Anstieg der Rechenleistung",
      "startMs": 45000,
      "durationMs": 4000
    }
  ],
  "bulletPoints": [
    {
      "title": "Kernaussage",
      "points": [
        "KI-Entwicklung ist eine glatte exponentielle Kurve",
        "Intelligenzwachstum ähnlich dem Mooreschen Gesetz",
        "Kein plötzlicher Singularitätsmoment"
      ],
      "startMs": 50000,
      "durationMs": 6000
    }
  ]
}

Abhängigkeiten installieren

# In die virtuelle Umgebung wechseln
cd ~/.claude/skills/video-wrapper
source venv/bin/activate

# Abhängigkeiten installieren
pip install -r requirements.txt

# Playwright-Browser installieren
playwright install chromium

Befehlszeilenverwendung

# Mit Browser-Renderer (empfohlen)
python src/video_processor.py video.mp4 subs.srt config.json output.mp4

# Renderer angeben
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

Technische Umsetzung

• Visuelles Rendering: HTML + CSS + Anime.js (via Playwright-Screenshots)
• Videosynthese: MoviePy
• Animations-Engine: Anime.js (Spring-Physik-Animationen)
• Fallback-Rendering: Python PIL

Dateistruktur

~/.claude/skills/video-wrapper/
├── src/
│   ├── video_processor.py    # Hauptverarbeitungsskript
│   ├── browser_renderer.py   # Playwright-Renderer
│   ├── content_analyzer.py   # Inhaltsanalysator
│   ├── fancy_text.py         # PIL-Überlagerter Text (Fallback)
│   └── term_card.py          # PIL-Karte (Fallback)
├── templates/
│   ├── fancy-text.html       # Vorlage für überlagerten Text
│   ├── term-card.html        # Vorlage für Begriffskarte
│   ├── lower-third.html      # Vorlage für Personenleiste
│   ├── chapter-title.html    # Vorlage für Kapitelüberschrift
│   ├── quote-callout.html    # Vorlage für Zitatkarte
│   ├── animated-stats.html   # Vorlage für Datenanimation
│   └── bullet-points.html    # Vorlage für Aufzählungspunkte
├── static/
│   ├── css/
│   │   ├── effects.css       # Basiseffekte
│   │   ├── theme-notion.css  # Notion-Thema
│   │   ├── theme-cyberpunk.css
│   │   ├── theme-apple.css
│   │   └── theme-aurora.css
│   └── js/
│       └── anime.min.js      # Anime.js
└── requirements.txt

Hinweise

• Die Videoverarbeitung kann eine Weile dauern, bitte haben Sie Geduld
• Stellen Sie sicher, dass genügend Speicherplatz für die Ausgabedatei vorhanden ist
• Playwright liefert bessere Rendering-Ergebnisse, erfordert aber die Installation von Chromium
• Wenn Playwright nicht verfügbar ist, wird automatisch auf PIL-Rendering zurückgegriffen