3 Leistungsstarke Anwendungen mit Next.js und Replit in 20 Minuten

Warum Sie eine von GPT-3 unterstützte App erstellen sollten

Tauchen Sie mit diesem GPT-3-Tutorial in die Welt der KI ein. In 20 Minuten werden Sie die Macht eines Texttransformators mit 175 Milliarden Parametern, GPT-3 von OpenAI, nutzen. Dieser Leitfaden, der für Personen mit einem grundlegenden Verständnis von React und NextJS geeignet ist, führt Sie durch die mühelosen Schritte zur Erstellung und Bereitstellung Ihrer eigenen Webanwendung. Wenn Sie neu in diesen Technologien sind, keine Sorge, wir haben Ressourcen, um Sie auf den neuesten Stand zu bringen. Wir werden NextJS und Replit verwenden, um unsere Anwendung zu erstellen und zu hosten, und alle Grundlagen abdecken, um Ihre GPT-3-Anwendung zum Laufen zu bringen.

Einrichten von Replit und Importieren unseres Projekts von GitHub

Wir beginnen mit der Erstellung eines Kontos bei Replit, wo wir unser Projekt importieren und initialisieren werden. Dies ermöglicht es uns, einen funktionierenden Build zu erhalten, damit wir unsere Updates in Echtzeit sehen können.

Erste Schritte mit Replit

Das erste, was Sie tun müssen, ist, ein neues Replit-Projekt zu erstellen. Gehen Sie dazu zu Replit und melden Sie sich an, falls Sie noch kein Konto haben.
Nachdem Sie sich bei Replit angemeldet haben, klicken Sie auf das +-Zeichen in der oberen rechten Ecke.
In diesem Tutorial verwenden wir das GPT-3-Boilerplate, das unser Leben einfacher macht und Ihnen erlaubt, Ihre eigene von GPT-3 unterstützte Anwendung in 20 Minuten zu erstellen.
Klicken Sie auf Von GitHub importieren.
Fügen Sie https://github.com/nextgrid/GPT-3-Nextjs-Tailwind-starter in das GitHub-URL-Feld ein.
Klicken Sie auf die Schaltfläche Von GitHub importieren.

Abhängigkeiten installieren & Unser Projekt konfigurieren

Als erstes müssen wir unseren GPT-3-API-Schlüssel von OpenAI hinzufügen. Wenn Sie keinen haben, können Sie einen erhalten, indem Sie sich bei beta.openai.com anmelden. Sobald Ihr Konto erstellt ist, können Sie zu Ihrem Profil gehen und auf die Registerkarte "API-Schlüssel" klicken oder einfach diesen Link für OpenAI API-Schlüssel klicken.

Unseren GPT-3 API-Schlüssel zur .env-Datei hinzufügen

Klicken Sie auf das Schloss-Symbol auf der rechten Seite.
Geben Sie in das Schlüssel-Feld OPENAI_API_KEY ein.
Geben Sie in das Wertefeld Ihren GPT-3-API-Schlüssel ein, der etwa so aussieht: sk-tKyMX1XbOS***Agaa5qx89UToRCy.
Um unsere Anwendung zu starten, müssen wir den Ausführungsbefehl aktualisieren. Ändern Sie im Feld Ausführungsbefehl den Befehl von npm run start auf npm run dev.
Klicken Sie auf die Schaltfläche Fertig.

Abhängigkeiten installieren und Entwicklungsumgebung starten

Jetzt ist es Zeit, alle Abhängigkeiten zu installieren und die Entwicklungsumgebung zu starten. Befolgen Sie diese Schritte:

Klicken Sie auf die große grüne RUN-Schaltfläche.
Warten Sie, bis die Entwicklungsumgebung installiert und gestartet ist.
Sobald Sie die RUN-Taste gedrückt haben, sehen Sie Ausgaben im Konsolenfenster, in denen zuerst Pakete installiert und dann unser Entwicklungsserver gestartet wird.
Sobald dies erledigt ist, sehen Sie Ihre Web-App im Fenster über der Konsole.

Erstellen unserer von GPT-3 unterstützten Anwendung

Im Moment haben wir ein einfaches Frontend, das mit unserem von GPT-3 unterstützten Backend verbunden ist. Wenn Sie einen Text in das Texteingabefeld eingeben, sehen Sie die generierte Antwort. Lassen Sie uns versuchen, Text einzugeben und zu sehen, was passiert:

Ihr Eingabe:

GPT-3-Ausgabe:

Unseren von GPT-3 unterstützten Anwendung anpassen

In diesem Stadium sollten Sie eine von GPT-3 unterstützte Anwendung haben, mit der Sie Texte generieren können. Jetzt ist es an der Zeit, die Anwendung an unsere Bedürfnisse anzupassen. Zum Beispiel können wir eine von GPT-3 unterstützte Anwendung erstellen, die hilft, einen Artikel zusammenzufassen, den wir als unseren Text für einen Social-Media-Beitrag verwenden können.

Die API-Endpunkt konfigurieren

Beginnen Sie damit, /pages/api/openai.js zu öffnen. Die Datei sollte ähnlich aussehen:

Um unser Leben einfacher zu machen, haben wir die folgenden Werte hinzugefügt: Die $beforePrompt und $afterPrompt werden das Hinzufügen gewünschter Werte vor und nach unserem Prompt, bevor er an die GPT-3-API gesendet wird, vereinfachen.

Da wir einen Generator für Social-Media-Beiträge erstellen, verwenden wir spezifische Platzhalter, um den Prompt zu modifizieren.

Unsere Anwendung testen

Jetzt lassen Sie uns unsere Anwendung mit einem Artikel von TechCrunch testen. Hier ist ein Auszug:

Instagram hat gerade eine neue Funktion angekündigt, mit der Unternehmen ihre Reels boosten können, um sie in Anzeigen zu verwandeln! Dies ist eine großartige Möglichkeit, neue Zielgruppen zu erreichen und Ihre Markenstory zu verbreiten. Denken Sie daran, Ihre Insights zu überprüfen, um zu sehen, welche Anzeigen am besten abgeschnitten haben.

Abschlussworte

Herzlichen Glückwunsch zum Abschluss dieses GPT-3-Tutorials! In nur 20 Minuten haben Sie das Fundament gelegt, um vielfältige Anwendungen zu erstellen. Aber warum hier aufhören? Machen Sie mit bei unseren KI-Hackathons, wo Sie in nur sieben Stunden mit einer globalen Gemeinschaft von über 52.000 Enthusiasten zusammenarbeiten können, um einen funktionierenden KI-App-Prototyp zu erstellen.

Lassen Sie uns die Zukunft mit KI gestalten!