Erste Computer Vision App für Android oder iOS erstellen

1. Hinweis

In diesem Codelab lernen Sie, wie Sie eine App erstellen, die den zentralen Anwendungsfall Computer Vision verarbeitet. Dabei werden die Hauptinhalte eines Bildes erkannt. Das wird im Allgemeinen Bildklassifizierung oder Bildlabel genannt.

Vorbereitung

Dieses Codelab ist Teil des Pfads Erste Schritte mit der Bildklassifizierung. Sie wurde für erfahrene Entwickler verfasst, die sich mit maschinellem Lernen auskennen.

Aufgaben

• Eine Android-App, die ein Bild einer Blume klassifizieren kann
• Optional: eine iOS-App, die ein Bild einer Blume klassifizieren kann

Voraussetzungen

• Android Studio unter https://developer.android.com/studio für den Android-Abschnitt des Codelabs
• Xcode, verfügbar im Apple App Store für den iOS-Teil des Codelabs

2. Erste Schritte

Computer Vision ist ein Feld im Bereich des maschinellen Lernens, mit dem neue Möglichkeiten für die Verarbeitung und Extrahierung von Informationen aus Bildinhalten ermittelt werden. Während Computer zuvor die tatsächlichen Bilddaten gespeichert haben, wie z. B. die Werte der Pixel, aus denen das Bild besteht, kann Computer die Inhalte des Bilds parsen und Informationen über den Inhalt abrufen.

Beispielsweise kann im Feld von Computer Vision ein Bild einer Katze zusätzlich zu den Pixeln, die dieses Bild bilden, als Katze gekennzeichnet werden. Es gibt weitere Felder für maschinelles Sehen, die noch detaillierter sind, beispielsweise die Objekterkennung. Hier kann der Computer mehrere Elemente in einem Bild finden und Begrenzungsrahmen abrufen.

In diesem Codelab lernen Sie, wie Sie eine App erstellen, die den Hauptanwendungsfall verarbeitet und den Hauptinhalt des Bildes erkennt. Das wird im Allgemeinen als Bildklassifizierung oder Bildlabel bezeichnet.

Die App wird so einfach wie möglich gehalten. Die Bilder werden hier als Ressourcen mit einer Klassifizierung angezeigt. In Zukunft könnten Sie beispielsweise einen Bild-Picker verwenden oder Bilder direkt von der Kamera abrufen.

Als Erstes führen Sie die Schritte zum Erstellen der App auf Android-Geräten mit Android Studio aus. Fahren Sie mit Schritt 7 fort, um die entsprechende Funktion auf iOS-Geräten zu verwenden.

1. Öffne Android Studio, klicke im Menü „File“ (Datei) auf „Create a New Project“ (Neues Projekt erstellen).
2. Sie werden aufgefordert, eine Projektvorlage auszuwählen. Wähle „Leere Aktivität“ aus.

3. Klicken Sie auf Weiter. Sie werden aufgefordert, Ihr Projekt zu konfigurieren. Geben Sie einen beliebigen Namen und Paketnamen ein. Im Beispielcode in diesem Codelab werden der Projektname ImageClassifierStep1 und der Paketname com.google.imageclassifierstep1 verwendet.

4. Wählen Sie Ihre bevorzugte Sprache aus: Kotlin oder Java. In diesem Lab wird Kotlin verwendet, sodass Sie sich wahrscheinlich für Kotlin entscheiden, wenn Sie genau mitmachen möchten.
5. Klicken Sie auf „Fertigstellen“. Die App wird in Android Studio erstellt. Dies kann einen Moment dauern.

3. ML Label Library importieren

