Entangle / index.html
gaialive's picture
Update index.html
408a1e3 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Entanglement Reference Sheet — E(Δ) = −V·cos Δ</title>
<style>
:root{--bg:#0b1220;--card:#0f172a;--ink:#e5e7eb;--muted:#94a3b8;--accent:#22d3ee;--ok:#34d399;--warn:#f59e0b;--err:#ef4444;}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,Arial;background:linear-gradient(180deg,#050a16,#0b1220);color:var(--ink)}
header{padding:22px 16px;text-align:center}
header h1{margin:0;font-size:1.4rem}
header p{margin:6px 0 0;color:var(--muted)}
main{max-width:1100px;margin:0 auto;padding:16px;display:grid;gap:16px}
@media(min-width:960px){main{grid-template-columns:360px 1fr}}
.card{background:var(--card);border:1px solid #1f2937;border-radius:16px;padding:16px}
h2{margin:0 0 10px;font-size:1.05rem}
label{display:block;margin:10px 0 4px;color:var(--muted)}
input[type=range]{width:100%}
input[type=number]{width:100%;padding:8px;border-radius:8px;border:1px solid #1f2937;background:#0a1220;color:var(--ink)}
.row{display:flex;gap:10px;flex-wrap:wrap}
.pill{padding:6px 10px;border-radius:999px;background:#0a1220;border:1px solid #1f2937;color:var(--muted)}
.btn{background:#0a1727;border:1px solid #1f2937;color:var(--ink);padding:10px 12px;border-radius:10px;cursor:pointer}
.btn.primary{background:var(--accent);border-color:#0891b2;color:#001018;font-weight:700}
.kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kpi .box{background:#0a1220;border:1px solid #1f2937;border-radius:12px;padding:10px;text-align:center}
.val{font-size:1.05rem;font-weight:700;color:var(--accent)}
.small{font-size:.9rem;color:var(--muted)}
canvas{width:100%;height:240px;background:#07101d;border:1px solid #1f2937;border-radius:12px}
.ok{color:var(--ok)} .warn{color:var(--warn)} .err{color:var(--err)}
table{width:100%;border-collapse:collapse}
th,td{border:1px solid #1f2937;padding:8px;text-align:center}
th{background:#0a1220;color:#cbd5e1}
footer{color:var(--muted);text-align:center;margin:18px 0}
code{background:#091324;padding:2px 6px;border-radius:6px;border:1px solid #1f2937}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;border:1px solid #1f2937;margin-left:6px}
.badge.ok{background:rgba(52,211,153,0.15);color:var(--ok)}
.badge.warn{background:rgba(245,158,11,0.15);color:var(--warn)}
.badge.err{background:rgba(239,68,68,0.15);color:var(--err)}
</style>
</head>
<body>
<header>
<h1>Entanglement Reference Sheet — <code>E(Δ) = − V·cos Δ</code></h1>
<p>No-signaling + rotational symmetry + information causality → quantum (Tsirelson) correlations</p>
</header>
<main>
<!-- Controls -->
<section class="card">
<h2>🎛 Controls</h2>
<label>Visibility V (0…1): <span id="Vlab">1.00</span></label>
<input type="range" id="V" min="0" max="1" step="0.01" value="1">
<div class="row">
<div style="flex:1">
<label>A0 (°): <span id="A0lab">0.0</span></label>
<input type="range" id="A0" min="0" max="180" step="0.1" value="0">
</div>
<div style="flex:1">
<label>A1 (°): <span id="A1lab">45.0</span></label>
<input type="range" id="A1" min="0" max="180" step="0.1" value="45">
</div>
</div>
<div class="row">
<div style="flex:1">
<label>B0 (°): <span id="B0lab">22.5</span></label>
<input type="range" id="B0" min="0" max="180" step="0.1" value="22.5">
</div>
<div style="flex:1">
<label>B1 (°): <span id="B1lab">67.5</span></label>
<input type="range" id="B1" min="0" max="180" step="0.1" value="67.5">
</div>
</div>
<div class="row" style="margin-top:10px">
<button class="btn" id="setOpt">Set CHSH-optimal angles</button>
<button class="btn primary" id="recalc">Recalculate</button>
<span class="pill">Δ = <span id="DeltaLab">A0–B0 = 22.5°</span></span>
<span id="violBadge" class="badge warn">status</span>
</div>
<div class="kpi" style="margin-top:10px">
<div class="box">
<div class="small">Correlation E(A0,B0)</div>
<div id="E00" class="val"></div>
</div>
<div class="box">
<div class="small">S (CHSH)</div>
<div id="Sval" class="val"></div>
</div>
<div class="box">
<div class="small">CHSH game win prob</div>
<div id="pwin" class="val"></div>
</div>
</div>
<div class="row" style="margin-top:10px">
<span class="pill">Regime: <b id="regime"></b></span>
<span class="pill">Local ≤ 2 • Quantum ≤ 2√2 • PR = 4</span>
</div>
</section>
<!-- Results & Plots -->
<section class="card">
<h2>📊 Joint Distribution & Fisher Information</h2>
<div class="row">
<div style="flex:1">
<label>Single-pair angle Δ (°) for E & P(a,b): <span id="Dlab">22.5</span></label>
<input type="range" id="D" min="0" max="180" step="0.1" value="22.5">
</div>
<div style="width:180px">
<label>Δ direct input (°)</label>
<input type="number" id="Dnum" min="0" max="180" step="0.1" value="22.5">
</div>
</div>
<div class="kpi" style="margin-top:10px">
<div class="box">
<div class="small">E(Δ)</div>
<div id="Edelta" class="val"></div>
</div>
<div class="box">
<div class="small">Fisher 𝓕(Δ)</div>
<div id="Fdelta" class="val"></div>
</div>
<div class="box">
<div class="small">Max 𝓕 over Δ</div>
<div id="Fmax" class="val"></div>
</div>
</div>
<canvas id="bars"></canvas>
<div class="small">Bars show joint probabilities P(++), P(+−), P(−+), P(−−) with fair marginals (no-signaling). Computed via <code>P(a,b)=¼(1+a b·E)</code>. Marginals: P(a=+1)=<span id="PaPlus">0.5000</span>, P(b=+1)=<span id="PbPlus">0.5000</span>.</div>
</section>
<!-- Monogamy -->
<section class="card">
<h2>🔗 Monogamy Check (Toner–Verstraete)</h2>
<div class="row">
<div style="flex:1">
<label>Enter candidate S_AC</label>
<input type="number" id="SAC" value="2.0" min="0" max="4" step="0.01">
</div>
<div style="flex:1;display:flex;align-items:flex-end">
<button class="btn" id="monoCheck">Check S_AB² + S_AC² ≤ 8</button>
</div>
</div>
<div class="row" style="margin-top:10px">
<span class="pill">S_AB = <b id="SABpill"></b></span>
<span class="pill">S_AC = <b id="SACpill"></b></span>
<span class="pill">Sum = <b id="sumMono"></b></span>
<span class="pill">Status: <b id="monoStatus"></b></span>
</div>
</section>
<!-- Comparison -->
<section class="card">
<h2>📚 Comparison Table</h2>
<table>
<thead>
<tr><th>Model</th><th>Max CHSH S</th><th>Correlation form</th><th>Signaling?</th></tr>
</thead>
<tbody>
<tr><td>Local Hidden Variables</td><td>≤ 2</td><td>Piecewise linear</td><td>No</td></tr>
<tr><td>Quantum (this work)</td><td>≤ 2√2 ≈ 2.828</td><td><code>E(Δ)=−V cos Δ</code></td><td>No</td></tr>
<tr><td>PR-Box (supra-quantum)</td><td>4</td><td>±1 (discontinuous)</td><td>No</td></tr>
</tbody>
</table>
<p class="small" style="margin-top:8px">Information causality rules out PR-box correlations; rotational symmetry fixes the cosine form; maximum entropy selects the unique joint distribution.</p>
</section>
</main>
<footer>
Interactive reference for entanglement correlations • © 2026 Quantum Hub •
</footer>
<script>
const V = document.getElementById('V');
const Vlab = document.getElementById('Vlab');
const A0 = document.getElementById('A0'), A1 = document.getElementById('A1'),
B0 = document.getElementById('B0'), B1 = document.getElementById('B1');
const A0lab = document.getElementById('A0lab'), A1lab = document.getElementById('A1lab'),
B0lab = document.getElementById('B0lab'), B1lab = document.getElementById('B1lab');
const E00 = document.getElementById('E00'), Sval = document.getElementById('Sval'), pwin = document.getElementById('pwin');
const regime = document.getElementById('regime');
const DeltaLab = document.getElementById('DeltaLab');
const violBadge = document.getElementById('violBadge');
const D = document.getElementById('D'), Dnum = document.getElementById('Dnum');
const Dlab = document.getElementById('Dlab');
const Edelta = document.getElementById('Edelta'), Fdelta = document.getElementById('Fdelta'), Fmax = document.getElementById('Fmax');
const PaPlus = document.getElementById('PaPlus'), PbPlus = document.getElementById('PbPlus');
const bars = document.getElementById('bars');
const setOpt = document.getElementById('setOpt'), recalc = document.getElementById('recalc');
const SACin = document.getElementById('SAC'), SABpill = document.getElementById('SABpill'),
SACpill = document.getElementById('SACpill'), sumMono = document.getElementById('sumMono'), monoStatus = document.getElementById('monoStatus');
function deg2rad(x){ return x*Math.PI/180; }
function cosd(x){ return Math.cos(deg2rad(x)); }
function sind(x){ return Math.sin(deg2rad(x)); }
function wrap180(d){ return ((d % 180) + 180) % 180; }
// correlation law
function E_of(V, ddeg){ return - V * cosd(wrap180(ddeg)); }
// CHSH
function S_from(V, a0,a1,b0,b1){
const E00 = E_of(V, a0-b0);
const E01 = E_of(V, a0-b1);
const E10 = E_of(V, a1-b0);
const E11 = E_of(V, a1-b1);
const S = Math.abs(E00 + E01 + E10 - E11);
return {S,E00,E01,E10,E11};
}
// CHSH game win probability
function pwin_from_S(S){ return 0.5 + S/8; }
// joint distribution with fair marginals: P(a,b) = 1/4 (1 + a b E); here E = -V cos Δ
function joint_from_E(E){
const Ppp = 0.25*(1 + E);
const Ppm = 0.25*(1 - E);
const Pmp = 0.25*(1 - E);
const Pmm = 0.25*(1 + E);
return [Ppp,Ppm,Pmp,Pmm];
}
// draw bars
function drawBars(probs){
const ctx = bars.getContext('2d');
const w = bars.width = bars.clientWidth*2, h = bars.height = bars.clientHeight*2;
ctx.clearRect(0,0,w,h);
ctx.fillStyle="#0a1220"; ctx.fillRect(0,0,w,h);
ctx.strokeStyle="#1f2937"; ctx.strokeRect(0,0,w,h);
const labels = ["++","+−","−+","−−"];
const maxH = h*0.7, barW = w*0.15, gap = w*0.06; let x = w*0.12;
for(let i=0;i<4;i++){
const ph = Math.max(0,probs[i])*maxH;
ctx.fillStyle = i%2? "#22d3ee" : "#38bdf8";
ctx.fillRect(x, h-40-ph, barW, ph);
ctx.fillStyle="#cbd5e1"; ctx.font="28px system-ui"; ctx.fillText(labels[i], x+barW*0.22, h-10);
ctx.fillStyle="#94a3b8"; ctx.font="22px system-ui"; ctx.fillText(probs[i].toFixed(4), x+8, h-50-ph);
x += barW + gap;
}
}
// Fisher information (Δ in radians physically, but we input degrees; derivative uses sin(Δ) correctly)
function fisher(V, ddeg){
const mu = -V * cosd(ddeg);
const dmu = V * sind(ddeg); // dμ/dΔ(rad) = V sin(Δ)
const denom = 1 - mu*mu;
if(denom <= 1e-12) return NaN;
return (dmu*dmu)/denom;
}
function fisher_max(V){
let bestF = 0, bestD = 90;
for(let d=0; d<=180; d+=0.1){
const F = fisher(V, d);
if(!isNaN(F) && F > bestF){ bestF = F; bestD = d; }
}
return {F:bestF, D:bestD};
}
function classify_regime(S){
const eps=1e-6, ts = 2*Math.SQRT2;
if(S <= 2+eps) return {txt:"local (≤2)", cls:"ok"};
if(S <= ts+eps) return {txt:"quantum-admissible (≤2√2)", cls:"warn"};
return {txt:"super-quantum (violates IC)", cls:"err"};
}
function updateBadge(S, Vv){
// Use S for current geometry and also V-threshold info
if(S > 2 + 1e-6){ violBadge.textContent = "violates CHSH"; violBadge.className = "badge ok"; return; }
if(Math.abs(S-2) <= 1e-6){ violBadge.textContent = "saturates local bound"; violBadge.className = "badge warn"; return; }
violBadge.textContent = "no violation"; violBadge.className = "badge err";
}
function updateMarginals(E){
// From joint_from_E
const [Ppp,Ppm,Pmp,Pmm] = joint_from_E(E);
const Pa = Ppp + Ppm; // a=+1
const Pb = Ppp + Pmp; // b=+1
PaPlus.textContent = Pa.toFixed(4);
PbPlus.textContent = Pb.toFixed(4);
}
function updateAll(){
Vlab.textContent = Number(V.value).toFixed(2);
A0lab.textContent = Number(A0.value).toFixed(1);
A1lab.textContent = Number(A1.value).toFixed(1);
B0lab.textContent = Number(B0.value).toFixed(1);
B1lab.textContent = Number(B1.value).toFixed(1);
const Vv = Number(V.value);
const a0 = Number(A0.value), a1 = Number(A1.value), b0 = Number(B0.value), b1 = Number(B1.value);
DeltaLab.textContent = `A0–B0 = ${wrap180(a0-b0).toFixed(1)}°`;
const {S,E00:EE00,E01,E10,E11} = S_from(Vv, a0,a1,b0,b1);
E00.textContent = EE00.toFixed(4);
Sval.textContent = S.toFixed(4);
pwin.textContent = pwin_from_S(S).toFixed(4);
updateBadge(S, Vv);
const reg = classify_regime(S);
regime.textContent = reg.txt;
regime.className = reg.cls;
// single Δ block
const Dv = Number(D.value);
Dlab.textContent = D.value;
Dnum.value = D.value;
const EΔ = E_of(Vv, Dv);
Edelta.textContent = EΔ.toFixed(6);
updateMarginals(EΔ);
const FΔ = fisher(Vv, Dv);
Fdelta.textContent = isNaN(FΔ)? "undefined" : FΔ.toFixed(6);
const Fm = fisher_max(Vv);
Fmax.textContent = `${Fm.F.toFixed(6)} @ Δ≈${Fm.D.toFixed(1)}°`;
drawBars(joint_from_E(EΔ));
SABpill.textContent = S.toFixed(4);
}
function monoCheck(){
const SAB = Number(Sval.textContent);
const SAC = Number(SACin.value);
SACpill.textContent = SAC.toFixed(4);
const sum = SAB*SAB + SAC*SAC;
sumMono.textContent = sum.toFixed(4);
const ok = sum <= 8 + 1e-6;
monoStatus.textContent = ok ? "satisfied" : "violated";
monoStatus.className = ok ? "ok" : "err";
}
function setCHSHopt(){
A0.value = 0; A1.value = 45; B0.value = 22.5; B1.value = 67.5;
updateAll();
}
// Sync Δ number/range
D.addEventListener('input', ()=>{ Dlab.textContent=D.value; Dnum.value=D.value; updateAll(); });
Dnum.addEventListener('input', ()=>{ let v=Number(Dnum.value); if(isNaN(v)) v=0; v=Math.max(0,Math.min(180,v)); D.value=v; Dlab.textContent=D.value; updateAll(); });
[V,A0,A1,B0,B1].forEach(el=>el.addEventListener('input', updateAll));
document.getElementById('recalc').addEventListener('click', updateAll);
document.getElementById('monoCheck').addEventListener('click', monoCheck);
document.getElementById('setOpt').addEventListener('click', setCHSHopt);
// init
updateAll();
</script>
</body>
</html>