|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<title>Bit Transformer Dashboard</title> |
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
</head> |
|
|
<body> |
|
|
<h1>Bit Transformer Dashboard</h1> |
|
|
<div class="container"> |
|
|
<section> |
|
|
<h2>Initialize Model</h2> |
|
|
<form id="initForm"> |
|
|
d_model: <input type="number" name="d_model" value="{{ defaults.d_model }}" title="Model width (default {{ defaults.d_model }})"><br> |
|
|
nhead: <input type="number" name="nhead" value="{{ defaults.nhead }}" title="Attention heads (default {{ defaults.nhead }})"><br> |
|
|
num_layers: <input type="number" name="num_layers" value="{{ defaults.num_layers }}" title="Transformer layers (default {{ defaults.num_layers }})"><br> |
|
|
dim_feedforward: <input type="number" name="dim_feedforward" value="{{ defaults.dim_feedforward }}" title="Feedforward dim (default {{ defaults.dim_feedforward }})"><br> |
|
|
max_seq_len: <input type="number" name="max_seq_len" value="{{ defaults.max_seq_len }}" title="Max sequence length (default {{ defaults.max_seq_len }})"><br> |
|
|
chunk_size: <input type="number" name="chunk_size" title="Chunked attention size"><br> |
|
|
overlap: <input type="number" name="overlap" value="{{ defaults.overlap }}" title="Sliding window overlap"><br> |
|
|
Reversible: <input type="checkbox" name="reversible" id="reversible_box" title="Use reversible layers (default {{ defaults.reversible }})"><br> |
|
|
Gradient Checkpointing: <input type="checkbox" name="use_checkpoint" id="checkpoint_box" checked title="Enable gradient checkpointing (default {{ defaults.use_checkpoint }})"><br> |
|
|
act_threshold: <input type="number" step="0.01" name="act_threshold" value="{{ defaults.act_threshold }}" title="ACT halt threshold (default {{ defaults.act_threshold }})"><br> |
|
|
c_floor: <input type="number" step="0.01" name="c_floor" value="{{ c_floor }}" title="Complexity floor"><br> |
|
|
s_floor: <input type="number" step="0.01" name="s_floor" value="{{ s_floor }}" title="Symbiosis floor"><br> |
|
|
<button type="submit">Init</button> |
|
|
</form> |
|
|
</section> |
|
|
<section> |
|
|
<h2>Train Step</h2> |
|
|
<form id="trainForm"> |
|
|
Bits (e.g. 0 1 0 1): <input type="text" name="bits" value="0 1 0 1"><br> |
|
|
Upload file: <input type="file" id="train_file"><br> |
|
|
<button type="submit">Train</button> |
|
|
</form> |
|
|
<label>Load sample dataset: |
|
|
<select id="datasetSelect"> |
|
|
<option value="">--Select--</option> |
|
|
<option value="wikitext2_train">Wikitext-2 (train)</option> |
|
|
<option value="wikitext2_validation">Wikitext-2 (validation)</option> |
|
|
</select> |
|
|
</label> |
|
|
<p id="trainOut"></p> |
|
|
</section> |
|
|
<section> |
|
|
<h2>Scale Up</h2> |
|
|
Width Mult: <input type="number" step="0.1" id="width_mult" value="1.0"><br> |
|
|
<button id="scaleBtn">Scale Model</button> |
|
|
</section> |
|
|
<section> |
|
|
<h2>Collapse Submodel</h2> |
|
|
<form id="collapseForm"> |
|
|
Cluster Bits (JSON array of arrays):<br> |
|
|
<textarea name="clusters" rows="3" cols="40">[[0,1,0,1],[1,1,0,0]]</textarea><br> |
|
|
Target Params (JSON):<br> |
|
|
<textarea name="params" rows="3" cols="40">{"d_model":32,"nhead":4,"num_layers":1,"dim_feedforward":64,"max_seq_len":16}</textarea><br> |
|
|
Width Scale: <input type="number" step="0.1" id="width_scale" value="1.0"><br> |
|
|
<button type="submit">Collapse</button> |
|
|
</form> |
|
|
</section> |
|
|
<section> |
|
|
<h2>Inference</h2> |
|
|
<form id="inferForm"> |
|
|
Bits: <input type="text" name="bits" value="0 1 0 1"><br> |
|
|
Upload file: <input type="file" id="infer_file"><br> |
|
|
<button type="submit">Infer</button> |
|
|
</form> |
|
|
<pre id="inferOut"></pre> |
|
|
</section> |
|
|
<section> |
|
|
<h2>Long Inference</h2> |
|
|
<form id="inferLongForm"> |
|
|
Bits: <input type="text" name="bits" value="0 1 0 1"><br> |
|
|
ctx_bits: <input type="number" name="ctx_bits" value="4096"><br> |
|
|
overlap: <input type="number" name="overlap" value="256"><br> |
|
|
<button type="submit">Infer Long</button> |
|
|
</form> |
|
|
<pre id="inferLongOut"></pre> |
|
|
</section> |
|
|
<section> |
|
|
<h2>Text Inference</h2> |
|
|
<form id="textInferForm"> |
|
|
Text: <input type="text" name="text" value="hello"><br> |
|
|
<button type="submit">Infer Text</button> |
|
|
</form> |
|
|
<pre id="textInferOut"></pre> |
|
|
</section> |
|
|
<section> |
|
|
<h2>λ Weights</h2> |
|
|
<form id="lambdaForm"> |
|
|
λ<sub>K</sub>: <input type="range" min="0" max="2" step="0.1" id="lambda_K" oninput="lambda_K_val.innerText=value"><span id="lambda_K_val"></span><br> |
|
|
λ<sub>C</sub>: <input type="range" min="0" max="2" step="0.1" id="lambda_C" oninput="lambda_C_val.innerText=value"><span id="lambda_C_val"></span><br> |
|
|
λ<sub>S</sub>: <input type="range" min="0" max="2" step="0.1" id="lambda_S" oninput="lambda_S_val.innerText=value"><span id="lambda_S_val"></span><br> |
|
|
<button type="submit">Update</button> |
|
|
</form> |
|
|
</section> |
|
|
<section> |
|
|
<h2>Diffusion LM</h2> |
|
|
<label><input type="checkbox" id="diffusion_box"> Enable Diffusion Mode</label> |
|
|
</section> |
|
|
<section> |
|
|
<h2>GPU Acceleration</h2> |
|
|
<label><input type="checkbox" id="gpu_box"> Enable FSDP & CUDA</label> |
|
|
</section> |
|
|
<section> |
|
|
<h2>Enable Compression</h2> |
|
|
<label><input type="checkbox" id="compression_box"> Compress I/O</label> |
|
|
<p>Ratio: <span id="comp_ratio">1.0</span></p> |
|
|
</section> |
|
|
<section> |
|
|
<h2>Quantization Aware Training</h2> |
|
|
<label><input type="checkbox" id="qat_box"> Enable 4-bit QAT</label> |
|
|
</section> |
|
|
<section> |
|
|
<h2>Model Status</h2> |
|
|
<pre id="statusOut"></pre> |
|
|
</section> |
|
|
<section> |
|
|
<h2>Telemetry</h2> |
|
|
<canvas id="metricChart" width="600" height="300"></canvas> |
|
|
</section> |
|
|
<section> |
|
|
<h2>Hugging Face Checkpoints</h2> |
|
|
Repo ID: <input type="text" id="hf_repo"><br> |
|
|
Token: <input type="password" id="hf_token" placeholder="optional"><br> |
|
|
<button id="uploadBtn">Upload weights</button> |
|
|
<button id="downloadBtn">Download weights</button> |
|
|
<p id="hfStatus"></p> |
|
|
</section> |
|
|
|
|
|
<script> |
|
|
async function postJSON(url, data){ |
|
|
const resp = await fetch(url, {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(data)}); |
|
|
return resp.json(); |
|
|
} |
|
|
|
|
|
async function pollJob(id){ |
|
|
while(true){ |
|
|
const job = await fetch(`/job/${id}`).then(r=>r.json()); |
|
|
if(job.status === 'completed') return job.result; |
|
|
if(job.status === 'error') throw job.error || 'Job failed'; |
|
|
await new Promise(r=>setTimeout(r, 1000)); |
|
|
} |
|
|
} |
|
|
|
|
|
function loadInitParams(){ |
|
|
const saved = JSON.parse(localStorage.getItem('init_params')||'{}'); |
|
|
const form = document.getElementById('initForm'); |
|
|
for(const [k,v] of Object.entries(saved)){ |
|
|
const el = form.elements[k]; |
|
|
if(!el) continue; |
|
|
if(el.type === 'checkbox') el.checked = v; else el.value = v; |
|
|
} |
|
|
} |
|
|
loadInitParams(); |
|
|
|
|
|
function byteArrayToBits(arr){ |
|
|
const bits=[]; |
|
|
for(const b of arr){ |
|
|
for(let i=7;i>=0;i--) bits.push((b>>i)&1); |
|
|
} |
|
|
return bits; |
|
|
} |
|
|
|
|
|
let trainFileBits=null, inferFileBits=null, datasetBits=null; |
|
|
|
|
|
async function fileToBits(file){ |
|
|
if(file.type.startsWith('text')){ |
|
|
const text = await file.text(); |
|
|
const res = await postJSON('/text_to_bits', {text}); |
|
|
return res.bits; |
|
|
} |
|
|
const buf = await file.arrayBuffer(); |
|
|
return byteArrayToBits(new Uint8Array(buf)); |
|
|
} |
|
|
|
|
|
let metricChart; |
|
|
async function initChart(){ |
|
|
const data = await fetch('/metrics').then(r=>r.json()); |
|
|
const labels = data.negentropy.map((_,i)=>i); |
|
|
const ctx = document.getElementById('metricChart').getContext('2d'); |
|
|
metricChart = new Chart(ctx, { |
|
|
type:'line', |
|
|
data:{ |
|
|
labels:labels, |
|
|
datasets:[ |
|
|
{label:'Negentropy', data:data.negentropy, borderColor:'blue', fill:false}, |
|
|
{label:'LZ Complexity', data:data.lz_complexity, borderColor:'orange', fill:false}, |
|
|
{label:'Symbiosis', data:data.symbiosis, borderColor:'green', fill:false} |
|
|
] |
|
|
}, |
|
|
options:{responsive:false, interaction:{mode:'index', intersect:false}} |
|
|
}); |
|
|
} |
|
|
|
|
|
async function updateChart(){ |
|
|
const data = await fetch('/metrics').then(r=>r.json()); |
|
|
const labels = data.negentropy.map((_,i)=>i); |
|
|
metricChart.data.labels = labels; |
|
|
metricChart.data.datasets[0].data = data.negentropy; |
|
|
metricChart.data.datasets[1].data = data.lz_complexity; |
|
|
metricChart.data.datasets[2].data = data.symbiosis; |
|
|
metricChart.update(); |
|
|
} |
|
|
|
|
|
initChart(); |
|
|
setInterval(updateChart, 2000); |
|
|
|
|
|
async function refreshStatus(){ |
|
|
const [s, c] = await Promise.all([fetch('/status'), fetch('/model_config')]); |
|
|
const status = await s.json(); |
|
|
const config = await c.json(); |
|
|
document.getElementById('statusOut').innerText = JSON.stringify({...status, ...config}, null, 2); |
|
|
} |
|
|
|
|
|
document.getElementById('initForm').addEventListener('submit', async (e)=>{ |
|
|
e.preventDefault(); |
|
|
const fd = new FormData(e.target); |
|
|
const obj = Object.fromEntries(fd.entries()); |
|
|
const ints = ['d_model','nhead','num_layers','dim_feedforward','max_seq_len','chunk_size','overlap']; |
|
|
ints.forEach(k=>{ if(obj[k]===''){ delete obj[k]; } else obj[k]=parseInt(obj[k]); }); |
|
|
obj.reversible = document.getElementById('reversible_box').checked; |
|
|
obj.use_checkpoint = document.getElementById('checkpoint_box').checked; |
|
|
obj.act_threshold = parseFloat(obj.act_threshold); |
|
|
const floors = {c_floor: parseFloat(obj.c_floor), s_floor: parseFloat(obj.s_floor)}; |
|
|
delete obj.c_floor; delete obj.s_floor; |
|
|
await postJSON('/init', obj); |
|
|
await postJSON('/config/telemetry', floors); |
|
|
localStorage.setItem('init_params', JSON.stringify({...obj, ...floors})); |
|
|
refreshStatus(); |
|
|
updateChart(); |
|
|
}); |
|
|
|
|
|
document.getElementById('trainForm').addEventListener('submit', async (e)=>{ |
|
|
e.preventDefault(); |
|
|
const form = e.target; |
|
|
let payload; |
|
|
if(trainFileBits){ |
|
|
payload = trainFileBits; |
|
|
} else if(datasetBits){ |
|
|
payload = datasetBits; |
|
|
} else { |
|
|
payload = [form.bits.value.trim().split(/\s+/).map(Number)]; |
|
|
} |
|
|
for(const el of form.elements) el.disabled = true; |
|
|
const out = document.getElementById('trainOut'); |
|
|
out.innerText = '⏳'; |
|
|
try{ |
|
|
const job = await postJSON('/train', {bits: payload}); |
|
|
const res = await pollJob(job.job_id); |
|
|
out.innerText = 'Loss: '+res.loss.toFixed(4); |
|
|
if(res.ratio !== undefined){ |
|
|
document.getElementById('comp_ratio').innerText = res.ratio.toFixed(2); |
|
|
} |
|
|
} catch(err){ |
|
|
out.innerText = 'Error'; |
|
|
alert(err); |
|
|
} finally { |
|
|
for(const el of form.elements) el.disabled = false; |
|
|
refreshStatus(); |
|
|
updateChart(); |
|
|
} |
|
|
}); |
|
|
|
|
|
document.getElementById('train_file').addEventListener('change', async (e)=>{ |
|
|
const f = e.target.files[0]; |
|
|
if(!f) return; |
|
|
const bits = await fileToBits(f); |
|
|
trainFileBits = [bits]; |
|
|
datasetBits = null; |
|
|
document.querySelector('#trainForm input[name="bits"]').value = bits.slice(0,64).join(' '); |
|
|
}); |
|
|
|
|
|
document.querySelector('#trainForm input[name="bits"]').addEventListener('input', ()=>{ |
|
|
trainFileBits = null; |
|
|
datasetBits = null; |
|
|
}); |
|
|
|
|
|
document.getElementById('scaleBtn').addEventListener('click', async ()=>{ |
|
|
const btn = document.getElementById('scaleBtn'); |
|
|
const input = document.getElementById('width_mult'); |
|
|
const mult = parseFloat(input.value); |
|
|
btn.disabled = true; input.disabled = true; |
|
|
const original = btn.innerText; btn.innerText = '⏳'; |
|
|
try{ |
|
|
const job = await postJSON('/scale_up', {width_mult: mult}); |
|
|
await pollJob(job.job_id); |
|
|
} catch(err){ |
|
|
alert(err); |
|
|
} finally { |
|
|
btn.innerText = original; |
|
|
btn.disabled = false; input.disabled = false; |
|
|
refreshStatus(); |
|
|
updateChart(); |
|
|
} |
|
|
}); |
|
|
|
|
|
document.getElementById('collapseForm').addEventListener('submit', async (e)=>{ |
|
|
e.preventDefault(); |
|
|
const form = e.target; |
|
|
const btn = form.querySelector('button'); |
|
|
for(const el of form.elements) el.disabled = true; |
|
|
const clusters = JSON.parse(form.clusters.value); |
|
|
const params = JSON.parse(form.params.value); |
|
|
const w = parseFloat(document.getElementById('width_scale').value); |
|
|
const original = btn.innerText; btn.innerText = '⏳'; |
|
|
try{ |
|
|
const job = await postJSON('/collapse', {clusters: clusters, params: params, width_scale: w}); |
|
|
await pollJob(job.job_id); |
|
|
} catch(err){ |
|
|
alert(err); |
|
|
} finally { |
|
|
btn.innerText = original; |
|
|
for(const el of form.elements) el.disabled = false; |
|
|
refreshStatus(); |
|
|
updateChart(); |
|
|
} |
|
|
}); |
|
|
|
|
|
document.getElementById('inferForm').addEventListener('submit', async (e)=>{ |
|
|
e.preventDefault(); |
|
|
let bits; |
|
|
if(inferFileBits){ |
|
|
bits = inferFileBits; |
|
|
} else if(datasetBits){ |
|
|
bits = [datasetBits[0]]; |
|
|
} else { |
|
|
bits = [e.target.bits.value.trim().split(/\s+/).map(Number)]; |
|
|
} |
|
|
const res = await postJSON('/infer', {bits}); |
|
|
if(res.error){ |
|
|
alert(res.error + '\n' + (res.suggestion||'')); |
|
|
} else { |
|
|
document.getElementById('inferOut').innerText = JSON.stringify(res, null, 2); |
|
|
if(res.ratio !== undefined){ |
|
|
document.getElementById('comp_ratio').innerText = res.ratio.toFixed(2); |
|
|
} |
|
|
} |
|
|
refreshStatus(); |
|
|
updateChart(); |
|
|
}); |
|
|
|
|
|
document.getElementById('infer_file').addEventListener('change', async (e)=>{ |
|
|
const f = e.target.files[0]; |
|
|
if(!f) return; |
|
|
const bits = await fileToBits(f); |
|
|
inferFileBits = [bits]; |
|
|
datasetBits = null; |
|
|
document.querySelector('#inferForm input[name="bits"]').value = bits.slice(0,64).join(' '); |
|
|
}); |
|
|
|
|
|
document.querySelector('#inferForm input[name="bits"]').addEventListener('input', ()=>{ |
|
|
inferFileBits = null; |
|
|
datasetBits = null; |
|
|
}); |
|
|
|
|
|
document.getElementById('datasetSelect').addEventListener('change', async (e)=>{ |
|
|
const val = e.target.value; |
|
|
trainFileBits = null; |
|
|
inferFileBits = null; |
|
|
if(!val){ datasetBits = null; return; } |
|
|
const [name, split] = val.split('_'); |
|
|
const resp = await fetch(`/dataset?name=${name}&split=${split}&size=4&seq_len=64`); |
|
|
const data = await resp.json(); |
|
|
datasetBits = data.bits; |
|
|
const preview = data.bits[0].slice(0,64).join(' '); |
|
|
document.querySelector('#trainForm input[name="bits"]').value = preview; |
|
|
document.querySelector('#inferForm input[name="bits"]').value = preview; |
|
|
}); |
|
|
|
|
|
document.getElementById('inferLongForm').addEventListener('submit', async (e)=>{ |
|
|
e.preventDefault(); |
|
|
const bits = e.target.bits.value.trim().split(/\s+/).map(Number); |
|
|
const ctx = parseInt(e.target.ctx_bits.value); |
|
|
const ov = parseInt(e.target.overlap.value); |
|
|
const res = await postJSON('/infer_long', {bits: bits, ctx_bits: ctx, overlap: ov}); |
|
|
document.getElementById('inferLongOut').innerText = JSON.stringify(res, null, 2); |
|
|
refreshStatus(); |
|
|
updateChart(); |
|
|
}); |
|
|
|
|
|
document.getElementById('textInferForm').addEventListener('submit', async (e)=>{ |
|
|
e.preventDefault(); |
|
|
const text = e.target.text.value; |
|
|
const res = await postJSON('/infer_text', {text:text}); |
|
|
document.getElementById('textInferOut').innerText = JSON.stringify(res, null, 2); |
|
|
refreshStatus(); |
|
|
updateChart(); |
|
|
}); |
|
|
|
|
|
async function loadLambdas(){ |
|
|
const resp = await fetch('/lambdas'); |
|
|
const vals = await resp.json(); |
|
|
for(const k of ['lambda_K','lambda_C','lambda_S']){ |
|
|
document.getElementById(k).value = vals[k]; |
|
|
document.getElementById(k+"_val").innerText = vals[k]; |
|
|
} |
|
|
} |
|
|
|
|
|
document.getElementById('lambdaForm').addEventListener('submit', async (e)=>{ |
|
|
e.preventDefault(); |
|
|
const data = { |
|
|
lambda_K: parseFloat(document.getElementById('lambda_K').value), |
|
|
lambda_C: parseFloat(document.getElementById('lambda_C').value), |
|
|
lambda_S: parseFloat(document.getElementById('lambda_S').value), |
|
|
}; |
|
|
await postJSON('/lambdas', data); |
|
|
for(const k in data){ |
|
|
document.getElementById(k+"_val").innerText = data[k]; |
|
|
} |
|
|
refreshStatus(); |
|
|
}); |
|
|
|
|
|
loadLambdas(); |
|
|
|
|
|
function restoreToggle(id,key,endpoint,field){ |
|
|
const box = document.getElementById(id); |
|
|
const saved = localStorage.getItem(key); |
|
|
if(saved !== null){ box.checked = saved === 'true'; postJSON(endpoint,{[field]: box.checked}); } |
|
|
box.addEventListener('change', async (e)=>{ |
|
|
await postJSON(endpoint, {[field]: e.target.checked}); |
|
|
localStorage.setItem(key, e.target.checked); |
|
|
refreshStatus(); |
|
|
}); |
|
|
} |
|
|
|
|
|
restoreToggle('diffusion_box','diffusion','/diffusion','diffusion'); |
|
|
restoreToggle('gpu_box','use_gpu','/gpu','use_gpu'); |
|
|
restoreToggle('compression_box','compression','/compression','compression'); |
|
|
restoreToggle('qat_box','qat','/qat','qat'); |
|
|
|
|
|
document.getElementById('uploadBtn').addEventListener('click', async ()=>{ |
|
|
const repo = document.getElementById('hf_repo').value; |
|
|
const token = document.getElementById('hf_token').value; |
|
|
const res = await postJSON('/save_checkpoint', {repo_id: repo, token: token||undefined}); |
|
|
document.getElementById('hfStatus').innerText = res.status || res.error; |
|
|
}); |
|
|
|
|
|
document.getElementById('downloadBtn').addEventListener('click', async ()=>{ |
|
|
const repo = document.getElementById('hf_repo').value; |
|
|
const token = document.getElementById('hf_token').value; |
|
|
const res = await postJSON('/download_checkpoint', {repo_id: repo, token: token||undefined}); |
|
|
document.getElementById('hfStatus').innerText = res.status || res.error; |
|
|
refreshStatus(); |
|
|
updateChart(); |
|
|
}); |
|
|
|
|
|
refreshStatus(); |
|
|
</script> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
|
|
|
|
|
|
