> ## Documentation Index
> Fetch the complete documentation index at: https://zerogpu-docs-langchain-video-walkthroughs.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Ad Tech

> Edge IAB classifiers that map content to taxonomy, audience, and intent signals for programmatic advertising.

export const slug = (id) => (id || "").toLowerCase().replace(/\./g, "-");
export const href = (u) => (u || "").replace(/\s+/g, "");
export const fmtNum = (n) =>
  typeof n === "number" ? n.toLocaleString("en-US") : n != null ? n : "-";
export const fmtPrice = (n) => (typeof n === "number" ? "$" + n.toFixed(2) : "-");

export const curl = (path, body) =>
  "curl https://api.zerogpu.ai/v1/" +
  path +
  ' \\\n  -H "content-type: application/json" \\\n  -H "x-api-key: YOUR_API_KEY" \\\n  -H "x-project-id: YOUR_PROJECT_ID" \\\n  -d \'' +
  JSON.stringify(body, null, 2) +
  "'";

export const useStore = () => {
  const read = () => {
    const store = (typeof window !== "undefined" && window.__zgpuModels) || {};
    return store.data || [];
  };
  const [list, setList] = useState(read);
  useEffect(() => {
    let active = true;
    const refresh = () => {
      if (active) setList(read());
    };
    const store = window.__zgpuModels;
    if (store && store.data) {
      refresh();
    } else if (store && store.promise) {
      store.promise.then(refresh);
    } else {
      window.addEventListener("zgpu:models-loaded", refresh);
      return () => {
        active = false;
        window.removeEventListener("zgpu:models-loaded", refresh);
      };
    }
    return () => {
      active = false;
    };
  }, []);
  return list;
};

export const InlineMD = ({ text }) => {
  const parts = (text || "").split("`");
  return parts.map((s, i) =>
    i % 2 ? <code key={i}>{s}</code> : <span key={i}>{s}</span>
  );
};

export const codePre =
  "overflow-x-auto bg-zinc-950 p-4 text-[13px] leading-relaxed text-zinc-100";
export const codeBox =
  "not-prose my-4 overflow-hidden rounded-xl border border-zinc-200 dark:border-white/10";
export const codeHead =
  "border-b border-zinc-200 bg-zinc-50 text-xs font-medium dark:border-white/10 dark:bg-white/[0.03]";

export const RequestTabs = ({ responsesBody, chatBody }) => {
  const [tab, setTab] = useState("responses");
  const tabs = [
    ["responses", "Responses API", responsesBody, "responses"],
    ["chat", "Chat Completions", chatBody, "chat/completions"],
  ].filter((t) => t[2]);
  const active = tabs.find((t) => t[0] === tab) || tabs[0];
  if (!active) return null;
  return (
    <div className={codeBox}>
      <div className={"flex " + codeHead}>
        {tabs.map(([key, label]) => (
          <button
            key={key}
            type="button"
            onClick={() => setTab(key)}
            className={
              "px-4 py-2 " +
              (active[0] === key
                ? "-mb-px border-b-2 border-zinc-900 text-zinc-900 dark:border-white dark:text-white"
                : "text-zinc-500 dark:text-zinc-400")
            }
          >
            {label}
          </button>
        ))}
      </div>
      <pre className={codePre}>
        <code>{curl(active[3], active[2])}</code>
      </pre>
    </div>
  );
};

export const ResponseBlock = ({ output }) => (
  <div className={codeBox}>
    <div className={codeHead + " px-4 py-2 text-zinc-500 dark:text-zinc-400"}>
      Response
    </div>
    <pre className={codePre}>
      <code>{output}</code>
    </pre>
  </div>
);

