框架工具

一个内嵌的AI视频工作室用于React.

将简介,品牌资产,产品上下文转化为可编辑的视频广告. Framacraft 计划场景,写 React and Remotion 组成, 使用生成的图像作为资产, 用户可以通过聊天,编辑源头,作曲音乐,录音语音,并导出视频来完善结果.

工作空间,编译,预览,音频混合,视频导出在浏览器中运行. 您的应用程序提供模型连接以及可选的图像生成和持久性适配器.

GitHub 图像 • 妇女 融合指南 • 妇女 出版指南

包含的内容

• 可编辑的成分 : React, Remotion, Tailwind, 图像资产,多侧相比,以及活预览.
• 设计和审查: 可配置规划员、设计员和审查员的角色、版本技能、框架反馈和可收回的修订.
• 音乐和语音: 一个作曲代理,拥有24个无样本合成预设,可编辑分数和MIDI,外加逐行录制的远程快取.
• 时间线混合 : dB中音量,哑音,淡出,预览和导出中相同的音频组合.
• 可检查的工作空间: 摩纳哥文件编辑器,资产预览,活动更新,以及可选文件观看.
• 便携式会话: 索引 DB 存储,会话 ZIP 下载/导入,检查点适配器,并中断运行恢复.
• 本地视频导出 : MP4或有进度和取消的WebM,取决于浏览器代码支持.
• 终端工作流程 : 页:1 framecraft CLI通过无头铬创建,编辑,检查,恢复,并输出磁盘支持的项目.

命令行

npm install -g @framecraft/studio
framecraft setup
framecraft create ./my-ad --brief "An eight-second animated product launch"
framecraft edit ./my-ad "Make the headline larger"
framecraft export ./my-ad --out ./my-ad.mp4

需要22.22+和铬. 设定 OPENAI_API_KEY 在您的环境中为 AI 命令。 不创建 --brief,检查,直接编辑,ZIP进出口,以及没有模型密钥的视频输出工作. 证书留在节点;项目和可收回的检查站设在 ./my-ad/.framecraft启用 --json 用于脚本和编码代理.

见 CLI 指南 用于确定场景编辑、模型配置、项目可移植性和取消.

安装

npm install @framecraft/studio

使用匹配 React 和 React DOM 版本的客户端应用程序 : 18.3.1 或反应. 19。保留应用程序中已经安装的反光版。 使用Vite等浏览器捆绑器. 不支持服务器侧渲染 。 麦克风录音和浏览器视频编码需要HTTPS或localhost和浏览器支持.

虚拟配置

使Framacraft脱离依赖

// vite.config.ts — merge into your existing configuration.
import {defineConfig} from 'vite';

export default defineConfig({
  optimizeDeps: {
    exclude: ['@framecraft/studio'],
    include: ['react', 'react-dom', 'react-dom/client',
      'react/jsx-runtime', 'react/jsx-dev-runtime'],
  },
});

通过下面显示的明确的 WASM URL 。 对于其他捆绑者,配置同等工人和资产处理.

装上工作室

此 Vite 示例从您的应用程序中取出一个模型适配器 。 所需数额 model 是一个LangChain聊天模式,支持工具调用,结构化输出,视觉,和取消. 该套件不包括证书或主机AI端点.

import {Studio, type StudioAdapters} from '@framecraft/studio';
import '@framecraft/studio/styles.css';
import wasmURL from '@framecraft/studio/esbuild.wasm?url';

type VideoEditorProps = {
  projectId: string;
  adapters: StudioAdapters;
};

export function VideoEditor({projectId, adapters}: VideoEditorProps) {
  return (
    <Studio
      projectId={projectId}
      adapters={adapters}
      wasmURL={wasmURL}
      initialBrief="Create a playful eight-second ad for a hair dye brand."
      durationSeconds={8}
      formats={[{id: 'story', width: 1080, height: 1920}]}
      review={{maxRounds: 6, minScore: 8.5, keepBestVersion: true}}
      onExport={({blob, format, mediaType}) => {
        // Optional: upload the exported Blob to your application.
        console.log({bytes: blob.size, format, mediaType});
      }}
    />
  );
}

保持适配器的相间稳定。 每个 projectId 有自己的对话和工作空间. initialBrief 种子项目; 用户通过聊天发送请求开始生成.

使用 onReady(session) 调回访问会话. onEvent(event) 接收辅助文本、工具活动、审查更新和导出进度。 原始推理没有曝光.

带上你的整合

您的应用程序拥有供应商认证 。 共享提供者证书属于您的后端 。 Framecraft 的浏览器运行时间不需要渲染服务器;模型和图像请求仍然使用您的适配器提供的服务.