ML Kit (https://developers.google.com/ml-kit) bietet eine Reihe von Lösungen für Entwickler, die gängige Szenarien im maschinellen Lernen erfüllen und diese einfach plattformübergreifend implementieren und bearbeiten können. ML Kit bietet eine schlüsselfertige Bibliothek mit dem Namen „Bild-Labeling“, die Sie in dieser App verwenden können. Diese Bibliothek enthält ein Modell, das vortrainiert ist, um über 600 Bildklassen zu erkennen. Daher sind die ersten Schritte perfekt.

Mit ML Kits können Sie außerdem benutzerdefinierte Modelle mit derselben API verwenden. Wenn Sie bereit sind, können Sie also nicht nur den Einstieg beginnen, sondern auch eine App für personalisiertes Labeling erstellen, die ein für Ihr Szenario trainiertes Modell verwendet.

In diesem Szenario erstellen Sie einen Blumenerkennungsdienst. Wenn Sie Ihre erste App erstellen und ihr ein Bild einer Blume zeigen, wird sie als Blume erkannt. (Wenn Sie später ein eigenes Blumendetektormodell anlegen, können Sie es dank ML Kit mit minimalen Änderungen in Ihre App einfügen und das neue Modell ermitteln, welche Art von Blume es ist, z. B. Tulpe oder Rose.)

1. Prüfen Sie in Android Studio, ob im Projekt-Explorer oben Android ausgewählt ist.
2. Öffnen Sie den Ordner Gradle Scripts und wählen Sie die Datei build.gradle für die App aus. Es kann mindestens zwei Dateien geben. Achten Sie daher darauf, die App-Ebene wie hier zu verwenden:

3. Unten in der Datei sehen Sie einen Abschnitt namens Abhängigkeiten, in dem eine Liste der Einstellungen für implementation, testImplementation und androidImplementation gespeichert wird. Fügen Sie der Datei ein neues mit dem folgenden Code hinzu:

implementation 'com.google.mlkit:image-labeling:17.0.3'

(Achten Sie darauf, dass es sich in den Abhängigkeiten { } befindet)

4. Oben im Fenster wird eine Leiste mit dem Hinweis angezeigt, dass sich die build.gradle geändert hat. Eine Synchronisierung ist erforderlich. Nur zu. Wenn Sie das kleine Elefantensymbol nicht sehen, klicken Sie rechts oben in der Symbolleiste auf das kleine Elefantensymbol.

Sie haben jetzt ML Kit importiert und können Bildlabels erstellen.

Als Nächstes erstellen Sie eine einfache Benutzeroberfläche zum Rendern eines Bildes und erhalten eine Schaltfläche, die aufgerufen wird, wenn der Nutzer darauf drückt, ruft ML Kit das Labeler-Bildmodell auf, um den Inhalt des Bildes zu parsen.

4. Benutzeroberfläche erstellen

In Android Studio bearbeiten Sie die Benutzeroberfläche für jeden Bildschirm oder jede Aktivität mithilfe einer XML-basierten Layoutdatei. Die von Ihnen erstellte einfache App hat eine einzelne Aktivität (denen Code befindet sich in MainActivity und Sie sehen gleich das), und die Benutzeroberfläche ist in activity_main.xml deklariert.

Du findest sie im Projekt-Explorer im Ordner res > layout. Das sieht dann so aus:

Hierdurch wird ein vollständiger Editor geöffnet, mit dem Sie die Benutzeroberfläche für Aktivitäten erstellen können. Hier finden Sie viele Informationen, die in diesem Lab nicht beschrieben werden. Weitere Informationen zum Layouteditor findest du unter https://developer.android.com/studio/write/layout-editor

Wählen Sie dazu für das Lab oben rechts im Editor das Code-Tool aus.

Im Hauptteil des Fensters ist nur noch XML-Code zu sehen. Ändern Sie den Code so:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/imageToLabel"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
        <Button
            android:id="@+id/btnTest"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Label Image"
            android:layout_gravity="center"/>
        <TextView
            android:id="@+id/txtOutput"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:gravity="start|top" />
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

So erhalten Sie ein sehr einfaches Layout, mit einem ImageView (zum Rendern des Bilds), einem Button (zum Klicken für den Nutzer) und einem TextView, in dem die Labels angezeigt werden.

Die Benutzeroberfläche ist jetzt definiert. Bevor Sie mit dem Programmieren beginnen, sollten Sie einige Bilder als Assets hinzufügen. Die App zieht daraus Rückschlüsse.

5. Bilder mit der App bündeln

Eine Möglichkeit, zusätzliche Dateien mit einer Android-App zu bündeln, besteht darin, sie als Assets hinzuzufügen, die in der App kompiliert werden. Damit diese App einfach ist, fügen wir ein Bild von einigen Blumen hinzu. Später kannst du die App auf KameraX oder andere Bibliotheken erweitern, um ein Foto aufzunehmen und das zu verwenden. Der Einfachheit halber bündeln wir das Bild vorerst.

1. Klicken Sie im Projekt-Explorer oben in der App mit der rechten Maustaste auf die Option „Neues Verzeichnis“ und wählen Sie sie aus.
2. Wählen Sie im Dialogfeld, der in einem Eintrag mit verschiedenen Verzeichnissen erscheint, src/main/assets aus.

Anschließend wird im Projekt-Explorer ein neuer Ordner assets angezeigt:

3. Klicken Sie mit der rechten Maustaste auf diesen Ordner, um ein Pop-up-Fenster mit einer Liste von Optionen aufzurufen. Dazu gehört auch, den Ordner in Ihrem Dateisystem zu öffnen. Suchen Sie das passende Betriebssystem für Ihr Betriebssystem aus und wählen Sie es aus. Auf einem Mac lautet der Name Reveal in Finder (Windows öffnen), unter Windows Open in Explorer und unter Ubuntu die Option Show in Files (In Dateien anzeigen).

4. Kopieren Sie eine Datei in diese Datei. Sie können Bilder von Websites wie Pixabay herunterladen. Wir empfehlen, das Bild in ein einfaches Namen zu umbenennen. In diesem Fall wurde das Bild in flower1.jpg umbenannt.

Kehren Sie anschließend zu Android Studio zurück und die Datei sollte im Ordner „Assets“ zu sehen sein.

Sie können dieses Bild jetzt mit einem Label versehen.

6. Klassifizierungscode zur Kennzeichnung des Bildes schreiben

Und jetzt wartet der Teil, auf den wir alle gewartet haben, Computer Vision unter Android!

1. Sie schreiben Ihren Code in der Datei MainActivity. Suchen Sie diesen also im Projektordner unter com.google.devrel.imageclassifierstep1 bzw. dem Namen Ihres entsprechenden Namespace, falls Sie einen anderen ausgewählt haben. In der Regel gibt es drei Namespace-Ordner in einem Android Studio-Projekt, einen für die App, einen für Android-Tests und einen für Tests. Du findest deine MainActivity in der Zeile mit der Beschreibung, gefolgt von einer Beschreibung in Klammern.

Wenn Sie Kotlin verwenden möchten, fragen Sie sich vielleicht, warum der übergeordnete Ordner Java heißt. Es ist ein historisches Artefakt aus der Zeit, in der Android Studio nur Java war. Dieses Problem lässt sich zwar in zukünftigen Versionen beheben, doch falls Sie Kotlin verwenden möchten, ist das auch kein Problem. Es ist nur der Ordnername für den Quellcode.

2. Öffnen Sie die Datei MainActivity. Im Code-Editor erscheint eine Kursdatei mit dem Namen MainActivity. Das sollte so aussehen:

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

Unterhalb der schließenden geschweiften Klammer können Sie Erweiterungscode hinzufügen, der Teil des Kurses ist, aber für den Kurs verwendet werden kann. Du benötigst eine Erweiterung, um eine Datei aus den Assets als Bitmap lesen zu können. Damit wird das Bild geladen, das Sie zuvor in den Ordner „Assets“ kopiert haben.

3. Fügen Sie diesen Code hinzu:

// extension function to get bitmap from assets
fun Context.assetsToBitmap(fileName: String): Bitmap?{
    return try {
        with(assets.open(fileName)){
            BitmapFactory.decodeStream(this)
        }
    } catch (e: IOException) { null }
}

Bei Android Studio werden sich die Probleme wahrscheinlich beheben. Dabei werden Teile des Codes, z. B. Context, Bitmap und IOException, rot hervorgehoben:

Keine Sorge, Das liegt daran, dass Sie die Bibliotheken, die sie enthalten, noch nicht importiert haben. Android Studio bietet eine praktische Verknüpfung.

4. Ziehen Sie den Cursor über das Wort und drücken Sie Alt + Eingabetaste (Mac: Wahltaste + Eingabetaste). Der Import wird nun erstellt.
5. Als Nächstes können Sie die Bitmap aus den Assets laden und in ImageView platzieren. Fügen Sie unter onCreateFunction von MainActivity direkt unter der Zeile setContentView den folgenden Code ein:

val img: ImageView = findViewById(R.id.imageToLabel)
// assets folder image file name with extension
val fileName = "flower1.jpg"
// get bitmap from assets folder
val bitmap: Bitmap? = assetsToBitmap(fileName)
bitmap?.apply {
    img.setImageBitmap(this)
}

6. Wie zuvor wird ein Teil des Codes rot hervorgehoben. Bewegen Sie den Cursor auf diese Zeile und verwenden Sie die Tastenkombination Alt + Eingabetaste/Wahltaste + Eingabetaste, um die Importe automatisch durchzuführen.
7. In der layout.xml-Datei, die Sie zuvor erstellt haben, haben Sie ImageView den Namen „imageToLabel“ zugewiesen, sodass die erste Zeile eine Instanz eines ImageView-Objekts mit dem Namen „img“ erstellt. Details werden mit der integrierten Android-Funktion findViewById gefunden. Anschließend wird anhand des Dateinamens flower1.jpg ein Bild aus dem Asset-Ordner geladen. Dazu wird die im vorherigen Schritt erstellte assetsToBitmap-Funktion verwendet. Schließlich wird die abstrakte Klasse „bitmap“ verwendet, um die Bitmap in „img“ zu laden.
8. Die Layoutdatei enthielt eine TextView-Datei, mit der die für das Bild abgeleiteten Labels gerendert werden. Dafür erhältst du ein Codeobjekt. Fügen Sie unmittelbar unter dem vorherigen Code Folgendes hinzu:

val txtOutput : TextView = findViewById(R.id.txtOutput)

Früher werden die Layoutdateiinformationen für die Textansicht anhand ihres Namens gefunden. XML-Dateien mit dem Namen txtOutput werden verwendet, um ein TextView-Objekt mit dem Namen txtOutput zu instanziieren.

Ebenso erstellen Sie ein Schaltflächenobjekt, das die Schaltfläche darstellt, und instanziieren es mit dem Inhalt der Layoutdatei.

In der Layoutdatei haben wir die Schaltfläche btnTest genannt, sodass wir sie so instanziieren können:

val btn: Button = findViewById(R.id.btnTest)

Nachdem Sie jetzt den gesamten Code und die Steuerelemente initialisiert haben, müssen Sie im nächsten (und letzten) Schritt eine Inferenz für das Image abrufen.

Prüfen Sie vor dem Fortfahren, ob der onCreate-Code folgendermaßen aussieht:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    val img: ImageView = findViewById(R.id.imageToLabel)
    // assets folder image file name with extension
    val fileName = "flower1.jpg"
    // get bitmap from assets folder
    val bitmap: Bitmap? = assetsToBitmap(fileName)
    bitmap?.apply {
        img.setImageBitmap(this)
    }
    val txtOutput : TextView = findViewById(R.id.txtOutput)
    val btn: Button = findViewById(R.id.btnTest)
}

