How to..? Whisper AI in PowerApps - Setup

In einem unserer Kundenprojekte hat Sebastian das Whisper-Modell von Azure OpenAI verwendet und war von seiner Genauigkeit begeistert. Warum also nicht diese Funktionalität in einer Power App nutzen, um die Verwendung des Speech-to-Text-Modells breiter verfügbar zu machen? Bisher ist Sebastian nur auf Anwendungsfälle gestoßen, in denen das öffentliche Whisper-Modell von OpenAI verwendet wird. Da er alle Daten in seinem Microsoft Tenant haben möchte, hat er sich dazu entschlossen, sein eigenes Tutorial zu schreiben, wie man es mit seiner Azure OpenAI Variante verwendet. Im ersten Teil führt Sebastian durch das Setup, so dass Sie es selbst ausprobieren können. Im nächsten Teil wird der von Whisper AI generierte Inhalt mit einem anderen LLM wie Azure OpenAI 3.5 oder 4 verbunden, um mit den extrahierten Speech to Text Daten zu arbeiten.

Ein kurzer Überblick darüber, was Sie dafür benötigen: 

Azure 

• Abonnement 
• Ressourcengruppe 
• Azure OpenAI Dienst 
• Eingesetztes Azure OpenAI Whisper Model
  

Power Apps 

• Canvas-App 

Power Automate 

• HTTP-Connector 

Azure OpenAI Whisper Model

Sebastian hat Azure Open AI Studio verwendet, um sein Modell bereitzustellen. Beachten Sie, dass Sie zunächst ein Azure-Abonnement, eine Ressourcengruppe und den Azure OpenAI Service benötigen.  Zum Azure OpenAI Studio: https://oai.azure.com/portal 

Wenn Sie mehrere Ressourcengruppen haben, prüfen Sie oben rechts, ob die richtige Gruppe ausgewählt ist. Klicken Sie dann auf „Bereitstellungen“/ “Deployments” auf der linken Seite. 

Wählen Sie “Create new deployment” 

Wählen Sie „whisper“ als Modell und legen Sie einen Bereitstellungsnamen (Deployment name)  fest.  Lassen Sie das Azure OpenAI Studio geöffnet, da Sie später weitere Informationen benötigen. 

Power Apps

Im nächsten Schritt fahren Sie mit Power Apps fort. In diesem Teil möchten Sie eine Entwicklungs-/Debugging-App einrichten, mit der Sie Ihre Verbindung zum Whisper-Modell testen. Alle Formeln können dann später in verschiedenen App-Szenarien verwendet werden. Sebastian hat mit einer leeren Canvas-App im Tablet-Modus begonnen. Sie können aber auch mit jeder anderen modernen Vorlage beginnen, die Ihnen gefällt. 

In seiner Development-/Debugging-App möchte Sebastian eine Aufzeichnung direkt aus der Power App übermitteln: 

Fügen Sie die folgenden Steuerelemente zu Ihrem Bildschirm hinzu: 

• Audio (aus der Kategorie Medien, nur für Debugging-/Testzwecke) 
• Mikrofon (aus der Kategorie Medien) 
• 2x Buttons (klassisch oder modern) 

Setzen Sie die Media-Eigenschaft des Audio-Controls auf:

Microphone1.Audio

Wenn Sie diese Option eingestellt haben, können Sie Ihre Aufnahme jetzt über die Mikrofonsteuerung abhören.  

Nun wird es kniffliger. Um unser Mikrofon Input/Recording an Power Automate zu übermitteln, müssen Sie Ihre Aufnahme von einem binären Format in Base64 ändern. Dazu müssen Sie einige Tricks anwenden. 

 Wählen Sie zunächst eine Ihrer Schaltflächen aus und ändern Sie die Eigenschaft Text in etwas wie: 

"Extract Data"

Stellen Sie den zweiten Button auf:

"Send Recording"

Sie brauchen drei Variablen, um einige Änderungen an der Zeichenkette vorzunehmen. Um die Variablen zu setzen, verwenden Sie die zuvor erstellte “Extract Data”–Button. 

In der Einstellung OnSelect beginnen Sie mit: 

//Generate JSON from Microphone Input
Set(varMicJSON,JSON(Microphone1.Audio,JSONFormat.IncludeBinaryData));

Damit erstellen Sie einen JSON-String aus dem Mikrofoneingang einschließlich der BinaryData, die Sie für Ihren Base64-String benötigen. Das Ergebnis sieht dann etwa so aus: 

“data:audio/webm;base64,BASE64STRING“ 

Diesen Teil müssen Sie nun entfernen. Am Ende wollen Sie nur den BASE64STRING-Teil ohne zusätzliche Sonderzeichen wie das letzte „. 

Beginnen wir mit der Aufteilung der Zeichenkette durch das “ , „ zwischen data:audio/webm;base64 und dem BASE64STRING: 

//Splits dataType and base64 information
Set(varMicWithoutDataType, Last(Split(varMicJSON, ",")).Value);

Jetzt müssen Sie noch das “ am Ende der Zeichenkette entfernen: 

//Generates base64 that can be used in HTML Request - Removing " from the string end
Set(varMicPureBase64, Left(varMicWithoutDataType, Len(varMicWithoutDataType) - 1));

Die gesamte PowerFX Ihrer OnSelect-Eigenschaft sollte wie folgt aussehen: 

