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

package/web/views/settings.js

@@ -0,0 +1,244 @@
+import { api } from '../lib/api.js'
+import { $, esc } from '../lib/dom.js'
+import { icon } from '../lib/icons.js'
+import { app, t } from '../lib/state.js'
+
+export function mount(root) {
+  const settings = app.settings ?? {}
+  const image = settings.image ?? {}
+  const video = settings.video ?? {}
+  let testImage = ''
+  let busy = false
+
+  root.innerHTML = `
+    <section class="bench bench-settings">
+      <div class="settings-scroll">
+        <header class="settings-hero">
+          <span class="eyebrow">${esc(t('工作台设置', 'WORKBENCH SETTINGS'))}</span>
+          <h2>${esc(t('把接口接上，其余都在本机', 'Connect providers. Everything else stays local.'))}</h2>
+          <p>${esc(t('写作走 DSH 当前模型，不需要在这里填密钥；生图和视频各自填写自己的接口。密钥只保存在本机 settings.json（权限 600），不会回传给浏览器。', 'Writing uses the current DSH model. Image and video providers each have their own endpoint. Keys stay in a local settings.json (mode 600) and are never sent back to the browser.'))}</p>
+        </header>
+
+        <section class="settings-card" id="image-card">
+          <header class="settings-head">
+            <div class="settings-title"><span class="settings-ic" style="--c:#8a6fd1">${icon('image', 18)}</span><div><h3>${esc(t('生图服务', 'Image provider'))}</h3><p>${esc(t('兼容 OpenAI Images API：POST /images/generations，参考图走 /images/edits。', 'OpenAI Images compatible: POST /images/generations, edits at /images/edits.'))}</p></div></div>
+            <span class="ready-pill ${settings.imageReady ? 'is-ok' : 'is-off'}" id="image-ready"><i></i>${settings.imageReady ? t('已就绪', 'Ready') : t('未配置', 'Not set')}</span>
+          </header>
+          <div class="settings-grid">
+            <label class="field"><span class="field-label">${esc(t('服务预设', 'Preset'))}</span>
+              <select class="select" id="image-preset">${(app.imagePresets ?? []).map(p => `<option value="${p.id}" ${p.id === image.preset ? 'selected' : ''}>${esc(p.name)}</option>`).join('')}</select>
+            </label>
+            <label class="field"><span class="field-label">${esc(t('接口地址', 'Base URL'))}</span>
+              <input class="input" id="image-base" value="${esc(image.baseUrl ?? '')}" placeholder="https://api.openai.com/v1" spellcheck="false">
+            </label>
+            <label class="field"><span class="field-label">${esc(t('模型', 'Model'))}</span>
+              <input class="input" id="image-model" value="${esc(image.model ?? '')}" placeholder="gpt-image-1" spellcheck="false">
+            </label>
+            <label class="field"><span class="field-label">${esc(t('密钥', 'API key'))}</span>
+              <input class="input" id="image-key" type="password" autocomplete="off" placeholder="${image.hasKey ? esc(t('已保存（尾号 ', 'Saved (ends ') + esc(image.keyHint ?? '') + '）') : 'sk-…'}">
+            </label>
+            <label class="field"><span class="field-label">${esc(t('默认尺寸', 'Default size'))}</span>
+              <input class="input" id="image-size" value="${esc(image.size ?? '')}" placeholder="1024x1024" spellcheck="false">
+            </label>
+            <label class="field"><span class="field-label">${esc(t('质量', 'Quality'))}</span>
+              <input class="input" id="image-quality" value="${esc(image.quality ?? '')}" placeholder="auto / high" spellcheck="false">
+            </label>
+            <label class="field field-wide"><span class="field-label">${esc(t('附加参数 JSON', 'Extra JSON'))}</span>
+              <textarea id="image-extra" rows="2" spellcheck="false" placeholder='{"response_format":"b64_json"}'>${esc(image.extra ?? '')}</textarea>
+            </label>
+          </div>
+          <footer class="settings-actions">
+            <span class="fine">${image.hasKey ? esc(t('密钥已存在，留空表示不修改。', 'A key exists; leave blank to keep it.')) : esc(t('还没有密钥。', 'No key yet.'))}</span>
+            <span class="spacer"></span>
+            ${image.hasKey ? `<button class="text-btn danger-quiet" id="image-clear-key">${esc(t('清除密钥', 'Clear key'))}</button>` : ''}
+            <button class="btn btn-small btn-ghost" id="image-test">${esc(t('试画一张', 'Test image'))}</button>
+            <button class="btn btn-small btn-primary" id="image-save">${esc(t('保存', 'Save'))}</button>
+          </footer>
+          <div class="test-result" id="test-result" hidden><img id="test-img" alt=""><span>${esc(t('接口通了。', 'The provider works.'))}</span></div>
+        </section>
+
+        <section class="settings-card" id="video-card">
+          <header class="settings-head">
+            <div class="settings-title"><span class="settings-ic" style="--c:#3f8f92">${icon('film', 18)}</span><div><h3>${esc(t('视频服务', 'Video provider'))}</h3><p>${esc(t('异步任务接口：POST 创建任务，轮询状态，完成后下载。', 'Async task API: POST to create, poll status, download when done.'))}</p></div></div>
+            <span class="ready-pill ${settings.videoReady ? 'is-ok' : 'is-off'}" id="video-ready"><i></i>${settings.videoReady ? t('已就绪', 'Ready') : t('未配置', 'Not set')}</span>
+          </header>
+          <div class="settings-grid">
+            <label class="field"><span class="field-label">${esc(t('服务预设', 'Preset'))}</span>
+              <select class="select" id="video-preset">${(app.videoPresets ?? []).map(p => `<option value="${p.id}" ${p.id === video.preset ? 'selected' : ''}>${esc(p.name)}</option>`).join('')}</select>
+            </label>
+            <label class="field"><span class="field-label">${esc(t('接口地址', 'Base URL'))}</span>
+              <input class="input" id="video-base" value="${esc(video.baseUrl ?? '')}" placeholder="https://api.openai.com/v1" spellcheck="false">
+            </label>
+            <label class="field"><span class="field-label">${esc(t('模型', 'Model'))}</span>
+              <input class="input" id="video-model" value="${esc(video.model ?? '')}" placeholder="sora-2" spellcheck="false">
+            </label>
+            <label class="field"><span class="field-label">${esc(t('密钥', 'API key'))}</span>
+              <input class="input" id="video-key" type="password" autocomplete="off" placeholder="${video.hasKey ? esc(t('已保存（尾号 ', 'Saved (ends ') + esc(video.keyHint ?? '') + '）') : 'sk-…'}">
+            </label>
+            <label class="field"><span class="field-label">${esc(t('创建路径', 'Create path'))}</span><input class="input" id="video-create" value="${esc(video.createPath ?? '/videos')}" spellcheck="false"></label>
+            <label class="field"><span class="field-label">${esc(t('状态路径', 'Status path'))}</span><input class="input" id="video-status" value="${esc(video.statusPath ?? '/videos/{id}')}" spellcheck="false"></label>
+            <label class="field"><span class="field-label">${esc(t('内容路径', 'Content path'))}</span><input class="input" id="video-content" value="${esc(video.contentPath ?? '/videos/{id}/content')}" spellcheck="false"></label>
+            <label class="field"><span class="field-label">${esc(t('首帧字段名', 'Image field'))}</span><input class="input" id="video-field" value="${esc(video.imageField ?? 'image')}" spellcheck="false"></label>
+            <label class="field field-wide"><span class="field-label">${esc(t('附加参数 JSON', 'Extra JSON'))}</span><textarea id="video-extra" rows="2" spellcheck="false" placeholder='{"resolution":"1080p"}'>${esc(video.extra ?? '')}</textarea></label>
+          </div>
+          <footer class="settings-actions">
+            <span class="fine">${esc(t('没有视频服务时，视频工作台仍可用「分镜短片」模式。', 'Without a video provider, storyboard mode still works.'))}</span>
+            <span class="spacer"></span>
+            ${video.hasKey ? `<button class="text-btn danger-quiet" id="video-clear-key">${esc(t('清除密钥', 'Clear key'))}</button>` : ''}
+            <button class="btn btn-small btn-primary" id="video-save">${esc(t('保存', 'Save'))}</button>
+          </footer>
+        </section>
+
+        <section class="settings-card">
+          <header class="settings-head">
+            <div class="settings-title"><span class="settings-ic" style="--c:#b4833e">${icon('pen', 18)}</span><div><h3>${esc(t('写作模型', 'Writing model'))}</h3><p>${esc(t('使用 DSH 当前默认模型；在 DSH 的模型选择里切换。', 'Uses the current DSH default model; switch it in DSH.'))}</p></div></div>
+            <span class="ready-pill ${app.model ? 'is-ok' : 'is-off'}"><i></i>${app.model ? esc(app.model.label) : t('未连接', 'Not connected')}</span>
+          </header>
+        </section>
+
+        <section class="settings-card">
+          <header class="settings-head">
+            <div class="settings-title"><span class="settings-ic" style="--c:#6b7280">${icon('folder', 18)}</span><div><h3>${esc(t('本机数据', 'Local data'))}</h3><p>${esc(t('作品、图片、视频和星图都在这个目录，不上传云端。', 'Works, images, videos and star maps live here. Nothing is uploaded.'))}</p></div></div>
+          </header>
+          <div class="data-path"><code id="data-path">${esc(app.dataDir)}</code><button class="text-btn" id="copy-path">${icon('copy', 13)}${esc(t('复制路径', 'Copy path'))}</button></div>
+          <div class="settings-actions wrap">
+            <button class="btn btn-small btn-ghost" id="export-all">${icon('download', 14)}${esc(t('导出全部数据', 'Export all data'))}</button>
+            <button class="btn btn-small btn-ghost" id="clear-images">${esc(t('清空图片记录', 'Clear images'))}</button>
+            <button class="btn btn-small btn-ghost" id="clear-videos">${esc(t('清空视频记录', 'Clear videos'))}</button>
+            <button class="btn btn-small btn-ghost danger-quiet" id="clear-all">${esc(t('清空全部记录', 'Clear everything'))}</button>
+          </div>
+        </section>
+
+        <section class="settings-card about-card">
+          <div class="about-mark">${icon('spark', 22)}</div>
+          <div>
+            <h3>${esc(t('摩登-媒体工作室', 'Modern-MediaStudio'))} <span class="version">v${esc(app.version)}</span></h3>
+            <p>${esc(t('一个 DSH 插件：生图、写作、星图、视频四个工作台，作品留在本机。按 ', 'A DSH plugin with four benches: image, writing, star map and video. Press '))}<kbd>${navigator.platform.includes('Mac') ? '⌘' : 'Ctrl'}</kbd> + <kbd>,</kbd> ${esc(t('打开设置。', 'to open settings.'))}</p>
+          </div>
+        </section>
+      </div>
+    </section>
+  `
+
+  const field = id => $('#' + id)
+
+  // 预设联动
+  field('image-preset').addEventListener('change', () => {
+    const preset = (app.imagePresets ?? []).find(p => p.id === field('image-preset').value)
+    if (preset?.baseUrl) field('image-base').value = preset.baseUrl
+    if (preset?.model) field('image-model').value = preset.model
+  })
+  field('video-preset').addEventListener('change', () => {
+    const preset = (app.videoPresets ?? []).find(p => p.id === field('video-preset').value)
+    if (preset?.baseUrl) field('video-base').value = preset.baseUrl
+    if (preset?.model) field('video-model').value = preset.model
+  })
+
+  async function saveImage() {
+    if (busy) return
+    busy = true
+    try {
+      const data = await api('settings', {
+        image: {
+          preset: field('image-preset').value,
+          baseUrl: field('image-base').value,
+          model: field('image-model').value,
+          size: field('image-size').value,
+          quality: field('image-quality').value,
+          extra: field('image-extra').value,
+          apiKey: field('image-key').value,
+        },
+      })
+      app.settings = data.settings
+      field('image-key').value = ''
+      app.toast(t('生图设置已保存', 'Image settings saved'), 'success')
+      await app.refresh()
+    } catch (err) { app.toast(err.message, 'error') }
+    finally { busy = false }
+  }
+
+  async function saveVideo() {
+    if (busy) return
+    busy = true
+    try {
+      const data = await api('settings', {
+        video: {
+          preset: field('video-preset').value,
+          baseUrl: field('video-base').value,
+          model: field('video-model').value,
+          createPath: field('video-create').value,
+          statusPath: field('video-status').value,
+          contentPath: field('video-content').value,
+          imageField: field('video-field').value,
+          extra: field('video-extra').value,
+          apiKey: field('video-key').value,
+        },
+      })
+      app.settings = data.settings
+      field('video-key').value = ''
+      app.toast(t('视频设置已保存', 'Video settings saved'), 'success')
+      await app.refresh()
+    } catch (err) { app.toast(err.message, 'error') }
+    finally { busy = false }
+  }
+
+  field('image-save').addEventListener('click', saveImage)
+  field('video-save').addEventListener('click', saveVideo)
+
+  field('image-clear-key')?.addEventListener('click', async () => {
+    try {
+      const data = await api('settings', { image: { clearKey: true } })
+      app.settings = data.settings
+      app.toast(t('已清除生图密钥', 'Image key cleared'), 'success')
+      await app.refresh()
+    } catch (err) { app.toast(err.message, 'error') }
+  })
+  field('video-clear-key')?.addEventListener('click', async () => {
+    try {
+      const data = await api('settings', { video: { clearKey: true } })
+      app.settings = data.settings
+      app.toast(t('已清除视频密钥', 'Video key cleared'), 'success')
+      await app.refresh()
+    } catch (err) { app.toast(err.message, 'error') }
+  })
+
+  field('image-test').addEventListener('click', async () => {
+    if (busy) return
+    if (!field('image-key').value && !app.settings?.image?.hasKey) return app.toast(t('先填密钥并保存', 'Add a key and save first'), 'error')
+    busy = true
+    const btn = field('image-test')
+    btn.textContent = t('正在画…', 'Drawing…')
+    try {
+      const data = await api('settings/test-image', {})
+      testImage = data.url
+      field('test-result').hidden = false
+      field('test-img').src = testImage
+      app.toast(t('接口通了', 'Provider works'), 'success')
+    } catch (err) { app.toast(err.message, 'error') }
+    finally { busy = false; btn.textContent = t('试画一张', 'Test image') }
+  })
+
+  field('copy-path').addEventListener('click', async () => {
+    try { await navigator.clipboard.writeText(app.dataDir); app.toast(t('路径已复制', 'Path copied'), 'success') } catch { app.toast(t('复制失败', 'Copy failed'), 'error') }
+  })
+
+  field('export-all').addEventListener('click', () => { location.href = '/media-workbench-modern/api/export' })
+
+  async function clearScope(scope) {
+    const label = { images: t('图片记录', 'image records'), videos: t('视频记录', 'video records'), all: t('全部记录', 'all records') }[scope]
+    const ok = await app.confirm({ title: t('清空', 'Clear ') + label + '？', message: t('文件会留在本机目录，但工作台里不再显示。', 'Files stay on disk; the workbench stops listing them.'), confirmText: t('清空', 'Clear'), danger: true })
+    if (!ok) return
+    try {
+      await api('clear', { scope })
+      await app.refresh()
+      app.toast(t('已清空', 'Cleared'), 'success')
+    } catch (err) { app.toast(err.message, 'error') }
+  }
+  field('clear-images').addEventListener('click', () => clearScope('images'))
+  field('clear-videos').addEventListener('click', () => clearScope('videos'))
+  field('clear-all').addEventListener('click', () => clearScope('all'))
+
+  return {
+    update() { /* 设置页不跟随轮询刷新，避免覆盖正在编辑的值 */ },
+  }
+}

