Geliştirin · Sanal Try-On

Uygulamanız için sanal bir try-on özelliği geliştirin

Tek cümlede

Ürün fotoğrafını arka ucunuzda kabul edin, bir mannequin ID ile birlikte /api/v1/tryon/apparel adresine POST edin, dönen generation ID'yi durum completed değerine geçene kadar bir arka plan worker'ından (asla HTTP istek iş parçacığından değil) polling ile sorgulayın, ardından output_url değerini kendi nesne deponuzda kalıcı hale getirin ve arayüzde render edin.

API anahtarı alınSanal try-on API'sini inceleyin
  • Credits: 2K'da 5 credits · 4K'da 6 credits
  • Tipik süre: 1.5–4 min
  • İşleme: asenkron, polling

Bu sayfadaki her veri şuradan alınmıştır: Photta API dokümantasyonu · kontrol edildi

Canlı ortama uygun bir reçete: müşteri ürün fotoğrafını yükler, arka ucunuz bir Photta try-on işini sıraya alır, bir worker sonuç gelene kadar polling yapar, ön yüz model üzerindeki sonucu gösterir. İstekleri bloke etmek yok, sızdırılan API anahtarları yok, sahte SDK'lar yok.

RESPONSE=$(curl -s -X POST https://api.photta.app/api/v1/tryon/apparel \
  -H "Authorization: Bearer $PHOTTA_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
  "product_type": "top",
  "product_images": [
    "https://cdn.yourstore.com/products/shirt-front.jpg"
  ],
  "product_back_image": "https://cdn.yourstore.com/products/shirt-back.jpg",
  "product_category": "t_shirt",
  "mannequin_id": "mnk_f3a9b1",
  "pose_id": "pose_c2d4e5",
  "background": "https://cdn.yourstore.com/backgrounds/studio-loft.jpg",
  "lock_background": true,
  "resolution": "2K",
  "aspect_ratio": "3:4",
  "body_size": "M",
  "expression": "neutral",
  "user_instruction": "Keep the collar pattern crisp and centered."
}')
ID=$(echo "$RESPONSE" | jq -r '.data.id')

Nasıl çalışır

Yüklemeden model üzerindeki görsele

Altı somut adım. İlk seferde on ila on beş dakikalık bir entegrasyon çalışması öngörün.

  1. Adım 1

    Veri akışının taslağını çıkarın

    Müşteri cihazı → arka ucunuz (yükleme) → Photta API (gönderme) → Photta API (polling) → veritabanınız (durum yansıtma) → müşteri cihazı (render). İlk satırı yazmadan önce bunu kağıt üzerinde çizin — arka ucunuz ile Photta'nınki arasındaki sınır, asıl önemli olan tek şeydir.

  2. Adım 2

    Bir API anahtarı oluşturun ve saklayın

    Canlı ortam anahtarları photta_live_ ile başlar. Bunu bir ortam değişkenine koyun. Asla tarayıcıya göndermeyin. Tek bir anahtar tüm Photta yeteneklerini kapsar, bu nedenle try-on, takı veya ghost mannequin için ayrı anahtarlara ihtiyacınız yoktur.

  3. Adım 3

    Yükleme endpoint'ini bağlayın

    Müşterinin ürün fotoğrafını önce nesne depolama alanına kabul edin. Photta'ya herkese açık bir URL vermek base64'ten daha basittir ve her istek için size bir denetim kaydı sağlar.

  4. Adım 4

    İşi sunucudan gönderin

    Ürün URL'si, mannequin_id, resolution ve aspect_ratio ile birlikte /api/v1/tryon/apparel adresine POST isteği atın. API, 202 Accepted + bir generation ID döner. İstemcinizin Photta'nınkini değil, kendi endpoint'inizi sorgulayabilmesi için ID'yi veritabanınızda saklayın.

  5. Adım 5

    Bir arka plan worker'ından polling yapın

    HTTP isteği içinde polling yapmayın — iş 1.5 ila 4 dakika sürer, bu da çoğu sunucusuz zaman aşımı süresini aşar. İş tamamlanana kadar her 3 saniyede bir polling işlemini yeniden planlamak için Trigger.dev, Inngest, BullMQ, Vercel Cron veya kendi kuyruk sisteminizi kullanın.

  6. Adım 6

    Sonucu render edin

    Durum completed değerine geçtiğinde, data.output_url değerini veritabanınıza kopyalayın ve müşterinin cihazına gerçek zamanlı bir olay (websocket, SSE veya long-poll) iletin. Arayüz, yükleme iskeletini görselle değiştirir. Bitti.

Üç kod örneği, uçtan uca

