ChatVRMをnode20.xで動くようにした(進捗なし)

NextJSの勉強がてら、ChatVRMを見直してみよう！と思って、魔境に入ってしまった話。

https://github.com/pixiv/ChatVRM/blob/c3b313240c36fd8aca2ffdc9e0e8b246f88d267e/package.json#L39

まずは nodeが 16.14.2、これだとChatGPTの最新のAPIが使えないので node20.xにする。

package.json
{
  "name": "aicuty-3d",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "test": "jest",
    "debug": "NODE_OPTIONS='--inspect' next src",
    "dev": "next dev",
    "build": "next build",
    "start": "next build && next start",
    "export": "next export",
    "lint": "next lint"
  },
  "dependencies": {
    "@charcoal-ui/icons": "^2.6.0",
    "@tailwindcss/line-clamp": "^0.4.4",
    "@types/dom-speech-recognition": "^0.0.1",
    "eslint": "8.36.0",
    "eslint-config-next": "13.2.4",
    "isomorphic-fetch": "^3.0.0",
    "next": "^13.5.6",
    "node-fetch": "^3.3.2",
    "openai": "^4.24.7",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "three": "^0.149.0",
    "typescript": "5.0.2"
  },
  "devDependencies": {
    "@charcoal-ui/tailwind-config": "^2.6.0",
    "@gltf-transform/core": "^2.4.6",
    "@pixiv/three-vrm": "^1.0.9",
    "@types/jest": "^29.5.11",
    "@types/node": "18.15.10",
    "@types/react": "18.0.29",
    "@types/react-dom": "18.0.11",
    "@types/three": "0.149.0",
    "autoprefixer": "^10.4.14",
    "jest": "^29.7.0",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.3.1",
    "ts-jest": "^29.1.1"
  },
  "engines": {
    "node": "20.x"
  }
}

現在の ChatVRM のコードは、結構前のOpenAIのSDKで、いろんなバグや不具合がある。
詳細はこの辺にあるんだけど、今は Configurationクラスを伴わない設計になっている。

OpenAI API error: "Module 'openai' has no exported member 'Configuration'"

なので書き直すならこんな感じになる。

import OpenAI from 'openai';
//https://stackoverflow.com/questions/76917525/openai-api-error-module-openai-has-no-exported-member-configuration
//import { Configuration, OpenAIApi } from "openai";
import { Message } from "../messages/messages";

そして最も難儀があるのが、サーバ側の .env ファイルから環境変数を読み込む処理。
ChatVRMはどういうわけかクライアント側に色々やらせたいらしく、各種APIの設定はクライアント側にある。これをクラウド側の処理に隠蔽したいなーとおもってジタバタしたんだけど、けっこう多岐にわたるので、どうしたものかな。

いちおうクラウドで動くようにはしたんだけど、ちょっとキーが漏れる可能性があって危ないので公開はしばらく時間ください。

プライベートリポジトリに持っていってしまったんだけど
最初からオープンでやればよかったかも。

コードの一部はここにおいておきます

https://github.com/kaitas/ChatVRM/commit/4c864b1dcfa700686a5b753ddca8cfed5644e903

進捗なくてスミマセン。