✨Gemini × 🦜LangChain入門

まず初めに

GeminiとLangChainに関する記事がまだあまりなかったので、備忘録も兼ねて書いてみました。AI系のサービスを使いこなせると作品の幅も大きく広がると思うので、ぜひ読んでみてください。

あと、いいね、コメントいただけると記事作成の励みになります😇

この記事に対象者

• Geminiに興味のある人
• LangChainに興味のある人

Geminiとは

Geminiとは、Googleが新しく公開した人工知能モデルです。Geminiは3種類のバージョンがあり、その中でも今回扱うGemini Proは無料で1分あたり60リクエストまで利用可能です。

LangChainとは

LangChainとは、GPTやGeminiなどのLLM(大規模言語モデル)を拡張できるライブラリとなっています。現在、対応している言語はPythonとTypeScript(JavaScript)です。

今回使うページ

https://js.langchain.com/docs/integrations/chat/google_generativeai

LangChainおすすめ記事

https://zenn.dev/umi_mori/books/prompt-engineer/viewer/langchain_overview

環境構築

今回はNode.jsを使って、デモを行いたいと思います。

Node.jsの準備

Node.jsをまだ入れていないという人はこちらのサイトからダウンロードをお願いします。

https://nodejs.org/en

まず、任意の名前のフォルダを作り、VScodeで開きましょう。フォルダの直下にindex.jsファイルを作り、下記のコマンドをVScodeのターミナルに入力しましょう。

$ npm init -y

次に必要なライブラリをインストールしてきます。

$ npm install nodemon 

importが使えるようにするために、package.jsonを編集しましょう。

index.js

{
  "name": "gemini-langchain",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
+ "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2",
    "nodemon": "^3.0.2"
  }
}

index.jsの中に下記のコードを書きましょう。

index.js

console.log('Hello');

コマンドを実行しましょう。

$ nodemon index.js

ターミナルにHelloと出力されたら成功です。

GeminiとLangChainの準備

次にGeminiとLangChainのライブラリをインストールしましょう。

$ npm install @google/generative-ai
$ npm install @langchain/google-genai

LangChainの公式ドキュメントから引っ張ってきた雛形をindex.jsに書きましょう。先ほど書いたコードは消して問題ありません。

index.js

import { ChatGoogleGenerativeAI } from "@langchain/google-genai";
import { HarmBlockThreshold, HarmCategory } from "@google/generative-ai";

const model = new ChatGoogleGenerativeAI({
  modelName: "gemini-pro",
  maxOutputTokens: 2048,
  safetySettings: [
    {
      category: HarmCategory.HARM_CATEGORY_HARASSMENT,
      threshold: HarmBlockThreshold.BLOCK_LOW_AND_ABOVE,
    },
  ],
});

const res = await model.invoke([
  [
    "human",
    "What would be a good company name for a company that makes colorful socks?",
  ],
]);

console.log(res);

APIKeyがないとエラーを吐かれるので、APIKeyを取得します。

APIKeyの取得

Google AI StudioからAPIKeyを取得しましょう。

最初に利用規約が出てくるので、同意して、サイドメニューのGet API keyを押しましょう。
赤枠をクリックし、新しいAPI keyを生成して、コピーしておきましょう。

APIKeyを設定する

index.jsのmodelの部分にapiKeyを設定しましょう。

index.js

const model = new ChatGoogleGenerativeAI({
+ apiKey: '<取得したAPIKey>',
  modelName: "gemini-pro",
  maxOutputTokens: 2048,
  safetySettings: [
    {
      category: HarmCategory.HARM_CATEGORY_HARASSMENT,
      threshold: HarmBlockThreshold.BLOCK_LOW_AND_ABOVE,
    },
  ],
});

今回はデモなので、APIKeyをハードコーディングしていますが、一般的には.envなどで管理を行なってください。

使ってみる

index.jsのresの部分を下記のように編集してみてください。

index.js

const res = await model.invoke([
    [
        "human",
        "こんにちは!",
    ],
]);

nodemonはフォルダを監視し、変更がなされると、再度実行されるため、ターミナルに結果が出力されていると思います。contentの部分に、AIからの返答があります。

