In meiner neuesten Android-Anwendung setze ich .NET MAUI in Kombination mit der Azure AI Vision API ein, um Hintergründe von Bildern automatisch zu entfernen. Dabei ist es wichtig “API” zu betonen, da man für Android nicht das Azure AI Vision NuGet Paket verwenden kann – das ist ausschließlich unter Windows möglich.
Künstliche Intelligenz (KI) – oder AI im Englischen – gewinnt stetig an Bedeutung. Azure AI Vision bietet einen praxisnahen Einstieg in dieses spannende Thema. In diesem Beitrag werde ich euch Schritt für Schritt zeigen, wie man die Azure AI Vision API verwendet, um Hintergründe in Bildern zu entfernen.
Übrigens: Wer mehr über die UI-Refresh-Probleme in Verbindung mit den ObservableCollections in .NET MAUI erfahren möchte, findet dazu einen Artikel hier auf dem Blog.
API und Key
Um mit der Azure AI Vision API zu starten, benötigt ihr zuerst eure individuelle API-URL und euren Schlüssel. Diese Infos findet ihr in der von euch angelegten Azure AI Vision-Ressource im Azure Portal. Achtet darauf, die Ressource in der Region “West Europe” anzulegen, da der Dienst in der Region “Deutschland” nicht verfügbar ist.
In eurem .NET MAUI-Projekt solltet ihr zwei String-Variablen definieren, die die Daten eurer Azure AI Vision Ressource speichern: die API-URL (im Azure Portal als “Endpunkt” bezeichnet) und den Schlüssel. Dabei könnt ihr entweder Schlüssel 1 oder Schlüssel 2 verwenden. Es ist ratsam, den Schlüssel regelmäßig zu wechseln, was dann natürlich auch im Quellcode angepasst werden muss. Eine zusätzliche String-Variable wird benötigt, da der Schlüssel später mit dem Namen Ocp-Apim-Subscription-Key übermittelt werden muss. Stellt euch das wie eine Art Überschrift vor.
string ApiUrl = "https://MEINERESSOURCE.cognitiveservices.azure.com/computervision/imageanalysis:segment?api-version=2023-02-01-preview&mode=backgroundRemoval";
string SubscriptionKeyHeader = "Ocp-Apim-Subscription-Key";
string SubscriptionKeyValue = "MEINKEY";Beachtet die Parameter, die ich in der URL angebe:
- /computervision/imageanalysis:segment legt fest, dass ich den Dienst für Bildanalyse nutzen möchte.
- api-version=2023-02-01-preview gibt an, dass ich diese spezielle API-Version verwenden möchte. Beachtet, dass sich zwischen API-Versionen Details ändern können, weshalb diese Anleitung speziell für diese Version gilt.
- mode=backgroundRemoval bestimmt, dass ich den Modus “Hintergrundentfernung” verwenden will.
- 【Anycubic LeviQ Automatische 25-Punkt-Leveln】Der Dehnungsmessstreifen-Nivellierungssensor des…
- 【Große Druckgröße und feiner Druck】300*300*350mm Druckgröße, um alle Ihre…
Letzte Aktualisierung am 27.04.2024 / Affiliate Links / Bilder von der Amazon Product Advertising API
Vorbereiten des HTTP-Client
Als nächstes müsst ihr den HttpClient konfigurieren. Nachdem ihr eine neue Instanz mit new erstellt habt, setzt im Header den Key, wie zuvor beschrieben, und definiert den Header-Typ als application/octet-stream. In diesem Beispiel lade ich bereits ein Bild in ein ByteArray. Die Variable ImagePath repräsentiert den Pfad zum Bild. Dieser Pfad kann beispielsweise durch eine Nutzerauswahl gefüllt werden – etwa indem ihr dem Benutzer erlaubt, über eine Galerie oder einen Datei-Browser ein Bild auszuwählen und den Pfad des ausgewählten Bildes in ImagePath speichert. Natürlich könnt ihr auch Bilder verwenden, die der Nutzer mit der Kamera aufgenommen hat.
using var client = new HttpClient();
// Setzt den Header für den Subscription Key
client.DefaultRequestHeaders.Add(SubscriptionKeyHeader, SubscriptionKeyValue);
// Liest das Bild als Byte-Array
using var content = new ByteArrayContent(await File.ReadAllBytesAsync(ImagePath));
// Setzt den Content-Type auf application/octet-stream
content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");Absenden des Bildes
Jetzt übertragen wir das Bild in die Azure-Cloud. Dabei müssen wir lediglich die ApiUrl aus der betreffenden Variable und den content (also das Bild im ByteArray) angeben. Den Header haben wir schon zuvor festgelegt; dieser wird automatisch mitgesendet.
Anschließend überprüfen wir den Erfolg des Vorgangs und laden das zurückgesendete Bild in ein weiteres ByteArray. Im vollständigen Quellcode, den ich hier aus Gründen der Übersichtlichkeit ausgelassen habe, lasse ich zur Visualisierung einen Kreis rotieren. Das signalisiert dem Nutzer, dass die App arbeitet und nicht hängengeblieben ist.
Das resultierende ByteArray speichere ich im temporären (Cache-) Verzeichnis des Geräts. Der Dateiname erhält einen Zeitstempel, und als Dateierweiterung wird .png verwendet. Achtet hier besonders darauf, denn es wird stets ein PNG zurückgegeben. Nur das PNG-Format unterstützt transparente Hintergründe.
try
{
// Sendet den POST-Request mit dem Bild im Body
var response = await client.PostAsync(ApiUrl, content);
// überprüft den Statuscode und wirft eine Ausnahme bei einem Fehler
if (response.IsSuccessStatusCode)
{
var outputImage = await response.Content.ReadAsByteArrayAsync();
// Erzeugt einen Dateinamen mit einem Zeitstempel und .png (es kommt immer png zurück)
var timestampFileName = $"image_{DateTime.Now:yyyyMMdd_HHmmss}.png";
// Verwendet den Cache Ordner zum Speichern der Datei
var folderPath = FileSystem.CacheDirectory;
var filePath = Path.Combine(folderPath, timestampFileName);
await File.WriteAllBytesAsync(filePath, outputImage);
ImagePath = filePath;
}
else
{
// FEHLERBEHANDLUNG
}
}
catch (Exception ex)
{
// FEHLERBEHANDLUNG
}
- Wireless Ladegerät: Wirklich kabelloses Solarstrom-Ladegerät mit drahtlosem Ausgang unterstützt…
- 26800mAh Kapazität: Das tragbare Ladegerät in Handy-Größe bietet 8 Aufladungen für das 2000mAh…
Letzte Aktualisierung am 28.04.2024 / Affiliate Links / Bilder von der Amazon Product Advertising API
Fazit
Ihr habt nun die Datei im temporären Ordner und dank der Variable ImagePath auch den Pfad dorthin. Was ihr im nächsten Schritt damit macht, hängt von eurer Anwendung ab. Ihr könnt das Bild in einer ImageBox anzeigen, es in den permanenten Speicher verschieben, dem Nutzer eine Teilen-Option anbieten und vieles mehr.
Wenn ihr mehr über .NET MAU wissen wollt, dann holt euch doch das Buch Cross-Plattform-Apps mit .NET MAUI entwickeln*.
Viel Erfolg weiterhin mit eurem Projekt in .NET MAUI und Azure AI Vision!