Keines der Keywords sollte rot sein. Sie bedeutet, dass sie noch nicht importiert wurden. Falls ja, gehen Sie zurück und führen Sie den Tastenkombination ALT + Eingabetaste aus, um die Importe zu generieren.

Wenn Sie den Labelersteller eines ML Kits verwenden, besteht der erste Schritt in der Regel darin, ein Options-Objekt zu erstellen, mit dem das Verhalten angepasst werden kann. Sie wandeln das Bild in ein Eingabebild-Format um, das von ML Kit erkannt wird. Anschließend erstellen Sie für die Inferenz ein Labeler-Objekt. Sie erhalten dann einen asynchronen Aufruf mit den Ergebnissen, den Sie dann parsen können.

Und bei der soeben erstellten Schaltfläche kannst du das alles direkt im Ereignis onClickListener tun. Hier der vollständige Code:

btn.setOnClickListener {
  val labeler = ImageLabeling.getClient(ImageLabelerOptions.DEFAULT_OPTIONS)
  val image = InputImage.fromBitmap(bitmap!!, 0)
  var outputText = ""
  labeler.process(image)
    .addOnSuccessListener { labels ->
      // Task completed successfully
      for (label in labels) {
        val text = label.text
        val confidence = label.confidence
        outputText += "$text : $confidence\n"
      }
      txtOutput.text = outputText
  }
    .addOnFailureListener { e ->
      // Task failed with an exception
  }
}

