Open2023/03/21にコメント追加3

TypeScriptでChatGPTのAPIを呼び出すコードをVSCodeでデバッグしたい

TypeScript

VS Code

ChatGPT

masaoblue

とても良い入門記事があったので手元で動かしてみることにした。

TypeScriptではじめるChatGPT API：入門から一歩進んだテクニックまで - Uzabase for Engineers

とりあえずREADMEに沿って進めればすぐに実行はできた。でも例えば

ここの choices[0] って何？と思ったときに、普通に実行していると確認する術がない。
分からない箇所はたくさんあって、console.logをいちいち仕掛けるのも面倒なのでVSCodeでデバッグ実行して止められるようにしてみる。

完成版

フォークしたリポジトリにpushしてみました。README参照

以下に詳細を記載します

目標

VSCodeで、コマンドを指定してデバッグ実行させたい
API KEYは環境変数ではなく.envファイルから読み込むようにしたい

結論

以下の3つを実施することでできるようになった

後述の .vscode/launch.json を作成
.env ファイルに変数定義
npm i -D dotenv を実行

1. launch.jsonの定義

こんな感じで書いてみた。
引数はコマンドごとに異なるので手入力。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug current command",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/ts-node",
      "args": "--require=dotenv/config '${workspaceFolder}/src/index.ts' ${input:command} ${input:args}",
      "skipFiles": [
        "<node_internals>/**",
        "node_modules/**"
      ],
      "env": {
        "TS_NODE_PROJECT": "${workspaceFolder}/tsconfig.json"
      },
      "console": "integratedTerminal"
    }
  ],
  "inputs": [
    {
      "type": "pickString",
      "id": "command",
      "description": "Select command",
      "options": [
        "simple-chat",
        "summary-and-comment",
        "classify",
        "summary-long-text",
        "qa-with-search",
        "create-embedding",
        "qa-with-embedding",
        "help"
      ],
      "default": "simple-chat"
    },
    {
      "type": "promptString",
      "id": "args",
      "description": "Input args"
    }
  ],
}

今回はコンパイルせず実行したいため、runtimeExecutableにts-nodeのパスを定義
デフォルトで用意されてる変数に ${fileBasename} があるから、これを書いておくとエディタでフォーカスしているファイルの名前をコマンドラインの引数として指定できるらしい。便利！
- Visual Studio Code Variables Reference
args はnodeに渡すオプションで、 runtimeArgs は、ts-nodeに渡すオプションになるらしい
- https://stackoverflow.com/a/57521769
以下のIssueにある通り、argsを配列で書いてしまうと、promptStringでスペース区切りの文字列を渡した場合にエスケープされてしまうため、複数渡したい場合は1つの文字列として記述する必要があるらしい。
- https://github.com/microsoft/vscode/issues/83678#issuecomment-1203282010
- ただ、この場合すべての引数がエスケープされないので、パスを含めるような場合はクオートで囲った方が良さそう

2. .envを定義

プロジェクトルートに .env を作って、以下を記述。
OPENAI_ORGANIZATIONはこのリポジトリ内では使われていなくて、openaiライブラリの内部で使われてるのかな？と思って検索してみたけどこっちにも無さそうなので、指定しなくても大丈夫かも。

OPENAI_ORGANIZATION=<your-organization>
OPENAI_API_KEY=<your-api-key>

masaoblue

使ってみた

F5で実行して、summary-and-commentを選択

この記事のURLを入力

無事に止まった

なお出力は以下。短い記事なのにそこそこ要点掴んでてすげーって感じ。
ただ 今度自分も実践してみたいウマ って発言するヤツは一生やらねーんだよなーーー(身に覚え有り)

要約：
TypeScriptで開発されたChatGPT APIを動かすために、VSCodeでデバッグ実行させる方法を説明した記事が公開された。具体的には、launch.jsonを定義してパスや引数を指定し、.envファイルからAPI KEYを読み込むようにした。この方法を実行することで、デバッグ実行を簡単に行うことができ、開発の効率が向上するという。

感想：
この記事を読んで、開発効率が格段に上がりそうでとても嬉しいウマ！特に、VSCodeでデバッグ実行させる方法を紹介していたのが非常に役立ちそうだウマ。今度自分も実践してみたいウマ！また、記事中のlaunch.jsonや.envファイルの定義を見ると、しっかりとした設定がされていることが分かります。こういった細かい設定が行き届いたプロジェクトに携われる機会を持てることは、開発者としてとても嬉しいことだと感じたウマ。

masaoblue

PR出そうかなとも思ったけど、趣旨と違う気がするしREADMEが無駄にややこしくなるだけな気がしたのでやめました。