A web application that enables users to remove the background of an image and craft attractive profile pictures for social media platforms + other image editor demos.
Tip
Kindly read this comprehensive tutorial to learn how to build editing apps using IMGLY’s CE.SDK Engine.
- Apps
- Features and Todos
- Important Files and Folders
- Getting Started
- Repo Stats Summary
- Contributors Guide
- License
There are three apps in this project, namely:
- Remove Image Background (
/bg-remove): can be accessed with this live link (doesn't require a license). - Add Image Background Color (
/bg-add): can be tested only in development using the demo license. - General Design Editor (
/editor): can be tested only in development using the demo license.
- Remove the background from an image (try it live).
- The above uses the ONNX model and WASM files hosted by IMG.LY.
- Add background color options to a transparent image.
- Create and edit designs with a Canva-like editor.
- Authentication and protected pages.
- Show download progress (background removal).
- Add background-removal plugin to the editor.
| Path | Description |
|---|---|
.env.example |
Example file with all the required environment variables. |
/app/auth |
/auth/sign-in and auth/sign-up authentication pages. |
/app/bg-add/page.tsx |
Page for the background removal app. |
/app/bg-remove/page.tsx |
Page for the background color add app. |
/app/editor/page.tsx |
Page for the general design editor app. |
/app/start/page.tsx |
Page for the start page (select app). |
/app/components/editorCanvas.tsx |
React component for the /editor page. |
/app/components/headshotCanvas.tsx |
React component for the /bg-add page. |
/app/layout.tsx |
Shared UI for fonts and metadata configuration. |
/app/page.tsx |
Home page (/). |
/utils/grid.ts |
Utility file for the grid layout options. |
middleware.ts |
Handle protected pages before processing all requests. |
To run this application locally, kindly follow the steps below:
-
Rename the
.env.examplefile to.env.localand fill in the required environment variables (leave the pre-filled ones as they are). -
Install all required dependencies with the
npm installcommand (or useyarn/pnpm). -
Run the development server with the
npm run devcommand. -
Open
http://localhost:3000with your browser to see the result. -
All good! You can start modifying any page and the app will auto-update.
-
Fork this repository (learn how to do this here).
-
Clone the forked repository like so:
git clone https://github.com/<your username>/attraktives-headshot.git && cd attraktives-headshot-
Make your changes and create a pull request (learn how to do this).
-
I'll attend to your pull request soon and provide some feedback.
This repository is published under the MIT license.
