";
}).join("");
el.list.hidden = false;
el.input.setAttribute("aria-expanded", "true");
el.input.setAttribute("aria-activedescendant", state.active >= 0 ? "opt-" + state.active : "");
}
function closeSuggestions() {
el.list.hidden = true;
el.input.setAttribute("aria-expanded", "false");
el.input.removeAttribute("aria-activedescendant");
state.active = -1;
}
function choose(o) {
closeSuggestions();
if (!o) return;
if (o.kind === "size") { el.input.value = sizeText(o.size) + " model"; selectSize(o.size); return; }
const id = o.kind === "hub" ? o.id : o.m.id;
el.input.value = id;
selectModel(id, true);
}
el.input.addEventListener("input", function () {
state.options = suggest(el.input.value);
state.active = state.options.length ? 0 : -1;
renderSuggestions();
});
el.input.addEventListener("focus", function () {
state.options = suggest(el.input.value === (state.sel && state.sel.id) ? "" : el.input.value);
state.active = -1;
renderSuggestions();
});
el.input.addEventListener("keydown", function (e) {
if (e.key === "ArrowDown" || e.key === "ArrowUp") {
if (el.list.hidden) { state.options = suggest(el.input.value); }
const n = state.options.length;
if (!n) return;
e.preventDefault();
state.active = e.key === "ArrowDown" ? (state.active + 1) % n : (state.active - 1 + n) % n;
renderSuggestions();
} else if (e.key === "Enter") {
e.preventDefault();
if (!el.list.hidden && state.active >= 0) { choose(state.options[state.active]); return; }
const opts = suggest(el.input.value);
choose(opts[0]);
} else if (e.key === "Escape") {
closeSuggestions();
}
});
el.list.addEventListener("mousedown", function (e) {
const li = e.target.closest("li[data-i]");
if (!li) return;
e.preventDefault();
choose(state.options[Number(li.getAttribute("data-i"))]);
});
el.input.addEventListener("blur", function () { setTimeout(closeSuggestions, 120); });
el.picks.innerHTML = PICKS.filter(function (id) { return BY_ID.has(id.toLowerCase()); }).map(function (id) {
return '";
}).join("");
el.picks.addEventListener("click", function (e) {
const b = e.target.closest("button[data-id]");
if (!b) return;
el.input.value = b.getAttribute("data-id");
selectModel(b.getAttribute("data-id"), true);
});
[el.task, el.prec, el.region, el.spot].forEach(function (c) {
c.addEventListener("change", function () { saveHash(); run(); });
});
el.form.addEventListener("submit", function (e) { e.preventDefault(); });
// ---------------------------------------------------------------- selection
async function selectModel(id, resetTask) {
const seq = ++state.seq;
const known = BY_ID.get(id.toLowerCase());
setStatus("Reading " + id + " from Hugging Face…");
let sel;
try {
sel = await readModel(id);
} catch (err) {
if (seq !== state.seq) return;
if (known) {
sel = { id: known.id, paramsB: known.p, paramsSource: "catalog", bits: known.q, format: known.q ? known.q + "-bit" : null, pipeline: null, gated: false };
} else {
showError(err && err.status === 404
? "Hugging Face has no public model called " + esc(id) + ". Check the spelling, or type a size such as 70B."
: "Could not read " + esc(id) + " from Hugging Face just now. Try again, or type a size such as 70B.");
return;
}
}
if (seq !== state.seq) return;
state.sel = sel;
if (resetTask) {
const t = (sel.pipeline && PIPELINE_TASK[sel.pipeline]) || (known && known.task) || "inference";
el.task.value = t;
el.prec.value = "auto";
}
saveHash();
run();
}
function selectSize(size) {
state.sel = { size: size };
el.prec.value = el.prec.value || "auto";
saveHash();
run();
}
function autoPrecision() {
const s = state.sel;
if (!s || !s.bits) return undefined;
return s.bits === 4 ? "int4" : "int8";
}
// ---------------------------------------------------------------- match
async function run() {
const s = state.sel;
if (!s) return;
const seq = ++state.seq;
const params = new URLSearchParams();
if (s.id) params.set("model", s.id);
const paramsB = s.id ? s.paramsB : s.size;
if (paramsB) params.set("params_b", String(Math.round(paramsB * 100) / 100));
params.set("task", el.task.value);
const prec = el.prec.value === "auto" ? autoPrecision() : el.prec.value;
if (prec) params.set("precision", prec);
if (el.region.value) params.set("region", el.region.value);
if (el.spot.checked) params.set("spot", "true");
if (s.id && !paramsB) {
showError("The repo " + esc(s.id) + " does not publish a parameter count. Type its size instead, for example 70B.");
return;
}
setStatus("Pricing the GPUs that fit…");
let res = null;
try {
const both = await Promise.all([
fetch(API + "?" + params.toString(), { signal: timeout(15000) }).then(function (r) {
return r.json().catch(function () { return null; }).then(function (body) { return { ok: r.ok, body: body }; });
}),
loadGpuMemory(),
]);
res = both[0];
} catch (err) {
res = null;
}
if (seq !== state.seq) return;
if (res && res.body && (res.ok || res.body.error)) {
state.result = res.body;
render();
return;
}
showError("FastGPU's price feed did not answer in time. ");
const b = $("retry");
if (b) b.addEventListener("click", run);
}
async function loadGpuMemory() {
if (state.gpuMemory) return;
try {
const d = await getJson(GPUS_API, 10000);
const map = {};
(d.gpus || []).forEach(function (g) { if (g.gpu && g.vram_gb) map[g.gpu] = g.vram_gb; });
state.gpuMemory = map;
} catch (e) {
state.gpuMemory = {};
}
}
// ---------------------------------------------------------------- render
function setStatus(text) {
el.status.textContent = text;
el.out.setAttribute("aria-busy", "true");
el.out.classList.add("loading");
}
function showError(html) {
el.out.classList.remove("loading");
el.out.removeAttribute("aria-busy");
el.status.textContent = "";
el.out.innerHTML = '
' + html + "
";
}
function needSentence(task, precText) {
switch (task) {
case "finetune-lora": return "of GPU memory to fine-tune it with LoRA at " + precText;
case "finetune-full": return "of GPU memory for a full fine-tune";
case "generate": return "of GPU memory to generate with it at " + precText;
case "transcribe": return "of GPU memory to transcribe with it at " + precText;
case "embed": return "of GPU memory to embed with it at " + precText;
default: return "of GPU memory to run it at " + precText;
}
}
function derivation(task, rawParamsB, precision, need) {
const bytes = BYTES[precision];
const paramsB = shownParams(rawParamsB);
const weights = paramsB * bytes;
const w = "Weights: " + sizeText(paramsB) + " parameters × " + bytes + (bytes === 1 ? " byte" : " bytes") + " = " + gb(weights) + " GB.";
const rest = need - weights;
if (task === "finetune-full") {
return "Full fine-tuning holds the weights, their gradients and Adam optimizer states, about 16 bytes per parameter (" + sizeText(paramsB) + " × 16 = " + gb(paramsB * 16) + " GB), plus activations.";
}
if (rest < 0.5) return w;
if (task === "inference") return w + " The other ~" + gb(rest) + " GB is the KV cache for one request at a 4K-token context, plus runtime headroom.";
if (task === "finetune-lora") return w + " The other ~" + gb(rest) + " GB is the LoRA adapters, their optimizer state and activations for a 4K-token batch.";
if (task === "generate") return w + " The other ~" + gb(rest) + " GB covers the text encoders, VAE and working memory an image or video pipeline loads with it.";
return w + " The other ~" + gb(rest) + " GB is activations and runtime headroom.";
}
function render() {
const res = state.result;
const s = state.sel;
el.out.classList.remove("loading");
el.out.removeAttribute("aria-busy");
el.status.textContent = "";
if (!res || res.error) { showError(esc((res && res.error) || "No answer from FastGPU.")); return; }
const w = res.workload || {};
// FastGPU decides the job's kind for a model it knows (an image model is sized as a pipeline), so the
// sentences follow its answer rather than the menu.
const task = TASKS[w.task] ? w.task : el.task.value;
const precision = w.precision || "fp16";
const precText = PRECISION_TEXT[precision] || precision;
const paramsB = s.id ? s.paramsB : s.size;
const need = w.vram_required_gb;
let head = "";
if (s.id) {
const facts = [sizeText(paramsB) + " parameters"];
if (s.format) facts.push(esc(s.format) + " weights");
if (s.pipeline) facts.push(esc(s.pipeline));
const src = { safetensors: "the repo's safetensors metadata", gguf: "the repo's GGUF header", name: "the model's name (the Hub's count of its packed weights is lower)", catalog: "this Space's model list (Hugging Face did not answer just now)" }[s.paramsSource] || "the repo";
head = '
Parameter count from ' + src + "." + (s.library === "mlx" ? " MLX builds run on Apple silicon; sized here as the same model on a rented GPU." : "") + "
'
: "";
let rows = (res.matches || []).slice();
if (state.sort === "price") rows.sort(function (a, b) { return a.effective_usd_hr - b.effective_usd_hr; });
const cheapest = rows.reduce(function (min, r) { return Math.min(min, r.effective_usd_hr); }, Infinity);
const mem = state.gpuMemory || {};
let table;
if (!rows.length) {
table = '
No GPU setup in FastGPU\'s live feed holds this ' + (need ? "(~" + esc(Math.round(need)) + " GB) " : "") + "right now with these filters. Try 8-bit or 4-bit weights, another region, or include spot capacity.
' +
(fresh ? "Prices from FastGPU's live feed, refreshed " + esc(fresh) + ". " : "") +
"Each price is the whole setup per hour (per-GPU rate × GPUs), per month at 730 hours; it links to every live offer for that GPU. " +
"Best match orders by FastGPU's score, led by price and weighing reliability and availability; providers marked ★ pay FastGPU a referral fee and can only win a near-tie there, within a few percent of the cheapest. " +
"Some providers bill CPU, RAM or disk on top of the GPU rate; the GPU page says which.