search

astriaai / headshots-starter

https://headshots-starter.vercel.app
MIT License
3.56k stars 575 forks source link

readme

👨‍💼 Headshot AI - Professional Headshots with AI (powered by Astria.ai)

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.

Deploy with Vercel

Headshot AI Demo

How It Works

Live demo here.

The app is powered by:

Headshot AI Explainer

Running Locally

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.

1. Vercel template

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.

Deploy with Vercel

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:

2. Clone your newly created repo:

git clone {{your-repo-name}}

3. Enter your newly created repo's directory:

cd {{your-repo-name}}

4. Install dependencies:

For npm:

npm install

For yarn:

yarn

5. Magic Link Auth (Supabase)

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="https://github.com/astriaai/headshots-starter/blob/main/{{ .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/**

6. Create a Astria account

In your .env.local file:

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.

7. Configure Vercel Blob for image uploads

In your Vercel project, create a Blob store

Then to configure in your .env:

8. Create a Resend account (Optional)

9. Configure Stripe to bill users on a credit basis. (Optional)

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:

<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>

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.

10. Start the development server:

For npm:

npm run dev

For yarn:

yarn dev

11. Visit http://localhost:3000 in your browser to see the running app.

One-Click Deploy

Default deploy using Vercel:

Deploy with Vercel

How To Get Good Results

Good results Demo

The image samples used to teach the model what your face looks like are critical. Garbage in = garbage out.

Avoid multiple faces

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.

All Thanks To Our Contributors:

Additional Use-Cases

Headshot AI can be easily adapted to support many other use-cases of Astria including:

Anime AI Demo

Pet AI Demo

Product AI Demo

Icons AI Demo

& more!

Contributing

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.

Resources and Support

License

Headshot AI is released under the MIT License.