💬

StreamlitでClaude3 APIを使ったAIチャットアプリを作る

2024/03/24に公開

Python

1. はじめに

GPT-4を超えた!...とも言われるAIモデル「Claude3」がAnthropicから公開されました。
そこでClaude3を使ったチャットアプリをStreamlitで作ってみます。

Streamlitとは？

Streamlit^[1]はPythonスクリプトを、簡単にWebアプリケーションにすることができるフレームワークです。ここではチャットアプリを作るために使用します。

2. 必要なツールとライブラリ

開発ツールの準備

あらかじめPython3.10以上をインストールしておいてください。

Windowsの場合、Microsoft Storeからインストールできます。

その他のOSにPythonをインストールする方法は以下を参照してください。

ライブラリの準備

また、以下のライブラリ(モジュール)を利用します。

requirements.txt

anthropic
streamlit

requirements.txt にモジュールを列挙し、PyPIからインストールします。

pip install -r requirements.txt

ネットワーク環境によってはかなり時間がかかります。気長に待ちましょう。

3. ベースとなるStreamlitアプリケーション

ChatGPTのようなアプリケーションを作るためのチュートリアルを、Streamlit公式サイトが公開してくれています。

今回はこれをベースに、OpenAIのかわりにAnthropicのClaude3を使うように変更を加えていきます。

4. Anthropic(Claude3) APIを使用する準備

アカウントの作成

Claude3をAPIで利用するには、Anthropicのアカウントが必要です。まだアカウントを持っていなければ作成してください。

はじめてアカウントを作成すると、「Plans & Billing」のページで5ドル分の無料クレジットを取得することができます。

プランおよびモデルの選択

このままでもClaude3の「Sonnet」、「Haiku」といったモデルは利用可能ですが、「Opus」は"Overloaded"というレスポンスが返ってきて利用できませんでした。

モデル	APIモデル名	説明
Claude3 Opus	`claude-3-opus-20240229`	最も強力なモデル
Claude3 Sonnet	`claude-3-sonnet-20240229`	インテリジェンスとスピードの最もバランスの取れたモデル
Claude3 Haiku	`claude-3-haiku-20240307`	最速かつ最もコンパクトなモデル

Build Planなど、より上位のプランを契約することで利用できるようになります。最低5$のクレジットをチャージする必要があります。

APIキーの発行

APIを利用するにはAPIキーを発行する必要があります。
左ペインの"API Keys"メニューを選び、"Create Key"ボタンで発行できます。

APIキーは.envなどのファイルを作成して記載しておきます。
あわせて利用するモデルも定義しておきます。

.env

API_KEY=sk-ant-api03-xxxx...
AI_MODEL=claude-3-sonnet-20240229

APIキーをソースコードリポジトリなどに格納すると、不正利用される可能性があるため注意してください。.gitignoreに追記するなどしておきましょう。

.gitignore

.env

5. アプリケーションの作成

ここからは公式チュートリアルのアプリケーションを変更していきます。

モジュールの宣言

利用するモジュールの宣言部分を以下のように変更します。
環境変数を読み込むため、osモジュールもimportします。

import os

import anthropic
import streamlit as st

アプリケーション名

アプリケーションのタイトルをお好みで変更します。

st.title("Claude 3 by Streamlit")

環境変数の読み込み

モデル名およびAPIキーを環境変数から読み込むように記述します。

ai_model = os.environ.get("AI_MODEL")
api_key = os.environ.get("API_KEY")

Anthropic SDKの初期化

Anthropic SDKをAPIキーを使って宣言します。
また、利用する AIモデルをセッションに保存しておきます。

client = anthropic.Anthropic(
    api_key=api_key,
)

if "ai_model" not in st.session_state:
    st.session_state["ai_model"] = ai_model

SDKの呼び出し

anthropicのSDKを呼び出します。OpenAIのAPIと少し違います。
また、応答の最大トークン数もここで指定しています。

