Adicionar Cartões de Conteúdo em Vídeo
Transforme momentos semânticos aprovados em uma sobreposição gráfica HyperFrames coerente. Use evidências compartilhadas e a linha do tempo canônica; não retranscreva ou reanalise a fonte dentro desta skill.
Dependências
/video-understand é um pré-requisito. Execute-a primeiro para que os cartões usem evidências semânticas validadas e a linha do tempo canônica.
Antes de começar, verifique se ela está instalada. Se não estiver, avise o usuário que este pré-requisito está ausente e pare antes de processar a mídia.
Requer ffmpeg no PATH, Python e Node.js >= 22 (para npx hyperframes, buscado sob demanda). hyperframes render/snapshot utiliza um Chrome headless — ele gerencia seu próprio chrome-headless-shell e recorre a um Chrome do sistema (defina CHROME para substituir) quando o cacheado estiver inutilizável. Verifique-os antes de processar a mídia.
Entradas
work/project.json: revisões de operação e dependênciaswork/understand/understanding.json: momentos semânticos revisados e evidênciaswork/timeline.json: mapeamento fonte-para-programa, ou uma linha do tempo de identidade quando não há corte- revisão opcional de correção de cor selecionada quando o contraste ou a paleta são julgados contra essa aparência
A skill é válida sem um corte ou correção de cor. Quando as legendas estão ativas, execute-as primeiro,
dependa de sua revisão atual e trate sua região ocupada como uma zona de exclusão rígida.
Os cartões de conteúdo devem preceder o motion gráfico sempre que ambos estiverem ativos. Essas regras relativas se aplicam
a cada par selecionado. Declare apenas dependências realmente consumidas e registre suas revisões atuais
em based_on.
Trate o rosto visível e a silhueta da cabeça de cada pessoa primária ou em primeiro plano, falante, apresentadora, entrevistada ou pessoa semanticamente importante como uma zona de exclusão rígida durante toda a deixa do cartão, incluindo entradas e saídas. Uma pessoa incidental apenas de fundo que não seja um foco narrativo ou visual está isenta; proteja casos incertos. Se um cartão intersectar um rosto ou cabeça protegido, reposicione-o primeiro, depois redimensione ou redesenhe-o. Pule o cartão quando não existir um posicionamento em conformidade.
Arquivos de Trabalho
work/content-cards/cards-plan.json # plano editorial durável
work/cache/content-cards/index.html # composição "código-é-a-edição"
work/cache/content-cards-overlay.mov # contribuição de renderização transparente
review/03-content-cards/card-stills/ # um still útil por cartão
review/03-content-cards/content-cards-preview.mp4 # janelas de deixa curtas opcionais
review/03-content-cards/content-cards-summary.md
review/03-content-cards/content-cards-review.html # quadro de revisão de candidatos local
review/03-content-cards/content-cards-review-assets/ # um quadro fonte por candidato
review/03-content-cards/content-cards-review.json # escolhas humanas validadas
A página de revisão reutilizável está comprometida em
skills/video-add-content-cards/assets/content-cards-review.html.
O HTML preenchido, capturas de tela, sobreposição e renderizações de pré-visualização são reproduzíveis.
Mantenha o plano fora de cache/. Ele deve conter cada string visível, temporização, posicionamento,
valor de tratamento visual, caminho de composição do renderizador, caminho de asset do renderizador e FPS fonte necessários
para regenerar o HTML descartável e os assets alpha após excluir work/cache/. Registre um
renderer_recipe no nível do plano com o exemplo/modelo fonte, caminho de saída da composição, mecanismo de renderização,
e o caminho de saída, versão exata, origem e SHA-256 de cada asset de tempo de execução local. Um
arquivo HTML em cache ou script baixado sem uma receita durável não satisfaz a regeneração.
Fluxo de Trabalho
1. Entrevista antes de rascunhar
Leia understanding.json e a linha do tempo ativa primeiro. Conte os momentos gráficos elegíveis e
calcule a recomendação de contagem de cartões alvo antes de entrevistar:
min(momentos elegíveis, max(1, round(minutos do programa / 0.75)))
Este é um alvo, não uma regra de truncamento automática. Antes de fazer qualquer pergunta, abra os exemplos animados reais você mesmo com o comando nativo para o sistema operacional atual. Execute exatamente um:
# Windows PowerShell
Start-Process (Resolve-Path 'skills/video-add-content-cards/examples/gallery-animated.html')
# macOS
open skills/video-add-content-cards/examples/gallery-animated.html
# Linux desktop
xdg-open skills/video-add-content-cards/examples/gallery-animated.html
Se o comando falhar, diagnostique e tente novamente. Não substitua esta ação por um URI ou peça ao usuário para encontrar e clicar no arquivo. A galeria compara todos os seis temas e pode focar uma coluna com seu seletor nativo:
| Tema | Caractere inicial |
|---|---|
almanac | creme quente, serifa, ponderado |
teal | transmissão escura, destaque ciano |
editorial | documentário, tinta e âmbar |
dotgrid | pixel-mono, técnico |
apex | esportes de alta energia, destaque vermelho |
air | tipografia Lexend transparente, sem placas de apoio ou telas |
Faça exatamente uma pergunta de cada vez nesta ordem:
- Qual tema esta edição deve usar?
- Qual contagem de cartões alvo esta edição deve usar? Ofereça a recomendação calculada como padrão.
- Quais tipos de cartão devem ser incluídos? Ofereça
intro,key-quote,stat,listeoutro; o padrão é nenhum.
Apresente + PARE após cada pergunta. Após a terceira resposta, resuma o tema, a contagem
alvo, os tipos obrigatórios e quaisquer notas fornecidas pelo usuário; peça confirmação. Se o usuário cancelar,
retenha a análise, deixe a operação como draft e não crie ou renderize cartões.
2. Rascunhar cartões a partir do entendimento compartilhado
python skills/video-add-content-cards/scripts/build_cards_plan.py `
work/understand/understanding.json `
work/timeline.json `
work/content-cards/cards-plan.json `
--target-card-count 6 `
--theme editorial `
--must-include-type stat `
--notes "Mantenha nomes de produtos literalmente"
O script mapeia momentos semânticos mantidos para o tempo do programa e omite momentos removidos pelo corte. Ele
preserva intervalos de origem e referências de evidência, limita a duração ao clipe que o contém e marca
cópia/posicionamento/tratamento visual como draft. Um stat começa com metric-spotlight; um
list começa com side-by-side; a revisão de candidatos pode reter o layout normal ou mudar
um list para parallel-columns.
A entrevista confirmada é armazenada como brief em cards-plan.json. Repita
--must-include-type para múltiplos valores; omita flags que não se aplicam. Campos de briefing opcionais mais antigos
permanecem aceitos para compatibilidade, mas não fazem parte da entrevista normal.
3. Fazer escolhas editoriais
Leia a evidência em cada tempo de cartão. Corrija nomes e números do ASR, pode candidatos fracos, escreva cópia concisa, escolha posicionamento que evite rostos protegidos, silhuetas de cabeça visíveis e legendas, e aprove o tratamento visual. Nunca trate o texto do analisador como cópia final.
Armazene toda a cópia na tela sob copy.display (por exemplo eyebrow, title e detail),
não apenas um resumo ou título sugerido. Defina placement.face_clearance como verified somente após
revisar um still composto contra a definição de rosto-e-cabeça protegido acima e armazene o caminho
relativo ao protocolo desse still em
placement.review_still. Armazene a composição HyperFrames, asset alpha e FPS racional exato
sob renderer.
Use estes mapeamentos como ponto de partida:
| Tipo semântico | Tipo de cartão |
|---|---|
| hook | intro |
| key-point, quote, question | key-quote |
| stat | stat |
| list | list |
| cta | outro |
repetition, tangent e risk são evidências editoriais, não cartões automáticos.
Mantenha os cinco tipos de cartão canônicos. Armazene os seguintes layouts opcionais sob
visual_treatment.layout em vez de criar novos tipos de cartão de alto nível:
| Tipo de cartão canônico | Layout permitido |
|---|---|
stat | default, metric-spotlight, bar-chart, pie-chart, line-chart |
list | default, side-by-side, parallel-columns |
Use metric-spotlight apenas quando um número, porcentagem, valor, múltiplo, ano ou duração apoiado por evidência merecer destaque. Coloque o número entre contexto superior e inferior conciso, ajuste valores longos sem sobreposição e mantenha o número visualmente centralizado entre esses rótulos. Use side-by-side ou parallel-columns para dois a quatro conceitos paralelos, contrastantes, opostos ou correspondentes curtos. Prefira frases curtas; use a revisão para escolher a orientação que se encaixa na filmagem disponível e limpa o assunto.
Use um gráfico apenas quando a transcrição retida fornecer um conjunto de dados completo e apoiado por evidência. Leia reference/chart-data.md antes de criar dados de gráfico. Armazene manualmente a dimensão, métrica, unidade, período, pontos ordenados e a evidência de transcrição de cada ponto sob data; nunca
infira valores de um resumo do analisador ou combine pontos de vídeos diferentes. Use bar-chart para 2-6 categorias comparáveis, pie-chart para 2-6 partes mutuamente exclusivas de um todo comprovado, e line-chart para 3-8 pontos ordenados significativamente. Quando valores obrigatórios, rótulos, um denominador, ordem temporal ou unidades estiverem ausentes, use metric-spotlight, um cartão stat normal ou nenhum cartão. Para layouts de gráfico, comprima explicações longas em cópia de suporte concisa sem alterar seu significado. O gráfico deve comunicar principalmente os valores-chave e sua mudança ou relacionamento. Não enumere ou repita valores, rótulos, períodos ou unidades já visíveis no gráfico.
Mantenha todos os candidatos apoiados por evidência neste estágio. Mire na contagem de cartões alvo do briefing, mas permita um conjunto mais forte ou mais esparso quando a evidência justificar.
4. Revisar e aplicar escolhas de candidatos
Gere uma revisão de navegador específica do projeto após o plano de candidatos existir. Passe o vídeo
fonte alinhado ao source_range do plano e à linha do tempo ativa. O script limita cada
ponto médio de evidência ao seu clipe retido que o contém, então preenche o modelo comprometido com
um quadro fonte correspondente por candidato:
python skills/video-add-content-cards/scripts/build_review_page.py `
work/content-cards/cards-plan.json `
review/03-content-cards/content-cards-review.html `
--video input/source.mp4 `
--timeline work/timeline.json `
--captions-plan work/captions/captions-plan.json
Omita --captions-plan quando o projeto não tiver uma operação de legendas ativa. Com um plano de legendas ativo, o quadro de revisão mostra suas regiões ocupadas reais (superior, central ou inferior).
Abra imediatamente a revisão preenchida você mesmo com o comando nativo para o sistema operacional atual. Execute exatamente um:
# Windows PowerShell
Start-Process (Resolve-Path 'review/03-content-cards/content-cards-review.html')
# macOS
open review/03-content-cards/content-cards-review.html
# Linux desktop
xdg-open review/03-content-cards/content-cards-review.html
Se o comando falhar, diagnostique e tente novamente; não peça ao usuário para localizar o arquivo. A página
mostra cada quadro fonte, ID do cartão, tempo do programa, cópia editável, tratamento visual e posicionamento.
Layouts de gráfico também mostram dados estruturados editáveis e as referências de evidência do ponto. Revise
cada valor contra sua evidência exibida antes de aprová-lo.
Cada candidato
começa não selecionado com posicionamento definido como bottom. Alterar o posicionamento move um proxy de cartão cinza
sobre o quadro real para que o risco de colisão seja visível antes da aprovação. O usuário seleciona cartões,
edita a cópia, escolhe o tratamento e posicionamento, clica em Copiar resumo e cola o resumo visível
de volta
na conversa.
Apresente + PARE. Aguarde o resumo da seleção colado. Não crie HTML a partir de rascunhos de candidatos não verificados. Converta o resumo em
review/03-content-cards/content-cards-review.json: escreva uma entrada para cada cartão do plano, marque os IDs do resumo selecionados com sua cópia, tratamento visual e posicionamento escolhidos, e marque todos os outros IDs como não selecionados com sua cópia de rascunho atual e um posicionamento vazio. Armazene a escolha da revisão como um campo de string chamado visual_treatment. Em seguida, aplique a revisão validada:
python skills/video-add-content-cards/scripts/apply_cards_review.py `
work/content-cards/cards-plan.json `
review/03-content-cards/content-cards-review.json
A etapa de aplicação rejeita IDs de cartão desconhecidos, duplicados ou ausentes, cópia selecionada em branco, posicionamento inválido e tratamentos incompatíveis com o tipo de cartão canônico sem alterar o plano. Em caso de sucesso, mantém os cartões selecionados e marca sua cópia, posicionamento, tratamento visual e revisão de alto nível como approved. Leia a contagem selecionada resultante contra o alvo do briefing antes de continuar.
Para layouts de gráfico selecionados, a etapa de aplicação também valida os dados estruturados completos e marca data.status como aprovado. Qualquer gráfico selecionado inválido rejeita toda a revisão antes que o plano seja copiado. Escolher um layout que não seja de gráfico remove dados de gráfico de rascunho não utilizados. Após a aplicação, a liberação de rosto e legenda permanece pendente até que a composição seja verificada contra quadros compostos reais.
5. Criar uma composição HyperFrames
Use um index.html e uma linha do tempo GSAP pausada. Cada cartão aprovado se torna um .clip identificado pelo program_start_s e duration_s do plano. Mantenha o motion seguro para busca e derive a temporização de atributos de dados em vez de temporizadores de parede.
Para deixas de gráfico, anime apenas através dessa linha do tempo pausada em tempos de composição absolutos. Barras revelam a partir de uma linha de base zero; setores de pizza revelam na ordem dos pontos com geometria proporcional aos valores; caminhos de linha desenham na ordem do eixo X antes que seus pontos apareçam. Use dimensionamento relativo à fonte e caixas de layout fixas para que busca, rótulos e valores dinâmicos nunca causem saltos de layout. Durações sugeridas são de 5 a 6 segundos para barra e pizza e de 6 a 8 segundos para linha, sempre limitadas ao clipe retido.
Comece a partir do exemplo de repositório mais próximo:
examples/index-almanac.htmlexamples/index-apex.htmlexamples/index-dotgrid.htmlexamples/index-editorial.htmlexamples/index-teal.htmlexamples/index-air.html
Mantenha uma linguagem visual em todos os cartões, use dimensionamento relativo à fonte e mantenha contraste suficiente contra a classificação selecionada. Os cinco temas de painel opaco podem usar um cartão ou tela para legibilidade. air deve manter contêineres de cena e texto transparentes.
[... truncado para tradução]