notasimrazzaq/AI-Video-Editor

Gráficos en movimiento sobre el propio video del usuario

Capa de trabajo sobre los skills HyperFrames instalados. Para la mecánica de HTML/línea de tiempo, cargue hyperframes-core (contrato de composición) y hyperframes-animation (reglas de GSAP); la ruta ascendente más cercana es talking-head-recut. Este skill agrega las reglas propias del creador, que prevalecen en caso de conflicto.

Ruta rápida (probada en reel-sep30, reel de 3:20 Urdu/Inglés, Paper Cut)

1. powershell -NoProfile -ExecutionPolicy Bypass -File tools/new-project.ps1 -Name <n> -Video raw/<file> -Transcribe → Transcripción de Deepgram en segundos.
2. Vuelca transcript-words.txt (index:text@start) → léalo, resuma, elija los momentos.
3. Subtítulos: captions-src.json (fragmentos en roman hinglish por índice de palabra) → node tools/build-captions.mjs projects/<n>.
4. Plantilla de estilo: copie kit/templates/paper-cut-vertical.html → index.html; configure ambos data-durations; reemplace las llamadas de EJEMPLO con los momentos de este video.
5. lint → snapshot --at ... (2 lotes de ~12 fotogramas) → vea las hojas de contacto → corrige.
6. Sonidos: escriba sfx.json desde la tabla de desplazamientos en mg-sound → node tools/sfx.mjs projects/<n> (ANTES del renderizado, para que un solo render los incluya).
7. Informe al usuario el tiempo de renderizado de antemano (ver mg-export: ~25–30 min por minuto de video 1080x1920 en un portátil de 4 núcleos), luego renderice una vez, copie a exports/.
8. Ajustes posteriores: solo audio → sfx.mjs --mix (segundos, sin volver a renderizar). Ajustes visuales → primero haga un snapshot, luego un solo re-renderizado.

No haga: instalar modelos de voz locales, reanudar descargas atascadas, renderizar para "verificar" algo (use snapshots) o previsualizar en el reproductor de VS Code (sin audio AAC — use VLC).

1. Configurar el proyecto

1. Si el video no está en raw/, puede quedarse donde esté. Elija un nombre de proyecto corto en kebab-case a partir del nombre del archivo.
2. Ejecute (desde la raíz del espacio de trabajo):

   powershell -NoProfile -ExecutionPolicy Bypass -File tools/new-project.ps1 -Name "<name>" -Video "<path>" -Transcribe
   

   • La transcripción utiliza Deepgram (nova-3, language=multi por defecto: maneja cambio de código Urdu/Hindi + Inglés; las palabras en Hindi/Urdu pueden devolverse en devanagari — romanícelas a hinglish, mantenga los tiempos). Necesita la variable de entorno del usuario DEEPGRAM_API_KEY; si falta, pida al usuario que ejecute powershell -NoProfile -ExecutionPolicy Bypass -File tools/set-deepgram-key.ps1 él mismo (nunca en el chat). Video solo en inglés: -Language en. Volver a ejecutar solo: powershell -NoProfile -ExecutionPolicy Bypass -File tools/transcribe-deepgram.ps1 -Project projects/<name>.
   • No use npx hyperframes transcribe con whisper ni lo instale (demasiado ruidoso/lento); use Deepgram.
   • Proporciona projects/<name>/ con clip.mp4 (CFR H.264), audio.mp3, metadata.json, transcript.json, fonts/, sfx/, renders/.
   • Agregue -Screenshots "<folder>" si el usuario proporciona capturas de pantalla para un momento.
3. Trabaje dentro de projects/<name>/ de aquí en adelante (cd allí antes de cualquier comando npx hyperframes).

2. Analizar realmente el video

• Lea metadata.json (ancho, alto, fps = r_frame_rate, duración) y transcript.json (plano [{text,start,end}]).
• Corrija errores obvios de ASR en el lugar, mantenga las marcas de tiempo. El reconocimiento de voz a texto puede tener un desfase de ~1 s: cuando un momento importe, verifique con ffmpeg -ss <t-0.5> -t 2 -i clip.mp4 ... o snapshots en lugar de confiar en el número.
• Transcripciones largas o en idiomas mixtos: vuelque una lista de palabras indexadas (index:text@start, una oración por línea) en transcript-words.txt y léala.

Subtítulos (cuando el usuario los quiera)

