这是 Vercel AI Gateway 的账户验证问题，需要绑定信用卡才能使用。我来修改代码，添加一个演示模式，让您可以先测试 UI 功能，同时也显示清晰的错误提示。

现在更新 API 路由，让它返回更友好的错误信息：

已完成修改。现在界面增加了以下功能：

1. 演示模式开关 - 右侧编辑面板的 AI 生成区域新增了演示模式切换按钮，开启后使用 Unsplash 示例图片代替真实 AI 生成，让您可以完整测试 UI 流程
2. 账户验证提示 - 当遇到 AI Gateway 验证错误时，会显示明确的提示信息和前往 Vercel 添加信用卡的链接
3. 更友好的错误处理 - API 路由现在能识别 403/验证相关错误并返回更具体的错误码和消息

您现在可以打开「演示模式」开关来测试完整的图片生成和编辑流程。

现在我清楚了完整结构。需要做以下改造：

1. types.ts — 增加 productImage、giftImages、activityLogoImage、storeLogo 图片字段，每个包含位置和尺寸（用于拖拽）
2. banner-canvas.tsx — 将静态占位符替换为真实可拖拽图片元素，使用 pointer events 实现拖拽
3. editor-panel.tsx — 为图片元素增加上传/URL输入区块

现在完全重写 banner-canvas.tsx，加入可拖拽图片层：

现在更新 banner-editor.tsx 处理 onImageMove 回调，并传递给 BannerCanvas：

现在把 onImageMove prop 传给两处 BannerCanvas：

最后在 editor-panel.tsx 里加入四种图片元素的上传/URL输入区块：

在 EditorPanel 函数体内，在「活动 logo」文字块之前加入四个图片区块：

同时更新 banner-editor.tsx 的 SECTION_LABELS 字典，加入新增的图片区块：

所有改动完成。本次更新在画布上增加了四类可拖拽图片层（产品图、活动LOGO图、店铺LOGO、赠品图1/2），每个图片元素通过 pointer capture 实现平滑拖拽和右下角拖拽缩放。右侧编辑面板顶部新增对应的图片上传区块，支持点击选取、拖拽放入文件、清除图片，以及通过数字输入框精确调整位置（左%/上%）和尺寸（宽%），所有位置变化在画布上实时同步。