headshots-starter - 隆重推出 Headshot AI，这是Leap AI的一个开源项目，可在几分钟内生成专业的 AI 头像。

Created at: 2023-09-06 07:16:02

Language: TypeScript

编号: https://github.com/leap-ai/headshots-starter

License: MIT

👨 💼 爆头 AI - 使用 AI 的专业爆头

介绍爆头AI，这是Leap AI的一个开源项目，可在几分钟内生成专业AI爆头。

工作原理

现场演示在这里。

该应用程序由以下人员提供支持：

🚀 用于 AI 模型训练的飞跃 AI
🚀 飞跃 AI 生成爆头
▲ 下一页.js应用和登陆页面
🔋 Supabase for DB & Auth
📩 当头像准备好时，重新发送（可选）给电子邮件用户
⭐️ Shadcn with Tailwind CSS for styles
▲ 用于部署的Vercel
💳 用于计费的条带

只需克隆、配置、部署，你就可以在一个盒子里拥有一个头像 AI SaaS。

本地运行

若要创建自己的头像 AI 应用，请执行以下步骤：

要设置 Supabase/Vercel 和你的 github 存储库，请单击 Vercel 部署按钮并按照步骤操作。

重要说明：在 Supabase 集成步骤中：确保选中“创建示例表”选项。这可能需要几分钟才能完成。

Vercel 部署将使用此模板在你的 GitHub 帐户上创建一个新的存储库，并指导你完成新的 Supabase 项目创建。Supabase Vercel Deploy Integration将设置必要的Supabase环境变量，并运行SQL迁移以在你的帐户上设置数据库架构。你可以在项目的表编辑器中检查创建的表。

这将创建具有各自列和 RLS 策略的表：

捐赠
图像
模型
样品

克隆新创建的存储库：

git clone {{your-repo-name}}

cd {{your-repo-name}}

安装依赖项：

对于 npm：
```
npm install
```
对于纱线：
```
yarn
```
魔术链接身份验证（Supabase）

在你的 supabase dashboard 中，确保正确更新魔术链接的电子邮件模板。你可以使用以下模板：

请确保在 supabase dashboard 中的“身份验证 -> URL 配置”下设置站点 URL 和重定向 URL。例如：网站网址：https://headshots-starter.vercel.app 重定向网址：https://headshots-starter.vercel.app/**

<h2>Magic Link</h2>
<p>Follow this link to login:</p>
<p><a href="https://github.com/leap-ai/headshots-starter/blob/master/{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=email">Log In</a></p>

创建一个飞跃AI帐户

在你的文件中：
```
.env.local
```
- 填写你的 Leap API 密钥
```
your_api_key
```
- 填写 https://{your-hosted-url}/leap/train-webhook
```
your-hosted-url/leap/train-webhook
```
- 填写 https://{your-hosted-url}/leap/image-webhook
```
your-hosted-url/leap/image-webhook
```
- 填写任意 URL 友好字符串，例如。
```
your-webhook-secret
```
```
shadf892yr398hq23h
```
创建重新发送帐户（可选）
- 如果你希望在模型完成训练后使用重新发送给电子邮件用户，请填写重新发送 API 密钥。
```
your-resend-api-key
```
将 Stripe 配置为按信用方式向用户收费。（可选）

当前设置适用于基于信用的系统。1 个捐赠 = 1 个模型火车。

要启用 Stripe 计费，你需要在文件中填写以下字段：
```
.env.local
```
- STRIPE_SECRET_KEY=你的条带密钥
- STRIPE_WEBHOOK_SECRET=你的条纹网络钩子秘密
- STRIPE_PRICE_ID_ONE_CREDIT=你的条纹价格 id-一个信用
- STRIPE_PRICE_ID_THREE_CREDITS=你的条纹价格 ID 三个信用
- STRIPE_PRICE_ID_FIVE_CREDITS=你的条纹价格 id-五信用
- NEXT_PUBLIC_STRIPE_IS_ENABLED=false # 设置为 true 以启用条纹支付
你需要做多件事才能让 Stripe 正常工作：
- 从条纹管理中心获取你的 Stripe API 私有密钥
- 创建一个指向你的托管网址的条纹网络钩子。网络钩子应该侦听事件。网络钩子应指向。
```
checkout.session.completed
```
```
your-hosted-url/stripe/subscription-webhook
```
- 为你要提供的每个积分套餐创建条纹价格。
- 创建一个条带定价表，并将脚本 @/components/stripe/StripeTable.tsx 替换为你自己的值。它应该看起来像这样：
```
<stripe-pricing-table
  pricing-table-id="your-stripe-pricing-table-id"
  publishable-key="your-stripe-publishable-key"
  client-reference-id={user.id}
  customer-email={user.email}
></stripe-pricing-table>
```
以下是你需要创建的产品，以使 Stripe 使用我们的示例，请查看图片这里

要创建它们，请在 Stripe 控制面板上搜索产品目录，然后单击屏幕右上角的添加产品按钮。你需要创建 3 个产品，每个信用包一个，如上图所示。我们将它们设置为一次性付款，但你可以根据需要进行更改，也可以设置价格。创建产品后，请确保将 .env.local 中的变量更新为 [你的条纹价格 id-一个信用、你的条纹价格 id-三信用、你的条纹价格 id-五信用] 中各自的价格 ID，每个价格 ID 都可以在底部的产品页面中找到。
启动开发服务器：

对于 npm：
```
npm run dev
```
对于纱线：
```
yarn dev
```
访问浏览器中以查看正在运行的应用程序。
```
http://localhost:3000
```