Apple introduces a great app, Image Playground. We can make images from scratch or from existing ones with our prompts, and we can also use this in our own apps. For example, we can elevate our apps with an AI Avatar creation feature for users with some simple code of Image Playground.
Before starting, ensure you have the required setup for Apple Intelligence: iOS 18.1 or later, iPadOS 18.1 or later, and macOS 15.1 or later. Now, Create a new SwiftUI project, and let’s get started.
Get the complete code from GitHub(click here) and follow the steps below to understand the implementation.
First, Import ImagePlayground and PhotosUI in ContentView.swift just after importing SwiftUI.
Next, create five variables:
An environment variable supportsImagePlayground to check if the device supports Image Playground.
An empty string imageGenerationConcept, will represent the user's prompt.
A Boolean variable to determine whether Image Playground is currently displayed.
An optional variable for an avatar image.
A variable for a photo picker item.
import SwiftUI
import ImagePlayground
import PhotosUI
struct ContentView: View {
@Environment(\.supportsImagePlayground) var supportsImagePlayground
@State private var imageGenerationCooncept = ""
@State private var isShowingImagePlayground = false
@State private var avatarImage: Image?
@State private var photosPickerItem: PhotosPickerItem?
Now, build a profile UI, which includes a photo picker for selecting a profile picture, a name and title section, and a text field where users can enter a prompt for AI-generated avatars (if Image Playground is supported). A button allows users to trigger AI image generation, and the generated avatar updates dynamically.
Let's explain this step by step:
1. Structure and Layout
VStack {
HStack {
}
}
2. Profile Picture Selection
Create a photo picker to select an image. Default to a system icon "person.circle.fill" if no image is selected. The image should be resizable, mint-colored, clipped into a circle, and set to 100x100 pixels.
PhotosPicker(selection: $photosPickerItem, matching: .not(.screenshots)) {
(avatarImage ?? Image(systemName: "person.circle.fill"))
.resizable()
.foregroundStyle(.mint)
.aspectRatio(contentMode: .fit)
.frame(width: 100, height: 100)
.clipShape(.circle)
}
3. Name and Title
Display a name and job title.
VStack(alignment: .leading) {
Text("Sajid Hasan").font(.title.bold())
Text("iOS Developer").bold().foregroundStyle(.secondary)
}
4. Checking for Image Playground Support
If the device supports Image Playground, display a text field and a button for generating an AI avatar. If not, provide appropriate feedback.
if supportsImagePlayground {
Create a text input field for prompts to generate images and a button to trigger AI avatar creation.
TextField("Enter avatar description", text: $imageGenerationCooncept)
.font(.title3.bold())
.padding()
.background(.quaternary, in: .rect(cornerRadius: 16, style: .continuous))
Button("Generate Image", systemImage: "sparkles") {
isShowingImagePlayground = true
}
.padding()
.foregroundStyle(.mint)
.fontWeight(.bold)
.background(
RoundedRectangle(cornerRadius: 16, style: .continuous)
.stroke(.mint, lineWidth: 3)
)
6. Handling Image Selection
When the image is selected from photo picker, asynchronously load the image and update avatarImage.
.onChange(of: photosPickerItem) { _, _ in
Task {
if let photosPickerItem, let data = try? await photosPickerItem.loadTransferable(type: Data.self) {
if let image = UIImage(data: data) {
avatarImage = Image(uiImage: image)
}
}
}
}
7. Using Image Playground
Present Image Playground sheet with prompt string and selected image. After AI processing, it will return a URL of the generated image.
.imagePlaygroundSheet(
isPresented: $isShowingImagePlayground,
concept: imageGenerationCooncept,
sourceImage: avatarImage) { url in
8. Updating the Avatar with AI Image
Loads the AI-generated image from the url and sets it as the new avatar image.
if let data = try? Data(contentsOf: url) {
if let image = UIImage(data: data) {
avatarImage = Image(uiImage: image)
}
}
9. Handling Cancellation
Clear the description if the user cancels the AI avatar generation.
onCancellation: {
imageGenerationCooncept = ""
}
10. Build Something Diffrent
🚀
This is just a simple implementation to show how Image Playground can be integrated into your app to enhance user experience. Explore the process and make something different with your creativity.
I would love to connect with you on LinkedIn. Here’s my profile: https://www.linkedin.com/in/sajidshanta/
More related resources:
https://developer.apple.com/apple-intelligence/
https://developer.apple.com/documentation/imageplayground
https://youtu.be/fjtWpQGs5lU?si=u1-qLRRuK2WSQdSA
