🚪

✹Gemini × 🊜LangChain入門

に公開
Node.js
Google
JavaScript
LangChain
Gemini
tech

たず初めに

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,
    },
  ],
});

䜿っおみる

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制䜜に関する情報や疑問をわかりやすくたずめお蚘事を曞いおいるので、そちらも読んでいただけたら嬉しいです。

GitHubで線集を提案

Discussion