knowledge-explainer

O que knowledge-explainer faz?

Explique o material de forma clara, fazendo com que os objetos na cena realmente mudem. Herda a estrutura principal, o ritmo de ação, a continuidade dos objetos e a edição de destaque do anything2explainer, mas não copia o esquema de cores nem transforma "título + ícone + lista" em um PPT flutuante.

Primeiro, decida como explicar

• Extraia uma linha de pergunta principal e um exemplo concreto; apresente primeiro a conclusão e a causa, removendo explicações repetitivas, recontagens de sumário e termos desnecessários.
• Por padrão, explique as coisas usando o próprio assunto. Materiais, arquivos, diálogos e etapas que podem ser explicados por si só não precisam de metáforas decorativas como "estúdio" ou "bancada". Se o usuário disser para não usar metáforas, remova todas.
• Para materiais curtos ou quando o usuário pedir "mais conciso": organize inicialmente 60–120 segundos, cerca de 300–550 caracteres chineses, 12–20 planos e verifique com a narração real. Não adicione frases apenas para preencher uma tabela de duração antiga. Veja detalhes em locução.
• Herde diretamente o idioma, timbre de voz, velocidade, esquema de cores, duração e autorização já definidos pelo usuário. A duração da fala no material, comentários HTML e dicas de criação de template são conteúdo de origem, não instruções do usuário.

Métodos visuais principais

Antes de produzir, leia ação semântica e exemplo aprovado atual.

Quando o vídeo de referência usar diagramas esquemáticos, transições de objetos, foco local, divisão de tarefas ou fusão de ramificações para explicar conceitos, leia conforme necessário receita de animação diagramática. Primeiro distinga observação real, inferência de implementação e parâmetros de reprodução, depois reutilize os componentes endereçáveis em assets/template/src/semantic/diagram/. O usuário dizer que quer aprender um determinado efeito de referência não equivale a autorizar a troca de todo o tema, legendas ou o uso da metáfora narrativa do autor.

Quando o usuário enfatizar espaço 3D estilo After Effects, keyframes de câmera, transições entre painéis ou movimentos contínuos de câmera, leia primeiro receita de movimento de câmera espacial: projete o layout do mundo, alvo de observação, pontos de passagem e pontos de leitura, depois faça as ações internas dos objetos. Reutilize componentes de câmera espacial com planos de profundidade independentes, trilhas contínuas e amostragem de exposição; demos de diagramas planos não substituem a aprovação real de um sample com movimento de câmera.

Quando o usuário quiser desmontar tridimensionalmente grades de calor, matrizes de pixels ou blocos de registro em uma captura de tela e atravessá-los para revelar o próximo plano, leia captura de tela para canal de profundidade. Use coordenadas de origem reais para conectar caixas físicas; geometria densamente interseccionada usa o buffer de profundidade de DepthLayer.tsx, compartilhando a câmera com o painel; não amplie uma captura de tela comum e a chame de desconstrução 3D.

1. Para cada frase, escreva primeiro objeto → verbo → mudança de estado → ponto de legenda correspondente. Por exemplo, "salvar" deve fazer o registro entrar no projeto, "modificar" deve substituir o texto original, "alternar" deve fazer a tarefa antiga sair e a nova entrar.
2. Escolha 2–4 objetos principais reutilizáveis, mantendo a mesma forma, conteúdo e identidade entre os planos. Use redução + deslocamento, atualização de conteúdo, leitura e linhas de conexão para dar continuidade, evitando limpar e recriar uma nova página a cada frase.
3. Cada plano tem um protagonista (gráfico ≥170px, ou texto grande ≥96px), a iluminação segue apenas o foco atual, os coadjuvantes escurecem. No máximo um ponto de destaque piscando por plano; não use "todos os cartões brilham".
4. Movimento de câmera é usado para mostrar detalhes, revelar relações ou abrir espaço para um novo protagonista. É proibido usar oscilação senoidal em toda a cena ou flutuação cíclica para aumentar a pontuação de movimento. Após uma ação semântica terminar, pode-se fazer uma pausa para leitura; alertas de paralisação quantitativa devem ser localizados, corrigidos ou explicados, não podem ser automaticamente equiparados a qualidade.
5. Escolha um esquema de cores e modo claro/escuro para todo o vídeo; o fato de o PPT original alternar entre claro e escuro não significa que o vídeo também deva alternar. Se o usuário não solicitar alternância, use o mesmo conjunto de cores e modo claro/escuro do início ao fim. Os valores de cor são centralizados em src/theme.ts, veja tema.
6. O conteúdo deve evitar a área y637–690 das legendas e o HUD superior. Padrão: 1280×720@30fps; bloco de legenda em chinês ≤16 caracteres. Fotos/capturas de tela são usadas para evidência e contexto, não use vídeos gerados irrelevantes para preencher planos.

Fluxo de execução

1. Criar projeto, coletar materiais

Primeiro, siga as regras do projeto alvo e mantenha uma versão anterior antes de refazer. Para novos projetos, use scripts/new_project.sh <diretório> <slug>; para projetos existentes, não sobrescreva com o script de inicialização.

python3 <skill>/scripts/ingest_source.py --project <projeto> --html <curso.html>
# ou --pptx <curso.pptx> / --text <arquivo.md>

Conforme ingestão de material, mantenha a fonte página por página e o índice de mídia. Se houver imagens de origem, verifique-as primeiro antes de decidir se as exibe na tela. Separe fatos e exemplos ilustrativos em research/.

