Achtergrond van afbeeldingen verwijderen direct in de browser zonder servers en abonnementen

Elke keer dat je snel de achtergrond van een foto moet verwijderen voor een persoonlijk project, productkaart of avatar, begint dezelfde zoektocht. Populaire online diensten zoals Remove.bg eisen een betaald abonnement na drie downloads, comprimeren de afbeelding tot de grootte van een postzegel, of vereisen Google-autorisatie. Bovendien wil je niet altijd persoonlijke foto's of werk-mockups naar servers van derden sturen.

Onlangs kwam ik de cut-it-out repository tegen van ontwikkelaar Suvink. Het is een open-source tool die hetzelfde doet, maar direct in de browser op de machine van de gebruiker. Geen backends, geen wachtrijen, en nul kosten voor infrastructuur van derden.

Wat er onder de motorkap zit

Het hoogtepunt van het project is dat alle berekeningen aan de clientzijde plaatsvinden. De repository maakt gebruik van de @imgly/background-removal bibliotheek, die het U2-Net neurale netwerkmodel laadt via ONNX Runtime in WebAssembly (WASM).

Waar het draaien van inferentie voor segmentatienetwerken voorheen een server met Python, PyTorch en minimaal een bescheiden GPU vereiste, kan nu de WASM + WebGL/WebGPU stack het aan in een Chrome- of Firefox-tabblad.

Wanneer je de pagina voor het eerst opent, downloadt de browser de modelgewichten, cachet ze, en verwerkt vervolgens inkomende bestanden lokaal. Er gaat geen data ergens naartoe. Je kunt je laptop loskoppelen van het internet, een afbeelding naar het venster slepen, en het masker wordt nog steeds binnen een paar seconden gegenereerd.

Tools voor handmatige verfijning

Neurale netwerken maken vaak fouten bij complexe randen. Fijn haar, transparant glas, of een semi-vertekende achtergrond verandert vaak in gekartelde randen. De makers van CutItOut hebben zich niet beperkt tot een enkele "Achtergrond verwijderen" knop en hebben verschillende nuttige handmatige correctietools toegevoegd:

• Magic Brush. Selecteert aangrenzende pixels op kleurgelijkenis, wat helpt om snel een lastig achtergebleven stukje van de achtergrond te wissen.
• Herstelmodus met een semi-transparante laag (Ghost overlay). Wanneer het neurale netwerk te veel heeft uitgesneden, is het moeilijk om blindelings het benodigde fragment te herstellen. Hier wordt het origineel gemarkeerd met een zachte omtrek, zodat je precies kunt zien waar je moet borstelen.
• Canvas navigatie. Er is in- en uitzoomen en pannen om netjes kleine details op hoge resolutie op te ruimen.
• Verliesvrije export. Het voltooide resultaat wordt geleverd als PNG met een transparant alfakanaal in de oorspronkelijke resolutie, zonder watermerken of wachttijden.

Hoe je het project zelf kunt deployen

De codebase is geschreven in TypeScript en bouwt met standaard frontend tooling. Om het project lokaal te draaien of als basis voor je eigen dienst te gebruiken, heb je Node.js 18+ en npm 9+ nodig.

Clone de repository en navigeer naar de map:

git clone https://github.com/Suvink/cut-it-out.git
cd cut-it-out

Installeer de dependencies:

npm install

Start de lokale ontwikkelserver:

npm run dev

Vite zal de app starten op http://localhost:5173.

Als je de app zelf wilt deployen, bouwt het project naar statische bestanden met een enkele opdracht:

npm run build

Alle voltooide bestanden komen in de dist map. Omdat het project helemaal geen backend nodig heeft, kun je deze bestanden uploaden naar elke gratis statische hosting zoals Vercel, Netlify, of GitHub Pages. Geen Docker-containers, omgevingsvariabelen met API-sleutels, of Celery-wachtrijconfiguraties om in te stellen.

Waarom dit project nuttig is voor ontwikkelaars

CutItOut's code is interessant vanuit twee perspectieven.

Ten eerste is het een handige kant-en-klare utility voor persoonlijk gebruik. Je kunt het draaien op een thuisserver of als bladwijzer bewaren om betaalde commerciële alternatieven te vermijden wanneer je een paar dozijn afbeeldingen moet voorbereiden.

Ten tweede is het project een geweldige illustratie van de edge computing-benadering in frontend. Als je een app bouwt waar gebruikers avatars of productfoto's uploaden, verplaats je segmentatie naar de client en bespaar je een aanzienlijk bedrag. In plaats van te betalen voor cloud GPU-instanties, verplaats je het werk naar de CPU van de gebruiker. In de repository kun je zien hoe de auteur canvas-werk, schaling en integratie van de WASM-bibliotheek in de interface heeft georganiseerd.

CutItOut is een clean en eerlijk project onder de Apache 2.0-licentie. Het lost een specifiek dagelijks probleem op en demonstreert duidelijk hoe ver de mogelijkheden van machine learning in de browser zijn gekomen. Het project heeft nog niet veel sterren, maar de code is clean, begrijpelijk en gemakkelijk aanpasbaar aan je eigen taken.