3 Applications Puissantes Utilisant Next.js et Replit en 20 Minutes

Pourquoi vous devriez créer une application alimentée par GPT-3

Plongez dans le monde de l'IA avec ce tutoriel GPT-3. En 20 minutes, vous maîtriserez la puissance d'un transformateur de texte de 175 milliards de paramètres, GPT-3 d'OpenAI. Ce guide, adapté à ceux qui ont une compréhension de base de React et NextJS, vous guidera à travers les étapes simples de la création et du déploiement de votre propre application Web. Si vous êtes nouveau dans ces technologies, ne vous inquiétez pas, nous avons des ressources pour vous mettre à jour. Nous utiliserons NextJS et Replit pour construire et héberger notre application, en couvrant toutes les bases pour que votre application GPT-3 soit en marche.

Configuration de Replit et importation de notre projet depuis GitHub

Nous commençons par créer un compte sur Replit où nous allons importer et initialiser notre projet. Cela nous permettra d'obtenir une version fonctionnelle afin que nous puissions voir nos mises à jour en temps réel.

Commencer avec Replit

1. La première chose que vous devez faire est de créer un nouveau projet Replit. Pour ce faire, rendez-vous sur Replit et inscrivez-vous pour un compte si vous n'en avez pas encore.

2. Une fois connecté à Replit, cliquez sur le + dans le coin supérieur droit.

3. Dans ce tutoriel, nous utiliserons le modèle de démarrage GPT-3 qui facilitera notre travail et vous permettra de créer votre propre application alimentée par GPT-3 en 20 minutes.

4. Cliquez sur Importer depuis GitHub.

5. Collez https://github.com/nextgrid/GPT-3-Nextjs-Tailwind-starter dans le champ URL de GitHub.

6. Cliquez sur le bouton Importer depuis GitHub.

Installation des dépendances & Configuration de notre projet

La première chose que nous devons faire est d'ajouter notre clé API GPT-3 d'OpenAI. Si vous n'en avez pas, vous pouvez en obtenir une en vous inscrivant sur beta.openai.com. Une fois votre compte créé, vous pouvez aller dans votre profil et cliquer sur l'onglet "Clés API" ou simplement cliquer sur ce lien pour les clés API OpenAI.

Ajoutez notre clé API GPT-3 au fichier .env

1. Cliquez sur l'icône de cadenas sur le côté droit.

2. Dans le champ de clé, écrivez OPENAI_API_KEY.

3. Dans le champ de valeur, écrivez votre clé API GPT-3 qui doit ressembler à sk-tKyMX1XbOS***Agaa5qx89UToRCy.

4. Pour démarrer notre application, nous devons mettre à jour la commande d'exécution. Dans le champ de commande d'exécution, changez la commande de npm run start à npm run dev.

5. Cliquez sur le bouton Terminé.

Installer les dépendances et démarrer l'environnement de développement

Il est maintenant temps d'installer toutes les dépendances et de démarrer l'environnement de développement. Suivez ces étapes :

1. Cliquez sur le gros bouton vert RUN.
2. Attendez que l'environnement de développement installe et démarre.
3. Une fois que vous avez cliqué sur le bouton RUN, vous verrez une sortie dans la fenêtre de la console où il installe d'abord les paquets et puis démarre notre serveur de développement.
4. Une fois cela fait, vous verrez votre application Web dans la fenêtre au-dessus de la console.

Construire notre application alimentée par GPT-3

Pour l'instant, nous avons un frontend simple connecté à notre backend alimenté par GPT-3. Si vous entrez un texte dans le champ de texte, vous verrez la réponse générée. Essayons de saisir du texte et voyons ce qui se passe :

Votre saisie :

Sortie GPT-3 :

Personnaliser notre application alimentée par GPT-3

À ce stade, vous devriez avoir une application alimentée par GPT-3 que vous pouvez utiliser pour générer du texte. Il est maintenant temps de configurer l'application selon nos besoins. Par exemple, nous pouvons créer une application alimentée par GPT-3 qui aide à résumer un article que nous pouvons utiliser comme notre texte pour un post sur les réseaux sociaux.

Configurer le point de terminaison de l'API

Commencez par ouvrir /pages/api/openai.js. Le fichier devrait ressembler à ceci :

Pour nous faciliter la vie, nous avons ajouté les valeurs suivantes : $beforePrompt et $afterPrompt simplifieront l'ajout de valeurs souhaitées avant et après notre prompt avant qu'il ne soit envoyé à l'API GPT-3.

Alors que nous construisons un générateur de posts sur les réseaux sociaux, nous utiliserons des espaces réservés spécifiques pour modifier le prompt.

Tester notre application

Maintenant, testons notre application en utilisant un article de TechCrunch. Voici un extrait :

Instagram vient d'annoncer une nouvelle fonctionnalité qui permet aux entreprises de promouvoir leurs Reels pour les transformer en publicités ! C'est un excellent moyen d'atteindre de nouvelles audiences et de faire connaître votre histoire de marque. N'oubliez pas de vérifier vos Insights pour voir quelles publicités ont le mieux fonctionné.

Mots finaux

Félicitations pour avoir terminé ce tutoriel GPT-3 ! En seulement 20 minutes, vous avez posé les bases pour créer des applications diverses. Mais pourquoi s'arrêter là ? Rejoignez nos hackathons IA, où en seulement sept heures, vous pouvez collaborer avec une communauté mondiale de plus de 52 000 passionnés pour créer un prototype d'application IA fonctionnelle.

Façonnons l'avenir avec l'IA !