見出し画像

GPT-Pilotでアプリを開発（続き１）

未来工匠

VS Code版のGPT-Pilotで日記アプリを開発してみる続きです。
タスク４が終わったので、タスク５に進むように指示したら、突然テクニカルライターエージェントが登場しました。

おめでとうございます
あなたはプロジェクトの57.14％を達成しました！
今のところ、あなたは
24 ファイル
636行のコード
を作成しました。
続行する前に、GPT Pilotはプロジェクトのドキュメントを作成します。

テクニカルライターエージェントは、以下のREADME.mdを作成しました。英語ですが、アプリの概要と特徴、インストール方法を分かりやすく書いてくれています。

MemoJournal

MemoJournal is a web application designed to transform short notes into diary entries. It allows users to jot down quick memos and then compiles these notes into a cohesive diary format, enabling users to reflect on their thoughts and experiences over time.

Overview

The application utilizes a Node.js and Express backend with MongoDB for data storage, incorporating Mongoose ORM for database operations. The frontend leverages EJS for templating and Bootstrap for styling, ensuring a responsive design. Authentication is session-based, and the project structure is organized into models, routes (including API endpoints), views, and configuration files.

Features

  • User Registration and Authentication: Users can sign up and log in using a username and password.

  • Memo Recording: Logged-in users can record memos, which are saved along with the timestamp of creation.

  • Calendar Functionality: A calendar highlights dates with memos, allowing users to navigate through months and select dates to view associated diary entries.

  • Diary Viewing: Clicking on a highlighted date displays a diary entry generated from memos of that particular day.

  • Automated Diary Generation: Memos are compiled into a diary entry format using GPT-3.5.

Getting started

Requirements

  • Node.js

  • MongoDB

Quickstart

  1. Clone the repository.

  2. Install dependencies with `npm install`.

  3. Set up your `.env` file based on the `.env.example` template.

  4. Start the server with `npm start`.

  5. Visit `http://localhost:3000` in your web browser to access the application.

License

Copyright (c) 2024.


開発（タスク５）

タスク５を進めるかどうか聞かれました。いよいよGPTとの連携部分を実装するようです。Yesを押します。

このタスクを実行しますか？

GPT-3.5を日記生成用に統合する。まず、npmを使ってOpenAI SDKを依存関係として追加します。次に、'routes/diaryRoutes.js' で、'/diary/:date' ルートを修正して、取得したメモを GPT-3.5 API に送信し、メモを首尾一貫した日記エントリにフォーマットするためのテキスト変換を要求します。環境変数を使用して、OpenAIのAPIキーを安全に保存します。生成された日記エントリを'diary.ejs'ビューに表示する。APIの失敗や予期せぬレスポンスに対して、適切なエラー処理を行う。

最初に開発者エージェントがタスクを以下のようなステップに落とし込みました。

  • OpenAI SDKをインストールする

    • `npm install openai`コマンドを実行

  • `.env`ファイルにOpenAI APIキーを追加

    • `OPENAI_API_KEY=your_openai_api_key_here`の行を追加し、実際のAPIキーに置き換える

  • `./routes/diaryRoutes.js`を修正

    • OpenAI SDKをインポートし、環境変数を読み込む

    • `/diary/:date`ルートハンドラで、取得したメモをGPT-3.5 APIに送信し、日記エントリを生成

    • 生成された日記エントリでビューを更新

  • `views/diary.ejs`を修正

    • 生成された日記エントリを表示するように更新

    • メモの反復表示セクションを置き換える

openaiにアクセスするためのライブラリをインストールするコマンド`npm install openai`を実行して良いか聞かれます。Yes

私に.envファイルの５行目を修正するように依頼してきました。該当ファイルを開いて、修正する箇所をハイライトしてくれています。「mongodbのURLを修正するように」と指示されていますが、特に修正する必要はなさそうなので、INPUT_REQUIREDというコメントを消して保存、Continueを押します。

続いて、11行目を編集するように、と指示されました。OpenAIのAPIキーを設定する場所です。ちゃんとハイライトしてくれています。APIキーを入力して、保存、Continueを押します。

コーディングが終わったようです。人間が確認するターンになりました。

アプリが動作するかどうか確認していただけますか？以下は動作するはずの説明です：

