Headshot Generator Tool

Introduction

The AI Headshot Generator is a powerful tool designed to create high-quality AI-generated headshots using user-defined prompts. You can first fine tune a custom model with your own images and generate headshot in context to the trained model.

Quickstart Guide

Installation

Clone the repository:
terminal
```
git clone https://github.com/1811-Labs-LLC/BuilderKit-Pro.git [YOUR_APP_NAME]
 
cd [YOUR_APP_NAME]
 
git checkout headshot-generator
```
Remove the origin remote to ensure that you can work locally without pushing the changes back to the original repository.
terminal
```
git remote remove origin
```
However, note that after removing the remote, you won't be able to switch between the branches, so you'll need to clone the repository again if you want to work on another branch.
Install dependencies:
terminal
```
npm install
```

Environment Variables:

Copy the required variables from .env.example to .env.local as mentioned and update the values.

terminal

cp .env.example .env.local

Or, manually create a .env.local file in the root directory with the following env variables (make sure to update the values with your actual keys):

.env.local

# Host
NEXT_PUBLIC_APP_URL=<your-app-url>
 
# Supabase
NEXT_PUBLIC_SUPABASE_URL=<your-supabase-url>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<your-supabase-anon-key>
 
# Astria
ASTRIA_API_KEY=<your-astria-api-key>
 
# Google Analytics
NEXT_PUBLIC_GOOGLE_ANALYTICS_KEY=<your-google-analytics-key>

Setup Supabase

If you have not setup the supabase yet, go through the detailed documentation to set up the supabase for BuilderKit.ai. Make sure that you are creating the user table as mentioned in the supabase setup doc as it is required for the tool.

Create Headshot Model, and Headshot Generation Table in Supabase:

The Headshot Model table stores the fine tuned models, and the Headshot Generation table stores the generated images.**

sql

-- Create a table for AI Headshot Generation
 
-- Enum Type for Model Status
create type headshotmodelstatus as enum ('processing', 'finished');
 
-- Models Table
create table headshot_models (
   id uuid not null default uuid_generate_v4 (),
   created_at timestamp with time zone not null default now(),
   user_id uuid not null,
   model_id text not null,
   name text not null,
   type text not null,
   images text[] not null,
   eta timestamp with time zone not null,
   trained_at timestamp with time zone null,
   expires_at timestamp with time zone null,
   status headshotmodelstatus not null default 'processing'::headshotmodelstatus,
   constraint headshot_models_pkey primary key (id),
   constraint headshot_models_model_id_key unique (model_id),
   constraint headshot_models_user_id_fkey foreign key (user_id) references users (id)
);
 
-- Set up Row Level Security (RLS)
alter table headshot_models
enable row level security;
 
create policy "Users can insert their own row." on headshot_models
for insert with check (auth.uid() = user_id);
 
create policy "Users can update own row" on headshot_models
for update using (auth.uid() = user_id);
 
create policy "Users can read own row" on headshot_models
for select using (auth.uid() = user_id);
 
-- Optional: Add policy to allow users to delete their own headshot_models
create policy "Users can delete own row" on headshot_models
for delete using (auth.uid() = user_id);
 
-- -- -- -- -- --
 
-- Generations Table
create table headshot_generations (
   id uuid not null default uuid_generate_v4 (),
   created_at timestamp with time zone not null default now(),
   user_id uuid not null,
   model_id text not null,
   generation_id text not null,
   prompt text not null,
   negative_prompt text null,
   image_urls text[] null,
   constraint headshot_generations_pkey primary key (id),
   constraint headshot_generations_user_id_fkey foreign key (user_id) references users (id),
   constraint headshot_generations_model_id_fkey foreign key (model_id) references headshot_models (model_id) on delete cascade
);
 
-- Set up Row Level Security (RLS)
alter table headshot_generations
enable row level security;
 
create policy "Users can insert their own row." on headshot_generations
for insert with check (auth.uid() = user_id);
 
create policy "Users can update own row" on headshot_generations
for update using (auth.uid() = user_id);
 
create policy "Users can read own row" on headshot_generations
for select using (auth.uid() = user_id);
 
 -- Optional: Add policy to allow users to delete their headshot generations
create policy "Users can delete own row" on headshot_generations
for delete using (auth.uid() = user_id);
 
-- Enable Realtime
alter publication supabase_realtime add table headshot_generations;

For Headshot Generation table, we are enabling Supabase Realtime (last line of the script)

We are also creating enum for model status (first line of the script)

For all the tables, we enable the RLS policy by default with necessary permissions as mentioned in the script.

Sync Supabase Types:

To sync the supabase table schema with your project follow the steps here.

Running the Application

Run the development server:
terminal
```
npm run dev
```
This will start the development server on http://localhost:3000 (opens in a new tab).
Build for production:
terminal
```
npm run build
```
This command compiles the application for production usage.
Start the production server:
terminal
```
npm start
```
This will start the application in production mode.

Additional Scripts

Prepare Husky for Git hooks:
terminal
```
npm run prepare
```
Validate the code with Linting, Formatting & Typecheck:
terminal
```
npm run validate
```

Creating a Public URL for Local Webhook Testing

This app uses a webhook to handle responses from the AI server. Since the server cannot recognize a localhost URL (http://localhost:3000 (opens in a new tab)), we need to set up a tunnel to create a public URL that can accept webhook requests from the server and redirect them to your localhost URL for testing purposes.

We will use ngrok (opens in a new tab) to create this tunnel. The public URL generated by ngrok will redirect all external requests to your configured localhost URL. Follow the steps to set up ngrok and create the public URL here: https://ngrok.com/docs/getting-started (opens in a new tab).

Once ngrok is set up, test your project using the ngrok public URL instead of http://localhost:3000 (opens in a new tab).

Requirements

Node.js: Download and install from here (opens in a new tab).
Supabase: Check out Supabase Setup Documentation to get all the required details.
Astria API Key: Get your api key by creating an account on Astria (opens in a new tab).

Voice Transcription Image Generator