Dans cette partie, nous allons terminer la logique de notre application en utilisant une réponse de type "event-stream" qui sera envoyée par morceau du backend au frontend.

Ajouter la vue pour générer le prompt

Nous allons commencer par ajouter une URL qui va recevoir les messages de la conversation et générer la réponse via l'API d'OpenAI :

@app.route('/prompt', methods=['POST'])
def prompt():
    messages = request.json['messages']
    conversation = build_conversation_dict(messages=messages)

    return Response(event_stream(conversation), mimetype='text/event-stream')

On récupère les informations du frontend qui seront contenues dans le body de la requête avec le module request de Flask.

N'oubliez pas de l'importer en haut de votre fichier :

from flask import request

Nous allons voir dans quelques instants comment la conversation est envoyée côté front-end.

On génère ensuite la conversation à partir des messages grâce à notre fonction build_conversation_dict.

Pour finir, on utilise le générateur pour générer la réponse (event_stream(conversation)).

On utilise l'objet Response de base de Flask (qu'il faudra également importer en haut de votre fichier : from flask import Response).

Le secret réside dans le mimetype qui est défini comme un event-stream.

C'est ce mimetype qui permet d'envoyer la requête morceaux par morceaux.

Dans notre décorateur, on spécifie que cette vue ne doit accepter que les requêtes de type POST avec l'attribut methods :

@app.route('/prompt', methods=['POST'])

Envoyer une requête avec fetch côté front-end

On retourne maintenant du côté du frontend pour envoyer la requête au backend.

Pour cela, on utilise l'API fetch de JavaScript qui permet d'effectuer des requêtes asynchrones :

async function fetchPromptResponse() {
    const response = await fetch("/prompt", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({messages: getChatHistory()}),
    });

    return response.body.getReader();
}

Notre fonction étant asynchrone, il ne faut pas oublier de spécifier les instructions async et await.

On commence par indiquer l'URL vers notre vue backend à fetch :

await fetch("/prompt"...)

Pour la méthode, on envoie les données en POST :

method: "POST",

Et les données sont envoyées en format JSON, nous le spécifions donc dans le "Content-Type" :

"Content-Type": "application/json",

Pour finir, on envoie dans le corps de la requête (body), l'historique de la conversation avec notre fonction getChatHistory :

body: JSON.stringify({messages: getChatHistory()}),

Notez le nom de la clé "messages" qui est la clé que nous récupérons dans la vue du backend avec le module request de Flask :

@app.route('/prompt', methods=['POST'])
def prompt():
    messages = request.json['messages']

Pour finir, on récupère le lecteur du corps de la réponse :

return response.body.getReader();

Cela nous permettra par la suite de lire les éléments de la réponse et les ajouter dans l'interface côté frontend.