Revise paste COmpREss.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>21-bit Converter + Disambiguated Reverse</title>
  <style>
    body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial; margin: 24px; color:#111; }
    h1 { margin-bottom: 8px; font-size: 20px; }
    .card { border:1px solid #e1e4e8; border-radius:8px; padding:16px; max-width:880px; background:#fff; }
    label { display:block; margin-bottom:8px; font-weight:600; }
    input[type="text"], input[type="number"] { padding:10px 12px; font-size:16px; border:1px solid #cbd5e1; border-radius:6px; box-sizing:border-box; }
    input#bits { width:100%; }
    button { margin-top:12px; padding:8px 12px; font-size:15px; border-radius:6px; border:0; background:#0366d6; color:#fff; cursor:pointer; }
    button.secondary { background:#6b7280; }
    .error { color:#b91c1c; margin-top:8px; }
    pre { background:#f6f8fa; padding:12px; border-radius:6px; overflow:auto; font-size:13px; }
    .steps { margin-top:12px; }
    .result { margin-top:10px; font-weight:700; }
    .small { font-size:13px; color:#374151; }
    .row { display:flex; gap:8px; align-items:center; margin-top:8px; flex-wrap:wrap; }
    .ok { color:#15803d; } .bad { color:#b91c1c; }
    .note { background:#fff7ed; border:1px solid #fdba74; border-radius:6px; padding:10px 12px; font-size:13px; margin-top:12px; }
  </style>
</head>
<body>
  <div class="card">
    <h1>21-bit Converter + disambiguated reverse</h1>
    <div class="small">Forward: start at 2 or 3 (bit 0), then ×2 (bit 0) or ×2−1 (bit 1) for the other 20 bits, subtract 1,048,576.
      Reverse: parity-invert. When the value is 2 the start is certain (stop). When it is 3 it is ambiguous — could be the
      real start or an intermediate 3 that came from 2 — so one disambiguation bit says stop or continue. With that bit the
      reverse is always correct.</div>

<label for="bits" style="margin-top:12px">Bits (exactly 21)</label>
    <input id="bits" type="text" placeholder="e.g. 010101001110000111000" maxlength="21" />
    <div class="row">
      <button id="compute">Compute + reverse</button>
      <button id="random" class="secondary">Random</button>
      <button id="example" class="secondary">Fill Example</button>
    </div>

<div style="margin-top:14px;">
      <label for="count">Run random trials (count)</label>
      <div class="row">
        <input id="count" type="number" min="1" max="2000000" value="100000" style="width:140px;" />
        <button id="runTests">Run trials</button>
      </div>
    </div>

<div class="note">The disambiguation bit is charged only when the value passes through 3: about a quarter of inputs
      need zero, about three quarters need one. The reverse is now correct on every input; the trials show what that
      correctness costs on average, on top of the 21 input bits.</div>
  </div>

function validateBits(s){ if(!s) return 'Input is empty'; if(s.length!==21) return 'Input must be exactly 21 bits'; if(!/^[01]{21}$/.test(s)) return 'Input must contain only 0 and 1'; return ''; }

// Forward — unchanged from your method.
    function forward(bitString){
      const bits = bitString.split('').map(b => b==='1'?1:0);
      let value = bits[0]===0 ? 2n : 3n;
      for(let i=1;i<bits.length;i++){ value = bits[i]===0 ? value*2n : value*2n - 1n; }
      return { before: value, after: value - SUBTRACT };
    }

// Encoder side: the disambiguation bits for an input (simulate the true 20-step reverse).
    function disambigBits(bitString){
      let v = Number(forward(bitString).before); const dis = [];
      for(let step=0; step<20; step++){ if(v===3) dis.push('1'); v = (v%2===0) ? v/2 : (v+1)/2; }
      if(v===3) dis.push('0');   // terminal start is 3 -> stop
      return dis.join('');
    }

// Decoder: parity-invert V, reading a disambiguation bit at each 3 (0 stop, 1 continue). Value 2 is an unambiguous start.
    function decode(Vnum, dis){
      let v=Vnum, out=[], di=0, steps=0, start=null;
      while(steps<200){
        if(v===2){ start='0'; break; }
        if(v===3){ const d=dis[di++]; if(d==='0'){ start='1'; break; } }
        if(v%2===0){ out.push('0'); v=v/2; } else { out.push('1'); v=(v+1)/2; }
        steps++;
      }
      if(start===null) return null;
      return start + out.reverse().join('');
    }

$('compute').addEventListener('click', () => {
      errorEl.textContent=''; outputEl.innerHTML='';
      const s = bitsInput.value.trim(); const v = validateBits(s);
      if(v){ errorEl.textContent=v; return; }
      const f = forward(s);
      const dis = disambigBits(s);
      const rec = decode(Number(f.before), dis);
      const match = rec===s;
      let html='';
      html += `<div class="result">Value before subtracting: ${f.before.toString()}</div>`;
      html += `<div class="result">Final output: ${f.after.toString()}</div>`;
      html += `<div class="result">Disambiguation bits: <strong>${dis===''?'(none)':dis}</strong> (${dis.length})</div>`;
      html += `<div class="result">Reverse: <span class="${match?'ok':'bad'}">${rec===null?'no valid start':rec}</span></div>`;
      html += `<div class="small">${match ? '<span class="ok">matches the input exactly</span>' : '<span class="bad">does NOT match</span>'}` +
              `  ·  total carried = 21 input bits + ${dis.length} disambiguation = ${21+dis.length} bits</div>`;
      outputEl.innerHTML = html;
    });

$('example').addEventListener('click', () => { bitsInput.value='010101001110000111000'; errorEl.textContent=''; outputEl.innerHTML=''; });
    function randomBits21(){ let s=''; for(let i=0;i<21;i++) s += (Math.random()<0.5?'0':'1'); return s; }
    $('random').addEventListener('click', () => { bitsInput.value=randomBits21(); $('compute').click(); });

$('runTests').addEventListener('click', () => {
      errorEl.textContent=''; outputEl.innerHTML='';
      const count = Math.max(1, Math.min(2000000, Number(countInput.value)||100000));
      let correct=0, wrong=0, sumDis=0, n0=0, n1=0; const dist={};
      for(let i=0;i<count;i++){
        const s = randomBits21();
        const dis = disambigBits(s);
        const rec = decode(Number(forward(s).before), dis);
        if(rec===s) correct++; else wrong++;
        sumDis += dis.length; dist[dis.length]=(dist[dis.length]||0)+1;
        for(const c of dis){ if(c==='0') n0++; else n1++; }
      }
      const avgDis = sumDis/count;
      const present=n0+n1, p0=present?n0/present:0, p1=present?n1/present:0;
      const H = (p0>0&&p1>0) ? -(p0*Math.log2(p0)+p1*Math.log2(p1)) : 0;
      const acDis = (present/count)*H;
      let html = '<div class="small"><strong>Trial statistics (disambiguated reverse)</strong></div><pre>';
      html += `Trials:                  ${count}\n`;
      html += `Reversed CORRECTLY:      ${correct}  (${(100*correct/count).toFixed(2)}%)\n`;
      html += `Reversed wrong:          ${wrong}\n`;
      html += `Avg disambiguation bits: ${avgDis.toFixed(4)}  per input\n`;
      html += `Avg TOTAL carried:       ${(21+avgDis).toFixed(4)} bits   (21 input + disambiguation)\n`;
      html += `Disambig bit bias:       ${(100*p0).toFixed(1)}% stop, ${(100*p1).toFixed(1)}% continue  (entropy ${H.toFixed(4)} per bit)\n`;
      html += `With arithmetic coding:  ${acDis.toFixed(4)} disambig/input  ->  total ${(21+acDis).toFixed(4)} bits\n`;
      html += `Disambig distribution:   ${Object.keys(dist).sort((a,b)=>a-b).map(k=>k+' bit'+(k==1?'':'s')+': '+dist[k]).join('   ')}\n`;
      html += '</pre>';
      html += `<div class="small">Arithmetic coding does compress the disambiguation bits — they are biased, so their entropy is below one bit — but the total still lands above 21, never under. A reversible encoding of 21 uniform bits cannot average below 21.</div>`;
      outputEl.innerHTML = html;
    });

bitsInput.addEventListener('keydown', e => { if(e.key==='Enter') $('compute').click(); });
  </script>
</body>
</html>