将产品照片制成视频广告

从一张产品照片开始，在 Grok 的创意指导下制作一条八秒竖屏广告。网页应用会依次展示创意简报、三个场景、Grok 的选择以及最终广告。

你将学到什么

• 向 Grok 发送图片，以结构化输出取得创意简报

• 编辑照片，将产品放入新的场景，同时保持产品原貌

• 在一个请求中比较多张图片，让 Grok 选出最合适的一张

• 将选中的图片制作成视频并添加旁白

• 通过服务器发送事件（SSE）将进度从 Node 服务器流式传送到网页

运行示例

需要 Node.js 22.13 或更高版本。将 API 密钥放入 .env（位于仓库根目录），或导出环境变量 XAI_API_KEY。如果安装了 ffmpeg，应用还会将旁白混入视频。

cd examples/product-video-ad/typescript
npm install
npm run web

打开 http://localhost:3000，选择产品照片或点击 Sample，然后点击 Make the ad。页面就像一个广告工作室。Grok 写好简报后，会立即展示在照片下方；三个场景在完成后依次出现在右侧，选中的场景会附上 Grok 的理由。中间的手机边框中先显示已渲染多长时间，完成后像社交平台的限时动态一样播放广告。

如需在终端中制作广告，请传入照片及描述：

npm start -- ./your-product.jpg "What the product is and who it's for"

不传参数时，默认使用 sample-product.jpg 中的旅行杯照片。两种版本都会将所有结果保存到 output/<product>/，终端版本还会在那里写入一份 index.html，展示场景、Grok 的选择和最终广告。每次运行会生成三张图片和一段视频，约需几分钟；我们测试时的费用约为 $1.35。完成后，网页和终端会显示图片和视频的费用，它们占了几乎全部成本。

工作原理

共享代码位于 src/ad.ts。makeAd() 执行以下步骤，将各文件保存至 output/<product>/，并在每一步开始时报告进度，一有结果就报告：

1. writeBrief() 将照片和你的描述发给 grok-4.7，得到产品名、三个场景、镜头运动方式、广告语和旁白。

2. placeProduct() 为每个场景编辑照片，调用 client.images.edit()，采用 9:16 画幅，并要求保持产品原貌。三项编辑并行执行。

3. pickBest() 将原始照片和三个场景放在同一个请求中，请 Grok 判断哪个场景最适合推销产品。返回结果包含场景编号及理由。

4. animate() 根据选中的图片开始制作八秒视频，调用 client.videos.generate()，并使用 client.videos.wait() 等待结果。与此同时，narrate() 负责录制旁白。

5. addVoiceover() 用 ffmpeg 将旁白叠加到视频中，并调低视频原声。

src/server.ts 是一个小型 node:http 服务器。EventSource 只能发送 GET 请求，因此页面先将照片上传到 /api/photos，然后打开 /api/ad，传入返回的 ID。服务器运行 makeAd()，以 SSE 将进度发到网页，并提供运行过程中保存的图片、视频和音频。makeAd() 会把 AbortSignal 传给每个 API 调用，网页关闭时服务器会触发中止信号。已启动的视频任务将继续渲染，因为 API 不支持取消视频生成。

public/index.html 使用原生 HTML 和 JavaScript 展示这些事件并播放广告。如果没有 ffmpeg 就不会生成混音成片，因此页面会将视频和旁白同步播放。src/index.ts 在终端中完成相同的工作，并打印各步骤。