Sprachbefehle in .NET MAUI verwenden

Nachdem verschiedene Ideen aus dem Team diskutiert worden waren, entschieden wir uns für die Idee, einen sprachgesteuerten Assistenten - im Folgenden einfach „Assistent“ genannt - zu entwickeln, der Informationen über gegessene Speisen und getrunkene Getränke in natürlicher Sprache erfassen kann.

In diesem Blogartikel möchte ich zeigen, wie das Entwicklungsteam dabei vorgegangen ist und welche Schritte für die Business-Logik und die Visualisierung der Anwendung nötig waren.

• Ablaufmodell der Anwendung
• Assistent einrichten und Datenmodell erstellen
• Freitext in ein Datenmodell parsen
• Voice-to-Text und umgekehrt
• Visualisierung der Anwendung
• Fazit

Ablaufmodell der Anwendung

Zunächst mussten wir ein konzeptionelles Modell erstellen, um besser zu verstehen, wie das Programm funktionieren soll. Grundsätzlich sollte der Ablauf wie folgt aussehen:

1. Der Assistent stellt dem Nutzer eine Frage.
2. Der Nutzer antwortet in natürlicher Sprache.
3. Die gesprochene Antwort wird in Text umgewandelt und analysiert.
4. Auf Basis der Analyse wird die Antwort des Assistenten formuliert und wieder ausgegeben.

Auf Basis dieses Modells wurde ein Flussdiagramm erstellt, das den Ablauf im Detail beschreibt:

Wie das Flussdiagramm zeigt, lässt sich die Kommunikation mit dem Assistenten in drei Phasen unterteilen:

1. Der Nutzer erzählt frei, was er gegessen oder getrunken hat und in welcher Menge.
2. Falls Mengenangaben fehlen, stellt der Assistent Rückfragen zu einzelnen Zutaten.
3. Wenn alle Zutaten Mengen besitzen, fragt der Assistent, ob noch weitere Mahlzeiten hinzukommen.

Assistent einrichten und Datenmodell erstellen

Die größte Schwierigkeit bei dieser Art von Anwendung besteht darin, den Text des Nutzers zu analysieren und daraus strukturierte Datenmodelle zu erzeugen. Gleichzeitig wollten wir den Nutzer nicht in ein bestimmtes Format zwingen. Er sollte seine Mahlzeiten so beschreiben können, wie es für ihn natürlich ist. Für genau diesen Zweck bietet sich KI besonders gut an. Schauen wir uns an, wie die Initialisierung des GPT-Chats aussieht, den wir für diese Aufgabe gewählt haben:

public class MealParseService : IMealParseService
{
  private readonly IChatCompletion _chatCompletion;

	public MealParseService()
	{
        string aoaiEndpoint = "https://*****.openai.azure.com/";
        string aoaiApiKey = "********************************";
        string aoaiModel = "GPT4";

        // Initialize the kernel
        IKernel kernel = Kernel.Builder
            .WithAzureChatCompletionService(aoaiModel, aoaiEndpoint, aoaiApiKey)
            .Build();

        _chatCompletion = kernel.GetService<IChatCompletion>();
  }
}

Anschließend wurde die folgende Datenmodell-Struktur aufgebaut:

public class Meal
{
    [JsonPropertyName("error")]
    public string Error { get; set; }
    [JsonPropertyName("name")]
    public string Name { get; set; }
    [JsonPropertyName("ingredients")]
    public List<Ingredient> Ingredients { get; set; }
}

public class Ingredient
{
    [JsonPropertyName("n")]
    public string Name { get; set; }
    [JsonPropertyName("a")]
    public string Amount { get; set; }
    [JsonPropertyName("m")]
    public string Measurement { get; set; }
    [JsonPropertyName("c")]
    public string Category { get; set; }
    [JsonPropertyName("p")]
    public bool IsNatural { get; set; }
}

public class IsEndResponse
{
  [JsonPropertyName("hasMore")]
	public bool HasMore { get; set; }
}

Das Ergebnis der Kommunikation mit dem Assistenten soll ein Meal-Array sein, das Zutaten mit Name, Menge, Kategorie und Einheit enthält.

Freitext in ein Datenmodell parsen

Jetzt kam vermutlich der spannendste Teil: die GPT-Chat-Konfiguration so zu definieren, dass freie Sprache zuverlässig in strukturierte Daten überführt wird. Aus dem Flussdiagramm ergeben sich dafür drei Methoden:

1. public async Task<Meal> ParseMeal(string userText)
2. public async Task<Ingredient> GetAmount(string userText, string name)
3. public async Task<bool> IsEnd(string userText)

Beispielhaft sieht der Body von ParseMeal so aus:

string assistantRequest = "?";

public async Task<Meal> ParseMeal(string userText)
{
    var chat = _chatCompletion.CreateNewChat(assistantRequest);
    chat.AddUserMessage(userText);
    var answer = await _chatCompletion.GenerateMessageAsync(chat);
    return JsonSerializer.Deserialize<Meal>(answer);
}

Besonders spannend ist dabei der Inhalt der Variablen assistantRequest, denn genau dieser Prompt konfiguriert den Chat-Client. Für die drei Methoden sahen die Konfigurationen so aus:

1. ParseMeal:

"You are a language assistant who can filter out from a sentence which foods have been eaten and in what quantities.
were eaten. From the information you create a JSON in the following form (everything in <> are placeholders). 
Use common abbreviations for units of measurement. Where no amount is entered, omit the amount and measurement value. 
Organize each ingredient into the following categories food, drink. 
If you cannot find an ingredient, fill in the error field with your answer. 
Classify each ingredient as to whether it is a natural product and put it in p as a bool:
{
\"error\": <Error message>,
\"ingredients\": [
  {
  \"n\": \"<ingredientname>\",
  \"a\": \"<amount>\",
  \"m\": \"<measure>\",
  \"c\": \"<category>\",
  \"p\": \"<naturalproduct>\"
  }
]
}"