レスポンスはマークダウン形式で解釈するようにplaceholderにセットします。

    with st.chat_message("assistant"):
        message_placeholder = st.empty()
        full_response = ""
        with client.messages.stream(
            max_tokens=1024,
            messages=[{"role": m["role"], "content": m["content"]} for m in st.session_state.messages],
            model=st.session_state["ai_model"],
        ) as stream:
            for text in stream.text_stream:
                full_response += str(text) if text is not None else ""
                message_placeholder.markdown(full_response + "▌")
        message_placeholder.markdown(full_response)

以上で変更は終了です。変更後のソースコードは以下を参照してください。

ソースコード全体(main.py)

main.py

import os

import anthropic
import streamlit as st

st.title("Claude 3 by Streamlit")

ai_model = os.environ.get("AI_MODEL")
api_key = os.environ.get("API_KEY")

client = anthropic.Anthropic(
    api_key=api_key,
)
if "ai_model" not in st.session_state:
    st.session_state["ai_model"] = ai_model

if "messages" not in st.session_state:
    st.session_state.messages = []

for message in st.session_state.messages:
    with st.chat_message(message["role"]):
        st.markdown(message["content"])

if prompt := st.chat_input("What is up?"):
    st.session_state.messages.append({"role": "user", "content": prompt})
    with st.chat_message("user"):
        st.markdown(prompt)

    with st.chat_message("assistant"):
        message_placeholder = st.empty()
        full_response = ""
        with client.messages.stream(
            max_tokens=1024,
            messages=[{"role": m["role"], "content": m["content"]} for m in st.session_state.messages],
            model=st.session_state["ai_model"],
        ) as stream:
            for text in stream.text_stream:
                full_response += str(text) if text is not None else ""
                message_placeholder.markdown(full_response + "▌")
        message_placeholder.markdown(full_response)
    st.session_state.messages.append({"role": "assistant", "content": full_response})

6. アプリケーションのテスト

Streamlitアプリのテスト方法

streamlit のアプリケーションを実行してみます。
APIキーとモデル名を環境変数として渡すのを忘れないようにしてください。

以下はLinux(Bash)での実行例です。

$ export $(cat .env | xargs)
$ streamlit run ./main.py

起動したらWebブラウザで http://localhost:8501 を開いてください。

うまく動かない場合は以下を確認してください。

pythonのインストールとバージョン
ライブラリ（パッケージ）のインストール
ソースコードの記述誤り
環境変数の記述誤り

7. アプリケーションのデプロイメント

Dockerコンテナとしてデプロイ

StreamlitアプリケーションをDockerコンテナにしてデプロイすることができます。
Dockerfileおよびcompose.yamlの記述例を以下に記載します。

Dockerfile

FROM python:3.10-slim

WORKDIR /app

COPY ./app /app
COPY ./requirements.txt /app

RUN pip install -r requirements.txt

EXPOSE 8501

ENTRYPOINT ["streamlit", "run", "/app/main.py", "--server.port=8501", "--server.address=0.0.0.0"]

compose.yaml

version: '3'
services:
  streamlit:
    image: 'streamlit-claude-chat'
    env_file:
     - .env
    ports:          
      - 8501:8501

ディレクトリ構成は以下のとおりです。

root/
　├ app/
　│　└ main.py
　├ .env
　├ .gitignore
　├ compose.yaml
　├ Dockerfile
　└ requirements.txt

コンテナのローカルでの実行例は以下のとおりです。

docker build ./ -t streamlit-claude-chat
docker compose up

コンテナを各種クラウドサービスで実行する方法については、対象となるクラウドのドキュメントを参照してください。

8. おわりに

以上、StreamlitとClaude3を使用したチャットアプリの作成例でした。

Streamlitは簡単にチャットアプリを作成できるので便利ですね。

モデルをいろいろと切り替えて使ってみてください。
個人的には Claude3 Opus もすごいのですが、Sonnetが賢く、かつ高速なのが印象的でした。
Claude3は画像解析もできるので、こちらも近々試してみたいところです。

この記事がどなたかのお役にたてば幸いです。

なお、今回のソースコードは以下のリポジトリで公開しています。

脚注

https://streamlit.io/ ↩︎