feat: Phase 5 STT — DashScope Gummy 实时语音识别 + 本地 Whisper 回退

- DashScope WebSocket STT 客户端 (gummy-chat-v1) - 双引擎架构: DashScope 优先, Whisper 本地回退 - 实时流式 STT WebSocket 端点 - DevTools 模型搜索框焦点修复 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-23 22:15:43 +08:00
parent 0717928496
commit b1e89c606e
9 changed files with 545 additions and 84 deletions
@@ -3892,32 +3892,63 @@ function updateModelTemplateOptions() {
  }
 }

-function renderFetchedModelList(models, filter) {
-  var area = document.getElementById('model-template-area');
-  if (!area) return;
-  var filterLower = (filter || '').toLowerCase();
-  var filtered = filterLower ? models.filter(function(m) { return m.toLowerCase().indexOf(filterLower) >= 0; }) : models;
-  var countInfo = filterLower ? '\uff08' + filtered.length + '/' + models.length + '\uff09' : '\uff08共 ' + models.length + ' \u4e2a\uff09';
-  var html = '<div style="display:flex;gap:8px;margin-bottom:8px">' +
-    '<input id="model-search-input" class="input" type="text" placeholder="\U0001f50d \u641c\u7d22\u6a21\u578b\u540d\u79f0...' + countInfo + '" value="' + escHtml(filter) + '"' +
-    ' oninput="renderFetchedModelList(STATE.fetchedModels, this.value)" style="flex:1;background:var(--bg);font-size:12px">' +
-    '<button type="button" class="btn btn-xs" onclick="var s=document.getElementById(&quot;model-search-input&quot;);if(s)s.value=&quot;&quot;;renderFetchedModelList(STATE.fetchedModels,&quot;&quot;);" title="\u6e05\u9664\u641c\u7d22">\u2715</button></div>' +
-    '<div id="fetched-model-list" style="max-height:220px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg)">';
-  if (filtered.length === 0) {
-    html += '<div class="empty-state" style="padding:12px"><div class="icon">\U0001f50d</div>\u65e0\u5339\u914d\u6a21\u578b</div>';
-  } else {
-    html += filtered.map(function(m) {
-      return '<div class="fetched-model-item"' +
-        ' data-model="' + escHtml(m) + '"' +
-        ' onclick="var mn=this.getAttribute(&quot;data-model&quot;);selectFetchedModel(mn);"' +
-        ' style="padding:6px 12px;cursor:pointer;font-size:12px;border-bottom:1px solid var(--border);transition:background .12s"' +
-        ' onmouseenter="this.style.background=&quot;var(--bg3)&quot;"' +
-        ' onmouseleave="this.style.background=&quot;&quot;">' + escHtml(m) + '</div>';
-    }).join('');
-  }
-  html += '</div>';
-  area.innerHTML = html;
-}
+	function renderFetchedModelList(models, filter) {
+	  var area = document.getElementById('model-template-area');
+	  if (!area) return;
+	  var filterLower = (filter || '').toLowerCase();
+	  var filtered = filterLower ? models.filter(function(m) { return m.toLowerCase().indexOf(filterLower) >= 0; }) : models;
+	  var countInfo = filterLower ? '\uff08' + filtered.length + '/' + models.length + '\uff09' : '\uff08共 ' + models.length + ' \u4e2a\uff09';
+	  // 搜索栏 + 结果列表分离：搜索框保持在 DOM 中，oninput 只更新结果列表
+	  var html = '<div id="model-search-bar" style="display:flex;gap:8px;margin-bottom:8px">' +
+	    '<input id="model-search-input" class="input" type="text" placeholder="\U0001f50d \u641c索模型名称...' + countInfo + '" value="' + escHtml(filter) + '"' +
+	    ' oninput="filterFetchedModels()" style="flex:1;background:var(--bg);font-size:12px">' +
+	    '<button type="button" class="btn btn-xs" onclick="clearModelSearch()" title="\u6e05\u9664\u641c索">\u2715</button></div>' +
+	    '<div id="model-search-results" style="max-height:220px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg)">';
+	  if (filtered.length === 0) {
+	    html += '<div class="empty-state" style="padding:12px"><div class="icon">\U0001f50d</div>\u65e0\u5339\u914d\u6a21\u578b</div>';
+	  } else {
+	    html += filtered.map(function(m) {
+	      return '<div class="fetched-model-item"' +
+	        ' data-model="' + escHtml(m) + '"' +
+	        ' onclick="var mn=this.getAttribute(\"data-model\");selectFetchedModel(mn);"' +
+	        ' style="padding:6px 12px;cursor:pointer;font-size:12px;border-bottom:1px solid var(--border);transition:background .12s"' +
+	        ' onmouseenter="this.style.background=\"var(--bg3)\""' +
+	        ' onmouseleave="this.style.background=\"\"">' + escHtml(m) + '</div>';
+	    }).join('');
+	  }
+	  html += '</div>';
+	  area.innerHTML = html;
+	}
+
+	// filterFetchedModels 仅更新结果列表，不重建搜索框，解决输入时焦点丢失问题
+	function filterFetchedModels() {
+	  var input = document.getElementById('model-search-input');
+	  var results = document.getElementById('model-search-results');
+	  if (!input || !results) return;
+	  var filter = input.value;
+	  var models = STATE.fetchedModels;
+	  var filterLower = filter.toLowerCase();
+	  var filtered = filterLower ? models.filter(function(m) { return m.toLowerCase().indexOf(filterLower) >= 0; }) : models;
+	  var countInfo = filterLower ? '\uff08' + filtered.length + '/' + models.length + '\uff09' : '\uff08共 ' + models.length + ' \u4e2a\uff09';
+	  input.placeholder = '\U0001f50d \u641c索模型名称...' + countInfo;
+	  if (filtered.length === 0) {
+	    results.innerHTML = '<div class="empty-state" style="padding:12px"><div class="icon">\U0001f50d</div>\u65e0\u5339\u914d\u6a21型</div>';
+	  } else {
+	    results.innerHTML = filtered.map(function(m) {
+	      return '<div class="fetched-model-item" data-model="' + escHtml(m) + '"' +
+	        ' onclick="var mn=this.getAttribute(\"data-model\");selectFetchedModel(mn);"' +
+	        ' style="padding:6px 12px;cursor:pointer;font-size:12px;border-bottom:1px solid var(--border);transition:background .12s"' +
+	        ' onmouseenter="this.style.background=\"var(--bg3)\""' +
+	        ' onmouseleave="this.style.background=\"\"">' + escHtml(m) + '</div>';
+	    }).join('');
+	  }
+	}
+
+	function clearModelSearch() {
+	  var input = document.getElementById('model-search-input');
+	  if (input) { input.value = ''; input.focus(); }
+	  filterFetchedModels();
+	}


 function selectFetchedModel(modelName) {
@@ -4143,13 +4174,20 @@ function showRoutingForm(purpose) {
    '<button class="btn btn-sm" onclick="renderRoutingTab()">← 返回</button></div>' +
    '<div class="card-body"><form onsubmit="event.preventDefault();saveRoutingForm(\'' + escHtml(purpose || '') + '\');">' +
    '<div class="form-row"><label>用途 ID ' + (isEdit ? '' : '<span style="color:var(--red)">*</span>') + '</label>' +
-    '<select id="routing-purpose" class="input" ' + (isEdit ? 'disabled' : 'required') + '>' +
+    '    '<select id="routing-purpose" class="input" ' + (isEdit ? 'disabled' : 'required') + '>' +
    '<option value="">-- 选择用途 --</option>' +
-    '<option value="chat"' + (defaults.purpose === 'chat' ? ' selected' : '') + '>chat (日常对话)</option>' +
-    '<option value="deep_thinking"' + (defaults.purpose === 'deep_thinking' ? ' selected' : '') + '>deep_thinking (深度思考)</option>' +
-    '<option value="intent_analysis"' + (defaults.purpose === 'intent_analysis' ? ' selected' : '') + '>intent_analysis (意图分析)</option>' +
-    '<option value="tool_calling"' + (defaults.purpose === 'tool_calling' ? ' selected' : '') + '>tool_calling (工具调用)</option>' +
-    '<option value="memory_extraction"' + (defaults.purpose === 'memory_extraction' ? ' selected' : '') + '>memory_extraction (记忆提取)</option>' +
+'     '<option value="chat"'+ (defaults.purpose === 'chat' ? ' selected' : '') +'>chat (日常对话)</option>' +
+'     '<option value="deep_thinking"'+ (defaults.purpose === 'deep_thinking' ? ' selected' : '') +'>deep_thinking (深度思考/复杂推理)</option>' +
+'     '<option value="code"'+ (defaults.purpose === 'code' ? ' selected' : '') +'>code (代码生成)</option>' +
+'     '<option value="vision"'+ (defaults.purpose === 'vision' ? ' selected' : '') +'>vision (视觉理解)</option>' +
+'     '<option value="ocr"'+ (defaults.purpose === 'ocr' ? ' selected' : '') +'>ocr (文字识别/OCR)</option>' +
+'     '<option value="math"'+ (defaults.purpose === 'math' ? ' selected' : '') +'>math (数学推理)</option>' +
+'     '<option value="translation"'+ (defaults.purpose === 'translation' ? ' selected' : '') +'>translation (翻译)</option>' +
+'     '<option value="intent_analysis"'+ (defaults.purpose === 'intent_analysis' ? ' selected' : '') +'>intent_analysis (意图分析)</option>' +
+'     '<option value="tool_calling"'+ (defaults.purpose === 'tool_calling' ? ' selected' : '') +'>tool_calling (工具调用/Function Calling)</option>' +
+'     '<option value="memory_extraction"'+ (defaults.purpose === 'memory_extraction' ? ' selected' : '') +'>memory_extraction (记忆提取)</option>' +
+'     '<option value="roleplay"'+ (defaults.purpose === 'roleplay' ? ' selected' : '') +'>roleplay (角色扮演)</option>' +
+'     '<option value="long_context"'+ (defaults.purpose === 'long_context' ? ' selected' : '') +'>long_context (长文档处理)</option>' +
    '</select></div>' +
    '<div class="form-row"><label>回退模型链 <span style="color:var(--text2);font-weight:400">(勾选即加入，顺序=表格显示顺序)</span></label>' +
    (models.length > 0 ? '<div class="btn-group" style="margin-bottom:8px">' +
@@ -148,6 +148,8 @@ export const SERVICES = {
      WHISPER_BINARY: './whisper.cpp/main',
      WHISPER_MODEL: './whisper.cpp/models/ggml-small.bin',
      WHISPER_LANGUAGE: 'zh',
+      DASHSCOPE_API_KEY: process.env.DASHSCOPE_API_KEY || '',
+      DASHSCOPE_STT_MODEL: 'gummy-chat-v1',
    },
    healthUrl: 'http://localhost:8093/api/v1/health',
    port: 8093,