👨‍💼 Headshot AI - 使用 AI 生成专业头像（由 Astria.ai 提供支持）

隆重推出 Headshot AI，这是一项来自 Astria 的开源项目，可在几分钟内生成专业的 AI 头像。

该项目旨在为开发者和创作者提供一个构建 AI 应用程序的良好起点。这是你的发射平台——克隆代码、修改它，并根据自己的需求进行定制，从而打造一款热门的 AI SaaS 应用。

即将到来的变更

即将合并的 PR 允许使用 Astria 的 packs API，这有助于避免在代码中硬编码提示词，并提供不同的提示词包，同时可以轻松切换到新的 Flux 模型微调。更多关于使用 packs 的优势，请参阅 Astria 的文档。

迁移到新的 packs API 时，请在 Vercel 环境中添加：

NEXT_PUBLIC_TUNE_TYPE=packs
PACK_QUERY_TYPE=both

这就是它的样子。

重要环境变量变更

注意： 为了保持代码库的一致性，环境变量 VERCEL_URL 已更名为 DEPLOYMENT_URL。如果您是从旧版本更新而来，请相应地更新您的环境变量。这一更改使应用程序更具平台无关性，并且在任何托管提供商上部署时都更加清晰，而不仅仅是 Vercel。

工作原理

实时演示 在这里。

该应用由以下技术驱动：

• 🚀 Astria 用于 AI 模型的训练与推理
• ▲ Next.js 用于应用和着陆页
• 🔋 Supabase 用于数据库与身份验证
• 📩 Resend（可选）用于在头像准备好时向用户发送电子邮件
• ⭐️ Shadcn 结合 Tailwind CSS 实现样式
• ▲ Vercel 用于部署
• 💳 Stripe 用于计费

本地运行

要创建您自己的 Headshot AI 应用程序，请按照以下步骤操作：

注意 模型训练仅适用于付费计划。您需要有效的 Astria API 密钥 才能训练模型。

1. Vercel 模板

要设置 Supabase/Vercel 和您的 GitHub 仓库，请点击 Vercel 部署按钮并按照步骤操作。

重要提示：在 Supabase 集成步骤中，请确保勾选“创建示例表”选项。此过程可能需要几分钟时间。

Vercel 部署将在您的 GitHub 账户上创建一个包含此模板的新仓库，并引导您完成新的 Supabase 项目创建。Supabase Vercel 部署集成会设置必要的 Supabase 环境变量，并运行 SQL 迁移以在您的账户上设置数据库模式。您可以在项目的表编辑器中查看已创建的表。

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

• credits
• images
• models
• samples

2. 克隆您新创建的仓库：

git clone {{your-repo-name}}

3. 进入您新创建的仓库目录：

cd {{your-repo-name}}

4. 安装依赖：

对于 npm：

npm install

对于 yarn：

yarn

5. 魔术链接认证（Supabase）

在你的 Supabase 控制台中，选择新创建的项目，进入“认证” -> “电子邮件模板” -> “魔术链接”，并将以下模板粘贴进去：

<h2>魔术链接</h2>
<p>请点击此链接登录：</p>
<p><a href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=email">登录</a></p>

然后，请确保在 Supabase 控制台的“认证” -> “URL 配置”中设置好你的站点 URL 和重定向 URL。

例如：

站点 URL：https://headshots-starter.vercel.app

重定向 URL：https://headshots-starter.vercel.app/**

6. 创建一个 Astria 账户

在你的 .env.local 文件中：

• 将 your_api_key 填写为你的 Astria API 密钥。
• 将 your-webhook-secret 填写为任意符合 URL 规则的字符串，例如 shadf892yr398hq23h。
• 将 your-deployment-url 填写为用于接收来自 Astria 的 Webhook 的 URL。这可以是你的 Vercel 部署 URL，或者本地的 Ngrok 隧道地址（例如 https://{your-hosted-url}/astria/train-webhook）。
• 将 your-blob-read-write-token 填写为你的 Vercel Blob 令牌（步骤见下文）。

如果生产环境中的 Webhook 回调似乎没有生效，请确认回调 URL 不是需要身份验证的 Vercel 特定分支部署，因为在这种情况下，你将无法在日志中看到回调信息。

7. 配置公告栏（可选）

要启用并自定义网站顶部的公告栏，请在你的 .env.local 中配置以下环境变量：

# 公告栏配置
NEXT_PUBLIC_ANNOUNCEMENT_ENABLED=true # 设置为 false 可禁用公告栏
NEXT_PUBLIC_ANNOUNCEMENT_MESSAGE="此处填写你的公告消息" # 要显示的消息