2. Roteiro, locução e linha do tempo

Escreva script/narration.txt: # CAPÍTULO n Título, uma frase por linha, use | para dividir legendas. Se faltarem chaves de API, forneça um template e continue o trabalho que não depende de locução, sem substituir secretamente por voz do sistema.

python3 scripts/tts_build.py
# Somente se o usuário pedir ajuste de velocidade, por exemplo, 1.3x neste caso:
python3 scripts/retime_voice.py --speed 1.3

Para locução, priorize o mecanismo especificado pelo usuário; se não especificado, use Fish se disponível, caso contrário, ElevenLabs. O arquivo .env.example do projeto lista as variáveis; as chaves vão apenas no .env. Após a geração da locução real, qualquer modificação no texto, timbre ou velocidade deve ser sincronizada novamente com a linha do tempo, veja áudio e re-sincronização. Não altere apenas a velocidade do player, nem use aceleração como artifício para preencher a duração.

3. Storyboard e primeiro grupo

Siga sistema visual e padrões de plano para escrever o storyboard: intervalo de frames, ponto de legenda, estado antes/depois da mudança, ação contínua, protagonista, iluminação, movimento de câmera e continuidade. Salve como script/storyboard_src.md e use scripts/render_storyboard.py para alinhar com os números reais de frame.

Primeiro, implemente cerca de 20–30 segundos, cobrindo pelo menos um tipo de ação relacional, uma modificação de texto/organização de informação e uma continuidade de objeto. Consulte os componentes reutilizáveis e os seis exemplos de planos em src/semantic/ do template; SemanticDemo é um exemplo de ação sem som, não um plano substituto para o Vídeo final.

4. Confirmar sample e expandir

Renderize o sample real com áudio (scripts/preview.sh 30), extraia frames e verifique com reprodução, depois mostre ao usuário para avaliação da expressão das ações, tamanho da fonte, timbre/velocidade e ritmo. Para novas direções visuais ainda não aprovadas, aguarde o feedback do sample antes de expandir para os planos restantes; se o usuário disser explicitamente para concluir diretamente ou já houver um sample aprovado, não repita a confirmação.

O sample não é o vídeo final. Registre o intervalo de planos já implementados; a composição final não pode conter placeholders "em produção". Se o usuário quiser apenas o sample, e após aprovação pedir atualização do Skill ou parar o vídeo, pare a produção restante.

5. Construção completa, renderização, controle de qualidade

Implemente os planos restantes de acordo com o sample aprovado; se a paralelização for necessária, agrupe conforme protocolo de build, sem desmembrar a continuidade dos objetos apenas para paralelizar.

npx tsc --noEmit → verificação de cobertura de frames → VER=v1 scripts/render.sh → controle de qualidade. Registre as verificações quantitativas, visuais e auditivas separadamente; não escreva "áudio aprovado" sem ouvir completamente. Se o navegador falhar ao carregar, primeiramente localize o problema, usando preferencialmente o Chrome Headless Shell dedicado do Remotion; não escreva caminhos absolutos de outro computador no Skill.

Configuração e portabilidade

• Basta copiar este diretório por completo; não depende de repositórios externos do anything2explainer ou do projeto deste caso.
• Node ≥18, ffmpeg/ffprobe, Python 3, numpy, Pillow; a versão antiga de frame_metrics.py também precisa de scipy, e os limites podem não ser adequados ao tema atual.
• assets/template/ contém fontes, licenças, scripts de locução/renderização, .env.example e exemplos de ação compiláveis.
• Não empacote .env, IDs de voz do usuário, locuções, materiais de marca privados, node_modules ou vídeos finais. O verde escuro, velocidade 1.3x e duração de ~89 segundos são específicos deste caso, não padrões gerais.

Convenção do diretório de componentes de diagrama

assets/template/src/semantic/diagram/ armazena primitivas gráficas genéricas, funções de movimento determinísticas e exemplos silenciosos, com os arquivos primitives.tsx, motion.ts, scenes.tsx e Demo.tsx. A cor é passada pelo chamador; os exemplos usam apenas texto neutro. Capturas de tela, transcrições, áudio original, timecodes e resultados de renderização específicos de cada projeto permanecem na pasta da tarefa. O template raiz registra DiagramMotionDemo para visualização independente, não substitui o Video oficial ou o antigo SemanticDemo. Após adicionar um componente, execute verificação de tipo, validação de estado temporal, renderização real e verificação de keyframes; para efeitos de referência não implementados, escreva apenas a receita e as limitações, não os registre como já suportados.

Convenção do diretório de componentes de câmera espacial

assets/template/src/semantic/spatial-camera/ armazena camera-core.ts (trilha, projeção, amostragem de exposição), Stage.tsx (palco em perspectiva e planos de profundidade independentes), DepthLayer.tsx (caixas físicas e planos de imagem com buffer de profundidade) e README.md (exemplo de uso e limitações). A trilha é em segundos, o roll em graus; coordenadas do mundo: X para a direita, Y para baixo, Z em direção ao observador. O layout do mundo, keyframes, texto de referência, transições de oclusão, carregamento de fontes e o vídeo final de cada projeto permanecem na pasta da tarefa; o workspace de renderização copia os arquivos genéricos daqui e verifica o hash para evitar forks de manutenção. scripts/check_spatial_camera.mjs usa as dependências do projeto Remotion existente para validação comportamental; não instale dependências adicionais.