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

package/src/video.js

@@ -0,0 +1,245 @@
+// 视频：兼容异步任务式视频接口；没有视频密钥时可以用「分镜短片」把画面串起来
+import { readFile } from 'node:fs/promises'
+import { extname, join } from 'node:path'
+import { RATIOS } from './graph.js'
+import { generateImage } from './image.js'
+import { imageReady, videoKey } from './settings.js'
+import { assertRemoteUrl, sleep, videoExtensionOf } from './util.js'
+
+const POLL_MS = 4_000
+const MAX_WAIT_MS = 20 * 60_000
+
+function extraOf(settings) {
+  try {
+    const parsed = JSON.parse(settings.video.extra || '{}')
+    return parsed && typeof parsed === 'object' ? parsed : {}
+  } catch {
+    return {}
+  }
+}
+
+function statusOf(data) {
+  const raw = data?.status ?? data?.state ?? data?.data?.status ?? data?.data?.state ?? ''
+  return String(raw).toLowerCase()
+}
+
+function isFailed(status) {
+  return ['failed', 'error', 'cancelled', 'canceled', 'expired'].includes(status)
+}
+
+function isDone(status) {
+  return ['completed', 'succeeded', 'success', 'done', 'finished'].includes(status)
+}
+
+function findUrl(data) {
+  if (!data) return ''
+  const candidates = [
+    data.url,
+    data.video_url,
+    data.videoUrl,
+    data.output_url,
+    data.result_url,
+    data.output?.url,
+    data.output?.video_url,
+    Array.isArray(data.output) ? data.output[0]?.url ?? data.output[0] : '',
+    data.data?.url,
+    data.data?.video_url,
+    data.data?.output?.url,
+    data.result?.url,
+    data.result?.video_url,
+    Array.isArray(data.data) ? data.data[0]?.url : '',
+  ]
+  return candidates.find(v => typeof v === 'string' && /^https?:\/\//.test(v)) ?? ''
+}
+
+function findId(data) {
+  return String(data?.id ?? data?.task_id ?? data?.taskId ?? data?.data?.id ?? data?.data?.task_id ?? data?.result?.id ?? '')
+}
+
+function progressOf(data) {
+  const raw = data?.progress ?? data?.percent ?? data?.data?.progress
+  if (raw === undefined) return null
+  const n = Number(raw)
+  if (!Number.isFinite(n)) return null
+  return Math.max(0, Math.min(100, n <= 1 ? Math.round(n * 100) : Math.round(n)))
+}
+
+function sameSite(a, b) {
+  try {
+    const ha = new URL(a).hostname.toLowerCase()
+    const hb = new URL(b).hostname.toLowerCase()
+    return ha === hb || ha.endsWith(`.${hb}`) || hb.endsWith(`.${ha}`)
+  } catch {
+    return false
+  }
+}
+
+async function fetchRemoteVideo(url, settings, key, signal) {
+  let res = await fetch(url, { signal })
+  if (!res.ok && (res.status === 401 || res.status === 403) && sameSite(url, settings.video.baseUrl)) {
+    await res.body?.cancel().catch(() => {})
+    res = await fetch(url, { headers: { authorization: `Bearer ${key}` }, signal })
+  }
+  return res
+}
+
+async function fetchVideoContent(settings, key, id, signal) {
+  const path = settings.video.contentPath.replace('{id}', encodeURIComponent(id))
+  const res = await fetch(`${settings.video.baseUrl}${path}`, { headers: { authorization: `Bearer ${key}` }, signal })
+  if (!res.ok) throw new Error(`下载视频失败（${res.status}）`)
+  return Buffer.from(await res.arrayBuffer())
+}
+
+/**
+ * 走异步接口生成视频，返回视频字节。
+ */
+export async function generateVideo(settings, record, { signal, filesDir, onProgress } = {}) {
+  const key = videoKey(settings)
+  if (!key) throw Object.assign(new Error('还没有配置视频密钥。也可以把模式换成「分镜短片」，用图片拼出动态预览'), { status: 400 })
+  if (!settings.video.baseUrl || !settings.video.model) throw Object.assign(new Error('先填好视频接口地址和模型'), { status: 400 })
+  const timeout = AbortSignal.timeout(MAX_WAIT_MS)
+  const combined = signal ? AbortSignal.any([signal, timeout]) : timeout
+  const ratio = RATIOS[record.aspect] ?? RATIOS['16:9']
+
+  const body = {
+    model: settings.video.model,
+    prompt: record.prompt,
+    seconds: String(record.duration),
+    size: ratio.size,
+    ...extraOf(settings),
+  }
+
+  if (record.reference && filesDir) {
+    try {
+      const buffer = await readFile(join(filesDir, record.reference.replace(/[^\w.-]/g, '')))
+      const type = extname(record.reference).toLowerCase() === '.jpg' ? 'image/jpeg' : extname(record.reference).toLowerCase() === '.webp' ? 'image/webp' : 'image/png'
+      body[settings.video.imageField || 'image'] = `data:${type};base64,${buffer.toString('base64')}`
+    } catch {
+      throw Object.assign(new Error('首帧图片不存在，重新上传一次'), { status: 400 })
+    }
+  }
+
+  let create
+  try {
+    const res = await fetch(`${settings.video.baseUrl}${settings.video.createPath}`, {
+      method: 'POST',
+      headers: { authorization: `Bearer ${key}`, 'content-type': 'application/json' },
+      body: JSON.stringify(body),
+      signal: combined,
+    })
+    const raw = await res.text()
+    try { create = JSON.parse(raw) } catch { create = null }
+    if (!res.ok) {
+      const detail = create?.error?.message ?? create?.message ?? raw.slice(0, 300)
+      throw Object.assign(new Error(`视频服务返回 ${res.status}：${detail}`), { status: res.status })
+    }
+  } catch (err) {
+    if (err.name === 'TimeoutError') throw new Error('视频接口响应超时')
+    throw err
+  }
+
+  const id = findId(create)
+  let status = statusOf(create)
+  let final = create
+  onProgress?.(10)
+  if (id && !isDone(status)) {
+    const statusPath = settings.video.statusPath.replace('{id}', encodeURIComponent(id))
+    const started = Date.now()
+    let lastProgress = 10
+    for (;;) {
+      if (Date.now() - started > MAX_WAIT_MS) throw new Error('视频生成超时（20 分钟），可以稍后到服务商后台查看')
+      await sleep(POLL_MS, combined)
+      let res
+      try {
+        res = await fetch(`${settings.video.baseUrl}${statusPath}`, { headers: { authorization: `Bearer ${key}` }, signal: combined })
+      } catch (err) {
+        if (err.name === 'TimeoutError' || combined.aborted) throw err
+        continue
+      }
+      if (!res.ok) {
+        if (res.status === 404 && Date.now() - started < 30_000) continue
+        throw new Error(`查询视频进度失败（${res.status}）`)
+      }
+      const raw = await res.text()
+      try { final = JSON.parse(raw) } catch { final = null }
+      status = statusOf(final) || status
+      const progress = progressOf(final)
+      if (progress !== null && progress > lastProgress) {
+        lastProgress = progress
+        onProgress?.(Math.min(96, progress))
+      } else {
+        const guess = Math.min(90, lastProgress + 2)
+        if (guess > lastProgress) { lastProgress = guess; onProgress?.(lastProgress) }
+      }
+      if (isFailed(status)) {
+        const message = final?.error?.message ?? final?.message ?? final?.data?.error?.message ?? '视频生成失败'
+        throw new Error(String(message).slice(0, 300))
+      }
+      if (isDone(status)) break
+    }
+  }
+
+  let buffer
+  const url = findUrl(final)
+  if (url) {
+    const remote = assertRemoteUrl(url)
+    const download = await fetchRemoteVideo(remote, settings, key, combined)
+    if (download.ok) {
+      buffer = Buffer.from(await download.arrayBuffer())
+    } else if (id && settings.video.contentPath) {
+      // 有些网关返回的下载地址需要额外鉴权或已经过期，回退到内容的官方路径。
+      await download.body?.cancel().catch(() => {})
+      buffer = await fetchVideoContent(settings, key, id, combined)
+    } else {
+      throw new Error(`下载视频失败（${download.status}）`)
+    }
+  } else if (id && settings.video.contentPath) {
+    buffer = await fetchVideoContent(settings, key, id, combined)
+  }
+  if (!buffer?.length) throw new Error('视频服务没有返回视频文件')
+  onProgress?.(100)
+  return { buffer, ext: videoExtensionOf(buffer) }
+}
+
+const BEATS = [
+  'establishing wide shot, the whole scene visible, atmospheric depth',
+  'medium shot, the subject in motion, natural framing',
+  'close-up detail, texture and light, shallow depth of field',
+  'final wide shot, quiet aftermath, cinematic negative space',
+]
+
+async function makeFrame(settings, record, beat, index, { signal, filesDir }) {
+  const ratio = RATIOS[record.aspect] ?? RATIOS['16:9']
+  const prompt = `${record.prompt}。${beat}`
+  const result = await generateImage(settings, {
+    prompt,
+    style: '电影感',
+    size: ratio.size,
+    reference: record.reference || undefined,
+  }, { signal, filesDir })
+  return result
+}
+
+/**
+ * 分镜短片：用生图服务生成 4 个关键帧，前端用交叉淡入播放。
+ */
+export async function generateStoryboard(settings, record, { signal, filesDir, onProgress } = {}) {
+  if (!imageReady(settings)) throw Object.assign(new Error('分镜短片需要先配好生图服务'), { status: 400 })
+  const frames = []
+  const errors = []
+  for (let i = 0; i < 4; i++) {
+    if (signal?.aborted) throw new Error('已停止')
+    try {
+      frames.push(await makeFrame(settings, record, BEATS[i], i, { signal, filesDir }))
+      onProgress?.(Math.round(((i + 1) / 4) * 90))
+    } catch (err) {
+      errors.push(err.message)
+      if (i === 0) throw err
+    }
+  }
+  if (!frames.length) throw new Error(errors[0] ?? '分镜生成失败')
+  onProgress?.(100)
+  return { frames, errors }
+}
+
+export { findUrl, findId, progressOf, statusOf }

package/src/writing.js

@@ -0,0 +1,112 @@
+// 写作动作 → 提示词
+const LENGTH = { short: 400, medium: 900, long: 1600, micro: 140 }
+const LENGTH_LABEL = { short: '约 400 字', medium: '约 900 字', long: '约 1600 字', micro: '约 100 字' }
+
+const TONES = ['自然叙述', '克制冷静', '热烈', '幽默', '诗意', '硬朗']
+const POVS = ['第一人称', '第三人称', '全知视角']
+
+const ACTIONS = {
+  continue: '续写',
+  polish: '润色',
+  expand: '扩写',
+  rewrite: '改写',
+  outline: '大纲',
+  title: '起标题',
+  custom: '按指令写',
+  graph: '星图写作',
+}
+
+export { ACTIONS, TONES, POVS, LENGTH }
+
+function clip(text, max) {
+  const value = String(text ?? '')
+  return value.length > max ? value.slice(-max) : value
+}
+
+function englishLine(action, lang, length) {
+  return lang === 'en'
+    ? `\n\nWrite in natural, fluent English. The length target is ${length} words or fewer. Output only the text the author can paste into the manuscript, with no preamble, no explanation, and no markdown fences.`
+    : ''
+}
+
+function buildSystem(body) {
+  const tone = TONES.includes(body.tone) ? body.tone : '自然叙述'
+  const pov = POVS.includes(body.pov) ? body.pov : '第三人称'
+  return [
+    '你是一位可靠的中文写作搭档，正在「摩登-媒体工作室」里和作者一起改稿。',
+    '你只输出可以直接放进正文的文字：不要解释你在做什么，不要写“好的”“以下是”，不要加代码块，不要用“---”分隔。',
+    `文风：${tone}。叙述人称：${pov}。保持作者已有的用词习惯和节奏，不擅自改人物名、数字和设定。`,
+    '不要为了凑字数重复已经写过的意思；没把握的地方宁可写得具体，也不要写空泛的总结。',
+    englishLine(body.action, body.lang, body.length),
+  ].filter(Boolean).join('\n')
+}
+
+function manuscriptBlock(body) {
+  const title = String(body.title ?? '').trim()
+  const content = clip(body.content ?? '', 8000)
+  const selection = String(body.selection ?? '').trim()
+  const parts = []
+  if (title) parts.push(`作品标题：${title}`)
+  if (content) parts.push(`<正文>\n${content}\n</正文>`)
+  if (selection) parts.push(`<选中的片段>\n${selection}\n</选中的片段>\n只处理这个片段。`)
+  if (body.outline) parts.push(`<大纲>\n${String(body.outline).slice(0, 2000)}\n</大纲>`)
+  return parts.join('\n\n')
+}
+
+export function writingPrompts(body) {
+  const action = ACTIONS[body.action] ? body.action : 'custom'
+  const length = LENGTH[body.length] ? body.length : 'medium'
+  const target = LENGTH_LABEL[length]
+  const instruction = String(body.instruction ?? '').trim().slice(0, 600)
+  const material = manuscriptBlock(body)
+  const system = buildSystem({ ...body, action })
+  let task = ''
+
+  switch (action) {
+    case 'continue':
+      task = `从正文结束的地方继续往下写，${target}。承接最后一句的语气和场景，不要复述已经写过的内容。只输出新写的那部分。`
+      break
+    case 'polish':
+      task = `润色${body.selection ? '选中的片段' : '正文'}：保留原意、信息和人物口吻，改善节奏、用词和标点，删掉多余的解释。只输出润色后的文字。`
+      break
+    case 'expand':
+      task = `把${body.selection ? '选中的片段' : '正文'}扩写到${target}：补充具体的动作、感官细节和环境，不要新增与上下文冲突的情节。只输出扩写后的文字。`
+      break
+    case 'rewrite':
+      task = `按这个要求重写${body.selection ? '选中的片段' : '正文'}：${instruction || '换一种更自然、更有画面感的写法'}。保留事实和人物关系，只输出重写后的文字。`
+      break
+    case 'outline':
+      task = `为这个作品整理一份可执行的大纲。输出三到五节，每节一行，格式是「## 小节名：这一节发生什么、情绪怎么走」。不要写正文。`
+      break
+    case 'title':
+      task = '给这个作品起 6 个标题。每行一个，只写标题，不编号、不解释。标题要具体、有画面感，不要浮夸的营销腔。'
+      break
+    case 'graph':
+      task = instruction || '根据素材写一段有画面感的文字，控制在 120 字以内。'
+      break
+    default:
+      task = instruction || '根据素材继续写。'
+  }
+
+  const user = [
+    material || '（还没有正文，按指令从零写。）',
+    '',
+    `任务：${task}`,
+    body.action === 'continue' ? `篇幅：${target}。` : '',
+  ].filter(Boolean).join('\n')
+
+  return { system, user, action, length }
+}
+
+/** 洗掉模型偶尔带出来的前缀和代码围栏 */
+export function cleanOutput(text, action) {
+  let out = String(text ?? '').trim()
+  out = out.replace(/```(?:markdown|md|text)?\s*/gi, '').trim()
+  if (action !== 'outline' && action !== 'title') {
+    out = out.replace(/^(好的|当然|没问题)[，,。!！]\s*/u, '')
+    out = out.replace(/^(这是|以下是)?\s*(续写|润色|扩写|改写|正文|草稿)[:：]\s*/u, '')
+  }
+  return out.trim()
+}
+
+export const WRITING_SYSTEM_HINT = '写作使用 DSH 当前默认模型；密钥由 DSH 管理，插件不保存。'

package/web/app.js

@@ -0,0 +1,268 @@
+import { api } from './lib/api.js'
+import { $, esc, modKey } from './lib/dom.js'
+import { icon, brandMark } from './lib/icons.js'
+import { app, t } from './lib/state.js'
+import * as imageView from './views/image.js'
+import * as videoView from './views/video.js'
+import * as writeView from './views/write.js'
+import * as constellationView from './views/constellation.js'
+import * as settingsView from './views/settings.js'
+
+const ROUTES = {
+  image: { mod: imageView, title: ['生图工作台', 'Image Studio'], eyebrow: ['TEXT TO IMAGE', 'TEXT TO IMAGE'], desc: ['一句话，一张画。', 'One line, one image.'] },
+  write: { mod: writeView, title: ['写作工作台', 'Writing Studio'], eyebrow: ['LONG FORM', 'LONG FORM'], desc: ['从灵感到成稿，留得住每一版。', 'From spark to manuscript, every draft kept.'] },
+  constellation: { mod: constellationView, title: ['星图工作台', 'Star Map'], eyebrow: ['NODE GRAPH', 'NODE GRAPH'], desc: ['把提示词、写作、画面与视频连成一条线。', 'Wire prompts, writing, image and video into one flow.'] },
+  video: { mod: videoView, title: ['视频工作台', 'Video Studio'], eyebrow: ['MOTION', 'MOTION'], desc: ['给画面一点时间。', 'Give the frame some time.'] },
+  settings: { mod: settingsView, title: ['设置', 'Settings'], eyebrow: ['WORKBENCH', 'WORKBENCH'], desc: ['接口、模型与本机数据。', 'Providers, models and local data.'] },
+}
+
+const params = new URLSearchParams(location.search)
+app.lang = params.get('lang') === 'en' ? 'en' : 'zh'
+const storedTheme = localStorage.getItem('media-workbench-modern:theme')
+const theme = storedTheme === 'dark' || storedTheme === 'light' ? storedTheme : params.get('theme') === 'dark' ? 'dark' : 'light'
+
+function applyTheme(next) {
+  app.theme = next
+  document.documentElement.dataset.theme = next
+  const btn = $('#theme-toggle')
+  if (btn) btn.innerHTML = icon(next === 'dark' ? 'sun' : 'moon', 17)
+  const meta = document.querySelector('meta[name="theme-color"]')
+  if (meta) meta.content = next === 'dark' ? '#141210' : '#f6f3ee'
+}
+
+function renderChrome() {
+  const shell = document.createElement('div')
+  shell.className = 'app-shell'
+  shell.innerHTML = `
+    <aside class="rail">
+      <div class="rail-brand" title="摩登-媒体工作室">${brandMark(24)}<span>MODERN</span></div>
+      <nav class="rail-nav" aria-label="${esc(t('工作台', 'Workbenches'))}">
+        <button class="rail-btn" data-route="image">${icon('image', 20)}<span>${esc(t('生图', 'Image'))}</span></button>
+        <button class="rail-btn" data-route="write">${icon('pen', 20)}<span>${esc(t('写作', 'Write'))}</span></button>
+        <button class="rail-btn" data-route="constellation">${icon('star', 20)}<span>${esc(t('星图', 'Map'))}</span></button>
+        <button class="rail-btn" data-route="video">${icon('film', 20)}<span>${esc(t('视频', 'Video'))}</span></button>
+      </nav>
+      <div class="rail-foot">
+        <button class="rail-btn" data-route="settings">${icon('settings', 19)}<span>${esc(t('设置', 'Setup'))}</span></button>
+        <button class="rail-btn rail-theme" id="theme-toggle" title="${esc(t('切换明暗', 'Toggle theme'))}">${icon(theme === 'dark' ? 'sun' : 'moon', 17)}</button>
+      </div>
+    </aside>
+    <div class="workspace">
+      <header class="topbar">
+        <div class="topbar-copy">
+          <span class="eyebrow" id="top-eyebrow"></span>
+          <h1 id="top-title"></h1>
+          <p class="topbar-desc" id="top-desc"></p>
+        </div>
+        <div class="topbar-side">
+          <button class="status-chip" id="model-chip" title="${esc(t('DSH 当前模型', 'Current DSH model'))}"></button>
+          <button class="status-chip" id="image-chip" title="${esc(t('打开设置', 'Open settings'))}"></button>
+          <button class="icon-btn" id="refresh-btn" title="${esc(t('刷新', 'Refresh'))}">${icon('refresh', 16)}</button>
+        </div>
+      </header>
+      <main class="view" id="view"><div class="boot"><span class="boot-mark">${brandMark(28)}</span><p>${esc(t('正在打开工作台…', 'Opening the studio…'))}</p></div></main>
+    </div>
+    <div id="layer-root"></div>
+    <div id="toasts" aria-live="polite"></div>
+  `
+  document.body.replaceChildren(shell)
+  document.documentElement.lang = app.lang === 'en' ? 'en' : 'zh-CN'
+}
+
+function updateChips() {
+  const modelChip = $('#model-chip')
+  const imageChip = $('#image-chip')
+  if (modelChip) {
+    const ok = Boolean(app.model)
+    modelChip.className = `status-chip ${ok ? 'is-ok' : 'is-off'}`
+    modelChip.innerHTML = `<i class="dot"></i><span>${esc(ok ? t('写作', 'Write') + ' · ' + app.model.label : t('模型未连接', 'No model'))}</span>`
+  }
+  if (imageChip) {
+    const ok = Boolean(app.settings?.imageReady)
+    imageChip.className = `status-chip ${ok ? 'is-ok' : 'is-off'}`
+    imageChip.innerHTML = `<i class="dot"></i><span>${esc(ok ? t('生图已连接', 'Image ready') : t('生图未配置', 'Image not set'))}</span>`
+  }
+}
+
+function paintRoute() {
+  const route = (location.hash.replace(/^#\/?/, '') || 'image').split('?')[0]
+  const name = ROUTES[route] ? route : 'image'
+  const conf = ROUTES[name]
+  for (const btn of document.querySelectorAll('.rail-btn[data-route]')) {
+    btn.classList.toggle('is-on', btn.dataset.route === name)
+    btn.setAttribute('aria-current', btn.dataset.route === name ? 'page' : 'false')
+  }
+  $('#top-eyebrow').textContent = 'MODERN MEDIA STUDIO'
+  $('#top-title').textContent = t('摩登-媒体工作室', 'Modern-MediaStudio')
+  $('#top-desc').textContent = t(conf.desc[0], conf.desc[1])
+  document.title = `${t(conf.title[0], conf.title[1])} · ${t('摩登-媒体工作室', 'Modern-MediaStudio')}`
+  const view = $('#view')
+  if (app.view?.unmount) {
+    try { app.view.unmount() } catch (err) { console.warn('[modern-media] unmount', err) }
+  }
+  view.replaceChildren()
+  app.view = conf.mod.mount(view, app) || null
+  app.viewName = name
+  updateChips()
+}
+
+async function refresh() {
+  const data = await api('bootstrap')
+  app.state = data.state
+  app.settings = data.settings
+  app.imagePresets = data.imagePresets ?? []
+  app.videoPresets = data.videoPresets ?? []
+  app.model = data.model
+  app.dataDir = data.dataDir
+  app.version = data.version
+  app.revision += 1
+  updateChips()
+  try { app.view?.update?.(app.state) } catch (err) { console.warn('[modern-media] update', err) }
+  return data
+}
+
+app.refresh = refresh
+
+function bootToast(message, kind = 'info') {
+  const host = $('#toasts')
+  if (!host) return
+  const node = document.createElement('div')
+  node.className = `toast toast-${kind}`
+  node.innerHTML = `<span class="toast-ic">${icon(kind === 'error' ? 'alert' : kind === 'success' ? 'check' : 'info', 16)}</span><p>${esc(message)}</p><button class="toast-x" aria-label="关闭">${icon('x', 13)}</button>`
+  const close = () => {
+    node.classList.add('is-out')
+    setTimeout(() => node.remove(), 220)
+  }
+  node.querySelector('.toast-x').addEventListener('click', close)
+  host.appendChild(node)
+  setTimeout(close, kind === 'error' ? 6200 : 3600)
+}
+
+app.toast = bootToast
+
+app.showLayer = (content, { className = '', onClose } = {}) => {
+  const root = $('#layer-root')
+  const overlay = document.createElement('div')
+  overlay.className = `layer ${className}`.trim()
+  overlay.appendChild(content)
+  const close = () => {
+    overlay.classList.add('is-out')
+    document.removeEventListener('keydown', onKey)
+    setTimeout(() => {
+      overlay.remove()
+      onClose?.()
+    }, 180)
+  }
+  const onKey = event => { if (event.key === 'Escape') { event.stopPropagation(); close() } }
+  overlay.addEventListener('pointerdown', event => { if (event.target === overlay) close() })
+  document.addEventListener('keydown', onKey)
+  root.appendChild(overlay)
+  requestAnimationFrame(() => overlay.classList.add('is-in'))
+  return close
+}
+
+app.confirm = ({ title, message, confirmText = '确定', cancelText = '取消', danger = false }) => new Promise(resolve => {
+  const card = document.createElement('div')
+  card.className = 'dialog'
+  card.innerHTML = `
+    <h3>${esc(title)}</h3>
+    <p>${esc(message)}</p>
+    <div class="dialog-actions">
+      <button class="btn btn-ghost" data-act="cancel">${esc(cancelText)}</button>
+      <button class="btn ${danger ? 'btn-danger' : 'btn-primary'}" data-act="ok">${esc(confirmText)}</button>
+    </div>`
+  let close = () => {}
+  const finish = value => { close(); resolve(value) }
+  card.querySelector('[data-act="cancel"]').addEventListener('click', () => finish(false))
+  card.querySelector('[data-act="ok"]').addEventListener('click', () => finish(true))
+  close = app.showLayer(card, { className: 'layer-dialog', onClose: () => resolve(false) })
+  card.querySelector('[data-act="ok"]').focus()
+})
+
+app.navigate = route => { location.hash = `#/${route}` }
+
+function wire() {
+  document.addEventListener('click', event => {
+    const nav = event.target.closest('.rail-btn[data-route]')
+    if (nav) {
+      app.navigate(nav.dataset.route)
+      return
+    }
+    if (event.target.closest('#refresh-btn')) {
+      refresh().then(() => bootToast(t('已刷新', 'Refreshed'), 'success')).catch(err => bootToast(err.message, 'error'))
+      return
+    }
+    if (event.target.closest('#image-chip')) {
+      app.navigate('settings')
+      return
+    }
+    if (event.target.closest('#model-chip')) {
+      app.openSettings()
+      return
+    }
+    if (event.target.closest('#theme-toggle')) {
+      const next = app.theme === 'dark' ? 'light' : 'dark'
+      localStorage.setItem('media-workbench-modern:theme', next)
+      applyTheme(next)
+    }
+  })
+
+  window.addEventListener('hashchange', () => {
+    if (!app.state) return
+    paintRoute()
+    app.view?.update?.(app.state)
+  })
+
+  window.addEventListener('message', event => {
+    if (event.origin !== location.origin) return
+    const data = event.data
+    if (!data || typeof data !== 'object') return
+    if (data.type === 'media-workbench-modern:theme' && (data.scheme === 'dark' || data.scheme === 'light')) {
+      if (!localStorage.getItem('media-workbench-modern:theme')) applyTheme(data.scheme)
+    }
+    if (data.type === 'media-workbench-modern:locale' && data.lang !== app.lang && (data.lang === 'zh' || data.lang === 'en')) {
+      app.lang = data.lang
+      document.documentElement.lang = app.lang === 'en' ? 'en' : 'zh-CN'
+      renderChrome()
+      paintRoute()
+      app.view?.update?.(app.state)
+    }
+  })
+
+  document.addEventListener('keydown', event => {
+    if ((event.metaKey || event.ctrlKey) && event.key === ',') {
+      event.preventDefault()
+      app.navigate('settings')
+    }
+  })
+
+  // 轮询只用来推进异步任务；页面隐藏时暂停
+  setInterval(() => {
+    if (document.hidden || !app.state || app.polling) return
+    const hasRunning = (app.state.images ?? []).some(row => row.status === 'queued' || row.status === 'running')
+      || (app.state.videos ?? []).some(row => row.status === 'queued' || row.status === 'running')
+      || (app.state.graphs ?? []).some(graph => graph.run?.status === 'running')
+    if (!hasRunning) return
+    app.polling = true
+    refresh().catch(() => {}).finally(() => { app.polling = false })
+  }, 2200)
+}
+
+async function boot() {
+  renderChrome()
+  applyTheme(theme)
+  wire()
+  $('#refresh-btn').title = `${t('刷新', 'Refresh')} (${modKey()}+R)`
+  try {
+    await refresh()
+  } catch (err) {
+    $('#view').innerHTML = `<div class="fatal"><h2>${esc(t('工作台没有启动', 'Studio failed to start'))}</h2><p>${esc(err.message)}</p><p class="fine">${esc(t('确认插件已启用，然后刷新页面。', 'Check the plugin is enabled, then reload.'))}</p></div>`
+    return
+  }
+  paintRoute()
+  app.view?.update?.(app.state)
+}
+
+boot()
+
+export { refresh }

package/web/favicon.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#d97757"/>
+      <stop offset="1" stop-color="#e3a078"/>
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="16" fill="#1e1a16"/>
+  <path d="M32 12c1.8 9.8 6.4 14.4 16.2 16.2C38.4 30.2 33.8 34.8 32 44.6 30.2 34.8 25.6 30.2 15.8 28.2 25.6 26.4 30.2 21.8 32 12z" fill="url(#g)"/>
+  <circle cx="46.5" cy="47.5" r="5" fill="#e3a078" opacity=".65"/>
+  <circle cx="18" cy="46" r="3" fill="#d97757" opacity=".55"/>
+</svg>

package/web/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="zh-CN" data-theme="light">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta name="theme-color" content="#f6f3ee">
+  <title>摩登-媒体工作室</title>
+  <link rel="icon" href="./favicon.svg" type="image/svg+xml">
+  <link rel="stylesheet" href="./styles.css">
+</head>
+<body>
+  <div class="boot" id="boot"><p>正在打开摩登-媒体工作室…</p></div>
+  <script type="module" src="./app.js"></script>
+  <noscript>这个工作台需要 JavaScript。</noscript>
+</body>
+</html>