@exccoder/dsh-media-workbench 0.0.0-stage → 0.1.2

package/web/lib/api.js

@@ -0,0 +1,79 @@
+const BASE = '/media-workbench-modern/api/'
+
+async function parse(res) {
+  const data = await res.json().catch(() => ({}))
+  if (!res.ok) {
+    const err = new Error(data.error || `请求失败（${res.status}）`)
+    err.status = res.status
+    throw err
+  }
+  return data
+}
+
+export async function api(path, body) {
+  const res = await fetch(BASE + path, body === undefined ? {} : {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+  return parse(res)
+}
+
+export async function upload(file) {
+  const res = await fetch(BASE + 'upload', {
+    method: 'POST',
+    headers: { 'content-type': file.type || 'application/octet-stream' },
+    body: file,
+  })
+  return parse(res)
+}
+
+/**
+ * 写作流：NDJSON，每行一个 {type:'delta'|'done'|'error'}。
+ */
+export async function streamWrite(body, { onDelta, signal } = {}) {
+  const res = await fetch(BASE + 'write/stream', {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify(body),
+    signal,
+  })
+  if (!res.ok) {
+    const data = await res.json().catch(() => ({}))
+    throw new Error(data.error || `请求失败（${res.status}）`)
+  }
+  if (!res.body) throw new Error('浏览器不支持流式读取')
+  const reader = res.body.getReader()
+  const decoder = new TextDecoder()
+  let buffer = ''
+  let full = ''
+  let error = null
+  for (;;) {
+    const { value, done } = await reader.read()
+    if (done) break
+    buffer += decoder.decode(value, { stream: true })
+    let index
+    while ((index = buffer.indexOf('\n')) >= 0) {
+      const line = buffer.slice(0, index).trim()
+      buffer = buffer.slice(index + 1)
+      if (!line) continue
+      let payload
+      try { payload = JSON.parse(line) } catch { continue }
+      if (payload.type === 'delta') {
+        full += payload.text
+        onDelta?.(payload.text, full)
+      } else if (payload.type === 'done') {
+        if (typeof payload.text === 'string') full = payload.text
+        return { text: full, model: payload.model }
+      } else if (payload.type === 'error') {
+        error = new Error(payload.message || '生成失败')
+      }
+    }
+  }
+  if (error) throw error
+  return { text: full }
+}
+
+export function fileUrl(name) {
+  return `/media-workbench-modern/files/${encodeURIComponent(name)}`
+}

package/web/lib/constants.js

@@ -0,0 +1,69 @@
+export const STYLES = [
+  '电影感', '插画', '水墨', '赛博朋克', '胶片', '3D', '极简', '浮世绘', '概念艺术',
+]
+
+export const STYLE_HINTS = {
+  电影感: 'cinematic lighting, film still',
+  插画: 'editorial illustration',
+  水墨: 'ink painting',
+  赛博朋克: 'cyberpunk neon',
+  胶片: 'analog film',
+  '3D': 'stylized 3D render',
+  极简: 'minimal composition',
+  浮世绘: 'ukiyo-e print',
+  概念艺术: 'concept art',
+}
+
+export const STYLE_LABELS_EN = {
+  电影感: 'Cinematic',
+  插画: 'Illustration',
+  水墨: 'Ink',
+  赛博朋克: 'Cyberpunk',
+  胶片: 'Film',
+  '3D': '3D',
+  极简: 'Minimal',
+  浮世绘: 'Ukiyo-e',
+  概念艺术: 'Concept art',
+}
+
+export const RATIOS = [
+  { id: '1:1', label: '1:1', hint: '1024 × 1024' },
+  { id: '4:3', label: '4:3', hint: '1152 × 864' },
+  { id: '3:2', label: '3:2', hint: '1216 × 832' },
+  { id: '16:9', label: '16:9', hint: '1344 × 768' },
+  { id: '9:16', label: '9:16', hint: '768 × 1344' },
+  { id: '2:3', label: '2:3', hint: '832 × 1216' },
+]
+
+export const RATIO_VALUE = {
+  '1:1': 1,
+  '4:3': 4 / 3,
+  '3:2': 3 / 2,
+  '16:9': 16 / 9,
+  '9:16': 9 / 16,
+  '2:3': 2 / 3,
+}
+
+export const INSPIRATIONS = [
+  { title: '雨后的天台', titleEn: 'Rooftop after rain', prompt: '雨停后的城市天台，积水映着晚霞，一个人把耳机摘下来，远处的车流像潮水。', promptEn: 'A city rooftop after the rain, puddles holding the last light, someone taking off their headphones, traffic moving like a tide below.', style: '电影感', ratio: '16:9' },
+  { title: '云上的邮局', titleEn: 'Post office above the clouds', prompt: '一座建在云层上的旧邮局，木质柜台，窗外是翻涌的云海，暖黄的吊灯，安静而郑重。', promptEn: 'An old post office built on a sea of clouds, a wooden counter, warm hanging lamps, quiet and ceremonial.', style: '插画', ratio: '4:3' },
+  { title: '深夜书店', titleEn: 'Bookshop at 2am', prompt: '凌晨两点的独立书店，只留一盏台灯，猫趴在摊开的书上，玻璃窗外是细雨和霓虹。', promptEn: 'An independent bookshop at two in the morning, one lamp left on, a cat asleep on an open book, drizzle and neon beyond the glass.', style: '胶片', ratio: '3:2' },
+  { title: '墨色山谷', titleEn: 'Ink valley', prompt: '极简的水墨山谷，一叶小舟停在雾里，远处只有淡淡的山的轮廓，大量留白。', promptEn: 'A minimalist ink-wash valley, a small boat resting in mist, faint mountain outlines far away, generous empty space.', style: '水墨', ratio: '9:16' },
+]
+
+export const ACTIONS = [
+  { id: 'continue', label: '续写', hint: '从结尾往下写' },
+  { id: 'polish', label: '润色', hint: '保留原意，改善节奏' },
+  { id: 'expand', label: '扩写', hint: '补充细节与画面' },
+  { id: 'rewrite', label: '改写', hint: '按指令换一种写法' },
+  { id: 'outline', label: '大纲', hint: '整理结构' },
+  { id: 'title', label: '起标题', hint: '给 6 个候选' },
+]
+
+export const TONES = ['自然叙述', '克制冷静', '热烈', '幽默', '诗意', '硬朗']
+export const POVS = ['第一人称', '第三人称', '全知视角']
+export const LENGTHS = [
+  { id: 'short', label: '短 · 400 字' },
+  { id: 'medium', label: '中 · 900 字' },
+  { id: 'long', label: '长 · 1600 字' },
+]

package/web/lib/dom.js

@@ -0,0 +1,99 @@
+export const $ = (selector, root = document) => root.querySelector(selector)
+export const $$ = (selector, root = document) => [...root.querySelectorAll(selector)]
+
+export function esc(value) {
+  return String(value ?? '').replace(/[&<>"']/g, ch => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[ch]))
+}
+
+export function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value))
+}
+
+/** 中英混排字数：CJK 按字，拉丁按词 */
+export function wordCount(text) {
+  const value = String(text ?? '')
+  const cjk = (value.match(/[\u3400-\u9fff\uf900-\ufaff]/g) ?? []).length
+  const latin = (value.replace(/[\u3400-\u9fff\uf900-\ufaff]/g, ' ').match(/[A-Za-z0-9]+(?:['’-][A-Za-z0-9]+)*/g) ?? []).length
+  return cjk + latin
+}
+
+export function fmtTime(value) {
+  if (!value) return ''
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return ''
+  const now = new Date()
+  const diff = now - date
+  if (diff < 60_000) return '刚刚'
+  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)} 分钟前`
+  if (date.toDateString() === now.toDateString()) return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
+  if (now - date < 7 * 86_400_000) return `${Math.floor(diff / 86_400_000)} 天前`
+  return date.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' })
+}
+
+export function fmtDate(value) {
+  if (!value) return ''
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return ''
+  return date.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' })
+}
+
+export function debounce(fn, wait = 300) {
+  let timer = null
+  const wrapped = (...args) => {
+    clearTimeout(timer)
+    timer = setTimeout(() => fn(...args), wait)
+  }
+  wrapped.flush = (...args) => {
+    clearTimeout(timer)
+    fn(...args)
+  }
+  wrapped.cancel = () => clearTimeout(timer)
+  return wrapped
+}
+
+export function downloadUrl(url, filename) {
+  const a = document.createElement('a')
+  a.href = url
+  a.download = filename || ''
+  a.rel = 'noopener'
+  document.body.appendChild(a)
+  a.click()
+  a.remove()
+}
+
+export async function copyText(text) {
+  try {
+    await navigator.clipboard.writeText(text)
+    return true
+  } catch {
+    const area = document.createElement('textarea')
+    area.value = text
+    area.style.position = 'fixed'
+    area.style.opacity = '0'
+    document.body.appendChild(area)
+    area.select()
+    const ok = document.execCommand('copy')
+    area.remove()
+    return ok
+  }
+}
+
+export function downloadJson(data, filename) {
+  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
+  const url = URL.createObjectURL(blob)
+  downloadUrl(url, filename)
+  setTimeout(() => URL.revokeObjectURL(url), 3000)
+}
+
+export function isMac() {
+  return /Mac|iPhone|iPad/.test(navigator.platform || '')
+}
+
+export function modKey() {
+  return isMac() ? '⌘' : 'Ctrl'
+}
+
+export function autoGrow(textarea, max = 320) {
+  textarea.style.height = 'auto'
+  textarea.style.height = `${Math.min(max, textarea.scrollHeight)}px`
+}

package/web/lib/icons.js

@@ -0,0 +1,65 @@
+// 小图标集：统一的线性图标，避免加载外部字体
+const P = {
+  spark: '<path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/><path d="M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8z"/>',
+  image: '<rect x="3" y="4" width="18" height="16" rx="2.5"/><circle cx="8.6" cy="9.4" r="1.6"/><path d="M3.5 17.5 9 12l4 3.8 3-2.8 4.5 4.5"/>',
+  pen: '<path d="M4 20l4.2-1 10.4-10.4a2.2 2.2 0 0 0-3.1-3.1L5.1 15.9 4 20z"/><path d="M13.8 6.4l3.8 3.8"/>',
+  star: '<circle cx="6" cy="7" r="2"/><circle cx="18" cy="6" r="2"/><circle cx="12" cy="17" r="2"/><path d="M7.6 8.2 10.4 15M16.4 7.6 13.6 15M8 7h8"/>',
+  film: '<rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M8 5v14M16 5v14M3 9h5M16 9h5M3 15h5M16 15h5"/>',
+  settings: '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.9.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/>',
+  plus: '<path d="M12 5v14M5 12h14"/>',
+  minus: '<path d="M5 12h14"/>',
+  heart: '<path d="M20.8 5.6a5.4 5.4 0 0 0-7.7 0L12 6.7l-1.1-1.1a5.4 5.4 0 1 0-7.7 7.7L12 22l8.8-8.7a5.4 5.4 0 0 0 0-7.7z"/>',
+  download: '<path d="M12 3v12M7 10l5 5 5-5M4 21h16"/>',
+  trash: '<path d="M4 7h16M9 7V4h6v3M6 7l1 14h10l1-14M10 11v6M14 11v6"/>',
+  copy: '<rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>',
+  refresh: '<path d="M21 12a9 9 0 1 1-2.6-6.4M21 3v6h-6"/>',
+  undo: '<path d="M9 14 4 9l5-5"/><path d="M4 9h10a6 6 0 0 1 0 12h-3"/>',
+  redo: '<path d="M15 14l5-5-5-5"/><path d="M20 9H10a6 6 0 0 0 0 12h3"/>',
+  x: '<path d="M6 6l12 12M18 6 6 18"/>',
+  play: '<path d="M8 5l12 7-12 7z"/>',
+  pause: '<path d="M8 5v14M16 5v14"/>',
+  search: '<circle cx="11" cy="11" r="7"/><path d="M20 20l-3.6-3.6"/>',
+  chevron: '<path d="M6 9l6 6 6-6"/>',
+  arrowRight: '<path d="M4 12h15M13 6l6 6-6 6"/>',
+  wand: '<path d="M15 4V2M15 10V8M11 6H9M21 6h-2M18 9l1.4 1.4M18 3l1.4-1.4M4 20l9-9M6.5 6.5 5 5"/>',
+  book: '<path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H20v18H6.5A2.5 2.5 0 0 1 4 18.5z"/><path d="M4 18.5A2.5 2.5 0 0 1 6.5 16H20"/>',
+  layers: '<path d="M12 3 2 8l10 5 10-5z"/><path d="m2 13 10 5 10-5"/><path d="m2 18 10 5 10-5"/>',
+  zoomIn: '<circle cx="11" cy="11" r="7"/><path d="M20 20l-3.6-3.6M8 11h6M11 8v6"/>',
+  zoomOut: '<circle cx="11" cy="11" r="7"/><path d="M20 20l-3.6-3.6M8 11h6"/>',
+  fit: '<path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5"/>',
+  link: '<path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1.4 1.4"/><path d="M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1.4-1.4"/>',
+  check: '<path d="M4 12l5 5L20 6"/>',
+  alert: '<path d="M12 3 2 21h20z"/><path d="M12 9v5M12 17.5v.5"/>',
+  upload: '<path d="M12 16V4M7 9l5-5 5 5M4 20h16"/>',
+  more: '<circle cx="5" cy="12" r="1.2"/><circle cx="12" cy="12" r="1.2"/><circle cx="19" cy="12" r="1.2"/>',
+  eye: '<path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/>',
+  note: '<path d="M4 4h11l5 5v11H4z"/><path d="M15 4v5h5M8 13h8M8 17h5"/>',
+  folder: '<path d="M3 6a2 2 0 0 1 2-2h5l2 3h7a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>',
+  clock: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/>',
+  stop: '<rect x="6" y="6" width="12" height="12" rx="2"/>',
+  sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/>',
+  moon: '<path d="M20 14.5A8.5 8.5 0 1 1 9.5 4a7 7 0 0 0 10.5 10.5z"/>',
+  external: '<path d="M14 4h6v6M20 4l-9 9M19 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h5"/>',
+  edit: '<path d="M4 20h4l11-11a2.8 2.8 0 0 0-4-4L4 16z"/><path d="M13.5 6.5l4 4"/>',
+  duplicate: '<rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3"/>',
+  grid: '<rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/>',
+  chevronLeft: '<path d="M15 18l-6-6 6-6"/>',
+  chevronRight: '<path d="M9 6l6 6-6 6"/>',
+  send: '<path d="M22 2 11 13M22 2l-7 20-4-9-9-4z"/>',
+  wandSpark: '<path d="M4 20 15 9M13 4l1 3 3 1-3 1-1 3-1-3-3-1 3-1zM19 12l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7z"/>',
+  info: '<circle cx="12" cy="12" r="9"/><path d="M12 11v6M12 7.5v.5"/>',
+  arrowUp: '<path d="M12 20V4M5 11l7-7 7 7"/>',
+}
+
+export function icon(name, size = 18, stroke = 1.6) {
+  const path = P[name] ?? P.spark
+  return `<svg class="ic" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${stroke}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${path}</svg>`
+}
+
+export function brandMark(size = 22) {
+  return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <path d="M12 2.6c.9 4.6 2.8 6.5 7.4 7.4-4.6.9-6.5 2.8-7.4 7.4-.9-4.6-2.8-6.5-7.4-7.4 4.6-.9 6.5-2.8 7.4-7.4z" fill="currentColor" opacity=".92"/>
+    <circle cx="18.6" cy="18.2" r="1.9" fill="currentColor" opacity=".55"/>
+    <circle cx="5.4" cy="17.2" r="1.2" fill="currentColor" opacity=".4"/>
+  </svg>`
+}

package/web/lib/state.js

@@ -0,0 +1,42 @@
+export const app = {
+  lang: 'zh',
+  theme: 'light',
+  state: null,
+  settings: null,
+  imagePresets: [],
+  videoPresets: [],
+  model: null,
+  dataDir: '',
+  version: '',
+  view: null,
+  revision: 0,
+  polling: false,
+  /** 运行时由 app.js 注入 */
+  refresh: async () => {},
+  toast: () => {},
+  confirm: async () => false,
+  showLayer: () => () => {},
+  navigate: () => {},
+  openSettings: () => { location.hash = '#/settings' },
+}
+
+export function t(zh, en) {
+  return app.lang === 'en' ? en : zh
+}
+
+export function $(selector, root = document) {
+  return root.querySelector(selector)
+}
+
+export function providerChip(kind) {
+  if (kind === 'image') {
+    if (!app.settings?.imageReady) return { ok: false, text: t('生图未配置', 'Image not set') }
+    return { ok: true, text: app.settings.image.model || t('已连接', 'Ready') }
+  }
+  if (kind === 'video') {
+    if (!app.settings?.videoReady) return { ok: false, text: t('视频未配置', 'Video not set') }
+    return { ok: true, text: app.settings.video.model || t('已连接', 'Ready') }
+  }
+  if (!app.model) return { ok: false, text: t('模型未连接', 'No model') }
+  return { ok: true, text: app.model.label }
+}