Oluşturulan Dosya İndirme Bağlantılarının Nasıl Kullanılacağına İlişkin Önemli Güncelleme

Sevgili Tripo Kullanıcıları,

Platformumuzdaki kaynaklara nasıl eriştiğinizi ve bunları nasıl kullandığınızı etkileyebilecek yaklaşan bir değişiklik hakkında sizi bilgilendirmek için yazıyoruz.

Neler Değişiyor?

Oluşturulan tüm artifact URL'lerinde CORS policy uygulamasını zorunlu hale getireceğiz. Bu, platformumuzda barındırılan tüm kaynakların cross-origin istekleri için uygun şekilde ele alınmasını gerektireceği anlamına gelir; başka bir deyişle, Tripo'nun API'sinin size döndürdüğü bağlantıyı kullanarak oluşturulan model dosyalarını doğrudan sunamazsınız.

Bu Neden Uygulanıyor?

Bu değişiklik, security'yi iyileştirme ve farklı origin'ler arasında kaynaklara unauthorized access'i önleme taahhüdümüzün bir parçasıdır. CORS (Cross-Origin Resource Sharing), sunucuların hangi harici domain'lerin kaynaklara erişebileceğini belirtmesine olanak tanıyan bir mekanizmadır.
CORS'un ne olduğu hakkında daha fazla bilgi için MDN'nin rehberine başvurabilirsiniz.

Workflow'unuza Etkisi

Şu anda artifact URL'leri için CORS header'ları sağlamıyoruz. Sonuç olarak, bu kaynakları bir tarayıcıda veya harici domain'lerden doğrudan kullanıyor ya da bağlanıyorsanız sorun yaşayabilirsiniz.
Bu asset'lere erişimin kesintisiz devam etmesini sağlamak için aşağıdaki işlemlerden birini yapmanız gerekecek:

1. Artifact'leri İndirip Local Olarak Yeniden Kaydedin: Artifact'leri indirip backend'inizde saklayabilirsiniz. Local olarak kaydettikten sonra bu asset'leri sunucunuzdan CORS kısıtlamaları olmadan sunabilirsiniz.
2. Bir Edge Proxy Kullanın (ör. Next.js API Route, Cloudflare Workers): Gerekli CORS header'larını yanıtlara eklerken artifact'leri almak ve sunmak için bir edge proxy kullanabilirsiniz. Örneğin:
   • Next.js API Route: Platformumuzdan kaynakları alan ve bunları uygun CORS header'larıyla ileten bir API route kurun.
   • Cloudflare Workers: Sunucunuzdan asset'lerimizi sunarken CORS header'ları eklemek için Cloudflare Workers kullanın.

Nasıl Hazırlanmalısınız:

• Entegrasyonunuzu gözden geçirin: Sisteminizin artifact URL'leri için CORS'u işleyebildiğinden emin olun.
• Artifact'leri indirip kaydedin: Bir edge proxy kullanmıyorsanız, artifact'leri indirip backend'inizde saklamayı düşünün.
• Bir edge proxy kurun: Next.js veya Cloudflare Workers gibi çözümler kullanıyorsanız, asset'lerin uygun CORS header'larıyla sunulduğundan emin olmak için yapılandırmanızı güncelleyin.
• Sisteminizi test edin: Platformumuza yapılan tüm cross-origin isteklerinin beklendiği gibi çalıştığını doğrulayın.

Pratik kod örneklerine mi ihtiyacınız var? Nasıl başlayacağınızdan emin değilseniz veya süreci uygulamak size zor geliyorsa, başlamanıza yardımcı olmak için pratik kod snippet'leri hazırladık. Daha fazla ayrıntı için lütfen Ek bölümüne bakın.

SSS

• Oluşturduğum dosya kayboldu mu?
  Hayır. API'den istediğiniz zaman her zaman yeni bir URL alabilirsiniz.
