text gpt p5 app

Text-GPT-p5

Ein Text für den generativen Editor p5.js, der auf GPT-3.5 basiert

1. akzeptiert Klartext-Eingabeaufforderungen
2. macht einen OpenAI GPT-3.5-Anruf?
3. Konvertiert sie in p5.js-Code?
4. Zeigt die p5.js-Skizze an ?️

Es ist auch eine Sandbox-Umgebung zum Ausführen von p5.js (oder einem beliebigen Javascript-Code). Sie können den generierten Code direkt bearbeiten, wodurch die Skizze sofort erneut ausgeführt wird, ähnlich wie bei Glitch oder Replit.

Unter der Haube

Eine Next.js-Full-Stack-App (React, Next API-Routen).

Knotenmodul(e):

• React-Codemirror
• kors

Erste Schritte

Klonen Sie zunächst das Repository und installieren Sie die erforderlichen Knotenmodule.

npm install

Umgebungsvariablen

Erstellen Sie eine Kopie der Datei .env.example und benennen Sie sie in .env um. Geben Sie Ihren OpenAI-API-Schlüssel ein. Spezifische Anweisungen 5 und 6 finden Sie hier.

Das Beispiel enthält auch NEXT_PUBLIC_REMOTE_API_URL und WHITELISTED_DOMAINS , falls Sie von einem anderen Server abrufen möchten.

Entwicklung, Build, Bereitstellung

Next.js-Standardeinstellungen. Befehle finden Sie package.json . Sowohl Entwicklung als auch Produktion befinden sich auf Port 3000.

Danksagungen

• processing/p5.js
• uiwjs/react-codemirror
• Codemirror/Codemirror5
• syumai/sandboxed-eval
• openai/openai-quickstart-node
• vercel/next.js/.../cors