Intégrer ChatGPT dans des solutions SPFx

Chat GPT (Generative Pre-trained Transformer) est très en vogue en ce moment et est partout. Et je dois admettre qu’il peut accomplir de grandes choses ! Il donne l’impression de comprendre pleinement et de répondre de manière appropriée. Alors comment fait-on dans les solutions SPFx ? Passons à la partie amusante !

Le code source de ce WebPart peut être trouvé dans les PnP Samples

La clé API

Pour commencer, vous avez besoin d’une clé API. Avec cette clé API, vous pouvez vous identifier auprès d’Open AI et vous authentifier. Vous pouvez créer et récupérer une clé en allant sur https://platform.openai.com/. Cliquez sur votre compte en haut à droite, après quoi un menu apparaîtra. Cliquez ici sur “View API keys”.

Vous pouvez ensuite créer une clé API. Enregistrez-la quelque part car elle ne sera plus affichée après pour des raisons de sécurité. Une clé API est personnelle, ne la partagez donc jamais ni ne l’utilisez publiquement, car elle pourrait être interceptée (voir plus loin dans cet article).

Le code

Une fois que nous avons la clé API, nous pouvons commencer à écrire la logique pour utiliser Open AI dans notre solution SPFx. C’est en fait assez simple car il existe une bibliothèque que vous pouvez utiliser. Plus d’informations sur cette bibliothèque peuvent être trouvées ici.

Nous commençons d’abord par installer la bibliothèque openai, vous pouvez le faire avec la commande suivante :

   npm install openai

Nous pouvons ensuite écrire le code. Nous commençons par créer un objet de configuration qui contient la clé.

   import { Configuration, OpenAIApi } from 'openai';

   export default class Chatgpt extends React.Component<IChatgptProps, IChatgptState> {
     private static openai: OpenAIApi;

     public componentDidMount(): void {
       const key = new Configuration({
          apiKey: this.props.apiKey,
       });
       Chatgpt.openai = new OpenAIApi(key);
     }
   }

Avec cet objet de configuration, nous pouvons ensuite appeler openai. Nous le faisons en appelant la fonction createCompletion avec un objet CreateCompletionRequest. Dans cet objet, nous incluons les éléments suivants :

   const response = await Chatgpt.openai.createCompletion({
     model: "text-davinci-003",
     prompt: this.state.question,
     max_tokens: 2048
   });

• Un model : au moment de la rédaction, nous utilisons text-davinci-003, plus d’informations sur les modèles peuvent être trouvées ici.
• Avec le prompt, nous transmettons la question réelle
• Enfin, nous fournissons le max tokens. Par défaut, ce n’est pas une option obligatoire, mais sans cela nous n’obtenons qu’une réponse de 28 caractères de long

Dans l’objet que nous récupérons, nous pouvons obtenir la réponse finale via le chemin suivant :

   response.data.choices[0].text

Comment ça fonctionne ?

Si vous ne souhaitez pas utiliser la bibliothèque openai, vous pouvez utiliser l’API directement en exécutant la requête POST ci-dessous. La particularité de cette requête est que vous devez transmettre votre clé personnelle en tant que Bearer dans l’en-tête Authorization. Cela signifie que votre clé API est visible pour ceux qui exécutent cette requête et peut donc être interceptée.

   POST https://api.openai.com/v1/completions
   Authorization: Bearer [YOUR KEY]

   {
     model: "text-davinci-003",
     prompt: "Your question",
     max_tokens: 2048
   }