dsh-drawai 0.4.0 → 0.4.1

package/README.md

@@ -18,7 +18,7 @@
 4. **SVG 图形节点** —— 图标 / logo 可直接当节点内容，拼流程图与示意图。
 5. **位图矢量化（`traceImage`）** —— 照着工作区图片逐像素描成 SVG 节点，不是凭印象手写近似图。
 6. **原生文档与 drawio 兼容** —— `.drawai` 保存多页、节点扩展和叠放顺序；旧画布迁移保留完整 XML 与原媒体，支持另存为 `.drawio`。
-7. **视频复刻** —— 选中已导入视频，点击悬浮工具条「绘制复刻」自主设置画质、帧率、完整视频或起止范围，自动抽帧并绘制成 SVG 视频；显示预计帧数、实际进度与帧预览，支持取消，原视频保留。支持 SVG 帧序列包，以及保留原帧率、白底和片段音频的 MP4 / WebM 离线导出；也可导出白底、循环播放的无声 GIF。渲染、编码和保存由宿主后台执行，切换标签或刷新网页后仍继续，完成文件自动保存到画布旁（编码需 FFmpeg）。详见[视频节点说明](docs/video-nodes.md)。
+7. **视频复刻** —— 选中已导入视频，点击悬浮工具条「绘制复刻」自主设置画质、帧率、完整视频或起止范围，自动抽帧并绘制成 SVG 视频；显示预计帧数、实际进度与帧预览，支持取消，原视频保留。支持 SVG 帧序列包，以及保留原帧率、白底和片段音频的 MP4 / WebM 离线导出；也可导出白底、循环播放的无声 GIF。渲染、编码和保存由宿主后台执行，切换标签或刷新网页后仍继续，完成文件自动保存到画布旁（编码需要 FFmpeg，首次使用会自动准备）。详见[视频节点说明](docs/video-nodes.md)。
 8. **文生图** —— 0.4.0 暂未开放，已有图片节点仍可显示和编辑。
 
 9. **节点绘制视频** —— 选中视频节点，先用 `shotcraft_search` 挑几张镜头卡连到它（连线顺序=镜头顺序，卡片时长=段长；**卡必须连**，断连的卡会被 `motion_project create` 直接拒绝），再说一句要做什么：`motion_project` 按卡片排好时间轴，并把**分镜表**（每镜做什么/屏幕上出现什么/配什么字）写进工程；先只写 `scene-0`、`motion_preview` 看一张**定调帧**把风格定住，再铺开写其余场景。AI 在对话里直接读写 `scene-*.tsx`，`motion_render` 在后台渲染，完成后 `motion_render apply` 把成片落成画布上能播的 clip pack。**只有对话里这一个 agent**：没有第二套后台 agent、不需要轮询、不用等任务面板。详见[动效视频说明](docs/motion-video.md)。
@@ -47,6 +47,10 @@ dsh plugin --profile web add github:fourzkw/dsh-drawai
 
 然后**重启 `dsh web`** —— 宿主侧只在启动时加载，这一步不能省。
 
+从 **0.4.1** 起，视频依赖使用独立运行环境：安装插件不会安装 Remotion / esbuild，也不需要授权 esbuild 的构建脚本。首次渲染、网页素材采集或风格参考帧截取时自动初始化，按锁文件下载依赖，禁用安装脚本并验证二进制可用后启用；后续复用本地缓存。第一次可能需要数分钟，下载失败后重试原操作即可。
+
+运行环境默认位于 `~/.dsh/drawai-video-runtime/`，按依赖版本、系统、架构与 Node 主版本隔离。可用 `DRAWAI_VIDEO_RUNTIME_DIR` 指定独立缓存目录，`DRAWAI_RUNTIME_REGISTRY` 指定 npm 镜像。它与字体和素材包缓存分开管理。初始化进度会出现在渲染任务状态中，网页采集等操作的初始化信息记录在宿主日志中。
+
 > **更新到最新版**：`dsh plugin --profile web update dsh-drawai@latest`
 
 重启之后，你会看到：
