複数のAI機能を組み合わせる
複数のAI機能を組み合わせて、ユニークな画像変換を作り出すことを想像してください。不必要なオブジェクトを除去し、背景を置き換え、欠けている部分を埋め、背景を削除し、画像の解像度を向上させることが、一度に実現できます。imgixは、複数のAI機能を組み合わせてユニークな画像変換を提供するユニークな機能を備えています。
このチュートリアルでは、複数のAI機能を組み合わせて、ユニークな画像変換を即座に作成する方法を紹介します。使用する機能は次の通りです：
非同期処理
Rendering APIは複数のAI変換を非同期に処理し、完了までに数秒かかります。プロセスは次のように進行します：
- 複数のAI機能を使った画像変換をリクエストします
- 画像変換は次の順序で非同期に処理されます：
- 変換中は、仮の
423ステータスコードを受け取ります
- 画像URLをポーリングして変換が完了したか確認できます
- 画像変換は平均で30秒以内に完了します
- 全ての変換が完了すると、画像URLをリクエストすることで変換された画像が返されます
- その後のリクエストでは即座に変換後の画像が返されます
- 一部の変換パラメータ（新しいAIパラメータの追加など）は再度
423ステータスを引き起こすことがあります
背景置き換えとオブジェクト除去を組み合わせる
時には、画像を完全に再構築したい場合があります。複数のAI機能を組み合わせることで、オブジェクトを削除し、プロンプトに従って背景を置き換えることで、画像をオンデマンドで再作成できます。
この例では、背景置き換えとオブジェクト除去機能を組み合わせて、画像から不要なオブジェクトを削除し、背景を土のテクスチャに置き換えます。
この例では何が起こっているか：
object-removal-rectパラメータに2つの矩形を指定して、画像から不要なオブジェクトを除去しますbg-replace=dirt-textureを使用して背景を土のテクスチャに置き換えます
背景除去と超解像度を組み合わせる
別のユースケースとして、ユーザーが送信した写真をクリーンアップし、解像度を向上させる必要がある場合があります。この例では、背景除去と超解像度機能を組み合わせて、背景を削除し、画像の解像度を向上させます。
この例では何が起こっているか：
bg-remove=trueを使用して画像から背景を削除しますupscale=trueを使用して画像の解像度を向上させます- さらに、新しいグラデーションフィルを追加して、この画像をグレーの背景で整えています
スムーズなユーザーエクスペリエンスのための画像ポーリング
ブラウザでAI合成を試している場合、ページを更新し続けることで変換が完了するのを見ることが簡単です。しかし、実運用環境では、画像URLをポーリングして変換が完了したかを確認したいでしょう。
次の簡単な例では、画像URLをポーリングして変換が完了したかを確認する方法を示します：
const imageUrl =
"https://assets.imgix.net/unsplash/backpack-unsplash.jpg?fill-gradient-linear=D8D7DD,FDFDFD&fill-gradient-type=linear&fill=gradient&fit=fill&upscale=true&bg-remove=true"
// 画像URLをポーリングする関数
const pollImage = async (url) => {
const response = await fetch(url)
// レスポンスステータスが423かどうか確認
if (response.status === 423) {
setTimeout(() => pollImage(url), 1000)
} else {
// ステータスが423でなければ、画像変換は完了しています
console.log("画像変換が完了しました！")
}
}
// 画像URLのポーリングを開始
pollImage(imageUrl)より高度なポーリングの例は、このCodeSandboxで確認できます。
結論
複数のAI変換を連鎖させる能力は、あらゆる画像を簡単に再構築できる強力なツールです。
連鎖変換には完了までに数秒かかるため、プロセスの非同期性を理解し、必要に応じてポーリングの実装を行うことが重要です。
これらの技術を活用することで、AI駆動の変換のフルポテンシャルを引き出し、視覚的に素晴らしいコンテンツを作成し、ワークフロー効率を向上させ、洗練されたユーザー体験を提供できます。