Dans cette session, nous allons gérer l'envoi du formulaire du front-end au backend et la génération du message avec nos fonctions pour OpenAI.

Gérer l'envoi du formulaire

Nous allons ajouter un écouteur d'événement sur l'événement DOMContentLoaded. Cela permettra de n'exécuter le code JavaScript qu'une fois que toute notre interface ait été chargée.

document.addEventListener("DOMContentLoaded", () => {
    const form = document.querySelector("#prompt-form");
    const spinnerIcon = document.querySelector("#spinner-icon");
    const sendIcon = document.querySelector("#send-icon");
});

À l'intérieur de cet événement, nous récupérons les éléments dont nous avons besoin, à savoir le formulaire et les deux icônes que nous allons changer pour indiquer que la génération du texte est en cours.

Nous allons ensuite ajouter un autre écouteur d'événement sur l'événement submit du formulaire.

Cela nous permet d'intercepter l'envoi du formulaire pour réaliser notre propre logique, dans ce cas-ci, l'envoi de notre message au backend pour la génération de la réponse d'OpenAI :

document.addEventListener("DOMContentLoaded", () => {
    const form = document.querySelector("#prompt-form");
    const spinnerIcon = document.querySelector("#spinner-icon");
    const sendIcon = document.querySelector("#send-icon");

    form.addEventListener("submit", async (event) => {
        event.preventDefault();
        spinnerIcon.classList.remove("hidden");
        sendIcon.classList.add("hidden");

        const prompt = form.elements.prompt.value;
        addToLog(prompt);
    });
});

Avec event.preventDefault();, on empêche le comportement par défaut du formulaire qui aurait pour effet de soumettre le formulaire tel quel à notre backend et rafraîchir la page pour afficher la réponse.

On change ensuite l'affichage des icônes en masquant l'icône d'envoi et en affichant notre "spinner" :

spinnerIcon.classList.remove("hidden");
sendIcon.classList.add("hidden");

On récupère ensuite la valeur entrée dans l'input :

const prompt = form.elements.prompt.value;

Pour finir, on utilise notre fonction addToLog pour ajouter la question posée par l'utilisateur au fil de la conversation :

addToLog(prompt);

Vous pouvez désormais lancer le serveur Flask et envoyer un message pour vérifier que tout fonctionne correctement.

Le message devrait s'afficher dans la liste des messages en haut de la page et l'icône d'envoi changer pour le "spinner".