@ignix-social/editor 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ignix-social/editor",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Ignix Editor: render HTML video compositions (reels, edits, clips) on your own computer. Based on HyperFrames.",
   "license": "Apache-2.0",
   "type": "module",

package/skills/ignix-editor/SKILL.md

@@ -14,6 +14,7 @@ Commands (`npx @ignix-social/editor <cmd>` if `ignix-editor` is not on the PATH)
 | `ignix-editor doctor` | Node 22+ and the H.264 encoder; downloads its own ffmpeg and whisper the first time. Run it first. |
 | `ignix-editor init <name>` | Creates `~/ignix-videos/<name>` with a working skeleton, GSAP, local fonts and `ignix-frame.js`. |
 | `ignix-editor transcribe <file> --lang es [--script "…"] -o words.json` | Words with start/end seconds, on this machine. |
+| `ignix-editor faces <video> -o work/faces.json` | Where the face is over time (macOS, Apple Vision): a smoothed path `{t, cx, cy, size}` (0–1, top-left origin) to frame the person. |
 | `ignix-editor check [dir]` | HTML well-formed, no network assets, media rules, layout/contrast/motion audit. |
 | `ignix-editor snapshot [dir] --at 0,1.5,3` | PNG frames into `<dir>/snapshots/` to LOOK at. `[dir]` defaults to the current folder. |
 | `ignix-editor render [dir] [-o out.mp4]` | Renders to `<dir>/renders/<dir>.mp4`, audio normalised to −14 LUFS. |
