A Professional AI headshot generator starter kit powered by Next.js, Leap AI, and Vercel.
Introducing Headshot AI, an open-source project from Astria that generates Professional AI Headshots in minutes.
This project was built to give developers & makers a great starting point into building AI applications. This is your launch pad - fork the code, modify it, and make it your own to build a popular AI SaaS app.
Incoming PR has been merged to allow usage of Astria's packs API which helps you avoid hardcoding prompts in your code as well as offering different packs of prompts, and switching to the new Flux model fine-tuning easily. Read more on advantage of using packs Astria's documentation.
When migrating to the new packs api, add to your vercel environment:
NEXT_PUBLIC_TUNE_TYPE=packsPACK_QUERY_TYPE=both
Here is how it looks
Live demo here.
The app is powered by:
To create your own Headshot AI app, follow these steps:
Note Training models is only available on paid plans. You'll need an active Astria API Key to train models.
To setup Supabase/Vercel and your github repo, click on the Vercel Deploy Button and follow the steps.
IMPORTANT: In the Supabase integration step: Make sure you leave the Create sample tables option checked. This might take a few minutes to complete.
The Vercel Deployment will create a new repository with this template on your GitHub account and guide you through a new Supabase project creation. The Supabase Vercel Deploy Integration will set up the necessary Supabase environment variables and run the SQL migrations to set up the Database schema on your account. You can inspect the created tables in your project's Table editor.
This will create the tables with their respective columns and RLS policies:
git clone {{your-repo-name}}
cd {{your-repo-name}}
For npm:
npm install
For yarn:
yarn
In your supabase dashboard, select newly created project, go to Authentication -> Email Templates -> Magic Link and paste the following template:
<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>
Then, make sure to setup your site URL and redirect urls in the supabase dashboard under Authentication -> URL Configuration.
For example:
Site URL: https://headshots-starter.vercel.app
Redirect URL: https://headshots-starter.vercel.app/**
In your .env.local
file:
your_api_key
with your Astria API keyyour-webhook-secret
with any arbitrary URL friendly string eg.shadf892yr398hq23h
your-vercel-url
with a url to catch webhooks from Astria. This will be your vercel deployment url or Ngrok tunnel locally (eg. https://{your-hosted-url}/astria/train-webhook)your-blob-read-write-token
with your Vercel Blob token (steps below)If your production webhook callbacks do not seem to be working, make sure the callback URL is not of a Vercel dedicated branch deployment which requires authentication, in which case you will not see the callback in the logs.
In your Vercel project, create a Blob store
Then to configure in your .env:
BLOB_READ_WRITE_TOKEN
to your .envyour-resend-api-key
with your Resend API Key if you wish to use Resend to email users when their model has finished training.The current setup is for a credit based system. 1 credit = 1 model train.
To enable Stripe billing, you will need to fill out the following fields in your .env.local
file:
You need to do multiple things to get Stripe working:
checkout.session.completed
event. The webhook should point to your-hosted-url/stripe/subscription-webhook
.
<stripe-pricing-tablepricing-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>
Here are the products you need to create to get Stripe working with our example, checkout the images Here
To create them go on the Stripe dashboard, search for Product Catalog and then click on the add product button on the top right of the screen. You will need to create 3 products, one for each credit package as shown in the images before. We set them to One time payments, but you can change that if you want to and you can set the price too. After creating the products make sure to update the variables in the .env.local [your-stripe-price-id-one-credit, your-stripe-price-id-three-credit, your-stripe-price-id-five-credit] with their respective price ids, each price id is found in the product page at the bottom.
For npm:
npm run dev
For yarn:
yarn dev
http://localhost:3000
in your browser to see the running app.Default deploy using Vercel:
[
The image samples used to teach the model what your face looks like are critical. Garbage in = garbage out.
If you get distorted results with multiple faces, repeated subjects, multiple limbs, etc, make sure to follow these steps and minimize the chance of this happening:
For more information on how to improve quality, read the blog here.
Headshot AI can be easily adapted to support many other use-cases of Astria including:
& more!
We welcome collaboration and appreciate your contribution to Headshot AI. If you have suggestions for improvement or significant changes in mind, feel free to open an issue!
If you want to contribute to the codebase make sure you create a new branch and open a pull request that points to dev
.
Headshot AI is released under the MIT License.
A Professional AI headshot generator starter kit powered by Next.js, Leap AI, and Vercel.
Introducing Headshot AI, an open-source project from Astria that generates Professional AI Headshots in minutes.
This project was built to give developers & makers a great starting point into building AI applications. This is your launch pad - fork the code, modify it, and make it your own to build a popular AI SaaS app.
Incoming PR has been merged to allow usage of Astria's packs API which helps you avoid hardcoding prompts in your code as well as offering different packs of prompts, and switching to the new Flux model fine-tuning easily. Read more on advantage of using packs Astria's documentation.
When migrating to the new packs api, add to your vercel environment:
NEXT_PUBLIC_TUNE_TYPE=packsPACK_QUERY_TYPE=both
Here is how it looks
Live demo here.
The app is powered by:
To create your own Headshot AI app, follow these steps:
Note Training models is only available on paid plans. You'll need an active Astria API Key to train models.
To setup Supabase/Vercel and your github repo, click on the Vercel Deploy Button and follow the steps.
IMPORTANT: In the Supabase integration step: Make sure you leave the Create sample tables option checked. This might take a few minutes to complete.
The Vercel Deployment will create a new repository with this template on your GitHub account and guide you through a new Supabase project creation. The Supabase Vercel Deploy Integration will set up the necessary Supabase environment variables and run the SQL migrations to set up the Database schema on your account. You can inspect the created tables in your project's Table editor.
This will create the tables with their respective columns and RLS policies:
git clone {{your-repo-name}}
cd {{your-repo-name}}
For npm:
npm install
For yarn:
yarn
In your supabase dashboard, select newly created project, go to Authentication -> Email Templates -> Magic Link and paste the following template:
<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>
Then, make sure to setup your site URL and redirect urls in the supabase dashboard under Authentication -> URL Configuration.
For example:
Site URL: https://headshots-starter.vercel.app
Redirect URL: https://headshots-starter.vercel.app/**
In your .env.local
file:
your_api_key
with your Astria API keyyour-webhook-secret
with any arbitrary URL friendly string eg.shadf892yr398hq23h
your-vercel-url
with a url to catch webhooks from Astria. This will be your vercel deployment url or Ngrok tunnel locally (eg. https://{your-hosted-url}/astria/train-webhook)your-blob-read-write-token
with your Vercel Blob token (steps below)If your production webhook callbacks do not seem to be working, make sure the callback URL is not of a Vercel dedicated branch deployment which requires authentication, in which case you will not see the callback in the logs.
In your Vercel project, create a Blob store
Then to configure in your .env:
BLOB_READ_WRITE_TOKEN
to your .envyour-resend-api-key
with your Resend API Key if you wish to use Resend to email users when their model has finished training.The current setup is for a credit based system. 1 credit = 1 model train.
To enable Stripe billing, you will need to fill out the following fields in your .env.local
file:
You need to do multiple things to get Stripe working:
checkout.session.completed
event. The webhook should point to your-hosted-url/stripe/subscription-webhook
.
<stripe-pricing-tablepricing-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>
Here are the products you need to create to get Stripe working with our example, checkout the images Here
To create them go on the Stripe dashboard, search for Product Catalog and then click on the add product button on the top right of the screen. You will need to create 3 products, one for each credit package as shown in the images before. We set them to One time payments, but you can change that if you want to and you can set the price too. After creating the products make sure to update the variables in the .env.local [your-stripe-price-id-one-credit, your-stripe-price-id-three-credit, your-stripe-price-id-five-credit] with their respective price ids, each price id is found in the product page at the bottom.
For npm:
npm run dev
For yarn:
yarn dev
http://localhost:3000
in your browser to see the running app.Default deploy using Vercel:
[
The image samples used to teach the model what your face looks like are critical. Garbage in = garbage out.
If you get distorted results with multiple faces, repeated subjects, multiple limbs, etc, make sure to follow these steps and minimize the chance of this happening:
For more information on how to improve quality, read the blog here.
Headshot AI can be easily adapted to support many other use-cases of Astria including:
& more!
We welcome collaboration and appreciate your contribution to Headshot AI. If you have suggestions for improvement or significant changes in mind, feel free to open an issue!
If you want to contribute to the codebase make sure you create a new branch and open a pull request that points to dev
.
Headshot AI is released under the MIT License.