| <!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> |
|
|
