Zenn
🦜

Python LangChainの自作LLMchainを、Next.js・ReactのチャットAIアプリにしたい！【NLUX】

2024/07/14に公開
AI
React
LangChain
LangServe
nlux
tech

結論

大規模言語モデル (Large Language Model; LLM) のチャットアプリを自分でも作って動かしてみたい！どこまで自作するかに応じて, 様々なレイヤーや粒度で取れる選択肢は豊富. 今回は以下の構成を試した:

  • バックエンド

  • フロントエンド

    • NLUX: チャットAIアプリをお手軽に作れるJavaScriptライブラリ. Next.js・Reactも対応. 上記APIサーバーに接続し, 自作LLMchainと対話できる. (発音は 'エンラックス' に近い)

特に, 自作のLLMchainが既にある前提で, チャットAIアプリを立ち上げて対話するには, 以下のように記述すればよいことを確認した:

server.py
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from langserve import add_routes

from path.to.chain import my_llm_chain

# https://fastapi.tiangolo.com/reference/fastapi/
app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=['http://localhost:5173'],  # アプリからのアクセスを許可
    allow_credentials=True,
    allow_methods=['*'],
    allow_headers=['*'],
)

add_routes(app, my_llm_chain, path='/chat')
# path名は単なる例

if __name__ == '__main__':
    import uvicorn

    uvicorn.run('server:app', host='127.0.0.1', port=8083, reload=True)
    # hostのIPアドレスとport番号は単なる例
App.tsx
import { AiChat } from '@nlux/react';
import { useChatAdapter } from '@nlux/langchain-react';
import '@nlux/themes/nova.css';

export default function App() {
  return (<AiChat adapter={useChatAdapter({
    url: 'http://127.0.0.1:8083/chat',
    // hostのIPアドレス, port番号, path名と一致させること
  })} />);
};

上記はあくまで最小の記述の要点. → 動作確認済みのコード全体とセットアップ方法の説明はこちら.

図1: 動作確認の結果
図1: 動作確認の結果

ここからNLUXの機能を試していきたい.

その他の雑談・補足情報

背景

大規模言語モデルのチャットサービスが日々の生産性を高めてくれている. 中でも

をはじめとして, 様々な派生サービスが市場に溢れており, 使うたびに新しい発見があって楽しい.

また, 趣味や業務向けなど, 用途に応じて自ら作り込みたい場面で役立つAPIやライブラリなども豊富にある. 特にLangChainは有名で, 多くの部品が Runnable インターフェイスの実装になっている (→ 公式ガイド). 例えば,

  • LLMを呼び出して推論実行する
  • プロンプトのテンプレートに, 動的に文字列を代入してプロンプトを構成する
  • 解答の根拠とするための, 文書の検索をする

部品などがあり, それらはすべて .invoke() メソッドで実行できる. さらに前述の部品をchain (鎖) のように連結して入出力の一連の流れとしたものもまた「Runnable になる」ため, 「.invoke() できる」のが素敵な仕様. 例えば,

ユーザ質問を入力として, 

1.  ユーザ質問から検索キーワードを考えるためのプロンプトテンプレに, ユーザ質問を代入
2.  1のプロンプトで, LLMを呼び出して推論実行. 検索クエリができる
3.  2の検索クエリで文書を検索. 解答の根拠になりそうな文書が得られる
4.  3の文書と最初のユーザ質問から回答を考えるためのプロンプトテンプレに, それらを代入
5.  4のプロンプトで, LLMを呼び出して推論実行

そして, 回答を出力する

という一連の流れが Runnable なchainとして作れる.

自分はこれまで, PythonでLangChainを使いRAGなどの実験をしてきた. RAG (Retrieval Augmented Generation) とは, まさに上記の例のように, 検索した根拠に基づいた回答を促すことで, LLMのハルシネーション (幻覚) を抑制し, 回答精度を高めようとする手法である.

そろそろLangChainで実験した自作のLLMchainを, アプリにしたいところだけど...?

課題

開発したいレイヤーや粒度に応じて, 他にも例えば以下のような選択肢があった:

  • ノーコード (no code) で, 最も簡単に試したい
  • Pythonは分かるから, フロントエンドもPythonでお手軽にアプリ化したい
  • JavaScriptは分かるから, バックエンドもJSでLLMchain作り込みたい

中でもStreamlitは, 画面構成要素のPython wrapperが多数提供されるため便利. Webアプリの記述方法を一切知らなくてもPythonさえ知っていれば簡単に使うことができる. 環境構築さえ不要で, 自作LLMchainのdemoを画面付きでサクッとおこなうには大変重宝した.

一方で, 細かな画面の要素の調整にあたっては, 結局のところ直接HTMLなどをいじる必要があり, 小回りは効かない印象. そもそもそういう用途ではないのかもしれない.

そこで, Reactに足を踏み入れることになり慣れない中, このNLUXに辿り着き, 救われた.
おかげさまでフロントの開発も楽しみながらやっていけそう！

Discussion