So entfernen Sie Bildhintergründe direkt im Browser – ohne Server und Abonnements

Jedes Mal, wenn Sie schnell den Hintergrund von einem Foto für ein Hobbyprojekt, eine Produktkarte oder ein Avatar entfernen müssen, beginnt dieselbe Suche. Beliebte Online-Dienste wie Remove.bg verlangen nach drei Downloads ein kostenpflichtiges Abonnement, komprimieren das Bild auf die Größe einer Briefmarke oder erfordern eine Google-Autorisierung. Außerdem möchten Sie nicht immer persönliche Fotos oder Arbeits-Mockups an Drittanbieter-Server senden.

Kürzlich bin ich auf das cut-it-out Repository von Entwickler Suvink gestoßen. Es ist ein Open-Source-Tool, das dasselbe tut, aber direkt im Browser auf dem Rechner des Benutzers. Keine Backends, keine Warteschlangen und keine Kosten für Infrastruktur von Drittanbietern.

Was steckt dahinter

Das Haupt-Highlight des Projekts ist, dass alle Berechnungen clientseitig stattfinden. Das Repository nutzt die @imgly/background-removal-Bibliothek, die das U2-Net neuronale Netzmodell über ONNX Runtime in WebAssembly (WASM) lädt.

Wenn die Inferenz für Segmentierungsnetzwerke früher einen Server mit Python, PyTorch und mindestens einer bescheidenen GPU erforderte, erledigt jetzt der WASM + WebGL/WebGPU-Stack dies direkt in einem Chrome- oder Firefox-Tab.

Wenn Sie die Seite zum ersten Mal öffnen, lädt der Browser die Modellgewichte herunter, speichert sie im Cache und verarbeitet dann eingehende Dateien lokal. Keine Daten werden irgendwohin gesendet. Sie können Ihr Laptop vom Internet trennen, ein Bild in das Fenster ziehen, und die Maske wird trotzdem in ein paar Sekunden generiert.

Werkzeuge für manuelle Verfeinerung

Neuronale Netzwerke machen oft Fehler bei komplexen Rändern. Feine Haare, transparentes Glas oder ein halb verschwommener Hintergrund werden oft zu gezackten Kanten. Die Entwickler von CutItOut haben sich nicht auf einen einzelnen „Hintergrund entfernen"-Button beschränkt und mehrere nützliche manuelle Korrekturwerkzeuge hinzugefügt:

• Magic Brush. Wählt benachbarte Pixel nach Farbähnlichkeit aus, was hilft, schnell ein unbeabsichtigt stehengebliebenes Stück des Hintergrunds zu löschen.
• Wiederherstellungsmodus mit halbtransparenter Ebene (Ghost Overlay). Wenn das neuronale Netz zu viel ausgeschnitten hat, ist es schwer, das benötigte Fragment blind wiederherzustellen. Hier wird das Original mit einer weichen Umrandung hervorgehoben, sodass Sie genau sehen können, wo Sie bürsten müssen.
• Canvas-Navigation. Es gibt Zoom und Schwenken, um kleine Details in hoher Auflösung sauber zu bereinigen.
• Verlustfreier Export. Das fertige Ergebnis wird als PNG mit transparentem Alphakanal in der Originalauflösung geliefert, ohne Wasserzeichen oder Wartezeiten.

So deployen Sie das Projekt selbst

Die Codebasis ist in TypeScript geschrieben und wird mit Standard-Frontend-Tooling erstellt. Um das Projekt lokal auszuführen oder als Grundlage für Ihren eigenen Dienst zu nutzen, benötigen Sie Node.js 18+ und npm 9+.

Klonen Sie das Repository und navigieren Sie zum Ordner:

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

Installieren Sie die Abhängigkeiten:

npm install

Starten Sie den lokalen Entwicklungsserver:

npm run dev

Vite startet die App unter http://localhost:5173.

Wenn Sie die App selbst deployen möchten, erstellt das Projekt mit einem einzigen Befehl statische Dateien:

npm run build

Alle fertigen Dateien landen im dist-Verzeichnis. Da das Projekt überhaupt kein Backend benötigt, können Sie diese Dateien auf jeden kostenlosen statischen Hosting-Service wie Vercel, Netlify oder GitHub Pages hochladen. Keine Docker-Container, keine Umgebungsvariablen mit API-Schlüsseln oder Celery-Queue-Konfigurationen zum Einrichten.

Warum dieses Projekt für Entwickler nützlich ist

CutItOuts Code ist aus zwei Perspektiven interessant.

Erstens ist es ein praktisches, fertiges Utility für den persönlichen Gebrauch. Sie können es auf einem Heimserver ausführen oder als Lesezeichen speichern, um kostenpflichtige kommerzielle Alternativen zu vermeiden, wenn Sie ein paar Dutzend Bilder vorbereiten müssen.

Zweitens ist das Projekt eine großartige Illustration des Edge-Computing-Ansatzes im Frontend. Wenn Sie eine App erstellen, in der Benutzer Avatare oder Produktfotos hochladen, spart das Verschieben der Segmentierung zum Client eine erhebliche Menge an Geld. Anstatt für Cloud-GPU-Instanzen zu zahlen, verlagern Sie die Arbeit auf die CPU des Benutzers. Im Repository können Sie sehen, wie der Autor die Canvas-Arbeit, Skalierung und Integration der WASM-Bibliothek in die Oberfläche organisiert hat.

CutItOut ist ein sauberes und ehrliches Projekt unter der Apache 2.0-Lizenz. Es löst ein spezifisches alltägliches Problem und zeigt deutlich, wie weit die Browser-Machine-Learning-Fähigkeiten gekommen sind. Das Projekt hat noch nicht viele Stars, aber der Code ist sauber, verständlich und leicht an eigene Aufgaben anpassbar.