caojunfei
/
audio_codebuddy


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>智能音箱测试工具</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,sans-serif;background:#0f172a;color:#e2e8f0;min-height:100vh;padding:20px}
.c{max-width:820px;margin:0 auto}
h1{font-size:24px;margin-bottom:20px;text-align:center;background:linear-gradient(135deg,#60a5fa,#c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.x{background:#1e293b;border-radius:12px;padding:18px;margin-bottom:14px;border:1px solid #334155}
.t{font-size:13px;color:#94a3b8;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px;font-weight:600}
.b{background:#3b82f6;color:white;border:none;padding:9px 18px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;transition:all .2s}
.b:hover{background:#2563eb;transform:translateY(-1px)}
.b:disabled{background:#475569;cursor:not-allowed;opacity:.6}
.bd{background:#ef4444}.bd:hover{background:#dc2626}
.bs{background:#10b981}.bs:hover{background:#059669}
.br{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.i,.s{background:#0f172a;border:1px solid #334155;color:#e2e8f0;padding:8px 12px;border-radius:6px;font-size:13px;width:100%;margin-bottom:8px}
.i:focus,.s:focus{outline:none;border-color:#3b82f6}
.l{display:block;font-size:11px;color:#94a3b8;margin-bottom:4px;text-transform:uppercase}
.tb{background:#0f172a;border:1px solid #334155;border-radius:8px;padding:12px;font-size:14px;min-height:50px;white-space:pre-wrap;word-break:break-word;line-height:1.5}
.tb.e{color:#64748b;font-style:italic}
.st{display:inline-block;padding:4px 10px;border-radius:12px;font-size:11px;font-weight:500}
.st.i{background:#334155;color:#94a3b8}
.st.r{background:#ef4444;color:white;animation:p 1s infinite}
.st.p{background:#f59e0b;color:white}
.st.s{background:#10b981;color:white}
.st.e{background:#ef4444;color:white}
@keyframes p{0%,100%{opacity:1}50%{opacity:.6}}
.w{height:60px;background:#0f172a;border-radius:8px;margin:10px 0;display:flex;align-items:center;justify-content:center;color:#64748b;font-size:13px;border:1px solid #334155}
audio{width:100%;margin-top:10px;height:36px}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lg{background:#020617;border:1px solid #334155;border-radius:8px;padding:10px;font-family:monospace;font-size:11px;max-height:180px;overflow-y:auto;color:#94a3b8}
.ln{margin-bottom:3px}.ln.e{color:#f87171}.ln.s{color:#6ee7b7}
.h{display:none}
.cb{cursor:pointer;user-select:none}.cb::before{content:"▼ ";font-size:10px}.cb.cl::before{content:"▶ "}
.dv{height:1px;background:#334155;margin:12px 0}
.tn{font-size:11px;color:#64748b}
</style>
</head>
<body>
<div class="c">
<h1>🎙️ 智能音箱测试工具 <span class="tn" style="color:#10b981">v6.0 ✨</span></h1>

<div class="x">
<div class="t cb cl" onclick="togCfg()">⚙️ 配置</div>
<div id="cb" class="h">
<div class="r2">
<div><label class="l">TTS 服务地址</label><input id="tbu" class="i" value="http://localhost:3000"></div>
<div><label class="l">音色</label><select id="vid" class="s"><option value="voice_01">温柔女声</option><option value="voice_02">磁性男声</option><option value="voice_03">活泼女声</option><option value="voice_05">阳光男声</option><option value="voice_09">亲切女声</option></select></div>
</div>
<div class="r2">
<div><label class="l">ASR</label><select id="ap" class="s"><option value="browser">浏览器原生（推荐）</option><option value="none">不用 ASR</option></select></div>
<div><label class="l">LLM</label><select id="lp" class="s"><option value="backend">后端代理（用 models.json）</option><option value="none">不用 LLM</option></select></div>
</div>
<div class="dv"></div>
<p class="tn" style="margin:8px 0">✅ 无需配置 API Key - 后端自动使用 models.json 中的 Key</p>
<label class="l">TTS API Key（可选）</label><input id="tk" type="password" class="i" placeholder="Bearer Token">
<button class="b" onclick="save()" style="margin-top:8px">💾 保存</button>
</div>
</div>

<div class="x">
<div class="t">🎤 1. 录音</div>
<div class="br">
<button id="br" class="b bd" onclick="rec()">▶ 开始录音</button>
<button id="bs" class="b" onclick="stp()" disabled>⏹ 停止</button>
<span id="rs" class="st i">待命</span>
<span class="tn" id="rt">0.0s</span>
</div>
<div id="wf" class="w">点击"开始录音"</div>
<audio id="ap" controls style="display:none"></audio>
</div>

<div class="x">
<div class="t">📝 2. ASR 识别结果（国内需手动输入）</div>
<div id="at" class="tb e">请录音后在此手动输入文字...</div>
<button class="b" onclick="manualA()" style="margin-top:10px">✏️ 手动输入文字</button>
</div>

<div class="x">
<div class="t">🤖 3. LLM 回复</div>
<div id="lt" class="tb e">等待识别...</div>
<div class="br" style="margin-top:10px">
<button class="b" onclick="manualL()">✏️ 手动输入</button>
<button class="b bs" onclick="skipL()">⏭️ 跳过 LLM</button>
</div>
</div>

<div class="x">
<div class="t">🔊 4. TTS 播放</div>
<div class="br">
<button id="bf" class="b bs" onclick="full()">🚀 完整流程</button>
<button id="bp" class="b" onclick="play()" disabled>▶ 播放</button>
<button id="bd" class="b" onclick="dl()" disabled>⬇ 下载</button>
<span id="ts" class="st i">待命</span>
</div>
<audio id="ta" controls></audio>
<div id="tu" class="tn" style="margin-top:8px;word-break:break-all"></div>
</div>

<div class="x">
<div class="t">📋 日志</div>
<div id="log" class="lg"></div>
<button class="b" onclick="cl()" style="margin-top:8px">清空</button>
</div>

</div>
<script src="app.js"></script>
</body>
</html>