• Wenn der Nutzer zum ersten Mal auf die Schaltfläche klickt, wird mit dem Code ein Labeler mit ImageLabeling.getClient instanziiert und „ImageLabelerOptions“ übergeben. Mit dem Attribut DEFAULT_OPTIONS können wir uns schnell einrichten.
• Als Nächstes wird mit der fromBitmap-Methode ein InputImage aus der Bitmap erstellt. InputImage ist das ML-Format für die Verarbeitung von Bildern.
• Schließlich erstellt der Labelersteller das Bild und gibt einen asynchronen Callback aus. Wenn die Inferenz erfolgreich ist, enthält der Callback eine Liste mit Labels. Sie können dann diese Liste mit Labels parsen, um den Text des Labels und den Konfidenzwert zu lesen. Wenn sie fehlschlägt, erhalten Sie eine Ausnahme, mit der Sie dem Nutzer melden können.

Webseite. Sie können die App jetzt entweder auf einem Android-Gerät oder im Emulator ausführen. Hier erfährst du, wie das funktioniert: https://developer.android.com/studio/run/Emulator.

Hier wird die im Emulator ausgeführte App ausgeführt. Zuerst sehen Sie das Bild und die Schaltfläche und das Label ist leer.

Klicke auf die Schaltfläche, um eine Reihe von Labels für das Bild zu erhalten.

Hier sehen Sie, dass der Labelersteller eine hohe Wahrscheinlichkeit für das Bild und ein Blütenblatt, eine Blume, eine Pflanze und einen Himmel festgestellt hat. Diese sind alle richtig und veranschaulichen, dass das Modell das Bild verarbeitet.

Aber es kann noch nicht erkennen, dass es sich um ein Bild eines Gänseblümchens handelt. Dafür brauchen Sie ein benutzerdefiniertes Modell, das mit bestimmten Blumen trainiert wurde, und zeigen Ihnen, wie das im nächsten Lab geht.

Im Folgenden erfahren Sie, wie Sie diese App unter iOS entwickeln.

7. Bildklassifikator unter iOS erstellen – Erste Schritte

Mit Xcode können Sie eine ähnliche App unter iOS erstellen.

1. Starten Sie Xcode und wählen Sie im Menü „Datei“ die Option Neues Projekt aus. Sie sehen dieses Dialogfeld:

2. Wählen Sie wie gezeigt App aus und klicken Sie auf Weiter. Sie werden aufgefordert, Optionen für Ihr Projekt auszuwählen. Geben Sie ihr einen Namen und eine Organisationskennung. Der Schnittstellentyp muss Storyboard und die Sprache Swift lauten.

3. Wenn Sie Ihre Daten auf einem Smartphone bereitstellen möchten und ein Entwicklerprofil eingerichtet haben, können Sie die Teameinstellung festlegen. Ist dies nicht der Fall, lassen Sie die Option Keine stehen. Sie können die App dann mit dem iOS-Simulator ausführen.
4. Klicken Sie auf Weiter und wählen Sie einen Ordner aus, in dem Ihr Projekt und die zugehörigen Dateien gespeichert werden sollen. Speichern Sie den Speicherort dieses Projekts. Sie benötigen es im nächsten Schritt.
5. Schließen Sie Xcode vorerst, da es nach dem nächsten Schritt mit einer anderen Arbeitsbereichsdatei wieder geöffnet wird.

8. ML Kit über CocoaPods einbinden

Da ML Kit auch unter iOS funktioniert, können Sie damit einen sehr ähnlichen Bildklassifikator erstellen. Damit sie eingebunden werden kann, verwenden Sie CocoaPods. Falls du es noch nicht installiert hast, folge der Anleitung unter https://cocoapods.org/.

1. Öffnen Sie das Verzeichnis, in dem Sie Ihr Projekt erstellt haben. Sie sollte die Xcodeproj-Datei enthalten.

Hier sehen Sie die ZIP-Datei, in der I&39;m an der richtigen Stelle angegeben ist.