AIMessage {
  lc_serializable: true,
  lc_kwargs: {
    content: 'こんにちは! あなたにお会いできてとても嬉しく思います。私はあなたのお手伝いをしたいと思っているアシスタントです。何かご質問、ご不明な点、またはご依頼はございますか?',
    name: 'model',
    additional_kwargs: { finishReason: 'STOP', index: 0, safetyRatings: [Array] }
  },
  lc_namespace: [ 'langchain_core', 'messages' ],
  content: 'こんにちは! あなたにお会いできてとても嬉しく思います。私はあなたのお手伝いをしたいと思っているアシスタントです。何かご質問、ご不明な点、またはご依頼はございますか?',
  name: 'model',
  additional_kwargs: {
    finishReason: 'STOP',
    index: 0,
    safetyRatings: [ [Object], [Object], [Object], [Object] ]
  }
}

別のパターンも試す

ドキュメントには画像を送って、テキストで返す、Image to Textのデモものっているんでそれも試してみましょう。

まずは、画像のデータを64進数に変換するために必要なライブラリをインストールします。

$ npm install fs

次にルートディレクトリ(index.jsと同階層)に、imagesディレクトリを作り、AIに投げたい画像を入れておきましょう。また、日本語で返答して欲しいので、input2のtextの部分を日本語に変更しておきましょう。

特に何でもいい人は下記の画像をhotdog.pngとして、保存しましょう。

index.jsの中身を消して、下記を貼り付けてください。先ほど同様、apiKeyを設定し、画像のパスを修正してください。

index.js

import fs from "fs";
import { ChatGoogleGenerativeAI } from "@langchain/google-genai";
import { HumanMessage } from "@langchain/core/messages";

const vision = new ChatGoogleGenerativeAI({
+ apiKey: '<取得したAPIKey>',
  modelName: "gemini-pro-vision",
  maxOutputTokens: 2048,
});
+ const image = fs.readFileSync("images/hotdog.png").toString("base64");
const input2 = [
  new HumanMessage({
    content: [
      {
        type: "text",
+       text: "次の画像について、説明してください。",
      },
      {
        type: "image_url",
        image_url: `data:image/png;base64,${image}`,
      },
    ],
  }),
];

const res2 = await vision.invoke(input2);

console.log(res2);
}

生成には少し時間がかかります。

先ほど同様、contentの中に、AIからの返答があります。しっかりと画像がホットドッグであることを理解してくれています。

AIMessage {
  lc_serializable: true,
  lc_kwargs: {
    content: ' ホットドッグの画像です。ホットドッグは、ソーセージを細長いパンに挟んだ料理です。ソーセージは、豚肉や牛肉などの挽肉を羊腸や豚腸に詰めて加熱したものです。パンは、小麦粉、水、イースト菌、砂糖、塩などで作ったものです。ホットドッグには、ケチャップ、マスタード、ピクルス、オニオン、チーズなどのトッピングがよく合います。',
    name: 'model',
    additional_kwargs: { finishReason: 'STOP', index: 0, safetyRatings: [Array] }
  },
  lc_namespace: [ 'langchain_core', 'messages' ],
  content: ' ホットドッグの画像です。ホットドッグは、ソーセージを細長いパンに挟んだ料理です。ソーセージは、豚肉や牛肉などの挽肉を羊腸や豚腸に詰めて加熱したものです。パンは、小麦粉、水、イースト菌、砂糖、塩などで作ったものです。ホットドッグには、ケチャップ、マスタード、ピクルス、オニオン、チーズなどのトッピングがよく合います。',
  name: 'model',
  additional_kwargs: {
    finishReason: 'STOP',
    index: 0,
    safetyRatings: [ [Object], [Object], [Object], [Object] ]
  }
}

まとめ

ここまで読んでいただきありがとうございました。

今回は、GeminiとLangchainについて入門しました。Langchainはまだまだ多くの機能を提供しているので、Gemini APIが無料で使えるうちに色々試しておきましょう。

普段はWeb制作に関する情報や疑問をわかりやすくまとめて記事を書いているので、そちらも読んでいただけたら嬉しいです。