File size: 18,294 Bytes

36c78b1

<!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>&lambda; Weights</h2>
        <form id="lambdaForm">
            &lambda;<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>
            &lambda;<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>
            &lambda;<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 &amp; 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>