| | --- |
| | title: Remove Background WebGPU |
| | emoji: 🖼️ |
| | colorFrom: purple |
| | colorTo: indigo |
| | sdk: static |
| | pinned: false |
| | license: apache-2.0 |
| | models: |
| | - Xenova/modnet |
| | short_description: In-browser image background removal |
| | thumbnail: https://huggingface.co/spaces/webml-community/remove-background-webgpu/resolve/main/banner.jpg |
| | --- |
| | |
| | # Remove Background WebGPU |
| |
|
| | A simple React + Vite application for running [MODNet](https://huggingface.co/Xenova/modnet), a tiny portrait background removal model, locally in the browser using Transformers.js and WebGPU-acceleration. |
| |
|
| | ## Getting Started |
| |
|
| | Follow the steps below to set up and run the application. |
| |
|
| | ### 1. Clone the Repository |
| |
|
| | Clone the examples repository from GitHub: |
| |
|
| | ```sh |
| | git clone https://github.com/huggingface/transformers.js-examples.git |
| | ``` |
| |
|
| | ### 2. Navigate to the Project Directory |
| |
|
| | Change your working directory to the `remove-background-webgpu` folder: |
| |
|
| | ```sh |
| | cd transformers.js-examples/remove-background-webgpu |
| | ``` |
| |
|
| | ### 3. Install Dependencies |
| |
|
| | Install the necessary dependencies using npm: |
| |
|
| | ```sh |
| | npm i |
| | ``` |
| |
|
| | ### 4. Run the Development Server |
| |
|
| | Start the development server: |
| |
|
| | ```sh |
| | npm run dev |
| | ``` |
| |
|
| | The application should now be running locally. Open your browser and go to `http://localhost:5173` to see it in action. |
| |
|
