En el pasado, hacer videos requería encontrar materiales, aprender edición y sincronizar música, lo que implicaba costos extremadamente altos. Ahora con la IA, mientras uses bien la combinación de Codex + HyperFrames, la edición básica y la animación se pueden completar en solo 1 hora. En este artículo, combinaré mi propia experiencia práctica para compartir las técnicas clave del uso de Codex + HyperFrames para crear videos, ayudando a cada creador de contenido a alcanzar la libertad de edición de video.
1. ¿Qué es HyperFrames? ¿Por qué usarlo?
HyperFrames es un marco de producción de video basado en código, de código abierto por @HeyGen. Con él, no necesitas abrir ningún software de edición; puedes generar videos directamente escribiendo código.
¿Por qué es especialmente adecuado combinarlo con Codex? Dos razones:
- Escribir código es lo que mejor saben hacer los Agentes de IA, y Codex es actualmente una herramienta de nivel T0. Simplemente describes las imágenes que deseas y dejas que él escriba el código.
- HyperFrames está escrito directamente en HTML, diseñado naturalmente para Agentes. La IA escribe HTML de manera más fluida que cualquier otro formato, con menos errores e iteraciones más rápidas.
Por lo tanto, esta combinación nace para la creación de video. Describes claramente las imágenes deseadas, Codex se encarga de escribir el código y HyperFrames renderiza el video final.
2. Cómo configurar HyperFrames en Codex
Los pasos básicos de instalación y configuración son los siguientes:
1. Instalar la aplicación Codex
Dirección de descarga: https://chatgpt.com/codex/
2. Instalar el plugin HyperFrames
Ingresa a la aplicación Codex y haz clic en Plugins en la barra lateral izquierda.
Busca HyperFrames y haz clic en el signo "+" para añadirlo.
Ahora, puedes comenzar a usar las funciones de HyperFrames para crear videos dentro de Codex.
3. Técnicas prácticas
Después de la configuración, ¿cómo lo usas en la práctica? Aquí tienes tres consejos para la producción de videos.
1. Prompts: Describe las imágenes deseadas claramente, cuanto más específico, mejor
El núcleo de un buen prompt es traducir las imágenes detalladas de tu mente en palabras. Específicamente, anota lo siguiente:
- Tipo de animación/video: Demostración de funciones, visualización de datos, avance de evento de lanzamiento, corto para redes sociales, etc.
- Duración y relación de aspecto: ej., 10 segundos, formato 9:16 para Douyin, etc.
- Objetivo del video: Una frase que explique de qué trata este video y qué debería entender la audiencia.
- Estilo visual: ej., estilo Apple, interfaz de software realista, tecnología minimalista, cinematográfico, etc.
- Elementos clave: Texto esencial, iconos, productos, datos, personajes, rutas de materiales, etc.
- Requisitos de movimiento: ej., escritura en vivo, fundido de entrada/salida, transiciones de zoom, expansión de tarjeta, acercamiento de cámara, etc.
- Requisitos de audio: ej., música de fondo, sonidos de escritura, sonidos de clic, narración, sincronización de efectos de sonido, etc.
Por ejemplo, aquí está el prompt que usé al hacer una apertura para un video sobre la evolución del iPhone:
1Usa [@HyperFrames] para crear una animación de apertura que ilustre "Codex llamando a HyperFrames para generar un video", relación de aspecto predeterminada, duración máxima de 10 s.2#AnimationType + Duration3El objetivo es mostrar el proceso de "Estoy usando HyperFrames en Codex para generar un video". #VideoGoal4La escena comienza desde una página de chat realista de Codex con tema oscuro, con "¿En qué deberíamos trabajar?" en el centro y un gran cuadro de entrada debajo. En el cuadro de entrada, el texto comienza a escribirse como si una persona real estuviera tecleando: "Ayúdame a usar HyperFrames de HeyGen para crear una animación de los modelos de iPhone a través de las generaciones". La parte "HyperFrames de HeyGen" debe aparecer como una mención/chip de plugin con un pequeño icono, claramente diferenciada del texto normal. #KeyElements + Motion5Después de escribir, haz clic en enviar para entrar en el estado de generación: aparece el icono de Codex × icono de HyperFrames en el centro, con "GENERANDO..." debajo. Esta etapa debe tener ligeras animaciones de generación, como respiración de iconos, saltos o vibraciones, con puntos parpadeando, pero la sensación general debe ser contenida y de producto. #KeyElements + Motion6Una vez completada la generación, regresa a la interfaz de chat de Codex donde aparece una tarjeta de vista previa del video. La portada de la tarjeta es una vista previa oscura de producto al estilo Apple con un logo de Apple y un botón de reproducción en el centro. Después de hacer clic en el botón de reproducción, la tarjeta de video se expande suavemente a pantalla completa, como si se abriera un video formal, sirviendo como transición al video siguiente. #KeyElements + Motion7El estilo general debe ser realista, contenido y de alta gama, cercano a las interfaces reales del producto Codex y las tomas de operación de software en los films de lanzamiento de Apple. Usa fundidos suaves de entrada/salida para los cambios de interfaz; todo el movimiento debe ser limpio, nítido y natural. #VisualStyle8Por favor, implementa usando HyperFrames y asegúrate de que pueda renderizarse de manera estable como MP4. Los sonidos de escritura, clic y generación deben integrarse como pistas de audio reales, no solo efectos de sonido en tiempo real del navegador. #AudioRequirements
Por supuesto, es probable que la primera versión no sea perfecta; podemos simplemente decirle al Agente qué cambiar. Nota que no hagas demasiados cambios a la vez, previsualiza rápidamente después de los cambios, y continúa ajustando si no estás satisfecho. Cuando sea necesario, toma una captura de pantalla y marca las áreas problemáticas directamente en la imagen, lo cual es mucho más eficiente que retroalimentación por texto.
2. Generación de imágenes: Usa la habilidad Image Gen para crear activos clave
Hacer videos generalmente implica dedicar mucho tiempo a preparar activos visuales: fotos de productos, imágenes de portada, fotogramas clave, etc. Codex tiene integrado GPT Image 2, lo que te permite generar los activos que necesitas directamente dentro del proyecto con efectos exquisitos y estilos controlables.
Método de activación: Ingresa $image-gen
Por ejemplo: Usa $image-gen gpt image 2 para ayudarme a generar una vista frontal y posterior del iPhone original respectivamente, refiriéndote a material oficial del teléfono, simulando el teléfono real tanto como sea posible. Nota que las imágenes preferiblemente deben ser transparentes para que puedan integrarse fácilmente en cualquier fondo.
3. Generación de música: Usa IA para generar música de fondo directamente
Una vez que el video está listo, ¿cómo resuelves la parte de la música? Recomiendo Suno (suno.com), un sitio de generación de música con IA que ofrece créditos gratuitos diarios y proporciona dos versiones diferentes por generación con buena calidad general.
Se sugiere especificar el estilo y el estado de ánimo deseados en el prompt, como "rítmico, épico, sin voz".
Ejemplo:
1Estilo de tráiler de película moderna, comenzando con percusión nítida y aguda (chasquidos, aplausos), combinada con una melodía minimalista de piano, añadiendo gradualmente bajo electrónico y ritmos en capas. El coro utiliza acordes de sintetizador para avanzar capa por capa, y el clímax añade impacto orquestal completo y ritmos impulsivos. La textura general es de alta gama y limpia, similar a la energía de un evento de lanzamiento de Apple, 118 BPM, instrumental sin voz.
!https://pbs.twimg.com/amplify_video_thumb/2051612857519738889/img/VhmZWed-aIZObqWb.jpg
A continuación se muestra el video completo de la evolución del iPhone que hice usando Codex + HyperFrames; desde materiales y visuales hasta música, se hizo en 1 hora. El umbral para la edición de video se ha reducido significativamente gracias a la IA. Si tienes ideas, pruébalo; crear videos a mano con código es realmente satisfactorio. Finalmente, siéntete libre de seguirme @Saccc_c, seguiré compartiendo conocimientos de IA y juegos prácticos.
