High-Level-Backlog für den Chat-Client

1. Als Benutzer möchte ich einen Begrüßungsbildschirm sehen und auf dem Desktop zur Anmeldung oder auf dem Handy direkt zur App weitergeleitet werden
2. Als Benutzer möchte ich mich mit meinem Microsoft Azure Single Sign-On-Konto bei der Anwendung anmelden
3. Als Benutzer möchte ich Zugriff auf mein persönliches Konto haben, das auf Azure Single Sing-On mit der Graph API basiert
4. Als Nutzer möchte ich, dass sich bestimmte Dinge anders, aber auf vorhersehbare Weise verhalten, wenn ich die App auf einem mobilen Gerät verwende
5. Als Benutzer möchte ich zwischen den Bildschirmen in der App navigieren
6. Als Benutzer möchte ich einen neuen virtuellen Assistenten erstellen und ihm eine beschreibende Rolle und ein Avatarbild geben
7. Als Benutzer möchte ich eine Liste meiner Chats mit virtuellen Assistenten sehen
8. Als Benutzer möchte ich Assistenten aus der Liste nach Suche filtern
9. Als Benutzer möchte ich einen bestehenden Chat auswählen und den Chatverlauf anzeigen
10. Als Benutzer möchte ich eine Frage an meinen virtuellen Assistenten senden und eine Antwort erhalten
11. Als Benutzer möchte ich die Antwort meines virtuellen Assistenten über Text-to-Speech-Audio hören
12. Als Benutzer möchte ich in der Lage sein, von mir erstellte Assistenten zu löschen

Erstellen eines Konnektors für die OpenAI API

Die Erstellung eines Simplifier-Konnektors zur OpenAI-API mit dem REST Connector Assistant ist ein unkomplizierter Prozess, bei dem einige einfache Schritte ausgeführt werden müssen. Zuerst müssen wir einen Link zur OpenAPI-Spezifikation aus dem OpenAI GitHub-Repository abrufen. Wir können dies tun, indem wir zum Repository navigieren und die OpenAPI-Spezifikationsdatei suchen, die normalerweise benannt openapi.yaml ist, und die URL der Datei kopieren. Als nächstes müssen wir einen neuen REST-Konnektor erstellen und ihm einen Namen, einen Endpunkt mit der Basis-URL und die Authentifizierungsmethode geben, die in diesem Fall eine Anmeldemethode ist, die den API-Schlüssel enthält, den Sie von Ihrem OpenAI-Konto erhalten haben. Jetzt verwenden wir den REST Connector Assistant, ein benutzerfreundliches Tool, mit dem wir Konnektoren für RESTful-APIs erstellen können. Im REST Connector-Assistenten werden wir aufgefordert, die URL für die oben erwähnte API-Spezifikation anzugeben, und können nun auf die API-Endpunkte zugreifen. In unserem Fall benötigen wir nur einen einzigen API-Endpunkt namens “Create Chat Completion”.

Wir benötigen auch eine Login-Methode, die unseren API-Schlüssel enthält:

Sobald wir alle erforderlichen Informationen bereitgestellt haben, generiert der REST Connector Assistant automatisch den Simplifier-Connectoraufruf basierend auf der OpenAPI-Spezifikation. Schließlich können wir unseren Simplifier-Konnektor speichern und ihn für die Interaktion mit der OpenAI-API verwenden. Mit unserem Simplifier-Konnektor können wir ganz einfach Anfragen an die OpenAI-API senden, Antworten erhalten und mit den von der API zurückgegebenen Daten arbeiten. Dies kann uns helfen, unseren Workflow zu rationalisieren und Zeit und Mühe bei der Arbeit mit der OpenAI-API zu sparen.

Avataars für den Chat-Client

Erste Quest:
Ermöglichen Sie es Benutzern, einen personalisierten Avatar zu erstellen, der wie eine Person aussieht, wodurch sich das Gespräch natürlicher und persönlicher anfühlt.

Der Avataaars Generator ist ein einfaches und kostenloses Online-Tool, mit dem Benutzer ganz einfach ihren eigenen schönen Avatar erstellen können. Egal, ob Sie eine klare Vorstellung von dem gewünschten Stil haben oder sich nicht sicher sind, wo Sie anfangen sollen, der Generator bietet eine Reihe von Optionen, mit denen Sie den perfekten Avatar erstellen können. Für diejenigen, die einen spontaneren Ansatz bevorzugen, kann der Zufalls-Button oben auf der Seite angeklickt werden, bis ein gewünschter Stil erreicht ist.

