mudra-skills 3.0.2 → 3.0.4

package/skills/mudra-master/mudra-preview/assets/gesture-assistant.html

@@ -1,342 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Gesture Assistant — Mudra Studio</title>
-<style>
-  @media (prefers-reduced-motion: reduce) {
-    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
-  }
-
-  :root {
-    --bg: #ffffff; --card: #f1f5f9; --primary: #0d9488; --accent: #14b8a6;
-    --text: #0f172a; --text-secondary: #475569; --success: #16a34a;
-    --warning: #ca8a04; --error: #dc2626;
-    --border: rgba(15,23,42,0.12); --surface: rgba(0,0,0,0.04);
-  }
-
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  body { background: var(--bg); color: var(--text); font-family: 'Poppins', system-ui, sans-serif; overflow: hidden; height: 100vh; display: flex; flex-direction: column; }
-
-  .header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--border); z-index: 100; flex-shrink: 0; gap: 8px; flex-wrap: wrap; }
-  .header-left, .header-right { display: flex; align-items: center; gap: 10px; }
-  .brand { font-weight: 700; font-size: 14px; } .brand span { color: var(--primary); }
-  .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 3px rgba(234,179,8,0.15); transition: all 150ms; }
-  .dot.live { background: var(--success); box-shadow: 0 0 0 3px rgba(34,197,94,0.18); }
-  .conn-label { font-size: 12px; color: var(--text-secondary); }
-
-  .btn { background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); padding: 5px 12px; border-radius: 8px; font-size: 12px; cursor: pointer; font-family: inherit; transition: border-color 150ms, color 150ms; white-space: nowrap; }
-  .btn:hover { border-color: var(--primary); color: var(--primary); }
-
-  .main { flex: 1; display: flex; overflow: hidden; }
-
-  /* ── Phrase Display ── */
-  .phrase-panel { flex: 1; display: flex; flex-direction: column; align-items: center; overflow: hidden; }
-  .category-tabs { display: flex; gap: 8px; padding: 12px 16px; flex-shrink: 0; flex-wrap: wrap; justify-content: center; }
-  .cat-tab { padding: 5px 14px; border-radius: 20px; font-size: 12px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); transition: all 150ms; }
-  .cat-tab.active { background: var(--primary); color: #072f33; border-color: transparent; font-weight: 600; }
-
-  .phrase-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; }
-  .phrase-text { font-size: 48px; font-weight: 700; color: var(--primary); text-align: center; transition: opacity 150ms, transform 150ms; min-height: 64px; text-shadow: 0 0 30px rgba(119,234,233,0.2); }
-  .phrase-text.speaking { animation: pulse 0.6s ease infinite; }
-  @keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
-  .phrase-index { font-size: 12px; color: var(--text-secondary); }
-  .recording-indicator { font-size: 12px; color: var(--error); opacity: 0; transition: opacity 150ms; display: flex; align-items: center; gap: 6px; }
-  .recording-indicator.active { opacity: 1; }
-  .rec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--error); animation: blink 0.8s infinite; }
-  @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
-
-  .phrase-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 16px; max-width: 600px; width: 100%; flex-shrink: 0; }
-  .phrase-card { padding: 12px 8px; border-radius: 10px; text-align: center; font-size: 14px; font-weight: 500; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); transition: all 150ms; }
-  .phrase-card.selected { border-color: var(--primary); background: rgba(119,234,233,0.08); color: var(--primary); box-shadow: 0 0 12px rgba(119,234,233,0.1); }
-  .phrase-card:hover { border-color: var(--accent); }
-
-  /* ── Gesture Log ── */
-  .gesture-log { width: 240px; background: var(--card); border-left: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; }
-  .log-header { padding: 12px 14px; font-size: 12px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: 0.06em; }
-  .log-list { flex: 1; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
-  .log-entry { font-size: 11px; padding: 6px 10px; background: var(--surface); border-radius: 6px; color: var(--text-secondary); display: flex; justify-content: space-between; }
-  .log-name { color: var(--primary); font-weight: 600; }
-  .log-time { font-family: monospace; font-size: 10px; opacity: 0.6; }
-
-  .toolbar { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 10px 16px; background: var(--card); border-top: 1px solid var(--border); z-index: 100; flex-shrink: 0; flex-wrap: wrap; }
-  .hint { font-size: 11px; color: var(--text-secondary); opacity: 0.6; }
-
-  .mudra-badge { position: fixed; bottom: 12px; right: 12px; font-size: 11px; color: var(--text-secondary); opacity: 0.7; letter-spacing: 0.02em; pointer-events: none; z-index: 200; }
-
-  @media (max-width: 640px) {
-    .header { padding: 8px 10px; } .toolbar { gap: 8px; padding: 8px 10px; }
-    .gesture-log { display: none; }
-    .phrase-grid { grid-template-columns: repeat(2, 1fr); }
-    .phrase-text { font-size: 32px; }
-    .hint { display: none; }
-  }
-</style>
-</head>
-<body>
-
-<div class="header">
-  <div class="header-left">
-    <div class="brand"><span>Mudra</span> Gesture Assistant</div>
-    <span class="dot" id="dot"></span>
-    <span class="conn-label" id="connLabel">Connecting&hellip;</span>
-  </div>
-  <div class="header-right">
-    <a href="/gallery" class="btn" style="text-decoration:none;">&#8592; Gallery</a>
-    <button class="btn" id="simTap">Simulate Tap</button>
-    <button class="btn" id="simDTap">Simulate Double-Tap</button>
-  </div>
-</div>
-
-<div class="main">
-  <div class="phrase-panel">
-    <div class="category-tabs" id="catTabs"></div>
-    <div class="phrase-hero">
-      <div class="phrase-text" id="phraseText">Hello</div>
-      <div class="phrase-index" id="phraseIndex">1 / 8</div>
-      <div class="recording-indicator" id="recInd"><span class="rec-dot"></span> Recording Mode</div>
-    </div>
-    <div class="phrase-grid" id="phraseGrid"></div>
-  </div>
-  <div class="gesture-log">
-    <div class="log-header">Gesture Log</div>
-    <div class="log-list" id="logList"></div>
-  </div>
-</div>
-
-<div class="toolbar">
-  <button class="btn" id="speakBtn">Speak</button>
-  <button class="btn" id="nextBtn">Next</button>
-  <button class="btn" id="prevBtn">Prev</button>
-  <span class="hint">Space speak &middot; Arrow Right/Left cycle &middot; Shift hold for recording</span>
-</div>
-
-<div class="mudra-badge">Created by Mudra</div>
-
-<script>
-/* ── Mudra Protocol Connection (v2) ────────────────────────── */
-const WS_URL = 'ws://127.0.0.1:8766';
-const SIGNALS = ['gesture', 'button'];
-
-let ws, reconnectTimer, simTimer;
-let wsOpen = false, deviceReady = false, simulating = true;
-const bus = {};
-
-function on(ev, fn) { (bus[ev] ??= []).push(fn); }
-function emit(ev, d) { (bus[ev] || []).forEach(fn => fn(d)); }
-function send(p) { if (ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify(p)); }
-
-function connect() {
-  try {
-    ws = new WebSocket(WS_URL);
-    ws.onopen = () => {
-      wsOpen = true; stopSim(); updateStatus();
-      SIGNALS.forEach(s => send({ command: 'subscribe', signal: s }));
-    };
-    ws.onmessage = (e) => {
-      try {
-        const msg = JSON.parse(e.data);
-        if (msg.type === 'connection_status') {
-          deviceReady = msg.data?.status === 'connected';
-          updateStatus(); return;
-        }
-        emit(msg.type, msg.data);
-      } catch {}
-    };
-    ws.onclose = () => {
-      wsOpen = false; deviceReady = false; updateStatus();
-      startSim();
-      clearTimeout(reconnectTimer);
-      reconnectTimer = setTimeout(connect, 1500);
-    };
-    ws.onerror = () => ws?.close();
-  } catch {
-    wsOpen = false; startSim();
-    clearTimeout(reconnectTimer);
-    reconnectTimer = setTimeout(connect, 1500);
-  }
-}
-
-function triggerGesture(type) {
-  if (wsOpen) send({ command: 'trigger_gesture', data: { type } });
-  else emit('gesture', { type, confidence: 0.95, timestamp: Date.now() });
-}
-
-/* ── Simulation (when Companion not reachable) ─────────────── */
-function startSim() {
-  if (simTimer) return;
-  simulating = true;
-  let t = 0;
-  simTimer = setInterval(() => {
-    t += 0.05;
-    if (Math.random() < 0.006) {
-      const g = ['tap', 'double_tap', 'twist', 'double_twist'];
-      emit('gesture', { type: g[Math.floor(Math.random() * g.length)], confidence: 0.7 + Math.random() * 0.3, timestamp: Date.now() });
-    }
-    if (Math.random() < 0.002) {
-      emit('button', { state: 'pressed', timestamp: Date.now() });
-      setTimeout(() => emit('button', { state: 'released', timestamp: Date.now() }), 800 + Math.random() * 600);
-    }
-  }, 60);
-}
-
-function stopSim() { clearInterval(simTimer); simTimer = null; simulating = false; }
-
-/* ── Status UI ─────────────────────────────────────────────── */
-const dotEl = document.getElementById('dot');
-const connEl = document.getElementById('connLabel');
-
-function updateStatus() {
-  if (wsOpen && deviceReady) { dotEl.className = 'dot live'; connEl.textContent = 'Connected'; }
-  else if (wsOpen) { dotEl.className = 'dot'; connEl.textContent = 'Waiting for Mudra Band\u2026'; }
-  else { dotEl.className = 'dot'; connEl.textContent = simulating ? 'Simulated' : 'Disconnected'; }
-}
-
-/* ── Phrase Data ───────────────────────────────────────────── */
-const categories = {
-  'Basic': ['Hello', 'Yes', 'No', 'Thank you', 'Help', 'Water', 'I need...', 'Goodbye'],
-  'Questions': ['How are you?', 'Where is it?', 'What time?', 'Who is there?', 'Why?', 'When?', 'How much?', 'Can you help?'],
-  'Actions': ['Stop', 'Go', 'Wait', 'Come here', 'Sit down', 'Stand up', 'Turn around', 'Look here'],
-};
-
-let currentCat = 'Basic';
-let selectedIdx = 0;
-
-const catTabsEl = document.getElementById('catTabs');
-const phraseGridEl = document.getElementById('phraseGrid');
-const phraseTextEl = document.getElementById('phraseText');
-const phraseIndexEl = document.getElementById('phraseIndex');
-const recIndEl = document.getElementById('recInd');
-const logListEl = document.getElementById('logList');
-
-/* ── Build Categories ──────────────────────────────────────── */
-function buildTabs() {
-  catTabsEl.innerHTML = '';
-  Object.keys(categories).forEach(cat => {
-    const tab = document.createElement('div');
-    tab.className = 'cat-tab' + (cat === currentCat ? ' active' : '');
-    tab.textContent = cat;
-    tab.addEventListener('click', () => switchCategory(cat));
-    catTabsEl.appendChild(tab);
-  });
-}
-
-function buildGrid() {
-  phraseGridEl.innerHTML = '';
-  const phrases = categories[currentCat];
-  phrases.forEach((p, i) => {
-    const card = document.createElement('div');
-    card.className = 'phrase-card' + (i === selectedIdx ? ' selected' : '');
-    card.textContent = p;
-    card.addEventListener('click', () => { selectedIdx = i; updateDisplay(); });
-    phraseGridEl.appendChild(card);
-  });
-}
-
-function switchCategory(cat) {
-  currentCat = cat; selectedIdx = 0;
-  buildTabs(); buildGrid(); updateDisplay();
-}
-
-function updateDisplay() {
-  const phrases = categories[currentCat];
-  phraseTextEl.textContent = phrases[selectedIdx];
-  phraseIndexEl.textContent = (selectedIdx + 1) + ' / ' + phrases.length;
-  const cards = phraseGridEl.children;
-  for (let i = 0; i < cards.length; i++) cards[i].classList.toggle('selected', i === selectedIdx);
-}
-
-function speakPhrase() {
-  if (!('speechSynthesis' in window)) return;
-  const phrases = categories[currentCat];
-  const text = phrases[selectedIdx];
-  window.speechSynthesis.cancel();
-  const utter = new SpeechSynthesisUtterance(text);
-  utter.rate = 0.9; utter.pitch = 1;
-  phraseTextEl.classList.add('speaking');
-  utter.onend = () => phraseTextEl.classList.remove('speaking');
-  window.speechSynthesis.speak(utter);
-}
-
-function nextPhrase() {
-  const phrases = categories[currentCat];
-  selectedIdx = (selectedIdx + 1) % phrases.length;
-  updateDisplay();
-}
-
-function prevPhrase() {
-  const phrases = categories[currentCat];
-  selectedIdx = (selectedIdx - 1 + phrases.length) % phrases.length;
-  updateDisplay();
-}
-
-function toggleCategory() {
-  const cats = Object.keys(categories);
-  const idx = (cats.indexOf(currentCat) + 1) % cats.length;
-  switchCategory(cats[idx]);
-}
-
-/* ── Gesture Log ───────────────────────────────────────────── */
-function addLog(name) {
-  const el = document.createElement('div');
-  el.className = 'log-entry';
-  const now = new Date();
-  const time = now.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
-  const nameSpan = document.createElement('span');
-  nameSpan.className = 'log-name';
-  nameSpan.textContent = name;
-  const timeSpan = document.createElement('span');
-  timeSpan.className = 'log-time';
-  timeSpan.textContent = time;
-  el.appendChild(nameSpan);
-  el.appendChild(timeSpan);
-  logListEl.prepend(el);
-  if (logListEl.children.length > 50) logListEl.removeChild(logListEl.lastChild);
-}
-
-/* ── Signal Handlers ───────────────────────────────────────── */
-on('gesture', (d) => {
-  const t = d.type || '';
-  addLog(t.replace('_', ' '));
-  if (t === 'tap') speakPhrase();
-  if (t === 'double_tap') nextPhrase();
-  if (t === 'twist') prevPhrase();
-  if (t === 'double_twist') toggleCategory();
-});
-
-on('button', (d) => {
-  if (d.state === 'pressed') { recIndEl.classList.add('active'); addLog('button pressed'); }
-  if (d.state === 'released') { recIndEl.classList.remove('active'); addLog('button released'); }
-});
-
-/* ── Keyboard Fallback ─────────────────────────────────────── */
-document.addEventListener('keydown', (e) => {
-  if (e.code === 'Space') { e.preventDefault(); speakPhrase(); triggerGesture('tap'); }
-  if (e.code === 'ArrowRight') { nextPhrase(); }
-  if (e.code === 'ArrowLeft') { prevPhrase(); }
-  if (e.code === 'ShiftLeft' || e.code === 'ShiftRight') {
-    if (!e.repeat) emit('button', { state: 'pressed', timestamp: Date.now() });
-  }
-});
-document.addEventListener('keyup', (e) => {
-  if (e.code === 'ShiftLeft' || e.code === 'ShiftRight') {
-    emit('button', { state: 'released', timestamp: Date.now() });
-  }
-});
-
-/* ── Buttons ───────────────────────────────────────────────── */
-document.getElementById('simTap').addEventListener('click', () => triggerGesture('tap'));
-document.getElementById('simDTap').addEventListener('click', () => triggerGesture('double_tap'));
-document.getElementById('speakBtn').addEventListener('click', speakPhrase);
-document.getElementById('nextBtn').addEventListener('click', nextPhrase);
-document.getElementById('prevBtn').addEventListener('click', prevPhrase);
-
-/* ── Init ──────────────────────────────────────────────────── */
-buildTabs();
-buildGrid();
-updateDisplay();
-connect();
-</script>
-</body>
-</html>