Remove Background

A simple Next js app client side for running MODNet, tiny portrait background removal model, locally in the browser using Transformers.js and WebGPU-acceleration. This example is inspired by Xenova check his repo here

Added features :

Storig and Query Client side:-

• TinyBase store data and use TinyQL for search and query client side with the help of nextjs searchparams

UI accessible components:-

• react aria components components like Table, Modal, Dialog and more.
• shadcn/ui components like Select, Toaster and more.

Video for a demo

---

Persistence layer

TinyBase offer different persistence modules to store data in longer-term. for example to persist on indexeddb all you have to do is this in Provider.tsx

useCreatePersister(
  store,
  (store) => {
    return createIndexedDbPersister(store, "store");
  },
  [],
  async (persister) => {
    await persister?.startAutoLoad();
    await persister?.startAutoSave();
  }
);

Run it locally

git clone https://github.com/mouktardev/bg-remover-nextjs.git

cd /bg-remover-nextjs

npm i

npm run dev

The application should now be running locally. Open your browser make sure support graphics acceleration is on and go to http://localhost:3000 to see it in action.

find me on x @mouktardev or threads @mouktardev