@wendongfly/myhi 1.3.212 → 1.3.213

package/dist/chat.html

@@ -267,8 +267,14 @@
     #input-area.no-shortcuts { padding-bottom: max(0.5rem, env(safe-area-inset-bottom)); }
     #input-box { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; transition: border-color 0.2s; overflow: hidden; position: relative; }
     #img-preview { display: none; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--surface2); background: var(--surface); }
-    #img-preview.show { display: flex; }
+    #img-preview.show { display: flex; padding-right: 2.8rem; }   /* 右侧让出悬浮的 ☰ 按钮，免得挡住「全部移除」 */
     #img-preview img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
+    #img-preview-list { display: flex; gap: 6px; flex-shrink: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
+    #img-preview .ip-item { position: relative; flex-shrink: 0; }
+    #img-preview .ip-ph { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid var(--border); background: var(--surface2); font-size: 1.2rem; }
+    #img-preview .ip-x { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; border-radius: 50%; border: none; background: rgba(0,0,0,0.65); color: #fff; font-size: 12px; line-height: 18px; padding: 0; cursor: pointer; }
+    #img-pro { flex-shrink: 0; border: 1px solid var(--border); background: var(--surface2); color: var(--muted); border-radius: 12px; padding: 0.15rem 0.5rem; font-size: 0.7rem; cursor: pointer; white-space: nowrap; }
+    #img-pro.on { border-color: var(--purple); color: var(--purple); background: color-mix(in srgb, var(--purple) 10%, transparent); font-weight: 600; }
     #img-preview .img-info { flex: 1; font-size: 0.78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     #img-preview .img-remove { width: 24px; height: 24px; border-radius: 50%; border: none; background: var(--surface2); color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
     #img-preview .img-remove:hover { background: var(--red); color: #fff; }
@@ -845,9 +851,10 @@
         <button class="img-remove" onclick="guideTipClose()" title="先不管">&times;</button>
       </div>
       <div id="img-preview">
-        <img id="img-preview-thumb" src="" alt="">
-        <span class="img-info">已添加图片，输入文字后发送</span>
-        <button class="img-remove" onclick="clearPendingImage()" title="移除图片">&times;</button>
+        <div id="img-preview-list"></div>
+        <span class="img-info" id="img-preview-info">已添加图片，输入文字后发送</span>
+        <button id="img-pro" style="display:none" onclick="toggleVisionPro()" title="重要截图（复杂标注的 bug 单、设计稿）改用「看图·高精度」模型识别，更准但更贵 / 更慢">🔍 高精度</button>
+        <button class="img-remove" onclick="clearPendingImage()" title="移除全部图片">&times;</button>
       </div>
       <div id="file-preview" style="display:none;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;border-bottom:1px solid var(--surface2);background:var(--surface)">
         <span style="font-size:1.1rem;flex-shrink:0">📎</span>
@@ -3605,14 +3612,57 @@
     });
 
     // ── 待发送图片 ──────────────────────────────────
-    let _pendingImage = null; // { path, blobUrl }
+    // 一次可以挂多张图（最多 MAX_IMAGES），一起发给 AI
+    const MAX_IMAGES = 9;
+    let _pendingImages = []; // [{ path, blobUrl }]
+    let _visionPro = false;  // 这批图用「看图·高精度」模型（设置里配了才显示开关）
+    window.toggleVisionPro = function() { _visionPro = !_visionPro; renderPendingImages(); };
 
     window.clearPendingImage = function() {
-      if (_pendingImage?.blobUrl) URL.revokeObjectURL(_pendingImage.blobUrl);
-      _pendingImage = null;
-      document.getElementById('img-preview').classList.remove('show');
+      for (const im of _pendingImages) if (im.blobUrl) URL.revokeObjectURL(im.blobUrl);
+      _pendingImages = [];
+      _visionPro = false;
+      renderPendingImages();
       cmdInput.placeholder = currentSession?.mode === 'agent' ? '输入消息...' : '输入命令...';
     };
