AI Image Upscaler & Enhancer

Introduction

This tool halep you to upscale or enhance the quality of your image. Just select your image and run the generation. It uses Replicate for the process and send the response as an webhook request. You can fine tune the prompt as per your requirement.

Quickstart Guide

Installation

git clone https://github.com/1811-Labs-LLC/BuilderKit-Pro.git [YOUR_APP_NAME]
 
cd [YOUR_APP_NAME]
 
git checkout image-enhancer-upscaler

Remove the origin remote to ensure that you can work locally without pushing the changes back to the original repository.

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.

2. Install dependencies:

   terminal

   npm install

3. 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>
   SUPABASE_SERVICE_ROLE_KEY=<your-supabase-service-role-key>
    
   # Replicate
   REPLICATE_API_TOKEN=<your-replicate-api-key>
    
   # Google Analytics
   NEXT_PUBLIC_GOOGLE_ANALYTICS_KEY=<your-google-analytics-key>

Setup Supabase

1. Create Image Enhancer & Upscaler Table in Supabase:

   sql

   -- Create a table for AI Image Enhancer & Upscaler
   create table image_enhancer_upscaler (
      id uuid not null default uuid_generate_v4 (),
      created_at timestamp with time zone not null default now(),
      user_id uuid not null,
      input_image text not null,
      output_image text null,
      type text not null,
      prediction_id text not null,
      error text null,
      constraint image_enhancer_upscaler_pkey primary key (id),
      constraint image_enhancer_upscaler_user_id_fkey foreign key (user_id) references users (id)
   );
    
   -- Set up Row Level Security (RLS)
   alter table image_enhancer_upscaler
   enable row level security;
    
   create policy "Users can insert their own row." on image_enhancer_upscaler
   for insert with check (auth.uid() = user_id);
    
   create policy "Users can update own row" on image_enhancer_upscaler
   for update using (auth.uid() = user_id);
    
   create policy "Users can read own row" on image_enhancer_upscaler
   for select using (auth.uid() = user_id);
    
   -- Enable Realtime
   alter publication supabase_realtime add table image_enhancer_upscaler;

   • For this tool, we are enabling Supabase Realtime (last line of the script)
   • For all the tables, we enable the RLS policy by default with necessary permissions as mentioned in the script.

2. Sync Supabase Types:

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

Running the Application

1. Run the development server:

   terminal

   npm run dev

   This will start the development server on http://localhost:3000 (opens in a new tab).

2. Build for production:

   terminal

   npm run build

   This command compiles the application for production usage.

3. 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.
• Replicate API Key: Create an account on Replicate (opens in a new tab) to get the api token.