> ## 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.
# Model Catalog
> Browse ZeroGPU models, compare pricing, and pick the model ID to call.
The **Model Catalog** lets you browse every available ZeroGPU model and compare **pricing** across the tasks you care about. It's useful when you're selecting which `model` identifier to send to `POST /v1/responses`.
Sections on this page: [At a glance](#at-a-glance) (pricing table), [Detailed model cards](#detailed-model-cards), and [Model library by task](#model-library-by-task).
{/*
Reads the model data cached on window by /zgpu-models-init.js (already sorted
by display priority there). Three cases: data already present -> use it;
fetch still in flight -> await the promise; store not created yet (component
mounted before the script ran) -> wait for the "zgpu:models-loaded" event.
*/}
export const useModels = () => {
const [models, setModels] = useState(() => {
const store = (typeof window !== "undefined" && window.__zgpuModels) || {};
return store.data || [];
});
useEffect(() => {
let active = true;
const apply = (d) => {
if (active && d && d.length) setModels(d);
};
const store = window.__zgpuModels;
if (store && store.data) {
apply(store.data);
} else if (store && store.promise) {
store.promise.then(apply);
} else {
const onLoaded = () => apply((window.__zgpuModels || {}).data);
window.addEventListener("zgpu:models-loaded", onLoaded);
return () => {
active = false;
window.removeEventListener("zgpu:models-loaded", onLoaded);
};
}
return () => {
active = false;
};
}, []);
return models;
};
export const modelSlug = (id) => id.toLowerCase().replace(/\./g, "-");
export const taskSlug = (t) => t.toLowerCase().replace(/\s+/g, "-");
export const fmtNum = (n) => (typeof n === "number" ? n.toLocaleString("en-US") : n);
export const fmtPrice = (n) => (typeof n === "number" ? "$" + n.toFixed(2) : "-");
export const cleanText = (s) => (s || "").replace(/\s+/g, " ").trim();
export const cleanUrl = (u) => (u || "").replace(/\s+/g, "");
export const pricingOf = (m) => (m && m.pricing) || {};
export const ModelLogo = ({ src, alt, size }) => {
const url = cleanUrl(src);
if (!url) return null;
const px = (size || 40) + "px";
return (
);
};
export const Badge = ({ children }) => (
{children}
);
export const PricingTable = () => {
const models = useModels();
const cols = {
display: "grid",
gridTemplateColumns:
"minmax(0,3.4fr) minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.2fr) minmax(0,1.2fr)",
gap: "1.75rem",
alignItems: "center",
minWidth: "920px",
};
return (
);
};
export const ModelCards = () => {
const models = useModels();
return (
);
};
export const useByTask = () => {
const [groups, setGroups] = useState(() => {
const store = (typeof window !== "undefined" && window.__zgpuModels) || {};
return store.byTask || [];
});
useEffect(() => {
let active = true;
const apply = () => {
const store = window.__zgpuModels || {};
if (active && store.byTask) setGroups(store.byTask);
};
const store = window.__zgpuModels;
if (store && store.byTask) {
apply();
} else if (store && store.promise) {
store.promise.then(apply);
} else {
window.addEventListener("zgpu:models-loaded", apply);
return () => {
active = false;
window.removeEventListener("zgpu:models-loaded", apply);
};
}
return () => {
active = false;
};
}, []);
return groups;
};
export const ModelLibrary = () => {
const groups = useByTask();
return (
);
};
## At a glance
## Detailed model cards
## Model library by task