• URL'nizi doğrudan döndürmüyorum, ancak bazı post-processing işlemleri yapıyorum. Endişelenmeli miyim?
  Kullanıcılarınıza URL'mizi doğrudan döndürmüyorsanız, bu değişikliği atlayabilirsiniz. Ancak özellikle herhangi bir hata artışı veya sisteminizde olağandışı davranış fark ederseniz kullanımınızı izlemenizi öneririz.

Yardıma mı İhtiyacınız Var?

Bu değişikliğin workflow'unuzda güncellemeler gerektirebileceğini anlıyoruz. Bir edge proxy kurma konusunda yardıma ihtiyacınız varsa veya bu geçiş hakkında sorularınız varsa, lütfen support@tripo3d.ai adresinden destek ekibimizle iletişime geçin.
Platformumuzdaki security'yi geliştirmek için çalışırken gösterdiğiniz iş birliği için teşekkür ederiz! Güvende ve üretken kalın!
Saygılarımızla,
Tripo Ekibi

Ek A: Backend resave yaklaşımı

FastAPI kullanıyorsanız (başka herhangi bir framework veya dile taşınması ya da çevrilmesi kolaydır), CORS'u ele almak ve artifact'i local olarak kaydetmek için mevcut kodunuzu şu şekilde uyarlayabilirsiniz:

Mevcut Kod:

@app.post("/")
def generate(prompt: str) -> str:
    resp = ...  # API works
    return resp.json()['url']

Bunu kolayca şu şekilde değiştirebilirsiniz:

import httpx
import uuid

from fastapi.responses import FileResponse
from fastapi import HTTPException

@app.post("/")
def generate(prompt: str) -> str:
    resp = ...  # same as above

    # Add the code below
    file_id = str(uuid.uuid4())
    with httpx.Client() as client:
        # Download the artifact
        response = client.get(url)

        # Check if the request was successful
        if response.status_code == 200:
            # Then resave it
            with open(f"./downloaded/{file_id}.glb", "wb") as file:
                file.write(response.content)

    return file_id

@app.get("/artifact/{file_id}")
def download(file_id: str) -> FileResponse:
    if os.path.exists(f"./downloaded/{file_id}.glb"):
      return FileResponse(f"./downloaded/{file_id}.glb")
    raise HTTPException(status_code=404, detail="Item not found")

Dosyayı indirip local olarak kaydettikten sonra kullanıcılarınıza yeni URL'yi sunmalısınız. Örneğin, uygulamanız https://app.example.com adresinde barındırılıyorsa, sunmanız gereken URL şu şekilde görünecektir:

https://app.example.com/artifact/<file_id>

Bu kod snippet'i, entegrasyonunuzu nasıl uyarlayacağınızı göstermek için yalnızca bir örnektir. Ancak dikkate almanız gereken birkaç önemli nokta vardır:

• Uygun authentication ekleyin: Unauthorized access'i önlemek için indirme bağlantılarının uygun authentication yöntemleriyle korunduğundan emin olun.
• Güvenilir storage kullanın: Dosyaları dedicated sunucular veya S3 bucket'ları gibi cloud storage seçenekleri gibi daha güvenilir storage çözümlerine kaydetmeniz önerilir.
• Metadata saklayın: Gelecekte kullanmak üzere (örneğin tracking veya auditing için) artifact metadata'sının kaydını veritabanınızda veya başka bir storage sisteminde tutun.

Ek B: Edge Proxy Yaklaşımı

Bir Single Page Application (SPA) veya Backend for Frontend (BFF) sunucusu geliştiriyorsanız ve dosya indirme ile storage işlemlerini doğrudan sunucunuzda yönetmemeyi tercih ediyorsanız, bir edge proxy yaklaşımı kullanabilirsiniz. Bu, dosyayı sunucumuzdan almanıza, gerekli CORS header'larını uygulamanıza ve ardından kullanıcılarınıza sunmanıza olanak tanır.

Çözüm 1: Edge Functions Kullanarak Dosyayı İndirip Yeniden Gönderin