8. 配置 Vercel Blob 以支持图片上传

在你的 Vercel 项目中，创建一个 Blob 存储：

• 在 Vercel 控制台中，选择“存储”选项卡，然后点击“连接数据库”按钮。
• 在“新建”选项卡中，选择“Blob”，然后点击“继续”按钮。

接着，在 .env 文件中进行配置：

• 在 Vercel 控制台中，选择“设置”选项卡，然后选择“环境变量”选项卡。
• 将你的 BLOB_READ_WRITE_TOKEN 复制到 .env 文件中。

9. 创建一个 Resend 账户（可选）

• 如果你希望使用 Resend 向用户发送邮件通知其模型训练完成，请将 your-resend-api-key 填写为你的 Resend API 密钥。

10. 配置 Stripe 以按积分计费（可选）

当前的设置是基于积分的计费系统。1 积分 = 1 次模型训练。

要启用 Stripe 计费，你需要在 .env.local 文件中填写以下字段：

• STRIPE_SECRET_KEY=你的 Stripe 秘密密钥
• STRIPE_WEBHOOK_SECRET=你的 Stripe Webhook 密钥
• STRIPE_PRICE_ID_ONE_CREDIT=你的 Stripe 单次积分价格 ID
• STRIPE_PRICE_ID_THREE_CREDITS=你的 Stripe 三次积分价格 ID
• STRIPE_PRICE_ID_FIVE_CREDITS=你的 Stripe 五次积分价格 ID
• NEXT_PUBLIC_STRIPE_IS_ENABLED=false # 设置为 true 以启用 Stripe 支付

要使 Stripe 正常工作，你需要完成以下步骤：

• 从 Stripe 控制台获取你的 Stripe API 秘密密钥。
• 创建一个 Stripe Webhook，使其指向你的托管 URL。Webhook 应监听 checkout.session.completed 事件，并指向 your-hosted-url/stripe/subscription-webhook。
• 为每个你想要提供的积分套餐创建一个 Stripe 价格。
• 创建一个 Stripe 定价表，并将脚本 @/components/stripe/StripeTable.tsx 替换为你自己的值。代码应如下所示：

<stripe-pricing-table
  pricing-table-id="你的 Stripe 定价表 ID"
  publishable-key="你的 Stripe 公开密钥"
  client-reference-id={user.id}
  customer-email={user.email}
></stripe-pricing-table>

以下是使 Stripe 与我们的示例正常工作的所需产品，请查看 这里 的图片说明。

要创建这些产品，请登录 Stripe 控制台，搜索“产品目录”，然后点击屏幕右上角的“添加产品”按钮。你需要创建 3 个产品，分别对应每种积分套餐，如之前图片所示。我们将其设置为一次性支付，但你可以根据需要更改设置并调整价格。创建完产品后，务必更新 .env.local 文件中的变量 [your-stripe-price-id-one-credit、your-stripe-price-id-three-credit、your-stripe-price-id-five-credit] 为各自产品的价格 ID，每个价格 ID 都可以在产品页面底部找到。

11. 启动开发服务器：

对于 npm：

npm run dev

对于 yarn：

yarn dev

12. 在浏览器中访问 http://localhost:3000 查看运行中的应用。

一键部署

使用 Vercel 的默认部署：

如何获得优质结果

用于教会模型你面部外观的图像样本至关重要。输入垃圾，输出也是垃圾。

• 强制使用人脸特写，并考虑裁剪以使脸部居中。
• 确保每张图片中只包含一个人。
• 避免在样本中出现太阳镜、帽子等配饰。
• 确保面部清晰可见。（对于人脸检测，可以考虑使用诸如 Cloudinary API 之类的工具）。

如果你的结果出现多个人脸、重复主体、多余肢体等扭曲情况，请务必遵循以下步骤，以尽量减少此类问题的发生：

• 确保上传的所有样本都具有相同的 1:1 宽高比，例如 512x512、1024x1024 等。
• 避免在上传的样本中包含多人。
• 在生成时将“double torso, totem pole”添加到负面提示中。
• 确保生成时的尺寸也保持 1:1 的宽高比，与样本一致。

如需了解更多提升质量的方法，请阅读这篇博客文章：点击此处。

感谢所有贡献者：

其他应用场景

AI 头像可以轻松适配支持 Astria 的许多其他用例，包括：

• AI 头像
  • 动漫风格
  • 肖像画
  • 故事插画

• 宠物肖像

• 产品拍摄
• 食品摄影

• 图标
• 风格一致的素材

以及更多！

