Jenseits von Barcodes: Wie ich einen KI-Scanner für Videospiele gebaut habe

Ein technischer Deep-Dive in ein Produkt, das Computer Vision und agentenbasierte KI kombiniert, um den Ankaufsprozess im Re-Commerce zu revolutionieren.

PassPad ist eine Plattform, auf der Gamer ihre alten Videospiele, Konsolen und Zubehör einfach und sicher verkaufen können. Unser Ziel ist es, den oft mühsamen Prozess des "Re-Commerce" so nahtlos wie möglich zu gestalten – mit fairen Preisen und modernster Technologie.

Doch als wir im September 2024 live gingen, war die Realität noch eine andere.

Das Problem: Die 30-Sekunden-Hürde

In unserer ersten Version mussten Besucher jedes Spiel einzeln über eine Suchmaske eingeben. Man konnte zwar nach Konsolen filtern, aber der Prozess war zäh: Titel tippen, aus der Liste suchen, Zustand auswählen, zum Verkaufskorb hinzufügen.

Unsere Metriken zeigten: Es dauerte im Schnitt 30 Sekunden pro Spiel. Wer eine Sammlung von 20 Spielen verkaufen wollte, war erst einmal 10 Minuten beschäftigt – eine Ewigkeit im E-Commerce.

Der Industriestandard zur Lösung dieses Problems war damals (und ist oft noch heute) der Barcode-Scanner. Der Nutzer hält die Kamera auf den EAN-Code, die App piept, das Produkt ist da.

Wir standen an einer Weggabelung:

1. Der sichere Weg: Wir bauen einen EAN-Scanner, wie ihn jeder Konkurrent hat.
2. Der riskante Weg: Wir überspringen die Barcodes.

Warum? Weil Barcodes bei gebrauchten Spielen oft fehlen, überklebt oder beschädigt sind. Und vor allem: Man muss jedes Spiel einzeln in die Hand nehmen.

Die Vision: Was wäre, wenn ein Nutzer einfach ein Foto seines gesamten Stapels auf dem Tisch macht, und unsere Software den Rest erledigt? Keine Barcodes, kein Einzel-Scan.

Die Lösung: Ein Dreischichtiges System

Um diese Vision umzusetzen, brauchten wir mehr als nur eine einfache Bilderkennung. Wir brauchten ein System, das "versteht", was es sieht, und es mit unserer Datenbank abgleicht.

Architektur-Überblick

Frontend: UX für asynchrone Prozesse

Das Problem: Warten muss sich gut anfühlen

Ein KI-Scan eines Bildes mit 10 Spielen dauert länger als ein Datenbank-Lookup. Wir sprechen von 10 bis 30 Sekunden Verarbeitungszeit. Wenn der Nutzer in dieser Zeit nur einen Ladekreis sieht, springt er ab.

Die Lösung: State Machine & Optimistic UI

Wir haben das Frontend als strikte State Machine gebaut, die dem Nutzer genau kommuniziert, was gerade passiert.

// useScannerFlow.ts - Vereinfachte Darstellung
export type UIState = "upload" | "processing" | "results" | "error";
 
export function useScannerFlow(): UseScannerFlowReturn {
    const [uiState, setUiState] = useState<UIState>("upload");
    const [analysisId, setAnalysisId] = useState<string | null>(null);
    
    // Mutation für den Analyse-Start
    const analysisMutation = useMutation({
        mutationFn: async (images) => {
            const result = await startImageAnalysisWithUrls(images);
            return { analysisId: result.analysisId };
        },
        onSuccess: (data) => {
            setAnalysisId(data.analysisId);
            setUiState("processing"); // Wechsel in den Processing-State
        },
        onError: () => setUiState("error")
    });
 
    // Polling Pattern: Wir fragen den Status alle 3 Sekunden ab
    const statusQuery = useQuery({
        queryKey: ["analysisStatus", analysisId],
        queryFn: () => fetchAnalysisStatus(analysisId!),
        enabled: Boolean(analysisId) && uiState === "processing",
        refetchInterval: (query) => 
            query.state.data?.status === "processing" ? 3000 : false
    });
    
    // ... Logik für State-Übergänge bei Erfolg
}```
 
Um die Wartezeit psychologisch zu verkürzen, nutzen wir kontextabhängige Nachrichten, die dem Nutzer zeigen, dass die KI wirklich "arbeitet" und nicht nur lädt:
```typescript
function getProcessingMessage(elapsedMs: number): string {
    if (elapsedMs < 8000) return "KI identifiziert Spiele...";
    if (elapsedMs < 16000) return "Zustand & Zubehör werden geprüft..."; // Hier passiert die Magie von V2
    if (elapsedMs < 28000) return "Preise werden kalkuliert...";
    return "Fast fertig – Ergebnisse werden geladen...";
}

Backend: Agentic AI statt nur "Gucken"