package/web/views/video.js

@@ -0,0 +1,363 @@
+import { api, fileUrl, upload } from '../lib/api.js'
+import { $, $$, autoGrow, downloadUrl, esc, fmtTime, modKey } from '../lib/dom.js'
+import { icon } from '../lib/icons.js'
+import { app, t } from '../lib/state.js'
+import { RATIOS } from '../lib/constants.js'
+
+const MODES = [
+  { id: 'text', label: ['文生视频', 'Text to video'], hint: ['只给描述，让画面动起来', 'Describe it, let it move'] },
+  { id: 'image', label: ['图生视频', 'Image to video'], hint: ['用一张首帧，接住构图和光线', 'Start from a first frame'] },
+  { id: 'storyboard', label: ['分镜短片', 'Storyboard'], hint: ['用 4 张关键帧拼出动态预览', 'Four keyframes, one moving preview'] },
+]
+
+export function mount(root) {
+  const prefs = app.state?.preferences ?? {}
+  let mode = MODES.some(item => item.id === prefs.videoMode) ? prefs.videoMode : 'text'
+  let ratio = RATIOS.some(r => r.id === prefs.videoRatio) ? prefs.videoRatio : '16:9'
+  let duration = [5, 8, 10, 15].includes(Number(prefs.videoDuration)) ? Number(prefs.videoDuration) : 5
+  let reference = null
+  let busy = false
+
+  root.innerHTML = `
+    <section class="bench bench-video">
+      <aside class="composer">
+        <div class="composer-head">
+          <div>
+            <span class="eyebrow">${esc(t('镜头', 'MOTION'))}</span>
+            <h2>${esc(t('视频工作台', 'Video Studio'))}</h2>
+          </div>
+          <button class="icon-btn" data-act="settings" title="${esc(t('视频设置', 'Video settings'))}">${icon('settings', 16)}</button>
+        </div>
+        <div class="provider-line" id="provider-line"></div>
+        <div class="field">
+          <span class="field-label">${esc(t('方式', 'Mode'))}</span>
+          <div class="mode-tabs" id="modes">
+            ${MODES.map(item => `<button type="button" class="mode-tab" data-mode="${item.id}">
+              <b>${esc(t(item.label[0], item.label[1]))}</b>
+              <small>${esc(t(item.hint[0], item.hint[1]))}</small>
+            </button>`).join('')}
+          </div>
+        </div>
+        <label class="field field-prompt">
+          <span class="field-label">${esc(t('画面描述', 'Shot description'))}<em id="prompt-count">0</em></span>
+          <textarea id="prompt" rows="5" maxlength="2000" placeholder="${esc(t('镜头怎么运动、人物在做什么、光线和氛围…', 'How the camera moves, what happens, light and mood…'))}"></textarea>
+        </label>
+        <div class="field" id="ref-field">
+          <span class="field-label">${esc(t('首帧 / 参考图', 'First frame'))}</span>
+          <div class="drop drop-compact" id="drop" tabindex="0" role="button">
+            <input type="file" id="ref-input" accept="image/png,image/jpeg,image/webp" hidden>
+            <div class="drop-empty">${icon('upload', 16)}<span>${esc(t('选一张图（可选）', 'Choose an image (optional)'))}</span></div>
+            <div class="drop-preview" id="drop-preview" hidden><img id="ref-img" alt=""><button type="button" class="mini-x" id="ref-clear">${icon('x', 12)}</button></div>
+          </div>
+        </div>
+        <div class="field-row">
+          <div class="field">
+            <span class="field-label">${esc(t('画幅', 'Aspect'))}</span>
+            <select class="select" id="ratio">
+              ${RATIOS.map(item => `<option value="${item.id}" ${item.id === ratio ? 'selected' : ''}>${item.id}</option>`).join('')}
+            </select>
+          </div>
+          <div class="field">
+            <span class="field-label">${esc(t('时长', 'Duration'))}</span>
+            <div class="chips chips-tight" id="duration">
+              ${[5, 8, 10, 15].map(value => `<button type="button" class="chip" data-duration="${value}">${value}s</button>`).join('')}
+            </div>
+          </div>
+        </div>
+        <button class="btn btn-generate" id="generate">
+          <span class="gen-ic">${icon('film', 17)}</span>
+          <span class="gen-label">${esc(t('生成视频', 'Generate video'))}</span>
+          <kbd>${modKey()} ↵</kbd>
+        </button>
+        <p class="fine" id="mode-fine"></p>
+      </aside>
+
+      <section class="gallery-pane">
+        <header class="pane-head">
+          <div class="pane-title"><h2>${esc(t('视频历史', 'Video library'))}</h2><span class="count-pill" id="gallery-count">0</span></div>
+          <div class="gallery-tools">
+            <span class="quiet-note">${icon('clock', 14)}${esc(t('视频任务较慢，可以离开这一页', 'Video jobs keep running if you leave'))}</span>
+          </div>
+        </header>
+        <div id="gallery" class="video-list"></div>
+      </section>
+    </section>
+  `
+
+  const promptEl = $('#prompt')
+  promptEl.addEventListener('input', () => {
+    $('#prompt-count').textContent = String(promptEl.value.length)
+    autoGrow(promptEl, 240)
+  })
+  autoGrow(promptEl, 240)
+
+  $('#modes').addEventListener('click', event => {
+    const btn = event.target.closest('[data-mode]')
+    if (!btn) return
+    mode = btn.dataset.mode
+    paintModes()
+  })
+  $('#duration').addEventListener('click', event => {
+    const btn = event.target.closest('[data-duration]')
+    if (!btn) return
+    duration = Number(btn.dataset.duration)
+    paintModes()
+  })
+  $('#ratio').addEventListener('change', () => { ratio = $('#ratio').value })
+  $('#generate').addEventListener('click', generate)
+  promptEl.addEventListener('keydown', event => {
+    if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') { event.preventDefault(); generate() }
+  })
+  root.addEventListener('click', event => {
+    if (event.target.closest('[data-act="settings"]')) app.navigate('settings')
+  })
+
+  const drop = $('#drop')
+  const refInput = $('#ref-input')
+  drop.addEventListener('click', event => { if (!event.target.closest('#ref-clear')) refInput.click() })
+  drop.addEventListener('keydown', event => { if (event.key === 'Enter') { event.preventDefault(); refInput.click() } })
+  refInput.addEventListener('change', async () => {
+    const file = refInput.files?.[0]
+    if (!file) return
+    try {
+      const result = await upload(file)
+      reference = result
+      $('#ref-img').src = result.url
+      $('#drop-preview').hidden = false
+      drop.querySelector('.drop-empty').hidden = true
+    } catch (err) { app.toast(err.message, 'error') }
+    refInput.value = ''
+  })
+  $('#ref-clear').addEventListener('click', event => {
+    event.stopPropagation()
+    reference = null
+    $('#drop-preview').hidden = true
+    drop.querySelector('.drop-empty').hidden = false
+  })
+
+  function paintModes() {
+    $$('#modes [data-mode]').forEach(btn => btn.classList.toggle('is-on', btn.dataset.mode === mode))
+    $$('#duration [data-duration]').forEach(btn => btn.classList.toggle('is-on', Number(btn.dataset.duration) === duration))
+    $('#ref-field').hidden = mode === 'text'
+    const fine = $('#mode-fine')
+    if (mode === 'storyboard') {
+      fine.textContent = t('分镜短片用生图服务生成 4 张关键帧，在浏览器里按节奏播放，不消耗视频额度。', 'Storyboard uses your image provider for four keyframes and plays them in the browser.')
+    } else if (!app.settings?.videoReady) {
+      fine.textContent = t('还没有配置视频服务。可以先用分镜短片，或去设置里填接口。', 'No video provider yet. Try storyboard, or configure one in settings.')
+    } else {
+      fine.textContent = t('视频生成通常需要 1–10 分钟，关掉这一页也会继续。', 'Video jobs usually take 1–10 minutes and keep running if you leave.')
+    }
+    const label = $('#generate .gen-label')
+    if (label) label.textContent = mode === 'storyboard' ? t('生成分镜短片', 'Generate storyboard') : t('生成视频', 'Generate video')
+  }
+  paintModes()
+
+  function renderProvider() {
+    const line = $('#provider-line')
+    const ready = mode === 'storyboard' ? app.settings?.imageReady : app.settings?.videoReady
+    const model = mode === 'storyboard' ? app.settings?.image?.model : app.settings?.video?.model
+    if (ready) {
+      line.className = 'provider-line is-ready'
+      line.innerHTML = `<i class="dot"></i><span>${esc(model || t('已连接', 'Ready'))}</span><em>${esc(mode === 'storyboard' ? t('分镜模式 · 使用生图', 'Storyboard · image provider') : '')}</em>`
+    } else {
+      line.className = 'provider-line is-off'
+      line.innerHTML = `<span>${esc(mode === 'storyboard' ? t('生图服务还没配置', 'Image provider is not configured') : t('视频服务还没配置', 'Video provider is not configured'))}</span><button type="button" class="link-btn" data-act="settings">${esc(t('去设置', 'Set up'))} ${icon('arrowRight', 13)}</button>`
+    }
+  }
+
+  function videoCard(row) {
+    if (row.status === 'queued' || row.status === 'running') {
+      return `<article class="vid-card is-busy" data-id="${row.id}">
+        <div class="vid-media shimmer"><span class="busy-label"><i></i>${esc(t('正在生成…', 'Rendering…'))}</span></div>
+        <div class="vid-body">
+          <div class="vid-head"><span class="status-dot is-running"></span><b>${esc(row.mode === 'storyboard' ? t('分镜短片', 'Storyboard') : t('视频', 'Video'))}</b><time>${esc(fmtTime(row.createdAt))}</time></div>
+          <p class="vid-prompt">${esc(row.prompt)}</p>
+          <div class="progress"><span style="width:${Math.max(4, row.progress || 4)}%"></span></div>
+          <div class="vid-actions">
+            <span class="fine">${esc(t('进度', 'Progress'))} ${row.progress || 0}%</span>
+            <button class="btn btn-small btn-ghost" data-act="cancel" data-id="${row.id}">${icon('stop', 13)}${esc(t('停止', 'Stop'))}</button>
+          </div>
+        </div>
+      </article>`
+    }
+    if (row.status === 'error') {
+      return `<article class="vid-card is-error" data-id="${row.id}">
+        <div class="vid-media error-media"><span>${icon('alert', 20)}</span></div>
+        <div class="vid-body">
+          <div class="vid-head"><span class="status-dot is-error"></span><b>${esc(t('生成失败', 'Failed'))}</b><time>${esc(fmtTime(row.createdAt))}</time></div>
+          <p class="vid-error">${esc(row.error || t('未知错误', 'Unknown error'))}</p>
+          <p class="vid-prompt">${esc(row.prompt)}</p>
+          <div class="vid-actions">
+            <button class="btn btn-small btn-ghost" data-act="retry" data-id="${row.id}">${icon('refresh', 13)}${esc(t('重试', 'Retry'))}</button>
+            <button class="btn btn-small btn-ghost danger-quiet" data-act="delete" data-id="${row.id}">${icon('trash', 13)}${esc(t('删除', 'Delete'))}</button>
+          </div>
+        </div>
+      </article>`
+    }
+    const frames = row.frames ?? []
+    const media = row.mode === 'storyboard' && frames.length
+      ? `<div class="vid-media storyboard-media">${frames.slice(0, 4).map((file, index) => `<img src="${fileUrl(file)}" alt="" style="--i:${index}">`).join('')}
+          <button class="play-fab" data-act="play" data-id="${row.id}" aria-label="${esc(t('播放分镜', 'Play storyboard'))}">${icon('play', 18)}</button>
+        </div>`
+      : `<div class="vid-media">${row.file ? `<video src="${fileUrl(row.file)}" controls preload="metadata" playsinline></video>` : `<span class="muted">${esc(t('没有视频文件', 'No file'))}</span>`}</div>`
+    return `<article class="vid-card" data-id="${row.id}">
+      ${media}
+      <div class="vid-body">
+        <div class="vid-head"><span class="status-dot is-done"></span><b>${esc(row.mode === 'storyboard' ? t('分镜短片', 'Storyboard') : t('视频', 'Video'))}</b><span class="tag">${esc(row.aspect)}</span><span class="tag">${row.duration}s</span><time>${esc(fmtTime(row.createdAt))}</time></div>
+        <p class="vid-prompt">${esc(row.prompt)}</p>
+        <div class="vid-actions">
+          ${row.file ? `<button class="btn btn-small btn-ghost" data-act="download" data-id="${row.id}">${icon('download', 13)}${esc(t('下载', 'Download'))}</button>` : ''}
+          ${row.mode === 'storyboard' ? `<button class="btn btn-small btn-ghost" data-act="download-frames" data-id="${row.id}">${icon('grid', 13)}${esc(t('下载全部分镜', 'Download frames'))}</button>` : ''}
+          <button class="btn btn-small btn-ghost" data-act="retry" data-id="${row.id}">${icon('refresh', 13)}${esc(t('再生成', 'Regenerate'))}</button>
+          <button class="btn btn-small btn-ghost danger-quiet" data-act="delete" data-id="${row.id}">${icon('trash', 13)}</button>
+        </div>
+      </div>
+    </article>`
+  }
+
+  function renderGallery() {
+    const list = app.state?.videos ?? []
+    const gallery = $('#gallery')
+    $('#gallery-count').textContent = String(list.length)
+    if (!list.length) {
+      gallery.innerHTML = `<div class="empty-gallery">
+        <div class="empty-art">${icon('film', 30)}</div>
+        <h3>${esc(t('给画面一点时间', 'Give the frame some time'))}</h3>
+        <p>${esc(t('写一个镜头，或者先用分镜短片试一次——不消耗视频额度也能看到运动。', 'Describe a shot, or start with a storyboard — motion without spending video credits.'))}</p>
+        <div class="inspirations">
+          <button class="inspo" data-inspo="0"><span class="inspo-index">01</span><b>${esc(t('清晨公路', 'Morning road'))}</b><small>${esc(t('清晨的海边公路，一辆旧巴士驶过，车窗里有人望向海面。', 'A coastal road at dawn, an old bus passing, someone watching the sea.'))}</small></button>
+          <button class="inspo" data-inspo="1"><span class="inspo-index">02</span><b>${esc(t('雨夜霓虹', 'Neon rain'))}</b><small>${esc(t('雨夜的巷口，霓虹在水面碎成一片，镜头慢慢向前推。', 'A rainy alley, neon broken on the water, camera pushes in slowly.'))}</small></button>
+          <button class="inspo" data-inspo="2"><span class="inspo-index">03</span><b>${esc(t('桌面微距', 'Desk macro'))}</b><small>${esc(t('一杯正在冷却的咖啡，热气在晨光里慢慢散开，微距镜头。', 'A cooling cup of coffee, steam drifting in morning light, macro lens.'))}</small></button>
+        </div>
+      </div>`
+      return
+    }
+    gallery.innerHTML = list.map(videoCard).join('')
+  }
+
+  $('#gallery').addEventListener('click', async event => {
+    const inspo = event.target.closest('[data-inspo]')
+    if (inspo) {
+      const prompts = [
+        '清晨的海边公路，一辆旧巴士驶过，车窗里有人望向海面。镜头缓慢跟随。',
+        '雨夜的巷口，霓虹在水面碎成一片，镜头慢慢向前推，雨丝清晰可见。',
+        '一杯正在冷却的咖啡，热气在晨光里慢慢散开，微距镜头，浅景深。',
+      ]
+      promptEl.value = prompts[Number(inspo.dataset.inspo)] ?? ''
+      promptEl.dispatchEvent(new Event('input'))
+      promptEl.focus()
+      return
+    }
+    const btn = event.target.closest('[data-act]')
+    if (!btn) return
+    const id = btn.dataset.id
+    const row = (app.state?.videos ?? []).find(item => item.id === id)
+    if (!row) return
+    const act = btn.dataset.act
+    if (act === 'cancel') {
+      try { await api('video/cancel', { id }); app.toast(t('已停止', 'Stopped'), 'success'); await app.refresh() } catch (err) { app.toast(err.message, 'error') }
+      return
+    }
+    if (act === 'delete') {
+      const ok = await app.confirm({ title: t('删除这条视频？', 'Delete this video?'), message: t('记录会被删除。', 'The record will be removed.'), confirmText: t('删除', 'Delete'), danger: true })
+      if (!ok) return
+      try { await api('video/action', { id, action: 'delete' }); await app.refresh(); app.toast(t('已删除', 'Deleted'), 'success') } catch (err) { app.toast(err.message, 'error') }
+      return
+    }
+    if (act === 'retry') {
+      try { await api('video/action', { id, action: 'retry' }); await app.refresh() } catch (err) { app.toast(err.message, 'error') }
+      return
+    }
+    if (act === 'download') {
+      downloadUrl(fileUrl(row.file), `modern-media-${row.id}.mp4`)
+      return
+    }
+    if (act === 'download-frames') {
+      for (const [index, file] of (row.frames ?? []).entries()) downloadUrl(fileUrl(file), `modern-media-${row.id}-${index + 1}.png`)
+      return
+    }
+    if (act === 'play') playStoryboard(row)
+  })
+
+  function playStoryboard(row) {
+    const frames = row.frames ?? []
+    if (!frames.length) return
+    const card = document.createElement('div')
+    card.className = 'story-player'
+    card.innerHTML = `
+      <button class="lb-close" data-sp="close" aria-label="关闭">${icon('x', 18)}</button>
+      <div class="story-stage">
+        ${frames.map((file, index) => `<img src="${fileUrl(file)}" alt="" class="${index === 0 ? 'is-on' : ''}" data-frame="${index}">`).join('')}
+        <div class="story-caption"><span class="eyebrow">${esc(t('分镜短片', 'STORYBOARD'))}</span><p>${esc(row.prompt)}</p></div>
+      </div>
+      <div class="story-controls">
+        <button class="icon-btn" data-sp="toggle">${icon('pause', 16)}</button>
+        <div class="story-dots">${frames.map((_, index) => `<i data-dot="${index}" class="${index === 0 ? 'is-on' : ''}"></i>`).join('')}</div>
+        <span class="fine">${frames.length} ${esc(t('个镜头', 'frames'))}</span>
+      </div>`
+    let index = 0
+    let playing = true
+    let timer = null
+    const imgs = [...card.querySelectorAll('[data-frame]')]
+    const dots = [...card.querySelectorAll('[data-dot]')]
+    const tick = () => {
+      index = (index + 1) % frames.length
+      imgs.forEach((img, i) => img.classList.toggle('is-on', i === index))
+      dots.forEach((dot, i) => dot.classList.toggle('is-on', i === index))
+    }
+    const start = () => { stop(); timer = setInterval(tick, 2400) }
+    const stop = () => { if (timer) clearInterval(timer); timer = null }
+    card.querySelector('[data-sp="toggle"]').addEventListener('click', event => {
+      playing = !playing
+      event.currentTarget.innerHTML = icon(playing ? 'pause' : 'play', 16)
+      playing ? start() : stop()
+    })
+    let close = () => {}
+    card.querySelector('[data-sp="close"]').addEventListener('click', () => close())
+    close = app.showLayer(card, { className: 'layer-story', onClose: stop })
+    start()
+  }
+
+  async function generate() {
+    if (busy) return
+    const prompt = promptEl.value.trim()
+    if (!prompt) { promptEl.focus(); return app.toast(t('先写一个镜头', 'Describe the shot first'), 'error') }
+    const ready = mode === 'storyboard' ? app.settings?.imageReady : app.settings?.videoReady
+    if (!ready) {
+      app.toast(mode === 'storyboard' ? t('分镜需要生图服务', 'Storyboard needs an image provider') : t('先配置视频服务，或改用分镜', 'Configure video, or switch to storyboard'), 'error')
+      return app.navigate('settings')
+    }
+    busy = true
+    const btn = $('#generate')
+    btn.classList.add('is-busy')
+    btn.querySelector('.gen-label').textContent = t('正在提交…', 'Sending…')
+    try {
+      await api('video/generate', {
+        prompt,
+        mode,
+        ratio,
+        duration,
+        reference: reference?.name ?? '',
+      })
+      api('preferences', { videoMode: mode, videoRatio: ratio, videoDuration: duration }).catch(() => {})
+      app.toast(mode === 'storyboard' ? t('分镜任务已开始', 'Storyboard started') : t('视频任务已开始', 'Video started'), 'success')
+      await app.refresh()
+    } catch (err) {
+      app.toast(err.message, 'error')
+    } finally {
+      busy = false
+      btn.classList.remove('is-busy')
+      paintModes()
+    }
+  }
+
+  function update() {
+    renderProvider()
+    paintModes()
+    renderGallery()
+  }
+
+  update()
+
+  return { update }
+}