2. Erstellen Sie in diesem Ordner eine neue Datei namens Podfile. Es gibt keine Erweiterung, sondern nur eine Podfile-Datei. Füge darin Folgendes hinzu:

platform :ios, '10.0'

target 'ImageClassifierStep1' do
        pod 'GoogleMLKit/ImageLabeling'
end

3. Speichern Sie die Daten und kehren Sie zum Terminal zurück. Geben Sie im selben Verzeichnis pod install ein. Cocoapods lädt die entsprechenden Bibliotheken und Abhängigkeiten herunter und erstellt einen neuen Arbeitsbereich, in dem Ihr Projekt mit den externen Abhängigkeiten kombiniert wird.

Zum Schluss werden Sie aufgefordert, Ihre Xcode-Sitzungen zu schließen und ab jetzt die Datei „Workspace“ zu verwenden. Öffnen Sie diese Datei. Xcode wird mit dem ursprünglichen Projekt und den externen Abhängigkeiten gestartet.

Sie können jetzt mit dem nächsten Schritt fortfahren und die Benutzeroberfläche erstellen.

9. iOS-Benutzeroberfläche mithilfe von Storyboards erstellen

1. Öffnen Sie die Datei Main.storyboard. Sie sehen dann ein Layout der Benutzeroberfläche mit einer Designoberfläche für ein Smartphone.
2. Oben rechts auf dem Bildschirm befindet sich eine Schaltfläche +, über die Sie Steuerelemente hinzufügen können. Klicken Sie darauf, um die Palette der Steuerelemente aufzurufen.

3. Ziehen Sie von dort eine ImageView, eine Schaltfläche und ein Label per Drag-and-drop auf die Designoberfläche. Ordnen Sie sie wie oben gezeigt an:

4. Klicken Sie doppelt auf die Schaltfläche, um den Text von Button auf Klassifikator zu bearbeiten.
5. Ziehen Sie die Ziehpunkte um das Label, um es zu vergrößern. Geben Sie etwa die gleiche Breite wie UIImageView und die doppelte Höhe an.
6. Wenn das Label immer noch ausgewählt ist, klicken Sie rechts oben auf die Schaltfläche Selektoren, um die Palette „Prüfungen“ aufzurufen.
7. Suchen Sie anschließend nach der Einstellung Zeilen und achten Sie darauf, dass sie auf 0 gesetzt ist. So kann das Label eine dynamische Anzahl von Zeilen rendern.

Jetzt können Sie mit dem nächsten Schritt fortfahren und die UI mithilfe von Steckdosen und Aktionen verkabeln.

10. Aktionen und Outlets erstellen

Wenn Sie die iOS-Entwicklung mit Storyboards durchführen, beziehen Sie die Layoutinformationen für Ihre Steuerelemente mithilfe von Outlets und definieren den Code, der ausgeführt wird, wenn der Nutzer eine Aktion für ein Steuerelement mit Aktionen ausführt.

Im nächsten Schritt müssen Sie Steckdosen für ImageView und für das Label erstellen. Im Bild wird im Code auf das Bild verwiesen, um es in das Bild zu laden. Das Label wird im Code referenziert, um seinen Text basierend auf der Inferenz festzulegen, die von ML Kit zurückgegeben wird.

1. Schließen Sie die Inspektionspalette, indem Sie rechts oben auf dem Bildschirm auf das Steuerelement klicken. Klicken Sie dann direkt darunter auf die Schaltfläche Editor hinzufügen.

2. Das verwirrende Layout des Bildschirms, in dem die Datei „main.storyboard“ zweimal geöffnet ist, ist verwirrend. Wählen Sie links im Projektnavigation ViewController.swift aus, damit der Anzeigecontroller-Code geöffnet wird. Es sieht so aus, als sei deine Designoberfläche links im Storyboard-Editor verschwunden. Aber keine Sorge, sie ist noch da!
3. Klicken Sie dazu in der Ansicht „Controller-Szene“ auf Controller anzeigen. Sehen Sie sich Ihre Benutzeroberfläche an – mit dem Storyboard auf der linken Seite und dem Code für ViewController.swift auf der rechten Seite.

4. Wählen Sie UIUIView aus der Designoberfläche auf der linken Seite aus. Ziehen Sie die STEUERUNGStaste gedrückt, ziehen Sie sie zum Code rechts und legen Sie sie direkt unter dem Keyword class ab (in Zeile 11 im Screenshot oben).