Hier liegt der eigentliche technologische Sprung. Ein normales Vision-Modell (LLM) neigt zu Halluzinationen. Wenn ich Gemini frage: "Welche Spiele sind auf dem Bild?", erfindet es gerne Titel oder gibt Namen zurück, die leicht von unserer Datenbank abweichen (z.B. "Mario Kart 8" statt "Mario Kart 8 Deluxe").

Die KI als Agent mit Werkzeugen (Function Calling)

Wir lassen die KI nicht raten. Wir geben ihr ein Tool an die Hand. Wir sagen quasi: "Du bist ein Bibliothekar. Hier ist der Zugang zu unserem Katalog (Datenbank). Wenn du ein Spiel auf dem Foto siehst, schlag es im Katalog nach."

// aiService.ts - Definition des Tools für Gemini
private searchForProductFunctionDeclaration: FunctionDeclaration = {
    name: 'search_for_product',
    description: 'Searches in the PassPad database for a product.',
    parameters: {
        type: Type.OBJECT,
        properties: {
            queries: {
                type: Type.ARRAY,
                items: { type: Type.STRING },
                description: 'Search terms derived from the image visual.'
            },
            systemName: {
                type: Type.STRING,
                enum: ['PlayStation 5', 'Nintendo Switch', ...], // Eingeschränkter Suchraum
                description: 'The platform context.'
            }
        },
        required: ['queries', 'systemName']
    }
};

Der Agentic Loop sieht dann so aus:

1. KI sieht das Bild (Pixel-Ebene).
2. KI erkennt Textfragmente (z.B. "Zelda", "Breath"), oder erkennt das Spiel am Bild des Covers
3. KI entscheidet: "Ich muss die Datenbank fragen." -> Ruft search_for_product auf.
4. Unser Backend führt eine Fuzzy-Search (PostgreSQL pg_trgm) durch.
5. Das Backend gibt echte Produkt-IDs und Titel zurück.
6. Die KI ordnet das Ergebnis dem Bild zu.

Evolution: Von V1 zu V2

In der ersten Version (V1) konnte unser Scanner lediglich erkennen, welches Spiel auf dem Tisch lag. Das war ein riesiger Schritt, aber der Nutzer musste immer noch manuell anklicken: "Ist die Hülle dabei?" oder "Fehlt die Anleitung?".

Für V2 haben wir den Anspruch an die "Agentic AI" erhöht. Wir haben das Kontext-Fenster der KI mit Wissen über unsere Produkt-Logik gefüttert.

Das Problem mit Zuständen und Zubehör

Ein "Nintendo Switch"-Spiel ist meistens eine Hülle mit Cartridge. Eine "PlayStation 2"-Konsole ist aber ein komplexes Bundle aus Konsole, Stromkabel, TV-Kabel und Controller.

In V2 geben wir der KI nun Schema-Informationen mit. Wenn sie eine Konsole erkennt, prüft sie das Bild gezielt auf Zubehör:

• "Ich sehe eine PS2. Sehe ich auch einen Controller?"
• "Ich sehe ein Gameboy-Spiel. Liegt es lose da oder ist eine Pappschachtel (OVP) drumherum?"

Durch gezieltes Prompt-Engineering und die Erweiterung der Rückgabe-Schemas füllen wir nun Formularfelder automatisch aus, die der Nutzer vorher mühsam klicken musste.

Validierung: Vertrauen ist gut, Datenbank ist besser

Trotz Agentic AI darf man einer KI im Business-Kontext nie blind vertrauen. Der letzte Schritt vor der Anzeige an den Kunden ist immer eine harte Validierung.

// Der "Safety Check"
if (analysisResult.identifiedProducts.length > 0) {
    // 1. Extrahiere alle IDs, die die KI behauptet gefunden zu haben
    const uniqueIds = [...new Set(analysisResult.identifiedProducts.map(p => p.productId))];
    
    // 2. Prüfe gegen die echte DB
    const existing = await this.prisma.product.findMany({
        where: { id: { in: uniqueIds } },
        select: { id: true }
    });
    
    const existingSet = new Set(existing.map(e => e.id));
    
    // 3. Filtere alles raus, was die KI "halluziniert" hat (IDs, die es nicht gibt)
    analysisResult.identifiedProducts = analysisResult.identifiedProducts
        .filter(p => existingSet.has(p.productId));
}

Tech Stack Zusammenfassung

Für die Tech-Interessierten hier die Übersicht unserer aktuellen Architektur:

Fazit

Die Entscheidung, den klassischen EAN-Scanner zu überspringen, war riskant, aber sie hat sich ausgezahlt. Wir haben ein Werkzeug geschaffen, das nicht nur technologisch spannend ist, sondern ein echtes Nutzerproblem löst: Zeit.

Statt Barcodes zu suchen, zu drehen und zu scannen, werfen unsere Kunden ihre Spiele jetzt einfach auf einen Haufen, machen ein Foto und lassen die KI die Arbeit machen.

Die Kombination aus Computer Vision, Agentic Workflow und klassischer Datenbank-Validierung ist für uns der Schlüssel, um PassPad von einem Standard-Shop zu einem Tech-First Re-Commerce Unternehmen zu entwickeln.