Um zufällige Avataars zu verwenden, werden wir ein weiteres Skript zu unserer User Story hinzufügen “5. Create and Edit Assistant”, der eine zufällige Avatar-URL generiert und als globale Variable festlegt, die zur Anzeige des Avatar-Bildes in unserer Anwendung verwendet werden kann.

var generateRandomAvatar = function() {
    var avatarData = {
        "topType": "NoHair,LongHairBigHair,LongHairBob,LongHairBun,LongHairCurly,LongHairCurvy,LongHairDreads,LongHairFrida,LongHairFro,LongHairFroBand,LongHairNotTooLong,LongHairShavedSides,LongHairMiaWallace,LongHairStraight,LongHairStraight2,LongHairStraightStrand,ShortHairDreads01,ShortHairDreads02,,ShortHairFrizzle,ShortHairShaggyMullet,ShortHairShortCurly,ShortHairShortFlat,ShortHairShortRound,ShortHairShortWaved,ShortHairSides,ShortHairTheCaesar,ShortHairTheCaesarSidePart",
        "accessoriesType": "Blank,Kurt,Prescription01,Prescription02,Round,Sunglasses,Wayfarers",
        "hairColor": "PastelPink,Auburn,Black,Blonde,BlondeGolden,Brown,BrownDark,Blue,Platinum,Red,SilverGray",
        "facialHairType": "Blank,BeardMedium,BeardLight,BeardMajestic,MoustacheFancy",
        "facialHairColor": "Auburn,Black,Blonde,BlondeGolden,Brown,BrownDark,Platinum,Red",
        "clotheType": "BlazerShirt,BlazerSweater,CollarSweater,GraphicShirt,Hoodie,Overall,ShirtCrewNeck,ShirtScoopNeck,ShirtVNeck",
        "clotheColor": "Black,Blue01,Blue02,Blue03,Gray01,Gray02,Heather,PastelBlue,PastelGreen,PastelOrange,PastelRed,PastelYellow,Pink,Red,White",
        "graphicType": "Skull",
       // "eyeType": "Close,Cry,Default,Dizzy,EyeRoll,Happy,Hearts,Side,Squint,Surprised,Wink,WinkWacky",
        "eyeType": "Default",
        //"eyebrowType": "Angry,AngryNatural,Default,DefaultNatural,FlatNatural,RaisedExcited,RaisedExcitedNatural,SadConcerned,SadConcernedNatural,UnibrowNatural,UpDown,UpDownNatural",
        "eyebrowType": "Angry,AngryNatural,Default,DefaultNatural,FlatNatural,RaisedExcited,RaisedExcitedNatural,SadConcerned,SadConcernedNatural,UnibrowNatural,UpDown,UpDownNatural",
        //"mouthType": "Concerned,Default,Disbelief,Eating,Grimace,Sad,ScreamOpen,Serious,Smile,Tongue,Twinkle,Vomit",
        "mouthType": "Default,Disbelief,Eating,Serious,Smile,",
        "skinColor": "Tanned,Yellow,Pale,Light,Brown,DarkBrown,Black",
        "avatarStyle": "Circle"
    };
    var randomAvatar = {};
    for (var key in avatarData) {
        if (avatarData.hasOwnProperty(key)) {
            var values = avatarData[key].split(",");
            randomAvatar[key] = values[Math.floor(Math.random() * values.length)]; 
        }
    }
    return randomAvatar;
};

function buildAvatarUrl(avatarData) {
    var baseUrl = "https://avataaars.io/";
    var queryParams = [];
    for (var key in avatarData) {
        queryParams.push(key + "=" + avatarData[key]);
    }
    var url = baseUrl + "?" + queryParams.join("&");
    return url;
}
var sUrl = buildAvatarUrl(generateRandomAvatar());
console.log(sUrl);

this.getGlobals().setVar("NewAssistantAvatarUrl", sUrl);

