GPT4AllをNode.jsから使ってみる

料金を気にしながら、遊び目的でChatGPTを使うのが微妙にストレスだったので、無料&ローカルでも動くGPT4Allを使ってみた。

グラボ非搭載の低スペックPCでも使える軽量チャットAI「GPT4ALL」の使い方まとめ

基本的にこの記事の通りやればサクッと動いた。2017年のインテルiMacでやり取りに数十秒かかるけど、とりあえず遊ぶ分には十分使えそう。

…ならば、Node.jsでも使いたい。

本サイトにTypeScriptから叩くやり方は書いてあったので、それを参考にやってみたら、簡単にできた!

作業環境

macOS Monterey(12.6.5)
Node.js v18.2

Node.jsの設定

  1. npmでGPT4Allをインストール
    npm install gpt4all
  2. とりあえず、簡単なサンプルスクリプトを実行。
    import { GPT4All } from 'gpt4all';
    
    let gpt4all = null;
    const _model = 'gpt4all-lora-quantized';
    
    /*GPT4ALL初期化*/
    const initGPT = async () => {
        gpt4all = new GPT4All(_model, true);
        await gpt4all.init();
        await gpt4all.open();
        console.log(">> GPT Opened");
        askGPT("Hello GPT!")
    }
    
    /*問い合せ実行*/
    const askGPT = async(xQstr) =>{
      console.log(xQstr);
      const xResponse = await gpt4all.prompt(xQstr);
      console.log(">>" + xResponse);
    }
    
    initGPT();

    初回はgpt4allの本体と学習済みモデル(gpt4all-lora-quantized)データがダウンロードされる。4G位あるので恐ろしく時間がかかけど、のんびり待つ。

  3. スクリプトがエラーになる場合、モジュールのimportが機能してない場合が多い。その場合は「package.json」に以下の一行を追加。
    "type":"module"
  4. こんな感じになれば、成功!
     % node sample.js
    >> GPT Opened
    Hello GPT!
    >>Thank you for your input, GPT!
  5. 別の学習済みモデルを利用したければ、ダウンロードして下記ディレクトリに入れ、newする時にモデル名を指定すれば使える。
    /Users/<ユーザー名>/.nomic/

これで、心置きなく、遊べる!!

ESP32-CAMのStream動画をA-FrameのVR空間に表示する

M5Camera Xの動画をA-FrameのVR空間内に表示させたいと思ったが、Motion JPEG stream形式だと、デフォルトの機能(image、video)では対応できなかった。

で、調べたところドンピシャのページを発見。仕組みはよく分からんけど、サンプル通りのコンポーネント作ったらすんなり表示できた!!

>> Use Motion JPEG stream as a source of 360 deg image

AFRAME.registerComponent('box', {
    schema: {
        width: { type: 'number', default: 1 },
        height: { type: 'number', default: 1 },
        depth: { type: 'number', default: 1 },
        color: { type: 'color', default: '#AAA' }
    },

    init: function () {
        var data = this.data;
        var el = this.el;

        this.loader = new THREE.TextureLoader();

        this.geometry = new THREE.BoxBufferGeometry(data.width, data.height, data.depth);
        this.material = new THREE.MeshPhongMaterial({
            map: this.getImage()
        });
        this.material.needsUpdate = true;
        this.mesh = new THREE.Mesh(this.geometry, this.material);
        el.setObject3D('mesh', this.mesh);
    },

    tick: function (time, timeDelta) {
        this.mesh.material.map.img = this.getImage();
        this.mesh.material.map.needsUpdate = true;
    },

    getImage: function() {
        return this.loader.load("ストリーム動画のパス");
    }

サンプルでは立方体だが、下記の部分をいじれば、他のプリミティブでもいける。

this.geometry = new THREE.BoxBufferGeometry(data.width, data.height, data.depth);