@@ -274,7 +278,8 @@ id / layer / parent、选区能上报给模型、写回是逐单元的、画布
 - **界面语言**：目前只有简体中文，还没有 i18n。
 - **大图性能**：几百个单元时的重渲染与路由开销还没测过。
 - **数据与网络**：画布文件和视频工程保存在工作区；音效搜索会访问 Freesound，网页素材收集会访问指定网站及品牌素材服务，Edge TTS 旁白和首次获取 Chromium 也可能联网。API key 存在浏览器 localStorage，宿主进程不保存；没有安装期脚本。
-- **视频素材**：动效用的 46 个字体与 102 个乐器采样 / 9 张纹理**不在 npm 包里**（约 200MB），第一次用到动效功能时会从 GitHub Release 下载一次（约 145MB），逐文件校验后缓存在 `~/.dsh/drawai-assets/v1/`，之后离线可用。下载失败或素材缺失时工具会返回可照做的中文指引；画布与图片功能不受影响。缓存位置与镜像地址可用 `DRAWAI_ASSETS_DIR` / `DRAWAI_ASSETS_URL` 覆盖；素材来源与许可集中记录在 [统一说明](LICENSE)。通过 `motion_assets library` 检索，再用 `motion_assets use` 导入当前工程，不依赖其他工程或固定磁盘路径；文件与上游哈希不一致时会提示并使用本地文件。导入图片和音频时需要可用的 FFmpeg。
+- **视频素材**：动效用的 46 个字体与 102 个乐器采样 / 9 张纹理**不在 npm 包里**（约 200MB），第一次用到动效功能时会从 GitHub Release 下载一次（约 145MB），逐文件校验后缓存在 `~/.dsh/drawai-assets/v1/`，之后离线可用。下载失败或素材缺失时工具会返回可照做的中文指引；画布与图片功能不受影响。缓存位置与镜像地址可用 `DRAWAI_ASSETS_DIR` / `DRAWAI_ASSETS_URL` 覆盖；素材来源与许可集中记录在 [统一说明](LICENSE)。通过 `motion_assets library` 检索，再用 `motion_assets use` 导入当前工程，不依赖其他工程或固定磁盘路径；文件与上游哈希不一致时会提示并使用本地文件。
+- **FFmpeg**：音频导入、素材探测、视频导出与混音需要 FFmpeg，第一次真正用到时才准备。查找顺序是 `DRAWAI_FFMPEG_PATH`（显式指定；路径无效或缺少所需能力会直接说明并列出缺失项，不会静默改用别的）→ 系统 `PATH`（逐个候选检查全部能力）→ 开发目录 `_local/bin` → 已验证缓存 → 自动下载。下载会校验大小与 SHA-256，解压后试运行 `-version`、实际跑一次短编码（用项目真实用到的 `-fps_mode` 等选项），并检查项目所需的编码器、解码器、滤镜和封装器，通过后才放进缓存 `~/.dsh/drawai-ffmpeg/<平台>-<架构>/`，之后离线可用；复用缓存时也会核对版本、二进制哈希和功能。要求 FFmpeg 5.1 或更新版本（更老的构建缺少 `-fps_mode`，会在真实任务里失败）。失败、取消或全部调用者取消都会清掉临时文件，下次可重试；下载与取消按调用者独立，不会因为一个任务取消而中断另一个。缓存目录可用 `DRAWAI_FFMPEG_DIR` 覆盖，清理只删本平台的子目录；下载可用 `DRAWAI_FFMPEG_MIRROR` 指向镜像，镜像只改下载地址，大小与哈希仍按注册表校验。没有自动构建的平台会提示把 FFmpeg 加入 PATH 或设置 `DRAWAI_FFMPEG_PATH`。来源为 gyan.dev（Windows x64）、BtbN FFmpeg-Builds（Windows ARM64、Linux x64/ARM64）和 osxexperts.net（macOS Intel/Apple Silicon），均为 GPL 构建，来源与许可见[统一说明](LICENSE)。
 
 ## 已知限制 / Limitations
 