Dieser Code generiert einen zufälligen Avatar mithilfe der Avataaars.io-API und speichert die URL des generierten Avatars in einer globalen Variablen namens “NewAssistantAvatarUrl”. Die generateRandomAvatar-Funktion initialisiert ein Objekt mit dem Namen avatarData, das verschiedene Eigenschaften enthält, die sich auf die Darstellung des Avatars beziehen, z. B. Frisur, Accessoires, Gesichtsbehaarung, Kleidung und Hautfarbe. Jede Eigenschaft verfügt über einen Zeichenfolgenwert, der eine durch Trennzeichen getrennte Liste möglicher Werte enthält. Die Funktion erstellt dann ein leeres Objekt mit dem Namen randomAvatar und durchläuft jede Eigenschaft von avatarData. Für jede Eigenschaft teilt es den Zeichenfolgenwert in ein Array von Werten auf, wählt mit Math.floor(Math.random() * values.length) einen zufälligen Wert aus dem Array aus und weist den ausgewählten Wert der entsprechenden Eigenschaft von randomAvatar zu. Die buildAvatarUrl-Funktion verwendet das randomAvatar-Objekt als Eingabe und erstellt eine URL für die Avataaars.io-API, die Abfrageparameter für jede Eigenschaft des randomAvatar-Objekts enthält. Der Variablen sUrl wird die URL zugewiesen, die von der buildAvatarUrl-Funktion zurückgegeben wird, und die URL wird mit console.log in der Konsole protokolliert. Schließlich wird die globale Variable NewAssistantAvatarUrl mit der setVar-Methode von this.getGlobals() auf den sUrl-Wert festgelegt.

Verwenden einer Datenbank zum Speichern des Chat-Verlaufs und der virtuellen Assistenten

Um unseren Chatverlauf und unsere Assistenten zu speichern, habe ich mit dem Datenbankdesigner ein einfaches SQLite-Datenbankschema erstellt:

Für die Datenbank selbst haben wir einen Connector mit dem Typ “SQL” erstellt und die benötigten Connector Calls erstellt:

Verwenden von Text-to-Speech-Audio

Da wir die Antworten unserer Assistenten als gesprochenes Audio hören möchten, werden wir einen kleinen Script-Block in unserer User Story “6.1 Frage an den Assistenten stellen” verwenden und den folgenden Code hinzufügen:

if (this.getGlobals().getVar("soundOn")) {
var aVerbs = ["says", "answers", "suggests", "replies", "responds", "asserts", "claims", "mentions", "tells"];

var sAnswer = this.getGlobals().getVar("answer");
var oChat = this.getGlobals().getVar("chatSelected");

var utterance = new SpeechSynthesisUtterance();
utterance.text = oChat.topic + " " + aVerbs[Math.floor(Math.random() * aVerbs.length)] + " " + sAnswer;

utterance.lang = "en-US";
speechSynthesis.speak(utterance);
}

In der Benutzeroberfläche unserer Anwendung haben wir eine Schaltfläche mit einem Lautsprechersymbol auf unserem Hauptbildschirm im Anwendungseditor hinzugefügt. Wenn ein Benutzer auf die Schaltfläche klickt, wird die globale Variable “soundOn” zwischen true und false umgeschaltet. Dieser Code überprüft, ob die Variable “soundOn” wahr ist. Wenn dies der Fall ist, wird ein zufälliges Verb aus dem Array “aVerbs” generiert und mit den Variablen “answer” und “topic” kombiniert, um eine Textnachricht zu erstellen. Anschließend wird ein neues SpeechSynthesisUtterance-Objekt erstellt, und die Eigenschaft “text” wird auf die generierte Nachricht festgelegt. Die Eigenschaft “lang” der Äußerung wird auf “en-US” festgelegt, was bedeutet, dass die Textnachricht in US-Englisch gesprochen werden soll. Schließlich wird die “speak”-Methode des speechSynthesis-Objekts mit der Äußerung als Argument aufgerufen, wodurch die Nachricht mithilfe der Text-to-Speech-Synthese laut gesprochen wird. Insgesamt handelt es sich bei dem Code um eine einfache Implementierung der Text-to-Speech-Funktionalität, die eine zufällige Phrase generiert und laut ausspricht, wenn die Variable “soundOn” wahr ist.

Um einen Eindruck von der Chat Client App zu bekommen, schauen Sie sich das Video an.

Wenn Sie es selbst ausprobieren möchten, können Sie das App-Template vom Marketplace herunterladen und installieren: