API per la prova virtuale per React, Next.js e Angular — Guida al frontend

Perché usare TryOnCloud con React & Next.js

• Funziona con qualsiasi framework JavaScript: React, Next.js, Angular, Vue
• Tipi TypeScript definiti per i modelli di richiesta e risposta delle API
• Esempio di route API Next.js incluso — la chiave API viene conservata sul lato server
• L'hook React useVirtualTryOn è disponibile per un'integrazione pulita dei componenti
• Ottimizzato per lo streaming: visualizza lo stato di caricamento mentre l'IA elabora i dati

Come configurare TryOnCloud su React & Next.js

Tempo di configurazione stimato: 2–3 hours. Difficoltà: Intermedio.

1. 1

   Creare una route API proxy lato server

   In Next.js, crea il file app/api/tryon/route.ts. Questo percorso richiama l'API di TryOnCloud utilizzando la tua chiave API presente nelle variabili d'ambiente. Non richiamare mai TryOnCloud direttamente dal browser.

2. 2

   Gestione del caricamento delle immagini

   Crea un endpoint di caricamento (app/api/upload-url/route.ts) che restituisca un URL pre-firmato per la foto del cliente. Il browser effettua il caricamento direttamente all'URL firmato, senza passare dal tuo server.

3. 3

   Crea il componente React per la prova virtuale

   Crea un componente TryOnButton che avvii una finestra di selezione file, carichi la foto, chiami il tuo proxy /api/tryon e interroghi l'endpoint /api/result/{id} finché il risultato non è pronto.

4. 4

   Visualizza il risultato

   Mostra l'immagine del risultato in una finestra modale o in linea sotto l'immagine del prodotto. Aggiungi un pulsante "Confronta" per passare dalla foto originale del prodotto al risultato della prova.

5. 5

   Aggiungi stati di errore e di caricamento

   Visualizza un indicatore di caricamento durante i 15-20 secondi necessari all'elaborazione. Gestisci gli errori dell'API (formato non supportato, nessun indumento rilevato) con messaggi chiari e intuitivi.

Esempio di codice

Next.js: proxy per route API lato server + hook React

// 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 }
}

Cose da sapere

• ⓘLa chiave API deve essere conservata sul lato server: non renderla mai visibile nel codice JavaScript lato client
• ⓘPer caricare un'immagine è necessario un endpoint di caricamento file (l'esempio fornito utilizza i percorsi API di Next.js)
• ⓘIl tempo di elaborazione è di 15–20 secondi — progettare l'interfaccia utente per un'esperienza asincrona

Domande frequenti

Altre integrazioni