Image Playgroundによる高品質な画像の生成

Image Playgroundを使用した高品質な画像生成をアプリに実装しましょう。プライベートクラウドコンピューティング上で実行される新しい生成モデルにより、写真のようにリアルなスタイルを含むほぼあらゆるスタイルの画像を、ユーザーがアプリ上で生成できます。サイズを指定してより多くの場所に配置できるようにしたり、自然言語による説明やタッチ操作で画像を変更したりもできます。Image Playgroundの導入方法、テキストや写真から画像を生成する方法、アプリ内での機能の利用可否を管理する方法を解説します。

リソース

- HDビデオ
- SDビデオ

関連ビデオ

WWDC26

WWDC24

ジェン文字でアプリに表情を追加

こんにちは、Antonioです。 Image Playgroundチームのエンジニアです。

今日は、Image Playgroundをアプリに組み込む方法をご紹介します。

ユーザーはMessagesの Image Playgroundで画像を作成し、 FreeformやさまざまなアプリでもImage Playgroundを活用してきました。シーンを組み合わせ、さまざまなスタイルを試しながら個性的な表現を楽しんできました。強力な画像モデルを核に体験を一新します。そして今、大きな飛躍を遂げました。あらゆるスタイルで高品質な画像を生成できます。フォトリアルな画像も本物さながらの仕上がりになりました。

ImagePlaygroundフレームワークがその体験全体をもたらします。同じ強力なモデル、同じスタイル、同じクオリティをアプリに直接組み込めます。 Image PlaygroundアプリはiOS、iPadOS、 macOS、visionOSで利用できます。 Apple Intelligenceに対応したデバイスで動作し、生成モデルのフルパワーをアプリにもたらします。

Image Playgroundアプリと同様に、 ImagePlayground.framework APIを活用できます。同じプラットフォームで利用可能です。では、Image Playgroundをアプリに追加する方法を見ていきましょう。まず機能について説明します。画像生成モデルが何を作れるかを見ていきます。

次にImage Playgroundの採用方法を説明します。シートを表示してアプリのコンテキストでシードする方法です。

その後、オプションとしてサイズ、アスペクト比、スタイルの設定。最後に利用可能性について。アプリが対応デバイスと非対応デバイスの両方を正しく処理する方法です。

コードを書く前に、 Image Playgroundがアプリで何を実現できるかを見てみましょう。テキストで説明を与えると、それに合った画像を生成します。具体的にも漠然とも指定できます。「犬と風船と紙吹雪の誕生日パーティー」のように。または「お祝い」の一言でも。残りはモデルが処理します。モデルは人物を含む画像を作成でき、 1つのシーンに複数の人物も描けます。パーソナライズを有効にすると、ユーザーはPhotosライブラリから人物を追加できます。またはテキストで外見を説明することもできます。個人的な雰囲気の画像が生成されます。さまざまなスタイルが利用できます。スタイルを指定せずに画像を作成することもできます。テキストで希望のスタイルを指定することも可能です。油絵スタイルを指定するといった具合に。

またはプリセットを使うこともできます。 Animationは遊び心のある雰囲気を加えます。 Illustrationは洗練されたエディトリアルな印象を与えます。

Sketchは手描きの質感を演出します。

Genmojiは表情豊かなテキストに直接埋め込める絵文字サイズのキャラクター向けスタイルです。

Image Playgroundは複数のサイズとアスペクト比に対応しています。バナー用の横長画像をリクエストできます。 iPhoneでフルスクリーン表示用の縦長画像も作れます。またはサムネイル用の正方形画像も可能です。モデルはリクエストしたサイズに最も近い対応解像度を選択します。これらはすべて Private Cloud Compute上で動作します。 Appleのプライバシーを保護するクラウドインフラです。データはAppleも含め保存も共有もされません。詳しい仕組みについては、「Build with the new Apple Foundation Model on Private Cloud Compute」をご覧ください。

Image Playgroundには利用制限があります。強力なサーバーモデルに依存しているためです。ほとんどのiCloud+プランでより多くのアクセスが利用できます。デベロッパには解決すべき問題ではありません。プロビジョニングするサーバーも、維持するインフラも不要です。システムがユーザーに代わって利用制限を管理するので、利用状況に関するUIを構築する必要はありません。フレームワークを呼び出すだけで、あとはAppleが処理します。モデルをPrivate Cloud Computeに移行したことで APIも再設計しました。コードから直接画像を生成する非UI APIのImageCreatorは非推奨になりました。

すべての機能が新しいAPIで利用できます。より高い画像品質と組み込みのプライバシー、ユーザーが使い慣れた完全な体験を提供します。今日アプリでImageCreatorを使用している場合はご覧ください。