Sie sehen einen Pfeil, wenn Sie den Bildschirm ziehen, und erhalten ein Pop-up-Fenster:

5. Füllen Sie das Feld Name als "imageView" aus und klicken Sie auf Verbinden.
6. Wiederholen Sie diesen Vorgang mit dem Label und geben Sie ihm den Namen „&blOutput“.
7. Wichtig: Dasselbe gilt für die Schaltfläche. Achten Sie aber darauf, den Verbindungstyp auf Aktion und nicht auf Steckdose festzulegen.

8. Nennen Sie den Namen „&Klassifizierung“ und klicken Sie auf Verbinden.

Wenn Sie fertig sind, sollte Ihr Code so aussehen: Das Label und die Bildansicht werden als IBOutlet (Interface Builder Outlet) und die Schaltfläche als IBAction (Interface Builder Action) deklariert.

import UIKit

class ViewController: UIViewController {

    @IBAction func doClassification(_ sender: Any) {
    }
    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var lblOutput: UILabel!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

}

9. Bündeln Sie schließlich ein Bild mit der App, damit wir die Klassifizierung leicht vornehmen können. Ziehen Sie die Datei dazu aus dem Datei-Explorer in den Explorer links neben Xcode. Wenn Sie sie ablegen, erhalten Sie ein Pop-up-Fenster wie dieses:

10. Klicken Sie das Kästchen im Abschnitt Zu Zielen hinzufügen an und klicken Sie dann auf Fertig.

Die Datei wird mit Ihrer App gebündelt und lässt sich jetzt leicht klassifizieren. Sie können jetzt die Benutzeroberfläche programmieren und Bildklassifizierungen vornehmen.

11. Code zur Bildklassifizierung schreiben

Jetzt ist alles eingerichtet. Das Schreiben des Codes zum Ausführen der Bildklassifizierung ist ganz einfach.

1. Schließen Sie zuerst das Storyboard-Designer, indem Sie links oben über der Designoberfläche auf X klicken. So können Sie sich auf Ihren Code konzentrieren. Für den restlichen Teil des Labs bearbeiten Sie ViewController.swift.
2. Importiere die MLKitVision- und MLKit ImageLabeling-Bibliotheken, indem du diesen Code ganz oben direkt unter dem Import von UIKit hinzufügst:

import MLKitVision
import MLKitImageLabeling

3. Initialisiere dann innerhalb der viewDidLoad-Funktion die ImageView mithilfe der Datei, die wir in der App gebündelt haben:

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    imageView.image = UIImage(named:"flower1.jpg")
}

4. Erstellen Sie eine Hilfsfunktion, um die Labels für das Bild direkt unter viewDidLoad() zu erhalten:

