Cómo utilizar Image Playground para generar imágenes con Apple Intelligence

Libranner Santos

25 diciembre, 20245min de lectura

Gracias a Apple Intelligence, los usuarios pueden aprovechar la inteligencia artificial para realizar una amplia variedad de tareas, como la generación de imágenes. Sin embargo, hasta el lanzamiento de iOS 18.2 no contábamos con las APIs necesarias para incorporar estas funcionalidades en las aplicaciones que desarrollamos.

Image Playground

Image Playground permite crear imágenes a partir de prompts y mostrarlas dentro de las aplicaciones que desarrollamos. Si tienes la versión 18.2 o superior y tu dispositivo está registrado en una región donde Apple Intelligence esté disponible podrás usar el app del mismo nombre.

Cómo utilizar Image Playground

Aunque tenemos acceso al app Image Playground, también podemos hacer uso de la misma desde nuestras aplicaciones. Para esto utilizamos el siguiente modificador: imagePlaygroundSheet(isPresented:concepts:sourceImage:onCompletion:onCancellation:). Veamos un ejemplo sencillo de cómo implementarlo:

.imagePlaygroundSheet(
    isPresented: $show, 
    concepts: [.text("Phoenix and unicorn on a lake at night, reflecting cosmic sky and stardust glow.")]
) { url in
    imageURL = url
}

El modificador imagePlaygroundSheet recibe un booleano a través de isPresented para determinar cuándo se mostrará. En el parámetro concepts, proporcionamos contexto al prompt que generará la imagen. En el bloque de finalización (completion), recibimos un URL con la imagen generada, que en este caso guardamos en la variable imageURL.

Escuchando cuando el usuario cancela

Además del bloque de finalización, imagePlaygroundSheet nos ofrece un bloque opcional para manejar el caso en que el usuario cancele el proceso:

.imagePlaygroundSheet(
    isPresented: $show, 
    concepts: [.text("Phoenix and unicorn on a lake at night, reflecting cosmic sky and stardust glow.")]
) { url in
    imageURL = url
} onCancellation: {
    print("User cancelled")
}

En este ejemplo, simplemente imprimimos un mensaje, pero podríamos cambiar el estado de la interfaz o implementar cualquier lógica de negocio adicional.

Estableciendo una imagen incial

También podemos proporcionar una imagen como referencia para el prompt utilizando el parámetro sourceImage. Este es opcional, pero puede ser útil para ofrecer experiencias personalizadas a los usuarios. Por ejemplo:

Button("Generate") {
    show = true
}
.imagePlaygroundSheet(
    isPresented: $show,
    concepts: [.text("Dog with glasses")],
    sourceImage: selectedImage
) { url in
    imageURL = url
}

Aquí asignamos una imagen inicial a la propiedad sourceImage, que es de tipo Image?. Image Playground usará esta imagen como base junto con el texto especificado en concepts.

Otros tipos de concepts

Hasta ahora hemos utilizado text(_:) para los prompts. Sin embargo, también podemos usar extracted(from:title:), lo que nos permite proporcionar un contexto más detallado. En from asignamos una frase o texto, y en title, un resumen breve del contenido.

Usando Image Playground de manera avanzada

A continuación, un ejemplo completo donde el usuario puede seleccionar una imagen, proporcionar un texto descriptivo y un título, y generar una imagen con inteligencia artificial utilizando Image Playground:

Preparando la vista

Empezaremos con este código que contiene las variables de estado que necesitaremos, así como las vistas que conforma la interfaz de usuario:

// 1
import ImagePlayground
import PhotosUI
import SwiftUI

struct ImagePlaygroundView: View {
  @State private var showPlayground = false
  @State private var imageURL: URL?
  @State private var pickedImage: Image?
  @State private var showPhotoPicker = false
  @State private var selectedPhotoItem: PhotosPickerItem?
  @State private var from: String = ""
  @State private var title: String = ""

  var body: some View {
    ...
  }

  // 2
  @ViewBuilder
  var generatedImage: some View {
    if let url = imageURL {
      AsyncImage(url: url) { image in
        image
          .resizable()
          .aspectRatio(contentMode: .fit)
          .frame(maxWidth: 300, maxHeight: 300)
          .clipShape(.circle)
      } placeholder: {
        ProgressView()
      }
    }
  }

  // 3
  var photoPicker: some View {
    VStack {
      if let pickedImage {
        pickedImage
          .resizable()
          .aspectRatio(contentMode: .fit)
          .frame(width: 200, height: 200)
      }

      PhotosPicker(
        selection: $selectedPhotoItem,
        matching: .images
      ) {
        Text("Pick Image")
      }
      .onChange(of: selectedPhotoItem) { _, newItem in
        Task {
          if let data = try? await newItem?.loadTransferable(type: Data.self),
            let uiImage = UIImage(data: data)
          {
            pickedImage = Image(uiImage: uiImage)
          }
        }
      }
    }
  }
}

En este código:

Importamos ImagePlayground lo que nos permitirá tener acceso a las APIs necesarias.
Una variable calculada generatedImage que contiene un AsyncImage donde mostraremos la imagen generada. Si quieres saber más sobre AsyncImage consulta este artículo.
Para seleccionar la imagen de la galería usamos PhotosPicker. Si quieres saber más sobre PhotosPicker consulta este artículo.

Integrado Image Playground

Ahora nos falta la parte más interesante agregar la integración con Image Playground dentro de body escribe este código:

// 1
VStack {
    photoPicker
    TextField("title", text: $title)
      .textFieldStyle(.roundedBorder)
    TextField("from", text: $from)
      .textFieldStyle(.roundedBorder)
    generatedImage

    Button("Generate") {
      showPlayground = true
    }
    .tint(.green)
    .buttonBorderShape(.capsule)
    .buttonStyle(.bordered)
}
.padding(40)
// 2
.imagePlaygroundSheet(
    // 3
    isPresented: $showPlayground,
    // 4
    concepts: [.extracted(from: from, title: title)],
    // 5
    sourceImage: pickedImage
) { url in
    imageURL = url
} onCancellation: {
    // 6
    print("Cancelled by user")
}

En este código:

Creamos un VStack que contiene todos los campos. Las vistas están organizadas como propiedades calculadas. Para mostrar la imagen generada, usamos AsyncImage.
Implementamos imagePlaygroundSheet con todos los parámetros requeridos.
Utilizamos showPlayground para controlar cuándo se muestra el modal.
Pasamos parámetros concepts utilizando extracted.
Asignamos la imagen seleccionada a sourceImage.
Imprimimos un mensaje en consola en caso de cancelación.

La interfaz se verá de la siguiente forma:

Aquí podemos ver una demostración de toda la funcionalidad:

Image Playgroud generará varias propuestas, presionamos Done y se mostrará la imagen seleccionada con un borde circular.

Conclusión

Con Image Playground, puedes ofrecer a tus usuarios la capacidad de generar imágenes o avatares directamente desde tu aplicación, sin necesidad de configurar un servidor ni de integrar directamente un Large Language Model (LLM).

Comparte este artículo