ming-xwolf/create-template-video-zh

Create Template Video (versión en chino)

Convierte contenido en chino en un vídeo corto vertical 9:16. El diseño y la animación los gestionan las plantillas HyperFrames en templates/; tú solo escribes los campos de texto y el script.json.

Información de instalación local (entorno DSH, léelo primero)

• PROJECT_DIR = /Users/ming/.agents/skills/create-template-video-zh (skill + pipeline + plantillas; node_modules enlazado simbólicamente a la versión en vietnamita, dependencias compartidas)

• Estructura de directorios: SKILL.md, templates/ (11 plantillas + CATALOG.md), src/ (CLI/pipeline), package.json, .env (endpoint TTS chino).

• Mapeo de herramientas: en Claude Code se usan nombres de herramientas, aquí en DSH: WebFetch → web_fetch, Read → read, Write → write, Bash → bash.

• Dependencias de entorno: ffmpeg/ffprobe ✓, Chrome ✓, Node ✓.

• TTS chino desplegado localmente: OmniVoice (MPS) + clon de voz mandarín voice-zh.pt, ejecutándose en el puerto 8124 (la versión en vietnamita usa fijo el 8123, no interfieren):

  bash "$HOME/.agents/skills/create-template-video-zh/scripts/start-tts-zh.sh"
  

  El script comprueba /health, inicia el servicio en segundo plano y espera hasta que esté listo (~4 s); el registro está en /tmp/omnivoice-zh.log. Una vez iniciado, confirma con una sonda en chino:

  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
  

  Si devuelve 000/no se conecta = no iniciado; si no arranca, informa al usuario y no generes audio falso. Directorio del servicio y notas de despliegue: /Users/ming/Documents/dsh_workspace/omnivoice (SETUP.md).

• En el primer renderizado, npx -y [email protected] descargará HyperFrames (requiere conexión a internet, cada escena tarda ~15–20 s; 8–10 escenas suman 3–5 minutos).

• Idioma: todo el vídeo en chino. Los textos en pantalla pueden mezclar chino e inglés (AI, GPT, Apple se mantienen igual), pero voiceText debe estar en chino; los números se escriben en caracteres chinos según las reglas siguientes.

Input

