Draw to Life

Draw to Life is an AI-powered drawing application that can turn your sketches into realistic images. You can draw directly on the canvas and download the result image. Check out the live demo HERE.

Technologies used

• React
• Tailwind CSS
• Framer Motion
• Express
• Node
• Cloudinary

How it works

Draw to Life uses a ControlNet model hosted on Replicate to generate refined images using drawings as a template and a text prompt. The app allows you to draw directly on the canvas and sends the image to the model through an Express Route using the Replicate API.

Running locally

Get your Cloudinary API Keys

To get started, you will need a Cloudinary account and API keys. Follow these steps to retrieve your keys:

1. Go to Cloudinary and create an account.
2. Go to "Dashboard" and copy your Cloud Name, API Key, and API Secret.

Get your Replicate API key

Next, you will need to sign up for a Replicate account and obtain an API key. Follow these steps to retrieve your key:

1. Create an account on Replicate.
2. Go to "Account" in the navbar.
3. Copy your API token.

Set the .env file

After obtaining your keys, create a .env file in the root of the server directory and set your keys as shown here:

CLOUDINARY_CLOUD_NAME="YOUR_CLOUDINARY_CLOUD_NAME_HERE"
CLOUDINARY_API_KEY="YOUR_CLOUDINARY_API_KEY_HERE"
CLOUDINARY_API_SECRET="YOUR_CLOUDINARY_API_SECRET_HERE"
REPLICATE_API_TOKEN="YOUR_REPLICATE_API_TOKEN_HERE"

Install dependencies in both client and server folders

Run the following command to install the necessary dependencies in both the client and server folders:

  npm install

Start the server (available at http://localhost:5000)

Run the following command to start the server:

  npm start

Start the client (available at http://localhost:5173)

Run the following command to start the client:

  npm run dev