では、Image Playgroundをアプリに追加する方法を見ていきましょう。コードの実装方法を示すために、 Postcardsというグリーティングカード作成アプリを開発しました。 Postcardsではカスタムカードをデザインし、個人的なメッセージを書いてレイアウトを選べます。最後のピースはカードの表面に使うカスタムアートワークです。そこでImage Playgroundの出番です。 Image Playgroundの採用は 1つのビューモディファイアから始まります。 SDKの初期化もAPIキーもエンドポイントも不要、モディファイアだけです。 .imagePlaygroundSheetをボタンに追加し @Stateブール値にバインドします。バインドがtrueになるとシートが表示されます。 Image Playgroundがすべてを処理します。 UI、モデルとのやり取り、スタイルピッカーも含めてです。

ユーザーが画像を承認すると、クロージャは生成ファイルへの URLを受け取ります。そのURLはアプリコンテナ内の一時的な場所を指しており、セッション終了前に別の場所に保存してください。シートは完成された一貫した体験としてアプリに組み込まれます。ユーザーは説明を入力しスタイルオプションを閲覧し、ライブラリから人物を追加でき、確認前に結果をプレビューできます。アプリは表示可能な最終URLを受け取ります。シートは空のプロンプトで開くかアプリのコンテキストをシードとして使えます。より豊かな初期体験のためです。

ImagePlaygroundConceptには 2つのファクトリーメソッドがあります。 textは直接の説明をラップします。桜などカードのテーマを渡す例です。 extractedはより長いテキストを受け取りシステムが最も関連するアイデアを抽出します。カードのメッセージを渡すことで、カードの内容をモデルが把握します。コンセプトを設定すれば、このカード専用にプライムされた状態でシートが開きます。ユーザーは一から始める必要がありません。シートに画像をシードすることもできます。任意のSwiftUI ImageをsourceImageパラメータに渡します。ライブラリから選んだ写真や、カードにすでにある画像でも構いません。 Image Playgroundはコンセプトと並んで視覚的なインスピレーションとして使います。ユーザーはシート内で変更や調整ができます。出発点であり制約ではありません。 iPadでは、Postcardsはカード表面の下に小さなキャンバスを表示します。 ImagePlaygroundConcept.drawingはPencilKitから PKDrawingを受け取り、テキストと並んでコンセプトとして追加します。モデルはストロークを視覚的な提案として扱い、構図を誘導しますが固定はしません。 PencilKitの描画について詳しくは、「Read between the strokes with PencilKit」をご覧ください。

UIKitやAppKitアプリを構築している場合は、 ImagePlaygroundViewControllerで同じ体験をビューコントローラーとして使えます。プレゼンテーション前にコンセプトとオプションをプロパティに設定し、その後 imagePlaygroundViewController didCreateImageAtをデリゲートに実装して結果を受け取ります。 APIはSwiftUIを反映しています。

