@orangecatai/adgen-canvas 0.0.32 → 0.0.33

package/dist/dev/index.js

@@ -66,10 +66,10 @@ import {
   serializeAsJSON,
   serializeLibraryAsJSON,
   strokeRectWithRotation_simple
-} from "./chunk-OWDDSUUQ.js";
+} from "./chunk-O66HSY73.js";
 import {
   define_import_meta_env_default
-} from "./chunk-VL47Q2RH.js";
+} from "./chunk-BSCN3CPW.js";
 import {
   en_default
 } from "./chunk-LIELFD5T.js";
@@ -9796,7 +9796,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-5Y3GORNT.js").then(
+        (blob2) => import("./data/image-ADAEIYVZ.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -24070,6 +24070,176 @@ async function htmlToExcalidrawElements(html, frameX, frameY, frameWidth, frameH
   }
 }
 
+// components/ai-chat/imagePayload.ts
+var MAX_EDGE_PX = 1280;
+var JPEG_QUALITY = 0.78;
+var PASSTHROUGH_BYTES = 200 * 1024;
+function dataUrlWireBytes(dataUrl) {
+  const commaIdx = dataUrl.indexOf(",");
+  return commaIdx >= 0 ? dataUrl.length - commaIdx - 1 : dataUrl.length;
+}
+function isRasterImageDataUrl(dataUrl) {
+  return /^data:image\/(png|jpe?g|gif|webp);base64,/i.test(dataUrl);
+}
+var DECODE_TIMEOUT_MS = 1e4;
+function loadImage(src) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    const timer = setTimeout(() => {
+      img.onload = null;
+      img.onerror = null;
+      reject(new Error("image decode timed out"));
+    }, DECODE_TIMEOUT_MS);
+    img.onload = () => {
+      clearTimeout(timer);
+      resolve(img);
+    };
+    img.onerror = () => {
+      clearTimeout(timer);
+      reject(new Error("image decode failed"));
+    };
+    img.src = src;
+  });
+}
+async function shrinkImageDataUrl(dataUrl) {
+  if (!isRasterImageDataUrl(dataUrl)) {
+    return dataUrl;
+  }
+  if (dataUrlWireBytes(dataUrl) <= PASSTHROUGH_BYTES) {
+    return dataUrl;
+  }
+  try {
+    const img = await loadImage(dataUrl);
+    const { width, height } = img;
+    if (!width || !height) {
+      return dataUrl;
+    }
+    const scale = Math.min(1, MAX_EDGE_PX / Math.max(width, height));
+    const targetW = Math.max(1, Math.round(width * scale));
+    const targetH = Math.max(1, Math.round(height * scale));
+    const canvas = document.createElement("canvas");
+    canvas.width = targetW;
+    canvas.height = targetH;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      return dataUrl;
+    }
+    ctx.fillStyle = "#ffffff";
+    ctx.fillRect(0, 0, targetW, targetH);
+    ctx.drawImage(img, 0, 0, targetW, targetH);
+    const shrunk = canvas.toDataURL("image/jpeg", JPEG_QUALITY);
+    return dataUrlWireBytes(shrunk) < dataUrlWireBytes(dataUrl) ? shrunk : dataUrl;
+  } catch {
+    return dataUrl;
+  }
+}
+var MAX_REQUEST_WIRE_BYTES = 3.5 * 1024 * 1024;
+function isImagePart(part) {
+  return !!part && typeof part === "object" && part.type === "image_url" && typeof part.image_url?.url === "string";
+}
+function collectImageParts(messages) {
+  const out = [];
+  messages.forEach((m, msgIndex) => {
+    if (!Array.isArray(m.content))
+      return;
+    for (const part of m.content) {
+      if (isImagePart(part))
+        out.push({ msgIndex, part });
+    }
+  });
+  return out;
+}
+async function normalizeRequestImages(messages) {
+  const loose = messages;
+  const parts = collectImageParts(loose);
+  if (parts.length === 0)
+    return messages;
+  const shrunk = await Promise.all(
+    parts.map(({ part }) => shrinkImageDataUrl(part.image_url.url))
+  );
+  parts.forEach(({ part }, i) => {
+    part.image_url.url = shrunk[i];
+  });
+  const bodySize = () => JSON.stringify(messages).length;
+  if (bodySize() <= MAX_REQUEST_WIRE_BYTES)
+    return messages;
+  for (const edge of [960, 720, 512]) {
+    const ordered = [...parts].sort(
+      (a, b) => dataUrlWireBytes(b.part.image_url.url) - dataUrlWireBytes(a.part.image_url.url)
+    );
+    for (const { part } of ordered) {
+      part.image_url.url = await reencodeAtEdge(part.image_url.url, edge);
+      if (bodySize() <= MAX_REQUEST_WIRE_BYTES)
+        return messages;
+    }
+  }
+  const lastMsgIndex = loose.length - 1;
+  for (const { msgIndex, part } of parts) {
+    if (msgIndex === lastMsgIndex)
+      continue;
+    const owner = loose[msgIndex];
+    if (!Array.isArray(owner.content))
+      continue;
+    owner.content = owner.content.filter((p) => p !== part);
+    console.warn(
+      "[imagePayload] dropped an image from an earlier turn to fit the request cap"
+    );
+    if (bodySize() <= MAX_REQUEST_WIRE_BYTES)
+      return messages;
+  }
+  return messages;
+}
+async function describeChatError(response) {
+  const raw = await response.text().catch(() => "");
+  try {
+    const parsed = JSON.parse(raw);
+    if (parsed?.error?.message)
+      return parsed.error.message;
+    if (typeof parsed?.error === "string")
+      return parsed.error;
+  } catch {
+  }
+  if (response.status === 413) {
+    return "This request was too large to send. Try attaching fewer images, or start a new chat to clear older ones.";
+  }
+  if (response.status === 429) {
+    return "Rate limited \u2014 please wait a moment and try again.";
+  }
+  if (response.status === 401 || response.status === 403) {
+    return "This request was not authorised. Please refresh and try again.";
+  }
+  if (response.status >= 500) {
+    return `The AI service is temporarily unavailable (${response.status}). Please try again.`;
+  }
+  const detail = raw.trim().slice(0, 200);
+  return detail ? `Request failed (${response.status}): ${detail}` : `Request failed (${response.status}).`;
+}
+async function reencodeAtEdge(dataUrl, edge) {
+  if (!isRasterImageDataUrl(dataUrl))
+    return dataUrl;
+  try {
+    const img = await loadImage(dataUrl);
+    if (!img.width || !img.height)
+      return dataUrl;
+    const scale = Math.min(1, edge / Math.max(img.width, img.height));
+    const w = Math.max(1, Math.round(img.width * scale));
+    const h = Math.max(1, Math.round(img.height * scale));
+    const canvas = document.createElement("canvas");
+    canvas.width = w;
+    canvas.height = h;
+    const ctx = canvas.getContext("2d");
+    if (!ctx)
+      return dataUrl;
+    ctx.fillStyle = "#ffffff";
+    ctx.fillRect(0, 0, w, h);
+    ctx.drawImage(img, 0, 0, w, h);
+    const out = canvas.toDataURL("image/jpeg", 0.7);
+    return dataUrlWireBytes(out) < dataUrlWireBytes(dataUrl) ? out : dataUrl;
+  } catch {
+    return dataUrl;
+  }
+}
+
 // components/ai-chat/reviewerAgent.ts
 var REVIEWER_SYSTEM_PROMPT = `You are the Brand Governance Agent \u2014 a Senior Ad Creative Director, Brand Compliance Officer, and Legal QA Auditor combined. You receive a rendered screenshot of a finished advertisement that was generated as a SINGLE AI image \u2014 the visuals AND all copy (headline, subheadline, CTA, body text, sign-off) are part of the image itself.
 
@@ -24350,10 +24520,10 @@ async function runReviewerAgent(opts) {
   });
   const payload = {
     model: reviewerModel,
-    messages: [
+    messages: await normalizeRequestImages([
       { role: "system", content: REVIEWER_SYSTEM_PROMPT },
       { role: "user", content: userContent }
-    ],
+    ]),
     response_format: { type: "json_object" },
     stream: false,
     temperature: 0.2
@@ -59321,7 +59491,7 @@ function isStreamingResponse(response) {
 }
 
 // components/ai-chat/agentLoop.ts
-function isRasterImageDataUrl(dataUrl) {
+function isRasterImageDataUrl2(dataUrl) {
   return /^data:image\/(png|jpe?g|gif|webp);base64,/i.test(dataUrl);
 }
 function dataUrlByteSize(dataUrl) {
@@ -59329,9 +59499,6 @@ function dataUrlByteSize(dataUrl) {
   const b64 = commaIdx >= 0 ? dataUrl.slice(commaIdx + 1) : dataUrl;
   return Math.floor(b64.length * 3 / 4);
 }
-var MAX_REQUEST_IMAGE_BYTES = 8 * 1024 * 1024;
-var BRAND_CONTEXT_IMAGE_BUDGET = MAX_REQUEST_IMAGE_BYTES / 2;
-var PER_BRAND_IMAGE_BYTE_CAP = 600 * 1024;
 var MAX_TOTAL_IMAGES = 18;
 var SYSTEM_PROMPT = `You are an expert advertising art director embedded inside a canvas editor. You create finished advertisement creatives by generating a single complete image \u2014 visuals AND all copy baked directly into the image \u2014 using an AI image model. You do NOT assemble ads from separate text/shape layers.
 
