Sketch 2 Live

Turn your hand-drawn sketches into stunning, realistic images in just moments using AI

Technologies used:

• Framework: Sveltekit
• UI: Skeleton & Tailwind Css
• Database: Cloudflare D1
• Storage: Cloudflare R2
• Hosting: Cloudflare Pages
• Canvas: Konva
• CLI: Wrangler
• Authentication: Lucia
• ORM: Drizzle
• Data validation: Zod
• Captcha: Turnstile
• Tests: Playwright

AI Models used:

• Image to Text: llava-1.5-7b-hf
• Text Generation: Meta-Llama-3.1-8B-Instruct
• Text to Image: Stable-diffusion-xl-base-1.0

Getting Started

1. Clone the Repository

git clone https://github.com/elfakiri2023/sketch2life.git
cd sketch2life

2. Install Dependencies

npm install

3. Configure Cloudflare

• Login:

  wrangler login

  Follow the prompts to log in to your Cloudflare account.

• Create Project

  wrangler pages project create sketch2life

  You can create a project via the Cloudflare dashboard or using the CLI.

• Create Database:

  wrangler d1 create sketch2life-db

  You can create a database via the Cloudflare dashboard or using the CLI.

• Create R2 Bucket:

  wrangler r2 bucket create sketch2life-bucket

  You can create a bucket via the Cloudflare dashboard or using the CLI.

4. Configure Wrangler

• Copy wrangler.toml.example to wrangler.toml and update it with your database name, ID, and R2 bucket name.

5. Generate Turnstile Keys

• Navigate to Turnstile section in your Cloudflare dashboard. Add your site and obtain the Site Key and Secret Key provided.

6. Configure Environment Variables

Modify the environment variables by copying .env.example to .env and updating it with necessary details

• TURNSTILE_SECRET_KEY Turnstile secret key
• PUBLIC_TURNSTILE_SITE_KEY Turnstile site key
• PUBLIC_BUCKET_URL The Bucket url used for displaying saved images (either a custom domain or the one provided with Cloudflare R2).
• CLOUDFLARE_ACCOUNT_ID Go to Workers & Pages -> Overview -> copy Account ID from the right sidebar.
• CLOUDFLARE_DATABASE_ID Open D1 database you want to connect to and copy Database ID.
• CLOUDFLARE_D1_TOKEN Go to My profile -> API Tokens and create token with D1 edit permissions.

7. Setup the Database

run

npm run db:gen

then run

npm run db:mig:local

and to view and edit the Database in your browser using Drizzle Studio, run

db:studio:dev

7. Local Development

To bind the D1 database and R2 bucket locally, run:

npm run proxy

In another command line window, run:

npm run dev

8. Deployment

For database migration to production, run

db:mig:prod

Then, deploy your project by running

npm run deploy