@koda-sl/baker-cli 0.394.0-dev.d28cef496 → 0.394.0

package/canvas/static-ad-composition/index.html

@@ -0,0 +1,253 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=__WIDTH__, height=__HEIGHT__" />
+    <script src="./gsap.min.js"></script>
+    <style>
+      /* The ad's own faces, staged beside this file by the render (a brand file or a web font
+         file). One range per face, so a single-weight file is used as it is instead of being
+         faked bolder. The browser fetches a face only when text uses it, and text uses it
+         only when a face was staged (see FRAME.fonts below). */
+      @font-face { font-family: 'AdHeadline'; src: url('./headline.font'); font-weight: 100 900; font-display: block; }
+      @font-face { font-family: 'AdBody'; src: url('./body.font'); font-weight: 100 900; font-display: block; }
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      html, body { width: __WIDTH__px; height: __HEIGHT__px; overflow: hidden; background: #000; }
+      #root { position: absolute; inset: 0; overflow: hidden; }
+      .plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
+      .scrim { position: absolute; left: 0; right: 0; pointer-events: none; display: none; }
+      .group { position: absolute; display: flex; flex-direction: column; gap: 0; }
+      .block { font-family: 'AdBody', 'Helvetica Neue', Arial, sans-serif; overflow-wrap: break-word; text-wrap: pretty; }
+      .block.headline, .block.subheadline, .block.cta { font-family: 'AdHeadline', 'AdBody', 'Helvetica Neue', Arial, sans-serif; }
+      .block.headline { text-wrap: balance; letter-spacing: -0.01em; }
+      .fill { display: inline-block; line-height: 1.1; padding: 0.5em 1.2em; }
+      .fill.highlight { padding: 0.12em 0.4em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
+      .fill.sticker { transform: rotate(-3deg); }
+      .logo { display: block; width: auto; object-fit: contain; }
+    </style>
+  </head>
+  <body>
+    <div id="root" data-composition-id="main" data-start="0" data-duration="1" data-width="__WIDTH__" data-height="__HEIGHT__">
+      <div class="scrim" id="scrim-top"></div>
+      <div class="scrim" id="scrim-bottom"></div>
+    </div>
+
+    <script>
+      (function () {
+        var AD = {{ad}};
+        var FRAME = {{frame}};
+        var W = __WIDTH__;
+        var H = __HEIGHT__;
+        var root = document.getElementById("root");
+        var safe = FRAME.safe || { top: 0.05, bottom: 0.05, left: 0.06, right: 0.06 };
+        var box = { x: safe.left * W, y: safe.top * H, w: W * (1 - safe.left - safe.right), h: H * (1 - safe.top - safe.bottom) };
+        // One unit per percent of the shorter side, so type reads the same size on every format.
+        var U = Math.min(W, H) / 100;
+        // A text-only ad has no picture (`plate: null`): the copy sits on the brand's ground.
+        var hasPlate = FRAME.plate !== null;
+        var ground = AD.background || { color: "#111111", ink: "#ffffff" };
+
+        var SIZE = { x_large: 8.6, large: 6.6, medium: 4.4, small: 3.0 };
+        var WEIGHT = { bold: 800, semibold: 600, regular: 400 };
+        var CASE = { upper: "uppercase", title: "capitalize", sentence: "none" };
+        var MAX_SHARE = { top: 0.44, middle: 0.3, bottom: 0.36 };
+        var RADIUS = { pill: "999px", rounded: "0.35em", square: "0" };
+
+        // With no face staged, the text never names the ad's faces, so the browser never asks
+        // for a file that is not there (a 404 the pre-render check refuses).
+        var FALLBACK_FACE = "'Helvetica Neue', Arial, sans-serif";
+        var facesStaged = FRAME.fonts !== false;
+
+        if (hasPlate) {
+          var plate = document.createElement("img");
+          plate.className = "plate";
+          plate.id = "plate";
+          plate.src = "./plate.png";
+          plate.alt = "";
+          root.insertBefore(plate, root.firstChild);
+        } else {
+          root.style.background = ground.color;
+        }
+
+        function luma(hex) {
+          var m = /^#?([0-9a-f]{6})$/i.exec(hex || "");
+          if (!m) return null;
+          var v = parseInt(m[1], 16);
+          return 0.2126 * ((v >> 16) & 255) + 0.7152 * ((v >> 8) & 255) + 0.0722 * (v & 255);
+        }
+
+        function alignSelf(align) {
+          return align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center";
+        }
+
+        // Every line is drawn in its group: the layout region the reference put it in (placed
+        // at that region's box on this format), or a band when the layout gave no position.
+        var groups = {};
+        var bands = { top: null, middle: null, bottom: null };
+        (AD.groups || []).forEach(function (g) {
+          groups[g.id] = g;
+        });
+
+        function bandEl(name) {
+          if (bands[name]) return bands[name];
+          var el = document.createElement("div");
+          el.className = "group band";
+          el.dataset.band = name;
+          el.style.left = box.x + "px";
+          el.style.width = box.w + "px";
+          el.style.gap = 1.6 * U + "px";
+          if (name === "top") el.style.top = box.y + "px";
+          if (name === "bottom") el.style.bottom = H - (box.y + box.h) + "px";
+          if (name === "middle") {
+            el.style.top = box.y + box.h / 2 + "px";
+            el.style.transform = "translateY(-50%)";
+          }
+          el.dataset.max = String(box.h * MAX_SHARE[name]);
+          root.appendChild(el);
+          bands[name] = el;
+          return el;
+        }
+
+        var placed = {};
+        function containerFor(groupId, band) {
+          var g = groups[groupId];
+          var at = g && g.at && g.at[FRAME.format];
+          if (!at) return bandEl((g && g.band) || band || "top");
+          if (placed[groupId]) return placed[groupId];
+          var el = document.createElement("div");
+          el.className = "group placed";
+          el.style.left = (at.x[0] / 100) * W + "px";
+          el.style.width = ((at.x[1] - at.x[0]) / 100) * W + "px";
+          el.style.top = (at.y[0] / 100) * H + "px";
+          el.style.minHeight = ((at.y[1] - at.y[0]) / 100) * H + "px";
+          el.style.justifyContent = "center";
+          el.style.gap = 1.2 * U + "px";
+          // Copy rewritten for our brand runs longer than the source's: allow some growth
+          // past the region before the type shrinks.
+          el.dataset.max = String(((at.y[1] - at.y[0]) / 100) * H * 1.35);
+          root.appendChild(el);
+          placed[groupId] = el;
+          return el;
+        }
+
+        function addLogo(logo) {
+          var img = document.createElement("img");
+          img.className = "logo";
+          img.src = "./logo.png";
+          img.alt = "";
+          img.style.height = 5.4 * U + "px";
+          img.style.maxWidth = box.w * 0.42 + "px";
+          img.style.alignSelf = alignSelf(logo.align);
+          img.onerror = function () {
+            img.remove();
+          };
+          var el = containerFor(logo.group, logo.band);
+          if (el.dataset.band === "bottom") el.appendChild(img);
+          else el.insertBefore(img, el.firstChild);
+        }
+
+        function addBlock(b) {
+          var el = document.createElement("div");
+          el.className = "block " + b.role;
+          if (!facesStaged) el.style.fontFamily = FALLBACK_FACE;
+          var size = b.role === "fine_print" ? 2.4 : SIZE[b.size] || SIZE.medium;
+          el.dataset.base = String(size);
+          el.style.fontSize = size * U + "px";
+          el.style.fontWeight = String(WEIGHT[b.weight] || (b.role === "cta" ? 700 : 400));
+          el.style.lineHeight = b.role === "headline" ? "1.04" : "1.22";
+          el.style.textTransform = CASE[b.case] || "none";
+          el.style.textAlign = b.align || "center";
+          el.style.alignSelf = alignSelf(b.align);
+          var t = b.treatment || { kind: b.role === "cta" && !AD.groups ? "button" : "plain" };
+          var ink = b.color || (hasPlate ? "#ffffff" : ground.ink);
+          var text = b.text;
+          if (t.kind === "arrow" && !/[→›»]\s*$/.test(text)) text = text + " →";
+          if (t.kind === "button" || t.kind === "sticker" || t.kind === "highlight") {
+            var fill = document.createElement("span");
+            fill.className = "fill " + t.kind;
+            fill.textContent = text;
+            fill.style.background = t.background || (AD.cta && AD.cta.background) || "#111111";
+            fill.style.color = t.color || (AD.cta && AD.cta.color) || "#ffffff";
+            fill.style.borderRadius = RADIUS[t.shape] || RADIUS.rounded;
+            el.appendChild(fill);
+          } else {
+            el.textContent = text;
+            el.style.color = ink;
+            if (t.kind === "underline") {
+              el.style.textDecoration = "underline";
+              el.style.textDecorationThickness = "0.08em";
+              el.style.textUnderlineOffset = "0.18em";
+            }
+            var dark = (luma(ink) || 255) < 110;
+            el.dataset.dark = dark ? "1" : "0";
+            if (hasPlate) el.style.textShadow = dark ? "0 1px 10px rgba(255,255,255,0.35)" : "0 2px 14px rgba(0,0,0,0.45)";
+          }
+          containerFor(b.group, b.band).appendChild(el);
+        }
+
+        var drawCopy = FRAME.draw_copy !== false;
+        (drawCopy ? AD.copy || [] : []).forEach(addBlock);
+        if (AD.logo) addLogo(AD.logo);
+
+        function containers() {
+          return Array.prototype.slice.call(root.querySelectorAll(".group"));
+        }
+
+        // Shrink a group's type until it fits its room and no line runs past its edge. The
+        // copy is whatever prompt.json says today, so its length is not known when the
+        // layout is written.
+        function fit(el) {
+          var max = Number(el.dataset.max);
+          var width = el.getBoundingClientRect().width;
+          var scale = 1;
+          for (var i = 0; i < 40; i++) {
+            var tooTall = el.scrollHeight > max;
+            var tooWide = Array.prototype.some.call(el.children, function (c) {
+              return c.scrollWidth > width + 1;
+            });
+            if ((!tooTall && !tooWide) || scale < 0.45) break;
+            scale *= 0.94;
+            Array.prototype.forEach.call(el.querySelectorAll(".block"), function (c) {
+              c.style.fontSize = Number(c.dataset.base) * U * scale + "px";
+            });
+          }
+        }
+
+        // A soft scrim behind a band of light type over the picture (or a light one behind
+        // dark type), so copy with no position of its own reads on any plate. Copy placed
+        // by the layout sits on the calm area the plate kept for it.
+        function scrim(name) {
+          var el = bands[name];
+          if (!hasPlate || !el) return;
+          var s = document.getElementById("scrim-" + name);
+          var firstText = el.querySelector(".block[data-dark]");
+          if (!firstText) return;
+          var tint = firstText.dataset.dark === "1" ? "255,255,255" : "0,0,0";
+          var rect = el.getBoundingClientRect();
+          var reach = name === "top" ? rect.bottom + 6 * U : H - rect.top + 6 * U;
+          s.style.display = "block";
+          s.style.height = Math.min(H * 0.6, reach) + "px";
+          if (name === "top") {
+            s.style.top = "0";
+            s.style.background = "linear-gradient(to bottom, rgba(" + tint + ",0.42), rgba(" + tint + ",0))";
+          } else {
+            s.style.bottom = "0";
+            s.style.background = "linear-gradient(to top, rgba(" + tint + ",0.42), rgba(" + tint + ",0))";
+          }
+        }
+
+        var tl = gsap.timeline({ paused: true });
+        tl.to({}, { duration: 1 });
+        window.__timelines = window.__timelines || {};
+        window.__timelines.main = tl;
+
+        var ready = document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
+        ready.then(function () {
+          containers().forEach(fit);
+          ["top", "bottom"].forEach(scrim);
+          root.setAttribute("data-ready", "1");
+        });
+      })();
+    </script>
+  </body>
+</html>

package/canvas/static-ad-composition/meta.json

@@ -0,0 +1,53 @@
+{
+  "id": "static-ad",
+  "title": "Static ad: the picture (or the brand colours) with what the concept holds drawn on top",
+  "description": "Written by `baker canvas scaffold-static-ad`, one copy per delivered format. Draws only what prompt.compose.json (derived from prompt.json) holds: each line of copy where the source layout placed it, set the way the reference set it (plain, underlined, with an arrow, as a button or sticker), in the staged fonts, and the logo file only when the concept shows one. The plate is the image model's clean picture; a text-only ad has none and sits on the brand colour. Width and height are this format's delivered size.",
+  "width": 1080,
+  "height": 1350,
+  "fps": 1,
+  "default_duration": 1,
+  "inputs": {
+    "plate": {
+      "kind": "image",
+      "required": false,
+      "staged_as": "plate.png",
+      "description": "The picture, with no overlay text and no logo. Absent for a text-only ad."
+    },
+    "logo": {
+      "kind": "image",
+      "required": false,
+      "staged_as": "logo.png",
+      "description": "The brand logo file, wired only when the concept shows a logo."
+    },
+    "font_headline": {
+      "kind": "font",
+      "required": false,
+      "staged_as": "headline.font",
+      "description": "The brand's headline face."
+    },
+    "font_body": {
+      "kind": "font",
+      "required": false,
+      "staged_as": "body.font",
+      "description": "The brand's body face."
+    },
+    "compose": {
+      "kind": "json",
+      "required": true,
+      "staged_as": "compose.json",
+      "description": "prompt.compose.json, also passed inline as the `ad` param."
+    }
+  },
+  "params": {
+    "ad": {
+      "kind": "json",
+      "required": true,
+      "description": "The copy blocks, logo placement and CTA colours (prompt.compose.json)."
+    },
+    "frame": {
+      "kind": "json",
+      "required": true,
+      "description": "This format: its safe area, whether copy is drawn, the picture it is cut from (plate: null for none), and whether fonts are staged."
+    }
+  }
+}

package/dist/{chunk-AOVFDDVW.js → chunk-53ATKV76.js}

@@ -947,6 +947,12 @@ function round2(value) {
 function asRecord(value) {
   return value && typeof value === "object" ? value : {};
 }
+function bakerUses(value) {
+  const uses = asRecord(value);
+  const companies = typeof uses.companies === "number" ? uses.companies : 0;
+  if (companies === 0) return {};
+  return { baker_uses: companies, ...uses.ours === true ? { already_adapted: true } : {} };
+}
 function compactWinningAd(record) {
   const dna = asRecord(record.dna);
   return {
@@ -958,7 +964,11 @@ function compactWinningAd(record) {
     summary: String(dna.creative_concept ?? ""),
     advertiser_id: String(record.advertiser_id ?? ""),
     ad_id: String(record.ad_id ?? ""),
-    media_url: String(record.media_url ?? "")
+    media_url: String(record.media_url ?? ""),
+    ...typeof dna.visual === "string" && dna.visual ? { visual: dna.visual } : {},
+    ...typeof dna.container === "string" && dna.container ? { container: dna.container } : {},
+    ...bakerUses(record.baker_uses),
+    ...record.source === "followed" || record.source === "library" ? { source: record.source } : {}
   };
 }
 function fullWinningAd(record) {
@@ -975,6 +985,7 @@ function fullWinningAd(record) {
     awareness_stage: dna.awareness_stage ?? null,
     target_persona: dna.target_persona ?? null,
     hook_archetype: dna.hook_archetype ?? null,
+    mechanism: dna.mechanism ?? null,
     industry: dna.industry ?? null
   };
 }
@@ -1299,4 +1310,4 @@ export {
   captureVimeoCookie,
   childEnvWith
 };
-//# sourceMappingURL=chunk-AOVFDDVW.js.map
+//# sourceMappingURL=chunk-53ATKV76.js.map