@mokuyoaxis/dsh-iris 0.2.7 → 0.3.0-beta.1

package/lib/web/appearance.js

@@ -0,0 +1,111 @@
+export const DEFAULT_APPEARANCE = Object.freeze({ contractVersion: 0, theme: 'light', accent: 'iris', density: 'comfortable',
+  position: 'center', overlay: 86, blur: 0 });
+const KEY = 'iris.panel.appearance.v0';
+export function normalizeAppearance(value) {
+  if (!value || typeof value !== 'object' || Array.isArray(value) || value.contractVersion !== 0
+    || Object.keys(value).some(key => !Object.hasOwn(DEFAULT_APPEARANCE, key))
+    || !['light', 'dark', 'system'].includes(value.theme) || !['iris', 'violet', 'rose', 'apricot'].includes(value.accent)
+    || !['comfortable', 'compact'].includes(value.density) || !['center', 'top', 'bottom'].includes(value.position)
+    || !Number.isInteger(value.overlay) || value.overlay < 50 || value.overlay > 100
+    || !Number.isInteger(value.blur) || value.blur < 0 || value.blur > 20) throw new TypeError('外观文件格式或版本不支持');
+  return { ...value, accent: 'iris' };
+}
+
+export function createAppearance() {
+  const $ = id => document.getElementById(id), root = document.documentElement;
+  const system = matchMedia('(prefers-color-scheme: dark)');
+  let preferences = { ...DEFAULT_APPEARANCE }, backgroundUrl, pictureTicket = 0, backgroundReady = false;
+  const note = (text, error = false) => { $('appearance-note').textContent = text; $('appearance-note').classList.toggle('error', error); };
+  function apply() {
+    const dark = preferences.theme === 'dark' || preferences.theme === 'system' && system.matches;
+    root.dataset.theme = dark ? 'dark' : 'light'; root.dataset.accent = preferences.accent; root.dataset.density = preferences.density;
+    root.style.setProperty('--background-position', preferences.position);
+    root.style.setProperty('--background-opacity', String((100 - preferences.overlay) / 100));
+    root.style.setProperty('--background-blur', preferences.blur + 'px');
+    for (const key of ['theme', 'density', 'position', 'overlay', 'blur']) $('appearance-' + key).value = String(preferences[key]);
+    $('appearance-overlay-value').textContent = preferences.overlay + '%'; $('appearance-blur-value').textContent = preferences.blur + ' px';
+  }
+  function save() {
+    apply();
+    try { localStorage.setItem(KEY, JSON.stringify(preferences)); note('已保存到此浏览器，即时生效。'); }
+    catch (_) { note('此浏览器无法保存外观，本次预览仍有效。', true); }
+  }
+  async function storedPicture(action, value) {
+    const db = await new Promise((resolve, reject) => {
+      const request = indexedDB.open('iris.panel.appearance', 1);
+      request.onupgradeneeded = () => request.result.createObjectStore('images');
+      request.onsuccess = () => resolve(request.result); request.onerror = () => reject(request.error);
+    });
+    try {
+      return await new Promise((resolve, reject) => {
+        const transaction = db.transaction('images', action === 'get' ? 'readonly' : 'readwrite');
+        const store = transaction.objectStore('images');
+        const request = action === 'get' ? store.get('background') : action === 'put' ? store.put(value, 'background') : store.delete('background');
+        transaction.oncomplete = () => resolve(request.result);
+        transaction.onerror = () => reject(transaction.error); transaction.onabort = () => reject(transaction.error || new Error('外观存储已中断'));
+      });
+    } finally { db.close(); }
+  }
+  function replacePicture(url) {
+    if (backgroundUrl) URL.revokeObjectURL(backgroundUrl);
+    backgroundUrl = url;
+    root.style.setProperty('--workspace-image', url ? 'url("' + url + '")' : 'none');
+    $('appearance-remove').disabled = !url;
+    $('appearance-image-note').textContent = url ? '已使用本地背景，仅保存在此浏览器。' : '没有自选背景。图片不会上传到 Core。';
+  }
+  async function validatePicture(file) {
+    if (!(file instanceof Blob) || !['image/png', 'image/jpeg', 'image/webp'].includes(file.type) || file.size > 5 * 1024 * 1024) throw new TypeError('请选择 5 MiB 以内的 PNG、JPEG 或 WebP 图片');
+    const url = URL.createObjectURL(file), image = new Image();
+    try { image.src = url; await image.decode(); if (image.naturalWidth > 16384 || image.naturalHeight > 16384) throw new TypeError('背景图片尺寸过大'); return url; }
+    catch (error) { URL.revokeObjectURL(url); throw error; }
+  }
+  try {
+    const saved = localStorage.getItem(KEY);
+    if (saved) preferences = normalizeAppearance(JSON.parse(saved));
+  } catch (_) { note('已使用默认外观；原偏好不可读取或版本不支持。', true); }
+  apply();
+  void (async () => {
+    const ticket = pictureTicket;
+    try {
+      const file = await storedPicture('get');
+      if (file) { const url = await validatePicture(file); if (ticket === pictureTicket) replacePicture(url); else URL.revokeObjectURL(url); }
+    } catch (_) { note('本地背景无法读取，配色仍可使用。可重新选择图片。', true); }
+    finally { backgroundReady = true; $('appearance-image').disabled = false; }
+  })();
+  $('appearance-open').addEventListener('click', () => $('appearance-dialog').showModal());
+  $('appearance-close').addEventListener('click', () => $('appearance-dialog').close());
+  for (const key of ['theme', 'density', 'position', 'overlay', 'blur']) $('appearance-' + key).addEventListener('input', event => {
+    preferences[key] = ['overlay', 'blur'].includes(key) ? Number(event.target.value) : event.target.value; save();
+  });
+  system.addEventListener('change', () => { if (preferences.theme === 'system') apply(); });
+  $('appearance-image').addEventListener('change', async event => {
+    const file = event.target.files[0]; if (!file || !backgroundReady) return;
+    const ticket = ++pictureTicket; $('appearance-image').disabled = true; note('正在保存本地背景…');
+    try {
+      const url = await validatePicture(file);
+      if (ticket !== pictureTicket) { URL.revokeObjectURL(url); return; }
+      replacePicture(url);
+      $('appearance-remove').disabled = true;
+      try { await storedPicture('put', file); note('背景已保存到此浏览器。'); }
+      catch (_) { note('背景存储不可用，本次预览仍有效；刷新后需重新选择。', true); }
+    } catch (error) { note(error.message, true); }
+    finally { event.target.value = ''; $('appearance-image').disabled = false; $('appearance-remove').disabled = !backgroundUrl; }
+  });
+  $('appearance-remove').addEventListener('click', async () => {
+    ++pictureTicket; replacePicture(null);
+    try { await storedPicture('delete'); note('已移除此浏览器的背景。'); }
+    catch (_) { note('背景预览已移除，但本地存储更新失败；刷新后请核对。', true); }
+  });
+  $('appearance-reset').addEventListener('click', () => { preferences = { ...DEFAULT_APPEARANCE }; save(); });
+  $('appearance-export').addEventListener('click', () => {
+    const url = URL.createObjectURL(new Blob([JSON.stringify(preferences, null, 2) + '\n'], { type: 'application/json' }));
+    const a = document.createElement('a'); a.href = url; a.download = 'iris-theme.json'; a.click(); setTimeout(() => URL.revokeObjectURL(url), 1000);
+  });
+  $('appearance-import').addEventListener('change', async event => {
+    const file = event.target.files[0]; if (!file) return;
+    try { if (file.size > 16384) throw new TypeError('外观文件过大'); preferences = normalizeAppearance(JSON.parse(await file.text())); save(); }
+    catch (_) { note('外观文件格式或版本不支持；当前设置已保留。', true); }
+    finally { event.target.value = ''; }
+  });
+  window.addEventListener('pagehide', () => { ++pictureTicket; if (backgroundUrl) URL.revokeObjectURL(backgroundUrl); });
+}

