nano-bananaAi生图神器

这个项目是一个的 AI 图像生成与订阅付费应用，提供从登陆、生成、到支付的完整闭环。核心点如下：

• ▸

  核心功能

  • ▸AI 图像生成：支持“文生图”和“图生图”，可选宽高比、上传参考图、预览与下载（见 src/pages/Landing.tsx、src/services/imageGeneration.ts）。
  • ▸账号与国际化：Supabase 登录（Google/GitHub 预留集成）、多语言切换与文案管理（见 src/integrations/supabase/、src/lib/i18n.ts、src/contexts/LanguageContext.tsx）。
  • ▸订阅与支付：定价页展示不同套餐，点击发起支付；后端 server.cjs 负责与 Creem 支付平台创建结账和处理 webhook（成功/取消页在 src/pages/PaymentSuccess.tsx、PaymentCancel.tsx，定价页在 src/pages/PricingPage.tsx）。
  • ▸积分与权限：前端用“积分/Pro开关”模拟用量与能力限制，未登录/积分不足会引导升级（CreditsModal.tsx、Landing.tsx 中的限制与提示）。
• ▸

  技术栈

  • ▸前端：React 18 + TypeScript + React Router + Tailwind + shadcn/ui 组件库 + TanStack Query。
  • ▸后端：Node/Express 轻服务（server.cjs）提供 Creem Checkout 接口与 webhook。
  • ▸第三方：Supabase（鉴权/数据预留）、Creem（支付订阅）。
• ▸

  支付流程

  • ▸前端在定价页选择方案 → 调用后端 /api/creem-checkout → 后端用 CREEM_API_KEY 调 Creem API 生成 checkout → 返回 checkoutUrl → 前端跳转支付 → 成功/取消回到应用。
  • ▸.env 中配置 Creem 测试或正式环境、webhook、以及可控制“模拟模式”。
• ▸

  适用场景

  • ▸想要快速搭建“AI 功能 + 订阅付费”应用的脚手架，能直接替换模型/服务，接入自己的 Creem 产品与 Supabase 项目即可上线。