API de experimentação virtual para React, Next.js e Angular — Guia de Frontend

Por que usar TryOnCloud com React & Next.js

• Funciona com qualquer framework JavaScript — React, Next.js, Angular, Vue
• Tipos TypeScript fornecidos para os formatos de pedidos e respostas da API
• Exemplo de rota da API do Next.js incluído — mantém a chave da API no lado do servidor
• O hook useVirtualTryOn do React está disponível para uma integração simples de componentes
• Pronto para streaming — exibe um indicador de carregamento enquanto a IA processa

Como configurar TryOnCloud em React & Next.js

Tempo estimado de configuração: 2–3 hours. Dificuldade: Intermédio.

1. 1

   Criar uma rota de API proxy do lado do servidor

   No Next.js, crie o ficheiro app/api/tryon/route.ts. Esta rota chama a API do TryOnCloud utilizando a sua chave de API a partir das variáveis de ambiente. Nunca chame o TryOnCloud diretamente a partir do navegador.

2. 2

   Gerir o envio de imagens

   Crie um ponto final de upload (app/api/upload-url/route.ts) que devolva um URL pré-assinado para a fotografia do cliente. O navegador faz o upload diretamente para o URL assinado, sem passar pelo seu servidor.

3. 3

   Criar o componente de experimentação do React

   Crie um componente TryOnButton que acione um seletor de ficheiros, carregue a fotografia, chame o seu proxy /api/tryon e verifique /api/result/{id} até que o resultado esteja pronto.

4. 4

   Mostrar o resultado

   Mostre a imagem do resultado numa janela modal ou em linha, abaixo da imagem do produto. Adicione um botão «Comparar» para alternar entre a foto original do produto e o resultado da simulação de experimentação.

5. 5

   Adicionar estados de erro e carregamento

   Mostre um indicador de carregamento durante o período de processamento de 15 a 20 segundos. Trate os erros da API (formato não suportado, nenhuma peça de roupa detetada) com mensagens de fácil compreensão para o utilizador.

Exemplo de código

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

O que deve saber

• ⓘA chave API deve ser mantida no lado do servidor — nunca a exponha no JavaScript do lado do cliente
• ⓘO carregamento de imagens requer um ponto final de carregamento de ficheiros (o exemplo fornecido utiliza rotas da API do Next.js)
• ⓘO tempo de processamento é de 15 a 20 segundos — conceba uma interface de utilizador para uma experiência assíncrona

Perguntas frequentes

Outras integrações