Il s’agit d’un guide pratique étape par étape pour créer une application sans serveur GPT-3 React à l’aide de NextJS et ReactJS.

Il peut être étendu pour le transformer en une application SaaS à part entière qui utilise l’API GPT-3.

Annonces

Il couvre les sujets ci-dessous :

• Exigences pour l’application GPT-3 React
• Création de l’application NextJS
• Installation des dépendances pour l’application GPT-3 React
• Ajout de la fonctionnalité API GPT-3 à l’application GPT-3 React
• Construire un produit SaaS basé sur GPT-3 React

Si vous souhaitez simplement télécharger et exécuter directement le code, vous pouvez l’obtenir à partir d’  ici

Exigences pour l’application GPT-3 React

Programme en ligne de commande

Vous devez avoir accès à un programme en ligne de commande pour utiliser le code de cet article. Le nom du programme dépend du système d’exploitation que vous utilisez.

Annonces

Clé API GPT-3

Pour créer une application alimentée par GPT-3, vous devez disposer de la clé API d’OpenAI. Pour cela, vous devez demander l’accès à l’API. Si vous n’y avez pas encore accès, j’ai écrit un guide sur la façon d’accéder à l’API OpenAI GPT-3.

Si vous venez de l’un des pays où OpenAI n’est pas disponible , vous aurez peut-être besoin d’un autre fournisseur d’IA. Dans ce cas, vous pouvez apporter d’autres modifications au code avant de l’exécuter.

NodeJSName

Vous devez avoir installé NodeJS 10.13 ou une version ultérieure.

Installation

Créer l’application NextJS

Nous utiliserons le modèle d’ create-next-app application de NextJS pour créer une application de démarrage sur laquelle nous nous baserons plus tard.

Pour commencer, ouvrez votre ligne de commande ou Terminal App et exécutez la commande ci-dessous

Annonces

npx create-next-app gpt-3-app

Le  gpt-3-app à la fin de la commande ci-dessus est le nom du dossier dans lequel votre application doit être créée. Vous pouvez le nommer comme vous voulez.

Ou vous pouvez également utiliser  yarn la commande pour faire la même chose, comme ceci.

yarn create next-app

Cela installera les dépendances minimales comme réagir, réagir-dom, suivant, etc. et créera une structure pour une simple application NextJS.

Une fois l’installation terminée, dans le terminal
ou l’application de ligne de commande, modifiez le répertoire dans le dossier d’application nouvellement créé, par exemple.

cd gpt-3-app

Remplacez  gpt-3-apppar le nom du dossier que vous avez utilisé précédemment lors de la création de l’application nextjs.

Annonces

Suivant. exécutez la commande ci-dessous pour démarrer l’application en mode développement et voir si tout fonctionne bien jusqu’à présent.

yarn dev

Il démarrera l’application de démarrage sur une URL similaire à celle-ci – http://localhost:3000

Et si vous l’ouvrez dans votre navigateur, vous devriez voir quelque chose comme ça.

Si vous rencontrez des problèmes avec cette étape, consultez  NextJS Docs .

Ajouter des dépendances pour l’application GPT-3 React

Nous n’installerons qu’une seule dépendance de plus. Il s’agit du module de nœud openai-api . C’est un petit wrapper autour de l’API GPT-3.

Tout d’abord, arrêtez l’application en tapant  Ctl+C et en appuyant  enter sur la ligne de commande.

Ensuite, pour installer le module, exécutez la commande ci-dessous à partir du dossier de l’application.

npm i openai-api

Ajouter la fonctionnalité GPT-3 à l’application GPT-3 React

Étant donné que cette application implique d’appeler l’API OpenAI GPT-3 avec une clé secrète, nous ne voulons pas qu’elle soit exposée dans le navigateur à qui que ce soit. Par conséquent, nous définirons notre propre point de terminaison API qui appellera à son tour le point de terminaison GPT-3.

Tout d’abord, créez un nouveau fichier appelé .env.local dans le répertoire du projet et ajoutez votre clé API OpenAI comme ceci.

OPENAI_API_KEY=your-api-key

