【Streamlit】LangChainでClaude 3.5 Haikuを使ったチャットアプリ

Streamlit
この記事は約14分で読めます。

こんにちは、JS2IIUです。

近年、OpenAIのChatGPTをはじめとする大規模言語モデルが注目を集めています。そんな中、AnthropicはAIの安全性と研究に焦点を当てた企業として、独自の強力な言語モデルClaudeを提供しています。

Anthropicは、Googleと提携し、倫理的で責任あるAI開発を重視しています。Claudeは、ChatGPTと同様に、テキスト生成、翻訳、質疑応答など、様々なタスクに優れた能力を発揮します。

Anthropicの特徴

  • 安全性: 有害な出力やバイアスを最小限に抑えるように設計されています。
  • 憲法AI: 倫理的なガイドラインに基づいて動作する「憲法AI」を採用しています。
  • 多様なモデル: Claude-Instant、Claude-2など、用途に合わせた様々なモデルを提供しています。
モデル - Anthropic
Claudeは、Anthropicによって開発された最先端の大規模言語モデルファミリーです。このガイドでは、当社のモデルを紹介し、レガシーモデルとの性能を比較します。
docs.anthropic.com

ClaudeのAPI呼び出し方法

PythonでClaudeのAPIを呼び出すには、anthropicライブラリを使用します。事前にAnthropicのWEBサイトでAPI KEYを入手しておきましょう。

Home
Anthropic is an AI safety and research company that's working to build reliable, interpretable, and steerable AI systems.
www.anthropic.com
Python
import anthropic

client = anthropic.Client("YOUR_API_KEY")
response = client.completions.create(
    model="claude-2",
    prompt="こんにちは！",
)

print(response.completion)

StreamlitでClaudeを使ったチャットシステムを構築

では、StreamlitとLangChainを使って、Claudeと対話できるチャットシステムを構築してみましょう。コードの下に、実際に動作している時のスクリーンショットを載せています。

コード

Python
import streamlit as st
from langchain_anthropic import ChatAnthropic
from langchain.schema import HumanMessage, AIMessage, SystemMessage

# Anthropicクライアントを生成
chat = ChatAnthropic(
    model="claude-3-5-haiku-20241022",  # 適切なClaudeモデル名を指定してください
    temperature=0.7,
    streaming=True,
    anthropic_api_key="YOUR_KEY_HERE"  # ここにあなたのAPIキーを入力してください
)

# title
st.subheader('Chat with Anthropic claude-3-5-haiku-20241022')

# セッションステートを初期化
if "messages" not in st.session_state:
    st.session_state.messages = [SystemMessage(content="You are a helpful assistant.")]

# メッセージ履歴を表示
for message in st.session_state.messages:
    if isinstance(message, HumanMessage):
        with st.chat_message("user"):
            st.markdown(message.content)
    elif isinstance(message, AIMessage):
        with st.chat_message("assistant"):
            st.markdown(message.content)

# ユーザーからの入力を受け取る
if prompt := st.chat_input("What is up?"):
    # ユーザーのメッセージを履歴に追加
    user_message = HumanMessage(content=prompt)
    st.session_state.messages.append(user_message)

    # チャットメッセージとして表示
    with st.chat_message("user"):
        st.markdown(prompt)

    # Anthropic APIを使ってAIからの応答をストリーミングで生成
    with st.chat_message("assistant"):
        full_response = ""
        placeholder = st.empty()  # プレースホルダーを作成
        for chunk in chat.stream(st.session_state.messages):
            content = chunk.content
            if content:
                full_response += content
                placeholder.markdown(full_response + "▌")  # 途中経過を表示
        placeholder.markdown(full_response)  # 最終的な応答を表示

    # AIのメッセージを履歴に追加
    ai_message = AIMessage(content=full_response)
    st.session_state.messages.append(ai_message)

コードの説明

このコードは、Streamlitアプリケーションを使用して、Anthropic APIを介してAIモデル（Claude-3.5）とリアルタイムにチャットする機能を提供します。

1. 必要なライブラリのインポート

Python
import streamlit as st
from langchain_anthropic import ChatAnthropic
from langchain.schema import HumanMessage, AIMessage, SystemMessage
  • Streamlit (st): ウェブアプリケーションを簡単に作成するためのPythonライブラリ。
  • langchain_anthropic: Anthropic社のAIモデルと統合するためのライブラリ。ChatAnthropicクラスを使ってAPIクライアントを生成します。
  • langchain.schema: メッセージのタイプを定義するクラスを提供します。
  • HumanMessage: ユーザーからのメッセージを表現。
  • AIMessage: AIからの応答メッセージを表現。
  • SystemMessage: システムの指示やAIの初期設定を表現。

2. Anthropicクライアントの生成

Python
chat = ChatAnthropic(
    model="claude-3-5-haiku-20241022",
    temperature=0.7,
    streaming=True,
    anthropic_api_key="YOUR_KEY_HERE"
)
  • model: 使用するAnthropic AIモデルの名前を指定します。ここではclaude-3-5-haiku-20241022を指定していますが、利用可能なモデルを確認する必要があります。
  • temperature: 応答のランダム性を制御します。値が低いほど応答は決定的（予測可能）になり、高いほど多様性が増します。
  • streaming: ストリーミングで応答を受け取る設定。Trueに設定すると、リアルタイムで応答が更新されます。
  • anthropic_api_key: Anthropic APIの認証キーを指定します。"YOUR_KEY_HERE"の部分に自分のAPIキーを入力します。
モデル - Anthropic
Claudeは、Anthropicによって開発された最先端の大規模言語モデルファミリーです。このガイドでは、当社のモデルを紹介し、レガシーモデルとの性能を比較します。
docs.anthropic.com