2. GetAmount:

"The measurement units can be filtered out and this information returned in JSON with the following structure. 
One of the two specifications is also sufficient:
{
\"a\": \"<amount>\",
\"m\": \"<measure>\"
}"

3. IsEnd:

"You are a voice assistant and recognize from the message whether the answer contains more information 
or is negating and return it in the following JSON form with hasMore = false if the answer is negating, 
otherwise hasMore = true:
{
hasMore: <value>
}"

Durch diese klaren Prompt-Vorgaben definieren wir also die Antwortstruktur in JSON so präzise, dass wir später mit Deserialisierung direkt die benötigten Objekte daraus erzeugen können.

Voice-to-Text und umgekehrt

Sprache in Text umwandeln

Der nächste Schritt bestand darin, Sprache in Text und Text wieder in Sprache zu überführen. Glücklicherweise ist das .NET MAUI Community Toolkit sehr umfangreich und bietet eine Speech-to-Text-API. Damit lassen sich gesprochene Worte in Text umwandeln, was auf iOS, Android, Mac und Windows genutzt werden kann. Ein Beispiel für die Verwendung dieses Services:

private async Task<string> StartListening(Action<string> progress, CancellationToken cancellationToken)
{
    IsSpeechOnLine = true;
    InfoText = "Listening...";

    _timerService.StartTimer(3, SpeechCancel);

    try
    {
        var isAuthorized = await _speechToText.RequestPermissions();
        if (isAuthorized)
        {
            return await _speechToText.Listen(CultureInfo.GetCultureInfo("de-de"),
                new Progress<string>(s =>
                {
                    _timerService.ResetTimer();
                    progress(s);
                }), cancellationToken);
        }
        else
            return null;
    }
    catch (TaskCanceledException e)
    {
        return RecognitionText;
    }
    catch (Exception e)
    {
        if (e.Message == "No speech detected")
            return null;

        throw;
    }
    finally
    {
        IsSpeechOnLine = false;
        InfoText = "Ready";
        _timerService.StopTimer();
    }
}

Zusätzlich haben wir einen Timer mit drei Sekunden Verzögerung eingebaut, nach dessen Ablauf die Aufnahme gestoppt wird. Bei erfolgreicher Erkennung wird der resultierende String über den Delegate Action<string> progress weiterverarbeitet und in RecognitionText geschrieben.

private void SpeechInputProgress(string s)
{
    if (DeviceInfo.Platform == DevicePlatform.Android)
    {
        RecognitionText = s;
    }
    else
    {
        RecognitionText += s + " ";
    }
}

Aufgrund der Besonderheiten der Spracherkennung unter Android wird der finale String dort anders zusammengesetzt als auf anderen Plattformen.

Text in Sprache umwandeln

Die umgekehrte Richtung - also Text-to-Speech - lässt sich relativ einfach so implementieren:

_ = TextToSpeech.Default.SpeakAsync(message.Text, _speechOptions);

Dabei ist message ein Objekt der ViewModel-Klasse:

public partial class MessageViewModel : ObservableObject
{
    [ObservableProperty]
    string _text;

    [ObservableProperty]
    bool _isLoading;

    [ObservableProperty]
    MessageType _messageType;

    [ObservableProperty]
    MealType _mealType;
}

public enum MessageType
{
    OutGoingMessage,
    SystemMessage,
    ResultMessage
}

public enum MealType
{
    Food,
    Drink
}

Und _speechOptions kann zum Beispiel so konfiguriert werden:

var locales = await TextToSpeech.Default.GetLocalesAsync();
_speechOptions = new SpeechOptions
{
    Pitch = 1.5f,
    Volume = 1f,
    Locale = locales.Where(l => l.Language.Contains("de")).FirstOrDefault()
};

Visualisierung der Anwendung

Die Kommunikation mit dem Assistenten sollte sich für Nutzer möglichst natürlich anfühlen. Deshalb haben wir entschieden, den Dialog mit dem Assistenten wie eine Unterhaltung mit einem anderen Menschen zu gestalten.

Dafür wurden in SystemMessageTemplate, OutgoingMessageTemplate, ResultMessageTemplate und MessageDataTemplateSelector drei Nachrichtentypen definiert, die je nach Typ automatisch das passende Template in einer CollectionView verwenden. Die Templates hängen wiederum von den Eigenschaften MessageType und MealType des MessageViewModel ab.

Ein Beispiel für das OutgoingMessageTemplate:

<DataTemplate x:Key="OutgoingMessageTemplate"
              x:DataType="viewModels:MessageViewModel">

    <Grid ColumnDefinitions="*,*">

        <Frame
            Grid.Column="1"
            BackgroundColor="#F6FFD7"
            Margin="10"
            HasShadow="False"
            CornerRadius="10">

            <Label Text="{Binding Text}"
                   TextColor="#29332E"/>

        </Frame>
    </Grid>
</DataTemplate>

Schauen wir uns das Ergebnis an:

Fazit

Für das Entwicklungsteam war es eine echte Herausforderung, die Komfortzone zu verlassen, Neues auszuprobieren, eine passende Architektur zu entwerfen und in nur drei Tagen einen funktionierenden Prototypen zu bauen. Als Ergebnis haben wir wertvolle Erfahrung in der Integration künstlicher Intelligenz in Anwendungen gesammelt - und gleichzeitig erlebt, wie produktiv und angenehm ein starkes Team in kurzer Zeit zusammenarbeiten kann.

FAQ