LogoTanStarter 文档
LogoTanStarter 文档
首页模板介绍代码库快速开始环境配置部署网站
网站配置

功能集成

Cloudflare数据库存储身份验证邮件
支付
AI邮件订阅通知分析聊天框联盟营销

功能定制

元数据页面落地页博客组件用户管理密钥管理

代码库

项目结构代码检查编辑器设置更新代码库
X (Twitter)

AI

AI 模块集成,支持 Cloudflare Workers AI 和 fal.ai,提供文本生成、图片生成等功能

AI 模块通过 TanStack AI 和 Cloudflare Workers AI 提供端到端的 AI 能力,并与 TanStack AI 的 fal 适配器 (@tanstack/ai-fal) 深度集成,实现图片生成和图片编辑的能力。

设置

环境变量描述
CLOUDFLARE_ACCOUNT_IDCloudflare 账户 ID,用于 Workers AI REST 调用
CLOUDFLARE_API_TOKENCloudflare API 令牌,需具有 Workers AI > Read 权限
FAL_KEYfal.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 条营销标语,适合快速产出品牌文案。

AI Text

语音与图像理解

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

AI Chat

图像生成与编辑

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

AI Image

AI Image

相关文档

环境配置

配置环境变量

Cloudflare

配置 Cloudflare API Token

部署

部署到 Cloudflare Workers

数据库

配置数据库

Creem

如何设置和使用 Creem 处理支付和订阅

邮件订阅

学习如何设置和使用 Resend 或 Beehiiv 进行邮件订阅管理

目录

设置
技术栈
目录结构
AI 能力概览
文本处理
语音与图像理解
图像生成与编辑
相关文档