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

Perché utilizzare 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 montaggio stimato: 2–3 hours. Difficoltà: Livello 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 7 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 (keeps the API key private)
export async function POST(req: Request) {
  const form = await req.formData(); // garment_image + person_image from the browser

  const res = await fetch("https://www.tryoncloud.com/api/v1/generate", {
    method: "POST",
    headers: { "X-API-KEY": process.env.TRYONCLOUD_API_KEY! },
    body: form,
  });

  if (!res.ok) {
    return Response.json(await res.json(), { status: res.status });
  }
  // The response body IS the PNG — stream it straight back to the browser.
  return new Response(res.body, { headers: { "Content-Type": "image/png" } });
}

// components/TryOnButton.tsx (client)
async function runTryOn(garment: File, person: File) {
  const fd = new FormData();
  fd.append("garment_image", garment);
  fd.append("person_image", person);
  const res = await fetch("/api/tryon", { method: "POST", body: fd });
  if (!res.ok) { const { error } = await res.json(); throw new Error(error); }
  return URL.createObjectURL(await res.blob()); // <img src={thisUrl} />
}

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 7 secondi — progettare l'interfaccia utente per un'esperienza asincrona

Domande frequenti

Altre integrazioni