API für virtuelles Anprobieren für React, Next.js und Angular – Frontend-Leitfaden

Warum TryOnCloud mit React & Next.js verwenden

• Funktioniert mit jedem JavaScript-Framework – React, Next.js, Angular, Vue
• Für API-Anfragen und -Antworten bereitgestellte TypeScript-Typen
• Beispiel für eine Next.js-API-Route enthalten – der API-Schlüssel wird serverseitig gespeichert
• Der React-Hook „useVirtualTryOn“ ermöglicht eine nahtlose Integration in Komponenten
• Streaming-fähig – Anzeige eines Ladezustands, während die KI Daten verarbeitet

So richten Sie TryOnCloud auf React & Next.js ein

Geschätzte Einrichtungszeit: 2–3 hours. Schwierigkeit: Mittel.

1. 1

   Eine serverseitige Proxy-API-Route erstellen

   Erstellen Sie in Next.js die Datei „app/api/tryon/route.ts“. Diese Route ruft die API von TryOnCloud unter Verwendung Ihres API-Schlüssels aus den Umgebungsvariablen auf. Rufen Sie TryOnCloud niemals direkt über den Browser auf.

2. 2

   Bild hochladen

   Erstellen Sie einen Upload-Endpunkt (app/api/upload-url/route.ts), der eine vorab signierte URL für das Kundenfoto zurückgibt. Der Browser lädt die Datei direkt an die signierte URL hoch, nicht über Ihren Server.

3. 3

   Erstelle die React-Try-on-Komponente

   Erstelle eine „TryOnButton“-Komponente, die eine Dateiauswahl auslöst, das Foto hochlädt, deinen Proxy unter /api/tryon aufruft und die Endpunktadresse /api/result/{id} abfragt, bis das Ergebnis vorliegt.

4. 4

   Ergebnis anzeigen

   Zeige das Ergebnisbild in einem Modalfenster oder direkt unterhalb des Produktbildes an. Füge eine Schaltfläche „Vergleichen“ hinzu, um zwischen dem Original-Produktfoto und dem Anprobe-Ergebnis zu wechseln.

5. 5

   Fehler- und Ladezustände hinzufügen

   Zeige während des 15–20 Sekunden dauernden Verarbeitungsvorgangs einen Ladekreis an. Behandle Fehler der API (nicht unterstütztes Format, kein Kleidungsstück erkannt) mit benutzerfreundlichen Meldungen.

Code-Beispiel

Next.js: Proxy für serverseitige API-Routen + React-Hook

// app/api/tryon/route.ts — server-side proxy (keeps API key private)
export async function POST(req: Request) {
  const { garmentUrl, personUrl } = await req.json()

  const res = await fetch('https://www.tryoncloud.com/api/tryon', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-API-Key': process.env.TRYONCLOUD_API_KEY!,
    },
    body: JSON.stringify({
      garment_image_url: garmentUrl,
      person_image_url: personUrl,
    }),
  })

  const data = await res.json()
  return Response.json(data)
}

// hooks/useVirtualTryOn.ts
export function useVirtualTryOn() {
  const [status, setStatus] = useState<'idle'|'uploading'|'processing'|'done'|'error'>('idle')
  const [resultUrl, setResultUrl] = useState<string | null>(null)

  const tryOn = async (garmentUrl: string, personFile: File) => {
    setStatus('uploading')
    // 1. Get upload URL, upload photo
    const { uploadUrl, personUrl } = await getUploadUrl(personFile)
    await fetch(uploadUrl, { method: 'PUT', body: personFile })

    // 2. Submit try-on job
    setStatus('processing')
    const { job_id } = await fetch('/api/tryon', {
      method: 'POST',
      body: JSON.stringify({ garmentUrl, personUrl }),
    }).then(r => r.json())

    // 3. Poll for result
    for (let i = 0; i < 10; i++) {
      await new Promise(r => setTimeout(r, 3000))
      const result = await fetch(`/api/result/${job_id}`).then(r => r.json())
      if (result.status === 'complete') {
        setResultUrl(result.result_url)
        setStatus('done')
        return
      }
    }
    setStatus('error')
  }

  return { tryOn, status, resultUrl }
}

Wissenswert

• ⓘDer API-Schlüssel muss serverseitig gespeichert werden – er darf niemals in clientseitigem JavaScript offengelegt werden
• ⓘFür das Hochladen von Bildern ist ein Endpunkt für den Datei-Upload erforderlich (im folgenden Beispiel werden Next.js-API-Routen verwendet)
• ⓘDie Bearbeitungszeit beträgt 15–20 Sekunden – UI für asynchrone Benutzererfahrung entwerfen

Häufig gestellte Fragen

Weitere Integrationen