Aşağıda bu yaklaşımın Cloudflare Workers kullanılarak nasıl uygulanacağına dair bir örnek bulunmaktadır. Bu çözüm, dosyayı indirip kendi domain'iniz altında yeniden göndererek CORS sorunlarını ele alacaktır.

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  // Parse the request URL
  const url = new URL(request.url);

  // Get the target URL from the 'url' query parameter
  const targetUrl = url.searchParams.get('url');

  // If no URL is provided, return an error
  if (!targetUrl) {
    return new Response('Please provide a URL parameter', {
      status: 400,
      headers: {
        'Content-Type': 'text/plain',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, OPTIONS',
        'Access-Control-Allow-Headers': 'Content-Type'
      }
    });
  }

  // Handle preflight OPTIONS request
  if (request.method === 'OPTIONS') {
    return handleCORS();
  }

  try {
    // Fetch the file from the target URL
    const response = await fetch(targetUrl);

    // If the fetch failed, return the error
    if (!response.ok) {
      return new Response(`Failed to fetch from target URL: ${response.statusText}`, {
        status: response.status,
        headers: corsHeaders()
      });
    }

    // Get the content type from the response or default to octet-stream
    const contentType = response.headers.get('Content-Type') || 'application/octet-stream';

    // Get the content disposition or create one from the URL
    let contentDisposition = response.headers.get('Content-Disposition');
    if (!contentDisposition) {
      // Extract filename from the URL
      const fileName = targetUrl.split('/').pop().split('?')[0] || 'file';
      contentDisposition = `attachment; filename="${fileName}"`;
    }

    // Create a new response with CORS headers
    const newResponse = new Response(response.body, {
      status: response.status,
      statusText: response.statusText,
      headers: {
        'Content-Type': contentType,
        'Content-Disposition': contentDisposition,
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, OPTIONS',
        'Access-Control-Allow-Headers': 'Content-Type',
        'Cache-Control': 'public, max-age=3600' // Cache for 1 hour
      }
    });

    return newResponse;
  } catch (error) {
    return new Response(`Error fetching the file: ${error.message}`, {
      status: 500,
      headers: corsHeaders()
    });
  }
}

// Handle CORS preflight requests
function handleCORS() {
  return new Response(null, {
    status: 204, // No content
    headers: corsHeaders()
  });
}

// Create CORS headers object
function corsHeaders() {
  return {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, OPTIONS',
    'Access-Control-Allow-Headers': 'Content-Type',
    'Access-Control-Max-Age': '86400' // 24 hours
  };
}

Cloudflare Worker'ınız kurulduktan sonra, dosyayı almak için aşağıdaki JavaScript kodunu kullanarak bunu SPA'nıza entegre edebilirsiniz:

fetch('https://your-worker-url.workers.dev/?url=<target_url>')
  .then(response => response.blob())
  .then(blob => {
    // Create a download link
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'downloaded-file.pdf';
    document.body.appendChild(a);
    a.click();
    a.remove();
  })
  .catch(error => console.error('Error:', error));

Bu çözüm, son kullanıcılara dosya indirip sunarken CORS kısıtlamalarını aşması gereken SPA'ler veya BFF sunucuları için idealdir. Dosya hedef URL'den alınır, edge proxy üzerinden geçirilir ve gerekli CORS header'larıyla sunulur.

Çözüm 2: Bir CORS header proxy kurun

Basit bir CORS proxy kurmayı tercih ediyorsanız, Cloudflare tarafından sağlanan şu örneğe başvurabilirsiniz: Cloudflare Workers - CORS Header Proxy
Bu, CORS policy'lerine uymaya devam ederken cross-origin isteklerini daha kolay ele almanıza olanak tanır.

Önemli Hususlar:

• Authentication: Dosyalarınıza unauthorized access'i önlemek için edge functions'larınızı authentication yöntemleriyle (ör. API keys, OAuth vb.) düzgün şekilde güvence altına aldığınızdan emin olun.
• Storage: Bu yaklaşım işe yarasa da, özellikle büyük ölçekli indirmeleri yönetmeniz veya kaynaklara güvenilir erişim sağlamanız gerekiyorsa, artifact'i gelecekte kullanmak üzere yine de sunucunuza kaydetmenizi öneririz.