Yükleme işleyicisi, iş dağıtıcısı, worker tarafı poller — özelliği canlıya almak için ihtiyacınız olan her parça.

// POST /app/try-on → your backend upload handler
import { put } from "@vercel/blob";

export async function uploadProduct(file: File) {
  const { url } = await put(`products/${crypto.randomUUID()}.jpg`, file, {
    access: "public",
  });
  return url;
}
const res = await fetch("https://api.photta.app/api/v1/tryon/apparel", {
  method: "POST",
  headers: { Authorization: `Bearer ${process.env.PHOTTA_API_KEY}`, "Content-Type": "application/json" },
  body: JSON.stringify({
    "product_type": "top",
    "product_images": [
      "https://cdn.yourstore.com/products/shirt-front.jpg"
    ],
    "product_back_image": "https://cdn.yourstore.com/products/shirt-back.jpg",
    "product_category": "t_shirt",
    "mannequin_id": "mnk_f3a9b1",
    "pose_id": "pose_c2d4e5",
    "background": "https://cdn.yourstore.com/backgrounds/studio-loft.jpg",
    "lock_background": true,
    "resolution": "2K",
    "aspect_ratio": "3:4",
    "body_size": "M",
    "expression": "neutral",
    "user_instruction": "Keep the collar pattern crisp and centered."
  }),
});
const { data } = await res.json(); // data.id, data.status
// Trigger.dev / Inngest / BullMQ task
const BASE = "https://api.photta.app/api/v1";

export const pollTryOnTask = task({
  id: "poll-try-on",
  run: async ({ generationId, attempt = 0 }) => {
    const res = await fetch(`${BASE}/tryon/apparel/${generationId}`, {
      headers: { Authorization: `Bearer ${process.env.PHOTTA_API_KEY}` },
    });
    const { data } = await res.json();
    if (data.status === "completed") return data.output_url;
    if (data.status === "failed") throw new Error(data.error_message);
    if (attempt >= 120) throw new Error("try-on timed out");
    // Re-schedule this same task after 3 seconds.
    return ctx.retry.after(3000, { generationId, attempt: attempt + 1 });
  },
});

Geliştiricilerin sıkça sorduğu sorular

Canlıya almadan önceki sorular

Bunu bir backend olmadan yapabilir miyim?

Hayır. Photta API anahtarınız sunucu tarafında kalmalıdır. İnce bir Next.js route handler veya Cloudflare Worker bile bu amaç doğrultusunda bir backend sayılır — anahtarın yalnızca kullanıcı istemcisinin (user-agent) okuyamayacağı bir yerde bulunması gerekir.

Askıda kalan HTTP isteklerini nasıl önlerim?

Asla bir request handler içinde polling yapmayın. İşi senkron olarak gönderin, istemciye generation ID değerini dönün ve bir background worker üzerinden polling yapın. İstemci Photta'nınkini değil, SİZİN status endpoint'inizi yoklar — böylece rate limit'leri yönetmek her bir kullanıcının değil, sizin sorumluluğunuz olur.

Bir iş işlem sırasında başarısız olursa ne olur?

Photta, başarısızlık durumunda credits iadesini otomatik olarak yapar ve yanıtta data.error_code + data.error_message yer alır. Kullanıcıya anlaşılır bir mesaj gösterin ve yeni bir iş başlatan bir yeniden deneme butonu sunun.

Gerçek ilerleme durumunu gösterebilir miyim?

Photta ara ilerleme durumu yaymaz — durum processing, completed ya da failed şeklindedir. 1.5–4 dakikalık aralığa göre kalibre edilmiş zaman ayarlı bir ilerleme çubuğu veya basit bir skeleton loader gayet iyi iş görür. Yüzdeler konusunda yanıltıcı olmayın.

Sonuç URL'si kalıcı mı?

CDN URL'si kararlıdır, ancak ürününüz uzun vadeli render işlemleri için buna bağımlı olmamalıdır. Baytları bir kez indirin ve kendi S3/GCS/R2 bucket'ınızda saklayın — böylece Photta'nın CDN'i değişse bile PDP'niz çalışmaya devam eder.

İlgili sayfalar

Referans

Bu sayfadaki her veri şuradan alınmıştır: Photta API dokümantasyonu · kontrol edildi

Bir öğleden sonrada sanal try-on özelliğini yayınlayın

Bu sayfadaki her kod örneği resmi Photta dokümantasyonuyla birebir eşleşir. Bir API anahtarı alın; kahveniz demlenene kadar çalışan bir prototipiniz hazır olsun.

API anahtarı alınHızlı başlangıç kılavuzunu okuyun