Create Template Video（中文版）

Convertissez un contenu chinois en une courte vidéo verticale (9:16) ou horizontale (16:9). La conception et les animations sont entièrement gérées par les modèles HyperFrames dans templates/. Vous ne faites que remplir les champs de texte et le script.json.

Informations d'installation locale (environnement DSH, à lire impérativement)

PROJECT_DIR = /Users/ming/.agents/skills/create-template-video-zh (corps de la compétence + pipeline + modèles ; node_modules lié symboliquement à la version vietnamienne, dépendances partagées)
Structure des répertoires : SKILL.md, templates/ (17 modèles + CATALOG.md), src/ (CLI/pipeline), package.json, .env (point de terminaison TTS chinois).
Mappage des outils : l'original utilise les noms d'outils Claude Code, ici ils correspondent à DSH : WebFetch → web_fetch, Read → read, Write → write, Bash → bash.
Dépendances d'environnement : ffmpeg/ffprobe ✓, Chrome ✓, Node ✓.
TTS chinois déployé localement : OmniVoice (MPS) + voix de clonage mandarin voice-zh.pt, fonctionnant sur le port 8124 (la version vietnamienne utilise fixement le 8123, les deux versions ne se gênent pas) :
```
bash "$HOME/.agents/skills/create-template-video-zh/scripts/start-tts-zh.sh"
```
Le script vérifie /health, lance le service en arrière-plan et attend qu'il soit prêt (environ 4 s). Les journaux sont dans /tmp/omnivoice-zh.log. Une fois démarré, confirmez d'abord avec une sonde en chinois :
```
curl -s -X POST http://127.0.0.1:8124/tts -H 'Content-Type: application/json' \
  -d '{"text":"大家好，这是中文配音测试。"}' -o /tmp/zh-probe.mp3 && ls -l /tmp/zh-probe.mp3
```
000/pas de connexion = non démarré ; si ça ne démarre pas, arrêtez-vous et informez l'utilisateur, ne créez pas de faux fichiers audio. Répertoire du service et notes de déploiement : /Users/ming/Documents/dsh_workspace/omnivoice (SETUP.md).
Le premier rendu téléchargera HyperFrames via npx -y [email protected] (nécessite une connexion Internet, environ 15–20 s par scène ; 8–10 scènes totalisent 3–5 minutes).
Langue : tout le film en chinois. Le texte à l'écran peut être un mélange chinois-anglais (AI, GPT, Apple sont conservés), mais voiceText doit être en chinois, et les chiffres doivent être écrits en caractères chinois selon les règles ci-dessous.

Entrée

1 paramètre : une URL d'article (http:///https://) ou le chemin d'un fichier .txt.

