llm-api-gateway-cli 1.0.0

package/public/models.js

@@ -0,0 +1,121 @@
+/**
+ * 模型下拉框（聊天页与任务页共用的唯一实现）
+ *
+ * 为什么要有这个文件：设置面板里的「模型」**不是自由文本**，而是从网关 `/v1/models`
+ * 拉下来的候选里选一个。两页各有自己的设置面板（`app.js` / `task.js`），这类"下拉怎么建、
+ * 当前值不在列表里怎么办"的规则如果各写一遍，两边迟早不一样 —— 与 `render.js` 同一个理由。
+ *
+ * 三个容易踩的点，都在这里收口：
+ *  1. **当前值可能不在列表里**（上游把模型下线了、或者当初是手输的、或者这次没拉到列表）：
+ *     这时要把原值作为一个选项补进去并选中，绝不静默改成别的东西，也不让下拉变成空值；
+ *  2. **`<select>.value = 不存在的值` 在真实浏览器里会变成空串**（`selectedIndex = -1`），
+ *     所以 `ensure()` 必须先补选项再赋值 —— 「配置被悄悄清掉」就是这么来的；
+ *  3. **「服务端默认」是一个合法选项**（值 `''`）：配置里不写 model 时服务端用 `cfg.model`，
+ *     所以第一项永远留出来，并把它叫什么写清楚。
+ *
+ * 纯逻辑（不碰 DOM 之外的全局），可在 node 里直接测：见 tests/model-select.test.mjs。
+ */
+(function (root, factory) {
+  root.ModelSelect = factory();
+})(typeof globalThis !== 'undefined' ? globalThis : this, function () {
+  'use strict';
+
+  const DEFAULT_TEXT = '（用服务端默认）';
+
+  /** 「服务端默认」那一项的字面量：知道默认模型名就写出来，不知道就只说默认 */
+  function defaultLabel(defaultModel) {
+    const name = String(defaultModel || '').trim();
+    return name ? `（用服务端默认：${name}）` : DEFAULT_TEXT;
+  }
+
+  /** 不在上游列表里的当前值：标出来，让用户知道它是"继承下来的"，不是这次能选的 */
+  function currentLabel(value) {
+    return String(value) + '（当前设置，不在上游列表里）';
+  }
+
+  /** 大小写不敏感地判断 name 是否在 models 里（网关的模型名大小写敏感，但这里允许用户大小写随便打） */
+  function match(models, name) {
+    const want = String(name == null ? '' : name).trim().toLowerCase();
+    if (!want) return null;
+    return (models || []).find((m) => String(m).toLowerCase() === want) || null;
+  }
+
+  function addOption(select, value, label) {
+    const opt = document.createElement('option');
+    opt.value = value;
+    opt.textContent = label;
+    select.appendChild(opt);
+    return opt;
+  }
+
+  function clear(select) {
+    if (typeof select.replaceChildren === 'function') {
+      select.replaceChildren();
+      return;
+    }
+    if ('innerHTML' in select) select.innerHTML = '';
+    else if (Array.isArray(select.children)) select.children.length = 0;
+  }
+
+  /** 用 options 里的值选中 select；没有对应选项时返回 false（不赋值，避免变空） */
+  function select_(select, value) {
+    const want = String(value == null ? '' : value);
+    const opts = select.options || select.children || [];
+    for (const o of opts) {
+      if (String(o.value) === want) {
+        select.value = want;
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * 重建下拉：默认项 → 上游列表 → 当前值兜底项。
+   *
+   * @param {{models?:string[], current?:string, defaultModel?:string}} data
+   * @returns {{count:number, empty:boolean, missing:string, extra:boolean}}
+   *   count  上游模型个数
+   *   empty  这次没拉到任何模型（页面据此说清原因）
+   *   missing 当前值（不在列表里时原样回传，空串表示在列表里或没有当前值）
+   *   extra  是否补了"当前设置"兜底项
+   */
+  function fill(select, data) {
+    // 上游偶尔会重复返回同一个模型名：去重，免得下拉里出现两条一模一样的
+    const models = [...new Set(((data && data.models) || []).map((m) => String(m)).filter(Boolean))];
+    const current = String((data && data.current) || '').trim();
+
+    clear(select);
+    addOption(select, '', defaultLabel(data && data.defaultModel));
+    for (const m of models) addOption(select, m, m);
+
+    let missing = '';
+    let extra = false;
+    if (current && !match(models, current)) {
+      // 列表里没有它：补一项并保持选中（R3 —— 拉不到/下线了也不能把配置弄丢）
+      addOption(select, current, currentLabel(current));
+      missing = current;
+      extra = true;
+    }
+    select_(select, current);
+    return { count: models.length, empty: models.length === 0, missing, extra };
+  }
+
+  /** 确保某个值在选项里存在并选中它（设置面板在别处改了模型时用） */
+  function ensure(select, value, label) {
+    const want = String(value == null ? '' : value);
+    if (!select_(select, want)) addOption(select, want, label || want);
+    return select_(select, want);
+  }
+
+  /** 页面上要显示给用户的一句话：为什么只有这些、当前值为什么不在里面 */
+  function hintText(result) {
+    const r = result || {};
+    if (r.empty) return '没拉到模型列表：只能选「服务端默认」或当前设置，点「刷新模型」重试';
+    const base = `从网关拉到 ${r.count} 个模型，只能选、不能填`;
+    if (!r.missing) return base;
+    return `${base}；当前设置的 ${r.missing} 不在列表里，已单独列出并保持选中`;
+  }
+
+  return { DEFAULT_TEXT, defaultLabel, currentLabel, match, fill, ensure, hintText };
+});

package/public/render.js

@@ -0,0 +1,250 @@
+/**
+ * 模式四 / 模式五 共用的前端渲染工具（经典脚本，挂在全局作用域）
+ * 被 index.html 与 task.html 在各自页面脚本之前加载。
+ */
+
+function escapeHtml(s) {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+/**
+ * 行内 Markdown → HTML：行内代码先占位（内容单独转义，免得被后面的粗斜体规则二次解析），
+ * 其余文本整体转义，再处理粗体 / 斜体 / 删除线 / 链接。
+ * 行内语法都不跨行，所以整篇和单个表格单元格都能直接调它。
+ */
+function renderInline(src) {
+  const codes = [];
+  let s = String(src ?? '').replace(/`([^`\n]+)`/g, (_m, code) => {
+    codes.push(`<code>${escapeHtml(code)}</code>`);
+    return `\u0000I${codes.length - 1}\u0000`;
+  });
+
+  s = escapeHtml(s);
+
+  s = s.replace(/\*\*([^*\n]+)\*\*/g, '<strong>$1</strong>');
+  s = s.replace(/(^|[\s(])\*([^*\n]+)\*/g, '$1<em>$2</em>');
+  s = s.replace(/~~([^~\n]+)~~/g, '<del>$1</del>');
+  s = s.replace(/\[([^\]\n]+)\]\((https?:\/\/[^\s)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+
+  return s.replace(/\u0000I(\d+)\u0000/g, (_m, i) => codes[Number(i)]);
+}
+
+/* ---------- 表格 ---------- */
+
+/** 按裸 | 切分单元格；\| 是转义的字面竖线；行首 / 行尾那根裸 | 只是表格边框，不算空单元格 */
+function splitTableRow(line) {
+  let t = String(line).trim();
+  if (t.startsWith('|')) t = t.slice(1);
+  const cells = [];
+  let cur = '';
+  for (let i = 0; i < t.length; i++) {
+    const ch = t[i];
+    if (ch === '\\' && t[i + 1] === '|') {
+      cur += '|';
+      i++;
+      continue;
+    }
+    if (ch === '|') {
+      cells.push(cur);
+      cur = '';
+      continue;
+    }
+    cur += ch;
+  }
+  cells.push(cur);
+  if (cells.length > 1 && cells[cells.length - 1].trim() === '' && /(^|[^\\])\|$/.test(t)) cells.pop();
+  return cells.map((c) => c.trim());
+}
+
+/** 分隔行：`| --- | :---: |` 之类，每个单元格必须整体由 - 和两端可选冒号组成 */
+function isTableAlignRow(line) {
+  const t = String(line).trim();
+  if (!t.includes('-')) return false;
+  const cells = splitTableRow(t);
+  return cells.length > 0 && cells.every((c) => /^:?-+:?$/.test(c));
+}
+
+/** :--- / ---: / :---: → left / right / center */
+function tableAlign(cell) {
+  const left = cell.startsWith(':');
+  const right = cell.endsWith(':');
+  if (left && right) return 'center';
+  if (right) return 'right';
+  if (left) return 'left';
+  return '';
+}
+
+/**
+ * 表格 → HTML。页面显示真表格，原文整段塞进 data-md：
+ * 复制时给回 Markdown（见 enhanceTables），显示和复制各取所需。
+ */
+function buildTableHtml(heads, aligns, rows, raw) {
+  const width = heads.length;
+  const alignAttr = (i) => (aligns[i] && aligns[i] !== 'left' ? ` style="text-align:${aligns[i]}"` : '');
+  const th = heads.map((c, i) => `<th${alignAttr(i)}>${renderInline(c)}</th>`).join('');
+  const trs = rows
+    .map((cells) => {
+      const tds = [];
+      for (let i = 0; i < width; i++) tds.push(`<td${alignAttr(i)}>${renderInline(cells[i] ?? '')}</td>`);
+      return `<tr>${tds.join('')}</tr>`;
+    })
+    .join('');
+  return (
+    `<div class="md-table" data-md="${escapeHtml(raw)}">` +
+    `<div class="md-table-scroll"><table><thead><tr>${th}</tr></thead>` +
+    (trs ? `<tbody>${trs}</tbody>` : '') +
+    `</table></div></div>`
+  );
+}
+
+/**
+ * 把成块的 Markdown 表格换成占位符（和围栏代码块一个套路：先摘出去，最后再还原）。
+ * 必须在代码块抽取之后调用，否则代码块里当样例贴的 |---|---| 也会被当成表格。
+ */
+function extractTables(src, tables) {
+  const lines = src.split('\n');
+  const kept = [];
+  for (let i = 0; i < lines.length; i++) {
+    const head = lines[i];
+    if (head.includes('|') && i + 1 < lines.length && isTableAlignRow(lines[i + 1])) {
+      const heads = splitTableRow(head);
+      const aligns = splitTableRow(lines[i + 1]).map(tableAlign);
+      const rows = [];
+      let j = i + 2;
+      // 表体一直吃到空行或不再含竖线的那一行为止
+      for (; j < lines.length; j++) {
+        const t = lines[j].trim();
+        if (!t || !t.includes('|')) break;
+        rows.push(splitTableRow(lines[j]));
+      }
+      tables.push(buildTableHtml(heads, aligns, rows, lines.slice(i, j).join('\n')));
+      kept.push(`\u0000T${tables.length - 1}\u0000`);
+      i = j - 1;
+      continue;
+    }
+    kept.push(head);
+  }
+  return kept.join('\n');
+}
+
+/**
+ * 极简 Markdown 渲染：先抽出围栏代码块与表格占位，再转义，再处理行内语法与块级结构，
+ * 最后还原占位符 —— 保证代码块里的内容不会被当成语法解析，也不会有 XSS。
+ */
+function renderMarkdown(src) {
+  const blocks = [];
+  let s = String(src ?? '').replace(/```([^\n`]*)\n?([\s\S]*?)```/g, (_m, lang, code) => {
+    const label = lang ? ` data-lang="${escapeHtml(lang.trim())}"` : '';
+    blocks.push(`<pre class="code-block"${label}><code>${escapeHtml(code.replace(/\n$/, ''))}</code></pre>`);
+    return `\u0000B${blocks.length - 1}\u0000`;
+  });
+
+  const tables = [];
+  s = extractTables(s, tables);
+
+  s = renderInline(s);
+
+  const out = [];
+  let para = [];
+  const flush = () => {
+    if (para.length) {
+      out.push(`<p>${para.join('<br>')}</p>`);
+      para = [];
+    }
+  };
+
+  for (const line of s.split('\n')) {
+    const t = line.trim();
+    if (!t) {
+      flush();
+      continue;
+    }
+    if (/^\u0000[BT]\d+\u0000$/.test(t)) {
+      flush();
+      out.push(t);
+      continue;
+    }
+    let m;
+    if ((m = t.match(/^(#{1,6})\s+(.*)$/))) {
+      flush();
+      const lvl = Math.min(m[1].length + 1, 6);
+      out.push(`<h${lvl}>${m[2]}</h${lvl}>`);
+      continue;
+    }
+    if ((m = t.match(/^&gt;\s?(.*)$/))) {
+      flush();
+      out.push(`<blockquote>${m[1]}</blockquote>`);
+      continue;
+    }
+    if (/^(-{3,}|\*{3,}|_{3,})$/.test(t)) {
+      flush();
+      out.push('<hr>');
+      continue;
+    }
+    if ((m = t.match(/^[-*+]\s+(.*)$/))) {
+      flush();
+      out.push(`<li data-kind="ul">${m[1]}</li>`);
+      continue;
+    }
+    if ((m = t.match(/^\d+[.)]\s+(.*)$/))) {
+      flush();
+      out.push(`<li data-kind="ol">${m[1]}</li>`);
+      continue;
+    }
+    para.push(t);
+  }
+  flush();
+
+  let html = out.join('\n');
+  // 把连续的 <li> 归组到同一个列表里
+  html = html.replace(/(?:<li data-kind="ul">[\s\S]*?<\/li>\n?)+/g, (m) => `<ul>${m.replace(/\n/g, '')}</ul>`);
+  html = html.replace(/(?:<li data-kind="ol">[\s\S]*?<\/li>\n?)+/g, (m) => `<ol>${m.replace(/\n/g, '')}</ol>`);
+  html = html.replace(/\u0000T(\d+)\u0000/g, (_m, i) => tables[Number(i)]);
+  html = html.replace(/\u0000B(\d+)\u0000/g, (_m, i) => blocks[Number(i)]);
+  return html;
+}
+
+/** 给每个代码块加一个「复制」按钮 */
+function enhanceCodeBlocks(root) {
+  for (const pre of root.querySelectorAll('pre.code-block')) {
+    if (pre.querySelector('.copy')) continue;
+    const btn = document.createElement('button');
+    btn.className = 'copy';
+    btn.type = 'button';
+    btn.textContent = '复制';
+    btn.addEventListener('click', async () => {
+      const code = pre.querySelector('code')?.textContent ?? '';
+      try {
+        await navigator.clipboard.writeText(code);
+        btn.textContent = '已复制';
+      } catch {
+        btn.textContent = '复制失败';
+      }
+      setTimeout(() => (btn.textContent = '复制'), 1200);
+    });
+    pre.appendChild(btn);
+  }
+}
+
+/** 给每个表格加一个「复制 Markdown」按钮：屏幕上看到的是 HTML 表格，粘贴出去仍是 | 竖线原文 */
+function enhanceTables(root) {
+  for (const box of root.querySelectorAll('.md-table')) {
+    if (box.querySelector('.copy')) continue;
+    const btn = document.createElement('button');
+    btn.className = 'copy';
+    btn.type = 'button';
+    btn.textContent = '复制 Markdown';
+    btn.title = '复制为 Markdown 表格';
+    btn.addEventListener('click', async () => {
+      const md = box.dataset?.md ?? '';
+      try {
+        await navigator.clipboard.writeText(md);
+        btn.textContent = '已复制';
+      } catch {
+        btn.textContent = '复制失败';
+      }
+      setTimeout(() => (btn.textContent = '复制 Markdown'), 1200);
+    });
+    box.appendChild(btn);
+  }
+}