图像参考

场景组件收到 assets 将资产ID映射到嵌入式图像 URL。 使用 <Img src={assets[imageId]} /> 通过 assets 变成嵌入式组件。 资产输入道具包含ID;通过此地图解决. 对 CSS 背景也使用已解析的 URL .

渲染器还在 Remotion 中解析精确已注册的图像 ID 和虚拟工作空间路径 <Img> 和本土 <img>,包括现场预览。 未知的引用建议匹配名称、路径和 assets["id"] 表达. 模糊的路径和字典 从来没有默默地分配一个图像。 此解析器读取所提供的图像目录; 它不会获取 URL 或者访问任意文件 。 缺失的引用与嵌入式图像分开报告,而嵌入式图像实际上无法解码,因此代理可以在保存所请求的照片的同时修复引用.

使用没有用户界面的会话

import {createAdSession, type StudioAdapters} from '@framecraft/studio';
import wasmURL from '@framecraft/studio/esbuild.wasm?url';

export async function createAd(adapters: StudioAdapters) {
  const session = await createAdSession({
    projectId: crypto.randomUUID(),
    adapters,
    wasmURL,
    durationSeconds: 8,
    formats: [{id: 'story', width: 1080, height: 1920}],
  });

  const result = await session.send('Create a colorful hair dye ad.', {
    review: true,
  });
  console.log(result.approved, result.review);

  // Follow-ups edit the existing composition.
  await session.send('Make the final headline red.', {review: false});

  const source = await session.workspace.read('/Ad.tsx');
  const video = await session.export({format: 'story', type: 'mp4'});
  const archive = await session.downloadZip();
  return {session, source, video, archive};
}

挂载 <AdStudio session={session} /> 将 UI 添加到现有的会话中. session.undo() 财务报告和审定财务报表 session.redo() 导航承诺的代理人修订; session.cancel() 停止活动运行.

技能和审查

默认技能覆盖了React成份,Remotion动画,图像取向,和视觉评论. 添加特定品牌的指令同时保留这些默认:

import {adDesignSkills, type StudioSkill} from '@framecraft/studio';

const brandSkill: StudioSkill = {
  id: 'brand',
  version: '1.0.0',
  roles: ['planner', 'designer', 'reviewer'],
  instructions: 'Keep headlines editable. Preserve logo proportions.',
};

const skills = [...adDesignSkills(), brandSkill];
// Pass `skills` to Studio or createAdSession().

供应 skills 替换默认值,因此包含 adDesignSkills() 当他们延长。 每个角色也可以通过下列方式拥有自己的模式、指示和技能: agents。 。 。 .

审查默认为 首个留言, 结束后续,带有UI切换和每端覆盖. 启用后,需要检查被套;设计者不能跳过. 汇编、渲染和确定性检查仍在进行中,审查被取消。 视觉审查样本框架;它不核查每个框架或评估音乐质量.

音乐、录音和混合

要求代理人在保存笔记的同时作曲音轨或修改其乐器. 分数,MIDI,和合成的WAV文件仍然留在工作空间. 音乐片段与成分相伴并被混入出口.

语音请求显示为待决 来啊! 剪辑。 点击一键来编辑脚本,记录每行,聆听,并在将录音添加到时间表之前重取. 此工作流程记录用户的声音 .

选择一个音频剪辑来调整音量并淡出,或者问:“将音乐放入-12分贝,在半秒内淡出,并在最后秒后淡出。” 混合变化不需要再生成音轨.

保存、恢复和恢复

下载 ZIP 包装文件、资产、谈话、技能、修改和设置检查站. 导入 ZIP 创建一个单独的谈话。 恢复后再次提供型号适配器;证书不序列化.

对于后端持久性,执行 CheckpointAdapter.read() 财务报告和审定财务报表 .save() 传为 adapters.checkpoints。你的后端可以存储快照到 S3, R2 或另一个商店。 保存必须从原子上执行预期的版本;提供商特有的云适配器没有被捆绑.

中断运行可以从保存的执行状态恢复到 session.resume(runId)保留已完成的工具结果。 如果外部行动被中断,结果不明,恢复就会停止和解,而不是盲目重复.

见 融合指南 适用于适配器合同,ZIP API,以及恢复行为.

供应产品来源作为背景

将所选文件作为只读上下文传出, 这样代理能够理解您的产品 :

import productSource from './Product.tsx?raw';

const context = {
  files: {'Product.tsx': productSource},
  namespace: 'product',
};
// Pass `context` to Studio or createAdSession().