export const ModelSection = ({ model }) => {
  const p = model.pricing || {};
  const refs = [
    [p.model_doc_url, "Model docs"],
    [p.terms_url, "Terms"],
    [p.privacy_service, "Privacy"],
  ].filter((r) => r[0]);
  const examples = model.examples || [];
  return (
    <>
      <h2 id={slug(model.modelId)}>{model.modelId}</h2>
      {p.description ? <blockquote>{p.description}</blockquote> : null}
      {refs.length ? (
        <p>
          <strong>References:</strong>{" "}
          {refs.map((r, i) => (
            <span key={r[1]}>
              {i ? " • " : ""}
              <a href={href(r[0])}>{r[1]}</a>
            </span>
          ))}
        </p>
      ) : null}
      {examples.map((ex, i) => (
        <div key={i}>
          {ex.title ? <h3 id={slug(model.modelId) + "-" + slug(ex.title)}>{ex.title}</h3> : null}
          {ex.requestNote ? (
            <p>
              <InlineMD text={ex.requestNote} />
            </p>
          ) : null}
          <RequestTabs
            responsesBody={ex.responsesBody || p.sample_responses_body}
            chatBody={ex.chatBody || p.sample_chat_completions_body}
          />
          {ex.responseNote ? (
            <p>
              <InlineMD text={ex.responseNote} />
            </p>
          ) : null}
          <ResponseBlock output={ex.output} />
        </div>
      ))}
    </>
  );
};

export const PricingTable = ({ ids, byId }) => {
  const cols = {
    display: "grid",
    gridTemplateColumns:
      "minmax(0,2.6fr) minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr)",
    gap: "1.5rem",
    alignItems: "center",
    minWidth: "640px",
  };
  return (
    <div className="not-prose w-full overflow-x-auto text-base">
      <div
        style={cols}
        className="border-b border-zinc-950/10 pb-3 text-xs font-medium uppercase tracking-wide text-zinc-500 dark:border-white/10 dark:text-zinc-400"
      >
        <div>Model</div>
        <div>Params</div>
        <div className="text-right">Max tokens</div>
        <div className="text-right">Input /1M</div>
        <div className="text-right">Output /1M</div>
      </div>
      {ids.map((id) => {
        const m = byId[id] || {};
        const p = m.pricing || {};
        return (
          <a
            key={id}
            href={"/api-reference/models/" + slug(id)}
            style={cols}
            className="border-b border-zinc-950/5 py-4 no-underline dark:border-white/5"
          >
            <div className="font-medium text-zinc-950 dark:text-white">
              <code className="break-words text-sm">{id}</code>
            </div>
            <div className="text-zinc-600 dark:text-zinc-300">{m.parameters || "-"}</div>
            <div className="text-right tabular-nums text-zinc-600 dark:text-zinc-300">{fmtNum(m.maxTokens)}</div>
            <div className="text-right tabular-nums text-zinc-600 dark:text-zinc-300">{fmtPrice(p.input_per_1m_tokens)}</div>
            <div className="text-right tabular-nums text-zinc-600 dark:text-zinc-300">{fmtPrice(p.output_per_1m_tokens)}</div>
          </a>
        );
      })}
    </div>
  );
};

export const ModelDocs = ({ models }) => {
  const ids = (models || "")
    .split(",")
    .map((s) => s.trim())
    .filter(Boolean);
  const list = useStore();
  const byId = {};
  list.forEach((m) => {
    byId[m.modelId] = m;
  });
  const ordered = ids.map((id) => byId[id]).filter(Boolean);
  return (
    <>
      <PricingTable ids={ids} byId={byId} />
      {ordered.map((m) => (
        <ModelSection key={m.modelId} model={m} />
      ))}
    </>
  );
};

Ad tech models map content to the IAB Content Taxonomy and the audience signals that programmatic advertising runs on. ZeroGPU offers a base IAB classifier tuned for real-time categorization at the edge plus an enriched variant that adds topics, keywords, and inferred intent. Each request is shown for both the [Responses API](/api-reference/responses) and the OpenAI-compatible [Chat Completions API](/api-reference/chat-completions).

<ModelDocs models="zlm-v1-iab-classify-edge,zlm-v1-iab-classify-edge-enriched" />