//Generates JSON form Microphone Input
Set(varMicJSON,JSON(Microphone1.Audio,JSONFormat.IncludeBinaryData));
//Splits dataType and base64 information
Set(varMicWithoutDataType, Last(Split(varMicJSON, ",")).Value);
//Generates pure base64 that can be used in HTML Request - Removing " from the string end
Set(varMicPureBase64, Left(varMicWithoutDataType, Len(varMicWithoutDataType) - 1));

Wechseln Sie nun zu Power Automate, um die Anfrage an den Azure OpenAI Whisper Service zu erstellen. 

Power Automate

Bevor Sie mit der Erstellung des Flows beginnen, stellen Sie sicher, dass Sie die folgenden Informationen bereithalten: 

• Azure OpenAI Service API-Schlüssel 
• Endpunkt-URL 
• Name des Einsatzes Ihres Whisper Service 

Sie können die meisten  Informationen von der Azure OpenAI Service Ressource in Azure erhalten. Öffnen Sie Ihre Ressourcengruppe, wählen Sie Ihren Azure OpenAI Service und wählen Sie „Keys and Endpoints“ im Bereich Resource Management: 

Kopieren Sie Ihren KEY 1 und Endpoint. Der Einsatzname ist der Name, den Sie dem Whisper-Modell beim Einsatz im Azure OpenAI Studio gegeben haben. Sie können den Namen unter „Deployments“ nachschlagen. 

Erstellen Sie den Flow: 

Sie können ihn entweder von der App aus erstellen, mit der bereits begonnen wurde, oder vom Flow Maker Portal aus. Wenn Sie sich für die zweite Variante entscheiden, erstellen Sie einen „Instant“-Flow mit PowerApps V2 als Auslöser. 

Im PowerApps (V2) Trigger fragen wir die PowerApps, die den Flow ausführen soll, nach einer Texteingabe mit dem Namen „base64“. Dies wird unsere base64-Audiodaten speichern. 

Fügen Sie dann die „Compose”–Aktion hinzu und wählen Sie den base64-Wert als Input: 

Jetzt können Sie mit dem interessanten Teil – der „HTTP“-Aktion oder der spezifischen Anfrage beginnen: 

Sie brauchen nun die zuvor verwendeten Azure-Informationen, um Ihre eigene URI zu erstellen. Das Format ist wie folgt: 

<<YOUR ENDPOINT>>/openai/deployments/<YOUR DEPLOYMENT NAME>>/audio/transcriptions?api-version=2024-02-01 

Ein Beispiel:  

•  Ihr Endpoint ist: https://WhisperDemo.openai.azure.com 
•  Ihr Deployment-Name ist: WhisperModel 

In diesem Beispiel sieht Ihre URI wie folgt aus: https://WhisperDemo.openai.azure.com/openai/deployments/WhisperModel/audio/transcriptions?api-version=2024-02-01 

Fügen Sie 2 Header hinzu: „api-key“ und „Content-Type“. Der Wert für den api-key ist der Schlüssel von Ihrem Azure OpenAI Service, der Content-Type muss „multipart/form-data“ sein. 

Der JSON-Body für Ihre Anfrage sollte wie folgt aussehen: 

{
  "$content-type": "multipart/form-data",
  "$multipart": [
    {
      "headers": {
        "Content-Disposition": "form-data; name=\"file\";filename=\"audiofile.webm\""
      },
      "body": @{base64ToBinary(outputs('Compose_PowerApp_JSON'))}
    }
  ]
}

@base64ToBinary(outputs(‚Compose_PowerApp_JSON‘)) ist eine Funktion, mit der wir eine binäre Audiodatei aus unserem base64-Inhalt aus der Compose-Aktion neu erstellen: 

base64ToBinary(outputs('Compose_PowerApp_JSON'))

Wir beenden den Flow mit „Respond to a PowerApp of flow“. Fügen Sie eine Textausgabe hinzu (in Sebastians Beispiel: WhiserAIanswer) und fügen Sie den Text des HTTP-Konnektors aus dem Fenster Dynamischer Inhalt hinzu. 

Speichern Sie Ihren Flow und kehren Sie zu Ihrer PowerApp zurück. 

Power Apps – letzte Handgriffe

Fügen Sie nun alle Teile zusammen. Fügen Sie zunächst Ihren neu erstellten Flow in Ihre Power App ein. 

Wählen Sie die Schaltfläche „Send Recording“ und setzen Sie die Eigenschaft OnSelect auf: 

//Call the Power Automate Flow 

Set(varMicWhisperAnswer,’WhisperDemo-APICall‘.Run(varMicPureBase64).whisperaianswer) 

Bevor wir unsere Speech to Text App testen können, brauchen wir ein Label, das den Inhalt der „varMicWhisperAnswer“-Variable anzeigt.  Sebastian hat einige weitere Labels zum debuggen seiner verschiedenen Variablen hinzugefügt: 

Um Ihre App und Ihren Flow zu testen, nehmen Sie eine Nachricht auf und überprüfen Sie Ihre Aufnahme über den Media Player. Wenn Sie Ihre Aufnahme hören können, klicken Sie auf die Schaltfläche „Extract Data“ und anschließend auf „Send Recording“. Sie sollten dann die WhisperAI-Ausgabe direkt in Ihrer App erhalten. 

Dies ist nur der Anfang, wie Sie Speech-to-Text mit dem Whisper-Modell von Azure OpenAI nutzen können. Wir hoffen, Ihnen den Prozess zur Integration von Whisper in Ihre Power Apps verständlich erklärt zu haben. Im nächsten Teil werden wir die extrahierten Daten verwenden und sie in Galerien oder Formulare einfügen. Bleiben Sie gespannt!

Hier geht’s zum Original-Blog