# AI Avatar with Apple Intelligence -SwiftUI Image Playground

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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1739165565731/7699d6c4-87af-4f15-9380-fbea34209091.png align="center")

[<mark>Get the complete code from GitHub(click here)</mark>](https://github.com/SajidHShanta/exploring-repo/blob/main/AIAvatar/AIAvatar/ContentView.swift) 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:

1. An environment variable `supportsImagePlayground` to check if the device supports Image Playground.
    
2. An empty string `imageGenerationConcept`, will represent the user's prompt.
    
3. A Boolean variable to determine whether Image Playground is currently displayed.
    
4. An optional variable for an avatar image.
    
5. A variable for a photo picker item.
    

```swift
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**

```swift
VStack {
    HStack {
        // code..
    }
}
```

### **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.

```swift
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.

```swift
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.

```swift
if supportsImagePlayground {
```

### **5\. Avatar Description Input**

Create a text input field for prompts to generate images and a button to trigger AI avatar creation.

```swift
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`.

```swift
.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**.

```swift
.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.

```swift
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.

```swift
onCancellation: {
    imageGenerationCooncept = ""
}
```

### 10\. Build Something Diffrent

<div data-node-type="callout">
<div data-node-type="callout-emoji">🚀</div>
<div data-node-type="callout-text">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.</div>
</div>

I would love to connect with you on LinkedIn. Here’s my profile: [https://www.linkedin.com/in/sajidshanta/](https://www.linkedin.com/in/sajidshanta/)

---

*More related resources:*

[*https://developer.apple.com/apple-intelligence/*](https://developer.apple.com/apple-intelligence/)

[*https://developer.apple.com/documentation/imageplayground*](https://developer.apple.com/documentation/imageplayground)

[*https://youtu.be/fjtWpQGs5lU?si=u1-qLRRuK2WSQdSA*](https://youtu.be/fjtWpQGs5lU?si=u1-qLRRuK2WSQdSA)