1. Introducción
ML Kit es un SDK para dispositivos móviles que lleva la experiencia de Google en el aprendizaje automático a las apps para iOS y Android a través de un paquete eficaz, pero fácil de usar. Independientemente de si eres nuevo o tienes experiencia en el aprendizaje automático, puedes implementar fácilmente la funcionalidad que necesites con solo unas pocas líneas de código. No es necesario que tengas un profundo conocimiento sobre redes neuronales o en optimización de modelos para comenzar.
¿Cómo funciona?
ML Kit facilita la aplicación de técnicas de AA en tus apps incorporando tecnologías de AA de Google, como Mobile Vision y TensorFlow Lite, en un solo SDK. Ya sea que necesites la potencia de las capacidades en tiempo real de los modelos integrados en el dispositivo de Mobile Vision o la flexibilidad de los modelos personalizados de clasificación de imágenes de TensorFlow Lite, ML Kit lo hace posible con solo unas pocas líneas de código.
En este codelab, se explica cómo crear tu propia app para iOS que puede detectar automáticamente texto y rasgos faciales en una imagen.
Qué compilarás
En este codelab, compilarás una app para iOS con ML Kit. Tu app hará lo siguiente:
|
|
Qué aprenderás
- Cómo usar el SDK de ML Kit para agregar fácilmente capacidades avanzadas de aprendizaje automático, como el reconocimiento de texto y la detección de rasgos faciales, a cualquier app para iOS
Requisitos
- Una versión reciente de Xcode (v12.4 o posterior)
- Simulador de iOS o un dispositivo iOS físico que ejecute iOS 10.0 o versiones posteriores
- ML Kit solo admite estas dos arquitecturas de 64 bits:
x86_64yarm64 - El código de muestra
- Conocimientos básicos sobre el desarrollo para iOS en Swift
- Conocimientos básicos sobre los modelos de aprendizaje automático
Este codelab se enfoca en ML Kit. Los conceptos y los bloques de código no relacionados con esos temas se abordan superficialmente y se proporcionan para que simplemente los copies y pegues.
2. Cómo prepararte
Descarga el código
Haz clic en el siguiente vínculo a fin de descargar todo el código de este codelab:
Descomprime el archivo zip descargado. Esto creará una carpeta raíz (mlkit-ios-codelab) con todos los recursos que necesitarás. Para este codelab, solo necesitarás los recursos del subdirectorio vision.
El subdirectorio vision del repositorio mlkit-ios-codelab contiene dos directorios:
starter: Código inicial que usarás como base para compilar en este codelab- final: Código completado para la app de ejemplo finalizada
Agrega las dependencias de ML Kit con CocoaPods
CocoaPods se usa para agregar las dependencias de ML Kit a tu app. Si no tienes CocoaPods instalado en tu máquina, consulta las instrucciones de instalación aquí. Una vez instalado, abre Podfile en tu editor favorito y agrega ML Kit como dependencias:
Podfile
platform :ios, '10.0'
use_frameworks!
pod 'GoogleMLKit/FaceDetection'
pod 'GoogleMLKit/TextRecognition'
target 'MLKit-codelab' do
end
Instala CocoaPods de ML Kit
Para asegurarte de que todas las dependencias estén disponibles para tu app, debes usar la línea de comandos para instalar los CocoaPods de ML Kit.
Línea de comandos
# Make sure you are in the root of your app
pod install
xed .
3. Ejecuta la app de partida
Ahora puedes ejecutar la app por primera vez. Haz clic en 
Ejecutar en Xcode para compilar la app y ejecutarla en el simulador de iOS.
La app debería iniciarse en el simulador. En este punto, deberías ver un diseño básico con un selector que te permite elegir entre 2 imágenes. En la siguiente sección, agregarás reconocimiento de texto a tu app para identificar el texto en las imágenes.
4. Agrega reconocimiento de texto integrado en el dispositivo
En este paso, agregaremos funcionalidad a tu app para reconocer texto en imágenes.
Importa el módulo MLVision
Confirma que existan las siguientes importaciones en tu clase ViewController.
ViewController.swift
import MLKit
Crea un VisionTextRecognizer
Agrega las siguientes propiedades diferidas a tu clase ViewController.
ViewController.swift
private lazy var textRecognizer = TextRecognizer.textRecognizer()
Configura y ejecuta el reconocimiento de texto integrado en el dispositivo en una imagen
Agrega lo siguiente al método runTextRecognition de la clase ViewController:
ViewController.swift
func runTextRecognition(with image: UIImage) {
let visionImage = VisionImage(image: image)
textRecognizer.process(visionImage) { features, error in
self.processResult(from: features, error: error)
}
}
El código anterior configura el detector de reconocimiento de texto y llama a la función processResult(from:, error:) con la respuesta.
Procesa la respuesta del reconocimiento de texto
Agrega el siguiente código a processResult en la clase ViewController para analizar los resultados y mostrarlos en tu app.
ViewController.swift
func processResult(from text: Text?, error: Error?) {
removeDetectionAnnotations()
guard error == nil, let text = text else {
let errorString = error?.localizedDescription ?? Constants.detectionNoResultsMessage
print("Text recognizer failed with error: \(errorString)")
return
}
let transform = self.transformMatrix()
// Blocks.
for block in text.blocks {
drawFrame(block.frame, in: .purple, transform: transform)
// Lines.
for line in block.lines {
drawFrame(line.frame, in: .orange, transform: transform)
// Elements.
for element in line.elements {
drawFrame(element.frame, in: .green, transform: transform)
let transformedRect = element.frame.applying(transform)
let label = UILabel(frame: transformedRect)
label.text = element.text
label.adjustsFontSizeToFitWidth = true
self.annotationOverlayView.addSubview(label)
}
}
}
}
Ejecuta la app en el simulador
Ahora haz clic en Ejecutar en Xcode. Una vez que se cargue la app, asegúrate de que Image 1 esté seleccionado en el selector y haz clic en el botón Find Text.
Ahora, tu app debería verse como la imagen que se muestra a continuación, con los resultados del reconocimiento de texto y los cuadros delimitadores superpuestos sobre la imagen original.
Foto: Kai Schreiber / Wikimedia Commons / CC BY-SA 2.0
¡Felicitaciones! Acabas de agregar el reconocimiento de texto en el dispositivo a tu app con ML Kit. El reconocimiento de texto integrado en el dispositivo es ideal para muchos casos de uso, ya que funciona incluso cuando tu app no tiene conectividad a Internet y es lo suficientemente rápido como para usarlo en imágenes fijas y en fotogramas de video en vivo.
5. Se agregó la detección de contorno de rostro integrada en el dispositivo
En este paso, agregaremos funcionalidad a tu app para detectar los contornos de los rostros en las imágenes.
Crea un FaceDetector
Agrega las siguientes propiedades diferidas a tu clase ViewController.
ViewController.swift
private lazy var faceDetectorOption: FaceDetectorOptions = {
let option = FaceDetectorOptions()
option.contourMode = .all
option.performanceMode = .fast
return option
}()
private lazy var faceDetector = FaceDetector.faceDetector(options: faceDetectorOption)
Configura y ejecuta la detección de contorno facial en el dispositivo en una imagen
Agrega lo siguiente al método runFaceContourDetection de la clase ViewController:
ViewController.swift
func runFaceContourDetection(with image: UIImage) {
let visionImage = VisionImage(image: image)
faceDetector.process(visionImage) { features, error in
self.processResult(from: features, error: error)
}
}
El código anterior configura el detector de reconocimiento de texto y llama a la función processResult(from:, error:) con la respuesta.
Procesa la respuesta del detector de rostros
Agrega el siguiente código a processResult en la clase ViewController para analizar los resultados y mostrarlos en tu app.
ViewController.swift
func processResult(from faces: [Face]?, error: Error?) {
removeDetectionAnnotations()
guard let faces = faces else {
return
}
for feature in faces {
let transform = self.transformMatrix()
let transformedRect = feature.frame.applying(transform)
UIUtilities.addRectangle(
transformedRect,
to: self.annotationOverlayView,
color: UIColor.green
)
self.addContours(forFace: feature, transform: transform)
}
}
Por último, agrega el método auxiliar addContours en la clase ViewController para dibujar los puntos de contorno.
ViewController.swift
private func addContours(forFace face: Face, transform: CGAffineTransform) {
// Face
if let faceContour = face.contour(ofType: .face) {
for point in faceContour.points {
drawPoint(point, in: .blue, transform: transform)
}
}
// Eyebrows
if let topLeftEyebrowContour = face.contour(ofType: .leftEyebrowTop) {
for point in topLeftEyebrowContour.points {
drawPoint(point, in: .orange, transform: transform)
}
}
if let bottomLeftEyebrowContour = face.contour(ofType: .leftEyebrowBottom) {
for point in bottomLeftEyebrowContour.points {
drawPoint(point, in: .orange, transform: transform)
}
}
if let topRightEyebrowContour = face.contour(ofType: .rightEyebrowTop) {
for point in topRightEyebrowContour.points {
drawPoint(point, in: .orange, transform: transform)
}
}
if let bottomRightEyebrowContour = face.contour(ofType: .rightEyebrowBottom) {
for point in bottomRightEyebrowContour.points {
drawPoint(point, in: .orange, transform: transform)
}
}
// Eyes
if let leftEyeContour = face.contour(ofType: .leftEye) {
for point in leftEyeContour.points {
drawPoint(point, in: .cyan, transform: transform)
}
}
if let rightEyeContour = face.contour(ofType: .rightEye) {
for point in rightEyeContour.points {
drawPoint(point, in: .cyan, transform: transform)
}
}
// Lips
if let topUpperLipContour = face.contour(ofType: .upperLipTop) {
for point in topUpperLipContour.points {
drawPoint(point, in: .red, transform: transform)
}
}
if let bottomUpperLipContour = face.contour(ofType: .upperLipBottom) {
for point in bottomUpperLipContour.points {
drawPoint(point, in: .red, transform: transform)
}
}
if let topLowerLipContour = face.contour(ofType: .lowerLipTop) {
for point in topLowerLipContour.points {
drawPoint(point, in: .red, transform: transform)
}
}
if let bottomLowerLipContour = face.contour(ofType: .lowerLipBottom) {
for point in bottomLowerLipContour.points {
drawPoint(point, in: .red, transform: transform)
}
}
// Nose
if let noseBridgeContour = face.contour(ofType: .noseBridge) {
for point in noseBridgeContour.points {
drawPoint(point, in: .yellow, transform: transform)
}
}
if let noseBottomContour = face.contour(ofType: .noseBottom) {
for point in noseBottomContour.points {
drawPoint(point, in: .yellow, transform: transform)
}
}
}
Cómo ejecutar la app en el simulador
Ahora haz clic en Ejecutar en Xcode. Una vez que se cargue la app, asegúrate de que Image 2 esté seleccionado en el selector y haz clic en el botón Find Face Contour. Ahora, tu app debería verse como la imagen que se muestra a continuación, con los contornos del rostro de Grace Hopper como puntos superpuestos sobre la imagen original.
Felicitaciones. Acabas de agregar la detección de contorno de rostro integrada en el dispositivo a tu app con el Kit de AA integrado en el dispositivo. La detección de contorno de rostro integrada en el dispositivo es ideal para muchos casos de uso, ya que funciona incluso cuando tu app no tiene conectividad a Internet y es lo suficientemente rápida para usarla en imágenes fijas y en fotogramas de video en vivo.
6. ¡Felicitaciones!
Usaste ML Kit para agregar fácilmente capacidades avanzadas de aprendizaje automático a tu app.
Temas abordados
- Cómo agregar ML Kit a tu app para iOS
- Cómo usar el reconocimiento de texto en el dispositivo de ML Kit para encontrar texto en imágenes
- Cómo usar el reconocimiento facial en el dispositivo de ML Kit para identificar rasgos faciales en imágenes
Próximos pasos
- Usa ML Kit en tu propia app para iOS.
Más información
- https://g.co/mlkit