可选 @framecraft/studio/node 出入口出口 loadContextFiles() 用于在节点中装入所选文件。 文件是参考材料,不是可执行插件导入 。 上下文带有被保存的会话;仅包含用于代理和存档的文件.

MP4 导出使用本地 AAC 当可用且懒惰地装入 Mediabunny 的 WASM AAC 编码器时。 H.264视频编码仍需要浏览器支持;WebM也可用.

浏览器加载

Npm 构建被精密化,并保存了动态的导入. 摩纳哥在打开文件时加载,通纳在合成音乐时加载,成分渲染器在首次使用时加载. 可选编码器按需要加载 。 编译器WASM在编译成像时被运出并加载. 上载工作室开始一个预览,因此此时需要渲染和编译.

在捆绑或部署软件包时,保留生成的JavaScript块、CSS、工人和WASM。 分拆会减少JavaScript的初始负载;它不会从npm下载中删除编译器.

当前限制

• 使用遗留成分 Ad.tsx结构化项目使用具有时间表自主安排和曝光设置的场景模块;音频仍保留在自己的时间安排上。 不支持任意遗留源的自动分解 .
• 撤消/重播已承诺的代理修改, 而不是每个手动文件或时间表编辑 .
• 导出速度和内存使用取决于组成复杂度,维度,和浏览器编码器. MP4为默认;WebM也可用.
• 浏览器存储为原产地-本地并受配额限制. 输出 ZIP 或配置可移动持久性的检查站.
• 生成的成分在一个孤立的iframe中运行,网络被拒绝. 主机适配器处理外部服务.

本地开发

从寄存器根 :

pnpm install
pnpm dev

打开 http://127.0.0.1:5180 (中文(简体) )。开发游乐场使用通过配置的本地网关 .env; 见其 设置指令。 。 。 .

运行 pnpm pack:studio 建立一个独立的Npm柏油球。 公众npm的名字是 @framecraft/studio; 内部工作空间名称保留 @deepbench 范围。 这个 出版指南 描述发行和可信赖的出版.

场景组件和品牌库

从可重复使用的 TSX 组件构建结构化场景,在不重写代码的情况下编辑其计时/设置,并通过库适配器来保存被绑定的组件版本. 见 场景和图书馆指南 合同、迁移、代理工具和储存一体化.

代理安装的浏览器包

设计者可以用这些工具发现、测试和选择包:

• search_packages:按名称或目的搜索 npm.
• list_package_versions:发现已出版的版本和标记,并有发相.
• inspect_package:检查浏览器/模块输出,类型和候选来源.
• list_package_files:发现已公布的文件和大小,被过滤并被分解.
• read_package_file: 以限定块读取文档、声明文件或来源.
• probe_package:测试准确的版本并选择源/入而不更改项目文件.
• install_package: 安装代理人所选版本, 源和条目文件 .
• list_packages:报告内建、政策和已安装的软件包.

从 esm.sh 或 jsDelivr 发布的 JavaScript 安装下载 ESME, 将已解析的模块图钉入, 检查相容性,并在承诺前在成品沙盒中导入. 没有套件生命周期脚本运行 。 主机页面从未导入下载代码 .

const info = await session.packages.inspect('d3-interpolate');
const choice = {source:'esm.sh-standard' as const};
const probe = await session.packages.probe(info.name, info.version, choice);
if (!probe.ok) throw new Error(probe.message);
await session.packages.install(info.name, info.version, undefined, choice);
console.log(await session.packages.list());
// Scene source can now use: import {interpolateRgb} from 'd3-interpolate';

list_packages 报告内置运行时间版本和直接安装的软件包. inspect_package({name, version: null}) 解决当前版本; 安装 需要精确的版本。 安装失败使工程保持不变 。 重复 一个已安装的版本是安全的; 默认的版本升级被拒绝。 软件包更改 参加取消/复辟、检查站、运行恢复、项目捆绑和ZIP. /packages.lock.json 存储模块源、精确解析的 URL、导入映射和 SHA-256检查和. 正在验证完整性和捆绑保存的字节, 没有 CDN 预览/导出时获取 。 反应,它的JSX运行时间和回旋与共享 变形器。 既有结构化的场景,也有遗留的Ad.tsx支持已安装的软件包.

