Comment supprimer l'arrière-plan des images directement dans le navigateur sans serveurs ni abonnements

Chaque fois que vous avez besoin de supprimer rapidement l'arrière-plan d'une photo pour un projet personnel, une fiche produit ou un avatar, la même quête commence. Les services en ligne populaires comme Remove.bg exigent un abonnement payant après trois téléchargements, compressent l'image à la taille d'un timbre-poste, ou nécessitent une autorisation Google. De plus, vous n'avez pas toujours envie d'envoyer des photos personnelles ou des maquettes de travail vers des serveurs tiers.

Récemment, je suis tombé sur le dépôt cut-it-out du développeur Suvink. C'est un outil open source qui fait la même chose, mais directement dans le navigateur sur la machine de l'utilisateur. Pas de backends, pas de files d'attente, et zéro coût pour l'infrastructure tierce.

Ce qui se cache sous le capot

Le point fort principal du projet est que tous les calculs se font côté client. Le dépôt utilise la bibliothèque @imgly/background-removal, qui charge le modèle de réseau neuronal U2-Net via ONNX Runtime en WebAssembly (WASM).

Si exécuter l'inférence pour les réseaux de segmentation nécessitait auparavant un serveur avec Python, PyTorch, et au moins une modeste carte graphique, la pile WASM + WebGL/WebGPU gère désormais tout cela directement dans un onglet Chrome ou Firefox.

Lorsque vous ouvrez la page pour la première fois, le navigateur télécharge les poids du modèle, les met en cache, puis traite les fichiers entrants localement. Aucune donnée ne part nulle part. Vous pouvez déconnecter votre ordinateur portable d'internet, glisser une image dans la fenêtre, et le masque sera quand même généré en quelques secondes.

Outils pour les retouches manuelles

Les réseaux neuronaux font souvent des erreurs sur les contours complexes. Les cheveux fins, le verre transparent ou un arrière-plan semi-flou se transforment souvent en bords déchiquetés. Les créateurs de CutItOut ne se sont pas limités à un simple bouton « Supprimer l'arrière-plan » et ont ajouté plusieurs outils de correction manuelle utiles :

• Magic Brush. Sélectionne les pixels voisins par similarité de couleur, ce qui aide à effacer rapidement un reste maladroit de l'arrière-plan.
• Mode récupération avec calque semi-transparent (Ghost overlay). Lorsque le réseau neuronal découpe trop, il est difficile de restaurer aveuglément le fragment nécessaire. Ici, l'original est surligné avec un contour doux, vous pouvez donc voir exactement où brosser.
• Navigation sur le canevas. Il y a un zoom et un panoramique pour nettoyer proprement les petits détails en haute résolution.
• Export sans perte. Le résultat fini est livré en PNG avec un canal alpha transparent à la résolution originale, sans filigranes ni minuteurs d'attente.

Comment déployer le projet vous-même

La base de code est écrite en TypeScript et se construit avec les outils frontend standard. Pour exécuter le projet localement ou l'utiliser comme base pour votre propre service, vous aurez besoin de Node.js 18+ et npm 9+.

Clonez le dépôt et accédez au dossier :

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

Installez les dépendances :

npm install

Démarrez le serveur de développement local :

npm run dev

Vite lancera l'application à l'adresse http://localhost:5173.

Si vous souhaitez déployer l'application vous-même, le projet se construit en fichiers statiques avec une seule commande :

npm run build

Tous les fichiers finis seront placés dans le répertoire dist. Comme le projet n'a pas besoin de backend du tout, vous pouvez télécharger ces fichiers sur n'importe quel hébergement statique gratuit comme Vercel, Netlify ou GitHub Pages. Pas de conteneurs Docker, de variables d'environnement avec des clés API ou de configurations de file d'attente Celery à mettre en place.

Pourquoi ce projet est utile pour les développeurs

Le code de CutItOut est intéressant de deux points de vue.

Premièrement, c'est un utilitaire prêt à l'emploi pratique pour un usage personnel. Vous pouvez l'exécuter sur un serveur domestique ou le garder en favori pour éviter de payer des alternatives commerciales lorsque vous devez préparer quelques dizaines d'images.

Deuxièmement, le projet est une excellente illustration de l'approche edge computing dans le frontend. Si vous construisez une application où les utilisateurs téléchargent des avatars ou des photos de produits, déplacer la segmentation vers le client fait économiser pas mal d'argent. Au lieu de payer pour des instances GPU cloud, vous déplacez le travail vers le CPU de l'utilisateur. Dans le dépôt, vous pouvez voir comment l'auteur a organisé le travail sur le canevas, la mise à l'échelle et l'intégration de la bibliothèque WASM dans l'interface.

CutItOut est un projet propre et honnête sous licence Apache 2.0. Il résout un problème quotidien spécifique et démontre clairement à quel point les capacités de machine learning dans le navigateur ont évolué. Le projet n'a pas encore beaucoup d'étoiles, mais le code est propre, compréhensible et facilement adaptable à vos propres tâches.