3. アプリケーションのヘッダー

Python
st.subheader('Chat with Anthropic claude-3-5-haiku-20241022')

Streamlitのsubheader関数を使い、アプリケーションのヘッダーを表示します。

4. セッションステートの初期化

Python
if "messages" not in st.session_state:
    st.session_state.messages = [SystemMessage(content="You are a helpful assistant.")]
  • セッションステート (st.session_state): Streamlitでセッション中にデータを保持する仕組み。
  • この部分では、セッションにmessagesというリストを初期化します。
  • SystemMessage: 初期設定として、AIに「あなたは役に立つアシスタントです」という指示を与えています。

5. メッセージ履歴の表示

Python
for message in st.session_state.messages:
    if isinstance(message, HumanMessage):
        with st.chat_message("user"):
            st.markdown(message.content)
    elif isinstance(message, AIMessage):
        with st.chat_message("assistant"):
            st.markdown(message.content)
  • st.session_state.messages内のメッセージを順に処理し、ユーザーとAIのメッセージを分けて表示します。
  • st.chat_message: メッセージの種類（"user"または"assistant"）に応じて異なるスタイルでメッセージを表示します。
  • st.markdown: メッセージ内容をマークダウン形式で表示します。

6. ユーザー入力の受け取り

Python
if prompt := st.chat_input("What is up?"):
    user_message = HumanMessage(content=prompt)
    st.session_state.messages.append(user_message)

    with st.chat_message("user"):
        st.markdown(prompt)
  • st.chat_input: ユーザーからの入力を受け取るためのUI要素。
  • prompt変数に入力値を格納。
  • 入力がある場合:
  • HumanMessageとしてユーザーの入力内容を作成し、st.session_state.messagesに追加。
  • 入力内容をチャットメッセージとして表示。

7. Anthropic APIでの応答生成

Python
with st.chat_message("assistant"):
    full_response = ""
    placeholder = st.empty()
    for chunk in chat.stream(st.session_state.messages):
        content = chunk.content
        if content:
            full_response += content
            placeholder.markdown(full_response + "▌")
    placeholder.markdown(full_response)
  • st.chat_message: AIからの応答を表示するセクションを作成。
  • chat.stream: ChatAnthropicクラスのストリーミングメソッドを使用し、st.session_state.messagesを基に応答を生成。
  • 応答がストリーミングで届くたびに以下を実行:
  • full_responseに応答内容を追加。
  • st.empty(): プレースホルダーとして一時的なUI要素を作成し、リアルタイムで応答内容を更新。
  • 応答が完了したら、最終結果を表示。

8. AIメッセージの履歴への追加

Python
ai_message = AIMessage(content=full_response)
st.session_state.messages.append(ai_message)

生成されたAIの応答をAIMessageとして作成し、セッションステートに追加します。

まとめ

このコードは、以下の主要な機能を実現しています:

  1. Anthropic社のAIモデルを利用したチャットシステムの構築。
  2. Streamlitを使ったリアルタイムチャットUIの実装。
  3. ユーザー入力とAI応答をセッションステートで管理し、履歴を保持。

注意点:

  • 必ず有効なAnthropic APIキーを設定する必要があります。
  • モデル名が利用可能か事前に確認してください。
  • temperatureやstreamingの設定は必要に応じて調整してください。

実行時エラー

以下のエラーはapi-keyを入手したものの、APIのクレジットを購入していない、もしくは月額プランに登録していないときに返ってくるエラーです。最低$5のクレジットを入れないとAPIが使えないので注意が必要です。

Plaintext
anthropic.BadRequestError: Error code: 400 - {'type': 'error', 'error': {'type': 'invalid_request_error', 'message': 'Your credit balance is too low to access the Anthropic API. Please go to Plans & Billing to upgrade or purchase credits.'}}

以下のエラーはAPI KEYの設定ミスをしている場合に返ってくるエラーです。本当はお勧めできないのですが、今回のサンプルコード、10行目に正しくapi-keyを設定して下さい。可能なら環境変数に設定して下さい。

Plaintext
TypeError: "Could not resolve authentication method. Expected either api_key or auth_token to be set. Or for one of the `X-Api-Key` or `Authorization` headers to be explicitly omitted"

参考リンク

同様に、OpenAIのgpt-o4やGoogleのGeminiを使ったアプリの構築についてはこちらの記事を参照して下さい。

【Streamlit】LangChainでGPT-4oを使ったチャットアプリ
こんにちは、JS2IIUです。近年、OpenAIのAPIを活用したアプリケーションが注目を集めています。その中でも、LangChainは強力なフレームワークであり、対話型AIを構築するための便利なツールです。本記事では、LangChainの基本的な使い方を紹介し、Streamlitを使ってリアルタイ...
js2iiu.com
2025/01/11
【Streamlit】LangChainでGemini-1.5-Flashを使ったチャットアプリ
こんにちは、JS2IIUです。Streamlitのst.chat_message()を使ってチャットを表示することができます。以前の記事「【Streamlit】LangChainでGPT-4oを使ったチャットアプリ」ではOpenAIのAPIを使いました。今回は同じことをGoogleのGeminiを使...
js2iiu.com
2025/01/11

最後に、書籍のPRです。

最新のOpenAIのチャットAPIの使い方もしっかりと解説されている良書です。2024年11月初版発行、「LangChainとLangGraphによるRAG・AIエージェント[実践]入門」西見、吉田、大嶋著。

最後まで読んでいただきありがとうございます。73

コメント

タイトルとURLをコピーしました