API de prueba virtual para React, Next.js y Angular — Guía de front-end

Por qué usar TryOnCloud con React & Next.js

• Funciona con cualquier marco de trabajo de JavaScript: React, Next.js, Angular, Vue
• Tipos de TypeScript definidos para los formatos de solicitud y respuesta de la API
• Se incluye un ejemplo de ruta de API de Next.js: la clave de API se almacena en el servidor
• El hook «useVirtualTryOn» de React permite una integración limpia en los componentes
• Preparado para la transmisión: muestra un indicador de carga mientras la IA procesa los datos

Cómo configurar TryOnCloud en React & Next.js

Tiempo estimado de configuración: 2–3 hours. Dificultad: Intermedio.

1. 1

   Crear una ruta de API proxy del lado del servidor

   En Next.js, crea el archivo app/api/tryon/route.ts. Esta ruta llama a la API de TryOnCloud utilizando tu clave API, que se encuentra en las variables de entorno. Nunca llames a TryOnCloud directamente desde el navegador.

2. 2

   Gestionar la subida de imágenes

   Crea un punto final de carga (app/api/upload-url/route.ts) que devuelva una URL prefirmada para la foto del cliente. El navegador realiza la carga directamente en la URL firmada, sin pasar por tu servidor.

3. 3

   Crea el componente de prueba de React

   Crea un componente TryOnButton que active un selector de archivos, suba la foto, llame a tu proxy /api/tryon y consulte /api/result/{id} hasta que el resultado esté listo.

4. 4

   Mostrar el resultado

   Muestra la imagen del resultado en una ventana modal o en línea debajo de la imagen del producto. Añade un botón «Comparar» para alternar entre la foto original del producto y el resultado de la prueba.

5. 5

   Añadir estados de error y de carga

   Muestra un indicador de carga durante los 15-20 segundos que tarda el proceso. Gestiona los errores de la API (formato no compatible, no se ha detectado ninguna prenda) con mensajes claros y fáciles de entender.

Ejemplo de código

Next.js: Proxy de rutas de API del lado del servidor + hook de 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 }
}

Cosas que debes saber

• ⓘLa clave API debe mantenerse en el servidor; nunca la reveles en el JavaScript del lado del cliente
• ⓘPara subir una imagen se necesita un punto final de carga de archivos (el ejemplo proporcionado utiliza rutas de la API de Next.js)
• ⓘEl tiempo de procesamiento es de 15 a 20 segundos: diseña una interfaz de usuario para una experiencia asíncrona

Preguntas frecuentes

Otras integraciones