application Next.js

Par / 1 février 2023

Créez votre propre application Next.js et React avec l’API OpenAI : Guide du débutant

 

Dans ce didacticiel, nous ( Prime Deviation et ChatGPT ) allons parcourir le processus de création d’une application Web à l’aide des frameworks Next.js et React, et intégrer l’API OpenAI pour générer des invites et collecter des informations auprès des utilisateurs.

Conditions préalables

Avant de commencer, assurez-vous que les prérequis suivants sont installés sur votre machine :

  • Node.js et npm : vous aurez besoin d’avoir Node.js et npm (le gestionnaire de packages Node.js) installés sur votre machine afin de créer une application Next.js et React. Vous pouvez télécharger et installer Node.js depuis le site officiel ( https://nodejs.org/ ) ou en utilisant un gestionnaire de packages tel que Homebrew ( https://brew.sh/ ).
  • Clé API OpenAI : Vous aurez besoin d’une clé API OpenAI pour utiliser l’API OpenAI. Vous pouvez vous inscrire pour obtenir une clé API à l’URL suivante : https://beta.openai.com/signup/ .

Mise en place du projet

Tout d’abord, configurons la structure de répertoires pour notre projet. Nous utiliserons la structure de répertoire suivante :

projet/ 
├── src/ 
│ ├── composants/ 
│ ├── pages/ 
│ ├── redux/ 
│ ├── styles/ 
│ ├── utils/ 
│ ├── index.js 
│ ─ store. js 
├── public/ 
├── vercel.json 
├── package.json 
└── next.config.js

Cette structure de répertoires est basée sur les conventions utilisées par Next.js, un cadre populaire pour la création d’applications React rendues par le serveur. Il comprend un srcrépertoire pour le code source de notre application, un publicrépertoire pour les actifs statiques tels que les images et les polices, et un certain nombre de fichiers de configuration pour Next.js et Vercel.

Intégration de l’API OpenAI

Maintenant que notre projet est configuré, intégrons l’API OpenAI dans notre application.

Pour utiliser l’API OpenAI, nous devrons installer le openaipackage npm, qui fournit un client pour accéder à l’API OpenAI. Exécutez la commande suivante pour installer le package :

npm installer openai

Ensuite, créez un openai.jsfichier dans le src/utilsrépertoire et ajoutez-y le code suivant :

importer openai depuis  'openai' ; 

openai. apiKey = 'YOUR_API_KEY_HERE' ; 

export  const  generatePrompts = async ( modèle, invite ) => { réponse 
  const = attendre openai. Achèvement . créer ( 
    model=model, 
    prompt=prompt, 
    max_tokens= 1024 , 
    n= 1 , 
    stop= None , 
    temperature= 0.5
   ); 
  retour de réponse. les choix[ 0 ]. texte ; 
}

Ce code définit une fonction appelée generatePromptsqui utilise l’API OpenAI pour générer des invites basées sur un modèle et une invite donnés. Le modelparamètre est le nom du modèle de langage OpenAI à utiliser, et le promptparamètre est le texte d’invite à utiliser comme point de départ.

Pour utiliser cette fonction dans votre application, vous pouvez l’importer comme suit :

import { generatePrompts } depuis  './utils/openai' ;

Vous pouvez ensuite utiliser la generatePromptsfonction pour générer des invites dans votre application en l’appelant avec le modèle et le texte d’invite souhaités :

const prompts = await  generatePrompts ( 'text-davinci-002' , 'Ecrire une courte histoire sur un robot qui part à l'aventure.' ); 
consoler . log (invites);

Cela générera un ensemble d’invites basées sur le modèle et le texte d’invite spécifiés, et les imprimera sur la console.

Collecte d’informations auprès des utilisateurs

Maintenant que nous pouvons générer des invites à l’aide de l’API OpenAI, construisons une interface utilisateur pour collecter des informations auprès des utilisateurs.

Pour collecter des informations auprès des utilisateurs, nous devrons créer un formulaire à remplir par les utilisateurs. Nous pouvons le faire en utilisant les bibliothèques formiket , qui fournissent des outils pour créer et valider des formulaires dans React.yup

Commencez par installer les bibliothèques formiket en exécutant la commande suivante :yup

npm installer formik yup

Ensuite, créez un Form.jscomposant dans le src/componentsrépertoire et ajoutez-y le code suivant :

importer  React  depuis  'react' ; 
import { Formik , Form , Field } from  'formik' ; 
importer * en tant que  Yup  à partir de  'yup' ; 

const  FormSchema = Oui . objet (). shape ({ 
  name : Yup . string () 
    . min ( 2 , 'Trop court !' ) 
    . max ( 50 , 'Trop long !') 
    .required( 'Required' ), 
  email : Oui . chaîne () 
    . email ( 'E-mail invalide' ) 
    .required( 'Requis' ), 
  ​​message : Oui . chaîne () 
    . min ( 10 , 'Trop court !' ) 
    . max ( 500 , 'Trop long !' ) 
    .required( 'Requis' ), 
​​}); 

const  FormComponent = ( ) => ( 
  <Formik
    initialValues={{ 
      name : '', 
      email : '', 
      message : '', 
    }} 
    validationSchema={FormSchema} 
    onSubmit={(values, { setSubmitting }) => { 
      setTimeout(() => { 
        alert(JSON. stringify(values, null, 2)); 
        setSubmitting(false); 
      }, 400); 
    }} 
  > 
    {({ isSubmitting }) => ( 
      <Form> 
        <Field type="text" name="name" placeholder="Name" /> 
        <Field type="email" name="email" placeholder="Email " /> 
        <Field 
          component="textarea" 
          name="


        /> 
        <button type="submit" disabled={isSubmitting}> 
          Soumettre 
        </button> 
      </Form> 
    )} 
  </Formik> 
); 

exporter le composant de  formulaire par défaut  ;

Ce code définit un Formcomposant qui utilise les bibliothèques formiket yuppour créer un formulaire de collecte d’informations auprès des utilisateurs. Le formulaire comprend des champs pour le nom, l’e-mail et le message de l’utilisateur, et il utilise l’ FormSchemaobjet pour définir des règles de validation pour chaque champ. Lorsque le formulaire est soumis, les données du formulaire sont enregistrées dans la console.

Déploiement à Vercel

Maintenant que notre application est construite et testée localement, déployons-la sur Vercel, une plate-forme populaire pour le déploiement d’applications sans serveur.

Pour déployer notre application sur Vercel, nous devrons créer un compte Vercel et installer la CLI Vercel. Vous pouvez créer un compte Vercel à l’URL suivante : https://vercel.com/ et installer la CLI Vercel en exécutant la commande suivante :

npm installer -g vercel

Ensuite, créez un vercel.jsonfichier à la racine de votre répertoire de projet et ajoutez-y la configuration suivante :

{ 
  "version": 2 , 
  "name" : "incrumentus-ai" , 
  "alias" : "incrumentus-ai.vercel.app" , 
  "builds" : [ 
    { " src ": "next.config.js" , " use" : "@vercel/next" } 
  ], 
  "routes": [ 
    { " src ": "/.*" , "dest" : "/index.js" } 
  ] 
}

Ce fichier de configuration indique à Vercel comment construire et déployer votre application. Il spécifie le nom et l’alias de votre application, ainsi que la configuration de construction et de routage.

Enfin, exécutez la commande suivante pour déployer votre application sur Vercel :

Vercel

Cela construira et déploiera votre application sur Vercel et vous fournira une URL où vous pourrez y accéder.

Conclusion

Dans ce didacticiel, nous avons parcouru le processus de création d’une application Web à l’aide des frameworks Next.js et React, et l’intégration de l’API OpenAI pour générer des invites et collecter des informations auprès des utilisateurs. Nous avons mis en place la structure du répertoire du projet, intégré l’API OpenAI, construit une interface utilisateur pour collecter des informations auprès des utilisateurs et déployé l’application sur Vercel.

J’espère que vous avez trouvé ce tutoriel utile et qu’il vous donne un bon point de départ pour créer vos propres applications avec Next.js et React. Si vous avez des questions ou avez besoin d’aide supplémentaire, n’hésitez pas à demander https://chat.openai.com/chat . Bonne chance pour votre projet!

Articles relatifs:

Retour en haut