func getLabels(with image: UIImage){

5. Erstellen Sie ein VisionImage aus dem Bild. ML Kit verwendet diesen Typ bei der Bildklassifizierung. Fügen Sie also innerhalb von „getLabels“ den folgenden Code ein:

let visionImage = VisionImage(image: image)
visionImage.orientation = image.imageOrientation

6. Erstellen Sie als Nächstes die Optionen für den Bildlabels. Sie wird mit diesen Optionen initialisiert. In diesem Fall legen Sie einfach eine grundlegende Option von confidenceThreshold fest. Das heißt, Sie bitten nur den Labelersteller, Labels zurückzugeben, die eine Konfidenz von 0,4 oder höher haben. Für unsere Blume haben Klassen wie „Pflanzen“ und „Crème“ eine hohe Konfidenz, aber diejenigen wie „Basketball“ oder „Auto“ haben eine niedrige Priorität.

let options = ImageLabelerOptions()
options.confidenceThreshold = 0.4

7. Erstellen Sie jetzt den Labelersteller mit diesen Optionen:

let labeler = ImageLabeler.imageLabeler(options: options)

8. Sobald der Labelersteller vorhanden ist, können Sie ihn verarbeiten. Sie erhalten dann einen asynchronen Callback mit Labels (falls erfolgreich) und Fehler (falls Fehler). Sie können dann eine andere Funktion verwenden, die wir gleich erstellen.

labeler.process(visionImage) { labels, error in
    self.processResult(from: labels, error: error)
  }

Keine Sorge, wenn Xcode sich beschwert, dass kein processResult-Mitglied vorhanden ist. Das haben Sie gerade noch nicht implementiert – und das geschieht als Nächstes.

Aus folgendem Grund sehen Sie hier die vollständigen getLabels-Funktionen:

// This is called when the user presses the button
func getLabels(with image: UIImage){
    // Get the image from the UI Image element and set its orientation
    let visionImage = VisionImage(image: image)
    visionImage.orientation = image.imageOrientation

    // Create Image Labeler options, and set the threshold to 0.4
    // so we will ignore all classes with a probability of 0.4 or less
    let options = ImageLabelerOptions()
    options.confidenceThreshold = 0.4

    // Initialize the labeler with these options
    let labeler = ImageLabeler.imageLabeler(options: options)

    // And then process the image, with the callback going to self.processresult
    labeler.process(visionImage) { labels, error in
        self.processResult(from: labels, error: error)
 }
}

Jetzt musst du die Funktion processResult implementieren. Das ist jetzt wirklich einfach, weil uns Labels und ein Fehlerobjekt zurückgegeben werden. Die Labels sollten aus ML Kit in den Typ ImageLabel umgewandelt werden.

Sobald du das erledigt hast, kannst du einfach die Gruppe von Labels durchgehen, die Beschreibung und den Konfidenzwert abrufen und die Daten einem var namens labeltexts hinzufügen. Wenn Sie alle diese Iterationen durchgehen, können Sie dafür einfach den Wert „lblOutput.text“ auf diesen Wert festlegen.

Hier ist die vollständige Funktion:

// This gets called by the labeler's callback
func processResult(from labels: [ImageLabel]?, error: Error?){
    // String to hold the labels
    var labeltexts = ""
    // Check that we have valid labels first
    guard let labels = labels else{
        return
    }
  // ...and if we do we can iterate through the set to get the description and confidence
    for label in labels{
        let labelText = label.text + " : " + label.confidence.description + "\n"
        labeltexts += labelText
    }
    // And when we're done we can update the UI with the list of labels
    lblOutput.text = labeltexts
}

Zum Aufrufen von getLabels muss nur die Schaltfläche aufgerufen werden.

Als du die Aktion erstellt hast, war alles für dich verkabelt. Du musst daher nur die IBAction namens doClassificaiton aktualisieren, die du zuvor erstellt hast, um getLabels anzurufen.

Fügen Sie dem Code einfach den Inhalt von imageView hinzu:

@IBAction func doClassification(_ sender: Any) {
    getLabels(with: imageView.image!)
}

Führe jetzt deine App aus und probiere es aus. Sie können es hier in Aktion sehen:

Das Layout kann je nach Gerät unterschiedlich aussehen.

Im Codelab werden verschiedene Layouttypen nicht auf allen Geräten getestet. Das ist schon ein sehr komplexes Konzept. Wenn Sie die Benutzeroberfläche nicht richtig sehen, kehren Sie zum Storyboard-Editor zurück. Unten sehen Sie den Bereich Anzeigen als:Hier können Sie ein bestimmtes Gerät auswählen. Wählen Sie ein Bild aus, das zu dem Bild oder Gerät passt, für das Sie den Test durchführen, und bearbeiten Sie den Bildschirm entsprechend.

Wenn Sie sich mit der iOS-Entwicklung vertraut machen, erfahren Sie, wie Sie mit Einschränkungen dafür sorgen können, dass Ihre Benutzeroberfläche auf allen Smartphones einheitlich ist. Das ist aber nicht möglich.

12. Glückwunsch!

Sie haben jetzt sowohl auf Android- als auch auf iOS-Geräten eine App implementiert, die Ihnen grundlegendes Sehen mit einem allgemeinen Modell bietet. Du hast die meisten Anstrengungen bereits getan.

Im nächsten Codelab erstellen Sie ein benutzerdefiniertes Modell, das verschiedene Blumenarten erkennt. Und mit nur wenigen Codezeilen können Sie das benutzerdefinierte Modell in dieser App implementieren, um das Modell noch nützlicher zu machen.