Come rimuovere lo sfondo dalle immagini direttamente nel browser senza server e abbonamenti

Ogni volta che hai bisogno di rimuovere rapidamente lo sfondo da una foto per un progetto personale, una scheda prodotto o un avatar, inizia la stessa ricerca. I servizi online popolari come Remove.bg richiedono un abbonamento a pagamento dopo tre download, comprimono l'immagine alle dimensioni di un francobollo, o richiedono l'autorizzazione Google. Inoltre, non sempre vuoi inviare foto personali o mockup di lavoro a server di terze parti.

Recentemente ho scoperto il repository cut-it-out dello sviluppatore Suvink. È uno strumento open-source che fa la stessa cosa, ma direttamente nel browser sulla macchina dell'utente. Nessun backend, nessuna coda e costi zero per l'infrastruttura di terze parti.

Cosa c'è sotto il cofano

Il punto forte principale del progetto è che tutti i calcoli avvengono lato client. Il repository usa la libreria @imgly/background-removal, che carica il modello di rete neurale U2-Net tramite ONNX Runtime in WebAssembly (WASM).

Se prima eseguire l'inferenza per le reti di segmentazione richiedeva un server con Python, PyTorch e almeno una modesta GPU, ora lo stack WASM + WebGL/WebGPU gestisce tutto direttamente in una scheda di Chrome o Firefox.

Quando apri la pagina per la prima volta, il browser scarica i pesi del modello, li memorizza nella cache e poi elabora i file in entrata localmente. Nessun dato va da nessuna parte. Puoi scollegare il laptop da internet, trascinare un'immagine nella finestra e la maschera verrà comunque generata in un paio di secondi.

Strumenti per il perfezionamento manuale

Le reti neurali spesso commettono errori sui bordi complessi. Capelli fini, vetro trasparente o uno sfondo semi-sfocato spesso si trasformano in bordi frastagliati. I creatori di CutItOut non si sono limitati a un singolo pulsante "Rimuovi sfondo" e hanno aggiunto diversi strumenti utili per la correzione manuale:

• Magic Brush. Seleziona i pixel vicini per somiglianza di colore, il che aiuta a cancellare rapidamente un pezzo di sfondo rimasto in modo goffo.
• Modalità di recupero con livello semi-trasparente (Ghost overlay). Quando la rete neurale taglia troppo, è difficile ripristinare alla cieca il frammento necessario. Qui l'originale è evidenziato con un contorno morbido, così puoi vedere esattamente dove pennellare.
• Navigazione sulla canvas. C'è zoom e panning per pulire ordinatamente i piccoli dettagli ad alta risoluzione.
• Esportazione senza perdita. Il risultato finale viene consegnato come PNG con canale alfa trasparente alla risoluzione originale, senza filigrane o timer di attesa.

Come distribuire il progetto autonomamente

Il codice è scritto in TypeScript e viene compilato con strumenti standard per il frontend. Per eseguire il progetto localmente o usarlo come base per il tuo servizio, avrai bisogno di Node.js 18+ e npm 9+.

Clona il repository e vai nella cartella:

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

Installa le dipendenze:

npm install

Avvia il server di sviluppo locale:

npm run dev

Vite avvierà l'app su http://localhost:5173.

Se vuoi distribuire l'app da solo, il progetto genera file statici con un singolo comando:

npm run build

Tutti i file finiti andranno nella directory dist. Poiché il progetto non ha bisogno di un backend, puoi caricare questi file su qualsiasi hosting statico gratuito come Vercel, Netlify o GitHub Pages. Nessun container Docker, variabili d'ambiente con chiavi API o configurazioni di code Celery da configurare.

Perché questo progetto è utile per gli sviluppatori

Il codice di CutItOut è interessante da due prospettive.

In primo luogo, è un'utility pronta all'uso comoda per uso personale. Puoi eseguirla su un server di casa o tenerla nei preferiti per evitare di pagare alternative commerciali quando devi preparare un paio di dozzine di immagini.

In secondo luogo, il progetto è una grande illustrazione dell'approccio edge computing nel frontend. Se stai costruendo un'app dove gli utenti caricano avatar o foto di prodotti, spostare la segmentazione sul client fa risparmiare una buona quantità di denaro. Invece di pagare per istanze GPU cloud, sposti il lavoro sulla CPU dell'utente. Nel repository, puoi vedere come l'autore ha organizzato il lavoro sulla canvas, il ridimensionamento e l'integrazione della libreria WASM nell'interfaccia.

CutItOut è un progetto pulito e onesto sotto licenza Apache 2.0. Risolve un problema quotidiano specifico e dimostra chiaramente quanto siano arrivate lontano le capacità di machine learning del browser. Il progetto non ha ancora molte stelle, ma il codice è pulito, comprensibile e facilmente adattabile ai tuoi compiti.