Open-source template for "one photo → AI video that follows a viral template" SaaS sites, one site per trending keyword. Cloudflare Workers + D1/R2/KV/Queues, TanStack Start + Hono, Google sign-in, credit packs (Waffo/Dodo), fal.ai video generation, admin console.

ShrimpReel — 它是什么以及如何运作

ShrimpReel 是一个开源模板，用于构建 SaaS 网站，将一张照片转化为 AI 生成的视频，并跟随病毒式趋势（如舞蹈挑战）。其理念是：每个热门关键词都有自己专属的网站，每个网站都基于同一模板构建。您克隆仓库，更改配置、文案和媒体，即可获得一个准备上线的新网站。

一切运行在 Cloudflare 的基础设施上 — Workers（无服务器代码）、D1（数据库）、R2（对象存储）、KV（键值存储）、Queues、Rate Limiting 和 Cron Triggers。这意味着整个技术栈由 Cloudflare 管理，您无需自己的服务器。

核心概念

一张照片 → AI 视频：用户上传一张照片，网站生成一个遵循预定义模板的短视频（例如，在圣诞老人工作室里扮成精灵跳舞）。
按关键词建站：每个网站针对特定的病毒式关键词（例如，“圣诞舞蹈 AI”）。您从该模板创建新仓库，设置关键词，然后发布。
变现：用户付费购买积分（一次性套餐或订阅）以生成视频。支付由第三方提供商（Waffo Pancake、Dodo Payments 或 Stripe）处理。

技术栈（简化）

前端与服务器端渲染：TanStack Start (React 19) + Tailwind CSS 4。网站是双语的 — 英文在 /，中文在 /zh。
API：Hono（一个轻量级 Web 框架）处理所有 /api/* 路由、媒体、sitemap、robots.txt 等。
支付：默认是 Waffo Pancake（记录商户，意味着他们处理销售税）。Dodo Payments 是替代方案。也支持 Stripe，但您成为商户，必须自行处理税务。对于本地开发，mock 提供商模拟支付。
视频生成：默认使用 fal.ai 的队列 API。可选替代方案：yir.ai 路由器或 NanoAPI。本地测试使用 mock 提供商。

主要功能

用户与积分

Google 登录（包括 One Tap）。
积分套餐（一次性购买）和月度/年度订阅。
积分账本跟踪所有交易。
用户仪表板：查看视频、账单、设置、兑换码、邀请链接、账户删除和数据导出。

订单与生成

全额和部分退款，并收回积分。
生成队列，带有死信队列（用于失败的任务）。
如果生成失败，积分会自动退还。

增长与分析

首次和末次触点归因（UTM 参数、广告点击 ID）。
漏斗跟踪：访问 → 注册 → 结账 → 付费 → 生成。
在同意横幅后启用 GA4 事件。
视频的公开分享页面（每个视频可选，带链接预览）。

管理面板

概览仪表板（包括提供商成本和毛利率）。
管理用户、订单、生成、下架、联系消息、支付事件、电子邮件、审计日志、报告、兑换码、推荐排行榜、运行时设置和连接测试。
用户、订单和生成的详细视图，带有筛选和搜索。

电子邮件与通知

事务性电子邮件：积分添加、视频就绪、生成失败、退款、下架收据。
管理员收到新下架、截止日期提醒和联系消息的警报。
通过 Telegram、Feishu、Discord 等即时支付通知。

合规与安全

视频上的 AI 生成标签。
照片在 7 天后删除；视频在 30 天后删除。
下架请求在 48 小时队列中处理（删除所有由同一源照片制作的视频，并阻止该照片）。
上传审核和 Turnstile（CAPTCHA）在联系/报告表单上。

运营与安全

维护模式、结账暂停、支付提供商切换、全站公告、每日生成上限 — 均可从管理面板更改，无需重新部署。
健康检查警报电子邮件、每日 D1 备份到 R2、浏览器错误报告到 Workers Logs。
内容安全策略（CSP），带有每个请求的 nonce，以及 Permissions-Policy。

内容与 SEO

单页首页，包含部分：工作原理、是什么，以及可选的问题/DIY 块。
可扩展的文章集合（/guides 中心、相关文章）。
法律页面、联系表单。
SSR canonical、hreflang、JSON-LD、sitemap。
文案按语言环境进行代码分割（浏览器仅加载当前语言）。
npm run seo:check 检查整个网站的 SEO 问题。

本地开发

要在本地运行模板：

npm install
cp .dev.vars.example .dev.vars   # 至少设置 SESSION_SECRET
npm run seed:local               # 应用数据库迁移并将模板媒体上传到本地 R2
npm run dev -- --host 127.0.0.1  # http://127.0.0.1:3000

使用 npm 11.19 或更高版本。
默认情况下，PAYMENT_PROVIDER=mock 和 VIDEO_PROVIDER=mock — 无真实收费或生成。
在生产环境之外提供开发登录（POST /api/auth/dev-login）。
本地模拟电子邮件；通过 GET /api/dev/emails?to=<email>&ref=<order or takedown id> 检查发件箱。

启动新网站

README 提供了详细的 8 步流程。以下是要点：

创建网站仓库 — 克隆模板，将远程仓库重命名为 upstream，添加您自己的 origin。
运行脚手架 — node scripts/new-site.mjs 使用您的关键词、域名和其他设置更新 site.ts、wrangler.jsonc 和 package.json。
重写文案 — 编辑 src/content/en.ts 和 src/content/zh.ts 以匹配新趋势。不要只替换关键词 — Google 会惩罚规模化内容滥用。
替换媒体 — 上传您自己的模板视频、演示视频、徽标等。
在 wrangler.jsonc 中设置环境变量（网站 URL、支付提供商、管理员电子邮件等）。
使用您的支付提供商创建产品（积分套餐和订阅计划）。
本地验证 — 运行类型检查、测试、e2e 和 SEO 检查。
部署，然后将 sitemap 提交给搜索引擎。

还有一个 Claude Code 技能（new-hot-site），可自动化步骤 2–4 和步骤 7 的本地部分。

合并模板更新

由于每个网站都是跟踪模板作为 upstream 的独立仓库，您可以拉取修复和新功能：

git fetch upstream
git merge --no-ff upstream/main

同步计划脚本（scripts/sync-plan.mjs）有助于识别冲突。将特定于网站的更改保留在 src/config/site.ts、src/content/*、public/*、seed/、wrangler.jsonc 和 package.json 中 — 其他所有内容应与模板保持一致。

部署到 Cloudflare

您需要为每个网站创建所需的 Cloudflare 资源（D1 数据库、R2 存储桶、KV 命名空间、Queues），然后运行迁移并上传模板媒体。README 提供了确切的命令。

文档与说明

发布说明：CHANGELOG.md
功能计划：docs/SAAS_VIDEO_FEATURES.md、ROADMAP.md
SEO 规则：docs/SEO_AUDIT.md
环境变量：docs/env.md
支付提供商设置：docs/payments.md
订阅详情：docs/subscriptions.md
代码约定：AGENTS.md

大多数文档文件是中文的。

ShrimpReel 是一个完整、生产就绪的模板，处理从用户认证到视频生成、支付、管理和 SEO 的所有内容 — 全部在 Cloudflare 的免费层友好堆栈上。它旨在为每个新的病毒式趋势克隆和定制，以便您可以快速启动新网站。

qianshuixia/shrimpreel