notasimrazzaq/AI-Video-Editor

Gráficos em movimento no vídeo do próprio usuário

Camada de workspace sobre as skills HyperFrames instaladas. Para mecânicas de HTML/timeline, carregue hyperframes-core (contrato de composição) e hyperframes-animation (regras GSAP); a rota upstream mais próxima é talking-head-recut. Esta skill adiciona as regras internas do criador, que têm precedência em caso de conflito.

Caminho rápido (comprovado no 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 → transcrição Deepgram em segundos.
2. Despeje transcript-words.txt (index:texto@inicio) → leia, resuma, escolha os momentos.
3. Legendas: captions-src.json (partes Roman Hinglish por índice de palavra) → node tools/build-captions.mjs projects/<n>.
4. Modelo de estilo: copie kit/templates/paper-cut-vertical.html → index.html; defina ambos os data-duration; substitua as chamadas EXEMPLO pelos momentos deste vídeo.
5. lint → snapshot --at ... (2 lotes de ~12 quadros) → veja as folhas de contato → corrija.
6. Sons: escreva sfx.json a partir da tabela de deslocamentos em mg-sound → node tools/sfx.mjs projects/<n> (ANTES da renderização, para que uma única renderização os inclua).
7. Informe ao usuário o tempo de renderização antecipadamente (veja mg-export: ~25–30 min por minuto de vídeo 1080x1920 em um laptop de 4 núcleos), depois renderize uma vez, copie para exports/.
8. Ajustes posteriores: apenas áudio → sfx.mjs --mix (segundos, sem re-renderizar). Ajustes visuais → snapshot primeiro, depois uma re-renderização.

Não: instale modelos de fala locais, retome downloads parados, renderize para "verificar" qualquer coisa (use snapshots) ou pré-visualize no player do VS Code (sem áudio AAC — use VLC).

1. Configurar o projeto

1. Se o vídeo não estiver em raw/, ele pode permanecer onde está. Escolha um nome de projeto curto em kebab-case a partir do nome do arquivo.
2. Execute (a partir da raiz do workspace):

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

   • A transcrição usa Deepgram (nova-3, language=multi por padrão: lida com code-switching Urdu/Hindi + Inglês; palavras em Hindi/Urdu podem retornar em Devanagari — romanize para Hinglish, mantenha os timings). Necessita da variável de ambiente DEEPGRAM_API_KEY; se estiver faltando, peça ao usuário para executar powershell -NoProfile -ExecutionPolicy Bypass -File tools/set-deepgram-key.ps1 sozinho (nunca no chat). Vídeo apenas em Inglês: -Language en. Reexecutar sozinho: powershell -NoProfile -ExecutionPolicy Bypass -File tools/transcribe-deepgram.ps1 -Project projects/<nome>.
   • Não use npx hyperframes transcribe com whisper nem o instale (muito lento/barulhento); use Deepgram.
   • Gera projects/<nome>/ com clip.mp4 (CFR H.264), audio.mp3, metadata.json, transcript.json, fonts/, sfx/, renders/.
   • Adicione -Screenshots "<pasta>" se o usuário fornecer capturas de tela para um momento.
3. Trabalhe dentro de projects/<nome>/ a partir daqui (cd para lá antes de qualquer comando npx hyperframes).

2. Realmente analisar o vídeo

• Leia metadata.json (largura, altura, fps = r_frame_rate, duração) e transcript.json (plano [{text,inicio,fim}]).
• Corrija erros óbvios de ASR no lugar, mantenha os timestamps. A conversão de fala para texto pode estar ~1 s deslocada: quando um momento for importante, verifique com ffmpeg -ss <t-0.5> -t 2 -i clip.mp4 ... ou snapshots, em vez de confiar no número.
• Transcrições longas ou com idiomas mistos: despeje uma lista indexada de palavras (index:texto@inicio, uma frase por linha) para transcript-words.txt e leia.

Legendas (quando o usuário as desejar)

• Escreva captions-src.json: [[primeiroIndicePalavra, ultimoIndicePalavra, "texto da legenda", ["palavra","chave"]], ...], 3–7 palavras por parte, cobrindo cada palavra. Fala Urdu/Hindi/Hinglish → escreva o texto em Roman Hinglish (ex.: "ke 9 maah guzar gaye hain"), mantenha palavras em Inglês como faladas, corrija erros de audição pelo contexto ("नौ मां" → 9 maah, "New York" → New Year).
• Construir: node tools/build-captions.mjs projects/<nome> → captions.js (window.CAPTIONS = [{s,e,texto,chave}]), avisa sobre palavras não cobertas. Carregue com <script src="captions.js">.
• Encontre onde está o rosto: npx hyperframes snapshot não está disponível antes de existir uma composição, então extraia quadros: ffmpeg -nostdin -v error -ss <t> -i clip.mp4 -frames:v 1 renders/_probe_<t>.png em 3–4 pontos e visualize.
• Escreva um resumo de um parágrafo: sobre o que é o vídeo e os 3–8 momentos importantes (números, listas, antes/depois, alegação chave, CTA).
• Pergunte ao usuário qual estilo, se ele não disse (veja mg-styles). Padrão: cartões brancos foscos limpos (Liquid Glass).

3. Planejar (mostre ao usuário antes de construir, se o vídeo tiver > 30 s ou o briefing for vago)

Para cada momento: palavra-gatilho + seu inicio exato, tipo de gráfico, conteúdo, zona, tempo de saída. O tipo de gráfico segue o que é dito:

• número → contador · lista → verificação de lista de tarefas · antes/depois → comparação · linha chave → punch-in ou tipo grande
• capturas de tela / prova → pop-ups em sequência (PROMPT 12) · novo tópico → reenquadramento (o vídeo encolhe em um cartão) O vocabulário de movimentos e estilos residem na skill mg-styles.

4. Regras internas (inaplicáveis)

1. Mantenha o vídeo exatamente como está: mesmo tamanho, fps, áudio, corte. Composição data-width/height = tamanho do vídeo, fps = fps do vídeo, raiz data-duration = duração do vídeo (limite a metadata.json). O vídeo é <video id="a-roll" class="clip" src="clip.mp4" data-has-audio="true" data-start="0" ...> sem muted, sem crossorigin.
2. Cada gráfico começa na palavra exata (inicio daquela palavra na transcrição).
3. Um estilo em todo o vídeo.
4. Nada nos primeiros 3 segundos — esse é o gancho.
5. Mantenha os gráficos fora do rosto, fora do terço inferior (legendas) e dentro dos 80% centrais da largura (margem de 10% esquerda/direita).
6. Fontes apenas da pasta fonts/ do projeto via @font-face (nunca URLs do Google Fonts); GSAP via <script src="vendor/gsap.min.js">.
7. Vidro fosco precisa de algo atrás; sobre filmagem funciona, para exportação transparente use cartões sólidos.

5. Construir, verificar, revisar

1. Escreva index.html (composição independente, uma timeline GSAP pausada registrada em window.__timelines["<id>"]). Estilo Paper Cut: comece de kit/templates/paper-cut-vertical.html. Filmagem de celular de baixa resolução (ex.: 480x864 WhatsApp): ainda crie em uma tela 1080x1920 para que os gráficos/legendas permaneçam nítidos; o vídeo escala por baixo.
2. npx hyperframes lint depois npx hyperframes check — corrija todos os erros.
3. npx hyperframes snapshot --at <t1>,<t2>,... no ponto médio de cada gráfico e veja os PNGs — verifique sobreposição rosto/legenda e corte de texto.
4. Renderize um rascunho: npx hyperframes render . -o renders/with-cards.mp4 (renderizações são lentas em PCs típicos; use snapshots para iterar, renderize apenas quando os quadros parecerem corretos).
5. Copie o final aprovado para exports/<nome>.mp4.

6. Acompanhamentos (mesma sessão)

• Um ponto (PROMPT 12): "Quando eu disser , mostre ". Encontre a frase na transcrição, altere apenas aquele momento, mantenha todo o resto idêntico, re-renderize para o mesmo arquivo.
• Som: use a skill mg-sound. Variantes de exportação / transparente: skill mg-export.
• Ajustes em palavras simples (superfície, cor, tipo, movimento, timing, layout) → edite apenas isso, mantenha todo o resto igual, renderize novamente.

Primeiro a base, depois um ponto de cada vez. Não tente fazer tudo em uma única passada.