Back
K

Online learning is not just a platform; it's the bridge between curiosity and understanding.

Next lessons
Partagez vos idées
Contribuez votre perspective et engagez-vous avec d'autres apprenants pour un retour d'expérience enrichi.
Markdown is supported

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

TS
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 😉

Générer ta clé OpenAI

Vérifier que ça marche avec un exemple simple de la documentation

Utiliser le prompt de l'utilisateur pour générer un code Tailwind et l'ajouter dans la page

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.

Passé en mode "streaming"

Ajouté une notion de "Timed" pour éviter que l'iframe "glitch"