Remove-bg

Screenshots

Problem Statement

A simple React + Vite application designed for running MODNet, a lightweight portrait background removal model, entirely in the browser. This solution leverages Transformers.js for seamless integration of machine learning models, while utilizing WebGPU acceleration to ensure smooth performance. Additionally, Basin is integrated to securely store and retrieve processed images on-chain, providing a decentralized solution for managing image data. This combination allows for a highly efficient, privacy-focused, and scalable application, fully powered by modern web technologies.

Solution

Getting StartedFollow the steps below to set up and run the application (both frontend and backend).PrerequisitesNode.js: Make sure you have Node.js installed on your machine. You can download it fromhere.ADM (Basin): Follow theBasin setup guideto ensure Basin is running and configured on your machine.0. Setup BasinEnsure that you haveBasinproperly set up by followingthis guide. Once Basin is running, verify that ADM commands can be executed on your machine.1. Clone the RepositoryClone the repository from GitHub:git clone https://github.com/0xgoldenlion/basin-remove-bg.git2. Navigate to the Project DirectoryChange your working directory to thebasin-remove-bgfolder:cd basin-remove-bg3. Install DependenciesInstall the necessary dependencies for the frontend using npm:npm install4. Setup Backend (Node.js) for ADM IntegrationWe need a backend to handle file uploads and interact with ADM.4.1. Create a.envfilerename thetemplate.envfile in the project root to store your environment variables (Network and Private Key for ADM):In your.envfile, add the following:NETWORK=localnet PRIVATE_KEY=your_private_key_here ADMADDRESS=adress_here ADMKEY= key_hereReplaceyour_private_key_herewith your actual private key for ADM transactions.4.2. Install Backend DependenciesNavigate to thebackenddirectory and install the necessary backend dependencies:cd backend npm install4.3. Run the Backend ServerStart the backend server, which will handle file uploads and interactions with ADM:node server.jsThe backend server will be running onhttp://localhost:5555.5. Run the Frontend Development ServerNow that the backend is running, return to the main project directory (frontend) and start the development server:npm run devThe application should now be running locally. Open your browser and go tohttp://localhost:3511to see it in action.6. Test the WorkflowUpload Images: Drag and drop images into the interface.Process: Click "Process" to remove the background and upload the image to ADM using the backend.Download: After processing, you can download the images back from ADM through the backend.7. Additional NotesBasin Integration: Make sure ADM is set up and running before processing and uploading images. All files are stored on-chain using ADM via Basin.GPU Acceleration: The application leverages WebGPU for faster processing, but make sure your browser supports WebGPU.