@@ -59432,14 +59599,12 @@ var MAX_ITERATIONS = 15;
 async function callOpenRouter(messages, chatUrl, signal, webSearchEnabled, chatModel, onContentChunk, tools = CANVAS_TOOLS) {
   const baseModel = chatModel || "minimax/minimax-m3";
   const model = webSearchEnabled ? `${baseModel}:online` : baseModel;
-  const body = {
-    model,
-    stream: true,
-    messages: messages.map((m) => {
+  const wireMessages = await normalizeRequestImages(
+    messages.map((m) => {
       if (m.role === "assistant" && m.tool_calls) {
         return {
           role: m.role,
-          content: m.content,
+          content: structuredClone(m.content),
           tool_calls: m.tool_calls
         };
       }
@@ -59450,8 +59615,13 @@ async function callOpenRouter(messages, chatUrl, signal, webSearchEnabled, chatM
           content: m.content
         };
       }
-      return { role: m.role, content: m.content };
-    }),
+      return { role: m.role, content: structuredClone(m.content) };
+    })
+  );
+  const body = {
+    model,
+    stream: true,
+    messages: wireMessages,
     tools,
     tool_choice: "auto"
   };
@@ -59477,15 +59647,7 @@ async function callOpenRouter(messages, chatUrl, signal, webSearchEnabled, chatM
     body: JSON.stringify(body)
   });
   if (!response.ok) {
-    let message = `OpenRouter error ${response.status}`;
-    try {
-      const err = await response.json();
-      if (err?.error?.message) {
-        message = err.error.message;
-      }
-    } catch {
-    }
-    throw new Error(message);
+    throw new Error(await describeChatError(response));
   }
   if (isStreamingResponse(response)) {
     let fullContent = "";
@@ -59621,13 +59783,13 @@ ${elementContext}`
         toolCtx.onListBrandTemplates ? toolCtx.onListBrandTemplates(keywords) : Promise.resolve([])
       ]);
       const top2Assets = (assetRes.status === "fulfilled" ? assetRes.value : []).filter(
-        (a) => a.previewDataUrl && isRasterImageDataUrl(a.previewDataUrl)
+        (a) => a.previewDataUrl && isRasterImageDataUrl2(a.previewDataUrl)
       ).slice(0, 2);
       const top2Creatives = (creativeRes.status === "fulfilled" ? creativeRes.value : []).filter(
-        (c) => c.previewDataUrl && isRasterImageDataUrl(c.previewDataUrl)
+        (c) => c.previewDataUrl && isRasterImageDataUrl2(c.previewDataUrl)
       ).slice(0, 2);
       const top2Templates = (templateRes.status === "fulfilled" ? templateRes.value : []).filter(
-        (t2) => t2.thumbnailDataUrl && isRasterImageDataUrl(t2.thumbnailDataUrl)
+        (t2) => t2.thumbnailDataUrl && isRasterImageDataUrl2(t2.thumbnailDataUrl)
       ).slice(0, 2);
       console.log(
         `[agent:pre-fetch] brand assets=${top2Assets.length}/${assetRes.status === "fulfilled" ? assetRes.value.length : "err"} ad-creatives=${top2Creatives.length}/${creativeRes.status === "fulfilled" ? creativeRes.value.length : "err"} templates=${top2Templates.length}/${templateRes.status === "fulfilled" ? templateRes.value.length : "err"}`
@@ -59648,24 +59810,13 @@ ${elementContext}`
       ];
       const budgetedPreviews = [];
       for (const p of previews) {
-        const size = dataUrlByteSize(p.dataUrl);
-        if (size > PER_BRAND_IMAGE_BYTE_CAP) {
+        if (brandContextImagesUsed >= MAX_TOTAL_IMAGES) {
           console.warn(
-            `[agent:pre-fetch] dropping "${p.label}" \u2014 ${Math.round(
-              size / 1024
-            )}KB exceeds the per-image cap (${Math.round(
-              PER_BRAND_IMAGE_BYTE_CAP / 1024
-            )}KB)`
+            `[agent:pre-fetch] dropping "${p.label}" \u2014 per-request image count cap reached`
           );
           continue;
         }
-        if (brandContextBytesUsed + size > BRAND_CONTEXT_IMAGE_BUDGET || brandContextImagesUsed >= MAX_TOTAL_IMAGES) {
-          console.warn(
-            `[agent:pre-fetch] dropping "${p.label}" \u2014 brand-context image budget exhausted`
-          );
-          continue;
-        }
-        brandContextBytesUsed += size;
+        brandContextBytesUsed += dataUrlByteSize(p.dataUrl);
         brandContextImagesUsed += 1;
         budgetedPreviews.push(p);
       }
@@ -59707,46 +59858,20 @@ Visual previews follow in the next message. Use them as context: match their sty
       }
     }
   }
