Background Remover

Description

Background Remover is a SvelteKit app that uses Appwrite Cloud and Azure AI to remove the background from your headshots (and other images).

Features

• Removes background from your picture
• Register via email or login as guest
• Saves images to your profile (for logged in users)
• Allows viewing (and sharing) of picture links (for logged in users)

Setup

There are some necessary steps to get the project up and running.

Azure AI

• Create an Azure account
• Create a Computer Vision resource from the Azure Marketplace.

Keep the endpoint and API key stored with you for later.

Appwrite Cloud

Project

• Create an account on Appwrite Cloud (or sign in if you have one)
• Create a project and add your web app (URL)
  • Adding the exact URL is necessary for the reset password link functionality
• Create an API key with user.read, user.write, documents.read, documents.write, files.read, and files.write scopes

Keep the project ID and API key stored with you for later.

Storage

• Create two buckets, one for input images and one for output images

	Input Images Bucket	Output Images Bucket
Purpose	Contains images to be processed, have their backgrounds removed, and get deleted after	Contains images that have had their backgrounds removed
Id	input	output
Permissions

Keep both your bucket Ids stored with you for later.

Database

• Create a database with one collection, containing the following attributes

Key	Type	Size	Required
userId	string	255	Yes
fileId	string	255	Yes

• Set the permissions as visible in the image

Keep the database Id and collection Id stored with you for later.

Function

• Change the branch (Git) to appwrite-functions to find the Appwrite function that helps in deleting accounts
• Update the project name and project id in the appwrite.json file, if you kept them different
• Deploy the function from the functions/Delete Account directory, following the configuration details in the function's Readme
• Setup the function's environment variables as mentioned in the function's Readme

Keep the function Id stored with you for later.

Environment variables

Rename the .env.example file to .env and add all the necessary environment variables.

• VITE_APP_URL: URL of the app with protocol (e.g.: https://bgremover.in)
• PUBLIC_APPWRITE_COLLECTION_ID: Collection Id from Appwrite
• PUBLIC_APPWRITE_DATABASE_ID: Database Id from Appwrite
• PUBLIC_APPWRITE_PROJECT_ID: Project Id from Appwrite
• PUBLIC_APPWRITE_OUTPUT_IMAGES_BUCKET_ID: Output images bucket Id from Appwrite
• PUBLIC_APPWRITE_INPUT_IMAGES_BUCKET_ID: Input images bucket Id from Appwrite
• PUBLIC_APPWRITE_DELETE_ACCOUNT_FUNCTION_ID: Delete account function Id from Appwrite
• SECRET_VISION_ENDPOINT: Azure AI Vision endpoint
• SECRET_VISION_KEY: Azure AI Vision API Key

Deployment

Vercel

The svelte.config.js file is currently configured for Vercel since that is where the application is deployed and a custom timeout is configured for server actions.

Other PaaS platforms (Cloudflare, Azure, etc.)

• Install @sveltejs/adapter-auto using npm/pnpm/yarn
• Replace all the code in the svelte.config.js file with the following:

import adapter from '@sveltejs/adapter-auto';
import { preprocessMeltUI } from '@melt-ui/pp';
import { vitePreprocess } from '@sveltejs/kit/vite';
import sequence from 'svelte-sequential-preprocessor';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: sequence([vitePreprocess(), preprocessMeltUI()])
};

export default config;

After deploying, make sure to update the final URL in the VITE_APP_URL environment variable