config.rope_theta. Higher = more long-range capacity. Typical: 10000 early models, 500000 Llama-3, 1000000 Qwen2.5.",
T_train: "Max context the model was trained on. From max_position_embeddings. The model has never seen positions beyond this; extrapolating much further usually fails.",
T_eval: "Your target inference context length. The key knob. The whole question is: will the model behave well at this length?",
n_attention_heads: "Number of query heads. From num_attention_heads.",
n_kv_heads: "Number of K/V heads. If < n_attention_heads → model uses GQA (Grouped Query Attention). Smaller = more memory-efficient KV cache but pushes γ toward Hagedorn boundary.",
d_head: "Per-head dimension. Typically hidden_size / n_attention_heads. Common: 64, 80, 128.",
n_layers: "Number of transformer layers. From num_hidden_layers.",
n_params: "Total parameter count. Use scientific notation: 8e9 for 8B. Threshold ~400M is the induction-head emergence boundary (sign-flip in Δγ).",
has_SWA: "Sliding Window Attention. true for Mistral, gemma-2, phi-3. SWA lowers γ_decomposition by ~0.21.",
N_params: "Same as n_params. Total parameter count, scientific notation (e.g. 8e9).",
D_tokens: "Number of training tokens. Leave empty to use Chinchilla 20:1 default (D = 20·N).",
gpu: "GPU model from the catalog. Options: H100 SXM, H100 PCIe, H200, B200, A100 80GB, A100 40GB, L40S, MI300X, RTX 4090, RTX 5090, RTX 5060Ti.",
n_gpus: "Number of GPUs in your training/serving cluster.",
mfu: "Model FLOPs Utilization. Realistic fraction of peak FLOPs achieved. Typical: 0.4-0.5 for well-tuned. Default 0.45.",
api_model: "Frontier API to compare against. Options: GPT-4o, GPT-4o-mini, Claude-Opus-4, Claude-Sonnet-4, Claude-Haiku-4, Gemini-1.5-Pro, DeepSeek-V3, Llama-3.3-70B (Together).",
monthly_tokens_M: "Expected monthly token volume in millions. e.g. 10 = 10 million tokens/month.",
USD_budget: "Your training budget in US dollars (no symbol). e.g. 5000 for $5K.",
bytes_per_weight: "Memory per parameter. BF16/FP16 = 2, INT8 = 1, INT4 = 0.5.",
target_tokens_per_day: "How many tokens/day you need to serve. e.g. 10000000 = 10M tokens/day.",
concurrent_users: "Simultaneous concurrent requests. Affects KV cache memory needed.",
};
function getRecipeDefaults(recipeId) {
const D = {
"X-1": { N_params: "8e9", D_tokens: "", gpu: "H100 SXM", n_gpus: 8, mfu: 0.45,
api_model: "GPT-4o", monthly_tokens_M: 10.0 },
"X-2": { theta: 500000, T_train: 8192, T_eval: 32000,
n_attention_heads: 32, n_kv_heads: 8, d_head: 128,
n_layers: 32, n_params: "8e9", has_SWA: false },
"X-3": { USD_budget: 5000, gpu: "H100 SXM", mfu: 0.45, n_gpus: 1 },
"X-5": { N_params: "8e9", T_eval: 4096, n_layers: 32, n_kv_heads: 8, d_head: 128,
bytes_per_weight: 2.0, target_tokens_per_day: 10000000, concurrent_users: 1 },
"X-19": { theta: 500000, T_train: 8192, T_eval: 8192,
n_attention_heads: 32, n_kv_heads: 8, d_head: 128,
n_layers: 32, n_params: "8e9", has_SWA: false },
};
return D[recipeId] || {};
}
// ════════════════════════════════════════════════════════════════════
// Preset autofill (works in recipe mode)
// ════════════════════════════════════════════════════════════════════
$("preset").addEventListener("change", (e) => {
if (!e.target.value) return;
state.lastModelId = e.target.value; // remember for filename/hash
const proxy = state.pyodide.runPython(`get_preset(${JSON.stringify(e.target.value)})`);
const preset = proxy.toJs ? proxy.toJs({ dict_converter: Object.fromEntries }) : proxy;
if (!preset || Object.keys(preset).length === 0) return;
fillRecipeForm(preset);
});
function fillRecipeForm(p) {
// Fill any matching field in dynamic form
Object.entries(p).forEach(([k, v]) => {
const map = {
theta: "theta", T_train: "T_train",
n_attention_heads: "n_attention_heads", n_kv_heads: "n_kv_heads",
d_head: "d_head", n_layers: "n_layers", n_params: "n_params",
has_SWA: "has_SWA",
};
const formId = "param_" + (map[k] || k);
const el = $(formId);
if (el) el.value = (typeof v === "number" && (k === "n_params" || v > 1e6))
? v.toExponential(2) : String(v);
// Also fill N_params for cost recipes
if (k === "n_params") {
const np = $("param_N_params");
if (np) np.value = (typeof v === "number" ? v.toExponential(2) : String(v));
}
});
}
// ════════════════════════════════════════════════════════════════════
// HF Hub fetch (any model)
// ════════════════════════════════════════════════════════════════════
async function fetchHfConfig(modelId) {
const url = `https://huggingface.co/${modelId}/raw/main/config.json`;
const resp = await fetch(url);
if (!resp.ok) {
if (resp.status === 401 || resp.status === 403) {
throw new Error(`Model is gated (${resp.status}). Accept license on HF Hub first, or fill manually.`);
}
throw new Error(`HTTP ${resp.status} — config.json not found at ${url}`);
}
return await resp.json();
}
$("hf-fetch-btn").addEventListener("click", async () => {
const modelId = $("hf-id").value.trim();
if (!modelId) {
$("hf-status").textContent = "⚠ Enter a model id like 'Qwen/Qwen2.5-32B-Instruct'";
return;
}
$("hf-status").textContent = `⏳ Fetching config.json from HF Hub for ${modelId}...`;
$("hf-fetch-btn").disabled = true;
state.lastModelId = modelId; // remember for filename/hash
try {
const cfg = await fetchHfConfig(modelId);
const preset = configToPreset(cfg, modelId);
fillRecipeForm(preset);
$("hf-status").innerHTML = `✅ Config loaded for ${modelId} (family: ${preset._family}). Verify values, click Analyze.`;
} catch (err) {
$("hf-status").textContent = `❌ ${err.message}`;
} finally {
$("hf-fetch-btn").disabled = false;
}
});
function configToPreset(cfg, modelId) {
const n_attn = cfg.num_attention_heads || cfg.n_head || 0;
const n_kv = cfg.num_key_value_heads || cfg.num_attention_heads || cfg.n_head || 0;
const hidden = cfg.hidden_size || cfg.d_model || cfg.n_embd || 0;
const d_head = cfg.head_dim || (n_attn > 0 ? Math.floor(hidden / n_attn) : 0);
const theta = cfg.rope_theta || cfg.rotary_emb_base ||
(cfg.alibi ? null : (cfg.position_embedding_type === "absolute" ? null : 10000));
const T_train = cfg.max_position_embeddings || cfg.max_sequence_length ||
cfg.n_positions || cfg.n_ctx || 0;
const n_layers = cfg.num_hidden_layers || cfg.n_layer || 0;
const has_SWA = !!(cfg.sliding_window || cfg.use_sliding_window);
let family = "rope-mha";
if (cfg.alibi) family = "alibi";
else if (cfg.model_type === "mamba" || cfg.model_type === "mamba2") family = "ssm";
else if (theta == null) family = "abspe";
else if (n_kv < n_attn) family = "rope-gqa";
const n_params_est = estimateParams(cfg);
return {
theta: theta || 10000, T_train: T_train || 2048,
n_attention_heads: n_attn, n_kv_heads: n_kv, d_head: d_head,
n_layers: n_layers, n_params: n_params_est, has_SWA: has_SWA,
_family: family, _model_id: modelId,
};
}
function estimateParams(cfg) {
const h = cfg.hidden_size || cfg.d_model || 0;
const L = cfg.num_hidden_layers || cfg.n_layer || 0;
const V = cfg.vocab_size || 32000;
return Math.round(12 * h * h * L + 2 * V * h);
}
// ════════════════════════════════════════════════════════════════════
// Run recipe (manual mode)
// ════════════════════════════════════════════════════════════════════
$("run-btn").addEventListener("click", async () => {
if (!state.currentRecipe) {
alert("Select a recipe first.");
return;
}
const rid = state.currentRecipe.id;
const params = collectParams(state.currentRecipe.params);
await runAndDisplay(rid, params);
});
function collectParams(paramNames) {
const p = {};
paramNames.forEach(name => {
const el = $("param_" + name);
if (!el || el.value === "") return;
let v = el.value;
if (v === "true" || v === "false") {
p[name] = (v === "true");
} else if (!isNaN(parseFloat(v)) && isFinite(v)) {
p[name] = parseFloat(v);
} else {
p[name] = v;
}
});
return p;
}
// ════════════════════════════════════════════════════════════════════
// Ask mode (free-form question via router)
// ════════════════════════════════════════════════════════════════════
$("ask-btn").addEventListener("click", async () => {
const q = $("question").value.trim();
if (!q) {
alert("Please type a question.");
return;
}
$("ask-btn").disabled = true;
setStatus("🤔 Asking the in-browser LLM to pick a recipe...");
try {
const route = await routeQuestion(q);
setStatus(`📋 Selected recipe ${route.recipe_id}. Running...`);
await runAndDisplay(route.recipe_id, route.params, q);
} catch (err) {
setStatus(`❌ Routing failed: ${err.message}`);
$("output-section").style.display = "block";
$("verdict-box").className = "verdict-no";
$("verdict-box").innerHTML = `Could not route question.${escapeHtml(JSON.stringify(r, null, 2))}`;
return String(r);
}
function escapeHtml(s) {
return String(s)
.replace(/&/g, "&").replace(//g, ">")
.replace(/"/g, """).replace(/'/g, "'");
}
// ════════════════════════════════════════════════════════════════════
// WebLLM (synthesis + router)
// ════════════════════════════════════════════════════════════════════
async function loadWebLLM() {
if (state.webllm) return state.webllm;
// Request persistent storage to avoid quota issues with cached model weights
if (navigator.storage && navigator.storage.persist) {
try {
const persistent = await navigator.storage.persist();
console.log(persistent ? "Persistent storage granted" : "Persistent storage denied");
} catch (e) {
console.warn("storage.persist() failed:", e);
}
}
setStatus(`⏳ Loading WebLLM library + ${WEBLLM_MODEL.split("-")[0]} (~350MB first time, cached after)...`);
const { CreateMLCEngine } = await import("https://esm.run/@mlc-ai/web-llm");
const tryLoad = async (modelId) => {
return await CreateMLCEngine(modelId, {
initProgressCallback: (info) => setStatus(`⏳ ${info.text || "Loading model..."}`),
});
};
try {
state.webllm = await tryLoad(WEBLLM_MODEL);
} catch (err) {
if (String(err).includes("QuotaExceeded") || String(err).includes("storage")) {
setStatus(`⚠ Quota exceeded for ${WEBLLM_MODEL}. Trying smaller fallback ${WEBLLM_FALLBACK}...`);
try {
state.webllm = await tryLoad(WEBLLM_FALLBACK);
} catch (err2) {
throw new Error(
`Both models failed. Browser storage too constrained. ` +
`Try: (1) Settings → Privacy → Site settings → allow more storage for this site, ` +
`(2) clear browser cache, (3) use Chrome/Edge in non-incognito mode. ` +
`Original error: ${err2.message || err2}`
);
}
} else {
throw err;
}
}
return state.webllm;
}
async function synthesizeAnswer(result) {
$("answer-header").style.display = "block";
$("answer-box").style.display = "block";
$("answer-box").innerHTML = 'Generating plain-English summary...';
let engine;
try {
engine = await loadWebLLM();
} catch (err) {
$("answer-box").innerHTML = `⚠ WebLLM failed: ${escapeHtml(String(err))}Pure JS recompute (no Pyodide call). Shows the geometric γ_Padé and d_horizon as you slide. The full chain re-runs on click.
✅ ${counts.confirmed} confirmed · ⚠ ${counts.partial} partial · ❌ ${counts.refuted} refuted · ⏳ ${counts.untested} untested (out of ${FALSIFICATION_STATUS.length} total predictions)
`; let table = `| ID | Claim | Status | Evidence |
|---|---|---|---|
${f.id} |
${escapeHtml(f.claim)} | ${icon} ${f.status} | ${escapeHtml(f.evidence)} |
${REGISTRY_REPO} exists with submissions, they'll appear here live.`;
return;
}
throw new Error(`HTTP ${resp.status}`);
}
const issues = await resp.json();
if (!issues || issues.length === 0) {
target.innerHTML = `No submissions yet. Be the first — generate a Profile and click 📤 Submit to registry.`;
return;
}
const html = issues.map(issue => {
const verdict = extractVerdictFromTitle(issue.title);
const vClass = verdictClass(verdict);
const time = relativeTime(new Date(issue.created_at));
return ``;
}).join("");
target.innerHTML = html;
} catch (err) {
target.innerHTML = `⚠ Couldn't load community feed: ${escapeHtml(err.message)}`;
}
}
function extractVerdictFromTitle(title) {
const m = title.match(/→\s*(\S+)/);
if (m) return m[1];
if (title.includes("YES")) return "YES";
if (title.includes("NO")) return "NO";
if (title.includes("DEGRADED")) return "DEG";
if (title.includes("Profile")) return "📇";
if (title.includes("Compare")) return "🆚";
return "?";
}
function verdictClass(v) {
if (v.startsWith("YES") || v === "GO") return "yes";
if (v.startsWith("NO")) return "no";
if (v === "DEG" || v === "DEGRADED") return "deg";
return "";
}
function relativeTime(d) {
const sec = Math.floor((Date.now() - d.getTime()) / 1000);
if (sec < 60) return `${sec}s ago`;
if (sec < 3600) return `${Math.floor(sec / 60)}m ago`;
if (sec < 86400) return `${Math.floor(sec / 3600)}h ago`;
return `${Math.floor(sec / 86400)}d ago`;
}
// ════════════════════════════════════════════════════════════════════
// PROFILE mode
// ════════════════════════════════════════════════════════════════════
$("profile-preset").addEventListener("change", (e) => {
if (!e.target.value) return;
state.lastModelId = e.target.value; // remember for filename/hash
const proxy = state.pyodide.runPython(`get_preset(${JSON.stringify(e.target.value)})`);
const p = proxy.toJs ? proxy.toJs({ dict_converter: Object.fromEntries }) : proxy;
if (!p || Object.keys(p).length === 0) return;
$("profile-theta").value = p.theta;
$("profile-T_train").value = p.T_train;
$("profile-n_attn").value = p.n_attention_heads;
$("profile-n_kv").value = p.n_kv_heads;
$("profile-d_head").value = p.d_head;
$("profile-n_layers").value = p.n_layers;
$("profile-n_params").value = p.n_params.toExponential(2);
$("profile-has_swa").value = String(p.has_SWA);
});
$("profile-fetch-btn").addEventListener("click", async () => {
const id = $("profile-hf-id").value.trim();
if (!id) { $("profile-hf-status").textContent = "⚠ Enter a model id"; return; }
$("profile-hf-status").textContent = `⏳ Fetching ${id}...`;
$("profile-fetch-btn").disabled = true;
state.lastModelId = id; // remember for filename/hash
try {
const cfg = await fetchHfConfig(id);
const p = configToPreset(cfg, id);
$("profile-theta").value = p.theta;
$("profile-T_train").value = p.T_train;
$("profile-n_attn").value = p.n_attention_heads;
$("profile-n_kv").value = p.n_kv_heads;
$("profile-d_head").value = p.d_head;
$("profile-n_layers").value = p.n_layers;
$("profile-n_params").value = p.n_params.toExponential(2);
$("profile-has_swa").value = String(p.has_SWA);
$("profile-hf-status").innerHTML = `✅ ${id} (${p._family})`;
} catch (err) {
$("profile-hf-status").textContent = `❌ ${err.message}`;
} finally {
$("profile-fetch-btn").disabled = false;
}
});
$("profile-btn").addEventListener("click", async () => {
const params = {
theta: parseFloat($("profile-theta").value),
T_train: parseInt($("profile-T_train").value),
T_eval: parseInt($("profile-T_eval").value),
n_attention_heads: parseInt($("profile-n_attn").value),
n_kv_heads: parseInt($("profile-n_kv").value),
d_head: parseInt($("profile-d_head").value),
n_layers: parseInt($("profile-n_layers").value),
n_params: parseFloat($("profile-n_params").value),
has_SWA: $("profile-has_swa").value === "true",
};
setStatus("🧮 Profiling — running all 5 recipes...");
$("profile-btn").disabled = true;
try {
state.pyodide.globals.set("__pp", state.pyodide.toPy(params));
const json = state.pyodide.runPython(`
import json
result = profile_model(**__pp)
json.dumps(result)
`);
const profile = JSON.parse(json);
renderProfile(profile, params);
state.lastResult = { type: "profile", params };
state.lastFullResult = profile;
setStatus("✅ Profile ready.");
} catch (err) {
setStatus(`❌ ${err.message}`);
console.error(err);
} finally {
$("profile-btn").disabled = false;
}
});
function renderProfile(p, params) {
$("profile-output").style.display = "block";
// Hide other outputs
$("output-section").style.display = "none";
$("compare-output").style.display = "none";
const verdictClass = (v) => {
if (v.startsWith("YES") || v === "GO" || v.startsWith("USE SOFT")) return "v-yes";
if (v.startsWith("NO") || v.startsWith("MEMORY") || v === "TINY-MODEL") return "v-no";
return "v-deg";
};
const verdictEmoji = (v) => verdictClass(v) === "v-yes" ? "✅"
: verdictClass(v) === "v-no" ? "❌" : "⚠";
const ms = p.model_summary;
const kn = p.key_numbers;
const formatN = (x) => x === null || x === undefined ? "n/a"
: (typeof x === "number" ? x.toLocaleString(undefined, { maximumFractionDigits: 4 }) : String(x));
const recipesHtml = Object.entries(p.recipes).map(([rid, r]) => `
Recipe: ${escapeHtml(cmp.recipe_id)} — ${escapeHtml(cmp.recipe_name)}
Shared params: ${escapeHtml(JSON.stringify(cmp.shared_params))}
| Model | Verdict | Reason | `; allKeys.forEach(k => html += `${escapeHtml(k)} | `); html += "
|---|---|---|---|
| ${escapeHtml(r.label)} | `; html += `${escapeHtml(r.verdict)} | `; html += `${escapeHtml(r.reason)} | `; allKeys.forEach(k => { const v = r.key_numbers ? r.key_numbers[k] : null; html += `${v === undefined || v === null ? "—" : (typeof v === "number" ? v.toLocaleString(undefined, { maximumFractionDigits: 2 }) : escapeHtml(String(v)))} | `; }); html += "