Spaces:

SlavaLobozov
/

mate

Running

File size: 15,034 Bytes

cbedfe6

<!DOCTYPE html>
<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">&larr; 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>