Inicio Explorar Axuda
Iniciar sesión
caojunfei
/
audio_codebuddy
1
0
Fork 0
Ficheiros Incidencias 0 Pull Requests 0 Wiki
Rama: master
Ramas Etiquetas
audio_codebuddy
/
server
/
public
/
test
/
index.html

index.html 6.3 KB
Permalink Histórico Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3. <head>
    4. 

  4. <meta charset="UTF-8">
    5. 

  5. <title>智能音箱测试工具</title>
    6. 

  6. <style>
    7. 

  7. *{margin:0;padding:0;box-sizing:border-box}
    8. 

  8. body{font-family:-apple-system,BlinkMacSystemFont,sans-serif;background:#0f172a;color:#e2e8f0;min-height:100vh;padding:20px}
    9. 

  9. .c{max-width:820px;margin:0 auto}
    10. 

  10. 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}
    11. 

  11. .x{background:#1e293b;border-radius:12px;padding:18px;margin-bottom:14px;border:1px solid #334155}
    12. 

  12. .t{font-size:13px;color:#94a3b8;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px;font-weight:600}
    13. 

  13. .b{background:#3b82f6;color:white;border:none;padding:9px 18px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;transition:all .2s}
    14. 

  14. .b:hover{background:#2563eb;transform:translateY(-1px)}
    15. 

  15. .b:disabled{background:#475569;cursor:not-allowed;opacity:.6}
    16. 

  16. .bd{background:#ef4444}.bd:hover{background:#dc2626}
    17. 

  17. .bs{background:#10b981}.bs:hover{background:#059669}
    18. 

  18. .br{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
    19. 

  19. .i,.s{background:#0f172a;border:1px solid #334155;color:#e2e8f0;padding:8px 12px;border-radius:6px;font-size:13px;width:100%;margin-bottom:8px}
    20. 

  20. .i:focus,.s:focus{outline:none;border-color:#3b82f6}
    21. 

  21. .l{display:block;font-size:11px;color:#94a3b8;margin-bottom:4px;text-transform:uppercase}
    22. 

  22. .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}
    23. 

  23. .tb.e{color:#64748b;font-style:italic}
    24. 

  24. .st{display:inline-block;padding:4px 10px;border-radius:12px;font-size:11px;font-weight:500}
    25. 

  25. .st.i{background:#334155;color:#94a3b8}
    26. 

  26. .st.r{background:#ef4444;color:white;animation:p 1s infinite}
    27. 

  27. .st.p{background:#f59e0b;color:white}
    28. 

  28. .st.s{background:#10b981;color:white}
    29. 

  29. .st.e{background:#ef4444;color:white}
    30. 

  30. @keyframes p{0%,100%{opacity:1}50%{opacity:.6}}
    31. 

  31. .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}
    32. 

  32. audio{width:100%;margin-top:10px;height:36px}
    33. 

  33. .r2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    34. 

  34. .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}
    35. 

  35. .ln{margin-bottom:3px}.ln.e{color:#f87171}.ln.s{color:#6ee7b7}
    36. 

  36. .h{display:none}
    37. 

  37. .cb{cursor:pointer;user-select:none}.cb::before{content:"▼ ";font-size:10px}.cb.cl::before{content:"▶ "}
    38. 

  38. .dv{height:1px;background:#334155;margin:12px 0}
    39. 

  39. .tn{font-size:11px;color:#64748b}
    40. 

  40. </style>
    41. 

  41. </head>
    42. 

  42. <body>
    43. 

  43. <div class="c">
    44. 

  44. <h1>🎙️ 智能音箱测试工具 <span class="tn" style="color:#10b981">v6.0 ✨</span></h1>
    45. 

  45. 

  46. <!-- 流程步骤状态条 -->
    47. 

  47. <div style="background:#1e293b;border-radius:8px;padding:10px 14px;margin-bottom:14px;border:1px solid #334155;font-size:13px;text-align:center" id="fs">
    48. 

  48.   <span style="color:#475569">⏸ 待命</span> <span style="color:#334155">→</span> <span style="color:#475569">🎤 录音中</span> <span style="color:#334155">→</span> <span style="color:#475569">📝 ASR识别</span> <span style="color:#334155">→</span> <span style="color:#475569">🤖 LLM调用</span> <span style="color:#334155">→</span> <span style="color:#475569">🔊 TTS合成</span> <span style="color:#334155">→</span> <span style="color:#475569">✅ 完成</span>
    49. 

  49. </div>
    50. 

  50. 

  51. <div class="x">
    52. 

  52. <div class="t cb cl" onclick="togCfg()">⚙️ 配置</div>
    53. 

  53. <div id="cb" class="h">
    54. 

  54. <div class="r2">
    55. 

  55. <div><label class="l">TTS 服务地址</label><input id="tbu" class="i" value="http://localhost:3000"></div>
    56. 

  56. <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>
    57. 

  57. </div>
    58. 

  58. <div class="r2">
    59. 

  59. <div><label class="l">ASR</label><select id="ap" class="s"><option value="browser">浏览器原生（推荐）</option><option value="none">不用 ASR</option></select></div>
    60. 

  60. <div><label class="l">LLM</label><select id="lp" class="s"><option value="backend">后端代理（用 models.json）</option><option value="none">不用 LLM</option></select></div>
    61. 

  61. </div>
    62. 

  62. <div class="dv"></div>
    63. 

  63. <p class="tn" style="margin:8px 0">✅ 无需配置 API Key - 后端自动使用 models.json 中的 Key</p>
    64. 

  64. <label class="l">TTS API Key（可选）</label><input id="tk" type="password" class="i" placeholder="Bearer Token">
    65. 

  65. <button class="b" onclick="save()" style="margin-top:8px">💾 保存</button>
    66. 

  66. </div>
    67. 

  67. </div>
    68. 

  68. 

  69. <div class="x">
    70. 

  70. <div class="t">🎤 1. 录音</div>
    71. 

  71. <div class="br">
    72. 

  72. <button id="br" class="b bd" onclick="rec()">▶ 开始录音</button>
    73. 

  73. <button id="bs" class="b" onclick="stp()" disabled>⏹ 停止</button>
    74. 

  74. <span id="rs" class="st i">待命</span>
    75. 

  75. <span class="tn" id="rt">0.0s</span>
    76. 

  76. </div>
    77. 

  77. <div id="wf" class="w">点击"开始录音"</div>
    78. 

  78. <audio id="ap" controls style="display:none"></audio>
    79. 

  79. </div>
    80. 

  80. 

  81. <div class="x">
    82. 

  82. <div class="t">📝 2. ASR 识别结果（国内需手动输入）</div>
    83. 

  83. <div id="at" class="tb e">请录音后在此手动输入文字...</div>
    84. 

  84. <button class="b" onclick="manualA()" style="margin-top:10px">✏️ 手动输入文字</button>
    85. 

  85. </div>
    86. 

  86. 

  87. <div class="x">
    88. 

  88. <div class="t">🤖 3. LLM 回复</div>
    89. 

  89. <div id="lt" class="tb e">等待识别...</div>
    90. 

  90. <div class="br" style="margin-top:10px">
    91. 

  91. <button class="b" onclick="manualL()">✏️ 手动输入</button>
    92. 

  92. <button class="b bs" onclick="skipL()">⏭️ 跳过 LLM</button>
    93. 

  93. </div>
    94. 

  94. </div>
    95. 

  95. 

  96. <div class="x">
    97. 

  97. <div class="t">🔊 4. TTS 播放</div>
    98. 

  98. <div class="br">
    99. 

  99. <button id="bf" class="b bs" onclick="full()">🚀 完整流程</button>
    100. 

  100. <button id="bp" class="b" onclick="play()" disabled>▶ 播放</button>
    101. 

  101. <button id="bd" class="b" onclick="dl()" disabled>⬇ 下载</button>
    102. 

  102. <span id="ts" class="st i">待命</span>
    103. 

  103. </div>
    104. 

  104. <audio id="ta" controls></audio>
    105. 

  105. <div id="tu" class="tn" style="margin-top:8px;word-break:break-all"></div>
    106. 

  106. </div>
    107. 

  107. 

  108. <div class="x">
    109. 

  109. <div class="t">📋 日志</div>
    110. 

  110. <div id="log" class="lg"></div>
    111. 

  111. <button class="b" onclick="cl()" style="margin-top:8px">清空</button>
    112. 

  112. </div>
    113. 

  113. 

  114. </div>
    115. 

  115. <script src="/test/app.js"></script>
    116. 

  116. </body>
    117. 

  117. </html>
    118.