Wandel kostenfrei Images in SVG um, entferne Hintergründe aus Bildern

Picture Tools — Bildumwandlung als Webdienst (FastAPI + Docker)

convert.clouddriver.de

1. Zielstellung

Ein Webdienst, der diverse Dienste zur Umwandlung und Verarbeitung von Bilddateien bereitstellt.

Use Case 1:

ein PNG/ JPEG-Bild soll in ein SVG umgewandelt werden.

Use Case 2:

Entfernen vom Hintergrund aus dem Bild

#	Ziel
1	Webdienst mit UI zum Dateiupload
2	Wahl der gewünschten Umwandlung durch den Nutzer
3	Einzelner und mehrfacher Dateiupload
4	Swagger/OpenAPI-API für dienstbasierten Zugriff
5	PNG/JPG/JPEG → SVG (Vektorisierung)
6	Hintergrund entfernen → PNG
7	Bildgröße auf Zielwert (px × px) ändern
8	Python, hochautomatisierter DevOps-Prozess
9	Deployment über GitHub und Docker auf einer Linux-VM (Proxmox)

Die zentralen Randbedingungen: Python als Sprache, Docker als Packaging-Schicht und ein Deployment-Weg, der über GitHub und Docker Compose auf einem externen Linux-Server funktioniert.

2. Technische Umsetzung

2.1 Architektur & Technologie-Stack

Das Projekt ist als FastAPI-Webdienst aufgebaut:

app/
  main.py                       # FastAPI-App, Swagger, UI, statische Dateien
  routers/convert.py            # API-Endpunkte (/api/...)
  services/
    converter.py                # Raster -> SVG (VTracer + potrace-Fallback)
    background_remover.py       # Hintergrundentfernung (Grafik- + ML-Pfad)
  templates/index.html          # Upload-UI (Single-Page)
  static/                       # Statische Assets (Logo)
Dockerfile                      # Container-Image
docker-compose.yml              # Orchestrierung
tests/test_api.py               # API-Tests

Stack:

Python 3.13 / FastAPI + Uvicorn
VTracer (pip) für die Vektorisierung, mit potrace (System-Binary) als Fallback
rembg + onnxruntime für ML-basierte Hintergrundentfernung (BiRefNet-Modell)
RapidOCR/ONNX für Texterkennung, um editierbare <text>-Elemente ins SVG einzubetten
Docker + Docker Compose als Paketierung & Deployment-Schicht

2.2 Die API-Routen

Das Backend stellt zwei Kern-Endpunkte bereit (Prefix /api):

POST /api/convert?format=svg Wandelt PNG/JPG/JPEG in SVG um. Die eigentliche Arbeit liegt im converter-Service:

Primär nutzt VTracer zur Vektorisierung (Farb-Clustering, glatte Bézier-Kurven — qualitativ hochwertiger als klassische Bitmap-Traces).
Über RapidOCR erkannte Textzeilen werden maskiert und als editierbare <text>-Elemente ins SVG eingebettet — ein großer Vorteil gegenüber rein geometrischem Tracing.
Bei Fehlern greift ein Fallback auf das potrace-System-Binary.

POST /api/remove-background Entfernt den Hintergrund und liefert ein PNG mit transparentem Hintergrund. Der background_remover-Service arbeitet adaptiv in zwei Pfaden:

Grafik-/Logo-Pfad (deterministisch, ohne ML): Bei homogenem, an den Rändern detektierbarem Hintergrund (typisch Logos, Screenshots, White-Seamless-Produktaufnahmen) wird die mit dem Bildrand verbundene Region kolorimetrisch entfernt (scipy.ndimage.label, Randfarben-Median + euklidische Toleranz). Kanten werden per Alpha-Rampe gefeathered. Das läuft in <1s ohne Modell und erhält Text/feine Grafikelemente pixelgenau.
Foto-Pfad (ML): Bei komplexem Hintergrund kommt rembg mit dem BiRefNet-Modell (birefnet-general, ~973MB ONNX) plus Alpha-Matting zum Einsatz. Kleine Bilder werden auf 1024px hochskaliert; das Modell wird module-global gecached, mit Fallback-Kette (isnet-general-use, u2net).

2.3 Das Frontend

index.html ist eine Single-Page-Upload-UI mit clientseitigem JavaScript:

