File size: 6,623 Bytes
3664018 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ADI Distillation Studio</title>
<style>
:root { color-scheme: dark; --bg:#080b10; --panel:#151922; --line:#303745; --text:#f5f7fb; --muted:#aab2c0; --accent:#12b981; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.45 system-ui, -apple-system, Segoe UI, sans-serif; background:var(--bg); color:var(--text); }
main { max-width:1180px; margin:0 auto; padding:28px 18px 40px; }
h1 { margin:0 0 18px; font-size:30px; }
label { display:block; font-weight:700; margin:0 0 8px; }
textarea, input, select { width:100%; border:1px solid var(--line); border-radius:8px; background:#0d1118; color:var(--text); padding:12px; font:inherit; }
textarea { min-height:128px; resize:vertical; }
.grid { display:grid; grid-template-columns:minmax(300px, 0.9fr) minmax(360px, 1.1fr); gap:18px; align-items:start; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:16px; }
.row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field { margin-bottom:14px; }
button, a.button { display:inline-flex; justify-content:center; align-items:center; min-height:42px; border:0; border-radius:8px; padding:0 16px; background:var(--accent); color:#04110c; font-weight:800; cursor:pointer; text-decoration:none; }
pre { margin:0; white-space:pre-wrap; word-break:break-word; background:#0d1118; border:1px solid var(--line); border-radius:8px; padding:14px; min-height:220px; color:#d8ffe9; }
.muted { color:var(--muted); }
.actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
@media (max-width: 850px) { .grid, .row { grid-template-columns:1fr; } }
</style>
</head>
<body>
<main>
<h1>ADI Distillation Studio</h1>
<div class="grid">
<section class="panel">
<div class="field">
<label for="instruction">Instruction / user request</label>
<textarea id="instruction">Explain why a recent llama.cpp build is needed for Qwen3.5 GGUF models.</textarea>
</div>
<div class="field">
<label for="teacher">Teacher answer</label>
<textarea id="teacher">Qwen3.5 uses hybrid SSM/Mamba-style gated-delta layers. Older llama.cpp builds may not recognize those tensors or metadata, so the GGUF can download correctly but still fail at model load. Use a recent llama.cpp or a llama-cpp-python wheel that bundles a compatible commit.</textarea>
</div>
<div class="row">
<div class="field">
<label for="style">Style preset</label>
<select id="style">
<option>ADI concise</option>
<option>Technical mentor</option>
<option>Support agent</option>
<option>Creative partner</option>
<option>Safety reviewer</option>
</select>
</div>
<div class="field">
<label for="tags">Tags</label>
<input id="tags" value="adi,distillation,qwen3.5" />
</div>
</div>
<div class="field">
<label for="custom">Custom style override</label>
<textarea id="custom" style="min-height:80px"></textarea>
</div>
<div class="actions">
<button id="generate">Generate JSONL</button>
<a id="download" class="button" download="adi-distillation.jsonl">Download JSONL</a>
</div>
</section>
<section class="panel">
<p id="summary" class="muted">Ready.</p>
<label>First record preview</label>
<pre id="preview"></pre>
<label style="margin-top:14px">Full JSONL</label>
<pre id="jsonl"></pre>
</section>
</div>
</main>
<script>
const styles = {
"ADI concise": "Answer clearly, directly, and with practical next steps. Keep the tone calm and capable.",
"Technical mentor": "Explain the reasoning briefly, use precise terms, and make the user feel more capable.",
"Support agent": "Be reassuring, diagnose the issue, and give a short ordered fix path.",
"Creative partner": "Offer useful ideas with warmth and imagination while staying grounded.",
"Safety reviewer": "Identify risks, state assumptions, and recommend the safest useful action."
};
const variants = ["Direct task", "Beginner phrasing", "Production constraint", "Edge case", "Follow-up turn"];
const clean = text => (text || "").trim().replace(/\s+/g, " ");
function userVariant(text, idx) {
if (idx === 1) return "I'm new to this. " + text;
if (idx === 2) return text + " Keep the answer production-ready and avoid unnecessary detail.";
if (idx === 3) return text + " Also mention one common edge case or failure mode.";
if (idx === 4) return "Follow up on this request and make the answer easier to act on: " + text;
return text;
}
function assistantVariant(answer, style, idx) {
const sentences = answer.split(/(?<=[.!?])\s+/).filter(Boolean);
if (idx === 1) return "Here is the short version: " + answer;
if (idx === 2) return sentences.slice(0, 6).map((s, i) => `${i + 1}. ${s}`).join("\n") || answer;
if (idx === 3) return answer + "\n\nWatch for: missing context, stale assumptions, or inputs that do not match the expected format.";
if (idx === 4) return answer + "\n\nStyle target: " + style;
return answer;
}
function generate() {
const instruction = clean(document.querySelector("#instruction").value);
const teacher = clean(document.querySelector("#teacher").value);
const style = clean(document.querySelector("#custom").value) || styles[document.querySelector("#style").value];
const tags = document.querySelector("#tags").value.split(",").map(t => t.trim()).filter(Boolean);
if (!instruction || !teacher) return;
const records = variants.map((source, idx) => ({
messages: [
{role: "system", content: "You are ADI. " + style},
{role: "user", content: userVariant(instruction, idx)},
{role: "assistant", content: assistantVariant(teacher, style, idx)}
],
metadata: {source, tags}
}));
const jsonl = records.map(r => JSON.stringify(r)).join("\n") + "\n";
document.querySelector("#summary").textContent = `Generated ${records.length} JSONL records.`;
document.querySelector("#preview").textContent = JSON.stringify(records[0], null, 2);
document.querySelector("#jsonl").textContent = jsonl;
const blob = new Blob([jsonl], {type:"application/jsonl"});
document.querySelector("#download").href = URL.createObjectURL(blob);
}
document.querySelector("#generate").addEventListener("click", generate);
generate();
</script>
</body>
</html>
|