Let's Build: KI-Visitenkartenscanner mit Transloadit
Wandeln Sie ein Visitenkartenbild oder eine PDF-Datei in eine lokale JSON-Datei mit Kontaktdaten um. Dieses TypeScript-Beispiel lädt eine Visitenkarte zu Transloadit hoch, lässt ein KI-Modell die sichtbaren Felder extrahieren und speichert das Ergebnis. So können Sie es mit dem Original vergleichen, bevor Sie einen Kontakt in Ihr CRM aufnehmen.
Was wir entwickeln
- Ein Visitenkartenbild als PNG/JPEG oder eine PDF-Datei entgegennehmen.
- Bilder mit 🤖 /image/optimize optimieren, während PDFs direkt zum Extraktions-Step gelangen.
- Kontaktfelder mit 🤖 /ai/chat extrahieren und das JSON-Ergebnis herunterladen.
Dies ist ein lokales Kommandozeilenbeispiel, keine Kamera-App. Sie benötigen einen Auth Key und ein Auth Secret für Ihren Transloadit-Workspace, eine explizite Auswahl der KI-Zugangsdaten und die Erlaubnis, die Visitenkarte an Transloadit und Anthropic zu senden. Die Verarbeitung ist kostenpflichtig, auch bei Verwendung der KI-Testzugangsdaten. Beginnen Sie mit einer synthetischen Visitenkarte ohne personenbezogene Daten.
Zuerst das Schema (zod)
Das Beispielskript exportiert businessCardSchema,
damit Sie dieselbe Datenspezifikation wiederverwenden können, statt eine zweite Feldliste zu pflegen.
Die optionalen Felder sind
full_name, title,
company, email,
phones, address,
website, socials und notes.
Telefonnummern bleiben Zeichenketten, damit ein führendes + erhalten
bleibt. Unbekannte Felder sollten weggelassen werden.
Speichern Sie nach der Einrichtung unten Folgendes als schema.ts in Ihrem
Projektverzeichnis und führen Sie node schema.ts aus, um das an das Modell gesendete
Schema zu prüfen:
import { zodToJsonSchema } from 'zod-to-json-schema'
import { businessCardSchema } from './business-card-scanner/run.ts'
console.log(JSON.stringify(zodToJsonSchema(businessCardSchema), null, 2))
Ein Schema prüft Feldtypen; es kann nicht feststellen, ob ein Name oder eine E-Mail-Adresse korrekt gelesen wurde. Das ausführende Skript weist fehlerhaftes JSON, schemawidrige Ausgaben und Objekte ohne erkannte Felder zurück. Auch ein nicht leeres, schemakonformes Ergebnis muss mit der Visitenkarte abgeglichen werden.
Pipeline im Überblick
| Eingabe | Verarbeitungspfad |
|---|---|
| Visitenkarte als PDF | /ai/chat |
| Visitenkarte als PNG/JPEG | /image/optimize → /ai/chat |
Die Dateifilter leiten PDFs getrennt von Bildern weiter. Trotz seines Namens
pdf_verified wählt der PDF-Filter nur anhand des gemeldeten MIME-Typs aus; er
weist nicht nach, dass ein Dokument intakt oder lesbar ist.
Assembly-Ausschnitt
Die von der App exportierte Verarbeitungskonfiguration liefert die Filter, den Prompt, das Schema
und das Modell anthropic/claude-sonnet-4-6. Um die
Assembly Instructions zu prüfen, speichern Sie
Folgendes als instructions.ts neben schema.ts und führen Sie
node instructions.ts aus:
import { example } from './business-card-scanner/run.ts'
const steps = example.steps({ test_credentials: true })
console.log(JSON.stringify({ steps }, null, 2))
Dies gibt nur die Konfiguration aus. Die CLI unten übermittelt sie, wartet auf den Abschluss, lädt das Ergebnis herunter, validiert es und speichert die Kontaktfelder lokal. Die lokale Datei behalten Sie; die URL des Verarbeitungsergebnisses ist temporär.
Beispiel-App ausprobieren
Verwenden Sie Node.js 26.12.1, separat installiertes
Corepack, cURL und ein neues, leeres Verzeichnis außerhalb eines
bestehenden Projekts. Folgen Sie der Einrichtungsanleitung, um
Yarn 4.12.0, @transloadit/node 4.14.0, Zod 3.25.76 und
zod-to-json-schema 3.25.2 zu installieren und sowohl business-card-scanner/run.ts
als auch shared/runtime.ts herunterzuladen. Behalten Sie diese Verzeichnisstruktur bei:
Die App importiert die gemeinsam genutzte Laufzeitumgebung. Ein Checkout eines privaten Repositorys
ist nicht erforderlich.
Diese Versionen wurden getestet. Das Beispiel verwendet weiterhin Zod 3 und den zugehörigen Konverter;
zod-to-json-schema ist veraltet, und Zod 4
unterstützt JSON Schema nativ. Eine Aktualisierung dieser Datenspezifikation ist eine separate
Änderung an der App.
Ersetzen Sie in der Shell, in der Sie das Programm ausführen werden, diese Platzhalter durch die Werte Ihres Workspaces:
export TRANSLOADIT_AUTH_KEY='YOUR_AUTH_KEY'
export TRANSLOADIT_AUTH_SECRET='YOUR_AUTH_SECRET'
Halten Sie sensible Zugangsdaten aus der Versionsverwaltung und dem Browsercode heraus. Das Programm liest die Prozessumgebung; es lädt keine Umgebungsdatei und erstellt keine Zugangsdaten.
Legen Sie Ihre Visitenkarte unter card.png im Projektverzeichnis ab oder ersetzen
Sie den Eingabepfad. Wählen Sie eine noch nicht vorhandene Ausgabedatei und autorisieren Sie dann
explizit die Verwendung kostenpflichtiger KI-Testzugangsdaten:
node business-card-scanner/run.ts --input ./card.png --output ./result.json --test-credentials
Alternativ setzen Sie TRANSLOADIT_AI_CREDENTIALS auf den Namen eines vorhandenen Eintrags mit
Anthropic-KI-Zugangsdaten und lassen --test-credentials weg. Wählen Sie genau einen Modus.
Wie Sie eigene Zugangsdaten für den Anbieter konfigurieren, erfahren Sie in der
Einrichtungsanleitung. Erledigen Sie dies, bevor Sie die App ausführen.
Öffnen Sie nach erfolgreicher Ausführung result.json und vergleichen Sie den
extrahierten Namen, die E-Mail-Adresse und die Telefonnummern mit der Visitenkarte. Optionale Felder
dürfen fehlen. Die App lässt die Eingabe unverändert und weist eine bereits vorhandene Ausgabedatei
zurück, bevor sie die Verarbeitung beauftragt. Verwenden Sie daher bei einer weiteren Ausführung ein
neues Ziel. Die App begrenzt Eingabe und heruntergeladene Ausgabe auf 20 MiB, wartet bis zu fünf
Minuten auf die Verarbeitung und gewährt dem Ergebnisdownload eine separate Frist von 30 Sekunden.
Dies sind Grenzen des Beispiels, keine Produktgrenzen.
Wenn eine Ausführung nach der Ausgabe einer Assembly ID fehlschlägt, prüfen Sie diese Assembly in der Console, bevor Sie es erneut versuchen. Eine Zeitüberschreitung oder Unterbrechung belegt nicht, dass die Verarbeitung auf dem Server gestoppt wurde. Die Verarbeitung kann weiterhin berechnet werden. Das Skript führt eine Assembly nicht automatisch erneut aus.
Beispieleingaben
Verwenden Sie eine lesbare synthetische Visitenkarte mit einem Namen, einem Unternehmen, einer E-Mail-Adresse und einer Telefonnummer, die Sie überprüfen können. Verwenden Sie pro Datei eine einzelne Visitenkarte; beginnen Sie bei einer PDF-Datei mit einer Seite. Um den PDF-Verarbeitungspfad zu testen, übergeben Sie den Dateinamen der PDF-Eingabedatei an denselben Befehl und wählen Sie eine zweite JSON-Ausgabedatei. Eine erfolgreiche Extraktion aus einem Bild belegt nicht, dass eine bestimmte PDF-Datei lesbar ist. Auch garantiert die Bildoptimierung keine bessere Erkennung.
Nächste Schritte
Prüfen Sie jede Extraktion, bevor Sie Kontakte in Ihr CRM aufnehmen. Das Schema liefert keine Konfidenzwerte und kann daher keine Kontakte mit „niedriger Konfidenz“ für Sie auswählen. Normalisieren Sie nach der Prüfung Telefonnummern und Adressen gemäß den jeweiligen Gebietsschemata und entfernen Sie doppelte Kontakte anhand der Regeln Ihres CRM.