Codex + HyperFrames estão dominando a indústria de edição de vídeo

No passado, criar vídeos exigia encontrar materiais, aprender edição e combinar músicas, o que envolvia custos extremamente altos. Agora, com a IA, desde que você use bem a combinação Codex + HyperFrames, a edição básica e a animação podem ser concluídas em apenas 1 hora. Neste artigo, vou combinar minha própria experiência prática para compartilhar as técnicas essenciais de usar Codex + HyperFrames para criar vídeos, ajudando todo criador de conteúdo a alcançar a liberdade na edição de vídeos.

1. O que é HyperFrames? Por que usá-lo?

HyperFrames é um framework de produção de vídeo baseado em código, de código aberto, criado por @HeyGen. Com ele, você não precisa abrir nenhum software de edição; pode gerar vídeos diretamente escrevendo código.

!Image

Por que é especialmente adequado para combinar com Codex? Duas razões:

1. Escrever código é o que os Agentes de IA fazem de melhor, e o Codex é atualmente uma ferramenta super de nível T0. Você apenas descreve os visuais que deseja e deixa a codificação com ele.
2. HyperFrames é escrito diretamente em HTML, naturalmente projetado para Agentes. A IA escreve HTML de forma mais fluida do que qualquer outro formato, com menos erros e iterações mais rápidas.

Portanto, essa combinação é feita para a criação de vídeos. Você descreve claramente os visuais desejados, o Codex é responsável por escrever o código e o HyperFrames renderiza o vídeo final.

2. Como Configurar o HyperFrames no Codex

As etapas básicas de instalação e configuração são as seguintes:

1. Instalar o Aplicativo Codex

Endereço para download: https://chatgpt.com/codex/

2. Instalar o Plugin HyperFrames

Entre no Aplicativo Codex e clique em Plugins na barra lateral esquerda.

!Image

Pesquise por HyperFrames e clique no sinal "+" para adicioná-lo.

!Image

Agora, você pode começar a usar os recursos do HyperFrames para criação de vídeos dentro do Codex.

3. Técnicas Práticas

Após a configuração, como você usa na prática? Aqui estão três dicas de produção de vídeo.

1. Prompts: Descreva os visuais desejados claramente, quanto mais específico, melhor

O núcleo de um bom prompt é traduzir as imagens detalhadas em sua mente em palavras. Especificamente, escreva o seguinte:

• Tipo de Animação/Vídeo: Demonstração de função, visualização de dados, teaser de evento de lançamento, curta para redes sociais, etc.
• Duração e Proporção de Tela: Ex.: 10 segundos, formato 9:16 para Douyin, etc.
• Objetivo do Vídeo: Uma frase explicando sobre o que é este vídeo e o que o público deve entender.
• Estilo Visual: Ex.: estilo Apple, interface de software realista, tecnologia minimalista, cinematográfico, etc.
• Elementos-chave: Texto essencial, ícones, produtos, dados, personagens, caminhos de materiais, etc.
• Requisitos de Movimento: Ex.: digitação em fluxo, fade in/out, transições de zoom, expansão de cartão, aproximação de câmera, etc.
• Requisitos de Áudio: Ex.: música de fundo, sons de digitação, sons de clique, narração, sincronização de efeitos sonoros, etc.

Por exemplo, aqui está o prompt que usei ao fazer uma abertura para um vídeo sobre a evolução do iPhone:

