22
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

チャット UI を簡単に作れる「Chainlit」の紹介 ~ LangChain との統合 ~

Last updated at Posted at 2023-06-09

Chainlit とは?

Chainlit は Python で ChatGPT のような UI を作れるライブラリです.
LangChain と統合されているため, 簡単に UI を作れます.

今回は例として, 入力された文章を関西弁に変換するチェーンをあらかじめ用意しておきます.

$ pip install openai langchain
my_chain.py
from langchain.chains.base import Chain
from langchain.chat_models import ChatOpenAI
from langchain import PromptTemplate, LLMChain

template = """関西弁に変換してください.
変換前:{input}
変換後:"""


def create_chain() -> Chain:
    llm = ChatOpenAI(temperature=0, model_name="gpt-3.5-turbo", streaming=True)
    prompt = PromptTemplate(template=template, input_variables=["input"])
    return LLMChain(prompt=prompt, llm=llm, verbose=True)

Chainlit で UI を作る

まず chainlit を install します.

$ pip install chainlit

公式ドキュメント を参考に, 以下のようなコードを書きます.

my_chat.py
import chainlit as cl
import my_chain


@cl.on_chat_start
def on_chat_start():
    # チェーンをインスタンス化
    chain = my_chain.create_chain()

    # チェーンをセッションに保存
    cl.user_session.set("chain", chain)

@cl.on_message
async def on_message(query: str):
    # チェーンをセッションから取得
    chain = cl.user_session.get("chain")

    # チェーンを呼び出し
    res = await chain.acall(query, callbacks=[cl.AsyncLangchainCallbackHandler()])

    # チェーンの応答を送信
    await cl.Message(content=res["text"]).send()

Chainlit は .env ファイルを自動で読み込むため, OPENAI_API_KEY を書いておきます.

.env
OPENAI_API_KEY=*****

これでもうチャット UI が完成しました. chainlit run で起動します.

$ chainlit run my_chat.py
2023-06-09 12:18:14 - Created default config file at /Users/skkzsh/path/to/.chainlit/config.toml
2023-06-09 12:18:16 - Loaded .env file
2023-06-09 12:18:16 - Created default chainlit markdown file at /Users/skkzsh/path/to/chainlit.md
2023-06-09 12:18:18 - Your app is available at http://localhost:8000

http://localhost:8000 でチャット UI にアクセスできます. 1

welcome_to_chainlit.png

チャットしてみると以下のような感じです.
(関西弁への変換はおかしいですが, なぜか毎回語尾に「!」を付けてくる感じで憎めないやつです.)

chat.png

推論プロセスの視覚化 (と中間ステップのデバッグ)

「User」と「Chatbot」の間にある「Took ◯ step」を展開すると, 推論プロセスも UI から確認することができます.
これにより, 推論がどのように進行し, 各ステップがどのように機能しているかを視覚的に追跡することができます.

CoT

この例では単純なチェーンですが, より複雑なチェーンを作ると, 「思考の連鎖」の過程をより視覚的に把握することができます.

さらに鉛筆ボタンを押下すると, Prompt playground 画面が開きます.

playground

これにより, 中間ステップのプロンプトでデバッグしたり,
model や temperature などのパラメータを変更したりすることが可能です.

バージョン情報

  • Chainlit 0.6.0
  • LangChain 0.0.240
  • OpenAI 0.27.8
  • Python 3.9.16
  1. --port オプションでポートをデフォルトの8000番から変えられます

22
26
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
22
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?