+    window.removePendingImage = function(i) {
+      const [im] = _pendingImages.splice(i, 1);
+      if (im?.blobUrl) URL.revokeObjectURL(im.blobUrl);
+      if (!_pendingImages.length) return clearPendingImage();
+      renderPendingImages();
+    };
+    function renderPendingImages() {
+      const n = _pendingImages.length;
+      document.getElementById('img-preview').classList.toggle('show', n > 0);
+      // 从草稿取回时只剩服务器路径、没有本地预览图 → 显示占位图标，免得破图
+      document.getElementById('img-preview-list').innerHTML = _pendingImages.map((im, i) =>
+        `<span class="ip-item">${im.blobUrl ? `<img src="${im.blobUrl}" alt="">` : '<span class="ip-ph">🖼</span>'}<button class="ip-x" onclick="removePendingImage(${i})" title="移除这张">×</button></span>`).join('');
+      let sc = {}, mi = null; try { mi = _modelInfo; sc = mi?.scenes || {}; } catch { /* 页面初始化早期 _modelInfo 还没声明 */ }
+      const info = document.getElementById('img-preview-info');
+      info.textContent = (n <= 1 ? '已添加图片，输入文字后发送' : `已添加 ${n} 张图片（最多 ${MAX_IMAGES} 张），输入文字后一起发送`)
+        + (sc.vision || sc.visionPro ? ' · 标注尽量配文字说明' : '');
+      // 看图模型对红框 / 箭头的指向常认错，对文字最可靠（看图接入指南 §4）
+      info.title = sc.vision || sc.visionPro ? '截图标注首选文字（红字、①②③ 序号、「见下方说明」），看图模型提取最可靠；红框 / 高亮 / 箭头它能发现但常认错指的是谁，重要的指向请配文字' : '';
+      const pro = document.getElementById('img-pro');
+      pro.style.display = n && sc.visionPro && currentSession?.mode === 'agent' ? '' : 'none';
+      pro.classList.toggle('on', _visionPro);
+      pro.textContent = _visionPro ? '🔍 高精度 ✓' : '🔍 高精度';
+      if (n && !mi) loadModelInfo().then(() => { if (_pendingImages.length) renderPendingImages(); });
+    }
+    // 消息里附件的说明：AI 按路径读取；多张图 / 图 + 文件一起时逐一列出（格式与草稿合并、看图转文字一致）
+    function attachPrompt(imgs, file, text) {
+      const parts = [];
+      if (imgs.length === 1) parts.push(`用户上传了一张图片，路径是 ${imgs[0]}，请用 Read 工具读取这张图片。`);
+      else if (imgs.length > 1) parts.push(`用户上传了 ${imgs.length} 张图片，路径分别是 ${imgs.join('、')}，请用 Read 工具逐一读取。`);
+      if (file) parts.push(`用户上传了一个临时文件用于本次分析（不在项目文件树里），路径是 ${file.path}（原文件名 ${file.name}），请用合适的工具（如 Read）读取并分析它。`);
+      if (!parts.length) return text;
+      return parts.join('') + '用户的要求是：' + (text || (file && !imgs.length ? '分析这个文件' : imgs.length > 1 ? '描述这些图片的内容' : '描述图片内容'));
+    }
+    function attachDisplay(imgs, file, text) {
+      if (imgs.length) return `📷${imgs.length > 1 ? '×' + imgs.length : ''}${file ? ' 📎 ' + file.name : ''} ${text || (imgs.length > 1 ? '分析这些图片' : '分析图片')}`;
+      if (file) return `📎 ${file.name}${text ? ' ' + text : ''}`;
+      return text;
+    }
 
     window.cancelAgent = function() {
       if (currentSession?.mode === 'agent' && workState !== 'idle') {
@@ -3621,13 +3671,13 @@
     };
 
     function setPendingImage(path, blobUrl) {
-      _pendingImage = { path, blobUrl };
-      const preview = document.getElementById('img-preview');
-      const thumb = document.getElementById('img-preview-thumb');
-      // 从草稿取回时只剩服务器路径、没有本地 blob 预览图 —— 藏掉缩略图免得显示破图
-      thumb.src = blobUrl || '';
-      thumb.style.display = blobUrl ? '' : 'none';
-      preview.classList.add('show');
+      if (_pendingImages.length >= MAX_IMAGES) {
+        if (blobUrl) URL.revokeObjectURL(blobUrl);
+        addStatusMessage(`一次最多 ${MAX_IMAGES} 张图片，这张没有加上`);
+        return;
+      }
+      _pendingImages.push({ path, blobUrl });
+      renderPendingImages();
       cmdInput.placeholder = '输入文字描述后发送，或直接发送分析图片...';
       cmdInput.focus();
     }
@@ -3818,7 +3868,7 @@
     function sendCommand() {
       const text = cmdInput.value.trim();
       if (GUIDE_REMEMBER_RE.test(text)) _guideRemember = true;   // 「以后都… / 记住…」：这一轮干完建议写进项目说明
-      if (!text && !_pendingImage && !_pendingFile) return;
+      if (!text && !_pendingImages.length && !_pendingFile) return;
 
       // AI 还在跑这一轮（可能正开着子代理，整轮 result 未到，服务端 isBusy 会拒收）：
       // 不再把输入连同刚上传的图片一起丢掉，转存草稿，本轮干完再取回。
@@ -3839,33 +3889,27 @@
       }
       endStream();
 
-      const imgPath = _pendingImage?.path || null;
+      const imgPaths = _pendingImages.map(im => im.path);
       const filePath = _pendingFile?.path || null;
       const fileName = _pendingFile?.name || '';
       const userText = text;
-      const displayText = imgPath ? `📷 ${userText || '分析图片'}`
-        : filePath ? `📎 ${fileName}${userText ? ' ' + userText : ''}`
-        : text;
+      const displayText = attachDisplay(imgPaths, _pendingFile, userText);
 
       addInputMessage(displayText);
 
       if (currentSession?.mode === 'agent') {
-        const prompt = imgPath
-          ? `用户上传了一张图片，路径是 ${imgPath}，请用 Read 工具读取这张图片。用户的要求是：${userText || '描述图片内容'}`
-          : filePath
-          ? `用户上传了一个临时文件用于本次分析（不在项目文件树里），路径是 ${filePath}（原文件名 ${fileName}），请用合适的工具（如 Read）读取并分析它。用户的要求是：${userText || '分析这个文件'}`
-          : text;
-        socket.emit('agent:query', { prompt });
+        const prompt = attachPrompt(imgPaths, _pendingFile, userText);
+        socket.emit('agent:query', { prompt, visionPro: imgPaths.length > 0 && _visionPro });
         // 本地 slash（/model /clear /plan /resume /rename）只回一条 info、无 result，不进 thinking 态
         if (!LOCAL_SLASH_RE.test(text)) showThinking();
       } else {
-        const attach = imgPath || filePath;
+        const attach = [...imgPaths, filePath].filter(Boolean).join(' ');
         const input = attach
           ? (userText ? `${userText} ${attach}` : attach)
           : text;
         socket.emit('input', input + '\r');
       }
-      cmdHistory.unshift(imgPath ? `[图片] ${userText}` : filePath ? `[文件] ${fileName} ${userText}` : text);
+      cmdHistory.unshift(imgPaths.length ? `[图片${imgPaths.length > 1 ? '×' + imgPaths.length : ''}] ${userText}` : filePath ? `[文件] ${fileName} ${userText}` : text);
       if (cmdHistory.length > 100) cmdHistory.pop();
       historyIdx = -1;
       cmdInput.value = '';
@@ -3897,17 +3941,11 @@
     }
     window.injectFromInput = function() {
       const text = cmdInput.value.trim();
-      if (!text && !_pendingImage && !_pendingFile) { addStatusMessage('先在输入框里写下要补充的话，再点 ⚡ 插话'); cmdInput.focus(); return; }
+      if (!text && !_pendingImages.length && !_pendingFile) { addStatusMessage('先在输入框里写下要补充的话，再点 ⚡ 插话'); cmdInput.focus(); return; }
       if (!canInjectNow()) { sendCommand(); return; }
-      const imgPath = _pendingImage?.path || null;
-      const filePath = _pendingFile?.path || null;
-      const fileName = _pendingFile?.name || '';
-      const display = imgPath ? `📷 ${text || '分析图片'}` : filePath ? `📎 ${fileName}${text ? ' ' + text : ''}` : text;
-      const prompt = imgPath
-        ? `用户上传了一张图片，路径是 ${imgPath}，请用 Read 工具读取这张图片。用户的要求是：${text || '描述图片内容'}`
-        : filePath
-        ? `用户上传了一个临时文件用于本次分析（不在项目文件树里），路径是 ${filePath}（原文件名 ${fileName}），请用合适的工具（如 Read）读取并分析它。用户的要求是：${text || '分析这个文件'}`
-        : text;
+      const imgPaths = _pendingImages.map(im => im.path);
+      const display = attachDisplay(imgPaths, _pendingFile, text);
+      const prompt = attachPrompt(imgPaths, _pendingFile, text);
       injectEmit({ prompt, display }, () => {
         cmdInput.value = ''; cmdInput.style.height = 'auto';
         clearPendingImage(); clearPendingFile();
@@ -6535,12 +6573,12 @@
     // 把当前输入框（文字 + 已上传的图片/文件）整体存成草稿
     window.saveDraftFromInput = async function(source = 'manual') {
       const text = cmdInput.value.trim();
-      if (!text && !_pendingImage && !_pendingFile) { addStatusMessage('输入框是空的，没什么可存'); return false; }
+      if (!text && !_pendingImages.length && !_pendingFile) { addStatusMessage('输入框是空的，没什么可存'); return false; }
       const body = {
         text,
         sessionId: SESSION_ID,
         source,
-        images: _pendingImage ? [{ path: _pendingImage.path, name: '图片' }] : [],
+        images: _pendingImages.map(im => ({ path: im.path, name: '图片' })),
         files: _pendingFile ? [{ path: _pendingFile.path, name: _pendingFile.name }] : [],
       };
       try {
@@ -6567,16 +6605,16 @@
     window.useDraft = async function(id) {
       const d = _inboxCache.drafts.find(x => x.id === id);
       if (!d) return;
-      // 消息框一次只能挂一张图 / 一个文件：合并来的多余附件以路径写进文字里，AI 照样会读
-      const extra = [...(d.images || []).slice(1).map(a => `另附图片 ${a.path}，请用 Read 工具读取。`),
-                     ...(d.files || []).slice(d.images?.length ? 0 : 1).map(a => `另附文件 ${a.path}（原文件名 ${a.name}），请读取分析。`)];
+      // 消息框可挂多张图（最多 MAX_IMAGES）+ 一个文件：放不下的附件以路径写进文字里，AI 照样会读
+      const extra = [...(d.images || []).slice(MAX_IMAGES).map(a => `另附图片 ${a.path}，请用 Read 工具读取。`),
+                     ...(d.files || []).slice(1).map(a => `另附文件 ${a.path}（原文件名 ${a.name}），请读取分析。`)];
       cmdInput.value = (d.text || '') + (extra.length ? '\n' + extra.join('\n') : '');
       cmdInput.style.height = 'auto';
       cmdInput.style.height = Math.min(cmdInput.scrollHeight, 200) + 'px';
       clearPendingImage();
       clearPendingFile();
-      if (d.images?.length) setPendingImage(d.images[0].path, '');
-      else if (d.files?.length) {
+      for (const a of (d.images || []).slice(0, MAX_IMAGES)) setPendingImage(a.path, '');
+      if (d.files?.length) {
         _pendingFile = { path: d.files[0].path, name: d.files[0].name };
         const fp = document.getElementById('file-preview');
         const nameEl = document.getElementById('file-preview-name');
@@ -7989,11 +8027,14 @@
 
     // ── 拍照上传 ──────────────────────────────────
     window.openCamera = async function() {
-      const input = document.createElement('input'); input.type = 'file'; input.accept = 'image/*';
+      const input = document.createElement('input'); input.type = 'file'; input.accept = 'image/*'; input.multiple = true;
       input.onchange = async () => {
-        const file = input.files?.[0]; if (!file) return;
+        let files = [...(input.files || [])]; if (!files.length) return;
+        const room = MAX_IMAGES - _pendingImages.length;
+        if (room <= 0) { addStatusMessage(`一次最多 ${MAX_IMAGES} 张图片`); return; }
+        if (files.length > room) { addStatusMessage(`一次最多 ${MAX_IMAGES} 张图片，只加了前 ${room} 张`); files = files.slice(0, room); }
         const btn = document.getElementById('btn-photo'); btn.classList.add('active'); btn.disabled = true;
-        try { await uploadImageBlob(file, 'photo.jpg'); }
+        try { for (const f of files) await uploadImageBlob(f, f.name || 'photo.jpg'); }
         catch (e) { addStatusMessage('出错: ' + e.message); }
         finally { btn.classList.remove('active'); btn.disabled = false; }
       }; input.click();

package/dist/index.html

@@ -1519,7 +1519,8 @@
     background: '生成标题、摘要等后台小活，建议选便宜的',
     ask: '「问一问」和解释，建议选便宜快速的；留空 = sonnet',
     voice: '语音转成书面文字，建议选便宜的；留空 = 同问一问',
-    vision: '配了就用：聊天框发的图片先用它转成文字再交给主模型（多花几秒，聊天里可点开核对）；主模型看不了图时一定要配。留空 = 图片直接发给主模型',
+    vision: '配了就用：聊天框发的图片先用它转成文字再交给主模型（多花几秒，聊天里可点开核对）；主模型看不了图时一定要配，如本地的 m1-vision。留空 = 图片直接发给主模型。提示用户：截图标注尽量配文字，红框 / 箭头的指向看图模型常认错',
+    visionPro: '可选：重要截图（复杂标注的 bug 单、设计稿评审）发送时点「🔍 高精度」改用它，如网关上的 Claude 等云端多模态模型；留空 = 不显示这个开关',
   };
   // ── 大模型网关 ────────────────────────────────────────────
   const GW_SRC = { myhi: '本页配置', env: '启动 myhi 时的环境变量（ANTHROPIC_BASE_URL）', claude: 'Claude Code 配置（~/.claude/settings.json）' };
@@ -1570,8 +1571,8 @@
     document.getElementById('set-models-dl-tools').innerHTML = ms.filter(m => !m.fit?.main).map(opt).join('') + aliases;
     document.getElementById('set-models-dl-all').innerHTML = cheapFirst.map(opt).join('') + aliases;
     document.getElementById('set-models-dl-vision').innerHTML = cheapFirst.filter(m => (m.caps || []).includes('vision')).map(opt).join('') + aliases;
-    const TOOL_SCENES = { main: 1, plan: 1, subagent: 1, vision: 1 };
-    const DL = (k) => k === 'vision' ? 'set-models-dl-vision' : TOOL_SCENES[k] ? 'set-models-dl-tools' : 'set-models-dl-all';
+    const TOOL_SCENES = { main: 1, plan: 1, subagent: 1, vision: 1, visionPro: 1 };
+    const DL = (k) => k === 'vision' || k === 'visionPro' ? 'set-models-dl-vision' : TOOL_SCENES[k] ? 'set-models-dl-tools' : 'set-models-dl-all';
     document.getElementById('set-models-rows').innerHTML = Object.entries(d.sceneLabels || {}).map(([k, label]) =>
       `<div class="set-item inp"><div class="set-lbl">${esc(label)}<small>${esc(SCENE_HINT[k] || '')}</small></div>
         <div class="set-ctl"><input class="set-inp" data-scene="${esc(k)}" list="${DL(k)}" value="${esc(d.scenes?.[k] || '')}" placeholder="默认" autocomplete="off" spellcheck="false"></div>
@@ -1580,7 +1581,7 @@
     const byId = Object.fromEntries(ms.map(m => [m.id, m]));
     const check = (inp) => {
       const k = inp.dataset.scene, w = document.querySelector(`[data-warn="${k}"]`);
-      const why = TOOL_SCENES[k] && byId[inp.value.trim()]?.fit?.[k];
+      const why = TOOL_SCENES[k] && byId[inp.value.trim()]?.fit?.[k === 'visionPro' ? 'vision' : k];
       // 看图：主任务模型本身看不了图却没配看图模型 → 提醒（图片发过去 AI 会读不出来）
       const mainM = byId[(document.querySelector('[data-scene="main"]')?.value || '').trim()];
       const hint = k === 'vision' && !inp.value.trim() && mainM?.caps?.length && !mainM.caps.includes('vision') ? `主任务模型 ${mainM.name} 看不了图，建议配一个，否则发图片 AI 会读不出来` : '';