# @framecraft/studio 中文文档

规范地址：https://npmcn.com/package/%40framecraft/studio/

版本：0\.5\.1
npm 元数据更新时间：2026-11-05T14:25:03.323Z
中文译文更新时间：2026-11-15T17:51:32.442Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40framecraft/studio
原文对照：https://npmcn.com/package/%40framecraft/studio/?lang=original
项目主页：https://github.com/robGetsTheJobDone/Framecraft#readme
源码仓库：https://github.com/robGetsTheJobDone/Framecraft

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：34.8 MB，148 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22\.22\.0
- 运行依赖：25 个
- peer 依赖：react ^18\.3\.1 \|\| ^19\.0\.0，react-dom ^18\.3\.1 \|\| ^19\.0\.0
- 首次发布：2026-10-21T01:20:55.294Z
- 最新版本发布：2026-11-05T14:25:02.864Z
- 近 30 天下载量：2010（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：11（近 12 个月 11 个）

## 中文简介

浏览器- 首个 AI 视频工作室, 带有可编辑的 Remotion 广告、 音乐和便携式会话

## 安装

```sh
npm install @framecraft/studio
```

也可以使用：`pnpm add @framecraft/studio`、`yarn add @framecraft/studio`、`bun add @framecraft/studio`

## README

# 框架工具

[![npm version](https://img.shields.io/npm/v/@framecraft/studio)](https://www.npmjs.com/package/@framecraft/studio)

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

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

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

[GitHub 图像](https://github.com/robGetsTheJobDone/Framecraft) • 妇女 [融合指南](https://github.com/robGetsTheJobDone/Framecraft/blob/main/docs/integration.md) • 妇女 [出版指南](https://github.com/robGetsTheJobDone/Framecraft/blob/main/PUBLISHING.md)

## 包含的内容

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

## 命令行

```sh
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 指南](https://github.com/robGetsTheJobDone/Framecraft/blob/v0.5.0/docs/cli.md) 用于确定场景编辑、模型配置、项目可移植性和取消.

## 安装

```sh
npm install @framecraft/studio
```

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

### 虚拟配置

使Framacraft脱离依赖

```ts
// 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端点.

```tsx
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)` 接收辅助文本、工具活动、审查更新和导出进度。 原始推理没有曝光.

## 带上你的整合

| 适配器 | 目的 |
| --- | --- |
| `model` | 代理工作流程所需的 LangChain 聊天模式 . |
| `imageGeneration` | 生成图像资产, 用于内部构成 . |
| `storage` | 替换默认浏览器文件系统 . |
| `checkpoints` | 通过您的后端保存并恢复完整的会话快照 . |
| `speech` | 用于单独调试工作流程的可选语音生成. 手工录音不需要. |
| `render` | 替换渲染器, 同时提供真实的框架供审查 . |

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

### 图像参考

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

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

## 使用没有用户界面的会话

```ts
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动画,图像取向,和视觉评论. 添加特定品牌的指令同时保留这些默认:

```ts
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)`保留已完成的工具结果。 如果外部行动被中断,结果不明,恢复就会停止和解,而不是盲目重复.

见 [融合指南](https://github.com/robGetsTheJobDone/Framecraft/blob/main/docs/integration.md) 适用于适配器合同,ZIP API,以及恢复行为.

## 供应产品来源作为背景

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

```ts
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中运行,网络被拒绝. 主机适配器处理外部服务.

## 本地开发

从寄存器根 :

```sh
pnpm install
pnpm dev
```

打开 **http://127.0.0.1:5180 (中文(简体) )**。开发游乐场使用通过配置的本地网关 `.env`; 见其 [设置指令](https://github.com/robGetsTheJobDone/Framecraft/blob/main/packages/studio-playground/README.md)。 。 。 .

运行 `pnpm pack:studio` 建立一个独立的Npm柏油球。 公众npm的名字是 `@framecraft/studio`; 内部工作空间名称保留 `@deepbench` 范围。 这个 [出版指南](https://github.com/robGetsTheJobDone/Framecraft/blob/main/PUBLISHING.md) 描述发行和可信赖的出版.

## 场景组件和品牌库

从可重复使用的 TSX 组件构建结构化场景,在不重写代码的情况下编辑其计时/设置,并通过库适配器来保存被绑定的组件版本. 见 [场景和图书馆指南](https://github.com/robGetsTheJobDone/Framecraft/blob/feat/scene-components-brand-library/docs/scenes-and-library.md) 合同、迁移、代理工具和储存一体化.

### 代理安装的浏览器包

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

-   `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, 将已解析的模块图钉入, 检查相容性,并在承诺前在成品沙盒中导入. 没有套件生命周期脚本运行 。 主机页面从未导入下载代码 .

```ts
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 运行时/运行时的软件包. 这个烟雾检查不会叫模特儿.

### 浏览器节点相容性

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

| 进口(少量或 `node:`(中文(简体) ) | 支助 |
| --- | --- |
| `buffer` | 浏览器缓冲执行; `Buffer` 也是全球性的 |
| `events` | 浏览器 EventEmitter 执行 |
| `path`, (中文(简体) ), `path/posix` | POSIX 路径根植于 `/` |
| `util` | 浏览器工具,包括 `format`, (中文(简体) ), `inherits`, (中文(简体) ), `promisify`, (中文(简体) ), `callbackify` |
| `assert`, (中文(简体) ), `assert/strict` | 浏览器断言执行 |
| `process` | `env.NODE_ENV = 'production'`, (中文(简体) ), `cwd() = '/'`, (中文(简体) ), `nextTick`,浏览器元数据 |
| `fs`, (中文(简体) ), `fs/promises` | 只读内存项目快照 |

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`数字 :

```ts
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秒钟 转写时间范围是指这些块,而不是单个块 词 语言识别取决于转录提供者;不支持或 不清楚的言论不能保证。 一秒钟的截图无法精确确定 子秒转换或放松,所以报告会标出这些推论.

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

```tsx
<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 也导出:

```ts
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})` 读取源视频的维度和 自定义修剪用户界面的持续时间。 没有源域元数据的现有报告 继续打开作为未调整的引用.

译名整合 [正式文件复制指南](https://developers.openai.com/api/docs/guides/speech-to-text)。 。 。 .

## 常见问题

### @framecraft/studio 是什么？

浏览器- 首个 AI 视频工作室, 带有可编辑的 Remotion 广告、 音乐和便携式会话

### 如何安装 @framecraft/studio？

在项目目录运行 npm install @framecraft/studio，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.3\.1 \|\| ^19\.0\.0）、react-dom（^18\.3\.1 \|\| ^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 framecraft，可以用 npx framecraft 直接运行。

### @framecraft/studio 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @framecraft/studio 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @framecraft/studio 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22\.22\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @framecraft/studio 可以商用吗？

@framecraft/studio 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @framecraft/studio 的下载量有多少？

根据 npm 官方下载统计，@framecraft/studio 在 2026/10/16 – 2026/11/14 这 30 天内被下载 2,010 次，日均约 67 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @framecraft/studio 还在维护吗？

最新版本 0\.5\.1 发布于 2026/11/05（10 天前）；至今共发布 11 个版本，其中过去 12 个月发布了 11 个；首次发布于 2026/10/21。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。