贡献方式

我们欢迎合作，并感谢您对 AI 头像项目的贡献。如果您有任何改进建议或重大变更想法，欢迎随时提交问题！

若想参与代码库的贡献，请务必创建新分支，并向 dev 分支发起拉取请求。

资源与支持

• 帮助邮箱：support@astria.ai

许可证

AI 头像项目采用 MIT 许可证 开源发布。

Headshot AI 快速上手指南

Headshot AI 是一个由 Astria 推出的开源项目，旨在帮助开发者在几分钟内生成专业的 AI 头像。该项目基于 Next.js、Supabase 和 Astria AI 构建，是打造 AI SaaS 应用的理想起点。

环境准备

在开始之前，请确保你已准备好以下环境和账号：

• 系统要求：Node.js (推荐 v18+)，npm 或 yarn。
• 代码托管：GitHub 账号。
• 核心服务账号：
  • Astria：用于 AI 模型训练与推理（注意：训练模型需要付费计划及 API Key）。
  • Supabase：用于数据库和用户认证。
  • Vercel：用于应用部署和对象存储 (Blob)。
• 可选服务：
  • Resend：用于发送完成通知邮件。
  • Stripe：用于处理信用额度支付。

安装步骤

1. 一键部署与初始化

点击下方的 Vercel 部署按钮，系统将自动在你的 GitHub 创建仓库，并引导你创建 Supabase 项目。

重要提示：在 Supabase 集成步骤中，务必勾选 "Create sample tables" 选项，以便自动创建 credits, images, models, samples 等数据表及策略。

2. 克隆项目

部署完成后，克隆你新生成的 GitHub 仓库到本地：

git clone {{your-repo-name}}
cd {{your-repo-name}}

3. 安装依赖

使用 npm 或 yarn 安装项目依赖：

# 使用 npm
npm install

# 或使用 yarn
yarn

4. 配置环境变量

在项目根目录创建 .env.local 文件，并根据以下步骤填充关键变量：

• Astria 配置：

  • ASTRIA_API_KEY: 从 Astria 后台 获取。
  • APP_WEBHOOK_SECRET: 自定义一个随机字符串（如 shadf892yr398hq23h）。
  • DEPLOYMENT_URL: 你的回调地址。本地开发可用 Ngrok 隧道地址，生产环境为 Vercel 域名（例如：https://{your-url}/astria/train-webhook）。
  • (可选) NEXT_PUBLIC_TUNE_TYPE=packs 和 PACK_QUERY_TYPE=both：若需使用 Astria 的 Packs API 功能。

• Vercel Blob 配置：

  1. 在 Vercel 控制台进入 Storage -> Connect Database -> 创建 Blob。
  2. 在 Settings -> Environment Variables 中找到 BLOB_READ_WRITE_TOKEN。
  3. 将其填入 .env.local 的 BLOB_READ_WRITE_TOKEN 字段。

• Supabase 认证配置：

  1. 登录 Supabase 控制台，进入 Authentication -> Email Templates -> Magic Link。
  2. 粘贴以下模板：

     <h2>Magic Link</h2>
     <p>Follow this link to login:</p>
     <p><a href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=email">Log In</a></p>
     

  3. 在 Authentication -> URL Configuration 中设置 Site URL 和 Redirect URLs（例如：https://your-app.vercel.app/**）。

• 其他可选配置：

  • Resend: 填入 RESEND_API_KEY 以启用邮件通知。
  • Stripe: 填入 STRIPE_SECRET_KEY, STRIPE_WEBHOOK_SECRET 及各档位 STRIPE_PRICE_ID 以启用支付，并将 NEXT_PUBLIC_STRIPE_IS_ENABLED 设为 true。
  • 公告栏: 设置 NEXT_PUBLIC_ANNOUNCEMENT_ENABLED=true 和 NEXT_PUBLIC_ANNOUNCEMENT_MESSAGE 可开启顶部公告。

基本使用

启动开发服务器

完成上述配置后，运行以下命令启动本地服务：

# 使用 npm
npm run dev

# 或使用 yarn
yarn dev

访问应用

打开浏览器访问 http://localhost:3000。

1. 登录：使用邮箱通过 Magic Link 登录。
2. 上传样本：上传多张个人照片作为训练样本。
3. 训练模型：提交训练请求（需确保 Astria 账户有可用额度）。
4. 生成头像：等待训练完成后，即可生成专业的 AI 头像。

注意：若在生产环境中 webhook 回调不生效，请检查回调 URL 是否指向了需要身份验证的 Vercel 预览分支部署，建议指向主生产域名。