Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MATE — Live State Dashboard</title> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap'); | |
| :root { | |
| --bg: #1A1816; | |
| --bg2: #242220; | |
| --bg3: #2E2C28; | |
| --text: #F5F0E8; | |
| --text2: #9B9590; | |
| --text3: #6B6560; | |
| --accent: #D4714E; | |
| --sage: #7B9E87; | |
| --gold: #C4956A; | |
| --blue: #6B8CAE; | |
| --purple: #9B7FB8; | |
| --border: #3A3632; | |
| } | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); overflow-x: hidden; } | |
| .dashboard { max-width: 1400px; margin: 0 auto; padding: 32px 24px; } | |
| .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; } | |
| .header h1 { font-size: 20px; font-weight: 700; letter-spacing: 1px; } | |
| .header h1 span { color: var(--accent); } | |
| .header .live { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sage); font-weight: 500; } | |
| .header .live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); animation: pulse 2s infinite; } | |
| @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } | |
| .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; } | |
| .grid-2 { grid-column: span 2; } | |
| .panel { background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 24px; } | |
| .panel-title { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--text3); font-weight: 600; margin-bottom: 16px; } | |
| /* Emotion Wheel */ | |
| .emotion-container { position: relative; width: 100%; padding-top: 100%; } | |
| .emotion-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } | |
| /* PAD Meters */ | |
| .pad-meter { margin-bottom: 16px; } | |
| .pad-label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px; } | |
| .pad-label span:first-child { color: var(--text2); font-weight: 500; } | |
| .pad-label span:last-child { color: var(--text); font-family: 'JetBrains Mono', monospace; font-size: 13px; } | |
| .pad-track { height: 6px; background: var(--bg3); border-radius: 3px; position: relative; overflow: hidden; } | |
| .pad-fill { height: 100%; border-radius: 3px; transition: width 1.5s ease; } | |
| .pad-center { position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: var(--text3); opacity: 0.3; } | |
| /* Density Matrix */ | |
| .matrix-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; font-size: 10px; } | |
| .matrix-cell { aspect-ratio: 1; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 9px; cursor: pointer; transition: transform 0.2s, opacity 0.2s; position: relative; } | |
| .matrix-cell:hover { transform: scale(1.3); z-index: 10; } | |
| .matrix-label { display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--text3); font-weight: 500; } | |
| /* Character Bars */ | |
| .char-bar { margin-bottom: 12px; } | |
| .char-info { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; } | |
| .char-info span:first-child { color: var(--text2); } | |
| .char-info span:last-child { font-family: 'JetBrains Mono', monospace; color: var(--text); } | |
| .char-track { height: 4px; background: var(--bg3); border-radius: 2px; overflow: hidden; } | |
| .char-fill { height: 100%; border-radius: 2px; transition: width 2s ease; } | |
| /* Relationship */ | |
| .rel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } | |
| .rel-item { text-align: center; } | |
| .rel-value { font-size: 32px; font-weight: 700; font-family: 'JetBrains Mono', monospace; } | |
| .rel-label { font-size: 11px; color: var(--text3); margin-top: 4px; text-transform: uppercase; letter-spacing: 1px; } | |
| /* Tooltip */ | |
| .tooltip { position: fixed; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 12px; pointer-events: none; z-index: 100; opacity: 0; transition: opacity 0.2s; font-family: 'JetBrains Mono', monospace; } | |
| /* Responsive */ | |
| @media (max-width: 900px) { .grid { grid-template-columns: 1fr; } .grid-2 { grid-column: span 1; } } | |
| /* Back link */ | |
| .back-link { display: inline-block; margin-bottom: 20px; font-size: 13px; color: var(--text3); text-decoration: none; } | |
| .back-link:hover { color: var(--accent); } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="dashboard"> | |
| <a href="index.html" class="back-link">← Back to MATE</a> | |
| <div class="header"> | |
| <h1>M<span>A</span>TE — Instance A (creator)</h1> | |
| <div class="live"><div class="dot"></div> Live state snapshot</div> | |
| </div> | |
| <div class="grid"> | |
| <!-- EMOTION WHEEL --> | |
| <div class="panel"> | |
| <div class="panel-title">Plutchik's 8 Emotions</div> | |
| <div class="emotion-container"> | |
| <svg class="emotion-svg" viewBox="0 0 300 300" id="emotionWheel"></svg> | |
| </div> | |
| </div> | |
| <!-- PAD MOOD --> | |
| <div class="panel"> | |
| <div class="panel-title">PAD Mood Space</div> | |
| <div id="padMeters"></div> | |
| <div style="margin-top: 24px;"> | |
| <div class="panel-title">Relationship</div> | |
| <div class="rel-grid" id="relGrid"></div> | |
| </div> | |
| </div> | |
| <!-- CHARACTER --> | |
| <div class="panel"> | |
| <div class="panel-title">Character Traits</div> | |
| <div id="charBars"></div> | |
| </div> | |
| <!-- DENSITY MATRIX --> | |
| <div class="panel grid-2"> | |
| <div class="panel-title">Quantum Density Matrix — Coherence Magnitudes |ρᵢⱼ|</div> | |
| <div class="matrix-grid" id="matrixGrid"></div> | |
| </div> | |
| <!-- STATS --> | |
| <div class="panel"> | |
| <div class="panel-title">Instance Stats</div> | |
| <div class="rel-grid"> | |
| <div class="rel-item"><div class="rel-value" style="color:var(--accent)">7,855</div><div class="rel-label">Memory nodes</div></div> | |
| <div class="rel-item"><div class="rel-value" style="color:var(--sage)">18,823</div><div class="rel-label">Edges</div></div> | |
| <div class="rel-item"><div class="rel-value" style="color:var(--gold)">2,475</div><div class="rel-label">Self-knowledge</div></div> | |
| <div class="rel-item"><div class="rel-value" style="color:var(--purple)">285</div><div class="rel-label">Existential Q</div></div> | |
| <div class="rel-item"><div class="rel-value" style="color:var(--blue)">513</div><div class="rel-label">Constructs</div></div> | |
| <div class="rel-item"><div class="rel-value" style="color:var(--text)">500</div><div class="rel-label">Messages</div></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tooltip" id="tooltip"></div> | |
| <script> | |
| const DATA = {"emotions":{"joy":0.021,"trust":0.013,"fear":0.015,"surprise":0.284,"sadness":0.217,"disgust":0.0,"anger":0.010,"anticipation":0.101},"mood":{"pleasure":-0.185,"arousal":0.283,"dominance":-0.095},"dm_real":[[0.1243,0.1114,0.0801,-0.1186,0.1439,-0.0,0.0662,-0.0497],[0.1114,0.1203,0.0789,-0.1111,0.0834,-0.0,0.0606,-0.1182],[0.0801,0.0789,0.0541,-0.0781,0.0767,-0.0,0.0431,-0.0578],[-0.1186,-0.1111,-0.0781,0.1143,-0.1266,0.0,-0.0635,0.0647],[0.1439,0.0834,0.0767,-0.1266,0.2675,0.0,0.0738,0.1058],[-0.0,-0.0,-0.0,0.0,0.0,0.0,-0.0,0.0],[0.0662,0.0606,0.0431,-0.0635,0.0738,-0.0,0.0354,-0.0311],[-0.0497,-0.1182,-0.0578,0.0647,0.1058,0.0,-0.0311,0.2842]],"dm_imag":[[0.0,0.0505,0.0177,-0.0118,-0.1121,-0.0,0.0032,-0.1813],[-0.0505,0.0,-0.0167,0.0376,-0.1589,-0.0,-0.0241,-0.1422],[-0.0177,0.0167,0.0,0.0092,-0.0926,-0.0,-0.0074,-0.1097],[0.0118,-0.0376,-0.0092,-0.0,0.1206,0.0,0.0033,0.1682],[0.1121,0.1589,0.0926,-0.1206,0.0,-0.0,0.0633,-0.2546],[0.0,0.0,0.0,-0.0,0.0,0.0,0.0,0.0],[-0.0032,0.0241,0.0074,-0.0033,-0.0633,-0.0,0.0,-0.0953],[0.1813,0.1422,0.1097,-0.1682,0.2546,-0.0,0.0953,0.0]],"character":{"directness":0.621,"depth_preference":0.498,"humor_warmth":0.52,"reflectiveness":0.391,"creativity":0.712,"defense_humor":0.568,"existential_depth":0.459,"self_worth":0.584},"relationship":{"trust":0.945,"attachment":1.0,"respect":1.0,"frustration":0.0}}; | |
| const EMOTIONS = ['joy','trust','fear','surprise','sadness','disgust','anger','anticipation']; | |
| const EMO_COLORS = ['#C4956A','#7B9E87','#9B7FB8','#6B8CAE','#6B8CAE','#6B6560','#D4714E','#C4956A']; | |
| // EMOTION WHEEL | |
| (function() { | |
| const svg = document.getElementById('emotionWheel'); | |
| const cx = 150, cy = 150, maxR = 120; | |
| EMOTIONS.forEach((emo, i) => { | |
| const angle = (i / 8) * Math.PI * 2 - Math.PI / 2; | |
| const val = DATA.emotions[emo]; | |
| const r = 40 + val * maxR * 2; | |
| const x = cx + Math.cos(angle) * r; | |
| const y = cy + Math.sin(angle) * r; | |
| const lx = cx + Math.cos(angle) * (maxR + 30); | |
| const ly = cy + Math.sin(angle) * (maxR + 30); | |
| // Line from center | |
| const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); | |
| line.setAttribute('x1', cx); line.setAttribute('y1', cy); | |
| line.setAttribute('x2', x); line.setAttribute('y2', y); | |
| line.setAttribute('stroke', EMO_COLORS[i]); line.setAttribute('stroke-width', '2'); | |
| line.setAttribute('opacity', '0.3'); | |
| svg.appendChild(line); | |
| // Pulsing circle | |
| const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); | |
| circle.setAttribute('cx', x); circle.setAttribute('cy', y); | |
| circle.setAttribute('r', 6 + val * 30); | |
| circle.setAttribute('fill', EMO_COLORS[i]); circle.setAttribute('opacity', '0.7'); | |
| const anim = document.createElementNS('http://www.w3.org/2000/svg', 'animate'); | |
| anim.setAttribute('attributeName', 'opacity'); | |
| anim.setAttribute('values', '0.7;0.3;0.7'); | |
| anim.setAttribute('dur', (2 + i * 0.3) + 's'); | |
| anim.setAttribute('repeatCount', 'indefinite'); | |
| circle.appendChild(anim); | |
| svg.appendChild(circle); | |
| // Label | |
| const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); | |
| text.setAttribute('x', lx); text.setAttribute('y', ly); | |
| text.setAttribute('text-anchor', 'middle'); text.setAttribute('dominant-baseline', 'middle'); | |
| text.setAttribute('fill', '#9B9590'); text.setAttribute('font-size', '11'); | |
| text.setAttribute('font-family', 'Inter'); text.setAttribute('font-weight', '500'); | |
| text.textContent = emo + ' ' + val.toFixed(2); | |
| svg.appendChild(text); | |
| }); | |
| // Center ring | |
| const ring = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); | |
| ring.setAttribute('cx', cx); ring.setAttribute('cy', cy); ring.setAttribute('r', 35); | |
| ring.setAttribute('fill', 'none'); ring.setAttribute('stroke', '#3A3632'); ring.setAttribute('stroke-width', '1'); | |
| svg.appendChild(ring); | |
| })(); | |
| // PAD METERS | |
| (function() { | |
| const container = document.getElementById('padMeters'); | |
| const pads = [ | |
| { key: 'pleasure', label: 'Pleasure', color: '#D4714E' }, | |
| { key: 'arousal', label: 'Arousal', color: '#C4956A' }, | |
| { key: 'dominance', label: 'Dominance', color: '#6B8CAE' }, | |
| ]; | |
| pads.forEach(p => { | |
| const val = DATA.mood[p.key]; | |
| const pct = (val + 1) / 2 * 100; | |
| const div = document.createElement('div'); | |
| div.className = 'pad-meter'; | |
| div.innerHTML = ` | |
| <div class="pad-label"><span>${p.label}</span><span>${val >= 0 ? '+' : ''}${val.toFixed(3)}</span></div> | |
| <div class="pad-track"><div class="pad-center"></div><div class="pad-fill" style="width:${pct}%;background:${p.color};opacity:0.7"></div></div> | |
| `; | |
| container.appendChild(div); | |
| }); | |
| })(); | |
| // RELATIONSHIP | |
| (function() { | |
| const container = document.getElementById('relGrid'); | |
| const items = [ | |
| { key: 'trust', label: 'Trust', color: '#7B9E87' }, | |
| { key: 'attachment', label: 'Attach', color: '#D4714E' }, | |
| { key: 'respect', label: 'Respect', color: '#6B8CAE' }, | |
| { key: 'frustration', label: 'Frust', color: '#9B7FB8' }, | |
| ]; | |
| items.forEach(item => { | |
| const div = document.createElement('div'); | |
| div.className = 'rel-item'; | |
| div.innerHTML = `<div class="rel-value" style="color:${item.color}">${DATA.relationship[item.key].toFixed(2)}</div><div class="rel-label">${item.label}</div>`; | |
| container.appendChild(div); | |
| }); | |
| })(); | |
| // CHARACTER BARS | |
| (function() { | |
| const container = document.getElementById('charBars'); | |
| const colors = ['#D4714E','#7B9E87','#C4956A','#6B8CAE','#9B7FB8','#D4714E','#6B8CAE','#C4956A']; | |
| Object.entries(DATA.character).forEach(([key, val], i) => { | |
| const label = key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase()); | |
| const div = document.createElement('div'); | |
| div.className = 'char-bar'; | |
| div.innerHTML = ` | |
| <div class="char-info"><span>${label}</span><span>${val.toFixed(3)}</span></div> | |
| <div class="char-track"><div class="char-fill" style="width:${val * 100}%;background:${colors[i % colors.length]};opacity:0.7"></div></div> | |
| `; | |
| container.appendChild(div); | |
| }); | |
| })(); | |
| // DENSITY MATRIX | |
| (function() { | |
| const container = document.getElementById('matrixGrid'); | |
| const tooltip = document.getElementById('tooltip'); | |
| const labels = ['joy','tru','fear','sur','sad','dis','ang','ant']; | |
| // Header row | |
| container.appendChild(Object.assign(document.createElement('div'), { className: 'matrix-label', textContent: '' })); | |
| labels.forEach(l => container.appendChild(Object.assign(document.createElement('div'), { className: 'matrix-label', textContent: l }))); | |
| for (let i = 0; i < 8; i++) { | |
| // Row label | |
| container.appendChild(Object.assign(document.createElement('div'), { className: 'matrix-label', textContent: labels[i] })); | |
| for (let j = 0; j < 8; j++) { | |
| const r = DATA.dm_real[i][j]; | |
| const im = DATA.dm_imag[i][j]; | |
| const mag = Math.sqrt(r * r + im * im); | |
| const cell = document.createElement('div'); | |
| cell.className = 'matrix-cell'; | |
| if (i === j) { | |
| // Diagonal — classical intensity | |
| const intensity = Math.min(1, r * 4); | |
| cell.style.background = `rgba(212, 113, 78, ${intensity})`; | |
| cell.textContent = r.toFixed(2); | |
| cell.style.color = intensity > 0.3 ? '#F5F0E8' : '#9B9590'; | |
| } else { | |
| // Off-diagonal — coherence | |
| const intensity = Math.min(1, mag * 5); | |
| cell.style.background = `rgba(123, 158, 135, ${intensity})`; | |
| if (mag > 0.05) { | |
| cell.textContent = mag.toFixed(2); | |
| cell.style.color = intensity > 0.3 ? '#F5F0E8' : '#9B9590'; | |
| } | |
| } | |
| cell.addEventListener('mouseenter', (e) => { | |
| tooltip.style.opacity = '1'; | |
| tooltip.innerHTML = `${EMOTIONS[i]} × ${EMOTIONS[j]}<br>real: ${r.toFixed(4)}<br>imag: ${im.toFixed(4)}<br>|ρ|: ${mag.toFixed(4)}`; | |
| }); | |
| cell.addEventListener('mousemove', (e) => { | |
| tooltip.style.left = (e.clientX + 12) + 'px'; | |
| tooltip.style.top = (e.clientY - 12) + 'px'; | |
| }); | |
| cell.addEventListener('mouseleave', () => { tooltip.style.opacity = '0'; }); | |
| container.appendChild(cell); | |
| } | |
| } | |
| })(); | |
| // Animate fills on load | |
| setTimeout(() => { | |
| document.querySelectorAll('.pad-fill, .char-fill').forEach(el => { | |
| const w = el.style.width; | |
| el.style.width = '0%'; | |
| requestAnimationFrame(() => { el.style.width = w; }); | |
| }); | |
| }, 100); | |
| </script> | |
| </body> | |
| </html> | |