Assurez-vous que  .env.local est ajouté au  gitignoreavant de vérifier votre code dans un référentiel git. Vous ne voulez pas exposer votre clé API secrète au public, ce qui entraînerait une utilisation abusive et une suspension par OpenAI.

Annonces

Ensuite, nous définissons notre point de terminaison API. Créez un fichier appelé  openai.js dans  pages/api/et ajoutez le code ci-dessous à ce fichier.

const OpenAI = require('openai-api');
const openai = new OpenAI(process.env.OPENAI_API_KEY);

export default async (req, res) => {
  let prompt = `Artist: ${req.search}\n\nLyrics:\n`;
  const gptResponse = await openai.complete({
    engine: 'davinci',
    prompt: prompt,
    maxTokens: 50,
    temperature: 0.7,
    topP: 1,
    presencePenalty: 0,
    frequencyPenalty: 0.5,
    bestOf: 1,
    n: 1
});

  res.status(200).json({text: `${gptResponse.data.choices[0].text}`})
}

Dans le code ci-dessus, nous commençons par importer le module openai
et récupérons la clé API à partir du fichier env. Nous définissons ensuite une fonction asynchrone qui prendra les entrées de l’utilisateur reqet appellera l’API OpenAI GPT-3 à l’aide du module Openai. Dans l’appel, nous transmettons également certains paramètres pour l’API GPT-3. Consultez mon guide GPT-3 pour une description détaillée de ces paramètres.
L’inspiration pour cette invite GPT-3 particulière vient d’  ici

Ensuite, nous ajoutons le code pour déclencher cette API à partir de l’interface utilisateur et utilisons la sortie pour l’afficher à l’utilisateur.

Remplacez le code du  pages/index.js par ceci.

import Head from "next/head";
import styles from "../styles/Home.module.css";
import { useState, useEffect } from 'react';

export default function Home() {
  const [data, setData] = useState( { text:'' });
  const [query, setQuery] = useState();
  const [search, setSearch] = useState();
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      if (search) {
      setIsLoading(true);
      const res = await fetch(`/api/openai`, {
        body: JSON.stringify({
          name: search
        }),
        headers: {
          'Content-Type': 'application/json'
        },
        method: 'POST'
      })
      const data = await res.json();
      setData(data);
      setIsLoading(false);
    }};

    fetchData();
  }, [search]);
  return (
    <div className={styles.container}>
      <Head>
        <title>GPT-3 App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          <a>AI Lyrics Generator</a>
        </h1>

        <p className={styles.description}>Built with NextJS & GPT-3 API</p>

        <div className={styles.grid}>
          <div className={styles.card}>
            <h3>Enter Artist:</h3>
            <input
          type="text"
          value={query}
          onChange={event => setQuery(event.target.value)}
        />
        <button
          type="button"
          onClick={() =>
            setSearch(query)
          }
        >
          Generate
        </button>

          <h4>Lyrics</h4>  
          {isLoading ? (
            <div>Loading ...</div>
         ) : (
           <span>
           {data.text}
           </span>
           )}

          </div>
        </div>
      </main>
    </div>
  );
}

Démarrez le serveur de développement avec  yarn dev et vous verrez ceci.

Annonces

 

Pour le tester, entrez le nom d’un musicien dans le champ de texte et appuyez sur générer. Cela générera des paroles qui seront dans la lignée de l’œuvre déjà réalisée par ce musicien.

Code complet sur  github

Construire un produit SaaS GPT-3 React

Vous ne pouvez pas publier une application alimentée par l’API GPT-3 sans l’approbation d’OpenAI. C’est la raison pour laquelle je ne partage pas le lien vers la version hébergée de cette application. Cependant, voici une courte démo de l’application terminée.

Certaines des choses qui sont requises pour l’approbation sont l’ajout de l’authentification de l’utilisateur et d’autres fonctionnalités de sécurité à l’application. Pour un aperçu de ce qu’il faut pour créer et lancer une application alimentée par GPT qui peut être rendue publique, lisez mon article  ici .

Si vous souhaitez convertir ce modèle en une application à part entière, vous pouvez utiliser ce  générateur de code NextJS/ReactJS

J’ai utilisé ce générateur de code pour créer plusieurs applications pour mes clients ainsi que pour moi-même.