-  const frameScreenshotBytes = frameScreenshot ? dataUrlByteSize(frameScreenshot) : 0;
-  const currentSendImagesForBudget = fileAttachments?.filter((a) => a.type === "image" && a.dataUrl) ?? [];
-  const currentSendImageBytes = currentSendImagesForBudget.reduce(
-    (sum2, a) => sum2 + dataUrlByteSize(a.dataUrl),
-    0
-  );
-  const currentSendImageCount = currentSendImagesForBudget.length + (frameScreenshot ? 1 : 0);
-  const remainingBudgetBytes = MAX_REQUEST_IMAGE_BYTES - brandContextBytesUsed;
-  const remainingBudgetImages = MAX_TOTAL_IMAGES - brandContextImagesUsed;
-  if (currentSendImageBytes + frameScreenshotBytes > remainingBudgetBytes || currentSendImageCount > remainingBudgetImages) {
-    const message = "This message is too large to process \u2014 try attaching fewer or smaller images.";
-    console.warn(
-      `[agent:budget] aborting \u2014 current-send content alone (${Math.round(
-        (currentSendImageBytes + frameScreenshotBytes) / 1024
-      )}KB, ${currentSendImageCount} image(s)) exceeds the remaining request budget`
-    );
-    onUpdate({ type: "final", message });
-    return { reply: message, toolActions: [] };
-  }
-  let historicalBudgetBytes = remainingBudgetBytes - currentSendImageBytes - frameScreenshotBytes;
-  let historicalBudgetImages = remainingBudgetImages - currentSendImageCount;
+  const currentSendImageCount = (fileAttachments?.filter((a) => a.type === "image" && a.dataUrl).length ?? 0) + (frameScreenshot ? 1 : 0);
   const droppedHistoricalMessageIndices = /* @__PURE__ */ new Set();