package/lib/audio-media.js

@@ -5,13 +5,16 @@ import { randomUUID, createHash } from 'node:crypto'
 import { mkdirSync, readFileSync, writeFileSync, copyFileSync, statSync, realpathSync, existsSync, renameSync, unlinkSync } from 'node:fs'
 import { join, dirname, basename, relative, isAbsolute } from 'node:path'
 import { searchSfx, getSfx } from './motion/sfx.js'
-import { ffmpegBinary } from './video-export.js'
+import { ensureFfmpeg } from './ffmpeg-manager.js'
 import { clipDirFor, ensureClipPack, mediaRootFor } from './media.js'
 import { audioNodeData, audioNodeSettings, validateAudioTimeline } from './motion-core.js'
 const exec = promisify(execFile)
 const MAX_BYTES = 32 * 1024 * 1024
 const sha = bytes => createHash('sha256').update(bytes).digest('hex')
-const run = (args,signal,timeout=120000) => exec(ffmpegBinary(),args,{windowsHide:true,timeout,maxBuffer:2*1024*1024,signal})
+const run = async (args,signal,timeout=120000) => {
+  const binary = await ensureFfmpeg({ signal })
+  return exec(binary,args,{windowsHide:true,timeout,maxBuffer:2*1024*1024,signal})
+}
 
 export function audioScopeDirectory(drawioAbs,directory,create=false) {
   const root=realpathSync(dirname(drawioAbs))

package/lib/client.js

@@ -4770,7 +4770,7 @@ window.__ModuleLoader__.load({
       const ended = (job) => ['succeeded', 'done', 'cancelled', 'failed', 'error', 'retained', ...(job.motion ? ['interrupted'] : [])].includes(job.status)
       const live = jobs.filter((job) => !ended(job)).length, needs = jobs.filter(attention).length
       const visible = jobs.filter((job) => filter === 'all' || (filter === 'active' ? !ended(job) || attention(job) : filter === 'attention' ? attention(job) : ended(job) && !attention(job)))
-      const labels = { queued: '等待中', running: '绘制中', paused: '已暂停', cancelling: '正在取消', interrupted: '等待恢复', failed: '绘制失败', cancelled: '已取消', succeeded: '已完成', rendering: '渲染中', encoding: '编码中', done: '已保存文件', error: '导出失败' }
+      const labels = { preparing: '准备 FFmpeg', queued: '等待中', running: '绘制中', paused: '已暂停', cancelling: '正在取消', interrupted: '等待恢复', failed: '绘制失败', cancelled: '已取消', succeeded: '已完成', rendering: '渲染中', encoding: '编码中', done: '已保存文件', error: '导出失败' }
       const phases = { preparing: '检查素材', probing: '探测视频', decoding: '解码抽帧', tracing: '绘制色块' }
       const invoke = async (job, action, value) => {
         setBusy(job.id || 'queue'); setError('')
@@ -4816,7 +4816,7 @@ window.__ModuleLoader__.load({
                 ended(job) ? button('移除记录', () => invoke(job, 'remove')) : null,
                 job.error ? button('复制错误', () => writeClipboardText(job.error).catch(() => {})) : null))
           }
-          const running = ['running', 'rendering', 'encoding'].includes(job.status)
+          const running = job.export ? ['preparing', 'queued', 'rendering', 'encoding'].includes(job.status) : job.status === 'running'
           const done = job.export ? job.status === 'rendering' ? job.received : job.encoded : job.done
           const total = job.export ? job.count : job.total
           const percent = total ? Math.min(100, Math.round((done || 0) / total * 100)) : 0
@@ -4826,6 +4826,7 @@ window.__ModuleLoader__.load({
           return React.createElement('article', { key: job.id, className: 'drawai-video-task-detail', style: { borderTop: '1px solid #8883', paddingTop: 10, marginTop: 8, userSelect: 'text' } },
             React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', gap: 8 } },
               React.createElement('strong', { style: { overflowWrap: 'anywhere' } }, job.label), React.createElement('small', { role: 'status' }, state)),
+            job.message ? React.createElement('small', { role: 'status', style: { display: 'block', overflowWrap: 'anywhere' } }, job.message) : null,
             !job.export ? React.createElement('small', null, ({ image: '图片绘制', video: '视频绘制', extract: '视频抽帧' }[job.kind]) + ' · ' + String(job.scope.path).split(/[\\/]/).pop() + ' · ' + (job.scope.pageName || '第 ' + (job.scope.page + 1) + ' 页') + (job.kind !== 'extract' ? ' · ' + job.options.colors + ' 色' : '')) : null,
             running ? React.createElement('div', null,
               React.createElement('progress', { value: percent, max: 100, style: { width: '100%' }, 'aria-label': job.label + '进度' }),
@@ -10309,7 +10310,8 @@ window.__ModuleLoader__.load({
         button(collapsed ? '展开' : '收起', () => setCollapsed(!collapsed))),
       collapsed ? null : props.jobs.map((job) => React.createElement('div', { key: job.token, className: 'drawai-video-task-detail' },
         React.createElement('strong', null, job.clip + ' · ' + job.format.toUpperCase() + ' · ' +
-          ({ rendering: '正在渲染', encoding: '正在编码', done: '已保存', error: '导出失败' }[job.status] || job.status)),
+          ({ preparing: '正在准备 FFmpeg', queued: '等待开始', rendering: '正在渲染', encoding: '正在编码', done: '已保存', error: '导出失败' }[job.status] || job.status)),
+        job.message ? React.createElement('small', { role: 'status' }, job.message) : null,
         ['rendering', 'encoding'].includes(job.status) ? React.createElement('small', null,
           (job.status === 'rendering' ? job.received : job.encoded) + (job.count ? '/' + job.count : '') + ' 帧；切换页面后仍会继续') : null,
         job.path ? React.createElement('small', { style: { overflowWrap: 'anywhere', userSelect: 'text' } }, '已保存：' + job.path) : null,
@@ -16882,8 +16884,16 @@ window.__ModuleLoader__.load({
       async function uploadAudioFile(file,id,x,y) {
         if(!hasPath||!docRef.current){setSaveNote('请先保存画布');return}
         const control=new AbortController();if(!videoImportsRef.current)videoImportsRef.current=new Set();videoImportsRef.current.add(control)
-        let token
+        let token, poll=null
         const api=(action,args)=>mediaAction(action,args,{throwOnError:true,signal:control.signal})
+        const noteFfmpeg=(state)=>{
+          const p=state&&state.progress, mb=(n)=>n>=1048576?(n/1048576).toFixed(n>=10485760?0:1)+' MB':Math.max(1,Math.round((Number(n)||0)/1024))+' KB'
+          if(state&&state.status==='ready')return
+          if(!p){setSaveNote('正在准备 FFmpeg…');return}
+          if(p.phase==='download'){setSaveNote(p.total?'正在下载 FFmpeg '+Math.round((p.received||0)/p.total*100)+'%（'+mb(p.received)+' / '+mb(p.total)+'）':'正在下载 FFmpeg（'+mb(p.received)+'）');return}
+          if(p.phase==='waiting'){setSaveNote('另一个任务正在准备 FFmpeg，等待中…');return}
+          setSaveNote(({resolve:'正在查找 FFmpeg…',verify:'正在校验下载的 FFmpeg…',extract:'正在解压 FFmpeg…',check:'正在检查 FFmpeg 功能…',ready:'FFmpeg 已就绪'}[p.phase])||p.message||'正在准备 FFmpeg…')
+        }
         try {
           if(id){motionCore.assertMotionEditable(docRef.current,id);if(!motionCore.isAudioNode(nodeById(id)))throw new Error('请选择音频节点')}
           else if(activeLayerLocked())throw new Error('当前图层已锁定')
@@ -16893,11 +16903,13 @@ window.__ModuleLoader__.load({
             const base64=await readVideoChunk(file.slice(offset,offset+1024*1024),control.signal)
             await api('audio-upload-chunk',{token,offset,base64});setSaveNote('音频上传 '+Math.round(Math.min(offset+1024*1024,file.size)/file.size*100)+'%')
           }
+          setSaveNote('正在准备 FFmpeg（首次使用会自动下载）…')
+          poll=setInterval(()=>{api('media-ffmpeg-status',{}).then(noteFfmpeg).catch(()=>{})},600)
           const result=await api('audio-upload-finish',{token})
           if(control.signal.aborted)throw new Error('音频导入已取消')
           applyAudioResult(id,result,x,y)
         }catch(e){setSaveNote(e.message||String(e))}
-        finally{if(token)mediaAction('audio-upload-release',{token}).catch(()=>{});videoImportsRef.current.delete(control)}
+        finally{clearInterval(poll);if(token)mediaAction('audio-upload-release',{token}).catch(()=>{});videoImportsRef.current.delete(control)}
       }
 
       function insertMediaFiles(files, userX, userY) {

package/lib/drawing-runner.js

@@ -3,7 +3,7 @@ import { spawn } from 'node:child_process'
 import { readFileSync, writeFileSync, copyFileSync, existsSync, mkdirSync, renameSync, mkdtempSync, rmSync, realpathSync } from 'node:fs'
 import { join, relative, isAbsolute } from 'node:path'
 import { createHash } from 'node:crypto'
-import { ffmpegBinary } from './video-export.js'
+import { ensureFfmpeg } from './ffmpeg-manager.js'
 import { ensureClipPack, writeManifest, clipDirFor, mediaRootFor, frameFileName, STILLS_DIR, stillFileName } from './media.js'
 
 function checkMediaDirectory(job, path) {
@@ -11,9 +11,10 @@ function checkMediaDirectory(job, path) {
   if (isAbsolute(rel) || rel.startsWith('..')) throw new Error('媒体目录超出工作区')
 }
 
-export async function runMediaCommand(args, signal, onProgress, binary = ffmpegBinary()) {
+export async function runMediaCommand(args, signal, onProgress, binary) {
+  const executable = binary || await ensureFfmpeg({ signal })
   return new Promise((resolve, reject) => {
-    const child = spawn(binary, ['-hide_banner', '-nostdin', '-nostats', ...args], { windowsHide: true, stdio: ['ignore', 'pipe', 'pipe'] })
+    const child = spawn(executable, ['-hide_banner', '-nostdin', '-nostats', ...args], { windowsHide: true, stdio: ['ignore', 'pipe', 'pipe'] })
     let stdout = '', stderr = ''
     const abort = () => child.kill()
     signal?.addEventListener('abort', abort, { once: true }); if (signal?.aborted) abort()
@@ -74,7 +75,8 @@ export function planDrawingVideo(options, info, extract = false) {
 async function* rawVideoFrames(job, signal, binary, perf) {
   const decodeDone = perf?.start('decodePipelineWall')
   const { plan } = job, offset = job.done || 0
-  const child = spawn(binary || ffmpegBinary(), ['-hide_banner', '-nostdin', '-loglevel', 'error',
+  const executable = binary || await ensureFfmpeg({ signal })
+  const child = spawn(executable, ['-hide_banner', '-nostdin', '-loglevel', 'error',
     '-ss', String(plan.from), ...inputArgs(job.input), '-map', '0:v:0', '-an', '-sn',
     '-filter_threads', '1', '-vf', 'tpad=stop_mode=clone:stop_duration=' + (1 / plan.fps) + ',fps=fps=' + plan.fps + ':start_time=0:round=near,scale=' + plan.w + ':' + plan.h + ':flags=bicubic,setsar=1,format=rgba,trim=start_frame=' + offset + ',setpts=PTS-STARTPTS',
     '-frames:v', String(plan.count - offset), '-fps_mode', 'passthrough', '-threads', '1', '-pix_fmt', 'rgba', '-f', 'rawvideo', 'pipe:1'],