1Use [@HyperFrames] para criar uma animação de abertura que ilustre "Codex chamando HyperFrames para gerar um vídeo", proporção de tela padrão, duração não superior a 10s.
2#AnimationType + Duration
3O objetivo é mostrar o processo de "Estou usando HyperFrames no Codex para gerar um vídeo." #VideoGoal
4A cena começa a partir de uma página inicial de chat realista do Codex com tema escuro, com "What should we work on?" no centro e uma grande caixa de entrada abaixo. Na caixa de entrada, o texto começa a ser digitado como uma pessoa real: "Help me use HyperFrames by HeyGen to create a display animation of iPhone models through the generations." A parte "HyperFrames by HeyGen" deve aparecer como uma menção/chip de plugin com um pequeno ícone, claramente diferenciada do texto normal. #KeyElements + Motion
5Após a digitação ser concluída, clique em enviar para entrar no estado de geração: o ícone do Codex × ícone do HyperFrames aparece no centro, com "GENERATING..." exibido abaixo. Esta fase deve ter animações de geração leves, como ícones respirando, pulando ou vibrando, com pontos piscando, mas a sensação geral deve ser contida e profissional. #KeyElements + Motion
6Uma vez que a geração é concluída, retorne à interface de chat do Codex onde um cartão de pré-visualização de vídeo aparece. A capa do cartão é uma prévia escura de produto no estilo Apple com um logotipo da Apple e um botão de play no centro. Após clicar no botão de play, o cartão de vídeo se expande suavemente para tela cheia, como um vídeo formal sendo aberto, servindo como uma transição para o vídeo subsequente. #KeyElements + Motion
7O estilo geral deve ser realista, contido e de alto nível, próximo às interfaces reais de produtos Codex e tomadas de operação de software em filmes de lançamento da Apple. Use fade in / fade out suave para as trocas de interface; todo movimento deve ser limpo, nítido e natural. #VisualStyle
8Por favor, implemente usando HyperFrames e garanta que possa ser renderizado de forma estável como MP4. Sons de digitação, clique e geração devem ser integrados como faixas de áudio reais, não apenas efeitos sonoros em tempo real do navegador. #AudioRequirements

Claro, a primeira versão provavelmente não será perfeita; podemos simplesmente dizer ao Agente o que mudar. Observe para não fazer muitas alterações de uma vez, pré-visualize rapidamente após as alterações e continue ajustando se não estiver satisfeito. Quando necessário, tire um print e marque as áreas problemáticas diretamente na imagem, o que é muito mais eficiente do que feedback por texto.

2. Geração de Imagens: Use a habilidade Image Gen para criar ativos-chave

Fazer vídeos geralmente envolve gastar muito tempo preparando ativos visuais — fotos de produtos, imagens de capa, quadros-chave, etc. O Codex tem o GPT Image 2 integrado, permitindo que você gere os ativos necessários diretamente no projeto com efeitos requintados e estilos controláveis.

Método de ativação: Digite $image-gen

Por exemplo: Use $image-gen gpt image 2 para me ajudar a gerar uma vista frontal e traseira do iPhone original, respectivamente, referindo-se a materiais oficiais de celular, simulando o telefone real o máximo possível. Observe que as imagens devem preferencialmente ser transparentes para que possam ser facilmente integradas em qualquer fundo.

!Image

3. Geração de Música: Use IA para gerar música de fundo diretamente

Depois que o vídeo estiver pronto, como resolver a parte da música? Recomendo o Suno (suno.com), um site de geração de música por IA que oferece créditos gratuitos diários e fornece duas versões diferentes por geração, com boa qualidade geral.

!Image

Sugere-se especificar o estilo e o clima desejados no prompt, como "rítmico, épico, sem vocais".

Exemplo:

1Estilo de trailer de filme moderno, começando com percussão nítida e cortante (estalos, palmas), combinada com uma melodia de piano minimalista, adicionando gradualmente baixo eletrônico e ritmos em camadas. O refrão usa acordes de sintetizador para impulsionar camada por camada, e o clímax adiciona impacto orquestral completo e ritmos intensos. A textura geral é de alto nível e limpa, semelhante à energia de um evento de lançamento da Apple, 118 BPM, instrumental sem vocais.

!https://pbs.twimg.com/amplify_video_thumb/2051612857519738889/img/VhmZWed-aIZObqWb.jpg

Abaixo está o vídeo completo da evolução do iPhone que fiz usando Codex + HyperFrames; dos materiais e visuais à música, tudo foi feito em 1 hora. O limite para edição de vídeo foi significativamente reduzido pela IA. Se você tem ideias, vá experimentar; criar vídeos manualmente com código é realmente satisfatório.

Finalmente, sinta-se à vontade para me seguir @Saccc_c, continuarei compartilhando insights de IA e jogadas práticas. https://x.com/Saccc_c/status/2051145377865204222