では、Postcardsに合わせてシートを設定しましょう。サイズ、スタイル、パーソナライズなどのオプションを設定します。 ImagePlaygroundOptionsと ImagePlaygroundStyleで Playgroundの設定を管理できます。サイズとアスペクト比、利用可能なスタイル、デフォルトのスタイル、パーソナライズです。カードのアートワークやロック画面の壁紙、バナーやGenmojiアイコンなど同じAPIで対応できます。 Postcardsは横長、縦長、正方形の 3つのカード形式に対応しています。各形式はCGSizeを保持します。それを.closest(to:に直接渡すと、システムが最も近い対応アスペクト比と解像度にマッピングします。形式はカードのプロパティのためサイズリクエストは自動的に適応します。横長カードには幅広の画像、縦長カードには縦長の画像をリクエストします。 .imagePlaygroundOptionsを使ってオプションをシートに渡します。

ImagePlaygroundStyleには illustrationなど複数の値があります。 sketch、animation、emojiなどです。 imagePlaygroundGenerationStyleは 2つの引数を取ります。ピッカーが最初に開くデフォルトスタイルと、表示されるスタイルを制限する許可リストです。許可リストに1つのスタイルのみを渡すとピッカーはそのスタイルに固定されます。

Postcardsでは各カードにStylePresetがあり、これらの値に直接対応します。クラシックカードはillustrationがデフォルトで、 illustrationとsketchのみ使用できます。エクスプレッシブカードは animationがデフォルトで、 illustrationとemojiも使用できます。スタイルピッカーは開いているカードに自動的に対応します。

externalProviderはオプトインのスタイルで、ユーザーがSettingsで設定したサードパーティプロバイダを使えます。 ChatGPTなどです。提供するには .allowedStylesリストに追加します。ユーザーがプロバイダを設定していればピッカーにタブが表示されます。設定していない場合はシステムがセットアップを処理し、確認の必要はありません。デフォルトスタイルとしても渡せます。アプリのコンテキストでそれが適切な場合は。いずれにしても、ピッカーは実際に利用可能なものに適応します。 ImagePlaygroundStyle.emojiは表情豊かな絵文字サイズのキャラクター向けです。アクティブ時には別のクロージャが呼ばれます。 onAdaptiveImageGlyphCreationで、 URLの代わりに NSAdaptiveImageGlyphを受け取ります。アダプティブ画像グリフは特別で、テキストにインラインで直接埋め込めます。絵文字と同じように、カードサムネイルにぴったりの機能です。受信者名の横に表示されるものに。

アダプティブ画像グリフでテキスト内でできることすべてについては、レンダリング、保存、カスタムテキストエンジンなど、「Bring expression to your app with Genmoji」をご覧ください。

パーソナライズはデフォルトで有効です。 Photosライブラリの人物を含めることができます。グリーティングカードを本当に個人的に感じさせる強力な方法です。アプリのコンテキストで不要な場合は、たとえば商品画像ジェネレーターを構築しているなら、 options.personalizationを disabledに設定できます。人物ピッカーと名前検出がシートから完全に消えます。

最後は、Postcardsがすべてのデバイスで正しく動作するようにします。 Image PlaygroundはApple Intelligenceをサポートするデバイスで利用できます。対応言語や地域は増加しつつあります。ユーザーがSettingsで画像生成を有効にしている場合に利用可能です。 supportsImageGenerationという環境値だけが必要です。画像生成が完全に利用可能な場合に trueを返します。デバイスが対応しており、現在の言語と地域がサポートされており、ユーザーが有効にしている場合です。 trueのときは CardEditorViewに遷移します。 Image Playgroundのフル体験を提供します。 falseのときは CardPickerViewに遷移します。シンプルなPhotosピッカーのフォールバックです。エンタイトルメントも追加の機能チェックもセットアップも不要です。環境値と条件分岐だけです。両方のパスをきれいにサポートするのはこれだけです。

Image Playgroundを使えば、アプリに高品質な画像生成体験を簡単に提供できます。

デザインの中で画像がどこに位置するかを考えてください。友達に送るカード。自分を表すプロフィール。言葉にしようとしていたメッセージ。適切な形と雰囲気がすべてを変えます。次に、あなたのアプリだけが知っていることを考えてください。どんな関係、どんな思い出、どんなコンテキストを画像に持ち込めますか。その結果が作られたかのように感じさせるために。その特定の人のために。それが本当のチャンスです。 Image Playgroundがモデルを提供し、あなたがストーリーを加えます。ご視聴ありがとうございました。では、誰かの冷蔵庫に貼るものを作ってみましょう！

5:28 - Adopt Image Playground in SwiftUI

// Adopt Image Playground in SwiftUI

func imagePlaygroundSheet(
    isPresented: Binding<Bool>,
    concepts: [ImagePlaygroundConcept] = [],
    sourceImage: Image? = nil,
    onCompletion: @escaping (URL) -> Void,
    onCancellation: (() -> Void)? = nil
) -> some View

5:39 - Add Image Playground sheet with binding to @State

// Adopt Image Playground

@State private var showingPlayground = false

var body: some View {
    Button("Create image") {
        showingPlayground = true
    }
    .imagePlaygroundSheet(
        isPresented: $showingPlayground,
        onCompletion: { url in
            var updated = currentCard
            store.saveImage(url, for: &updated)
        }
    )
}

6:29 - Seeding the sheet with context from your card

// Seeding the sheet with context from your card

var concepts: [ImagePlaygroundConcept] {
    [
        .text(card.theme),
        .extracted(from: card.message, title: card.theme),
    ]
}

var body: some View {
    Button("Create image") {
        showingPlayground = true
    }
    .imagePlaygroundSheet(
        isPresented: $showingPlayground,
        concepts: concepts,
        onCompletion: { url in
            var updated = card
            store.saveImage(url, for: &updated)
        }
    )
}

7:11 - Starting from a reference photo

// Starting from a reference photo

@State private var sourceImage: Image?

var body: some View {
    Button("Create image") {
        showingPlayground = true
    }
    .imagePlaygroundSheet(
        isPresented: $showingPlayground,
        concepts: concepts,
        sourceImage: sourceImage,
        onCompletion: { url in
            var updated = card
            store.saveImage(url, for: &updated)
        }
    )
}

7:42 - Providing a visual suggestion using a drawing

// Providing a visual suggestion using a drawing

@State private var drawing = PKDrawing()

var concepts: [ImagePlaygroundConcept] {
    var result: [ImagePlaygroundConcept] = [
        .text(card.theme),
        .extracted(from: card.message)
    ]
    if !drawing.strokes.isEmpty {
        result.append(.drawing(drawing))
    }
    return result
}

8:06 - Adopt Image Playground in UIKit or AppKit

// Adopt Image Playground in UIKit or AppKit

func presentViewController() {
    let viewController = ImagePlaygroundViewController()
    viewController.concepts = [
        .text(card.theme),
        .extracted(from: card.message)
    ]
    viewController.delegate = self
    present(viewController, animated: true)
}

func imagePlaygroundViewController(
    _ viewController: ImagePlaygroundViewController,
    didCreateImageAt url: URL
) {
    var updated = card
    store.saveImage(url, for: &updated)
    dismiss(animated: true)
}

9:02 - Size Specification

// Size Specification

var options: ImagePlaygroundOptions {
    var options = ImagePlaygroundOptions()
    options.sizeSpecification = .closest(to: card.format.size)
    return options
}

var body: some View {
    Button("Create image") { showingPlayground = true }
        .imagePlaygroundSheet(
            isPresented: $showingPlayground,
            concepts: concepts,
            onCompletion: { url in
                var updated = card
                store.saveImage(url, for: &updated)
            }
        )
        .imagePlaygroundOptions(options)
}

9:39 - Styles

// Styles

var options: ImagePlaygroundOptions {
    var options = ImagePlaygroundOptions()
    options.sizeSpecification = .closest(to: card.format.size)
    return options
}

var body: some View {
    Button("Create image") { showingPlayground = true }
        .imagePlaygroundSheet(
            isPresented: $showingPlayground,
            concepts: concepts,
            onCompletion: { url in
                var updated = card
                store.saveImage(url, for: &updated)
            }
        )
        .imagePlaygroundOptions(options)
        .imagePlaygroundGenerationStyle(
            pendingStylePreset.defaultStyle,
            in: pendingStylePreset.allowedStyles
        )
}

10:27 - External Provider Style

// External Provider Style

var options: ImagePlaygroundOptions {
    var options = ImagePlaygroundOptions()
    options.sizeSpecification = .closest(to: card.format.size)
    return options
}

var body: some View {
    Button("Create image") { showingPlayground = true }
        .imagePlaygroundSheet(
            isPresented: $showingPlayground,
            concepts: concepts,
            onCompletion: { url in
                var updated = card
                store.saveImage(url, for: &updated)
            }
        )
        .imagePlaygroundOptions(options)
        .imagePlaygroundGenerationStyle(
            pendingStylePreset.defaultStyle,
            in: pendingStylePreset.allowedStyles + [.externalProvider]
        )
}

11:02 - Generating an expressive icon for the card thumbnail

// Generating an expressive icon for the card thumbnail

@State private var showingIconPlayground = false

var body: some View {
    Button("Create icon") {
        showingIconPlayground = true
    }
    Color.clear
        .imagePlaygroundSheet(
            isPresented: $showingIconPlayground,
            concepts: concepts,
            onCompletion: { _ in
            } ,
            onAdaptiveImageGlyphCreation: { glyph in
                var updatedCard = card
                store.saveIcon(glyph, for: &updatedCard)
            }
        )
        .imagePlaygroundGenerationStyle(.emoji, in: [.emoji])
}

12:01 - Disabling personalization when it doesn't fit your context

// Disabling personalization when it doesn't fit your context

var options: ImagePlaygroundOptions {
    var options = ImagePlaygroundOptions()
    options.sizeSpecification = .closest(to: card.format.size)
    options.personalization = .disabled
    return options
}

12:32 - Supports image generation

// Supports image generation

@Environment(\.supportsImageGeneration)
private var supportsImageGeneration

var body: some View {
    NavigationLink(card.recipient) {
        if supportsImageGeneration {
            CardEditorView(card: card)
        }γelse {
            CardPickerView(card: card)
        }
    }
}

0:00 - Introduction
The ImagePlayground framework brings high-quality, true-to-life image creation into your app, on devices with Apple Intelligence support.
2:03 - Capabilities
Image Playground enables the creation of high-quality images with people, styles, and different aspect ratios.
5:02 - Adopt Image Playground
Present the Image Playground sheet and seed it with context from your app.
8:29 - Options
Configure the Image Playground sheet with options like size, style, and personalization.
12:15 - Availability
Ensure your app gracefully handles both supported and unsupported devices, presenting the full Image Playground experience when available.

「今すぐ始める」を詳しく見る

最新情報

プラットフォームを詳しく見る

特集

テクノロジーを詳しく見る

特集

コミュニティを詳しく見る

特集

ドキュメントを詳しく見る

リリースノート

ダウンロードを詳しく見る

特集

サポートを詳しく見る

特集

クイックリンク

Image Playgroundによる高品質な画像の生成

関連する章

リソース

関連ビデオ

WWDC26

WWDC24