@@ -94,16 +95,26 @@ Decide the zones once per video (e.g. header y 270–440, stage y 460–1300, ca
 - Transcribe on the machine: `ignix-editor transcribe assets/take.mp4 --lang es -o work/words.json`. Show the user the text and fix obvious mishearings (names, brands) without rewriting what they said.
 - Cuts: one `<video>` per kept range, edge to edge (`data-start` of the next = previous start + duration). Build a map from source time to edited time and pass every word time, zoom, overlay and sound through it.
 - Voice clean-up before building: `ignix-editor ffmpeg -i take.mp4 -vn -ac 1 -ar 48000 -af "highpass=f=80,acompressor=threshold=-22dB:ratio=3:attack=5:release=120:makeup=2" assets/voice.wav`, then one `<audio>` per kept range with `data-media-start` and 8 ms fade lanes, and the videos `muted`.
-- Reframing a horizontal source to 9:16 and following the face: a fixed card/frame element with `overflow:hidden`; inside it a wrapper sized like the card, `transform-origin:0 0`, moved with `translate(-x·z, -y·z) scale(z)` per frame from a face path (one point per frame, smoothed). Zooms multiply `z`.
+- Reframing a horizontal source to 9:16 and following the face: `ignix-editor faces assets/take.mp4 -o work/faces.json` gives a smoothed path (`cx`, `cy` = centre of the face, `size` = its height, all 0–1). Map it through your cut map like the words. Then a fixed card/frame element with `overflow:hidden`; inside it a wrapper sized like the card, `transform-origin:0 0`, moved with `translate(-x·z, -y·z) scale(z)` per frame from that path (interpolate between samples). Zooms multiply `z`.
+- The cover is the first frame: the face AND the hook. If the person is not in shot yet in the first second (sitting down, walking in), use a still of their face from later (`ignix-editor ffmpeg -ss <t> -i take.mp4 -frames:v 1 assets/cover.jpg`) under the hook for ~1 s, with a slow push, then cut to the footage.
+- The same file in two places at once (main shot + a small picture-in-picture window): give the second one its own copy (`cp take.mp4 take-pip.mp4`); `check` flags two simultaneous clips of one file.
 - Blurred background of the same footage: a second set of the same `<video>` elements behind, in a wrapper with `filter: blur(60px) brightness(.32)` and `transform: scale(1.25)`. (Heavy without a GPU: on a machine without one, prefer a pre-blurred copy made with ffmpeg.)
 - Long sources (lives, podcasts) are fine: the editor seeks straight to `data-media-start`.
 
+### The bundled ffmpeg (LGPL)
+
+`ignix-editor ffmpeg` is a licence-clean build: everything you need for audio and simple video prep, but no GPL parts.
+- Encode H.264 with `-c:v h264_videotoolbox -b:v 10M -allow_sw 1` (there is no `libx264` and no `-crf`). AAC audio: `-c:a aac -b:a 192k`.
+- Present: `scale`, `crop`, `pad`, `overlay`, `trim`/`atrim`, `concat`, `gblur`, `avgblur`, `curves`, `lutyuv`, `colorbalance`, `colorchannelmixer`, `fade`, `afade`, `highpass`, `lowpass`, `acompressor`, `loudnorm`, `ebur128`, `silencedetect`, `amix`, `volume`.
+- Missing (GPL): `eq` (use `curves`/`lutyuv` for contrast and warmth), `boxblur` (use `gblur`), `delogo` (cover a burned-in label with a cropped, `gblur`red patch of the same frame placed by `overlay`, or with a card in the HTML).
+- Grading and blur are usually easier in the HTML anyway (CSS `filter: contrast() saturate() blur()`).
+
 ## 4. Audio and captions for reels from scratch
 
 - One `<audio>` per voice line (Ignix `generate_voiceover`), placed back to back with ~0.25 s of air: the scenes follow the voice.
 - Word times: `ignix-editor transcribe assets/vo/l1.wav --lang es --script "<the exact line>" -o work/l1.json`. With `--script` the words are the script's and the times are whisper's (whisper mishears and sometimes drops the last words; the script wins).
 - Anchor every gesture (click, pop, highlight, cut) to a word time: `cue = line.start + word.s`. Sound effects start on their gesture.
-- Captions: groups of 2–3 words that never cross the end of a line; current word in the brand accent; font size shrinks for long groups so they fit the ~820 px column.
+- Captions: groups of 2–3 words that never cross the end of a line; current word in the brand accent; font size shrinks for long groups so they fit the ~820 px column. Keep a real gap between words (`gap: 0 0.3em` on the flex row): if the active word grows (`scale`), it eats a smaller gap and «EDITORES DE» reads «EDITORESDE» — grow it at most ~5 %, or only change its colour.
 - The final mix is normalised to −14 LUFS by `render` (`--lufs` to change, `--no-normalize` to skip).
 
 ## 5. Generate the HTML from data
@@ -124,7 +135,7 @@ Re-run it whenever the voice or the cuts change; the animation code reads `windo
 - Emojis render with the operating system's emoji font (different design on other machines).
 - An element that ends past `data-duration` is cut; a timeline shorter than it holds the last frame.
 - `check` also reads HTML comments: never leave example `<video>`/`<audio>` tags inside `<!-- -->` (it reports their files as missing).
-- `check` reports layout overlaps: real ones (a zoomed window under the header) must be fixed; intentional ones get `data-layout-allow-overlap` / `data-layout-allow-overflow` on the element.
+- `check` reports layout overlaps: real ones (a zoomed window under the header) must be fixed; intentional ones get `data-layout-allow-overlap` / `data-layout-allow-overflow` on the element. A title split in lines (one element per line) is reported line against line: put `data-layout-allow-overlap` on EACH line, not only on the container.
 
 ## 7. Review before showing anything
 

package/src/cli.mjs

@@ -2,6 +2,7 @@
 // debajo con nuestro entorno: sin telemetría, sin actualizaciones solas, con nuestros binarios.
 // Los mensajes van en inglés, como el manual y la skill: los lee sobre todo el agente.
 import { spawnSync } from 'node:child_process';
+import { createHash } from 'node:crypto';
 import { cpSync, existsSync, mkdirSync, readFileSync, rmSync, symlinkSync, writeFileSync } from 'node:fs';
 import { createRequire } from 'node:module';
 import { homedir } from 'node:os';
@@ -231,6 +232,53 @@ const commands = {
     } else console.log(json);
   },
 
+  // Dónde está la cara a lo largo del vídeo, para encuadrar en vertical siguiéndola.
+  // macOS: Apple Vision desde un Swift propio (src/native/faces.swift), compilado una vez.
+  async faces(argv) {
+    const { pos, opts } = parseArgs(argv, { every: 'str', output: 'str', smooth: 'str' });
+    const input = pos[0] && resolve(pos[0]);
+    if (!input || !existsSync(input)) fail('Usage: ignix-editor faces <video> [--every 0.2] [--smooth 1] [-o work/faces.json]');
+    if (process.platform !== 'darwin') fail('faces needs macOS for now. Elsewhere, frame the person by hand from stills (snapshot) or keep a centred crop.');
+    const src = join(PKG_DIR, 'src', 'native', 'faces.swift');
+    const hash = createHash('sha256').update(readFileSync(src)).digest('hex').slice(0, 12);
+    const bin = join(HOME, 'bin', PLATFORM, `faces-${hash}`);
+    if (!existsSync(bin)) {
+      mkdirSync(dirname(bin), { recursive: true });
+      log('Compiling the face tracker (first time only)…');
+      const c = spawnSync('xcrun', ['swiftc', '-O', '-parse-as-library', src, '-o', bin], { encoding: 'utf8' });
+      if (c.status !== 0) fail(`Could not compile the face tracker. It needs Apple's Command Line Tools (xcode-select --install).\n${(c.stderr || c.error?.message || '').slice(-400)}`);
+    }
+    const every = Math.max(0.05, Number(opts.every ?? 0.2));
+    const r = spawnSync(bin, [input, String(every)], { encoding: 'utf8', maxBuffer: 256 * 1024 * 1024 });
+    if (r.status !== 0) fail(`Face tracking failed: ${(r.stderr || '').slice(-400)}`);
+    const raw = JSON.parse(r.stdout);
+    const S = raw.samples;
+    // Huecos sin cara: la posición conocida más cercana; si no hay ninguna, el centro.
+    const known = S.map((x, i) => (x.w ? i : -1)).filter((i) => i >= 0);
+    const filled = S.map((x, i) => {
+      if (x.w) return x;
+      if (!known.length) return { t: x.t, x: 0.4, y: 0.3, w: 0.2, h: 0.2 };
+      const k = known.reduce((a, b) => (Math.abs(b - i) < Math.abs(a - i) ? b : a));
+      return { ...S[k], t: x.t };
+    });
+    // Suavizado: media móvil de ~1 s (configurable) sobre el centro y el tamaño.
+    const half = Math.max(1, Math.round(Number(opts.smooth ?? 1) / every / 2));
+    const avg = (i, f) => {
+      let sum = 0, n = 0;
+      for (let j = Math.max(0, i - half); j <= Math.min(filled.length - 1, i + half); j++) (sum += f(filled[j])), n++;
+      return +(sum / n).toFixed(4);
+    };
+    const path = filled.map((x, i) => ({ t: x.t, cx: avg(i, (y) => y.x + y.w / 2), cy: avg(i, (y) => y.y + y.h / 2), size: avg(i, (y) => y.h) }));
+    const out = { source: input, width: raw.width, height: raw.height, duration: raw.duration, every, found: known.length, samples: S.length, path };
+    const json = JSON.stringify(out);
+    log(`✓ Face found in ${known.length}/${S.length} samples${known.length < S.length ? ' (gaps filled with the nearest position)' : ''}`);
+    if (opts.output) {
+      mkdirSync(dirname(resolve(opts.output)), { recursive: true });
+      writeFileSync(resolve(opts.output), json);
+      console.log(resolve(opts.output));
+    } else console.log(json);
+  },
+
   async ffmpeg(argv) {
     const r = spawnSync(await ensureTool('ffmpeg', log), argv, { stdio: 'inherit' });
     process.exit(r.status ?? 1);
@@ -264,6 +312,7 @@ const commands = {
   ignix-editor render [folder] [-o out.mp4] [--lufs -14] [--no-normalize]
   ignix-editor preview [folder]                live preview in the browser
   ignix-editor transcribe <file> [--lang es] [--script "text"] [-o words.json]
+  ignix-editor faces <video> [--every 0.2] [-o faces.json]   where the face is, smoothed (macOS)
   ignix-editor ffmpeg|ffprobe <args>           Ignix Editor's own ffmpeg
   ignix-editor skills add                      installs the skill for Claude
 

package/src/native/faces.swift

@@ -0,0 +1,60 @@
+// faces — dónde está la cara en cada momento de un vídeo (Apple Vision, macOS 13+).
+// Uso: faces <vídeo> <cada_segundos>  → JSON por stdout:
+//   { "duration": s, "width": px, "height": px, "samples": [ { "t": s, "x":…, "y":…, "w":…, "h":… } | { "t": s } ] }
+// x, y, w, h normalizados 0–1 con origen ARRIBA a la izquierda (como CSS). Sin cara → solo "t".
+import AVFoundation
+import Foundation
+import Vision
+
+@main
+struct Faces {
+  static func main() async {
+    let args = CommandLine.arguments
+    guard args.count >= 2 else {
+      FileHandle.standardError.write("usage: faces <video> [every_seconds]\n".data(using: .utf8)!)
+      exit(2)
+    }
+    let url = URL(fileURLWithPath: args[1])
+    let every = args.count >= 3 ? (Double(args[2]) ?? 0.2) : 0.2
+    let asset = AVURLAsset(url: url)
+    do {
+      let duration = try await asset.load(.duration).seconds
+      guard let track = try await asset.loadTracks(withMediaType: .video).first else {
+        FileHandle.standardError.write("no video track\n".data(using: .utf8)!)
+        exit(1)
+      }
+      let size = try await track.load(.naturalSize).applying(try await track.load(.preferredTransform))
+      let gen = AVAssetImageGenerator(asset: asset)
+      gen.appliesPreferredTrackTransform = true
+      gen.requestedTimeToleranceBefore = CMTime(value: 1, timescale: 30)
+      gen.requestedTimeToleranceAfter = CMTime(value: 1, timescale: 30)
+      gen.maximumSize = CGSize(width: 960, height: 960)
+
+      var samples: [[String: Double]] = []
+      var t = 0.0
+      while t < duration {
+        var sample: [String: Double] = ["t": (t * 1000).rounded() / 1000]
+        if let (image, _) = try? await gen.image(at: CMTime(seconds: t, preferredTimescale: 600)) {
+          let req = VNDetectFaceRectanglesRequest()
+          try? VNImageRequestHandler(cgImage: image, options: [:]).perform([req])
+          // La cara más grande: la de quien habla a cámara.
+          if let f = (req.results ?? []).max(by: { $0.boundingBox.width * $0.boundingBox.height < $1.boundingBox.width * $1.boundingBox.height }) {
+            let b = f.boundingBox // Vision: origen ABAJO a la izquierda
+            sample["x"] = b.minX
+            sample["y"] = 1 - b.maxY
+            sample["w"] = b.width
+            sample["h"] = b.height
+          }
+        }
+        samples.append(sample)
+        t += every
+      }
+      let out: [String: Any] = ["duration": duration, "width": abs(size.width), "height": abs(size.height), "samples": samples]
+      let data = try JSONSerialization.data(withJSONObject: out)
+      FileHandle.standardOutput.write(data)
+    } catch {
+      FileHandle.standardError.write("faces failed: \(error)\n".data(using: .utf8)!)
+      exit(1)
+    }
+  }
+}