### ステップ1
アクション： npm start`を使ってサーバーを起動する。
期待される結果： サーバが起動したことを示すコンソール出力が表示されるはずである。例えば、"Server is running on port 3000"（または設定したポート）。

### ステップ2
アクション ウェブ・ブラウザを開き、http://localhost:3000/login（異なる場合は、3000を実際のポート番号に置き換えてください）にアクセスします。
期待される結果 ログインページが表示されます。

### ステップ3
アクション： 認証情報を使ってログインする。アカウントをお持ちでない場合は、まず http://localhost:3000/register にアクセスしてアカウントを作成し、ログインしてください。
期待される結果 ログイン後、メモを入力できるホームページにリダイレクトされます。

### ステップ4
アクション 提供されたテキストエリアにメモを入力し、「記録」ボタンを押して送信する。
期待される結果 メモが保存され、成功メッセージが表示されるか、すべてのメモを表示するページにリダイレクトされます。

### ステップ 5
アクション 通常ナビゲーションバーにある「カレンダー」リンクをクリックして、カレンダービューに移動します。
期待される結果 カレンダーが表示されます。これが最初のメモでない場合、メモが保存されている日が強調表示されるはずです。

### ステップ6
アクション 記録したメモのある日をクリックします。
期待される結果 その日付のダイアリービューページが表示されます。

### ステップ7
アクション ページの内容を観察する。
期待される結果 入力したメモをもとにGPT-3.5が生成した一貫性のある日記が表示されるはずです。そのエントリーは、あなたが入力した単純なメモテキストよりも、より物語的でまとまりのあるものになるはずです。

### ステップ8
アクション メモの内容や日付を変えて、ステップ4～7を繰り返します。
期待される結果 毎回、生成される日記のエントリには、その特定の日付のメモの内容が反映されているはずです。これは、システムが、記録したメモに基づいてGPT-3.5を使って日記のエントリを動的に生成していることを示しています。

テストします。
ステップ6まではOK。ステップ7で、画面には"GPT-3.5が生成した一貫性のある日記"ではなく、エラーが表示されます。

「ステップ7でエラー。画面にはGPT-3.5が生成した一貫性のある日記ではなく、"Server error while fetching memos"と表示される。」と伝えます。

バックエンドのログが欲しいと言われたので、Copy Outputボタンを押して、ログをコピーして、Submit。

OpenAIのライブラリが古いことを疑っているようです。最新のライブラリをインストールするコマンド`npm install openai@latest`を実行しても良いかと聞いてきました。Yes

修正が終わって、再度、人間が試す番になりました。

ダメです。ステップ7が失敗することを５回伝えましたが、毎回、`npm install openai@latest`を実行させられるだけで、エラーが解消する気配がありません。ソースコードを見てみたい気持ちを堪えて、これまで押したことのない、I'm Stuck In A Loopボタンを押してみます。

新しいボタンが出てきました。１番から５番のソリューションから選んで欲しいようです。

1: OpenAI SDK の import ステートメントと `Configuration` オブジェクトと `OpenAIApi` オブジェクトのインスタンス化にタイプミスやシンタックスエラーがないかチェックしてください。小さなタイプミスでも、報告されたエラーにつながる可能性があります。

2: `node_modules` フォルダと `package-lock.json` ファイルを手動でクリアしてから、再度 `npm install` を実行して、すべての依存関係が正しくインストールされ、破損したり、モジュールが見つからないことを確認する。

3: 現在の実装スタイルで動作することがわかっている特定のバージョンの OpenAI SDK に戻す。これは `npm install openai@version_number` で特定のバージョンをインストールし、`version_number` を希望のバージョンに置き換えることで可能です。

4: プロジェクトの依存関係ツリー全体を `npm list` を使って確認し、OpenAI SDK の使用で問題を起こすような競合するバージョンの依存関係がないか確認します。

5: `Configuration` オブジェクトと `OpenAIApi` オブジェクトを使って、初期化と OpenAI API への基本的な API 呼び出しだけを行うシンプルなスタンドアローンスクリプトを作成する。これは問題の切り分けに役立ち、問題がプロジェクトのコードの他の部分に影響されないことを保証します。

OpenAIのライブラリバージョンが怪しいので3番をクリック。バージョン4.33.1をインストールして良いか聞かれました。Yes

人間のターン。

解決しません。4以外のボタンも全て押してみましたが、エラーは解消しませんでした。

また新しいソリューションを５つ提案してきたので、成功するまで、ボタンを押し続けようかと思いましたが、料金がえらいことになりそうなのでやめました。

続く


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