LangChain.js ＋ Azure OpenAI Service でリスト入力・APIレスポンスをシンプルな出力にする：「Batch」「StringOutputParser」を使う

以下の記事でも扱った、LangChain.js と Azure OpenAI Service を組み合わせた話です。

●LangChain.js の公式情報などを見つつ Azure OpenAI Service（モデルは GPT-4 Turbo）との組み合わせを試してみる #JavaScript - Qiita
　https://qiita.com/youtoy/items/5df56af0cc45dfaa62cb

上記の記事では、シンプルな入力に対して APIレスポンスを得る、ということをやりましたが、今回は以下の内容をさらに試します。

- 試す内容
   - 入力にリストを使う： 「Batch」の利用
   - APIレスポンス出力をシンプルにする： 「StringOutputParser」の利用

## 前提
今回の内容を試すのにあたって、[上記の記事](https://qiita.com/youtoy/items/5df56af0cc45dfaa62cb)と同様に npmコマンドを用いたパッケージのインストールを行います。コマンドの内容は、以下のとおりです。

```bash
$ npm install @langchain/openai
```

また内容は後述しますが、環境変数を使った設定も用います。

## 入力にリストを使う
まずは、以下の「Batch」を使って、入力にリストを用いるというのを試します。

●Interface | 🦜️🔗 Langchain
　https://js.langchain.com/docs/expression_language/interface#batch

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/cff3e852-59d2-4fe8-ed7f-fcde6e61a2c1.png)

### 作成したプログラム
作成したプログラムは以下のとおりです。

```javascript
import { ChatOpenAI } from "@langchain/openai";

const model = new ChatOpenAI({
  temperature: 0.9,
  azureOpenAIApiKey: process.env.AZURE_OPENAI_API_KEY,
  azureOpenAIApiVersion: process.env.AZURE_OPENAI_API_VERSION,
  azureOpenAIApiInstanceName: process.env.AZURE_OPENAI_API_INSTANCE_NAME,
  azureOpenAIApiDeploymentName: process.env.AZURE_OPENAI_API_DEPLOYMENT_NAME,
});

const message1 = "あなたは誰？",
  message2 = "あなたはいつまでの知識を持ってる？";

console.log("== 処理を実行 ==");
console.log({ message1 });
console.log({ message2 });

const res = await model.batch([message1, message2]);
console.log(res);
```

上記の model の中で「process.env.・・・」となっている部分は、環境変数からの読みこみを行っています。これらの内容は、ご自身が Azure OpenAI Service で設定したものを利用するようにしてください。

### プログラムの実行結果
上記のプログラムを実行した結果は、以下のとおりです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/a3a9706e-2a39-893a-1413-966b899240b2.png)

2つの入力に対して、それぞれ 1つずつのレスポンスが得られていることが分かります。

## APIレスポンス出力をシンプルな出力にする
次は、APIレスポンス出力をシンプルな出力にする話です。

それには、以下のパーサーを用います。

●String output parser | 🦜️🔗 Langchain
　https://js.langchain.com/docs/modules/model_io/output_parsers/types/string

### 作成したプログラム
作成したプログラムは以下のとおりです。

```javascript
import { ChatOpenAI } from "@langchain/openai";
import { StringOutputParser } from "@langchain/core/output_parsers";

const model = new ChatOpenAI({
  temperature: 0.9,
  azureOpenAIApiKey: process.env.AZURE_OPENAI_API_KEY,
  azureOpenAIApiVersion: process.env.AZURE_OPENAI_API_VERSION,
  azureOpenAIApiInstanceName: process.env.AZURE_OPENAI_API_INSTANCE_NAME,
  azureOpenAIApiDeploymentName: process.env.AZURE_OPENAI_API_DEPLOYMENT_NAME,
});

const message1 = "あなたは誰？",
  message2 = "あなたはいつまでの知識を持ってる？";

const parser = new StringOutputParser();

console.log("== 処理を実行 ==");
console.log({ message1 });
console.log({ message2 });

const res = await model.pipe(parser).batch([message1, message2]);

console.log(res);
```

1つ目のお試しと同様、model の中で「process.env.・・・」となっている部分は、ご自身が Azure OpenAI Service で設定したものを設定して利用してください。

### プログラムの実行結果
上記のプログラムを実行した結果は、以下のとおりです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/18a4fc48-8596-8bdc-60ec-4ad927884674.png)

API のレスポンスに関して、返ってきた文字列の部分のみが 1つずつ出力されているのが分かります。

## 【おまけ】 冒頭で掲載した記事の中で得た APIレスポンスの出力をシンプルな出力にする
冒頭に記載していた記事に書いていたお試しでは、以下が出力されていました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c4b6f698-025f-9d54-5b6e-e3dd0365eeb8.png)

これについても、今回のお試し 2つ目の内容を適用して、APIレスポンスをシンプルな出力にするというのをやってみます。

### 用いるプログラム
プログラム全体は以下のとおりです。

```javascript
import { ChatOpenAI } from "@langchain/openai";
import { StringOutputParser } from "@langchain/core/output_parsers";

const model = new ChatOpenAI({
  temperature: 0.9,
  azureOpenAIApiKey: process.env.AZURE_OPENAI_API_KEY,
  azureOpenAIApiVersion: process.env.AZURE_OPENAI_API_VERSION,
  azureOpenAIApiInstanceName: process.env.AZURE_OPENAI_API_INSTANCE_NAME,
  azureOpenAIApiDeploymentName: process.env.AZURE_OPENAI_API_DEPLOYMENT_NAME,
});

const message = "あなたは誰？";

const outputParser = new StringOutputParser();
const chain = model.pipe(outputParser);

console.log("== 処理を実行 ==");
console.log({ message });

const response = await chain.invoke(message);

console.log(response);
```

### 得られる出力
上記のプログラムを実行した結果、出力は以下のようにシンプルになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/44da92bf-d9e4-d237-cdec-0bf62534e5c2.png)