npm - mudra-skills - Versions diffs - 1.0.0 - Mend

mudra-skills 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (149) hide show

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

@@ -0,0 +1,342 @@
+<!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>