1 parámetro: URL de noticia (http:///https://) o ruta de archivo .txt.

Workflow (estrictamente en orden)

Paso 1–3: Obtener contenido + crear directorio de salida

• URL → web_fetch para obtener el texto principal, extrae title, content (800–2000 caracteres), ogImage (og:image o null), domain. Si falla (muro de pago/JS puro/4xx) → pide al usuario que guarde el texto en .txt y vuelva a ejecutar; luego detente.
• .txt → read para leerlo; title = primera línea (≤40 caracteres), content = texto restante, ogImage = null, domain = "local".
• slug: prioriza palabras clave en inglés o pinyin (≤40 caracteres, [a-z0-9-]), por ejemplo xiaomi-17-price, ai-coding-jobs. Si el título en chino puro no se puede convertir a ASCII, escribe el pinyin; si no hay opción, usa zh-video (también hay una retrollamada en el código). timestamp = YYYYMMDD-HHmm; outputDir = <directorio de trabajo actual>/videos/<slug>-<timestamp>/ — dentro del espacio de trabajo: así es fácil entregar y no contamina el directorio de la skill (los sandboxes DSH suelen permitir solo escribir en el workspace). mkdir -p. La ubicación de la librería de efectos de sonido la indica SFX_DIR en .env apuntando a assets/sfx dentro de la skill, desacoplada del directorio de salida; si la librería está vacía, esa capa se omite automáticamente sin afectar el flujo principal.

Paso 4: Leer el directorio de plantillas

Lee PROJECT_DIR/templates/CATALOG.md para confirmar las plantillas y sus campos. Solo se pueden usar los templateId que aparecen en CATALOG. Las existentes son:

HOOK (solo esta): frame-liquid-bg-hero — destello aurora + título grande + CTA.

BODY (elige según el contenido, ver Paso 5):

• frame-vignelli — 1 número, fondo gris oscuro + rojo.
• frame-pentagram-stat — 1 número/línea base, fondo oscuro neón (cuadrícula suiza, números naranja brillante + toques cian + gráfico de barras).
• frame-bold-poster — declaración fuerte en varias líneas + número grande.
• frame-build-minimal — frase corta impactante, fondo oscuro + una palabra enorme en negrita (glow naranja, aparece letra por letra).
• frame-creative-voltage — eslogan creativo, división azul eléctrico + escritura a mano.
• frame-glitch-title — fallo RGB cyberpunk (fondo granuloso), ideal para noticias de última hora/tecnología.
• frame-aicoding-list — lista de 2–5 ítems (cada uno con icono + etiqueta de nivel), fondo degradado oscuro.
• frame-aicoding-comparison — comparación A vs B (dos tarjetas degradadas + insignia WIN + datos).

OUTRO: frame-logo-outro (por defecto: logo glow + marca + tagline + url); frame-statement-outro (alternativa: fondo papel con tarjeta roja).

Los valores de ejemplo (data-composition-variables) incluidos en las 11 plantillas ya están todos en chino, por lo que puedes ver el resultado final en la previsualización o copiarlos directamente en script.json y modificarlos. Pero al renderizar, pasa inputs explícitamente: si no se pasan parámetros, el runtime no obtendrá las variables y el texto aparecerá vacío.

Paso 5: Generar script.json

{
    "version": "1.0",
    "renderer": "hyperframes",
    "aspect": "9:16",
    "metadata": {
        "title": "...",
        "source": { "url": "...", "domain": "...", "image": null },
        "channel": "Nombre del canal en chino"
    },
    "voice": { "provider": "omnivoice", "speed": 1.0 },
    "scenes": [
        /* 8–12 escenas: 1 hook + 6–10 body + 1 outro */
    ]
}

• provider fijo como omnivoice (TTS local, no necesita voiceId/API key).
• Cada escena: { id, type, voiceText, templateId, inputs }; inputs debe cubrir los campos obligatorios de esa plantilla en CATALOG.
• scenes[0].type = "hook"; scenes[-1].type = "outro" (frame-logo-outro).
• 8–12 escenas; voiceText total aproximadamente 350–450 caracteres (≈90–120 s, velocidad del chino hablado ~4.5 caracteres/s; la duración final la determina la locución, el pipeline la alinea). Cada escena de cuerpo 30–45 caracteres, solo un punto; si un párrafo tiene dos puntos, divídelo en dos escenas. Objetivo: cada escena dura 6–10 s.

Mapeo contenido → plantilla:

• hook → fijo frame-liquid-bg-hero (campos: kicker, headline, subheadline, cta, brand). headline por defecto degradado amarillo→violeta; puedes usar headline_from/headline_to (dos hex) para cambiar el tono.
• body → tú eliges la plantilla más adecuada según el contenido, y procura variar, no uses la misma para todos los body:
  • frame-vignelli: cuando la escena tiene 1 número a destacar (kicker, number, label, note, brand).
  • frame-pentagram-stat: cuando hay 1 número de referencia/porcentaje + sensación de gráfico de barras (label, headline=número, subtitle, anchor, footer_left, footer_right).
  • frame-build-minimal: frase corta impactante/una palabra clave (eyebrow, hero=una sola palabra, desc, side_left, side_right).
  • frame-bold-poster: declaración fuerte en varias líneas + número grande (kicker, date, figure, headline[], standfirst, footer_left, footer_right). La 2ª línea de headline se vuelve roja automáticamente.
  • frame-creative-voltage: eslogan creativo (meta, display_lines, accent_index, script, caption).
  • frame-glitch-title: noticias de última hora/tecnología/terror (title, subtitle).
  • frame-aicoding-list: lista/comparación de 2–5 ítems (title, accent, accent_from, accent_to, subtitle, items[]). Cada ítem {icon, title, desc, tag, level}: icon lo eliges tú (emoji: 🚫 ⚠️ ✅ ❌ 📈 💡 🔒 🚀 …); level ∈ danger|warn|good|info determina el color; tag usa etiqueta corta en chino (高危 / 注意 / 利好 / 稳健); accent_from/accent_to los eliges tú (dos hex).
  • frame-aicoding-comparison: justo para comparar dos cosas (badge, pre, vs, post, left{}, right{}). Cada lado {label, from, to, icon?, bullets[], stat?, stat_label?, win?}; from/to son dos hex para el degradado (mejor contraste frío/caliente entre lados); win: true marca al ganador.
  • Consejo de ritmo: cuando haya muchas escenas con números, alterna frame-vignelli (carbón+rojo/amarillo) con frame-pentagram-stat (neón naranja/cian oscuro); para escenas sin números, usa frame-build-minimal.
• outro → frame-logo-outro (brand_name, tagline, primary_url).

Reglas de maquetación en chino (texto en pantalla inputs)

• El chino ocupa más espacio que el inglés/vietnamita: limita cada línea a 10–14 caracteres chinos; si se pasa, salta de línea o recorta. headline como máximo 3 líneas. Mejor que falten dos caracteres a que quede apretado en dos líneas y media.
• La fuente de las plantillas es Inter Tight + system-ui; el chino usará PingFang SC como fallback; normalmente funciona bien; si al renderizar aparecen cuadrados (tofu), inserta "PingFang SC", "Noto Sans SC", al principio de font-family en el compositions/portrait.html de esa plantilla y vuelve a renderizar.
• El chino no necesita espacios entre palabras; no añadas manualmente letter-spacing negativo en chino; el -3px que traen las plantillas puede pegar los caracteres; si un título se ve apretado, sobrescribe con letter-spacing: -1px en esa clase.
• Se permiten emojis en el texto en pantalla, pero máximo 0–1 por campo; no los metas en campos que aparecen carácter por carácter (como hero en frame-build-minimal), porque la animación se rompe.
• Los números en pantalla mantienen un formato bonito (4499 元, 82.7%, 17); solo en voiceText se convierten a caracteres chinos.

Reglas del TTS chino (voiceText obligatorio)

OmniVoice lee carácter por carácter; los números arábigos, puntos decimales y símbolos de moneda a menudo se leen mal o en inglés. Por lo tanto, en voiceText escribe todos los números en caracteres chinos; en inputs (texto en pantalla) mantenlos como números.

Forma	Ejemplo incorrecto	Escritura correcta
Decimal	82.7%	百分之八十二点七
Versión	iOS 18.2	iOS 十八点二
Modelo de producto	小米 17	小米十七
Píxeles	200MP	两百万像素
Batería	5000mAh	五千毫安时
Magnitud	1M tokens	一百万 token
Yuan	¥4499	四千四百九十九元
Dólar	$5	五美元
Multiplicador	2x	两倍
Porcentaje	30%	百分之三十
Duración	60s	六十秒
Proporción	3:1	三比一
Año	2026 年	二零二六年
Billón	21 万亿	二十一万亿
Ranking	Top 3	前三名

• Abreviatura en inglés: prueba primero con una sonda y luego decide: AI, GPT, API, 5G, GPU a veces se leen letra por letra ("A-I") y otras como palabra inglesa en el TTS chino. Antes de incluirlas en todo el vídeo, usa la sonda para leer ambas versiones: AI 很强大 vs 人工智能很强大, elige la que suene más natural y úsala de forma coherente en todo el vídeo.
• Los nombres de marca se mantienen igual (Apple, OpenAI, 小米); las marcas chinas se escriben directamente en chino.
• voiceText tiene prohibido absolutamente: emojis/iconos, URLs, y símbolos como & % $ # + = /; usa 。 o ？ al final de la oración para que la pausa sea natural; la coma es ，.
• Unificación de "两" o "二": para cantidades coloquiales usa "两" (两千, 两万, 两倍); para ordinales/años usa "二" (二零二六年, 第二季度).

Paso 6: Autoverificación

• scenes[0] es hook, la última es outro; cada templateId está en CATALOG; cada inputs cubre los campos obligatorios;
• Ancho de línea en chino ≤14 caracteres, headline ≤3 líneas; voiceText no contiene números arábigos/símbolos/emojis; los emojis solo aparecen en inputs; el vocabulario y las abreviaturas son coherentes en todo el vídeo;
• voiceText suma 350–450 caracteres. Máximo 2 rondas de corrección silenciosa.

Paso 7: Escribir script.json

Usa la herramienta write para escribir en <outputDir>/script.json (primero mkdir -p el directorio de salida).

Paso 8: Ejecutar el pipeline

Primero inicia el TTS chino (ver al inicio) y confirma que la sonda haya generado audio; luego ejecuta en primer plano:

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

El CLI sigue renderer: "hyperframes" para el pipeline de plantillas: TTS → renderizar cada plantilla → alinear con la duración de la locución → concatenar + mezclar. Si falla, muestra un error claro y da la ruta de outputDir (los archivos ya renderizados voice/scene-*.mp3, clips/scene-*.mp4 se reutilizan; bórralos para volver a renderizar).

Al modificar el texto en chino y volver a ejecutar, primero borra los voice/scene-*.mp3 correspondientes; de lo contrario se reutilizará la locución antigua.

Paso 9: Entrega

Copia los tres archivos de salida al directorio de trabajo de la sesión, para que el usuario pueda abrirlos fácilmente:

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

Luego informa (con enlaces clicables):

✓ Video: videos/<slug>/video.mp4
✓ Audio: videos/<slug>/voice.mp3 — para CapCut (subtítulos automáticos/sincronización labial)
✓ Script: videos/<slug>/script.txt — texto de los planos, fácil de editar manualmente
Duración total: XX.Xs

Notas

• Cada escena tarda ~15–20 s en renderizarse (Chromium); 8–10 escenas ~3–5 minutos.
• El TTS es idempotente (conserva voice/scene-*.mp3), y los clips también (conserva clips/scene-*.mp4).
• El TTS chino en M2 Max tiene un RTF (factor de tiempo real) de ~2.8: 1 minuto de vídeo final requiere ~3 minutos de TTS puro. Para acelerar, establece OMNIVOICE_STEPS a 16 en el servidor (calidad ligeramente inferior, tiempo reducido a la mitad) y reinicia.
• Cuando assets/sfx está vacío, la capa de sonido se omite sin afectar el flujo principal; si se necesitan efectos, ejecuta npm run sfx:download (requiere internet) antes de generar (por defecto se descargan en assets/sfx/ dentro de la skill, es decir, donde apunta SFX_DIR en .env). Las palabras clave semánticas ya incluyen chino (警告/失败/纪录/首次/倒计时/史诗/悬念…).
• Diferencias con la versión en vietnamita create-template-video: puerto TTS 8124 + tono de voz chino, tabla de lectura de números en chino, restricciones de maquetación en chino, palabras clave SFX en chino, retrollamada zh-video para el slug. El código es una copia independiente (solo node_modules está enlazado simbólicamente a la versión en vietnamita); modificar plantillas/pipeline solo afecta a este directorio. Si eliminas la versión en vietnamita, recuerda ejecutar npm ci para reconstruir las dependencias.
• Para añadir nuevas plantillas: sigue las instrucciones al final de templates/CATALOG.md y luego añade una línea en CATALOG.