Free \/ $5 Community Support)<\/p>\n\n\n\n
If you\u2019ve ever said \u201cI wish AI answered like me<\/em>,\u201d this is the missing piece.<\/p>\n\n\n\n Most people don\u2019t need a complex engineering team, a lab, or months of coding to start shaping how AI responds. What they need is a simple way to:<\/p>\n\n\n\n That\u2019s exactly why I built JacAI Training Builder<\/strong>.<\/p>\n\n\n\n This is a self-contained tool (web-based, no database required) that helps you create and export training files in the exact JSONL format used for fine-tuning\/training workflows. It runs anywhere: your website folder, your laptop, or later as a desktop app.<\/p>\n\n\n\n I keep seeing the same problem: people want<\/em> AI but they can\u2019t get past setup complexity.<\/p>\n\n\n\n Even in my own circle, I ran into this with a client I call \u201cDickie.\u201d He didn\u2019t even know how to access ChatGPT or how to ask the kinds of questions that get useful answers. But once I showed him a tool where he can paste Q&A pairs and press \u201cDownload JSONL,\u201d he immediately understood the value.<\/p>\n\n\n\n That\u2019s the whole point: reduce the friction<\/strong> so regular people can build useful AI behavior without having to learn a developer workflow.<\/p>\n\n\n\n At its core, the tool has one job:<\/p>\n\n\n\n Turn your knowledge into a training dataset (JSONL) you can upload to your training dashboard.<\/strong><\/p>\n\n\n\n You can:<\/p>\n\n\n\n You can paste training pairs in either format:<\/p>\n\n\n\n Format A: Format B: So whether you write like a power user or like a normal person taking notes, it still works.<\/p>\n\n\n\n This tool is built for people who want AI responses that match a specific style, industry, or mission, including:<\/p>\n\n\n\n You don\u2019t have to be technical. If you can write a question and write an answer, you can build a dataset.<\/p>\n\n\n\n I\u2019m releasing the starter build in two ways:<\/p>\n\n\n\n The $5 isn\u2019t about locking people out. It\u2019s about supporting the community and the development path\u2014because the next version (Pro) is going to be serious.<\/p>\n\n\n\n This tool is self-contained: it\u2019s just HTML + CSS + JavaScript.<\/p>\n\n\n\n No database. No PHP. No logins. No dependencies.<\/p>\n\n\n\n A lot of people think \u201cmore data\u201d is the goal. It\u2019s not.<\/p>\n\n\n\n Better examples<\/strong> beat more examples.<\/p>\n\n\n\n Good examples include:<\/p>\n\n\n\n If you want AI to behave professionally, write examples like a professional.<\/p>\n\n\n\n JacAI is the brand because it\u2019s bigger than one tool.<\/p>\n\n\n\n This Training Builder is the \u201cdataset engine.\u201d Later, JacAI becomes a family of simplified AI agents (legal, content, business, automation). The common thread is the same:<\/p>\n\n\n\n We\u2019re focused on the user relationship with AI<\/strong> \u2014 how to make powerful AI usable for people who aren\u2019t technical.<\/p>\n\n\n\n For now, I\u2019m launching the legal campaign first because the demand is real, and people need help organizing their cases and understanding what to do next. The Training Builder is one of the core tools behind that mission.<\/p>\n\n\n\n Either way, you\u2019ll be able to train AI to respond more like you<\/em>\u2014and that\u2019s a major step beyond \u201cgeneric chatbot answers.\u201d<\/p>\n\n\n\n Next up:<\/strong> I\u2019m building the Pro version (not public) with advanced features that make training cleaner, faster, and more valuable for businesses.<\/p>\n\n\n\n The Pro build is where we add:<\/p>\n\n\n\n If you\u2019re serious about training AI the right way, that\u2019s where it gets powerful.<\/p>\n\n\n\n Two-tier lineup (your plan):<\/strong><\/p>\n\n\n\n For Pro pricing that matches \u201creal value,\u201d I\u2019d position it like:<\/p>\n\n\n\n If you later wrap it as an Electron desktop installer, the perceived value jumps.<\/p>\n\n\n\n self-contained Training Builder<\/strong> that runs anywhere (web folder, WP plugin wrapper, Electron later) and only outputs JSONL<\/strong> for the user to upload into their own model dashboard, you can do it in 3 files<\/strong>:<\/p>\n\n\n\n No database, no server required. It stores drafts in No dependencies.<\/p>\n\n\n\n\n
Why this matters (especially for non-tech people)<\/h3>\n\n\n\n
\n\n\n\nWhat JacAI Training Builder does<\/h2>\n\n\n\n
\n
\n
Batch import formats supported<\/h3>\n\n\n\n
===PAIR===<\/code> blocks<\/strong><\/p>\n\n\n\n\n
Q:<\/code> \/ A:<\/code> pairs<\/strong><\/p>\n\n\n\n\n
\n\n\n\nWho this is for<\/h2>\n\n\n\n
\n
\n\n\n\nFree vs $5 community version<\/h2>\n\n\n\n
\n
\n
\n
\n
\n\n\n\nHow to install (basic)<\/h2>\n\n\n\n
Option 1: Run on your website (cPanel \/ hosting)<\/h3>\n\n\n\n
\n
\n
\/training-builder\/<\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\nOption 2: Run locally on your laptop<\/h3>\n\n\n\n
\n
index.html<\/code> in your browser<\/li>\n\n\n\n
\n\n\n\nHow to use (basic workflow)<\/h2>\n\n\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n\n\nWhat to include in a strong dataset<\/h2>\n\n\n\n
\n
\n\n\n\nWhy I\u2019m building this under JacAI<\/h2>\n\n\n\n
\n\n\n\nGet it (Free build or $5 support)<\/h2>\n\n\n\n
\n
\n\n\n\nPro version plan (private, not shown publicly)<\/h2>\n\n\n\n
\n
\n\n\n\nPro version scope (what I recommend you charge)<\/h1>\n\n\n\n
\n
\n
\n\n\n\nBuild Instructions <\/h2>\n\n\n\n
\n
index.html<\/code><\/li>\n\n\n\napp.js<\/code><\/li>\n\n\n\nstyle.css<\/code><\/li>\n<\/ul>\n\n\n\nlocalStorage<\/code>, supports bulk paste, and exports NDJSON\/JSONL<\/strong> in the fine-tune \u201cmessages\u201d format.<\/p>\n\n\n\n
\n\n\n\nFile 1 \u2014
index.html<\/code><\/h2>\n\n\n\n<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\" \/>\n <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" \/>\n <title>JacAI Training Builder (Offline JSONL Export)<\/title>\n <link rel=\"stylesheet\" href=\".\/style.css\" \/>\n<\/head>\n<body>\n <header class=\"topbar\">\n <div class=\"brand\">\n <div class=\"logo\">J<\/div>\n <div>\n <div class=\"title\">JacAI Training Builder<\/div>\n <div class=\"subtitle\">Offline tool \u2192 builds JSONL \/ NDJSON for fine-tuning<\/div>\n <\/div>\n <\/div>\n <div class=\"top-actions\">\n <button id=\"btnExport\" class=\"btn primary\">Download JSONL<\/button>\n <button id=\"btnExportRaw\" class=\"btn\">Download \u201cprompt\/completion\u201d JSONL<\/button>\n <button id=\"btnReset\" class=\"btn danger\">Reset<\/button>\n <\/div>\n <\/header>\n\n <main class=\"wrap\">\n <section class=\"grid\">\n <div class=\"card\">\n <h2>System Prompt<\/h2>\n <p class=\"muted\">This is prepended to every example as the first message.<\/p>\n <textarea id=\"systemPrompt\" class=\"ta\" rows=\"6\" placeholder=\"Example: You are JacAI Legal Coach. You write clear, structured, educational answers. You do not claim to be an attorney. You give procedural guidance, checklists, and drafting help.\"><\/textarea>\n\n <div class=\"row\">\n <label class=\"check\">\n <input type=\"checkbox\" id=\"includeSystemPrompt\" checked \/>\n Include system prompt in export\n <\/label>\n\n <label class=\"check\">\n <input type=\"checkbox\" id=\"prettyJsonl\" \/>\n Pretty-print JSON (larger files)\n <\/label>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <h2>Add Example<\/h2>\n <div class=\"field\">\n <label>User prompt \/ fact pattern<\/label>\n <textarea id=\"userPrompt\" class=\"ta\" rows=\"5\" placeholder=\"Example: I received a notice of hearing for child support. What should I bring and how should I speak to the judge?\"><\/textarea>\n <\/div>\n\n <div class=\"field\">\n <label>Assistant answer<\/label>\n <textarea id=\"assistantAnswer\" class=\"ta\" rows=\"6\" placeholder=\"Example: Here\u2019s a structured checklist: 1) documents to bring, 2) what the hearing decides, 3) objections, 4) script, 5) next steps.\"><\/textarea>\n <\/div>\n\n <div class=\"row\">\n <button id=\"btnAdd\" class=\"btn primary\">Add<\/button>\n <button id=\"btnUpdate\" class=\"btn\" disabled>Update Selected<\/button>\n <button id=\"btnClearForm\" class=\"btn\">Clear<\/button>\n <\/div>\n\n <div class=\"hint\">\n Tip: You can also use <strong>Bulk Import<\/strong> (below) to paste multiple Q&A pairs at once.\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <h2>Bulk Import<\/h2>\n <p class=\"muted\">\n Paste multiple examples. Format options:\n <br><code>Q: ...<\/code> then <code>A: ...<\/code> (repeat), or\n <br>separate blocks with <code>---<\/code>.\n <\/p>\n <textarea id=\"bulkInput\" class=\"ta\" rows=\"10\" placeholder=\"Q: Question 1\nA: Answer 1\n---\nQ: Question 2\nA: Answer 2\"><\/textarea>\n\n <div class=\"row\">\n <button id=\"btnBulkParse\" class=\"btn primary\">Import Pairs<\/button>\n <button id=\"btnBulkClear\" class=\"btn\">Clear Bulk<\/button>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <h2>Import JSONL<\/h2>\n <p class=\"muted\">\n Load an existing JSONL file back into the editor (messages format).\n <\/p>\n <input id=\"fileImport\" type=\"file\" accept=\".jsonl,.ndjson,.txt,application\/json\" \/>\n <div class=\"row\">\n <button id=\"btnImport\" class=\"btn primary\">Import File<\/button>\n <button id=\"btnExportBackup\" class=\"btn\">Download Backup (.json)<\/button>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"card table-card\">\n <div class=\"table-head\">\n <h2>Training Examples<\/h2>\n <div class=\"table-actions\">\n <input id=\"search\" class=\"search\" placeholder=\"Search\u2026\" \/>\n <button id=\"btnDeleteSelected\" class=\"btn danger\" disabled>Delete Selected<\/button>\n <\/div>\n <\/div>\n\n <div id=\"msg\" class=\"msg\" hidden><\/div>\n\n <div class=\"table-wrap\">\n <table>\n <thead>\n <tr>\n <th style=\"width:38px;\"><\/th>\n <th style=\"width:60px;\">ID<\/th>\n <th>User Prompt<\/th>\n <th>Assistant Answer<\/th>\n <th style=\"width:140px;\">Actions<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"rows\"><\/tbody>\n <\/table>\n <\/div>\n\n <div class=\"footer-note muted\">\n Stored locally in your browser (localStorage). No server required.\n <\/div>\n <\/section>\n <\/main>\n\n <footer class=\"foot\">\n <div class=\"muted\">\n Output formats:\n <strong>messages JSONL<\/strong> (recommended) and optional <strong>prompt\/completion JSONL<\/strong>.\n <\/div>\n <\/footer>\n\n <script src=\".\/app.js\"><\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
\n\n\n\nFile 2 \u2014
style.css<\/code><\/h2>\n\n\n\n:root{\n --bg:#020617;\n --card:#0b1224;\n --card2:#0a1020;\n --border:#1f2a44;\n --text:#e5e7eb;\n --muted:#9aa4b2;\n --accent:#38bdf8;\n --good:#22c55e;\n --warn:#f97316;\n --bad:#ef4444;\n}\n\n*{box-sizing:border-box}\nhtml,body{height:100%}\nbody{\n margin:0;\n font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;\n background:radial-gradient(900px 400px at 10% 0%, rgba(56,189,248,.18), transparent 60%),\n radial-gradient(900px 400px at 90% 0%, rgba(34,197,94,.14), transparent 60%),\n var(--bg);\n color:var(--text);\n}\n\n.topbar{\n position:sticky;\n top:0;\n z-index:10;\n background:rgba(2,6,23,.86);\n backdrop-filter: blur(10px);\n border-bottom:1px solid rgba(31,42,68,.65);\n display:flex;\n align-items:center;\n justify-content:space-between;\n padding:12px 16px;\n gap:12px;\n}\n\n.brand{display:flex;align-items:center;gap:12px}\n.logo{\n width:38px;height:38px;border-radius:12px;\n display:grid;place-items:center;\n border:1px solid rgba(56,189,248,.45);\n background:linear-gradient(135deg, rgba(56,189,248,.18), rgba(34,197,94,.12));\n font-weight:900;\n}\n.title{font-weight:800;letter-spacing:.02em}\n.subtitle{font-size:.85rem;color:var(--muted)}\n\n.top-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}\n\n.wrap{max-width:1180px;margin:18px auto;padding:0 14px 28px}\n.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}\n@media (max-width: 980px){.grid{grid-template-columns:1fr}}\n\n.card{\n background:linear-gradient(180deg, rgba(11,18,36,.92), rgba(10,16,32,.92));\n border:1px solid rgba(31,42,68,.75);\n border-radius:16px;\n padding:14px 14px;\n box-shadow:0 18px 45px rgba(0,0,0,.45);\n}\n\n.card h2{margin:0 0 8px;font-size:1.05rem}\n.muted{color:var(--muted);font-size:.92rem}\n.field{margin-top:10px}\n.field label{display:block;margin-bottom:6px;color:var(--muted);font-size:.86rem}\n\n.ta{\n width:100%;\n padding:10px 10px;\n border-radius:12px;\n border:1px solid rgba(31,42,68,.9);\n background:rgba(2,6,23,.65);\n color:var(--text);\n resize:vertical;\n outline:none;\n}\n.ta:focus{border-color:rgba(56,189,248,.75); box-shadow:0 0 0 2px rgba(56,189,248,.12)}\n\n.row{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}\n.check{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.9rem}\n\n.btn{\n border-radius:999px;\n border:1px solid rgba(56,189,248,.5);\n background:rgba(15,23,42,.8);\n color:var(--text);\n padding:9px 14px;\n cursor:pointer;\n font-weight:700;\n font-size:.9rem;\n}\n.btn:hover{border-color:rgba(56,189,248,.85)}\n.btn:disabled{opacity:.5;cursor:not-allowed}\n.primary{background:rgba(34,197,94,.9);border-color:rgba(34,197,94,.9);color:#052e1a}\n.danger{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.65);color:#fecaca}\n\n.hint{margin-top:10px;color:var(--muted);font-size:.9rem}\n\n.table-card{margin-top:14px}\n.table-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}\n.table-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}\n\n.search{\n padding:9px 12px;border-radius:999px;\n border:1px solid rgba(31,42,68,.9);\n background:rgba(2,6,23,.65);\n color:var(--text);\n outline:none;\n}\n.search:focus{border-color:rgba(56,189,248,.75); box-shadow:0 0 0 2px rgba(56,189,248,.12)}\n\n.table-wrap{overflow:auto;border-radius:12px;border:1px solid rgba(31,42,68,.7);margin-top:10px}\ntable{width:100%;border-collapse:collapse;min-width:880px}\nth,td{padding:10px 10px;border-bottom:1px solid rgba(31,42,68,.55);vertical-align:top}\nth{color:var(--muted);font-weight:800;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;background:rgba(2,6,23,.4)}\ntbody tr:nth-child(even){background:rgba(2,6,23,.22)}\n.cell-pre{white-space:pre-wrap}\n\n.actions{display:flex;gap:8px;flex-wrap:wrap}\n.smallbtn{\n padding:7px 10px;border-radius:999px;\n border:1px solid rgba(31,42,68,.9);\n background:rgba(2,6,23,.55);\n color:var(--text);\n cursor:pointer;\n font-weight:700;\n font-size:.82rem;\n}\n.smallbtn:hover{border-color:rgba(56,189,248,.65)}\n\n.msg{\n margin-top:10px;\n padding:10px 12px;\n border-radius:12px;\n border:1px solid rgba(31,42,68,.9);\n background:rgba(2,6,23,.55);\n font-size:.92rem;\n}\n\n.foot{\n border-top:1px solid rgba(31,42,68,.65);\n padding:14px 16px;\n text-align:center;\n background:rgba(2,6,23,.62);\n}\n.footer-note{margin-top:10px}\n<\/code><\/pre>\n\n\n\n
\n\n\n\nFile 3 \u2014
app.js<\/code><\/h2>\n\n\n\n(function () {\n const LS_KEY = \"jacai_training_builder_v1\";\n\n const $ = (id) => document.getElementById(id);\n\n const state = {\n systemPrompt: \"\",\n includeSystemPrompt: true,\n prettyJsonl: false,\n items: [], \/\/ {id, user, assistant}\n selectedId: null,\n selectedRowIds: new Set(),\n nextId: 1,\n };\n\n function nowStamp() {\n const d = new Date();\n const pad = (n) => String(n).padStart(2, \"0\");\n return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}_${pad(d.getHours())}${pad(d.getMinutes())}${pad(d.getSeconds())}`;\n }\n\n function showMsg(text) {\n const el = $(\"msg\");\n el.hidden = false;\n el.textContent = text;\n clearTimeout(showMsg._t);\n showMsg._t = setTimeout(() => (el.hidden = true), 3500);\n }\n\n function save() {\n const payload = {\n ...state,\n selectedId: null,\n selectedRowIds: Array.from(state.selectedRowIds),\n };\n localStorage.setItem(LS_KEY, JSON.stringify(payload));\n }\n\n function load() {\n const raw = localStorage.getItem(LS_KEY);\n if (!raw) return;\n try {\n const data = JSON.parse(raw);\n state.systemPrompt = data.systemPrompt || \"\";\n state.includeSystemPrompt = data.includeSystemPrompt !== false;\n state.prettyJsonl = !!data.prettyJsonl;\n state.items = Array.isArray(data.items) ? data.items : [];\n state.nextId = data.nextId || (state.items.length ? Math.max(...state.items.map(i => i.id)) + 1 : 1);\n state.selectedRowIds = new Set(Array.isArray(data.selectedRowIds) ? data.selectedRowIds : []);\n } catch {\n \/\/ ignore\n }\n }\n\n function resetAll() {\n if (!confirm(\"Reset everything? This clears local data.\")) return;\n localStorage.removeItem(LS_KEY);\n location.reload();\n }\n\n function setSelected(id) {\n state.selectedId = id;\n const item = state.items.find((x) => x.id === id);\n if (!item) return;\n $(\"userPrompt\").value = item.user;\n $(\"assistantAnswer\").value = item.assistant;\n $(\"btnUpdate\").disabled = false;\n $(\"btnAdd\").disabled = true;\n }\n\n function clearForm() {\n state.selectedId = null;\n $(\"userPrompt\").value = \"\";\n $(\"assistantAnswer\").value = \"\";\n $(\"btnUpdate\").disabled = true;\n $(\"btnAdd\").disabled = false;\n }\n\n function addItem(user, assistant) {\n const trimmedU = (user || \"\").trim();\n const trimmedA = (assistant || \"\").trim();\n if (!trimmedU || !trimmedA) return false;\n\n state.items.unshift({\n id: state.nextId++,\n user: trimmedU,\n assistant: trimmedA,\n });\n return true;\n }\n\n function updateSelected(user, assistant) {\n const id = state.selectedId;\n if (!id) return false;\n const item = state.items.find((x) => x.id === id);\n if (!item) return false;\n const trimmedU = (user || \"\").trim();\n const trimmedA = (assistant || \"\").trim();\n if (!trimmedU || !trimmedA) return false;\n item.user = trimmedU;\n item.assistant = trimmedA;\n return true;\n }\n\n function deleteOne(id) {\n state.items = state.items.filter((x) => x.id !== id);\n state.selectedRowIds.delete(id);\n if (state.selectedId === id) clearForm();\n }\n\n function deleteSelectedRows() {\n if (state.selectedRowIds.size === 0) return;\n if (!confirm(`Delete ${state.selectedRowIds.size} selected example(s)?`)) return;\n const ids = new Set(state.selectedRowIds);\n state.items = state.items.filter((x) => !ids.has(x.id));\n state.selectedRowIds.clear();\n clearForm();\n render();\n save();\n showMsg(\"Deleted selected items.\");\n }\n\n function toggleRowSelected(id, checked) {\n if (checked) state.selectedRowIds.add(id);\n else state.selectedRowIds.delete(id);\n $(\"btnDeleteSelected\").disabled = state.selectedRowIds.size === 0;\n save();\n }\n\n function downloadText(filename, text, mime = \"text\/plain;charset=utf-8\") {\n const blob = new Blob([text], { type: mime });\n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = filename;\n document.body.appendChild(a);\n a.click();\n a.remove();\n setTimeout(() => URL.revokeObjectURL(url), 250);\n }\n\n function buildMessagesJSONL() {\n const sys = $(\"systemPrompt\").value || \"\";\n const includeSys = $(\"includeSystemPrompt\").checked;\n const pretty = $(\"prettyJsonl\").checked;\n\n const rows = state.items\n .slice()\n .reverse()\n .map((ex) => {\n const messages = [];\n if (includeSys && sys.trim()) {\n messages.push({ role: \"system\", content: sys.trim() });\n }\n messages.push({ role: \"user\", content: ex.user });\n messages.push({ role: \"assistant\", content: ex.assistant });\n\n return { messages };\n });\n\n \/\/ NDJSON\/JSONL: one JSON per line\n return rows\n .map((obj) => JSON.stringify(obj, null, pretty ? 2 : 0))\n .join(\"\\n\") + \"\\n\";\n }\n\n function buildPromptCompletionJSONL() {\n \/\/ Some platforms\/older flows accept prompt\/completion JSONL\n const pretty = $(\"prettyJsonl\").checked;\n\n const rows = state.items\n .slice()\n .reverse()\n .map((ex) => ({\n prompt: ex.user,\n completion: ex.assistant,\n }));\n\n return rows\n .map((obj) => JSON.stringify(obj, null, pretty ? 2 : 0))\n .join(\"\\n\") + \"\\n\";\n }\n\n function parseBulk(text) {\n const input = (text || \"\").trim();\n if (!input) return [];\n\n \/\/ Split by --- blocks first\n const blocks = input.split(\/\\n-{3,}\\n\/g).map((b) => b.trim()).filter(Boolean);\n\n const pairs = [];\n for (const block of blocks) {\n \/\/ Try Q:\/A: format\n const qMatch = block.match(\/(^|\\n)\\s*Q:\\s*([\\s\\S]*?)(\\n\\s*A:\\s*|$)\/i);\n const aMatch = block.match(\/(^|\\n)\\s*A:\\s*([\\s\\S]*)$\/i);\n\n if (qMatch && aMatch) {\n const q = (qMatch[2] || \"\").trim();\n const a = (aMatch[2] || \"\").trim();\n if (q && a) pairs.push({ user: q, assistant: a });\n continue;\n }\n\n \/\/ Fallback: first line question, rest answer\n const lines = block.split(\"\\n\");\n if (lines.length >= 2) {\n const q = lines[0].trim();\n const a = lines.slice(1).join(\"\\n\").trim();\n if (q && a) pairs.push({ user: q, assistant: a });\n }\n }\n return pairs;\n }\n\n async function importJSONLFile(file) {\n const text = await file.text();\n const lines = text.split(\/\\r?\\n\/).map(l => l.trim()).filter(Boolean);\n const imported = [];\n let inferredSys = null;\n\n for (const line of lines) {\n let obj;\n try {\n obj = JSON.parse(line);\n } catch {\n continue;\n }\n\n \/\/ Accept: {messages:[{role,content},...]}\n if (obj && Array.isArray(obj.messages)) {\n const msgs = obj.messages;\n const userMsg = msgs.find(m => m.role === \"user\");\n const asstMsg = msgs.find(m => m.role === \"assistant\");\n const sysMsg = msgs.find(m => m.role === \"system\");\n\n if (!inferredSys && sysMsg && typeof sysMsg.content === \"string\") {\n inferredSys = sysMsg.content;\n }\n\n if (userMsg?.content && asstMsg?.content) {\n imported.push({ user: String(userMsg.content), assistant: String(asstMsg.content) });\n }\n }\n\n \/\/ Accept: {prompt, completion}\n if (typeof obj?.prompt === \"string\" && typeof obj?.completion === \"string\") {\n imported.push({ user: obj.prompt, assistant: obj.completion });\n }\n }\n\n if (inferredSys && !$(\"systemPrompt\").value.trim()) {\n $(\"systemPrompt\").value = inferredSys;\n showMsg(\"Imported system prompt from file.\");\n }\n\n let added = 0;\n for (const p of imported) {\n if (addItem(p.user, p.assistant)) added++;\n }\n\n save();\n render();\n showMsg(`Imported ${added} example(s).`);\n }\n\n function exportBackupJSON() {\n const payload = {\n systemPrompt: $(\"systemPrompt\").value || \"\",\n includeSystemPrompt: $(\"includeSystemPrompt\").checked,\n prettyJsonl: $(\"prettyJsonl\").checked,\n items: state.items,\n nextId: state.nextId,\n exportedAt: new Date().toISOString(),\n };\n downloadText(`jacai_training_backup_${nowStamp()}.json`, JSON.stringify(payload, null, 2), \"application\/json;charset=utf-8\");\n }\n\n function render() {\n \/\/ sync state from UI\n state.systemPrompt = $(\"systemPrompt\").value;\n state.includeSystemPrompt = $(\"includeSystemPrompt\").checked;\n state.prettyJsonl = $(\"prettyJsonl\").checked;\n\n const q = ($(\"search\").value || \"\").toLowerCase().trim();\n\n const rows = $(\"rows\");\n rows.innerHTML = \"\";\n\n const filtered = state.items.filter((it) => {\n if (!q) return true;\n return (it.user + \"\\n\" + it.assistant).toLowerCase().includes(q);\n });\n\n for (const it of filtered) {\n const tr = document.createElement(\"tr\");\n\n const tdSel = document.createElement(\"td\");\n const cb = document.createElement(\"input\");\n cb.type = \"checkbox\";\n cb.checked = state.selectedRowIds.has(it.id);\n cb.addEventListener(\"change\", () => toggleRowSelected(it.id, cb.checked));\n tdSel.appendChild(cb);\n\n const tdId = document.createElement(\"td\");\n tdId.textContent = String(it.id);\n\n const tdU = document.createElement(\"td\");\n tdU.className = \"cell-pre\";\n tdU.textContent = it.user;\n\n const tdA = document.createElement(\"td\");\n tdA.className = \"cell-pre\";\n tdA.textContent = it.assistant;\n\n const tdAct = document.createElement(\"td\");\n const act = document.createElement(\"div\");\n act.className = \"actions\";\n\n const bEdit = document.createElement(\"button\");\n bEdit.className = \"smallbtn\";\n bEdit.textContent = \"Edit\";\n bEdit.addEventListener(\"click\", () => setSelected(it.id));\n\n const bDel = document.createElement(\"button\");\n bDel.className = \"smallbtn\";\n bDel.textContent = \"Delete\";\n bDel.addEventListener(\"click\", () => {\n if (!confirm(\"Delete this example?\")) return;\n deleteOne(it.id);\n save();\n render();\n showMsg(\"Deleted.\");\n });\n\n act.appendChild(bEdit);\n act.appendChild(bDel);\n tdAct.appendChild(act);\n\n tr.appendChild(tdSel);\n tr.appendChild(tdId);\n tr.appendChild(tdU);\n tr.appendChild(tdA);\n tr.appendChild(tdAct);\n\n rows.appendChild(tr);\n }\n\n $(\"btnDeleteSelected\").disabled = state.selectedRowIds.size === 0;\n }\n\n function bind() {\n $(\"btnAdd\").addEventListener(\"click\", () => {\n const ok = addItem($(\"userPrompt\").value, $(\"assistantAnswer\").value);\n if (!ok) return showMsg(\"Both fields are required.\");\n clearForm();\n save();\n render();\n showMsg(\"Added.\");\n });\n\n $(\"btnUpdate\").addEventListener(\"click\", () => {\n const ok = updateSelected($(\"userPrompt\").value, $(\"assistantAnswer\").value);\n if (!ok) return showMsg(\"Select an item and complete both fields.\");\n clearForm();\n save();\n render();\n showMsg(\"Updated.\");\n });\n\n $(\"btnClearForm\").addEventListener(\"click\", () => clearForm());\n\n $(\"btnBulkParse\").addEventListener(\"click\", () => {\n const pairs = parseBulk($(\"bulkInput\").value);\n if (!pairs.length) return showMsg(\"No pairs detected.\");\n let added = 0;\n for (const p of pairs) if (addItem(p.user, p.assistant)) added++;\n save();\n render();\n showMsg(`Imported ${added} example(s).`);\n });\n\n $(\"btnBulkClear\").addEventListener(\"click\", () => ($(\"bulkInput\").value = \"\"));\n\n $(\"btnExport\").addEventListener(\"click\", () => {\n if (!state.items.length) return showMsg(\"No examples to export.\");\n const out = buildMessagesJSONL();\n downloadText(`jacai_train_messages_${nowStamp()}.jsonl`, out, \"application\/x-ndjson;charset=utf-8\");\n showMsg(\"Downloaded JSONL (messages).\");\n });\n\n $(\"btnExportRaw\").addEventListener(\"click\", () => {\n if (!state.items.length) return showMsg(\"No examples to export.\");\n const out = buildPromptCompletionJSONL();\n downloadText(`jacai_train_prompt_completion_${nowStamp()}.jsonl`, out, \"application\/x-ndjson;charset=utf-8\");\n showMsg(\"Downloaded JSONL (prompt\/completion).\");\n });\n\n $(\"btnExportBackup\").addEventListener(\"click\", () => exportBackupJSON());\n\n $(\"btnReset\").addEventListener(\"click\", () => resetAll());\n\n $(\"btnDeleteSelected\").addEventListener(\"click\", () => deleteSelectedRows());\n\n $(\"search\").addEventListener(\"input\", () => render());\n\n \/\/ auto-save system prompt & toggles\n [\"systemPrompt\", \"includeSystemPrompt\", \"prettyJsonl\"].forEach((id) => {\n $(id).addEventListener(\"input\", () => {\n save();\n render();\n });\n $(id).addEventListener(\"change\", () => {\n save();\n render();\n });\n });\n\n $(\"btnImport\").addEventListener(\"click\", async () => {\n const file = $(\"fileImport\").files?.[0];\n if (!file) return showMsg(\"Choose a file first.\");\n await importJSONLFile(file);\n save();\n });\n }\n\n \/\/ init\n load();\n $(\"systemPrompt\").value = state.systemPrompt || \"\";\n $(\"includeSystemPrompt\").checked = state.includeSystemPrompt !== false;\n $(\"prettyJsonl\").checked = !!state.prettyJsonl;\n $(\"btnUpdate\").disabled = true;\n\n bind();\n render();\n save();\n})();\n<\/code><\/pre>\n\n\n\n
\n\n\n\nHow to use<\/h2>\n\n\n\n
\n
\/training-builder\/<\/code><\/li>\n\n\n\nindex.html<\/code> in a browser<\/li>\n\n\n\nexplainer video<\/h4>\n\n\n\n