+  let historicalImagesRemaining = MAX_TOTAL_IMAGES - brandContextImagesUsed - currentSendImageCount;
   for (let i = userMessages.length - 1; i >= 0; i--) {
     const imgs = userMessages[i].imageAttachments;
     if (!imgs || imgs.length === 0) {
       continue;
     }
-    const bytes = imgs.reduce(
-      (sum2, img) => sum2 + dataUrlByteSize(img.dataUrl),
-      0
-    );
-    if (bytes <= historicalBudgetBytes && imgs.length <= historicalBudgetImages) {
-      historicalBudgetBytes -= bytes;
-      historicalBudgetImages -= imgs.length;
+    if (imgs.length <= historicalImagesRemaining) {
+      historicalImagesRemaining -= imgs.length;
     } else {
       droppedHistoricalMessageIndices.add(i);
       console.warn(
-        `[agent:budget] dropping ${imgs.length} historical image(s) from an earlier turn (${Math.round(
-          bytes / 1024
-        )}KB) \u2014 request budget exceeded`
+        `[agent:budget] dropping ${imgs.length} historical image(s) from an earlier turn \u2014 per-request image count cap (${MAX_TOTAL_IMAGES}) reached`
       );
     }
   }
@@ -60045,22 +60170,13 @@ Use the frameId="${imageGenData.frameId}" for all elements. Keep all elements wi
         if (searchToolNames.has(name) && result.success && assetSearchResult.previewDataUrls?.length) {
           const budgetedPreviews = [];
           for (const p of assetSearchResult.previewDataUrls) {
-            const size = dataUrlByteSize(p.dataUrl);
-            if (size > PER_BRAND_IMAGE_BYTE_CAP) {
-              console.warn(
-                `[agent:mid-loop] dropping "${p.name}" \u2014 ${Math.round(
-                  size / 1024
-                )}KB exceeds the per-image cap`
-              );
-              continue;
-            }
-            if (brandContextBytesUsed + size > BRAND_CONTEXT_IMAGE_BUDGET || brandContextImagesUsed >= MAX_TOTAL_IMAGES) {
+            if (brandContextImagesUsed >= MAX_TOTAL_IMAGES) {
               console.warn(
-                `[agent:mid-loop] dropping "${p.name}" \u2014 brand-context image budget exhausted`
+                `[agent:mid-loop] dropping "${p.name}" \u2014 per-request image count cap reached`
               );
               continue;
             }
-            brandContextBytesUsed += size;
+            brandContextBytesUsed += dataUrlByteSize(p.dataUrl);
             brandContextImagesUsed += 1;
             budgetedPreviews.push(p);
           }
@@ -62127,7 +62243,10 @@ ${f.textContent}`).join("\n\n")}`;
   if (hasPdfs) {
     plugins.push({ id: "file-parser", pdf: { engine: "cloudflare-ai" } });
   }
-  const body = { model, messages: apiMessages };
+  const body = {
+    model,
+    messages: await normalizeRequestImages(apiMessages)
+  };
   if (plugins.length > 0) {
     body.plugins = plugins;
   }
@@ -62143,15 +62262,7 @@ ${f.textContent}`).join("\n\n")}`;
     body: JSON.stringify(body)
   });
   if (!response.ok) {
-    let message = `OpenRouter error ${response.status}`;
-    try {
-      const err = await response.json();
-      if (err?.error?.message) {
-        message = err.error.message;
-      }
-    } catch {
-    }
-    throw new Error(message);
+    throw new Error(await describeChatError(response));
   }
   if (opts?.onChunk && isStreamingResponse(response)) {
     let fullContent = "";