API d'essayage virtuel pour React, Next.js et Angular — Guide Frontend

Pourquoi utiliser TryOnCloud avec React & Next.js

• Compatible avec tous les frameworks JavaScript : React, Next.js, Angular, Vue
• Types TypeScript fournis pour les formats des requêtes et des réponses API
• Exemple de route API Next.js inclus — la clé API est conservée côté serveur
• Le hook React `useVirtualTryOn` permet une intégration transparente des composants
• Prêt pour le streaming — affiche un indicateur de chargement pendant le traitement par l'IA

Comment configurer TryOnCloud sur React & Next.js

Temps d'installation estimé : 2–3 hours. Difficulté : Intermédiaire.

1. 1

   Créer une route d'API proxy côté serveur

   Dans Next.js, créez le fichier app/api/tryon/route.ts. Cette route appelle l'API de TryOnCloud en utilisant votre clé API provenant des variables d'environnement. N'appelez jamais TryOnCloud directement depuis le navigateur.

2. 2

   Gérer le téléchargement d'images

   Créez un point de terminaison de téléchargement (app/api/upload-url/route.ts) qui renvoie une URL pré-signée pour la photo du client. Le navigateur effectue le téléchargement directement vers l'URL signée, sans passer par votre serveur.

3. 3

   Créer le composant d'essayage React

   Créez un composant TryOnButton qui ouvre une fenêtre de sélection de fichiers, télécharge la photo, appelle votre proxy /api/tryon et interroge l'URL /api/result/{id} jusqu'à ce que le résultat soit prêt.

4. 4

   Afficher le résultat

   Affichez l'image du résultat dans une fenêtre modale ou en ligne sous l'image du produit. Ajoutez un bouton « Comparer » pour basculer entre la photo originale du produit et le résultat de l'essayage.

5. 5

   Ajouter des états d'erreur et de chargement

   Affichez un indicateur de chargement pendant les 15 à 20 secondes que dure le traitement. Traitez les erreurs renvoyées par l'API (format non pris en charge, aucun vêtement détecté) à l'aide de messages clairs et compréhensibles.

Exemple de code

Next.js : Proxy de route API côté serveur + 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 }
}

Ce qu'il faut savoir

• ⓘLa clé API doit être conservée côté serveur — ne jamais la divulguer dans le JavaScript côté client
• ⓘLe téléchargement d'images nécessite un point de terminaison de téléchargement de fichiers (l'exemple fourni utilise les routes API de Next.js)
• ⓘLe temps de traitement est de 15 à 20 secondes — concevoir une interface utilisateur adaptée à une expérience asynchrone

Questions fréquemment posées

Autres intégrations