Zuletzt aktualisiert: 6. Januar

Let's Build: KI-Visitenkartenscanner mit Transloadit

Kevin van Zonneveld

Mitgründer · Amsterdam, Niederlande ·

Visitenkartenscanner sind ein hervorragendes Beispiel dafür, wie sich Datei-Workflows produktisieren lassen. Sie erfassen ein Bild, bereinigen es und extrahieren anschließend Kontaktdaten in strukturierte Felder. Mit den Bausteinen von Transloadit stellen Sie diese Pipeline in wenigen Schritten zusammen.

Was wir bauen

PNG/JPEG- oder PDF-Karten annehmen
Bilder mit 🤖 /image/optimize optimieren
Kontaktfelder mit 🤖 /ai/chat (English) extrahieren

Zuerst das Schema (zod)

import { z } from 'zod'
import { zodToJsonSchema } from 'zod-to-json-schema'

const businessCardSchema = z.object({
  full_name: z.string().optional(),
  title: z.string().optional(),
  company: z.string().optional(),
  email: z.string().optional(),
  phones: z.array(z.string()).optional(),
  address: z.string().optional(),
  website: z.string().optional(),
  socials: z.array(z.string()).optional(),
})

const toJsonSchema = (schema: z.ZodTypeAny): unknown =>
  typeof (z as { toJSONSchema?: typeof zodToJsonSchema }).toJSONSchema === 'function'
    ? (z as { toJSONSchema: typeof zodToJsonSchema }).toJSONSchema(schema)
    : zodToJsonSchema(schema)

const businessCardJsonSchema = toJsonSchema(businessCardSchema)

Überblick über die Pipeline

PDF cards  ──▶ /ai/chat
Images     ──▶ /image/optimize ──▶ /ai/chat

Assembly-Snippet

const assembly = await transloadit.createAssembly({
  params: {
    steps: {
      pdf_verified: {
        robot: '/file/filter',
        use: ':original',
        accepts: [['${file.mime}', '==', 'application/pdf']],
      },
      non_pdf: {
        robot: '/file/filter',
        use: ':original',
        accepts: [['${file.mime}', '!=', 'application/pdf']],
      },
      card_image: {
        robot: '/image/optimize',
        use: 'non_pdf',
        progressive: true,
      },
      extract_card: {
        robot: '/ai/chat',
        use: ['pdf_verified', 'card_image'],
        model: 'anthropic/claude-4-sonnet-20250514',
        format: 'json',
        schema: JSON.stringify(businessCardJsonSchema),
        messages: 'Extract business card fields. Omit keys if unknown.',
        result: true,
      },
    },
  },
  files: {
    card: filePath,
  },
  waitForCompletion: true,
})

Die Beispiel-App ausprobieren

Das vollständige Beispielskript und die Einrichtungsanleitung sind in diesem Repository enthalten. Führen Sie im Stammverzeichnis des Repositorys aus:

node public/example_apps/business-card-scanner/run.ts

Beispieleingaben

Mit den mitgelieferten Bildern lässt sich der Pfad zur Bildverarbeitung testen. Verwenden Sie einen echten Visitenkarten-Scan, um die Extraktion der Kontaktdaten zu testen:

_assets/demos/inputs/streetsign1.jpg
_assets/demos/inputs/streetsign2.jpg
_assets/demos/inputs/transloadit-padded.png

Nächste Schritte

Ergänzen Sie eine Deduplizierung, bevor Sie Kontakte in Ihr CRM einfügen.
Normalisieren Sie Telefonnummern und Adressen je nach Gebietsschema.
Fügen Sie einen manuellen Prüfschritt für Extraktionen mit geringer Konfidenz hinzu.