見出し画像

コーディング不要？ テキストからアプリを生成するGPT Engineerを触ってみた

Yas@BizDev支援のエンジニア

作成したいソフトウェアの要件をテキスト入力するだけで、GPTが勝手に開発してソースコードを出力してくれる「GPT Engineer」がTwitterで話題になっていたので触ってみました。
概要は次のTweetが分かりやすいです。


GPT Engineerとは？

ChatGPTさんにGPT Engineerの説明をしてもらいました。

GPT Engineerとは、テキストのプロンプトから任意のコンピュータ言語で完全なコードベースを生成することができる新しいGPT 4プログラムです。公式のGPT Engineer GitHubリポジトリから無料で入手できます。ただし、GPT Engineerを使用するには、OpenAI GPT 4 APIキーが必要です。コードを生成するたびに、GPT 4トークンを使用することになります。つまり、少額の料金を支払うことになります1。

GPT Engineerは、AutoGPTと似ていますが、より優れています。コードを書くことを目的として設計されており、テキストプロンプトと詳細な指示からプロジェクトの完全なコードベースを生成することができます。GPT Engineerは、ユーザーがソフトウェア要件をテキストファイルで提供し、不足している詳細を明確にするための質問を特定するというQAプロセスを採用しています。ユーザーは必要な明確化を提供し、最終的な要件が作成された後にソフトウェア開発が行われます。

ChatGPT

実際に使ってみた

何はともあれ、使ってみないことには、そのポテンシャルが分からないので、実際に使ってみました。
使うだけならば、GitHubのReadmeの手順に従えば簡単に使えます。

上記ページには、２種類の使用方法が記載されていますが、pipでインストールする方は、どうやらバグがあるらしく、起動することができませんでした。
そのため、下記のgit cloneする方法で起動させました。（[your api key]にはChatGPT4のAPIキーを入力してください）

git clone git@github.com:AntonOsika/gpt-engineer.git
cd gpt-engineer
make install
source venv/bin/activate
export OPENAI_API_KEY=[your api key]

// プロジェクトを作成
mkdir projects/my-new-project
// プロジェクト内にプロンプトを配置
touch projects/my-new-project/main_prompt
// GPT Engineerを実行
gpt-engineer projects/my-new-project

projectsフォルダには、exampleというサンプルが用意されていますが、それを実行しても面白くないので、自分でプロジェクトを作成して、自分が作成したいアプリの要件を書いたプロンプトを用意しました。
プロンプトの内容は下記になります。

次の機能を持つWebアプリをDjangoとReactを用いて作成してください。
・サインイン
・サインアップ
・ログイン
・ログアウト
・記事の投稿
・記事に「いいね」をする
・記事のお気に入り登録
・記事へのコメント
・レッスン情報の登録
・レッスン情報の閲覧
・レッスン一覧の表示
・レッスンへの参加登録
・レッスン参加者の表示
・レッスン担当者の表示

この要件でGPT Engineerを実行してみました。
下記が出力結果です。

まず、アプリケーションのアーキテクチャを概説します。次に、各ファイルの内容を記述します。

アーキテクチャ:
1. Djangoを使用してバックエンドAPIを構築します。
2. Reactを使用してフロントエンドを構築します。

バックエンドAPIは以下の機能を持つ必要があります。
- ユーザー認証（サインイン、サインアップ、ログイン、ログアウト）
- 記事のCRUD操作（投稿、いいね、お気に入り登録、コメント）
- レッスン情報のCRUD操作（登録、閲覧、一覧表示、参加登録、参加者表示、担当者表示）

フロントエンドは以下の機能を持つ必要があります。
- ユーザー認証のUI（サインイン、サインアップ、ログイン、ログアウト）
- 記事のUI（投稿、いいね、お気に入り登録、コメント）
- レッスン情報のUI（登録、閲覧、一覧表示、参加登録、参加者表示、担当者表示）

それでは、各ファイルの内容を記述します。

requirements.txt
```txt
Django==3.2.9
djangorestframework==3.12.4
django-cors-headers==3.10.0
```

package.json
```json
{
  "name": "frontend",
  "version": "1.0.0",
  "description": "React frontend for the web application",
  "main": "index.js",
  "scripts": {
.......

なかなか良い感じで出力しています。
しかし、出力を続けていくと…

frontend/src/components/SignUp.js
```javascript
import React, { useState } from 'react';
import axios from 'axios';

function SignUp() {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post('http://localhost:8000/api/users/', {
        username,
        email,
        password,
      });
      console.log(response.data);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <h1>Sign Up</h1>
      <form onSubmit={handleSubmit}>
        <label>Username:</label>
        <input
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
        <label>Email:</label>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <label>Password:</label>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
Traceback (most recent call last):

  File "/Users/yasuhiro/Documents/Development/GitHub/others/gpt-engineer/venv/lib/python3.9/site-packages/urllib3/response.py", line 710, in _error_catcher
    yield

  File "/Users/yasuhiro/Documents/Development/GitHub/others/gpt-engineer/venv/lib/python3.9/site-packages/urllib3/response.py", line 1077, in read_chunked
    self._update_chunk_length()

  File "/Users/yasuhiro/Documents/Development/GitHub/others/gpt-engineer/venv/lib/python3.9/site-packages/urllib3/response.py", line 1012, in _update_chunk_length
    raise InvalidChunkLength(self, line) from None

urllib3.exceptions.InvalidChunkLength: InvalidChunkLength(got length b'', 0 bytes read)

コードの出力途中でエラーが発生してしまいました。
何度か試したのですが、やはり同じエラーで停止してしまいました。
このエラーがGitHub上にIssueとして上がっているか確認したところ、同様のエラーが発生しているようで、下記のメッセージを発見。

I had the same problem after it had been running for about 5 minutes.

https://github.com/AntonOsika/gpt-engineer/issues?q=urllib3

直近のメッセージとしては、5分間実行すると、このエラーが起きるようです。（これが原因かどうかは確証できないですが）
もしかしたら、大量のアウトプットには、まだ対応できていないのかもしれないです。

現状は未完成だが、ポテンシャルは高い！

結果的に、求めていたアプリを生成できなかったが、途中経過を見る限り、エラーが解消されれば、しっかりしたコードを出力してくれる可能性を感じました。

私と同様にGPT Engineerを試してみた方の結果としては、コードは出力されたが、実行時にエラーが発生したようです。

これらのエラーを解消できたら、そのままコードを使用できなかったとしても、かなりコーディングの手間を省けるのではないでしょうか。
今後の進捗に期待です！

この記事が気に入ったらサポートをしてみませんか？