| "use strict"; |
| |
| |
|
|
| const $ = (s) => document.querySelector(s); |
|
|
| async function getJSON(url) { |
| const r = await fetch(url); |
| if (!r.ok) throw new Error(`${url} → ${r.status}`); |
| return r.json(); |
| } |
| async function postJSON(url, body) { |
| const r = await fetch(url, { |
| method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body), |
| }); |
| if (!r.ok) throw new Error(`${url} → ${r.status}`); |
| return r.json(); |
| } |
|
|
| |
| const INSTRUCTIONS = [ |
| { key: "system", label: "SYSTEM", area: true, ph: "You are Codephreak, augmentic intelligence orchestrator." }, |
| { key: "template", label: "TEMPLATE", area: true, ph: "{{ .System }}\n{{ .Prompt }}" }, |
| { key: "adapter", label: "ADAPTER", area: false, ph: "./out/runs/<run>/checkpoint" }, |
| { key: "license", label: "LICENSE", area: true, ph: "Apache-2.0" }, |
| { key: "requires", label: "REQUIRES", area: false, ph: "0.5.0" }, |
| ]; |
|
|
| function renderInstructions(prefill) { |
| const host = $("#mf-instructions"); |
| for (const ins of INSTRUCTIONS) { |
| const wrap = document.createElement("div"); |
| wrap.className = "mf-row"; |
| const pre = (prefill[ins.key] || ""); |
| const field = ins.area |
| ? `<textarea id="mf-${ins.key}" rows="2" placeholder="${ins.ph}">${pre}</textarea>` |
| : `<input id="mf-${ins.key}" type="text" placeholder="${ins.ph}" value="${pre}">`; |
| wrap.innerHTML = |
| `<label><input type="checkbox" class="mf-ins-toggle" data-key="${ins.key}" ${pre ? "checked" : ""}> ${ins.label}</label>` + |
| `<div class="mf-toggle-field" id="mf-field-${ins.key}" ${pre ? "" : "hidden"}>${field}</div>`; |
| host.appendChild(wrap); |
| } |
| host.querySelectorAll(".mf-ins-toggle").forEach((cb) => { |
| cb.addEventListener("change", () => { |
| $(`#mf-field-${cb.dataset.key}`).hidden = !cb.checked; |
| }); |
| }); |
| } |
|
|
| async function renderParams() { |
| const host = $("#mf-params"); |
| let params = []; |
| try { params = (await getJSON("/coach/api/modelfile/params")).parameters; } |
| catch (e) { host.textContent = "could not load parameters"; return; } |
| for (const p of params) { |
| const div = document.createElement("div"); |
| div.className = "mf-param"; |
| const inputType = (p.type === "int" || p.type === "float") ? "number" : "text"; |
| const step = p.type === "float" ? "0.05" : "1"; |
| div.innerHTML = |
| `<input type="checkbox" class="mf-param-toggle" data-name="${p.name}" data-type="${p.type}">` + |
| `<code>${p.name}</code>` + |
| `<input class="mf-param-val" data-name="${p.name}" type="${inputType}" step="${step}" ` + |
| `value="${p.default ?? ""}" title="${p.description}">` + |
| `<span class="mf-desc">${p.description}</span>`; |
| host.appendChild(div); |
| } |
| } |
|
|
| function buildSpec() { |
| const spec = { from_model: $("#mf-from").value.trim(), parameters: {} }; |
| |
| for (const ins of INSTRUCTIONS) { |
| const cb = document.querySelector(`.mf-ins-toggle[data-key="${ins.key}"]`); |
| if (cb && cb.checked) { |
| const v = $(`#mf-${ins.key}`).value.trim(); |
| if (v) spec[ins.key] = v; |
| } |
| } |
| |
| document.querySelectorAll(".mf-param-toggle").forEach((cb) => { |
| if (!cb.checked) return; |
| const name = cb.dataset.name; |
| const raw = document.querySelector(`.mf-param-val[data-name="${name}"]`).value.trim(); |
| if (raw === "") return; |
| spec.parameters[name] = (cb.dataset.type === "int") ? parseInt(raw, 10) |
| : (cb.dataset.type === "float") ? parseFloat(raw) : raw; |
| }); |
| |
| const stop = $("#mf-stop").value.split("\n").map((s) => s.trim()).filter(Boolean); |
| if (stop.length) spec.stop = stop; |
| |
| const messages = []; |
| for (const line of $("#mf-messages").value.split("\n")) { |
| const i = line.indexOf(":"); |
| if (i < 0) continue; |
| const role = line.slice(0, i).trim().toLowerCase(); |
| const content = line.slice(i + 1).trim(); |
| if (["system", "user", "assistant"].includes(role) && content) messages.push({ role, content }); |
| } |
| if (messages.length) spec.messages = messages; |
| return spec; |
| } |
|
|
| async function buildModelfile() { |
| const status = $("#mf-status"); |
| const spec = buildSpec(); |
| if (!spec.from_model) { status.textContent = "FROM is required"; return; } |
| status.textContent = "building…"; |
| try { |
| const body = await postJSON("/coach/api/modelfile/build", spec); |
| $("#mf-output").hidden = false; |
| $("#mf-output").textContent = body.modelfile; |
| status.textContent = "built ✓"; |
| } catch (e) { status.textContent = `build failed: ${e}`; } |
| } |
|
|
| async function createModel() { |
| const s = $("#mf-create-status"); |
| const tag = $("#mf-tag").value.trim(); |
| if (!tag) { s.textContent = "tag required"; return; } |
| const spec = buildSpec(); |
| if (!spec.from_model) { s.textContent = "FROM is required"; return; } |
| s.textContent = `running ollama create ${tag}…`; |
| try { |
| const res = await postJSON("/coach/api/modelfile/create", { tag, spec }); |
| s.textContent = `${res.status}: ${(res.output || "").slice(-200)}`; |
| } catch (e) { s.textContent = `create failed: ${e}`; } |
| } |
|
|
| function prefillFromQuery() { |
| const q = new URLSearchParams(location.search); |
| const out = {}; |
| for (const k of ["system", "template", "adapter", "license", "requires"]) { |
| if (q.get(k)) out[k] = q.get(k); |
| } |
| if (q.get("from")) $("#mf-from").value = q.get("from"); |
| if (q.get("tag")) $("#mf-tag").value = q.get("tag"); |
| return out; |
| } |
|
|
| window.addEventListener("DOMContentLoaded", async () => { |
| const prefill = prefillFromQuery(); |
| renderInstructions(prefill); |
| await renderParams(); |
| $("#mf-build").addEventListener("click", buildModelfile); |
| $("#mf-create").addEventListener("click", createModel); |
| $("#mf-copy").addEventListener("click", () => { |
| const t = $("#mf-output").textContent; |
| if (t) navigator.clipboard && navigator.clipboard.writeText(t); |
| }); |
| }); |
|
|