• Escriba captions-src.json: [[primerIndicePalabra, ultimoIndicePalabra, "texto del subtítulo", ["palabra","clave"]], ...], de 3 a 7 palabras por fragmento, cubriendo cada palabra. Discurso en Urdu/Hindi/Hinglish → escriba el texto en Hinglish romanizado (por ejemplo, "ke 9 maah guzar gaye hain"), mantenga las palabras en inglés tal como se pronuncian, corrija malas interpretaciones según el contexto ("नौ मां" → 9 maah, "New York" → New Year).
• Construya: node tools/build-captions.mjs projects/<name> → captions.js (window.CAPTIONS = [{s,e,text,key}]), advierte sobre palabras no cubiertas. Cargue con <script src="captions.js">.
• Encuentre dónde está la cara: npx hyperframes snapshot no está disponible antes de que exista una composición, por lo tanto, extraiga fotogramas: ffmpeg -nostdin -v error -ss <t> -i clip.mp4 -frames:v 1 renders/_probe_<t>.png en 3–4 puntos y véalos.
• Escriba un resumen de un párrafo: de qué trata el video y los 3–8 momentos que importan (números, listas, antes/después, afirmación clave, CTA).
• Pregunte al usuario qué estilo si no lo dijo (ver mg-styles). Por defecto: tarjetas escarchadas blancas limpias (Liquid Glass).

3. Planificar (muestre al usuario antes de construir si el video tiene más de 30 s o el briefing es vago)

Para cada momento: palabra desencadenante + su start exacto, tipo de gráfico, contenido, zona, tiempo de salida. El tipo de gráfico sigue lo que se dice:

• número → contador ascendente · lista → marca de verificación de lista · antes/después → comparación · línea clave → zoom o tipo grande
• capturas de pantalla / prueba → ventanas emergentes en secuencia (PROMPT 12) · nuevo tema → reencuadre (el video se encoge en una tarjeta) El vocabulario de movimientos y los estilos viven en el skill mg-styles.

4. Reglas de la casa (no negociables)

1. Mantenga el video exactamente como está: mismo tamaño, fps, audio, corte. data-width/height de la composición = tamaño del video, fps = fps del video, data-duration raíz = duración del video (ajuste a metadata.json). El video es <video id="a-roll" class="clip" src="clip.mp4" data-has-audio="true" data-start="0" ...> sin muted, sin crossorigin.
2. Cada gráfico comienza en la palabra exacta (start de esa palabra en la transcripción).
3. Un solo estilo en todo el video.
4. Nada en los primeros 3 segundos — ese es el gancho.
5. Mantenga los gráficos fuera de la cara, fuera del tercio inferior (subtítulos) y dentro del 80% central del ancho (margen del 10% izquierda/derecha).
6. Fuentes solo de la carpeta fonts/ del proyecto mediante @font-face (nunca URLs de Google Fonts); GSAP mediante <script src="vendor/gsap.min.js">.
7. El vidrio esmerilado necesita algo detrás; sobre metraje funciona, para exportación transparente use tarjetas sólidas.

5. Construir, verificar, revisar

1. Escriba index.html (composición independiente, una línea de tiempo de GSAP pausada registrada en window.__timelines["<id>"]). Estilo Paper Cut: comience desde kit/templates/paper-cut-vertical.html. Metraje de teléfono de baja resolución (por ejemplo, 480x864 WhatsApp): aún así autor en un lienzo de 1080x1920 para que los gráficos/subtítulos se mantengan nítidos; el video se escala debajo.
2. npx hyperframes lint luego npx hyperframes check — corrija cada error.
3. npx hyperframes snapshot --at <t1>,<t2>,... en el punto medio de cada gráfico y vea los PNG — verifique superposición cara/subtítulo y recorte de texto.
4. Renderice un borrador: npx hyperframes render . -o renders/with-cards.mp4 (los renderizados son lentos en PC típicas; use snapshots para iterar, renderice solo cuando los fotogramas se vean bien).
5. Copie el final aprobado a exports/<name>.mp4.

6. Seguimientos (misma sesión)

• Un punto (PROMPT 12): "Cuando diga , muestre ". Encuentre la frase en la transcripción, cambie solo ese momento, mantenga todo lo demás idéntico, vuelva a renderizar en el mismo archivo.
• Sonido: use el skill mg-sound. Variantes de exportación / transparente: skill mg-export.
• Ajustes en lenguaje sencillo (superficie, color, tipo, movimiento, sincronización, diseño) → edite solo eso, mantenga todo lo demás igual, renderice de nuevo.

Base primero, luego un punto a la vez. No intente hacer todo en una sola pasada.