Workflow (strictement dans l'ordre)

Étape 1–3 : Récupérer le contenu + créer le répertoire de sortie

URL → web_fetch pour récupérer le corps, extraire title, content (800–2000 caractères), ogImage (og:image ou null), domain. Échec (paywall/JS pur/4xx) → demander à l'utilisateur d'enregistrer le corps dans un fichier .txt puis relancer, puis arrêter.
.txt → read pour lire ; title = première ligne (≤40 caractères), content = reste du corps, ogImage = null, domain = "local".
slug : priorité aux mots-clés anglais ou pinyin (≤40 caractères, [a-z0-9-]), par exemple xiaomi-17-price, ai-coding-jobs. Si le titre purement chinois ne peut pas être directement converti en ASCII, vous écrivez le pinyin ; en dernier recours, utilisez zh-video (également présent comme repli dans le code). timestamp = YYYYMMDD-HHmm ; outputDir = <répertoire de travail actuel>/videos/<slug>-<timestamp>/ — placé dans le répertoire de travail : pratique pour la livraison, et ne pollue pas le répertoire de la compétence (le bac à sable DSH autorise généralement l'écriture uniquement dans le répertoire de travail). mkdir -p. L'emplacement de la bibliothèque d'effets sonores est pointé par SFX_DIR dans .env vers assets/sfx dans la compétence, qui est découplé du répertoire de sortie ; si la bibliothèque d'effets sonores est vide, cette couche est automatiquement ignorée, n'affectant pas le flux principal.

Étape 4 : Lire le répertoire des modèles

Lisez PROJECT_DIR/templates/CATALOG.md pour confirmer les modèles et leurs emplacements. Vous ne pouvez utiliser que les templateId du CATALOG. Liste actuelle :

HOOK (un seul) : frame-liquid-bg-hero — taches d'aurore + grand titre + CTA.

BODY (choisissez en fonction du contenu, voir Étape 5) :

frame-vignelli — 1 chiffre, fond charbon sombre + rouge.
frame-pentagram-stat — 1 chiffre/référence, fond sombre néon (grille suisse, chiffre orange lumineux + accent cyan + graphique à barres).
frame-bold-poster — déclaration forte sur plusieurs lignes + grand chiffre.
frame-build-minimal — phrase choc courte, fond sombre + un mot très grand et gras (glow orange, apparaît lettre par lettre).
frame-creative-voltage — slogan créatif, séparation bleue électrique + écriture manuscrite.
frame-glitch-title — distorsion cyberpunk RGB (fond bruité), adapté aux infos surprises/technologies.
frame-aicoding-list — liste de 2 à 5 éléments (chaque icône + étiquette de niveau), fond dégradé sombre.
frame-aicoding-comparison — comparaison A vs B (deux cartes dégradées + badge WIN + données).
vfx-text-cursor — mot déformé + curseur clignotant, adapté à une déclaration forte/citation (peut surligner un mot).
frame-light-leak-cinema — halo cinéma + grain pellicule + titre serif, adapté aux cartes d'introduction/cartes de chapitre émotionnelles.
frame-bold-signal — carte de chapitre/segment, fond sombre + grande carte orange + grand numéro de chapitre + fil d'Ariane.
frame-data-chart-nyt — graphique en courbes, fond papier style NYT, utilise data[{label,value}] pour dessiner la courbe en temps réel, la fin peut être marquée d'un point d'inflexion en rouge pointillé.
frame-decision-tree — arbre de décision, une question + deux branches + deux cartes de conclusion, idéal pour dire « faut-il/lequel choisir ».
frame-swiss-grid — grille suisse, fond papier + grand titre + trois chiffres, adapté à une page de conclusion avec « un jugement + trois nombres ».

OUTRO : frame-logo-outro (par défaut : logo glow + marque + tagline + url) ; frame-statement-outro (alternative : fond papier carte rouge).

Les 17 modèles ont leurs exemples intégrés (data-composition-variables) remplacés par des exemples en chinois. Vous pouvez voir le résultat final directement dans l'aperçu, ou les copier dans script.json pour les modifier. Mais lors du rendu, veuillez passer explicitement les inputs : si vous ne passez pas de paramètres, l'exécution ne pourra pas récupérer les variables et le texte sera vide.

Les 17 modèles ont des versions 9:16 et 16:9 (compositions/portrait.html et index.html), l'aspect en haut du script.json détermine quelle version est utilisée pour l'ensemble du film ; les carrés (1:1) ne sont pas encore fournis.

Étape 5 : Générer script.json

{
    "version": "1.0",
    "renderer": "hyperframes",
    "aspect": "9:16",   /* ou "16:9" ; les deux ratios ont des mises en page correspondantes pour chaque modèle */
    "metadata": {
        "title": "...",
        "source": { "url": "...", "domain": "...", "image": null },
        "channel": "Nom de la chaîne chinoise"
    },
    "voice": { "provider": "omnivoice", "speed": 1.0 },
    "scenes": [
        /* 8–12 scènes : 1 hook + 6–10 body + 1 outro */
    ]
}

provider fixé à omnivoice (TTS local, pas besoin de voiceId/clé API).
Chaque scène : { id, type, voiceText, templateId, inputs } ; inputs doit couvrir les emplacements obligatoires de ce modèle dans le CATALOG.
scenes[0].type = "hook" ; scenes[-1].type = "outro" (frame-logo-outro).
8–12 scènes ; voiceText totalise environ 350–450 caractères (≈90–120 s, vitesse de parole chinoise d'environ 4,5 caractères/s ; la durée finale est basée sur le doublage, le pipeline s'aligne sur le doublage). Chaque scène body 30–45 caractères, ne parle que d'un seul point ; si un paragraphe a deux points, divisez-le en deux scènes. Objectif : chaque scène dure 6–10 s.

Contenu → mappage des modèles :

hook → fixe frame-liquid-bg-hero (emplacements : kicker, headline, subheadline, cta, brand). headline a un dégradé jaune→violet par défaut, modifiable avec headline_from/headline_to (deux hexadécimaux) pour changer les teintes.
body → choisissez le modèle le plus adapté au contenu, et variez autant que possible, n'utilisez pas le même pour tous les body :
- frame-vignelli : scène avec 1 chiffre à souligner (kicker, number, label, note, brand).
- frame-pentagram-stat : a 1 chiffre de référence/pourcentage + sensation de graphique à barres (label, headline=chiffre, subtitle, anchor, footer_left, footer_right).
- frame-build-minimal : phrase choc courte/un mot-clé (eyebrow, hero=un seul mot, desc, side_left, side_right).
- frame-bold-poster : déclaration forte sur plusieurs lignes + grand chiffre (kicker, date, figure, headline[], standfirst, footer_left, footer_right). La 2e ligne de headline devient automatiquement rouge.
- frame-creative-voltage : slogan créatif (meta, display_lines, accent_index, script, caption).
- frame-glitch-title : sensation d'urgence/technologique/effrayante (title, subtitle).
- frame-aicoding-list : liste/comparaison de 2 à 5 éléments (title, accent, accent_from, accent_to, subtitle, items[]). Chaque élément {icon, title, desc, tag, level} : icon choisi par vous parmi les emoji (🚫 ⚠️ ✅ ❌ 📈 💡 🔒 🚀 …) ; level ∈ danger|warn|good|info détermine la couleur ; tag utilise une étiquette courte en chinois (高危 / 注意 / 利好 / 稳健) ; accent_from/accent_to choisis par vous (deux hexadécimaux).
- frame-aicoding-comparison : pour comparer exactement deux choses (badge, pre, vs, post, left{}, right{}). Chaque côté {label, from, to, icon?, bullets[], stat?, stat_label?, win?} ; from/to sont deux hexadécimaux de dégradé (un contraste chaud/froid est meilleur) ; win: true marque le gagnant.
- vfx-text-cursor : une déclaration forte/citation, mot déformé + curseur (line1, line2, line3, accent, byline, header_* , footer_*). accent est le mot à surligner dans line2.
- frame-light-leak-cinema : carte d'introduction/chapitre émotionnelle, halo cinéma + titre serif (kicker, title_line1, title_line2, subtitle, header_, footer_).
- frame-bold-signal : séparation de chapitre/déclaration forte (section, nav[], card_label, title, footer).
- frame-data-chart-nyt : pour les tendances/croissances, graphique en courbes (kicker, title, highlight, subtitle, data[{label,value}], unit, accent_tail, source_*).
- frame-decision-tree : pour dire « faut-il/lequel choisir » (kicker, question, yes{label,tag,title,desc}, no{...}, footer_*). Seulement deux branches.
- frame-swiss-grid : page de conclusion, un jugement + trois nombres (label, title, subtitle, stats[{value,label}], accent_index, footer_*).
- Conseils de rythme : quand il y a beaucoup de scènes avec des chiffres, alternez frame-vignelli (charbon + rouge/jaune) avec frame-pentagram-stat (néon sombre orange/cyan) ; pour les scènes sans chiffres, utilisez frame-build-minimal.
outro → frame-logo-outro (brand_name, tagline, primary_url).

Ratio d'image (aspect, cohérent pour tout le film) :

"9:16" (par défaut, Douyin/WeChat Video/Shorts) → chaque modèle rend compositions/portrait.html.
"16:9" (Bilibili/YouTube/intégré horizontal) → rend index.html (version horizontale du modèle).
"1:1" (carré pour flux d'informations) → nécessite compositions/square.html ; actuellement, aucun des 17 modèles n'a de version carrée, choisir 1:1 reviendra à 16:9 avec un avertissement WARN, le rapport d'image sera incorrect — pour un carré, ajoutez d'abord square.html.
Les deux ratios partagent les mêmes noms d'emplacements, le texte peut être réutilisé tel quel ; la seule différence est la largeur de la ligne : 16:9 peut contenir 20–24 caractères par ligne, 9:16 reste à 10–14 caractères.
Le doublage, la durée et la logique d'assemblage sont indépendants du ratio.

Règles de typographie chinoise (texte à l'écran `inputs`)

Le chinois « prend plus de place » que l'anglais/le vietnamien : limitez une ligne à 10–14 caractères chinois (16:9 horizontal peut aller jusqu'à 20–24 caractères), dépassez et passez à la ligne ou coupez ; headline a un maximum de 3 lignes. Mieux vaut un mot de moins que deux lignes et demie.
La police des modèles est Inter Tight + system-ui, le chinois revient à PingFang SC, généralement correct ; si le rendu montre des carrés/tofu, insérez "PingFang SC", "Noto Sans SC", au début de font-family dans compositions/portrait.html de ce modèle et refaites le rendu.
Le chinois n'a pas besoin d'espaces entre les mots ; n'ajoutez pas manuellement de letter-spacing négative en chinois, le -3px par défaut du modèle peut coller les caractères ; si le titre semble serré, écrasez avec letter-spacing: -1px sur cette classe.
Le texte à l'écran autorise les emoji, mais 0–1 par champ, ne les mettez pas dans les champs à apparition lettre par lettre (comme hero dans frame-build-minimal), sinon l'animation se cassera.
Les chiffres à l'écran conservent un format agréable (4499 元, 82.7%, 17), ne les convertissez en caractères chinois que dans voiceText.

Règles du TTS chinois (`voiceText` impératif)

OmniVoice lit caractère par caractère ; les chiffres arabes, les points décimaux et les symboles monétaires sont souvent lus de manière incorrecte ou en anglais. Par conséquent, dans voiceText, écrivez tous les chiffres en caractères chinois ; inputs (texte à l'écran) conserve les chiffres.

Forme	Exemple incorrect	Écriture correcte
Décimale	`82.7%`	`百分之八十二点七`
Numéro de version	`iOS 18.2`	`iOS 十八点二`
Modèle de produit	`小米 17`	`小米十七`
Pixel	`200MP`	`两百万像素`
Capacité de la batterie	`5000mAh`	`五千毫安时`
Ordre de grandeur	`1M tokens`	`一百万 token`
Yuan	`¥4499`	`四千四百九十九元`
Dollar	`$5`	`五美元`
Multiple	`2x`	`两倍`
Pourcentage	`30%`	`百分之三十`
Durée	`60s`	`六十秒`
Ratio	`3:1`	`三比一`
Année	`2026 年`	`二零二六年`
Billion	`21 万亿`	`二十一万亿`
Classement	`Top 3`	`前三名`

Testez d'abord les abréviations anglaises avec une sonde avant de décider : AI, GPT, API, 5G, GPU sont parfois lus lettre par lettre ("A-I"), parfois comme des mots anglais. Avant de les intégrer dans tout le film, utilisez une sonde pour lire simultanément deux phrases à comparer : AI 很强大 vs 人工智能很强大, choisissez l'écriture qui sonne naturelle, et uniformisez pour tout le film.
Les noms de marque sont conservés (Apple, OpenAI, 小米), les marques chinoises s'écrivent directement en chinois.
voiceText interdit formellement : emoji/icônes, URL, et symboles comme & % $ # + = / ; utilisez 。 ou ？ en fin de phrase pour une pause naturelle ; utilisez ， pour les virgules.
Uniformisez l'utilisation de "两" ou "二" : pour les quantificateurs oraux, utilisez "两" (两千, 两万, 两倍), pour les nombres ordinaux/années, utilisez "二" (二零二六年, 第二季度).

Étape 6 : Auto-vérification

scenes[0] est un hook, le dernier est un outro ; chaque templateId est dans le CATALOG ; chaque inputs couvre les emplacements obligatoires ;
Largeur de ligne chinoise ≤14 caractères, headline ≤3 lignes ; voiceText ne contient pas de chiffres arabes/symboles/emoji ; les emoji n'apparaissent que dans inputs ; l'utilisation des mots et la prononciation des abréviations sont cohérentes ;
voiceText totalise 350–450 caractères. Maximum de 2 tours de correction silencieuse.

Étape 7 : Écrire script.json

Utilisez l'outil write pour écrire dans <outputDir>/script.json (faites d'abord mkdir -p pour le répertoire de sortie).

Étape 8 : Exécuter le pipeline

Démarrez d'abord le TTS chinois (voir le début) et confirmez que la sonde a produit un fichier audio, puis exécutez au premier plan :

cd "$HOME/.agents/skills/create-template-video-zh" && npm run pipeline -- "<outputDir>/script.json"

Le CLI suit le pipeline de modèles avec renderer: "hyperframes" : TTS → rendu par modèle → alignement sur la durée du doublage → assemblage + mixage. En cas d'échec, signaler clairement l'erreur et donner le chemin outputDir (les fichiers déjà rendus voice/scene-*.mp3, clips/scene-*.mp4 seront réutilisés, supprimez-les pour refaire le rendu).

Lors d'une nouvelle exécution après avoir modifié le texte chinois, supprimez d'abord les voice/scene-*.mp3 correspondants, sinon les anciens doublages seront réutilisés.

Étape 9 : Livraison

Copiez les trois fichiers finaux dans le répertoire de travail de la session pour que l'utilisateur puisse les ouvrir directement :

mkdir -p "<cwd>/videos/<slug>" && cp "<outputDir>"/{video.mp4,voice.mp3,script.txt} "<cwd>/videos/<slug>/"

Puis faites un rapport (avec des liens cliquables) :

✓ Video : videos/<slug>/video.mp4
✓ Audio : videos/<slug>/voice.mp3 — pour Jianying (sous-titres automatiques/synchronisation labiale)
✓ Script : videos/<slug>/script.txt — texte du storyboard, facile à modifier manuellement
Durée totale : XX.Xs

Remarques

Le rendu de chaque scène prend environ 15–20 s (Chromium) ; 8–10 scènes prennent environ 3–5 minutes.
Le TTS est idempotent (conserve voice/scene-*.mp3), le découpage aussi (conserve clips/scene-*.mp4).
Le TTS chinois sur M2 Max a un RTF (taux en temps réel) d'environ 2.8 : 1 minute de film fini nécessite environ 3 minutes de TTS pur. Pour accélérer, réglez OMNIVOICE_STEPS sur 16 (qualité légèrement réduite, durée divisée par deux) et redémarrez.
Si assets/sfx est vide, les effets sonores sont de niveau 0 et n'affectent pas le flux principal ; pour des effets sonores, exécutez npm run sfx:download (nécessite Internet) puis générez (téléchargement par défaut dans assets/sfx/ de la compétence, c'est-à-dire l'emplacement pointé par SFX_DIR dans .env). Les mots-clés sémantiques ont été ajoutés en chinois (警告/失败/纪录/首次/倒计时/史诗/悬念…).
Différences avec la version vietnamienne create-template-video : port TTS 8124 + timbre chinois, tableau de lecture des chiffres chinois, contraintes de typographie chinoise, mots-clés SFX chinois, repli du slug zh-video. Le code est une copie indépendante (seul node_modules est lié symboliquement à la version vietnamienne) ; modifier les modèles/le pipeline n'affecte que ce répertoire. Si vous supprimez la version vietnamienne, pensez à npm ci pour reconstruire les dépendances.
Nouveaux modèles : suivez les instructions à la fin de templates/CATALOG.md, puis ajoutez une ligne dans le CATALOG.

ming-xwolf/create-template-video-zh

Qu'est-ce que create-template-video-zh ?

Demander à votre IA préférée

Documentation