AI
AI 模块集成,支持 Cloudflare Workers AI 和 fal.ai,提供文本生成、图片生成等功能
AI 模块通过 TanStack AI 和 Cloudflare Workers AI 提供端到端的 AI 能力,并与 TanStack AI 的 fal 适配器 (@tanstack/ai-fal) 深度集成,实现图片生成和图片编辑的能力。
设置
| 环境变量 | 描述 |
|---|---|
CLOUDFLARE_ACCOUNT_ID | Cloudflare 账户 ID,用于 Workers AI REST 调用 |
CLOUDFLARE_API_TOKEN | Cloudflare API 令牌,需具有 Workers AI > Read 权限 |
FAL_KEY | fal.ai API 密钥,用于图像生成,在 fal.ai 的 Dashboard 中创建 |
所有 Workers AI 调用均通过 REST API 进行,因此无须配置 Workers Binding,在 CI 等运行环境中同样可以运行。
如果您正在设置环境,现在可以回到环境配置文档并继续。本文档的其余部分可以稍后阅读。
环境配置
设置环境变量
技术栈
TanStack AI
服务优先的 AI 编排框架,支持流式输出和工具调用。
Cloudflare Workers AI
边缘 AI 推理平台,提供 Llama、Flux、Whisper 等模型。
fal.ai
高质量图像生成服务,包含 Gemini、Flux、GPT Image 2 等模型。
目录结构
src/api/
└── ai.ts # 8 个服务器函数 + 辅助函数
src/routes/(pages)/
└── ai.tsx # AI playground 页面
src/components/ai/
├── ai-summarization-card.tsx # 文本摘要 (BART)
├── ai-translation-card.tsx # 翻译 (m2m100, 10 种语言)
├── ai-tagline-card.tsx # 标语生成器 (Llama 3.1 chat)
├── ai-tts-card.tsx # 语音合成 (Deepgram Aura, 12 种音色)
├── ai-caption-card.tsx # 图像描述生成 (LLaVA)
├── ai-cf-image-card.tsx # 图像生成 · Workers AI (Flux / SDXL / DreamShaper)
├── ai-image-card.tsx # 图像生成 · fal.ai (Gemini / Flux / GPT Image 2)
└── ai-image-edit-card.tsx # 图像编辑 · fal.ai (头像风格化)AI 能力概览
AI 模块内置了以下开箱即用的 AI 功能,每个功能均提供独立的 UI 卡片组件:
文本处理
- 文本摘要 — 将长文章压缩为简洁摘要,输入 50–500 字符即可获得精炼概括。
- 文本翻译 — 支持 10 种语言之间的多语言互译,提供一键交换按钮快速切换源语言和目标语言。
- 标语生成器 — 输入产品描述,自动生成 5 条营销标语,适合快速产出品牌文案。

语音与图像理解
- 语音合成(TTS) — 将文本转为自然语音,提供 12 种可选音色(Asteria、Luna、Stella 等)。
- 图像描述生成 — 上传图片后自动生成描述文本,支持多种预设提示词风格(简短描述、详细描述、关键词提取等)。

图像生成与编辑
- 图像生成 · Workers AI — 通过 Cloudflare Workers AI 生成图像,支持多种风格模型(Flux、SDXL、DreamShaper)。
- 图像生成 · fal.ai — 通过 fal.ai 生成高质量图像,覆盖从快速廉价到高端逼真的多档模型。
- 头像风格化 — 上传人像照片,一键转换为多种风格(摇头娃娃、Pixar 3D、动漫头像等),同时保留人物特征。


TanStarter 文档