Spaces:

SlavaLobozov
/

mate

Running

App Files Files Community

SlavaLobozov commited on Apr 2

Commit

cbedfe6

verified ·

1 Parent(s): 82d52da

Upload dashboard.html with huggingface_hub

Browse files

Files changed (1) hide show

dashboard.html +323 -0

dashboard.html ADDED Viewed

	@@ -0,0 +1,323 @@

+<!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>