package/lib/web/comfyui.js

@@ -0,0 +1,146 @@
+// Browser presentation for explicitly exposed workflow inputs. Server validation remains authoritative.
+const object = value => value && typeof value === 'object' && !Array.isArray(value);
+const scalar = value => ['string', 'boolean'].includes(typeof value) || typeof value === 'number' && Number.isFinite(value) && Math.abs(value) <= Number.MAX_SAFE_INTEGER;
+const labelByInput = { lora_name: 'LoRA', strength_model: '模型权重', strength_clip: 'CLIP 权重',
+  ckpt_name: 'Checkpoint', seed: '种子', steps: '步数', sampler_name: '采样器', scheduler: '调度器', cfg: 'CFG', denoise: '降噪强度' };
+const element = (tag, text, className) => { const node = document.createElement(tag); if (text !== undefined) node.textContent = text; if (className) node.className = className; return node; };
+export const parameterLabel = parameter => parameter.label || labelByInput[parameter.input] || (parameter.input === 'text' ? parameter.id === 'negative' ? '负面提示词' : '文本 · ' + parameter.node : parameter.id);
+
+export function normalizeWorkflowValues(value) {
+  if (!object(value) || !Object.keys(value).length || Object.keys(value).length > 32
+      || Object.entries(value).some(([id, item]) => !/^[A-Za-z][A-Za-z0-9_]{0,63}$/.test(id) || ['constructor', 'prototype'].includes(id)
+        || !scalar(item) || typeof item === 'string' && item.length > 20000)
+      || new TextEncoder().encode(JSON.stringify(value)).length > 24 * 1024) throw new TypeError('工作流参数需要 1–32 个有界标量，整数限于安全范围，正文最多 24 KiB');
+  return Object.fromEntries(Object.keys(value).sort().map(id => [id, value[id]]));
+}
+
+export function readWorkflowImport(text) {
+  if (new TextEncoder().encode(text).length > 40 * 1024) throw new TypeError('工作流超过 40 KiB，请精简后导入。');
+  const value = JSON.parse(text), template = object(value) && Object.hasOwn(value, 'graph');
+  const graph = template ? value.graph : value;
+  if (!object(graph) || !Object.keys(graph).length || Object.keys(graph).length > 256
+      || Object.entries(graph).some(([id, node]) => !/^[A-Za-z0-9_.:-]{1,100}$/.test(id) || ['__proto__', 'constructor', 'prototype'].includes(id)
+        || !object(node) || typeof node.class_type !== 'string' || !node.class_type || !object(node.inputs))) {
+    throw new TypeError('需要 Export (API) 的节点映射或完整 Iris 模板，普通画布 JSON 不能执行。');
+  }
+  for (const node of Object.values(graph)) for (const number of Object.values(node.inputs)) {
+    if (typeof number === 'number' && (!Number.isFinite(number) || Number.isInteger(number) && !Number.isSafeInteger(number))) {
+      throw new TypeError('图中有超出安全范围的整数，请将种子调整到 0–9007199254740991 后重新导出。');
+    }
+  }
+  if (template && (![0, 1].includes(value.version) || value.version === 1 && (!Array.isArray(value.parameters) || !value.parameters.length || value.parameters.length > 32))) {
+    throw new TypeError('不支持的 Iris 工作流模板版本或参数数量。');
+  }
+  return structuredClone(template ? value : { version: 0, graph });
+}
+
+export function workflowSlots(template, { promptNode, sizeNode } = template) {
+  const existing = new Map((template.parameters || []).map(parameter => [parameter.node + '\0' + parameter.input, parameter]));
+  const used = new Set((template.parameters || []).map(parameter => parameter.id));
+  return Object.entries(template.graph).flatMap(([node, value]) => Object.entries(value.inputs)
+    .filter(([input, item]) => scalar(item) && !(node === promptNode && input === 'text') && !(node === sizeNode && ['width', 'height'].includes(input))
+      && /^[A-Za-z0-9_.:-]{1,100}$/.test(input) && !['__proto__', 'constructor', 'prototype'].includes(input))
+    .map(([input, item]) => {
+      const parameter = existing.get(node + '\0' + input);
+      const base = 'p_' + (node + '_' + input).replace(/[^A-Za-z0-9_]/g, '_').slice(0, 48); let id = base, suffix = 0;
+      if (!parameter) { while (used.has(id)) id = base + '_' + ++suffix; used.add(id); }
+      const type = typeof item === 'number' ? Number.isSafeInteger(item) && !['strength_model', 'strength_clip', 'cfg', 'denoise'].includes(input) ? 'integer' : 'number' : typeof item;
+      return { ...(parameter || { id, node, input, type }),
+        default: item, exposed: Boolean(parameter), nodeType: value.class_type };
+    }));
+}
+
+export function buildWorkflow(template, bindings, slots) {
+  const { promptNode, outputNode, sizeNode } = bindings, graph = template.graph;
+  if (typeof graph[promptNode]?.inputs.text !== 'string' || !graph[outputNode]) throw new TypeError('请明确选择正向提示词和图片输出节点。');
+  if (sizeNode && !['width', 'height'].every(key => Number.isSafeInteger(graph[sizeNode]?.inputs[key]) && graph[sizeNode].inputs[key] > 0)) throw new TypeError('尺寸节点需要有效的 width 和 height。');
+  const parameters = slots.filter(slot => slot.exposed).map(({ exposed, default: value, nodeType, ...parameter }) => parameter);
+  const order = new Map((template.parameters || []).map((parameter, index) => [parameter.id, index]));
+  parameters.sort((a, b) => (order.get(a.id) ?? 32) - (order.get(b.id) ?? 32));
+  if (parameters.length > 32 || new Set(parameters.map(parameter => parameter.id)).size !== parameters.length) throw new TypeError('最多开放 32 个参数，参数 ID 不能重复。');
+  for (const parameter of parameters) {
+    if (!/^[A-Za-z][A-Za-z0-9_]{0,63}$/.test(parameter.id) || ['constructor', 'prototype'].includes(parameter.id)) throw new TypeError('参数 ID 需要以英文字母开头，只含字母、数字和下划线。');
+    if (parameter.label !== undefined && (!parameter.label.trim() || parameter.label.length > 80)) throw new TypeError('参数名称需要 1–80 个字符。');
+  }
+  const workflow = { version: parameters.length ? 1 : 0, graph: structuredClone(graph), promptNode, outputNode,
+    ...(sizeNode ? { sizeNode } : {}), ...(parameters.length ? { parameters } : {}) };
+  if (new TextEncoder().encode(JSON.stringify(workflow)).length > 40 * 1024) throw new TypeError('加上参数声明后，模板超过 40 KiB。');
+  return workflow;
+}
+
+function disclosure(title, className = '') {
+  const details = element('details', undefined, 'comfy-group ' + className), summary = element('summary');
+  const state = element('span', '展开', 'disclosure'); summary.append(element('span', title), state); details.append(summary);
+  details.addEventListener('toggle', () => { state.textContent = details.open ? '收起' : '展开'; }); return details;
+}
+
+/** Renders only supplied descriptors; reading returns a fresh, sorted value snapshot. */
+export function renderWorkflowParameters(container, parameters, { values = {}, checked = [], onChange = () => {}, disabled = false, preserveOpen = false } = {}) {
+  const expanded = new Set(preserveOpen ? [...container.querySelectorAll('details[open]')].map(node => node.dataset.parameterGroup) : []);
+  container.replaceChildren(); const controls = new Map(), loras = new Map();
+  const common = element('div', undefined, 'comfy-common'), advanced = disclosure('更多参数 · ' + parameters.filter(parameter => !['seed', 'text', 'lora_name', 'strength_model', 'strength_clip'].includes(parameter.input)).length);
+  advanced.dataset.parameterGroup = 'advanced'; advanced.open = expanded.has('advanced');
+  container.append(common);
+  for (const parameter of parameters) {
+    let parent = common;
+    if (['lora_name', 'strength_model', 'strength_clip'].includes(parameter.input)) {
+      if (!loras.has(parameter.node)) {
+        const name = parameters.find(item => item.node === parameter.node && item.input === 'lora_name');
+        const selected = name && (Object.hasOwn(values, name.id) ? values[name.id] : name.default);
+        const card = disclosure('LoRA · ' + (selected || '节点 ' + parameter.node), 'comfy-lora');
+        card.dataset.parameterGroup = 'lora:' + parameter.node; card.open = expanded.has(card.dataset.parameterGroup);
+        const body = element('div', undefined, 'comfy-parameter-grid'); card.append(body); loras.set(parameter.node, body); container.append(card);
+      }
+      parent = loras.get(parameter.node);
+    } else if (!['seed', 'text'].includes(parameter.input)) parent = advanced;
+    const wrapper = element('label', undefined, 'comfy-parameter'); wrapper.append(element('span', parameterLabel(parameter)));
+    const value = Object.hasOwn(values, parameter.id) ? values[parameter.id] : parameter.default;
+    const discovered = checked.find(item => item.id === parameter.id);
+    const choices = parameter.choices || discovered?.availableChoices;
+    let input;
+    if (choices && !discovered?.choicesTruncated) {
+      input = element('select');
+      for (const choice of choices) { const option = element('option', String(choice)); option.value = JSON.stringify(choice); input.append(option); }
+      if (!choices.includes(value)) { const option = element('option', String(value) + ' · 不在当前候选中'); option.value = JSON.stringify(value); input.append(option); }
+      input.value = JSON.stringify(value);
+    } else if (parameter.type === 'boolean') { input = element('input'); input.type = 'checkbox'; input.checked = value; }
+    else {
+      input = element(parameter.type === 'string' && parameter.input === 'text' ? 'textarea' : 'input');
+      if (input.tagName === 'TEXTAREA') input.rows = 2;
+      else input.type = parameter.type === 'string' ? 'text' : 'number';
+      input.value = String(value); if (parameter.type === 'string') input.maxLength = 20000;
+      else { input.step = parameter.type === 'integer' ? '1' : 'any'; input.required = true;
+        input.min = String(parameter.min ?? -Number.MAX_SAFE_INTEGER); input.max = String(parameter.max ?? Number.MAX_SAFE_INTEGER); }
+    }
+    input.dataset.workflowParameter = parameter.id; input.setAttribute('aria-label', parameterLabel(parameter)); input.disabled = disabled;
+    input.addEventListener(input.tagName === 'SELECT' || input.type === 'checkbox' ? 'change' : 'input', () => {
+      if (parameter.input === 'lora_name') parent.parentElement.querySelector('summary>span:first-child').textContent = 'LoRA · ' + (input.tagName === 'SELECT' ? JSON.parse(input.value) : input.value);
+      onChange();
+    }); wrapper.append(input);
+    if (discovered?.choicesTruncated && !parameter.choices) wrapper.append(element('small', '候选超过 256 项，可手填服务上已有的名称。', 'field-note'));
+    parent.append(wrapper); controls.set(parameter.id, { parameter, input });
+  }
+  if (advanced.children.length > 1) container.append(advanced);
+  if (!parameters.length) container.append(element('p', '沿用工作流中的固定参数。', 'field-note'));
+  function read() {
+    const result = {};
+    for (const [id, { parameter, input }] of controls) {
+      const value = input.tagName === 'SELECT' ? JSON.parse(input.value) : parameter.type === 'boolean' ? input.checked
+        : parameter.type === 'string' ? input.value : input.value === '' ? null : Number(input.value);
+      if (!scalar(value) || parameter.type === 'integer' && !Number.isSafeInteger(value)
+          || parameter.type === 'number' && typeof value !== 'number' || parameter.type === 'string' && typeof value !== 'string'
+          || parameter.type === 'boolean' && typeof value !== 'boolean' || parameter.min !== undefined && value < parameter.min
+          || parameter.max !== undefined && value > parameter.max || parameter.choices && !parameter.choices.includes(value)) {
+        throw new TypeError(parameterLabel(parameter) + '的类型、范围或选项不符。');
+      }
+      result[id] = value;
+    }
+    return parameters.length ? normalizeWorkflowValues(result) : {};
+  }
+  return { read, valid() { try { read(); return true; } catch { return false; } } };
+}
+
+export function inspectionMessage(report) {
+  return report.ok ? '静态检查通过 · ' + report.checkedClasses + ' 类节点 · 未执行生成'
+    : '检查未通过：' + report.issues.map(issue => issue.message).join('；');
+}