import httpx
from bria_client import BriaSyncClient

client = BriaSyncClient()  # reads BRIA_API_TOKEN

job = client.submit(
    endpoint="ads/delayer",
    payload={"attachments": ["https://example.com/ads/spring-sale.jpg"]},
)
status = client.poll(job, interval=5, timeout=600)

doc = httpx.get(status.result.url, timeout=30).json()

layers = sorted((l for l in doc["layers"] if l.get("hidden") is not True), key=lambda l: l["z_order"])
for layer in layers:
    print(layer["z_order"], layer["id"], layer["type"], layer["subtype"], layer["bbox"])

import { BriaClient } from "@bria-ai/client";

const client = new BriaClient(); // reads BRIA_API_TOKEN

// 1 + 2. Submit and wait
const job = await client.submit("ads/delayer", { attachments: ["https://example.com/ads/spring-sale.jpg"] });
const status = await client.poll(job, { interval: 5, timeout: 600 });

// 3. Fetch the layer document
type Layer = { id: string; type: string; subtype: string; z_order: number; bbox: number[]; hidden?: boolean };
const doc: { layers: Layer[] } = await (await fetch(String(status.result?.url))).json();

// 4. Work with the visible layers in paint order
const layers = doc.layers.filter((l) => l.hidden !== true).sort((a, b) => a.z_order - b.z_order);
for (const layer of layers) console.log(layer.z_order, layer.id, layer.type, layer.subtype, layer.bbox);

curl -s -X POST https://engine.prod.bria-api.com/v2/ads/delayer \
  -H "api_token: $BRIA_API_TOKEN" -H "Content-Type: application/json" \
  -d '{"attachments": ["https://example.com/ads/spring-sale.jpg"]}'

curl -s "https://engine.prod.bria-api.com/v2/status/<request_id>" -H "api_token: $BRIA_API_TOKEN"

curl -s "<result.url>" | jq '.layers | map(select(.hidden != true)) | sort_by(.z_order) | .[] | {z_order, id, type, subtype}'

{
  "request_id": "860f1a2b73f847e59f284d6f860f2ddb",
  "status": "COMPLETED",
  "result": {
    "status": "completed",
    "text": "Constructed a layered ad.",
    "url": "https://temp.bria.ai/results/860f1a2b73f847e59f284d6f860f2ddb/creation.json"
  }
}

{
  "canvas": { "width": 1000, "height": 1500 },
  "font_stylesheets": ["https://fonts.googleapis.com/css2?family=Inter…"],
  "layers": [ ... ]
}

{
  "text": "string — live, editable content. Explicit line breaks are \\n and are preserved when you re-render",
  "text_style": {
    "color": "string — #RRGGBB",
    "font_family": "string — a CSS font stack, nearest match first, fallbacks inline",
    "font_weight": "integer, 100-900",
    "font_size_px": "number",
    "letter_spacing_px": "number — pixels; omitted when zero",
    "line_height": "number — unitless multiplier over the font size",
    "text_align": "string, optional — \"left\" | \"center\" | \"right\"",
    "align_x": "string — CSS flexbox value: \"flex-start\" | \"center\" | \"flex-end\"",
    "align_y": "string — same values as align_x",
    "no_wrap": "boolean — true forbids wrapping inside the box",
    "uppercase": "boolean",
    "underline": "boolean",
    "italic": "boolean"
  }
}

[
  {
    "id": "text_5_svg",
    "type": "image",
    "subtype": "primary_copy",
    "bbox": { "x": 150.0, "y": 409.05, "width": 764.0, "height": 139.95 },
    "z_order": 8,
    "asset_path": "https://temp.bria.ai/results/860f1a2b73f847e59f284d6f860f2ddb/text_5.svg",
    "image_fit": { "object_fit": "contain" }
  },
  {
    "id": "text_5_font",
    "type": "text",
    "subtype": "primary_copy",
    "bbox": { "x": 150.0, "y": 409.05, "width": 764.0, "height": 139.95 },
    "z_order": 9,
    "hidden": true,
    "text": "40% OFF*",
    "text_style": {
      "color": "#FFFFFF",
      "font_family": "'Montserrat', 'Inter', 'Helvetica Neue', Arial, sans-serif",
      "font_weight": 900,
      "font_size_px": 149.58,
      "letter_spacing_px": -1.93,
      "line_height": 1.0,
      "align_x": "flex-start",
      "align_y": "center",
      "no_wrap": true,
      "uppercase": false,
      "underline": false,
      "italic": false
    }
  }
]

function renderAd(doc, stage) {
  for (const href of doc.font_stylesheets ?? []) {
    const link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = href;
    document.head.appendChild(link);
  }
  Object.assign(stage.style, { position: "relative", width: `${doc.canvas.width}px`, height: `${doc.canvas.height}px` });

  const layers = doc.layers.filter((l) => l.hidden !== true).sort((a, b) => a.z_order - b.z_order);
  for (const layer of layers) {
    let el;
    if (layer.type === "image") {
      el = document.createElement("img");
      el.src = layer.asset_path;
      el.style.objectFit = layer.image_fit?.object_fit ?? "contain";
      el.style.objectPosition = `${layer.image_fit?.object_position_x ?? "center"} ${layer.image_fit?.object_position_y ?? "center"}`;
    } else if (layer.type === "vector") {
      el = document.createElement("div");
      const s = layer.style ?? {};
      if (s.background_color) el.style.background = s.background_color;
      if (s.border_radius_px) el.style.borderRadius = `${s.border_radius_px}px`;
      // background_gradient and box_shadow map onto CSS linear-gradient() and box-shadow
    } else {
      el = document.createElement("div");
      const t = layer.text_style;
      el.textContent = layer.text;
      Object.assign(el.style, {
        display: "flex", justifyContent: t.align_x, alignItems: t.align_y,
        color: t.color, fontFamily: t.font_family, fontWeight: t.font_weight,
        fontSize: `${t.font_size_px}px`, lineHeight: t.line_height,
        letterSpacing: `${t.letter_spacing_px ?? 0}px`, textAlign: t.text_align ?? "left",
        whiteSpace: t.no_wrap ? "nowrap" : "pre-wrap",
        textTransform: t.uppercase ? "uppercase" : "none",
        textDecoration: t.underline ? "underline" : "none",
        fontStyle: t.italic ? "italic" : "normal",
      });
    }
    Object.assign(el.style, {
      position: "absolute",
      left: `${layer.bbox.x}px`, top: `${layer.bbox.y}px`,
      width: `${layer.bbox.width}px`, height: `${layer.bbox.height}px`,
    });
    stage.appendChild(el);
  }
}