insaneyilin/html-video-demo

Video HTML y Narración Local

Entrega MP4 reproducible, subtítulos, storyboard HTML editable y configuración de generación. Todo se basa en el proyecto actual, los materiales, la voz y el estilo del usuario; estos scripts no están vinculados a ningún agente de IA, cuenta o API de servicio de modelos.

Antes de Empezar

• Lee la descripción del proyecto objetivo, los resultados existentes y las convenciones de trabajo local, y confirma la funcionalidad real y el alcance de la demostración. No muestres capacidades planificadas como si fueran interfaces ya implementadas.
• Especifica un directorio de proyecto de video independiente, manteniendo el código original, los datos de producción y los resultados antiguos recuperables. Al modificar un video existente, lee primero la configuración más reciente y haz una copia de seguridad de los resultados relevantes.
• Las voces ya confirmadas se reutilizan directamente. Al elegir una nueva voz, prioriza la misma prueba de un fragmento corto con igual volumen; no es necesario pedir al usuario que confirme las opciones ya seleccionadas.
• La primera vez que se ejecuta o al cambiar de máquina, lee Entorno y Comandos. La implementación de locución de este paquete requiere Apple Silicon / MLX; la entrada de renderizado de Node es independiente de la implementación de locución.

Flujo de Producción

1. Determina el contenido. Convierte las operaciones que el espectador necesita entender en storyboards con una relación causal clara. Cada escena tiene un mensaje principal, la narración es coloquial y la imagen conserva el texto clave. Decide el número de escenas y la duración total según el contenido, sin usar una plantilla fija de nueve escenas o dos minutos.
2. Prepara material real. Captura la interfaz con datos de demostración, capturas de pantalla parciales o la operación real. La forma de controlar el navegador sigue los requisitos del agente y del proyecto actual. Lee Imágenes y Materiales. No reutilices capturas de pantalla, información personal o direcciones internas de otros proyectos.
3. Determina la voz. Configura la voz, el estilo y el idioma en project.json; primero escucha una muestra corta de la nueva voz, luego genera por lotes. Agrupa párrafos semánticamente adyacentes en grupos de narración acotados, usando la misma voz, estilo y parámetros de muestreo. No cambies la semilla aleatoria frase por frase ni generes una síntesis infinitamente larga por defecto. Los principios de agrupación se encuentran en Narración y Alineación.
4. Verifica contenido y sincronización. Usa un ASR independiente para encontrar frases faltantes o repetidas, y luego usa alineación forzada para localizar el texto original. Ambos tienen funciones diferentes: la alineación da tiempo, pero no prueba que realmente se hayan dicho todas las palabras. Revisa homófonos, términos en inglés y las últimas palabras.
5. Organiza las imágenes según el sonido. Corta en las pausas reales, asegurando que la última palabra termine completamente, y deja tiempo de cierre adecuado para el contenido. Por defecto, aproximadamente un segundo es un punto de partida para explicaciones técnicas. El énfasis local y las grabaciones de operaciones siguen las marcas de voz, no los segundos fijos de versiones anteriores.
6. Renderiza con html-video. Primero verifica los fotogramas extraídos del HTML, luego exporta a través de ContentGraph, ProjectOrchestrator e Hyperframes. Los recursos externos deben ser localizados o incrustados; las animaciones usan window.__hvPlayAll(), evitando la reproducción anticipada durante la carga de fuentes. El protocolo está en Imágenes y Materiales.
7. Revisa el producto final. Decodifica completamente el MP4, verifica la duración de audio y video y la pista de audio en cada punto de corte, luego comprueba la reproducción en el navegador, la navegación y las imágenes. Solo revisar archivos WAV o de subtítulos no es suficiente para garantizar que el video final sea correcto. Una vez aprobado, proporciona vista previa local, MP4, subtítulos y archivos fuente.

Punto de Entrada Ejecutable

Todas las rutas se proporcionan mediante parámetros. Los campos completos se encuentran en Formato de Proyecto. SKILL_DIR a continuación se refiere al directorio de este skill, DEMO_PROJECT se refiere al proyecto de video independiente:

python "$SKILL_DIR/scripts/audio.py" init --project "$DEMO_PROJECT"
# Editar project.json, preparar assets/; ejecutar audition si es necesario.
python "$SKILL_DIR/scripts/audio.py" validate --project "$DEMO_PROJECT"
python "$SKILL_DIR/scripts/audio.py" synthesize --project "$DEMO_PROJECT"
python "$SKILL_DIR/scripts/audio.py" check-text --project "$DEMO_PROJECT"
python "$SKILL_DIR/scripts/audio.py" align --project "$DEMO_PROJECT"
node "$SKILL_DIR/scripts/compose.mjs" --project "$DEMO_PROJECT"
node "$SKILL_DIR/scripts/verify.mjs" --project "$DEMO_PROJECT" --stage scenes
node "$SKILL_DIR/scripts/render.mjs" --project "$DEMO_PROJECT"
node "$SKILL_DIR/scripts/verify.mjs" --project "$DEMO_PROJECT" --stage export
node "$SKILL_DIR/scripts/serve.mjs" --project "$DEMO_PROJECT"

Los comandos de renderizado, verificación en navegador y captura de pantalla de Node localizan la instalación de html-video mediante HTML_VIDEO_ROOT o --html-video. Usa Python en un entorno aislado; no instales dependencias en el Python del sistema.

Modificación y Solución de Problemas

• Cambios de texto: Vuelve a sintetizar el grupo afectado, verifica, alinea, construye y renderiza. Cambios de imagen o diseño: Vuelve a construir, revisa las imágenes, renderiza. Cambio de voz: Vuelve a pasar por el flujo de sonido y sincronización.
• Límite de tokens alcanzado o salida repetitiva: Acorta el grupo problemático, priorizando la conservación de los grupos ya verificados. No entregues resultados incompletos como exitosos; si falla continuamente, conserva el diagnóstico y el material utilizable, explicando el bloqueo específico.
• Palabra final incompleta: Investiga en orden: "síntesis original → longitud de decodificación → normalización → concatenación → MP4". Agregar silencio no puede recuperar sílabas que ya han sido recortadas. El script actual solo habilita la corrección local cuando detecta una longitud anormal sin relleno de Qwen3-12Hz, sin modificar el directorio de instalación de terceros. Lee Regresión de Final de Palabra y Depuración de Audio.
• No conviertas la voz, combinación de colores, número de grupos o defectos de una versión de biblioteca en requisitos fijos para todas las tareas. Si se utiliza otro TTS o locución existente, mantén las mismas restricciones de tiempo, muestra y verificación de exportación.
• Publicar el producto final en plataformas externas, cargar datos comerciales o notificar a otros no forma parte de los pasos de producción local predeterminados; se ejecuta según la autorización real del usuario.