.
Il y a quelques mois de cela j'ai eu accès à la beta de OpenAI et après 3 mois d'inutilisation j'ai récemment décidé de me pencher dessus. L'objectif a été de connecter leur API à Webflow.
En effet, j'ai voulu comprendre comment cela fonctionnait et créer mon propre modèle basé sur GPT-3. Le site openai.webflow.io était né.
Je vais donc vous montrer comment on peut jouer avec l'API d'OpenAI au sein de Webflow. On va partir du produit Completions, c'est-à-dire que l'outil va compléter un début de phrase que vous lui donnerez. Cela prend moins de 15 minutes chrono en main et vous pouvez avoir un résultat comme ci-dessous :
Les 3 seules choses indispensables sur Webflow sont :
On va donc créer un nouveau projet avec un formulaire ayant pour class form et pour ID gpt-form. Ajoutez un text field au formulaire afin que les utilisateurs puissent entrer une donnée, l’input.
On va désormais créer une collection list, que l'on va appeler Completions. On ajoute un champ text (Answer) en plus des 2 éléments obligatoires (name & slug). Ce champ Answer stockera la réponse renvoyée par OpenAI. Dans mon cas, cela va donner l'URL : https://openai.webflow.io/completions/
Vous allez votre propre URL et l'ajouter comme Redirect URL dans le formulaire créé au préalable (bien mettre le / après completions).
On aura donc les paramètres suivants au niveau du formulaire :
Enfin, dans la page Completions Template, vous allez mettre au moins un champ texte. Vous allez lier ce champ à la collection Completions en allant chercher le champ Answer. Il permettra l’affichage de la donnée générée par GPT-3, l’ouput.
Pour ma part, j'ai décidé de concaténer l'input et l'output au sein d'un HTML Embed pour avoir la phrase complète sur la même ligne.
Pour le moment, voilà ce qu'on faire dans Webflow. On reviendra dessus au cours de la création du scénario dans Integromat.
On va donc créer un nouveau projet Integromat qui comprendra 5 étapes avec le résultat suivant :
On va découper en 5 points ce scénario et vous allez voir comme les choses sont simples.
Ici on va intégrer un custom webhook dans Integromat, c'est à dire une URL qui va permettre de récupérer la donnée dans Webflow. Une fois sur le webhook, vous n'avez faire Add et lui donner un nom. Une fois ce webhook créé, on va copier-coller le résultat en tant qu'Action dans le form Webflow.
Votre form Webflow devrait donc ressembler à cela :
Ici l'idée est de requêter l'API de OpenAI en fonction du résulat du résultat du formulaire. On va donc faire intégrer une requête HTTP à notre scénario.
Dans un premier temps on va faire en sorte de se connecter à cette API en mettant l'URL d'OpenAI. On va ensuite ajouter les 2 paramètres de Headers permettant l'authentification. Il faut juste mettre votre API là où j'ai un bloc noir.
Vous pouvez laisser les Query String, Body Type & Content type par défaut. On va ensuite demander à l'API d'aller chercher spécifiquement le texte issu de l'étape 1. On met donc les request content propres au produit de Completions en mettant bien une variable dans le champ Prompt. La variable texte provient de ma première étape.
Une fois ce call API fait et le résultat retourné, il faut le formatter afin de l'envoyer dans Webflow.On va donc ajouter le module JSON et le Transformer Parse JSON. Vous allez ajouter une nouvelle Data structure. Dans JSON String, vous allez tout simplement entrer l'élément Data retournée par la requête API à l'étape 2.
Une fois la donnée formatée, elle est prête à l'usage. On va la retourner dans Webflow en créant un item dans la collection créée au préalabale. Tout d'abord, il faut donc connecter votre site Webflow et votre collection. Ensuite, en name on va chercher le résultat de l'étape 1. Pour la réponse (le champ Answer dans votre cas), on va chercher dans l'étape 3 la donnée structurée par le JSON. On laisse le champ slug vide.
La dernière étape est de renvoyer l'utilisateur sur une URL où il pourra découvrir le résultat de son input.
On va à nouveau s'aider d'un Webhook en choisissant Webhook response. Dans ce dernier, on aura une variable pour le slug qui aura été créé en ajoutant un item à votre CMS.
En parallèle, on va ajouter ce script* à notre projet Webflow. Il faut bien mettre l'ID du form que l'on a défini au préalable ligne 74 (gpt-form ici).
Cela va nous permettre d'envoyer l'utilisateur sur l'URL du cms créé auparavant.
Et voilà, la magie a opéré.
Vous avez tout le loisir de personnaliser votre UI & UX ensuite. Pour ma part, j'ai rajouté un petit Lottie au clic sur le bouton "Try OpenAI" :)
Si vous avez suivi chacune de ces étapes scrupuleusement vous êtes en mesure de faire vos propres appels API depuis Webflow. Ce modèle est valable pour à peu près n’importe quel API
* Disclaimer : je n’ai pas créé ce script, les droits reviennent à Chris Drit. Je l’ai ajouté à mon espace pour être sur qu’il reste en ligne et disponible.