BackgroundRemover

screenshot of BackgroundRemover
svelte
vite

BackgroundRemover

Remove the background from your headshots!

Overview

The Background Remover is a SvelteKit app that utilizes Appwrite Cloud and Azure AI to remove the background from headshots and other images. It offers features such as background removal, user registration and guest login, image saving and sharing, and more.

Features

  • Removes background from your picture: The app uses Azure AI to remove the background from your uploaded headshots or images.
  • Register via email or login as guest: Users can create an account using their email or choose to login as a guest.
  • Saves images to your profile: Logged in users can save their processed images to their profile.
  • Allows viewing and sharing of picture links: Users can view and share links to their processed images with others.

Installation

To install and set up the Background Remover app, follow these steps:

  1. Azure AI:

    • Create an Azure account.
    • From the Azure Marketplace, create a Computer Vision resource.
    • Keep the endpoint and API key stored for later use.
  2. Appwrite Cloud:

    • Create an account on Appwrite Cloud or sign in if you already have one.
    • Create a project and add your web app URL.
      • This step is necessary for the reset password link functionality.
    • Create an API key with the following scopes: user.read, user.write, documents.read, documents.write, files.read, and files.write.
    • Store the project ID and API key for later use.
  3. Storage:

    • Create two buckets, one for input images and one for output images.
      • The input images bucket will contain images to be processed and will be deleted after processing.
      • The output images bucket will store images that have had their backgrounds removed.
    • Keep both bucket IDs stored for later use.
  4. Database:

    • Create a database with one collection containing the following attributes:
      • userId (string, size: 255, required)
      • fileId (string, size: 255, required)
    • Set the permissions as visible (see image).
    • Keep the database ID and collection ID stored for later use.
  5. Function:

    • Change the branch to appwrite-functions to find the Appwrite function for deleting accounts.
    • Update the project name and project ID in the appwrite.json file if they are different.
    • Deploy the function from the functions/Delete Account directory, following the configuration details in the function's Readme.
    • Set up the function's environment variables as mentioned in the function's Readme.
    • Keep the function ID stored for later use.
  6. Environment Variables:

    • Rename the .env.example file to .env.
    • Add all the necessary environment variables to the .env file.

Summary

The Background Remover app is a SvelteKit app that uses Appwrite Cloud and Azure AI for background removal from images. It offers features such as user registration, guest login, image saving and sharing, and utilizes Azure AI for background removal. The installation guide provides step-by-step instructions on setting up the app, including creating accounts, setting up storage and database, and deploying necessary functions.

svelte
Svelte

Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.

vite
Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.

vercel
Vercel

Vercel offers built-in support for deploying and hosting Next.js applications, making it a popular choice among Next.js developers.