无依赖软件包使用 esm.sh 的标准构建 URL, 避免不必要的 自定义构建。 其他软件包请求共享运行时间外部; 如果该条目返回 HTTP 5xx,安装尝试同一准确版本的标准构建. 倒计时 仍然拒绝下载替换的图表 React 或 Remotion 运行时间 . 这种自动倒计时只保留给省略源选择的后继调用者. 明确选择的测试完全符合要求: esm.sh, (中文(简体) ), esm.sh-standard,或 jsdelivr 包件关系 entryPath 从元数据/文件中发现. 已发布文件必须有一个可解析的相对依赖性图; 一个原始条目, 即 取决于光 npm 导入需要捆绑的浏览器条目或 esm.sh . 没有针对软件包的入门路径或版本的降级都是硬码.

探测失败报告阶段、错误代码、可用HTTP状态/URL、限制和 下一个动作。 成功的探测器返回匹配的安装参数 。 元数据和文件 是参考数据,从来不是代理指令。 代理人可以比较候选人和 选择一个选项,同时尊重用户明确要求的版本. 活动种子报告安装成功或失败,包括远程主机和 下载错误的 HTTP 状态 。 无法获取的精确版本从未被默默替换 .

3个J 0.180.0 和发现的元数据 0.187.0 包含在下面的浏览器回归中。 其可选的以获取为基础的 装载器可以存在,但网络请求仍然被沙盒CSP所屏蔽. 用于 WebGL 场景, 设定 preserveDrawingBuffer: true动画 useCurrentFrame(),在每次帧变化后进行渲染,并卸载资源. 这使得画布内容可以用于帧捕获和视频导出.

主机可以通过 createAdSession({packages: {...}, ...})数字 :

• enabled: false 禁止检查和安装.
• allowedPackages: ['d3-interpolate', 'd3-color'] 限制每个下载的软件包, 包括过渡性依赖。 Omit用于一般浏览器-软件包安装.
• fetch 提供可选运输。 默认请求省略证书和 裁判和拒绝重定向。 请求仅限于npm搜索/元数据, jsDelivr 包元数据/文件,和 esm.sh 代码. 任意的URL不被接受.
• 自定义渲染适配器必须明确设置 renderSupportsPackages: true 消费 AdRenderInput.packages;否则安装失败而不是默默地忽略了代码.

初始范围:根入进口,JavaScript无害环境管理,最多32个直接包,128个模块, 每个响应2个米B和4个米B总来源(公布的文件可以大于CDN小于) 建楼). 下载有请求超时, 请求预算和整个下载期限。 兼容性以外的节点 API 层下层,动态导入,导入.meta,运行时间资产加载,CSS/WASM导入和替换 React运行时间 没有支持。 向品牌库出版的组件仍然需要其现有的 自成一体的React/Remotion合同;不支持基于软件包的库版.

这些都是兼容性检查和遏制措施, 不是恶意软件审计或 安全认证iframe保持其不透明的来源和现有的限制性CSP. 校验和检测到已保存的字节已更改; 它们不能证明出版商是可信的 . 导入烟雾测试不能证明任意动画行为:驱动动画从 调用框架和验证实际生成。 资源限制不能保证保护 从所有CPU/memory耗尽或浏览器的弱点。 需要出版商的东道主 批准应使用 allowedPackages。 。 。 .

验证 : pnpm build, (中文(简体) ), node packages/studio/build/portable.mjs,则 node scripts/packages-browser-smoke.mjs --check 用于自动铬检查 (目标) --check 以手动打开已打印的 URL 。 它涵盖了真正的CDN安装, 一个可见的旋转 三.js 交叉, 确定性框架寻求, ZIP 恢复与 包运禁用, WebM 导出, 被屏蔽的网络加载器, 以及固定 使用共享 React JSX 运行时/运行时的软件包. 这个烟雾检查不会叫模特儿.

浏览器节点相容性

图片和已安装的软件包可以在不安装的情况下使用这些内建件:

