E1 · Instalar
10 minEjecuta "clonar, instalar e testar".
Listo cuando: npm ci: 0, hyperframes 0.8.134 y ℹ fail 0.
Clase 5 · 18 min
Hasta aquí el video se convirtió en página. Ahora el camino inverso: la página se convierte en video. filmarca (INEMA) lee colores, fuentes, logo, textos y capturas de un sitio y arma una película de la marca en HyperFrames. Tú corres el camino completo contra la página del kit sin llamar a ningún modelo, con las escenas modelo del propio filmarca, y después pones la película en la página.
Comenzar la clase
Objetivo: leer el ADN del sitio del kit con filmarca y renderizar una película de la marca con escenas modelo, sin llamar a ningún modelo.
Las etapas de filmarca. Haz clic en cada una.
filmarca fija hyperframes 0.8.134 en su package-lock (19/10/2026); el curso 3 enseña la 0.8.176. Usa el lock del proyecto: es el que pasaron sus pruebas.
En una carpeta de ensayo, en el commit probado. El npm test del proyecto corre sin modelo.
E=${TMPDIR:-/tmp}/ensaio-sites/a5; rm -rf "$E"; mkdir -p "$E"; cd "$E"
git clone -q https://github.com/inematds/filmarca && cd filmarca && git checkout -q 0c0356c; echo "clone: $?"
npm ci --no-audit --no-fund > npm.log 2>&1; echo "npm ci: $?"
node -p "'hyperframes ' + require('hyperframes/package.json').version + ' · playwright ' + require('playwright/package.json').version"
npx playwright install chromium > pw.log 2>&1; echo "chromium: $?"
npm test 2>&1 | grep -E "^ℹ (pass|fail)"clone: 0 npm ci: 0 hyperframes 0.8.134 · playwright 1.63.0 chromium: 0 ℹ pass 5 ℹ fail 0
Las 5 pruebas demuestran que una escena rota es rechazada y que la escena modelo entra en su lugar.
El servidor del kit sirve la página de la lente; filmarca la lee como leería cualquier sitio.
K=~/projetos/formacao-cinema-ia-sites-v72/kit
E=${TMPDIR:-/tmp}/ensaio-sites/a5; cd "$E/filmarca"
node "$K/scripts/servir.mjs" "$K/site" > "$E/url.txt" & S=$!
until U=$(cat "$E/url.txt") && [ -n "$U" ] && curl -s -o /dev/null "$U"; do sleep 0.3; done
node bin/filmarca.mjs dna "$U" --out "$E/filme"; echo "dna: $?"
kill $S
ls "$E/filme/assets"lendo http://127.0.0.1:<porta>/ marca: Aurora 35 · cores #0c0c10 #f3efe7 #e2a23b #e2a23b #0b0b0d · fontes Georgia / system-ui · logo assets/logo.svg dna: 0 fonts logo.svg print-1.png print-2.png print-3.png print-celular.png print-topo.png
Fíjate en el color primario: #e2a23b es el amarillo de la llave de movimiento (Parado / Ligado), no el detalle de la marca. El ADN lee lo que aparece en pantalla. Revisa el marca.json antes de generar y corrige a mano lo que esté mal.
Un guion con hechos de la página (kit/filmarca/roteiro.json) y las escenas modelo de filmarca en el lugar del paso escenas.
K=~/projetos/formacao-cinema-ia-sites-v72/kit
E=${TMPDIR:-/tmp}/ensaio-sites/a5; cd "$E/filmarca"
export HYPERFRAMES_NO_TELEMETRY=1
cp "$K/filmarca/roteiro.json" "$E/filme/"
node "$K/scripts/cenas-modelo.mjs" . "$E/filme"
node bin/filmarca.mjs render "$E/filme" --formatos 16x9 --rascunho; echo "render: $?"
python3 "$K/scripts/conferir-video.py" "$E/filme/renders/aurora-35-pt-16x9.mp4" 17.5 1920x1080; echo "saída: $?"{
"titulo": "Aurora 35",
"conceito": "a lente apresentada só com o que a página dela diz: luz baixa, abertura, ficha e reserva",
"lang": "pt",
"cenas": [
{ "id": "c1", "tipo": "abertura", "duracao": 3.5, "textos": { "frase": "Feita para a cena que acontece com pouca luz." }, "direcao": "", "midia": null },
{ "id": "c2", "tipo": "numero", "duracao": 3, "textos": { "numero": "f/1.4", "legenda": "para filmar no fim da tarde sem subir o ISO" }, "direcao": "", "midia": null },
{ "id": "c3", "tipo": "print", "duracao": 3.5, "textos": { "legenda": "Lente prime de 35 mm" }, "direcao": "", "midia": "assets/print-topo.png" },
{ "id": "c4", "tipo": "lista", "duracao": 4, "textos": { "titulo": "Ficha técnica", "itens": ["35 mm", "f/1.4 a f/16", "Encaixe PL e EF", "780 g"] }, "direcao": "", "midia": null },
{ "id": "c5", "tipo": "cta", "duracao": 3.5, "textos": { "chamada": "Reserve a sua", "botao": "Reservar a Aurora 35" }, "direcao": "", "midia": null }
]
}cenas-modelo: 5 cenas · 17,5 s · marca Aurora 35 · logo assets/logo.svg ✓ renders/aurora-35-pt-16x9.mp4 · 8 s (lint com avisos) /tmp/ensaio-sites/a5/filme/renders/aurora-35-pt-16x9.mp4 render: 0 OK: 17,5 s · 1920×1080 · 30 fps · sem áudio saída: 0
Cinco escenas, 17,5 s, render de borrador en segundos. "lint com avisos" es un aviso, no un error: el MP4 salió y pasó el verificador.
El paso real cambia el guion escrito a mano y las escenas modelo por el director y por las escenas animadas por el modelo. Después, el MP4 entra en la página.
cd <carpeta-del-filmarca> node bin/filmarca.mjs roteiro <carpeta-de-la-película> --pedido "película de presentación de la lente para la página" --motor claude node bin/filmarca.mjs cenas <carpeta-de-la-película> --motor claude node bin/filmarca.mjs render <carpeta-de-la-película> --formatos 16x9,9x16 --rascunho
<!-- O filme da marca numa seção comum da página: só baixa e toca quando a pessoa pede. -->
<section class="secao" id="filme-da-marca">
<h2>A Aurora 35 em 17 segundos</h2>
<video src="filme/aurora-35-pt-16x9.mp4" poster="filme/poster.jpg"
controls muted playsinline preload="none" width="1280" height="720"
style="width:100%;height:auto;border-radius:14px"></video>
</section>El ensayo completo, y la película en la página.
Ejecuta "clonar, instalar e testar".
Listo cuando: npm ci: 0, hyperframes 0.8.134 y ℹ fail 0.
Ejecuta "dna do site do kit" y luego "cenas-modelo, render e conferir".
Listo cuando: dna: 0, render: 0 y OK: 17,5 s · 1920×1080 con saída: 0.
En una copia de la página del kit, crea la carpeta filme/, copia el MP4 y saca el póster (ffmpeg -ss 2 -i filme/aurora-35-pt-16x9.mp4 -frames:v 1 filme/poster.jpg). Pega la sección de kit/exemplos/video-da-marca.html antes de la ficha técnica y ejecuta peso.py con --inicial 0.5.
Listo cuando: peso.py muestra vídeo en la línea PESO y primeira pintura … DENTRO.
La explicación aparece después de tu respuesta.
Pregunta 1 de 4
¿Qué etapa de filmarca se ejecuta sin ningún modelo?
Pregunta 2 de 4
El DNA dio el color primario #e2a23b, que es el color del botón de movimiento. ¿Qué haces?
Pregunta 3 de 4
Una escena escrita por el modelo fue rechazada dos veces por la revisión. ¿Qué hace filmarca?
Pregunta 4 de 4
¿Por qué el video de la marca entra en la página con preload="none"?
Elige una alternativa. La explicación aparece después de tu intento.