520 lines
31 KiB
HTML
520 lines
31 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Sanad Dashboard</title>
|
|
<style>
|
|
:root{--bg:#0a0f1a;--panel:#111827;--panel2:#1a2332;--accent:#0ea5e9;--accent2:#6366f1;--text:#e2e8f0;--muted:#64748b;--dim:#475569;--danger:#ef4444;--success:#22c55e;--warn:#f59e0b;--border:#1e293b;--glow:0 0 20px rgba(14,165,233,.08);--radius:12px}
|
|
*{box-sizing:border-box;margin:0;padding:0}
|
|
body{font-family:'Inter','Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
|
|
/* Header */
|
|
header{background:linear-gradient(135deg,#111827 0%,#1a2332 100%);padding:.7rem 1.5rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;backdrop-filter:blur(12px)}
|
|
header h1{font-size:1.3rem;font-weight:700;letter-spacing:-.02em} header h1 span{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
|
|
.hdr-right{display:flex;align-items:center;gap:.8rem;font-size:.78rem}
|
|
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
|
|
.dot-ok{background:var(--success);box-shadow:0 0 6px var(--success)} .dot-err{background:var(--danger);box-shadow:0 0 6px var(--danger)} .dot-warn{background:var(--warn)}
|
|
.hdr-badge{padding:2px 7px;border-radius:4px;font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
|
|
.hdr-badge-err{background:rgba(239,68,68,.15);color:var(--danger);border:1px solid rgba(239,68,68,.3)}
|
|
.hdr-badge-ok{background:rgba(34,197,94,.12);color:var(--success);border:1px solid rgba(34,197,94,.25)}
|
|
#estop{background:var(--danger);color:#fff;border:none;padding:.35rem .9rem;border-radius:6px;font-weight:700;font-size:.75rem;cursor:pointer;letter-spacing:.03em;box-shadow:0 0 12px rgba(239,68,68,.3);transition:all .15s}
|
|
#estop:hover{box-shadow:0 0 20px rgba(239,68,68,.5);transform:scale(1.04)}
|
|
/* Tabs */
|
|
.tabs{display:flex;gap:0;background:var(--panel);border-bottom:1px solid var(--border);padding:0 1.5rem;overflow-x:auto}
|
|
.tab{padding:.55rem 1.1rem;font-size:.78rem;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap;font-weight:500}
|
|
.tab:hover{color:var(--text)} .tab.active{color:var(--accent);border-bottom-color:var(--accent)}
|
|
.tab-content{display:none;padding:1rem 1.5rem} .tab-content.active{display:block}
|
|
/* Grid */
|
|
.grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
|
|
@media(max-width:900px){.grid{grid-template-columns:1fr}}
|
|
/* Cards */
|
|
.card{background:var(--panel);border-radius:var(--radius);padding:1rem 1.1rem;border:1px solid var(--border);box-shadow:var(--glow);transition:border-color .2s}
|
|
.card:hover{border-color:rgba(14,165,233,.2)}
|
|
.card h3{font-size:.82rem;color:var(--accent);margin-bottom:.6rem;display:flex;align-items:center;gap:.4rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
|
|
.card h3 svg{width:14px;height:14px;opacity:.7}
|
|
.card-full{grid-column:1/-1}
|
|
/* Buttons */
|
|
.btn{display:inline-flex;align-items:center;gap:.3rem;padding:.4rem .75rem;border-radius:6px;font-size:.76rem;font-weight:500;cursor:pointer;border:1px solid transparent;transition:all .15s}
|
|
.btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
|
|
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)} .btn-primary:hover{opacity:.85}
|
|
.btn-danger{background:rgba(239,68,68,.12);color:var(--danger);border-color:rgba(239,68,68,.3)} .btn-danger:hover{background:rgba(239,68,68,.2)}
|
|
.btn-ghost{background:transparent;color:var(--muted);border-color:var(--border)} .btn-ghost:hover{color:var(--text);border-color:var(--dim)}
|
|
.btn-success{background:rgba(34,197,94,.12);color:var(--success);border-color:rgba(34,197,94,.3)} .btn-success:hover{background:rgba(34,197,94,.2)}
|
|
.btn-sm{padding:.25rem .5rem;font-size:.7rem}
|
|
.btn.loading{pointer-events:none;opacity:.6} .btn.loading::after{content:'';width:12px;height:12px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .5s linear infinite;margin-left:.3rem}
|
|
@keyframes spin{to{transform:rotate(360deg)}}
|
|
/* Form */
|
|
input,textarea,select{background:var(--bg);color:var(--text);border:1px solid var(--border);padding:.4rem .6rem;border-radius:6px;width:100%;font-size:.8rem;font-family:inherit;transition:border-color .15s}
|
|
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent)}
|
|
textarea{resize:vertical;min-height:50px}
|
|
label{font-size:.72rem;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.04em}
|
|
.row{display:flex;gap:.4rem;align-items:center;margin-bottom:.4rem}
|
|
/* Badge */
|
|
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:.68rem;font-weight:600}
|
|
.badge-ok{background:rgba(34,197,94,.12);color:var(--success)} .badge-err{background:rgba(239,68,68,.12);color:var(--danger)} .badge-warn{background:rgba(245,158,11,.12);color:var(--warn)} .badge-info{background:rgba(99,102,241,.12);color:var(--accent2)}
|
|
/* Table */
|
|
table{width:100%;border-collapse:collapse;font-size:.76rem}
|
|
th{color:var(--muted);font-weight:600;text-transform:uppercase;font-size:.68rem;letter-spacing:.04em;padding:6px 8px;border-bottom:1px solid var(--border)}
|
|
td{padding:5px 8px;border-bottom:1px solid rgba(30,41,55,.5)}
|
|
tr:hover td{background:rgba(14,165,233,.03)}
|
|
/* Action buttons grid */
|
|
.action-btn{background:var(--panel2);color:var(--text);border:1px solid var(--border);padding:.35rem .6rem;border-radius:6px;cursor:pointer;font-size:.72rem;transition:all .15s;display:inline-flex;align-items:center;gap:3px}
|
|
.action-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
|
|
.action-btn.running{background:var(--accent);color:#fff;animation:pulse 1s infinite;pointer-events:none}
|
|
.action-btn:disabled{opacity:.3;cursor:not-allowed}
|
|
.type-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0} .type-sdk{background:#a78bfa} .type-jsonl{background:var(--success)}
|
|
.action-list{max-height:260px;overflow-y:auto;border:1px solid var(--border);border-radius:6px;background:var(--panel2)}
|
|
.action-row{display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem;border-bottom:1px solid var(--border);cursor:pointer;font-size:.78rem;user-select:none;transition:background .1s}
|
|
.action-row:last-child{border-bottom:none}
|
|
.action-row:hover{background:rgba(255,255,255,.04)}
|
|
.action-row.selected{background:var(--accent);color:#fff}
|
|
.action-row.running{background:var(--accent);color:#fff;animation:pulse 1s infinite}
|
|
.action-row .r-name{flex:1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
.action-row .r-meta{color:var(--dim);font-size:.7rem;font-variant-numeric:tabular-nums;white-space:nowrap}
|
|
.action-row.selected .r-meta{color:rgba(255,255,255,.85)}
|
|
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
|
|
/* Mute */
|
|
.mute-btn{min-width:80px;text-align:center;padding:.35rem .6rem;border-radius:6px;font-size:.76rem;font-weight:500;cursor:pointer;border:1px solid var(--border);transition:all .15s}
|
|
.mute-btn.off{background:rgba(34,197,94,.1);color:var(--success);border-color:rgba(34,197,94,.25)}
|
|
.mute-btn.on{background:rgba(239,68,68,.12);color:var(--danger);border-color:rgba(239,68,68,.3)}
|
|
/* Gallery */
|
|
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.5rem;max-height:220px;overflow-y:auto;padding:.2rem}
|
|
.gallery-grid img{width:100%;height:85px;object-fit:cover;border-radius:8px;cursor:pointer;border:2px solid var(--border);transition:all .15s}
|
|
.gallery-grid img:hover{border-color:var(--accent);transform:scale(1.03)}
|
|
/* Log box */
|
|
.log-box{background:#000;color:#4ade80;font-family:'JetBrains Mono','Fira Code',monospace;font-size:.7rem;padding:.6rem;border-radius:8px;overflow-y:auto;white-space:pre-wrap;line-height:1.4;border:1px solid var(--border)}
|
|
/* Toast */
|
|
#toast-box{position:fixed;top:4rem;right:1rem;z-index:9999;display:flex;flex-direction:column;gap:.4rem}
|
|
.toast{padding:.55rem 1rem;border-radius:8px;font-size:.78rem;color:#fff;animation:slideIn .25s;max-width:360px;word-break:break-word;backdrop-filter:blur(8px);box-shadow:0 4px 12px rgba(0,0,0,.3)}
|
|
.toast-ok{background:rgba(22,101,52,.92)} .toast-err{background:rgba(153,27,27,.92)} .toast-info{background:rgba(30,64,175,.92)}
|
|
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
|
|
/* Empty state */
|
|
.empty{color:var(--dim);font-size:.78rem;text-align:center;padding:1.5rem;font-style:italic}
|
|
/* Toggle switch */
|
|
.switch{position:relative;width:36px;height:20px;display:inline-block}
|
|
.switch input{opacity:0;width:0;height:0}
|
|
.switch .slider{position:absolute;inset:0;background:var(--dim);border-radius:10px;cursor:pointer;transition:.2s}
|
|
.switch .slider::before{content:'';position:absolute;width:16px;height:16px;left:2px;bottom:2px;background:#fff;border-radius:50%;transition:.2s}
|
|
.switch input:checked+.slider{background:var(--accent)}
|
|
.switch input:checked+.slider::before{transform:translateX(16px)}
|
|
/* Scrollbar */
|
|
::-webkit-scrollbar{width:6px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--dim);border-radius:3px} ::-webkit-scrollbar-thumb:hover{background:var(--muted)}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="toast-box"></div>
|
|
|
|
<!-- Header -->
|
|
<header>
|
|
<h1><span>Sanad</span> Dashboard</h1>
|
|
<div class="hdr-right">
|
|
<span id="mic-badge" class="hdr-badge hdr-badge-err" style="display:none">MIC OFF</span>
|
|
<span id="spk-badge" class="hdr-badge hdr-badge-err" style="display:none">SPK OFF</span>
|
|
<span id="gemini-badge" class="hdr-badge" style="display:none"></span>
|
|
<span id="arm-hdr-badge" class="hdr-badge" style="display:none"></span>
|
|
<span class="dot" id="status-dot"></span>
|
|
<span id="status-text" style="font-size:.78rem">Connecting...</span>
|
|
<button class="btn btn-ghost btn-sm" onclick="logout()">Logout</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Tabs -->
|
|
<div class="tabs">
|
|
<div class="tab active" onclick="switchTab('voice')">Voice & Audio</div>
|
|
<div class="tab" onclick="switchTab('recordings')">Recordings</div>
|
|
<div class="tab" onclick="switchTab('settings')">Settings & Logs</div>
|
|
</div>
|
|
|
|
<!-- ==================== TAB: Voice & Audio ==================== -->
|
|
<div class="tab-content active" id="tab-voice">
|
|
<div class="grid">
|
|
|
|
<!-- Gemini API Key -->
|
|
<div class="card card-full">
|
|
<h3>Gemini API Key</h3>
|
|
<div style="font-size:.72rem;color:var(--muted);margin-bottom:.4rem">
|
|
The key used by <strong>GeminiVoiceClient</strong> and the <strong>Live Gemini subprocess</strong>.
|
|
Saved to <code>data/motions/config.json</code>. Get a free key at
|
|
<a href="https://aistudio.google.com/app/apikey" target="_blank" style="color:var(--accent)">aistudio.google.com/app/apikey</a>.
|
|
</div>
|
|
<div class="row" style="align-items:center;gap:.4rem">
|
|
<label style="min-width:70px">Current</label>
|
|
<input id="gm-key-current" readonly style="flex:1;font-family:monospace;letter-spacing:1px" placeholder="(not loaded)">
|
|
<span id="gm-key-source" class="badge" style="font-size:.65rem"></span>
|
|
<button class="btn btn-ghost btn-sm" onclick="refreshApiKey(this)" title="Reload masked key from server">Refresh</button>
|
|
</div>
|
|
<div class="row" style="align-items:center;gap:.4rem;margin-top:.4rem">
|
|
<label style="min-width:70px">New key</label>
|
|
<input id="gm-key-new" type="password" placeholder="Paste new AIza... key here" style="flex:1;font-family:monospace" autocomplete="off">
|
|
<button class="btn btn-ghost btn-sm" onclick="toggleApiKeyVisibility()" title="Show/hide while typing">👁</button>
|
|
<button class="btn btn-primary btn-sm" onclick="saveApiKey(this)" title="Validate, save to config.json, hot-swap in memory">Save</button>
|
|
</div>
|
|
<div id="gm-key-msg" style="font-size:.7rem;margin-top:.3rem;color:var(--muted)"></div>
|
|
</div>
|
|
|
|
<!-- Typed Replay -->
|
|
<div class="card card-full">
|
|
<h3>Typed Replay Engine</h3>
|
|
<div style="display:flex;gap:1rem;flex-wrap:wrap">
|
|
<div style="flex:2;min-width:280px">
|
|
<textarea id="tr-text" placeholder="Type the sentence Gemini should speak exactly..." rows="2"></textarea>
|
|
<div class="row" style="margin-top:.3rem">
|
|
<label class="switch"><input type="checkbox" id="tr-capture" checked><span class="slider"></span></label>
|
|
<label style="margin-right:.5rem">Record speaker</label>
|
|
<input id="tr-name" placeholder="Record name (optional)" style="flex:1">
|
|
</div>
|
|
<div class="row" style="margin-top:.3rem">
|
|
<button class="btn btn-primary" onclick="trGenerate(this)">Generate & Play</button>
|
|
<button class="btn btn-ghost" onclick="trReplayLast(this)">Replay Last</button>
|
|
<button class="btn btn-success" onclick="trSaveLast(this)">Save Last</button>
|
|
</div>
|
|
</div>
|
|
<div style="flex:1;min-width:200px">
|
|
<label>Session</label>
|
|
<div id="tr-session" style="font-size:.72rem;color:var(--muted);margin-top:.3rem;line-height:1.6"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==================== TAB: Recordings ==================== -->
|
|
<div class="tab-content" id="tab-recordings">
|
|
<div class="grid">
|
|
|
|
<!-- Saved Records -->
|
|
<div class="card card-full">
|
|
<h3>Saved Records</h3>
|
|
<div id="records-list"><div class="empty">No records saved</div></div>
|
|
<div class="row" style="margin-top:.3rem;gap:.3rem">
|
|
<button class="btn btn-ghost btn-sm" onclick="refreshRecords()">Refresh</button>
|
|
<button class="btn btn-danger btn-sm" onclick="deleteAllRecords()" style="margin-left:auto"
|
|
title="Permanently delete every WAV in data/audio and clear the index">Delete All</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==================== TAB: Settings & Logs ==================== -->
|
|
<div class="tab-content" id="tab-settings">
|
|
<div class="grid">
|
|
|
|
<!-- Scripts -->
|
|
<div class="card">
|
|
<h3>Scripts Manager</h3>
|
|
<div class="row"><select id="script-select" style="flex:1" onchange="loadScript(this.value)"><option value="">-- select --</option></select><button class="btn btn-ghost btn-sm" onclick="refreshScripts()">Refresh</button></div>
|
|
<textarea id="script-content" placeholder="Script content..." style="min-height:100px"></textarea>
|
|
<div class="row" style="margin-top:.3rem">
|
|
<button class="btn btn-primary btn-sm" onclick="saveScript()">Save</button>
|
|
<input id="script-new-name" placeholder="new_file.txt" style="flex:1">
|
|
<button class="btn btn-success btn-sm" onclick="createScript()">Create</button>
|
|
<button class="btn btn-danger btn-sm" onclick="deleteScript()">Delete</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Prompt -->
|
|
<div class="card">
|
|
<h3>Prompt Management</h3>
|
|
<div id="prompt-info" style="font-size:.7rem;color:var(--dim);margin-bottom:.3rem"></div>
|
|
<textarea id="prompt-content" placeholder="System prompt..." style="min-height:100px"></textarea>
|
|
<div class="row" style="margin-top:.3rem">
|
|
<button class="btn btn-primary btn-sm" onclick="updatePrompt()">Save</button>
|
|
<button class="btn btn-ghost btn-sm" onclick="reloadPrompt()">Reload from Disk</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Logs -->
|
|
<div class="card card-full">
|
|
<h3>Live Logs</h3>
|
|
<div class="row" style="margin-bottom:.3rem;flex-wrap:wrap;gap:.3rem">
|
|
<button class="btn btn-ghost btn-sm" onclick="saveLogSnapshot()" title="Save a timestamped copy of all .log files under logs/">Save Snapshot</button>
|
|
<button class="btn btn-primary btn-sm" onclick="copyAllLogs(this)" title="Fetch system status + every log file and copy to clipboard">Copy All</button>
|
|
<button class="btn btn-ghost btn-sm" onclick="copyVisibleLogs(this)" title="Copy only what's currently in the log box below">Copy Visible</button>
|
|
<button class="btn btn-ghost btn-sm" onclick="downloadLogBundle()" title="Download the full bundle as a .txt file">Download</button>
|
|
<button class="btn btn-ghost btn-sm" onclick="document.getElementById('log-box').textContent=''">Clear</button>
|
|
</div>
|
|
<div class="log-box" id="log-box" style="height:300px"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const API='';
|
|
function toast(m,t='info'){const b=document.getElementById('toast-box'),e=document.createElement('div');e.className='toast toast-'+t;e.textContent=m;b.appendChild(e);setTimeout(()=>e.remove(),3500);}
|
|
function esc(s){return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"').replace(/'/g,''');}
|
|
function btnLoad(b){if(b&&b.classList)b.classList.add('loading');}
|
|
function btnDone(b){if(b&&b.classList)b.classList.remove('loading');}
|
|
async function api(m,p,b){const o={method:m,headers:{'Content-Type':'application/json'},credentials:'same-origin'};if(b)o.body=JSON.stringify(b);const r=await fetch(API+p,o);if(r.status===401){location.href='/login?next='+encodeURIComponent(location.pathname);throw new Error('Not authenticated');}const j=await r.json();if(!r.ok){toast(j.detail||j.error||'Error '+r.status,'err');throw new Error(j.detail||j.error);}return j;}
|
|
|
|
// Tabs
|
|
function switchTab(name){document.querySelectorAll('.tab').forEach(t=>t.classList.toggle('active',t.textContent.toLowerCase().includes(name.slice(0,4))));document.querySelectorAll('.tab-content').forEach(c=>c.classList.toggle('active',c.id==='tab-'+name));}
|
|
|
|
// Logout — clears the session cookie, then bounces to /login
|
|
async function logout(){
|
|
try{await fetch('/api/auth/logout',{method:'POST',credentials:'same-origin'});}catch(e){}
|
|
location.href='/login';
|
|
}
|
|
|
|
// Gemini API key — show masked current value + save a new one
|
|
async function refreshApiKey(b){
|
|
if(b)btnLoad(b);
|
|
try{
|
|
const r=await api('GET','/api/voice/api-key');
|
|
const inp=document.getElementById('gm-key-current');
|
|
const src=document.getElementById('gm-key-source');
|
|
const msg=document.getElementById('gm-key-msg');
|
|
if(r.has_key){
|
|
inp.value=r.masked||'';
|
|
inp.placeholder='';
|
|
src.textContent=r.source==='config_file'?'saved':'default';
|
|
src.className='badge '+(r.source==='config_file'?'badge-ok':'badge-warn');
|
|
msg.textContent=`Length: ${r.length} chars`;
|
|
}else{
|
|
inp.value='';
|
|
inp.placeholder='(no key configured)';
|
|
src.textContent='empty';
|
|
src.className='badge badge-err';
|
|
msg.textContent='No API key — paste one below to enable Gemini.';
|
|
}
|
|
}catch(e){}
|
|
if(b)btnDone(b);
|
|
}
|
|
|
|
function toggleApiKeyVisibility(){
|
|
const inp=document.getElementById('gm-key-new');
|
|
inp.type=inp.type==='password'?'text':'password';
|
|
}
|
|
|
|
async function saveApiKey(b){
|
|
const inp=document.getElementById('gm-key-new');
|
|
const key=(inp.value||'').trim();
|
|
const msg=document.getElementById('gm-key-msg');
|
|
if(!key){toast('Paste a key first','err');return;}
|
|
if(!key.startsWith('AIza')){
|
|
if(!confirm("Key doesn't start with 'AIza'. Gemini keys normally do. Save anyway?"))return;
|
|
}
|
|
btnLoad(b);
|
|
try{
|
|
const r=await api('POST','/api/voice/api-key',{api_key:key});
|
|
toast(`API key saved (${r.length} chars)`,'ok');
|
|
inp.value='';
|
|
inp.type='password';
|
|
msg.textContent=r.message||'Saved. Click Connect to apply.';
|
|
msg.style.color='var(--accent)';
|
|
setTimeout(()=>{msg.style.color='var(--muted)';},4000);
|
|
await refreshApiKey();
|
|
refreshStatus();
|
|
}catch(e){
|
|
msg.textContent='Save failed: '+(e.message||'unknown');
|
|
msg.style.color='#f55';
|
|
}
|
|
btnDone(b);
|
|
}
|
|
|
|
// Audio — only updates the mic/spk badges and mute-shortcut buttons that
|
|
// still exist in the Voice & Audio cards. Heavier audio device picker
|
|
// + G1 volume slider were removed with the Operations tab.
|
|
async function refreshAudio(){
|
|
try{
|
|
const r=await api('GET','/api/audio/status');
|
|
document.getElementById('mic-badge').style.display=r.mic_muted?'inline-flex':'none';
|
|
document.getElementById('spk-badge').style.display=r.speaker_muted?'inline-flex':'none';
|
|
document.querySelectorAll('.mic-mute-shortcut').forEach(btn=>{
|
|
btn.textContent=r.mic_muted?'Mic: MUTED':'Mic: LIVE';
|
|
btn.className='btn btn-sm mic-mute-shortcut '+(r.mic_muted?'btn-danger':'btn-success');
|
|
btn.title=r.mic_muted?'Microphone is MUTED — click to unmute':'Microphone is LIVE — click to mute';
|
|
});
|
|
document.querySelectorAll('.spk-mute-shortcut').forEach(btn=>{
|
|
const parts=[];
|
|
if(r.pulse_sink_muted)parts.push('PulseAudio sink muted');
|
|
if(r.g1_speaker_muted)parts.push('G1 speaker volume 0');
|
|
const tip=r.speaker_muted
|
|
? ('Speaker MUTED ('+(parts.join(', ')||'unknown')+') — click to unmute')
|
|
: 'Speaker LIVE — click to mute (hits both PulseAudio and G1 DDS)';
|
|
btn.textContent=r.speaker_muted?'Speaker: MUTED':'Speaker: LIVE';
|
|
btn.className='btn btn-sm spk-mute-shortcut '+(r.speaker_muted?'btn-danger':'btn-success');
|
|
btn.title=tip;
|
|
});
|
|
}catch(e){}
|
|
}
|
|
async function toggleMic(){try{await api('POST','/api/audio/mic/mute');}catch(e){}refreshAudio();}
|
|
async function toggleSpeaker(){try{await api('POST','/api/audio/speaker/mute');}catch(e){}refreshAudio();}
|
|
|
|
// Scripts
|
|
async function refreshScripts(){try{const r=await api('GET','/api/scripts/');const sel=document.getElementById('script-select');sel.innerHTML='<option value="">-- select --</option>'+(r.files||[]).map(f=>`<option value="${esc(f.name)}">${esc(f.name)} (${f.size_bytes}B)</option>`).join('');}catch(e){}}
|
|
async function loadScript(name){if(!name)return;try{const r=await api('POST','/api/scripts/load',{name});document.getElementById('script-content').value=r.content||'';}catch(e){}}
|
|
async function saveScript(){const name=document.getElementById('script-select').value,content=document.getElementById('script-content').value;if(!name)return toast('Select file','err');try{await api('POST','/api/scripts/save',{name,content});toast('Saved','ok');refreshScripts();}catch(e){}}
|
|
async function createScript(){const name=document.getElementById('script-new-name').value,content=document.getElementById('script-content').value;if(!name)return toast('Enter filename','err');try{await api('POST','/api/scripts/create',{name,content});toast('Created: '+name,'ok');refreshScripts();}catch(e){}}
|
|
async function deleteScript(){const name=document.getElementById('script-select').value;if(!name)return;if(confirm('Delete '+name+'?'))try{await api('POST','/api/scripts/delete',{name});toast('Deleted','ok');document.getElementById('script-content').value='';refreshScripts();}catch(e){}}
|
|
|
|
// Prompt
|
|
async function refreshPrompt(){try{const r=await api('GET','/api/prompt/');document.getElementById('prompt-content').value=r.system_prompt||'';document.getElementById('prompt-info').textContent=`Script: ${r.script_path} | Rule: ${r.rule_path}`;}catch(e){}}
|
|
async function updatePrompt(){try{await api('POST','/api/prompt/update',{content:document.getElementById('prompt-content').value});toast('Saved','ok');}catch(e){}}
|
|
async function reloadPrompt(){try{const r=await api('POST','/api/prompt/reload');document.getElementById('prompt-content').value=r.system_prompt||'';toast('Reloaded','ok');}catch(e){}}
|
|
|
|
// Typed Replay — audio plays in YOUR browser (not the server's speaker).
|
|
let _trAudio=null;
|
|
function _playTRInBrowser(){
|
|
try{if(_trAudio){_trAudio.pause();_trAudio.src='';}}catch(e){}
|
|
_trAudio=new Audio(API+'/api/typed-replay/audio/last?t='+Date.now());
|
|
return _trAudio.play();
|
|
}
|
|
async function trGenerate(b){
|
|
const t=document.getElementById('tr-text').value;
|
|
if(!t)return toast('Enter text','err');
|
|
btnLoad(b);
|
|
try{
|
|
await api('POST','/api/typed-replay/say',{
|
|
text:t,
|
|
record:document.getElementById('tr-capture').checked,
|
|
record_name:document.getElementById('tr-name').value,
|
|
});
|
|
await _playTRInBrowser();
|
|
toast('Generated — playing in your browser','ok');
|
|
refreshTR();
|
|
}catch(e){toast('Play failed: '+(e&&e.message||e),'err');}
|
|
btnDone(b);
|
|
}
|
|
async function trReplayLast(b){
|
|
btnLoad(b);
|
|
try{
|
|
await api('POST','/api/typed-replay/replay-last');
|
|
await _playTRInBrowser();
|
|
toast('Replayed','ok');
|
|
refreshTR();
|
|
}catch(e){toast('Replay failed: '+(e&&e.message||e),'err');}
|
|
btnDone(b);
|
|
}
|
|
async function trSaveLast(b){btnLoad(b);try{await api('POST','/api/typed-replay/save-last',{record_name:document.getElementById('tr-name').value});toast('Saved','ok');refreshTR();refreshRecords();}catch(e){}btnDone(b);}
|
|
async function refreshTR(){try{const r=await api('GET','/api/typed-replay/status');const s=r.session||{};document.getElementById('tr-session').innerHTML=`<strong>Text:</strong> ${esc(s.text||'--')}<br><strong>Audio:</strong> ${s.has_audio?'Yes':'No'} | <strong>Capture:</strong> ${s.has_capture?'Yes':'No'}<br><strong>Replays:</strong> ${s.replay_count||0}<br><strong>Generated:</strong> ${s.generated_at||'--'}<br><strong>Saved:</strong> ${esc(s.saved_as||'--')}`;}catch(e){}}
|
|
|
|
// Records
|
|
async function refreshRecords(){try{const r=await api('GET','/api/records/');const el=document.getElementById('records-list');if(!(r.records||[]).length){el.innerHTML='<div class="empty">No records saved</div>';return;}el.innerHTML=`<div style="font-size:.7rem;color:var(--dim);margin-bottom:.3rem">Total: ${r.total_records} | Updated: ${r.last_updated||'--'}</div><table><tr><th>Name</th><th>Text</th><th>Replays</th><th></th></tr>`+(r.records||[]).map(rec=>{const n=esc(rec.record_name);return`<tr><td>${n}</td><td style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(rec.text||'')}</td><td>${rec.replay_count||0}</td><td><button class="btn btn-primary btn-sm" onclick="playRecord('${n}','speaker')">Play</button> <button class="btn btn-ghost btn-sm" onclick="playRecord('${n}','raw')">Raw</button> <button class="btn btn-success btn-sm" onclick="downloadRecord('${n}','speaker')">Download</button> <button class="btn btn-danger btn-sm" onclick="deleteRecord('${n}')">Del</button></td></tr>`;}).join('')+'</table>';}catch(e){}}
|
|
// Browser-side playback — streams the WAV from /api/records/audio/{name}
|
|
// and plays it through the user's speakers (not the robot's).
|
|
let _recordAudio=null;
|
|
function playRecord(name,kind){
|
|
try{if(_recordAudio){_recordAudio.pause();_recordAudio.src='';}}catch(e){}
|
|
const url=API+'/api/records/audio/'+encodeURIComponent(name)+'?kind='+encodeURIComponent(kind||'speaker');
|
|
_recordAudio=new Audio(url);
|
|
_recordAudio.play()
|
|
.then(()=>toast('Playing: '+name+' ('+(kind||'speaker')+')','ok'))
|
|
.catch(err=>toast('Play failed: '+(err&&err.message||err),'err'));
|
|
}
|
|
async function deleteRecord(name){if(confirm('Delete '+name+'?'))try{await api('POST','/api/records/delete',{record_name:name});toast('Deleted','ok');refreshRecords();}catch(e){}}
|
|
async function deleteAllRecords(){
|
|
if(!confirm('Delete ALL saved recordings? This wipes every WAV in data/audio and cannot be undone.'))return;
|
|
try{
|
|
const r=await api('POST','/api/records/delete-all');
|
|
toast(`Deleted ${r.deleted_count} file${r.deleted_count===1?'':'s'}`,'ok');
|
|
refreshRecords();
|
|
}catch(e){toast('Delete all failed: '+(e&&e.message||e),'err');}
|
|
}
|
|
function downloadRecord(name,kind){
|
|
const k=kind||'speaker';
|
|
const a=document.createElement('a');
|
|
a.href=API+'/api/records/audio/'+encodeURIComponent(name)+'?kind='+encodeURIComponent(k);
|
|
a.download=name+(k==='raw'?'_raw':'')+'.wav';
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
setTimeout(()=>a.remove(),100);
|
|
toast('Downloading: '+name,'info');
|
|
}
|
|
|
|
// Log Snapshot
|
|
async function saveLogSnapshot(){try{const r=await api('POST','/api/logs/snapshot');toast(`Snapshot saved (${r.snapshots?.length||0} files)`,'ok');}catch(e){}}
|
|
|
|
// Logs — copy + download
|
|
async function _fetchLogBundle(lines){
|
|
const url='/api/logs/bundle'+(lines?('?lines='+lines):'');
|
|
const r=await fetch(url);
|
|
if(!r.ok){toast('Bundle fetch failed: HTTP '+r.status,'err');throw new Error('bundle fetch failed');}
|
|
return await r.text();
|
|
}
|
|
|
|
async function _copyToClipboard(text){
|
|
// Prefer the modern Clipboard API (https or localhost)
|
|
if(navigator.clipboard&&window.isSecureContext){
|
|
try{await navigator.clipboard.writeText(text);return true;}catch(e){/* fall through */}
|
|
}
|
|
// Fallback: hidden textarea + execCommand (works on http://wlan-ip:8000)
|
|
try{
|
|
const ta=document.createElement('textarea');
|
|
ta.value=text;
|
|
ta.setAttribute('readonly','');
|
|
ta.style.position='fixed';ta.style.left='-9999px';ta.style.top='0';
|
|
document.body.appendChild(ta);
|
|
ta.focus();ta.select();
|
|
const ok=document.execCommand('copy');
|
|
document.body.removeChild(ta);
|
|
return ok;
|
|
}catch(e){return false;}
|
|
}
|
|
|
|
async function copyAllLogs(b){
|
|
if(b)btnLoad(b);
|
|
try{
|
|
toast('Fetching log bundle...','info');
|
|
const text=await _fetchLogBundle(1000);
|
|
const ok=await _copyToClipboard(text);
|
|
const kb=(text.length/1024).toFixed(1);
|
|
if(ok){
|
|
toast(`Copied ${kb} KB to clipboard`,'ok');
|
|
}else{
|
|
toast('Clipboard unavailable — use Download instead','err');
|
|
}
|
|
}catch(e){}
|
|
if(b)btnDone(b);
|
|
}
|
|
|
|
async function copyVisibleLogs(b){
|
|
if(b)btnLoad(b);
|
|
const text=document.getElementById('log-box').textContent||'';
|
|
if(!text.trim()){toast('Log box is empty','info');if(b)btnDone(b);return;}
|
|
const ok=await _copyToClipboard(text);
|
|
const kb=(text.length/1024).toFixed(1);
|
|
toast(ok?`Copied ${kb} KB to clipboard`:'Clipboard unavailable','ok');
|
|
if(b)btnDone(b);
|
|
}
|
|
|
|
// Generic — copy whatever is inside the element with the given id.
|
|
// Used by the small "Copy" button on every log-box card in the dashboard.
|
|
async function copyLogBox(elId, b){
|
|
if(b)btnLoad(b);
|
|
const el=document.getElementById(elId);
|
|
const text=(el?.textContent||'').trim();
|
|
if(!text){toast('Nothing to copy','info');if(b)btnDone(b);return;}
|
|
const ok=await _copyToClipboard(text);
|
|
const kb=(text.length/1024).toFixed(1);
|
|
toast(ok?`Copied ${kb} KB`:'Clipboard unavailable',ok?'ok':'err');
|
|
if(b)btnDone(b);
|
|
}
|
|
|
|
function downloadLogBundle(){
|
|
// Browser directly downloads the /bundle endpoint — no intermediate JS
|
|
const ts=new Date().toISOString().replace(/[:.]/g,'-').slice(0,19);
|
|
const a=document.createElement('a');
|
|
a.href='/api/logs/bundle?lines=5000';
|
|
a.download=`sanad_bundle_${ts}.txt`;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
toast('Downloading bundle...','info');
|
|
}
|
|
|
|
// Status
|
|
async function refreshStatus(){try{const s=await api('GET','/api/status');document.getElementById('status-dot').className='dot dot-ok';document.getElementById('status-text').textContent='Online';const gb=document.getElementById('gemini-badge');if(s.voice?.connected){gb.style.display='inline-flex';gb.className='hdr-badge hdr-badge-ok';gb.textContent='GEMINI';}else{gb.style.display='inline-flex';gb.className='hdr-badge hdr-badge-err';gb.textContent='GEMINI OFF';}}catch(e){document.getElementById('status-dot').className='dot dot-err';document.getElementById('status-text').textContent='Offline';}}
|
|
|
|
// WebSocket logs
|
|
let logWs;function connectLogs(){const p=location.protocol==='https:'?'wss':'ws';logWs=new WebSocket(`${p}://${location.host}/ws/logs`);const box=document.getElementById('log-box');logWs.onmessage=e=>{box.textContent+=e.data+'\n';if(box.childNodes.length>1000)box.textContent=box.textContent.split('\n').slice(-500).join('\n');box.scrollTop=box.scrollHeight;};logWs.onclose=()=>setTimeout(connectLogs,3000);}
|
|
|
|
// Init — every audio feature in lite plays client-side via <audio> tags.
|
|
refreshStatus();refreshAudio();refreshScripts();refreshPrompt();refreshTR();refreshApiKey();refreshRecords();connectLogs();
|
|
setInterval(refreshStatus,5000);
|
|
</script>
|
|
</body>
|
|
</html>
|