🎅 Bringing the Image Playground API to your SwiftUI App 🪄

December 23, 2024

Welcome to the issue #26 of the iOS Coffee Break Newsletter 📬.

It is that time of year again — Merry Christmas, everyone 🎄🎅 Wishing you a joyful holiday season filled with rest, relaxation, cherished moments with your loved ones!

One of the standout announcements at WWDC 2024 was the introduction of the Image Playground framework, a powerful image generator powered by an on-device diffusion model. This innovative tool offers advanced capabilities directly on Apple devices. The API for Image Playground is currently in beta and is compatible with iOS 18.2, iPadOS 18.2, and macOS 15.2 or later.

To use the Image Playground app, ensure Apple Intelligence is enabled by navigating to System Settings > Apple Intelligence & Siri. In my case, I had to adjust the Apple Intelligence language to English (US) to match my system language. Only then did the option to toggle on Apple Intelligence become available.

Integration in a SwiftUI App

The method imagePlaygroundSheet(isPresented:concept:sourceImageURL:onCompletion:onCancellation:) allows the presentation of the sheet where the user generates images from the specified inputs. In SwiftUI, you present this interface as a sheet from one of your views:

import ImagePlayground
import SwiftUI
 
struct ImagePlaygroundView: View {
    @State private var isImagePlaygroundPresented = false
    @State private var imageURL: URL?
    @Environment(\.supportsImagePlayground) private var supportsImagePlayground
 
    var body: some View {
        VStack {
            if let imageURL {
                AsyncImage(url: imageURL) { image in
                    image
                        .resizable()
                        .scaledToFit()
                        .frame(maxHeight: 300)
                } placeholder: {
                    ProgressView()
                }
            }
 
            if supportsImagePlayground {
                Button("Generate", systemImage: "wand.and.sparkles") {
                    isImagePlaygroundPresented.toggle()
                }
            } else {
                Text("Image Playground is not supported on this device.")
                    .multilineTextAlignment(.center)
            }
        }
        .padding()
        .imagePlaygroundSheet(
            isPresented: $isImagePlaygroundPresented,
            concepts: [.text("cat"), .text("astronaut")]
        ) { url in
            imageURL = url
        }
    }
}

I was not able to run this code on an iOS simulator with Apple Intelligence enabled. If you have managed to make it work, please let me know on Twitter!.

Here is the result of the sample code running on my mac:

Apple's Image Playground allows developers to create visually engaging experiences while ensuring smooth integration with app frameworks. Currently, the model just supports generating animations and illustrations, but my expectation is that future updates will expand its capabilities!

Now it is time to dive into some iOS development topics submitted by the community. Here are this week's highlighted resources. Hope you enjoy 🙌.

☠️ NSSpain XII (2024) talks are available online!

NSSpain was one of the iOS conferences I eagerly anticipated attending this year, but unfortunately, I couldn't make it.

Thankfully, for those who missed out, the NSSpain team has generously uploaded all the talks from the 12th edition to Vimeo, making them accessible to everyone. Consider it as a christmas gift! 🎄🎅

👀 Now Previewing Navigator!

I have been a long-time follower of Michael's work and greatly admire his approach to Dependency Injection using the Factory and Resolver libraries. I even integrated Factory into Padel Time, my side project built entirely in SwiftUI, and it definitely made my life easier!

Michael's latest project, Navigator, offers a streamlined yet robust navigation layer built around NavigationStack. As it is still in its pre-release phase, this is an excellent opportunity to dive in, experiment, and provide feedback to shape its development!

🧩 Xcode Kotlin - Xcode support for Kotlin browsing and debugging

At work, we use a KMP module written in Kotlin that is shared between our iOS and android apps. A recurring issue for the iOS team has been debugging the Kotlin code when unexpected behavior occurs. So far, we have had to rely on less effective approaches like using print statements to identify problems.

Thankfully, Touchlab's new xcode-kotlin plugin directly integrates Kotlin debugging into Xcode. This tool simplifies troubleshooting shared code, and it is something I am excited to introduce to my team for improved efficiency!

🥸 Templating with Mustache: an Interactive Tutorial

When I discovered this post, I knew it had to be in this week's newsletter. A few years ago, I worked on a tvOS project at work where we used a templating engine with Mustache.js to design TVML pages. The engine injected data into templates at runtime to generate dynamic content for tvOS.

Natan's latest article in Swift Toolkit explores leveraging Mustache in Swift to create code, HTML, and dynamic content. His guide offers a clear deep dive into its practical applications and it is definitely a great skill to have!

🚀 Swift Package Scripts 0.2 is out!

Daniel Saidi has launched version 0.2 of Swift Package Scripts! This repository includes helpful shell scripts for tasks like building, testing, generating Docc documentation, and creating new versions.

With v0.2, you can specify platforms for execution, and it introduces a multi-platform compatible XCFramework script. I will definitely apply some of these scripts into my workflows!

🕵️‍♂️ The Ultimate Guide to Validation Patterns in SwiftUI

Validation plays a crucial role in crafting reliable and user-friendly applications, and it doesn't need to be overly complex!

Azam has written a detailed guide showcasing techniques for implementing effective validation in SwiftUI apps, emphasizing strategies to improve both data integrity and the overall user experience.