SDK指针缓冲 6.0.3,事件 3.3.0,路径浏览1.0.1, 使用量0.12.5和 主张 2.1.0. 兼容性代码只在内部执行,使需要的沙盒变成沙盒. esm.sh (英语) /node/*.mjs 导入会解决本地问题,而不是下载多填充. 静态 require('node:fs') 和其他支持的内建也要求包件工作; 动态要求和任意的 CommunityJS 软件包要求仍然不支持.

fs 执行 readFile, (中文(简体) ), readdir, (中文(简体) ), stat, (中文(简体) ), lstat, (中文(简体) ), access,以及 realpath 内 同步、召回和承诺表,加 existsSync 和回调 exists。 。 。 . 读取返回已复制的缓冲器, 除非提供编码 。 目录列表支持 withFileTypes;统计器有文件/指令的上游,字节大小和固定的时代日期. 从文件路径推断出目录 。 递归性上市和大调数据不支持.

抓图包括 /project.json现场消息, /assets, (中文(简体) ), /music,以及 /data。 。 。 . 他们排除了对话的历史,运行,产品背景, 证书来自主机 环境,以及主机文件系统。 将辅助 JSON、文本或二进制文件放入 /data数字 :

await session.filesystem.writeFile('/data/theme.json', '{"color":"#00ff00"}', {createParents:true});
// Inside a scene or installed package:
// import fs from 'node:fs';
// const theme = JSON.parse(fs.readFileSync('/data/theme.json', 'utf8'));

/data 参与项目修改、撤销/重做、捆绑和ZIP恢复. 每个渲染器都收到固定的快照,因此,编辑会影响随后的渲染器,而不 通过导出中途更改帧 。 截图仅限于2 048个文件和 64个已解码字节的 MiB; 没有创建快照, 除非源码/ 包码引用 fs。 。 。 . 低级渲染调用器可能提供基质64 {path, data} 输入 AdRenderInput.filesystem。 。 。 .

写入失败 EROFS; 监视器, 流, 文件描述器, 子进程, 套接字, 本地模块和Windows路径语义不支持. process 从不暴露 主机环境变量。 这是已定义的节点浏览器子集,而不是节点运行时间.

反向工程师一个参考视频

打开 图书馆 + 倒置工程师录像,然后选择 分析视频。 。 。 . 分析前使用 调试参考 以滑块设置起始和结尾 或精确的第二个字段。 清理视频并使用 在播放头设置开始/ 结束 页:1 视觉定位. 预览选择 弹出这个范围,然后停止它 结束; 重置修饰 恢复完整记录。 只有框架和音频 选择输入分析。 选定者从零开始报告时间戳 ,而保存的报告和导出则保留其原始源范围. 工作流程每分每秒都抓取一个 JPEG , 将音频输入其中 原始语言,分析有两帧相重叠的八帧相组,以及 合成一个时间顺序分解. 报告描述了场景、反复出现的内容、, 布局、主题、调色板、打字、屏幕文本、运动、过渡、证据、, 不确定因素和重建说明.

内置限制为100 MB并有5分钟. 框架图像缩放到最大 侧式为768像素;本地解码需要浏览器对源代码的支持. 音频被降低到 16 kHz 单相 WAV , 并将近静边界分割成块 最多20秒钟 转写时间范围是指这些块,而不是单个块 词 语言识别取决于转录提供者;不支持或 不清楚的言论不能保证。 一秒钟的截图无法精确确定 子秒转换或放松,所以报告会标出这些推论.

启用带有适配器的面板分析动作 :

<Studio
  projectId="my-film"
  adapters={{
    model, // Vision-capable chat model with structured output
    reverseEngineering: {
      // Optional model override for visual analysis:
      model: visionModel,
      transcription: {
        async transcribe({audio, previousText, signal}) {
          // Send this WAV chunk to your server. Return original-language text.
          return myTranscriptionGateway({audio, previousText, signal});
          // Shape: {text: string, languages: string[]} (ISO language codes)
        },
      },
    },
  }}
/>

游戏场在本地 OpenAI 网关时自动配置这些适配器 已连接。 它的服务器使用 OPENAI_TRANSCRIPTION_MODEL=gpt-transcribe 编辑 已存在的服务器 OPENAI_API_KEY音频 /api/transcribe; 只有样本 图像到视觉模型。 源 MP4 仍为本地. 缺少的文字记录 适配器、 缺失音频轨道或音频解码失败被明确显示为仅可视化 分析。 转录请求失败 停止分析而不是沉默 省略演讲.

报告及其抽样框架 /references/<id>/analysis.json所以他们 乘坐ZIP和检查站。 原MP4没有被保留. 你们可以 重新打开已保存的报告, 下载 Markdown 或 JSON, 或选择 用作创作简介 在发送前将娱乐规划请求放入聊天审查.

无头的 API 也导出:

import {reverseEngineerVideo, saveVideoBreakdown} from '@framecraft/studio';
const result = await reverseEngineerVideo(file, {
  model: visionModel,
  transcription: transcriptionProvider,
  trim: {startSeconds: 3.25, endSeconds: 25.5}, // Optional source-video range
  signal: controller.signal,
  onProgress: event => console.log(event.message),
});
await saveVideoBreakdown(session.filesystem, result);

inspectVideoReference(file, {signal}) 读取源视频的维度和 自定义修剪用户界面的持续时间。 没有源域元数据的现有报告 继续打开作为未调整的引用.

译名整合 正式文件复制指南。 。 。 .