Sitios cinematográficos|INEMA.CLUB-PRO

Clase 5 · 18 min

Película de la marca a partir del propio sitio

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
Dos monitores sobre una mesa oscura: a la izquierda una página con muestras de color, a la derecha una línea de tiempo de video; una claqueta cerrada sobre la mesa.

En esta clase vas a

  1. 1El ADN: qué lee filmarca de un sitio y dónde se equivoca
  2. 2Guion con hechos de la página y las seis escenas modelo (apertura, título, número, captura, lista, llamada)
  3. 3Render local, sin modelo: el ensayo que prueba el camino antes de gastar
  4. 4La película de vuelta en la página, sin pesar en el primer pintado

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.

01Del sitio a la película de la marca

Las etapas de filmarca. Haz clic en cada una.

Haz clic en cada bloque del diagrama para ver qué hace.

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.

02Instalar filmarca

En una carpeta de ensayo, en el commit probado. El npm test del proyecto corre sin modelo.

Terminal · clonar, instalar y probar
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)"
Ejemplo del repositorio
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.

03Leer el ADN de la página del kit

El servidor del kit sirve la página de la lente; filmarca la lee como leería cualquier sitio.

Terminal · dna del sitio del kit
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"
Ejemplo del repositorio
  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.

04Render sin modelo

Un guion con hechos de la página (kit/filmarca/roteiro.json) y las escenas modelo de filmarca en el lugar del paso escenas.

Terminal · escenas modelo, render y revisar
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: $?"
Archivo · kit/filmarca/roteiro.json
{
  "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 }
  ]
}
Ejemplo del repositorio
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.

05Con el modelo de tu suscripción, y de vuelta en la página

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.

Con el modelo · guion, escenas y render
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
Archivo · kit/exemplos/video-da-marca.html
<!-- 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>

06Práctica

El ensayo completo, y la película en la página.

E1 · Instalar

10 min

Ejecuta "clonar, instalar e testar".

Listo cuando: npm ci: 0, hyperframes 0.8.134 y ℹ fail 0.

E2 · DNA y película sin modelo

10 min

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.

E3 · La película en la página

15 min

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.

07Prueba de la clase

La explicación aparece después de tu respuesta.

Pregunta 1 de 4

¿Qué etapa de filmarca se ejecuta sin ningún modelo?

08En tres frases

DNAfilmarca lee el sitio sin modelo; revisa el marca.json.
EnsayoGuion a mano + escenas modelo + render local = película sin gastar nada.
De vueltaMP4 con póster y preload="none" en una sección de la página.

Para ir más allá

Clase anteriorPróxima clase