TP 🎨 | Ajout d'OpenAI

Ton travail va être d'utiliser OpenAI et leur intégration dans l'application pour créer la première fonctionnalité de notre générateur de site Tailwind.

Pour cela, tu vas pouvoir suivre plusieurs étapes :

1. Récupérer le contenu du prompt de l'utilisateur.
2. Appeler OpenAI avec le résultat.
3. Récupérer le résultat de l'API.
4. L'afficher dans une iFrame.

N'oublie pas, n'hésite pas à utiliser Copilot ou ChatGPT pour t'aider.

Tu retrouveras beaucoup de ressources ici :

• OpenAI Library

À utiliser de cette manière :s

import OpenAI from 'openai';

export const openai = new OpenAI({
  apiKey: apiKey,
  dangerouslyAllowBrowser: true,
});

• Tutoriel simple d'intégration d'OpenAI
• iFrame srcdoc property : c'est là-dedans que tu afficheras le résultat d'OpenAI.
• Chat Completion API : pour la documentation, sélectionne les exemples avec "node.js" et pas python 😉

Ajout du stream

Il va falloir modifier notre code pour pouvoir "streamer" le résultat d'OpenAI dans l'iFrame.

Pour cela, tu vas devoir :

• Ajouter stream: true dans les options de l'appel à OpenAI.
• Utiliser la syntaxe for await of pour récupérer les résultats de l'API.
• Ajouter dans l'iFrame.

Pour éviter que l'iFrame ne fasse que de charger, car les chunks vont arriver toutes les 0.25 secondes. Tu peux venir rajouter une sorte de "timed" update qui va mettre à jour l'iFrame toutes les secondes pour avoir un résultat plus fluide.