Drag & Drop oder Klick-Upload, mehrere Dateien gleichzeitig
Wahl der Operation (Vektorisieren vs. Hintergrund entfernen) per Radio-Button
Download-Link pro Ergebnis + Löschen-Button (im Rahmen der Erweiterung ergänzt)
Das App-Logo (/static/applogo_convert_png2svg.png) ist oben im Header eingebunden

Die UI ruft direkt die API-Endpunkte auf, die unter Swagger UI (/docs) auch interaktiv und dienstbasiert genutzt werden können.

2.4 Qualität & Testbarkeit

tests/test_api.py nutzt FastAPI TestClient.
Der SVG-Pfad läuft mit VTracer + RapidOCR (pip-Pakete); potrace ist für die Tests optional (Fallback greift nur, wenn VTracer fehlschlägt).
Der ML-Pfad (Foto-Hintergrund) wird in CI nicht über HTTP getestet, weil der erste Aufruf das ~973MB-Modell herunterlädt. Der deterministische Grafik-Pfad hingegen ist vollständig getestet.

3. Deployment-Pfad

Die Zielarchitektur: GitHub → externer Linux-Server (Proxmox-VM) → Docker Compose.

3.1 Artefakte

Dockerfile — Python-3.13-Slim-Image, installiert den potrace-System- Binary und die pip-Dependencies, kopiert den App-Code und startet Uvicorn auf Port 8000.
docker-compose.yml — definiert den Dienst picture-tools, mappt den Host-Port 8000 auf Container-Port 8000 und setzt restart: unless-stopped.
.dockerignore — hält .venv, .git und Tests aus dem Build-Kontext (schnellerer, sauberer Build).

3.2 Schritte auf dem Server

Voraussetzungen: Git, Docker und das Compose-Plugin auf dem Linux-Server.

Repository bereitstellen — das Projekt (Team/Title: "Picture Tools") per GitHub abrufen:
```
git clone <REPO_URL> picture-tools
cd picture-tools
```
Image bauen & starten:
```
docker compose up -d --build
```
Danach läuft der Dienst unter http://<SERVER-IP>:8000.
Updates reduzieren sich auf zwei Befehle:
```
git pull
docker compose up -d --build
```

Betrieb:

docker compose ps              # Status
docker compose logs -f         # Logs
docker compose down            # Stoppen

3.3 Externe Erreichbarkeit (Optionale Härtung)

Standardmäßig lauscht der Dienst auf Port 8000. Für komfortablen Zugriff ohne Portnummer empfiehlt sich ein Reverse-Proxy (z. B. Caddy), der Port 80/443 auf localhost:8000 weiterleitet — per zusätzlichem caddy-Service in der docker-compose.yml plus einer Caddyfile realisierbar.

3.4 Konfigurierbarkeit

Das Verhalten lässt sich über Umgebungsvariablen steuern (SVG-Modus, Farbmodus/-präzision, OCR an/aus, Schriftart, BIrRefNet-Modell, Toleranzwerte der Hintergrund-Erkennung usw.) — ideal für unterschiedliche Deployment-Umgebungen ohne Codeänderung.

4. Fazit & Ausblick

Das Projekt erfüllt die Anforderungen: eine UI mit Mehrfach-Upload, mehrere Umwandlungsfunktionen (SVG-Vektorisierung, Hintergrundentfernung), eine Swagger-API und ein deploy-fertiges Docker-Image. Die Vektorisierung profitiert von einem modernen Hybrid-Ansatz (VTracer + OCR für editierbaren Text), und die adaptive Hintergrundentfernung spart Milliarden an Modell-Ladezeit ein, indem einfache Fälle ohne ML und erst komplexe Fälle mit dem umfangreichen BiRefNet-Modell bearbeitet werden.

Ausblick / mögliche nächste Schritte:

Bildgröße auf Zielwert (px × px) — als weiterer Endpunkt ergänzen
CI/CD-Pipeline (GitHub Actions) für Build & automatisierte Deploy per SSH
TLS-Zertifikate über den Reverse-Proxy (Let's Encrypt)

„Picture Tools" — Ein Webdienst zur Umwandlung und Verarbeitung von Bilddateien, gebaut mit FastAPI, verpackt mit Docker und deployt über GitHub auf einer Linux-VM.

Webdienst zur Image-Konvertierung mit REST API