人工智能AI 应用AI AgentRAGAI 写作后端桌面应用【免费下载链接】Toonflow-appToonflow 是一款 AI 短剧漫剧工具能够利用 AI 技术将小说自动转化为剧本并结合 AI 生成的图片和视频实现高效的短剧创作。借助 Toonflow可以轻松完成从文字到影像的全流程让短剧制作变得更加智能与便捷。项目地址https://gitcode.com/HBAI-Ltd/Toonflow-app点击查看免费下载导读视频节点toonflow/node-video是 Toonflow 工作流画布中负责承载视频素材的基础节点它负责将本地视频文件导入工作区在节点内提供完整的播放、暂停、拖动进度与音量调节能力并以标准化的VIDEO数据类型向外输出供下游支持视频输入的节点消费。本指南将完整梳理该节点的输入输出约定、操作步骤并结合packages/nodes/videoNode/与packages/nodeScaffold/的源码剖析其内部实现帮助你理解素材存储、视频帧截取、节点函数注册等底层机制从而更熟练地在 Toonflow 中搭建视频工作流。一、节点定位与输入输出约定视频节点在画布中表现为一个可拖动的视频卡片其职责高度聚焦导入、播放视频素材并将视频或截取的画面用于后续制作。它的数据流设计非常清晰见 readme.md输入导入本地视频文件。单个文件不能为空且不超过 100 MB。输出输出当前视频素材数据类型为VIDEO可连接支持视频输入的节点。截帧从视频中截取的画面会作为新的图片节点出现在画布中。在代码层面该节点的输出句柄定义在 index.vue 的defineOptions中defineOptions({ inheritAttrs: false, icon: IconVideo, handles: [{ id: video, type: source, dataType: VIDEO, label: 视频输出 }] satisfies NodeHandle[], });也就是说节点只有一个输出口source类型ID 为video类型标记为VIDEO下游节点只有声明支持该类型时才能建立连接。关于VIDEO类型的具体校验规则见 values.ts视频输出值必须是{ url: string; mimeType: string }结构且mimeType必须以video/开头例如video/mp4、video/webm空url或不合法的 MIME 类型都会被判定为无效输出。二、基础操作从上传到替换按照 readme.md 中的「使用方法」视频节点的完整操作流程如下上传视频点击上传按钮选择本地视频文件载入后即可在节点内使用播放器进行播放、暂停、拖动进度或调整音量。连接输出将节点的视频输出连接到需要参考视频的下游节点例如视频生成、导演编排等支持VIDEO输入的节点。截取视频帧点击「截取视频帧」可选择截取当前帧、首帧或尾帧此功能需要已启用图片节点。替换视频需要换视频时将鼠标移到节点上点击「替换视频」按钮即可重新选择文件。几个值得注意的交互细节来自 index.vue节点未载入视频时显示居中的上传按钮载入后显示内嵌播放器并在选中节点时于顶部显示「替换视频」图标按钮index.vue。文件选择框的accept被限定为video/*上传前还会做两道校验index.vuefile.type必须以video/开头且file.size必须大于 0 且不超过100 * 1024 * 1024100 MB否则会通过ElMessage.error提示「视频不能为空且不能超过 100 MB」。节点保存 / 删除有保护逻辑index.vue上传中切换或刷新节点会抛错拦截删除节点时会先清理该节点关联的工作区素材文件。三、播放器能力一个可嵌入画布的轻量播放器视频节点并没有自己实现播放逻辑而是复用了nodeScaffold包中的通用组件videoPlayervideoPlayer.vue该组件以toonflow/nodes-scaffold/videoPlayer的形式被节点引入。它提供的能力包括播放 / 暂停播放按钮根据playing状态在「播放」与「暂停」图标间切换播放失败AbortError除外会提示「视频播放失败」。进度拖动通过el-slider控制进度seek时把currentTime钳制在[0, duration]范围内步长为 0.01 秒。时间显示以分:秒格式显示当前时间与总时长如0:37 / 2:15。音量调节音量按钮点击切换静音hover 弹出垂直滑块可精细调节音量0–100%静音时自动记录并恢复上次音量。全屏预览节点骨架提供了全屏入口videoPlayer通过requestFullscreen进入全屏全屏时显示浏览器原生控件。组件内部还对素材元数据做了适配loadedmetadata事件触发时读取视频时长并向上冒泡节点据此调用resizeVideoindex.vue——按 240px 目标高度等比换算宽度240 * videoWidth / videoHeight最小 180px再调用updateNodeInternals让画布重新计算节点尺寸保证节点在画布中的布局与视频比例匹配。四、截帧机制如何生成新的图片节点「截取视频帧」是视频节点最具特色的能力。整个流程在 videoPlayer.vue 的captureFrame中完成可分为几个阶段前置校验必须存在remote-imageNode类型的节点类型即图片节点插件已启用否则提示「请先启用图片节点插件」。定位帧截取「当前帧」直接使用播放器当前画面截取「首帧 / 尾帧」时组件会新建一个独立的video元素用于解码避免改变播放器当前进度——首帧定位到0秒尾帧定位到duration - 0.001秒结束前一刻并设有 15 秒超时与AbortSignal取消机制videoPlayer.vue。绘制与编码把视频帧绘制到与原始分辨率等大的canvas上通过canvas.toBlob(..., image/png)生成 PNG 截图。写入工作区以frame.png为文件名、crypto.randomUUID()为节点 ID通过files.uploadFile写入当前工作区的素材目录见下文第五节。生成图片节点在画布中调用addNodes添加一个remote-imageNode类型的新节点其输出为{ dataType: IMAGE, value: { url: path, mimeType: image/png } }新节点会自动放置在原视频节点右侧 40px处并沿垂直方向避开其他节点宽度按截帧宽高比换算240 * width / height 18。节点标题形如「视频 · 当前帧 / 首帧 / 尾帧」。失败回滚若中途失败或画布节点发生变化会清理已上传但未提交的临时图片assets/{id}保证工作区不留垃圾文件。从数据结构看截帧输出的是标准IMAGE类型values.ts因此下游所有支持图片输入的节点都能直接复用这张截帧。五、素材存储与节点函数源码视角的底层机制1. 视频文件的存储位置上传的视频并不会被随意存放而是统一写入当前工作区的assets/{nodeId}/目录下文件名保留原扩展名并追加随机 UUIDworkspaceFiles.tsconst directory assets/${nodeId}; const path ${directory}/${crypto.randomUUID()}${extension};删除节点时在未开启「保留节点素材」的画布中会递归移除该节点的assets/{nodeId}目录workspaceFiles.ts。值得注意的是替换视频时并不会删除旧文件——源码注释明确说明这是有意为之复制的节点可能仍引用旧视频删除共享文件会导致引用失效index.vue。预览加载同样基于工作区能力useFileUrl优先通过acquireUrl获取共享 URL否则读取文件内容并用URL.createObjectURL生成临时预览地址切换素材或组件卸载时会自动revokeObjectURL释放workspaceFiles.ts。2. 注册的节点函数node:setVideo视频节点在初始化时通过nodeTools.register注册了一个名为setVideo的节点函数index.vue供 Agent / 工具调用层使用其参数采用 Zod 严格校验nodeTools.register({ name: setVideo, description: 选择工作区内已有的视频文件作为此节点的输出path 使用工作区相对路径, parameters: z.strictObject({ path: z.string().min(1).max(4096), mimeType: z.string().regex(/^video\/[a-zA-Z0-9.-]$/), }), async execute({ path, mimeType }, { signal }) { /* ... */ }, });其语义是从工作区选择一个已存在的视频文件相对路径作为节点输出而不是重新上传。执行时同样校验「非空且不超过 100 MB」随后把outputs.video设置为{ dataType: VIDEO, value: { url: path, mimeType } }并返回该输出。注册机制本身位于 nodeTools.ts函数名必须是小驼峰且不超过 64 字符参数必须是 Zod object schema会被转换为 JSON Schema 暴露给调用方并在组件作用域销毁时自动注销。3. 输出的生命周期管理useNodeuseNode.ts会把节点在node.data.outputs中已持久化的合法输出与当前outputs合并只有句柄存在、且dataType兼容通过isTypeCompatible校验见 connection.ts的输出才会被还原从而保证节点在画布刷新、切换后仍能恢复上次的视频素材。六、与其他节点的配合与限制说明视频节点本身是一个纯「素材节点」真正的生产力体现在它与下游节点的连接中。结合 values.ts 的类型体系VIDEO输出可以流向所有声明支持VIDEO输入的节点截帧生成的IMAGE节点则等同于手工上传的图片素材可继续连接图片生成、参考图等节点。使用中需要注意以下边界文件大小上限为 100 MB此限制同时作用于手动上传与setVideo节点函数两条路径。截帧依赖图片节点插件未启用时截帧入口不可用下拉菜单被禁用并给出提示。视频格式取决于浏览器解码能力acceptvideo/*接受所有视频类型但能否播放与预览由内核决定解码失败时播放器会提示「无法预览该视频」或「视频帧读取超时」。七、小结视频节点是 Toonflow 画布中把「本地视频素材」转化为「可复用画布资产」的关键一环上传后以assets/{nodeId}/工作区路径持久化以标准VIDEO输出对接下游以「截帧」能力把任意时刻的画面当前帧 / 首帧 / 尾帧转成独立的图片节点继续参与制作。通过阅读 packages/nodes/videoNode/src/index.vue、packages/nodeScaffold/src/components/videoPlayer.vue 与 packages/nodeScaffold/src/workspaceFiles.ts 的实现你不仅可以熟练操作该节点也能理解其背后的素材管理与节点函数机制为后续编写或改造自定义节点提供参考。赞分享人工智能AI 应用AI AgentRAGAI 写作后端桌面应用【免费下载链接】Toonflow-appToonflow 是一款 AI 短剧漫剧工具能够利用 AI 技术将小说自动转化为剧本并结合 AI 生成的图片和视频实现高效的短剧创作。借助 Toonflow可以轻松完成从文字到影像的全流程让短剧制作变得更加智能与便捷。项目地址https://gitcode.com/HBAI-Ltd/Toonflow-app点击查看免费下载相关推荐Toonflow 音频节点完全指南画布内音频素材导入、试听与下游参考连接Toonflow 音频节点完全指南画布内音频素材导入、试听与下游参考连接 Toonflow 的音频节点 toonflow/node audio 是画布工人工智能AI 应用AI AgentRAGAI 写作后端桌面应用Toonflow 视频生成节点完全指南从提示词与参考素材到 AI 成片的全流程实战Toonflow 视频生成节点完全指南从提示词与参考素材到 AI 成片的全流程实战 Toonflow 视频生成节点 videoGenerationNode人工智能AI 应用AI AgentRAGAI 写作后端桌面应用时间序列预测框架 Chronos 怎么跑通从 24 小时读数到未来 24 小时预测的完整数据旅程时间序列预测框架 Chronos 怎么跑通从 24 小时读数到未来 24 小时预测的完整数据旅程 Chronos 是 Amazon 开源的时间序列预测框架基人工智能基础模型深度学习上一篇J2ObjC网络编程Java网络库在iOS的兼容性指南下一篇Spotless代码格式化终极指南如何让Java、Kotlin、Python代码一键变整洁创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Toonflow 视频节点（videoNode）实战指南：素材导入、播放预览与截帧输出
人工智能AI 应用AI AgentRAGAI 写作后端桌面应用【免费下载链接】Toonflow-appToonflow 是一款 AI 短剧漫剧工具能够利用 AI 技术将小说自动转化为剧本并结合 AI 生成的图片和视频实现高效的短剧创作。借助 Toonflow可以轻松完成从文字到影像的全流程让短剧制作变得更加智能与便捷。项目地址https://gitcode.com/HBAI-Ltd/Toonflow-app点击查看免费下载导读视频节点toonflow/node-video是 Toonflow 工作流画布中负责承载视频素材的基础节点它负责将本地视频文件导入工作区在节点内提供完整的播放、暂停、拖动进度与音量调节能力并以标准化的VIDEO数据类型向外输出供下游支持视频输入的节点消费。本指南将完整梳理该节点的输入输出约定、操作步骤并结合packages/nodes/videoNode/与packages/nodeScaffold/的源码剖析其内部实现帮助你理解素材存储、视频帧截取、节点函数注册等底层机制从而更熟练地在 Toonflow 中搭建视频工作流。一、节点定位与输入输出约定视频节点在画布中表现为一个可拖动的视频卡片其职责高度聚焦导入、播放视频素材并将视频或截取的画面用于后续制作。它的数据流设计非常清晰见 readme.md输入导入本地视频文件。单个文件不能为空且不超过 100 MB。输出输出当前视频素材数据类型为VIDEO可连接支持视频输入的节点。截帧从视频中截取的画面会作为新的图片节点出现在画布中。在代码层面该节点的输出句柄定义在 index.vue 的defineOptions中defineOptions({ inheritAttrs: false, icon: IconVideo, handles: [{ id: video, type: source, dataType: VIDEO, label: 视频输出 }] satisfies NodeHandle[], });也就是说节点只有一个输出口source类型ID 为video类型标记为VIDEO下游节点只有声明支持该类型时才能建立连接。关于VIDEO类型的具体校验规则见 values.ts视频输出值必须是{ url: string; mimeType: string }结构且mimeType必须以video/开头例如video/mp4、video/webm空url或不合法的 MIME 类型都会被判定为无效输出。二、基础操作从上传到替换按照 readme.md 中的「使用方法」视频节点的完整操作流程如下上传视频点击上传按钮选择本地视频文件载入后即可在节点内使用播放器进行播放、暂停、拖动进度或调整音量。连接输出将节点的视频输出连接到需要参考视频的下游节点例如视频生成、导演编排等支持VIDEO输入的节点。截取视频帧点击「截取视频帧」可选择截取当前帧、首帧或尾帧此功能需要已启用图片节点。替换视频需要换视频时将鼠标移到节点上点击「替换视频」按钮即可重新选择文件。几个值得注意的交互细节来自 index.vue节点未载入视频时显示居中的上传按钮载入后显示内嵌播放器并在选中节点时于顶部显示「替换视频」图标按钮index.vue。文件选择框的accept被限定为video/*上传前还会做两道校验index.vuefile.type必须以video/开头且file.size必须大于 0 且不超过100 * 1024 * 1024100 MB否则会通过ElMessage.error提示「视频不能为空且不能超过 100 MB」。节点保存 / 删除有保护逻辑index.vue上传中切换或刷新节点会抛错拦截删除节点时会先清理该节点关联的工作区素材文件。三、播放器能力一个可嵌入画布的轻量播放器视频节点并没有自己实现播放逻辑而是复用了nodeScaffold包中的通用组件videoPlayervideoPlayer.vue该组件以toonflow/nodes-scaffold/videoPlayer的形式被节点引入。它提供的能力包括播放 / 暂停播放按钮根据playing状态在「播放」与「暂停」图标间切换播放失败AbortError除外会提示「视频播放失败」。进度拖动通过el-slider控制进度seek时把currentTime钳制在[0, duration]范围内步长为 0.01 秒。时间显示以分:秒格式显示当前时间与总时长如0:37 / 2:15。音量调节音量按钮点击切换静音hover 弹出垂直滑块可精细调节音量0–100%静音时自动记录并恢复上次音量。全屏预览节点骨架提供了全屏入口videoPlayer通过requestFullscreen进入全屏全屏时显示浏览器原生控件。组件内部还对素材元数据做了适配loadedmetadata事件触发时读取视频时长并向上冒泡节点据此调用resizeVideoindex.vue——按 240px 目标高度等比换算宽度240 * videoWidth / videoHeight最小 180px再调用updateNodeInternals让画布重新计算节点尺寸保证节点在画布中的布局与视频比例匹配。四、截帧机制如何生成新的图片节点「截取视频帧」是视频节点最具特色的能力。整个流程在 videoPlayer.vue 的captureFrame中完成可分为几个阶段前置校验必须存在remote-imageNode类型的节点类型即图片节点插件已启用否则提示「请先启用图片节点插件」。定位帧截取「当前帧」直接使用播放器当前画面截取「首帧 / 尾帧」时组件会新建一个独立的video元素用于解码避免改变播放器当前进度——首帧定位到0秒尾帧定位到duration - 0.001秒结束前一刻并设有 15 秒超时与AbortSignal取消机制videoPlayer.vue。绘制与编码把视频帧绘制到与原始分辨率等大的canvas上通过canvas.toBlob(..., image/png)生成 PNG 截图。写入工作区以frame.png为文件名、crypto.randomUUID()为节点 ID通过files.uploadFile写入当前工作区的素材目录见下文第五节。生成图片节点在画布中调用addNodes添加一个remote-imageNode类型的新节点其输出为{ dataType: IMAGE, value: { url: path, mimeType: image/png } }新节点会自动放置在原视频节点右侧 40px处并沿垂直方向避开其他节点宽度按截帧宽高比换算240 * width / height 18。节点标题形如「视频 · 当前帧 / 首帧 / 尾帧」。失败回滚若中途失败或画布节点发生变化会清理已上传但未提交的临时图片assets/{id}保证工作区不留垃圾文件。从数据结构看截帧输出的是标准IMAGE类型values.ts因此下游所有支持图片输入的节点都能直接复用这张截帧。五、素材存储与节点函数源码视角的底层机制1. 视频文件的存储位置上传的视频并不会被随意存放而是统一写入当前工作区的assets/{nodeId}/目录下文件名保留原扩展名并追加随机 UUIDworkspaceFiles.tsconst directory assets/${nodeId}; const path ${directory}/${crypto.randomUUID()}${extension};删除节点时在未开启「保留节点素材」的画布中会递归移除该节点的assets/{nodeId}目录workspaceFiles.ts。值得注意的是替换视频时并不会删除旧文件——源码注释明确说明这是有意为之复制的节点可能仍引用旧视频删除共享文件会导致引用失效index.vue。预览加载同样基于工作区能力useFileUrl优先通过acquireUrl获取共享 URL否则读取文件内容并用URL.createObjectURL生成临时预览地址切换素材或组件卸载时会自动revokeObjectURL释放workspaceFiles.ts。2. 注册的节点函数node:setVideo视频节点在初始化时通过nodeTools.register注册了一个名为setVideo的节点函数index.vue供 Agent / 工具调用层使用其参数采用 Zod 严格校验nodeTools.register({ name: setVideo, description: 选择工作区内已有的视频文件作为此节点的输出path 使用工作区相对路径, parameters: z.strictObject({ path: z.string().min(1).max(4096), mimeType: z.string().regex(/^video\/[a-zA-Z0-9.-]$/), }), async execute({ path, mimeType }, { signal }) { /* ... */ }, });其语义是从工作区选择一个已存在的视频文件相对路径作为节点输出而不是重新上传。执行时同样校验「非空且不超过 100 MB」随后把outputs.video设置为{ dataType: VIDEO, value: { url: path, mimeType } }并返回该输出。注册机制本身位于 nodeTools.ts函数名必须是小驼峰且不超过 64 字符参数必须是 Zod object schema会被转换为 JSON Schema 暴露给调用方并在组件作用域销毁时自动注销。3. 输出的生命周期管理useNodeuseNode.ts会把节点在node.data.outputs中已持久化的合法输出与当前outputs合并只有句柄存在、且dataType兼容通过isTypeCompatible校验见 connection.ts的输出才会被还原从而保证节点在画布刷新、切换后仍能恢复上次的视频素材。六、与其他节点的配合与限制说明视频节点本身是一个纯「素材节点」真正的生产力体现在它与下游节点的连接中。结合 values.ts 的类型体系VIDEO输出可以流向所有声明支持VIDEO输入的节点截帧生成的IMAGE节点则等同于手工上传的图片素材可继续连接图片生成、参考图等节点。使用中需要注意以下边界文件大小上限为 100 MB此限制同时作用于手动上传与setVideo节点函数两条路径。截帧依赖图片节点插件未启用时截帧入口不可用下拉菜单被禁用并给出提示。视频格式取决于浏览器解码能力acceptvideo/*接受所有视频类型但能否播放与预览由内核决定解码失败时播放器会提示「无法预览该视频」或「视频帧读取超时」。七、小结视频节点是 Toonflow 画布中把「本地视频素材」转化为「可复用画布资产」的关键一环上传后以assets/{nodeId}/工作区路径持久化以标准VIDEO输出对接下游以「截帧」能力把任意时刻的画面当前帧 / 首帧 / 尾帧转成独立的图片节点继续参与制作。通过阅读 packages/nodes/videoNode/src/index.vue、packages/nodeScaffold/src/components/videoPlayer.vue 与 packages/nodeScaffold/src/workspaceFiles.ts 的实现你不仅可以熟练操作该节点也能理解其背后的素材管理与节点函数机制为后续编写或改造自定义节点提供参考。赞分享人工智能AI 应用AI AgentRAGAI 写作后端桌面应用【免费下载链接】Toonflow-appToonflow 是一款 AI 短剧漫剧工具能够利用 AI 技术将小说自动转化为剧本并结合 AI 生成的图片和视频实现高效的短剧创作。借助 Toonflow可以轻松完成从文字到影像的全流程让短剧制作变得更加智能与便捷。项目地址https://gitcode.com/HBAI-Ltd/Toonflow-app点击查看免费下载相关推荐Toonflow 音频节点完全指南画布内音频素材导入、试听与下游参考连接Toonflow 音频节点完全指南画布内音频素材导入、试听与下游参考连接 Toonflow 的音频节点 toonflow/node audio 是画布工人工智能AI 应用AI AgentRAGAI 写作后端桌面应用Toonflow 视频生成节点完全指南从提示词与参考素材到 AI 成片的全流程实战Toonflow 视频生成节点完全指南从提示词与参考素材到 AI 成片的全流程实战 Toonflow 视频生成节点 videoGenerationNode人工智能AI 应用AI AgentRAGAI 写作后端桌面应用时间序列预测框架 Chronos 怎么跑通从 24 小时读数到未来 24 小时预测的完整数据旅程时间序列预测框架 Chronos 怎么跑通从 24 小时读数到未来 24 小时预测的完整数据旅程 Chronos 是 Amazon 开源的时间序列预测框架基人工智能基础模型深度学习上一篇J2ObjC网络编程Java网络库在iOS的兼容性指南下一篇Spotless代码格式化终极指南如何让Java、Kotlin、Python代码一键变整洁创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考