kami
88fb4912c4
Temporary reference while testing utterances: a collapsible <details> panel (native, no JS) listing the six router intents (act/reminder/fact/note/query/ system) with real example phrasings pulled from models/seeds, RU-first since the voice lang is ru. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
83 lines
4.1 KiB
HTML
83 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
|
|
<meta name="theme-color" content="#111">
|
|
<link rel="manifest" href="/manifest.json">
|
|
<script defer src="/app.js"></script>
|
|
<style>
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
html,body{height:100%;background:#111;color:#ddd;font-family:system-ui,-apple-system,sans-serif}
|
|
body{display:flex;flex-direction:column}
|
|
|
|
nav{display:flex;background:#1a1a2e;border-bottom:1px solid #333;flex-shrink:0}
|
|
nav button{flex:1;padding:.6rem;background:none;border:none;color:#666;font-size:.85rem;cursor:pointer;font-family:inherit;letter-spacing:.05em;text-transform:uppercase;transition:color .15s;-webkit-tap-highlight-color:transparent}
|
|
nav button.active{color:#00aaff;border-bottom:2px solid #00aaff}
|
|
nav button:hover{color:#ddd}
|
|
|
|
.tab{display:none;flex-direction:column;align-items:center;flex:1;overflow:auto;padding:1rem}
|
|
.tab.active{display:flex}
|
|
#tab-voice{gap:2rem}
|
|
#tab-dash{padding:0}
|
|
|
|
h1{font-size:1.2rem;font-weight:400;color:#888;letter-spacing:.1em;text-transform:uppercase}
|
|
#status{font-size:.85rem;color:#666;min-height:1.2em}
|
|
#btn{width:140px;height:140px;border-radius:50%;border:4px solid #00aaff;background:#1a1a2e;color:#00aaff;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
|
|
#btn:active,#btn.active{background:#00aaff22;border-color:#00ff88;color:#00ff88;transform:scale(1.05)}
|
|
#btn:disabled{opacity:.3;border-color:#444}
|
|
#log{width:100%;max-width:480px;max-height:40vh;overflow-y:auto;font-size:.8rem;color:#666;line-height:1.6;padding:.5rem;border-top:1px solid #222;margin-top:1rem}
|
|
#log .reply{color:#8f8}
|
|
#log .error{color:#f88}
|
|
#log .push{color:#88f}
|
|
|
|
#dash-frame{width:100%;flex:1;border:none;background:#111;min-height:0}
|
|
|
|
/* cheatsheet — temporary reference while testing command lines */
|
|
#cheat{width:100%;max-width:480px;font-size:.8rem;border-top:1px solid #222;color:#888}
|
|
#cheat summary{cursor:pointer;padding:.5rem 0;color:#00aaff;letter-spacing:.05em;text-transform:uppercase;font-size:.75rem;user-select:none}
|
|
#cheat dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem .8rem;padding:.25rem 0 .5rem}
|
|
#cheat dt{color:#00ff88;font-weight:600;white-space:nowrap}
|
|
#cheat dd{color:#aaa;line-height:1.5}
|
|
#cheat dd span{color:#555}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<button class="active" data-tab="voice">Voice</button>
|
|
<button data-tab="dash">Dash</button>
|
|
</nav>
|
|
<div id="tab-voice" class="tab active">
|
|
<h1>Maven Voice</h1>
|
|
<div id="status">tap & hold to speak</div>
|
|
<button id="btn" type="button">🎙</button>
|
|
<div id="log"></div>
|
|
<details id="cheat">
|
|
<summary>Cheatsheet · шпаргалка</summary>
|
|
<dl>
|
|
<dt>Act</dt><dd>включи свет · сделай громче · <span>restart nginx</span></dd>
|
|
<dt>Reminder</dt><dd>напомни через 4 часа размяться · <span>remind me tomorrow at 8am to call the doctor</span></dd>
|
|
<dt>Fact</dt><dd>выпил кофе · вес 73 кг · <span>ran 3 kilometers</span></dd>
|
|
<dt>Note</dt><dd>запиши рецепт блинов · <span>note: add a backup job for the db</span></dd>
|
|
<dt>Query</dt><dd>какой сегодня день · какой прогноз погоды · <span>what version are you</span></dd>
|
|
<dt>System</dt><dd>включи тихий режим · как загрузка системы</dd>
|
|
</dl>
|
|
</details>
|
|
</div>
|
|
<div id="tab-dash" class="tab">
|
|
<iframe id="dash-frame" src="/dash"></iframe>
|
|
</div>
|
|
<script>
|
|
document.querySelectorAll('nav button').forEach(function(btn) {
|
|
btn.addEventListener('click', function() {
|
|
document.querySelectorAll('nav button').forEach(function(b) { b.classList.remove('active'); });
|
|
document.querySelectorAll('.tab').forEach(function(t) { t.classList.remove('active'); });
|
|
btn.classList.add('active');
|
|
var tab = document.getElementById('tab-' + btn.dataset.tab);
|
|
if (tab) tab.classList.add('active');
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|