text gpt p5 app

テキスト-GPT-p5

GPT-3.5 を搭載した p5.js 生成エディタへのテキスト

1. プレーンテキストのプロンプトを受け取ります
2. OpenAI GPT-3.5 呼び出しを行いますか?
3. それらを p5.js コードに変換しますか?
4. p5.j​​s スケッチを表示します ?️

これは、p5.js (または任意の JavaScript コード) を実行するためのサンドボックス環境でもあります。生成されたコードを直接編集すると、グリッチやリプリットと同様に、スケッチがすぐに再実行されます。

ボンネットの下で

Next.js フルスタック アプリ (React、Next API ルート)。

ノードモジュール:

• 反応コードミラー
• コルス

はじめる

まず、リポジトリのクローンを作成し、必要なノード モジュールをインストールします。

npm install

環境変数

.env.exampleファイルのコピーを作成し、名前を.envに変更します。 OpenAI API キーを入力します。具体的な手順 5 と 6 はこちらです。

この例には、別のサーバーから取得する場合に備えて、 NEXT_PUBLIC_REMOTE_API_URLとWHITELISTED_DOMAINSも含まれています。

開発、構築、展開

Next.js のデフォルト。コマンドについてはpackage.json参照してください。開発と運用の両方がポート 3000 上にあります。

謝辞

• 処理/p5.js
• uiwjs/react-codemirror
• コードミラー/コードミラー5
• シュウマイ/サンドボックス評価
• openai/openai-クイックスタートノード
• vercel/next.js/.../cors