LangChainを使ってClaude3の回答をストリーミングで表示する方法まとめ

前回の投稿では、単純にClaude3に質問して回答を取得するということをやってみました。詳しくはこちらの記事をご覧ください。

LangChainでClaude3を使う方法まとめ

今回の投稿では上記記事のプロジェクトを使って、ストリーミングで回答を表示させてみたいと思います。

LLMの回答は、何もしないと回答全てのテキストが一気に取得します。何も表示されない時間が長いを不安になりますよね。そこで、ストリーミングにすると、１文字もしくは一定文字数ずつ表示されるので、処理が進んでいるんだなと言う安心感があるのが良いですね。

やること

画面側を作る
ストリーミングで回答を取得する処理を作る

1. 画面側を作る

Streamlitを使うと画面を簡単に作ることができるので便利ですよね。こんな感じで作っていきます。

import streamlit as st
from llm import Llm

def init_display():
    text = st.text_input("質問を書いてください")
    button = st.button("実行")
    container = st.empty()
    if button:
        Llm.ask(container, text)

if __name__ == "__main__":
    init_display()

するとこんな画面が出来上がります。

2. ストリーミングで回答を取得する処理を作る

from langchain.prompts import ChatPromptTemplate, SystemMessagePromptTemplate, HumanMessagePromptTemplate
from langchain_anthropic import ChatAnthropic

class Llm():
    @classmethod
    def ask(cls, container, query):
        system_prompt = "あなたは何でも知ってる天才です"
        human_prompt = query
        chat_prompt = ChatPromptTemplate.from_messages([
            SystemMessagePromptTemplate.from_template(system_prompt),
            HumanMessagePromptTemplate.from_template(human_prompt)
        ])
        llm = ChatAnthropic(model_name='claude-3-opus-20240229', temperature=0)
        text = ""
        for chunk in llm.stream(chat_prompt.format_prompt().to_messages()):
            text += chunk.content
            container.markdown(text)

これを実行してみるとこうなります。