Claude3先生によるChatGPTクローンアプリのハンズオン作成を通したStreamlit入門講義

はじめに

おれの名前は樋口恭介。昨日の記事に引き続き、ChatGPT先生を招いてPython講義をしてもらおうと思ったのだが、業務時間中にChatGPTを使いすぎたのか、GPT4の利用回数制限に引っかかってしまった……。

そのため今日は、ChatGPT先生の代わりに急遽Claude3先生に登壇してもらうことにした。Claude3先生はChatGPT先生と同等かそれ以上にPythonにも詳しく、またもしかしたらChatGPT先生よりもChatGPTのことを知っている。
そういうわけで、Claude3先生、本日はよろしくお願いします！

本日の講義の流れと講師・Claude3先生の自己紹介

はじめまして、皆さん。私はClaudeといいます。私はAnthropic社が開発したAIチャットボットの一種、LLMです。

今日は皆さんにLLMとPythonの基本的な知識をお伝えし、OpenAIのAPIとStreamlitを使って、最終的にはChatGPTのようなWebアプリを一緒に作成していきたいと思います。

講義の構成は以下の通りです:

1. LLMとAPIの概要
2. Streamlitの概要
3. OpenAIのAPIの利用方法
4. Streamlitを使ったChatGPTクローンアプリの作成

最初にLLMとAPIについて説明します。

1. LLMとAPIの概要

LLMとはLarge language model(大規模言語モデル)の略で、大量のテキストデータから自然言語の法則性を学習したAIモデルのことです。私のようなチャットボットはLLMの一種です。
APIとはApplication Programming Interfaceの略で、ソフトウェア同士が互いに通信するための仕組みです。OpenAIのAPIを使えば、LLMのサービスを自分のプログラムから利用できます。

2. Streamlitの概要

次にStreamlitについて解説します。
Streamlitは、Pythonで記述したスクリプトを対話型Webアプリとして実行できるフレームワークです。数行のコードを書くだけで、HTMLやJavaScriptを意識することなくWebアプリを作れます。今回はStreamlitを使ってOpenAIのLLMをWebアプリ化していきます。

それでは以降で、実装方法について詳しく見ていきましょう。

3. OpenAIのAPIの利用方法

まず、OpenAIのサービスを利用するにはAPIキーが必要です。OpenAIのサイトからアカウントを作成し、APIキーを取得しましょう(のちほど利用します)。
次に、PythonでOpenAIのライブラリをインストールします。ターミナルで以下のコマンドを実行してください。

pip install openai==0.28

バージョンを0.28に指定しているのは、今回はそのバージョンのAPIを使うためです(Windowsの場合、Pythonとの互換性で、最新バージョンだと通常出るエラーを回避することができます)。

次に、PythonスクリプトからAPIを呼び出す方法を見ていきます。以下のようなコードになります。

サンプルコード

import openai

#APIキーの設定
openai.api_key = "YOUR_API_KEY" 

#会話の内容を設定
messages = [
    {"role": "system", "content": "You are a helpful assistant."},
    {"role": "user", "content": "Who won the World Series in 2020?"},
    {"role": "assistant", "content": "The Los Angeles Dodgers won the World Series in 2020."},
    {"role": "user", "content": "Where was it played?"}
]

#LLMに会話を渡して応答を取得
response = openai.ChatCompletion.create(
    model="gpt-3.5-turbo",
    messages=messages
)

#応答を表示 
print(response["choices"][0]["message"]["content"])

ここではまず、openaiモジュールをインポートし、openai.api_keyにAPIキーを設定しています。

次に、messagesという変数に会話の内容をリストで表現します。このリストの形式が重要で、{"role": "system", "content": "システムメッセージの内容"}というように記述します。
システムメッセージにはLLMに対する指示を書きます。ここでは "You are a helpful assistant." と書いてあり、LLMには助手的な発言をするよう指示しています。

その後、ユーザーとLLMのやりとりを{"role": "user", "content": "ユーザーの発言"}、{"role": "assistant", "content": "LLMの応答"} という形式で記述します。

最後に、openai.ChatCompletion.create()関数を呼び出し、modelにgpt-3.5-turboを、messagesに上で作成した会話内容を渡します。responseに返ってきた内容を表示すれば、LLMからの最新の応答が出力されます。

このように、リクエストに応じてLLMから柔軟に応答を取得できます。会話の履歴を保持しながら対話を行えるのがLLMの特徴です。

次は実際にStreamlitを使ってWebアプリ化する方法を見ていきましょう。

4. StreamlitでChatGPTクローンアプリを作成

StreamlitはPythonで記述したスクリプトをWebアプリとして実行できるフレームワークです。最初にStreamlitをインストールしましょう。ターミナルで以下のコマンドを実行してみてください。

pip install streamlit

正常にstreamlitがインストールされたら、次に、app.pyというファイルを作成し、以下のコードを記述します。"YOUR_API_KEY"には、先ほどOpenAIの公式サイトから取得したAPIキーを上書きし設定してください。

import openai
import streamlit as st

#Streamlitアプリの設定
st.set_page_config(page_title="ChatGPT Clone", page_icon=":robot:")

#APIキーの設定
openai.api_key = "YOUR_API_KEY"

#会話履歴を保持するリスト
messages = [{"role": "system", "content": "You are a helpful assistant."}]

#Streamlitアプリの描画
st.header("ChatGPT Clone")
user_input = st.text_area("You: ", key="input")

if user_input:
    messages.append({"role": "user", "content": user_input})
    response = openai.ChatCompletion.create(
        model="gpt-3.5-turbo", 
        messages=messages
    )
    
    assistant_response = response["choices"][0]["message"]["content"]
    messages.append({"role": "assistant", "content": assistant_response})
    
    for message in messages[1:]:
        if message["role"] == "user":
            st.markdown(f"**You:** {message['content']}")
        else:
            st.markdown(f"**Assistant:** {message['content']}")

#アプリの実行            
if __name__ == "__main__":
    st.write("アプリを終了するにはCtrl+Cを押してください。")
    st.stop()

このコードでは、まずAPIキーを設定し、messagesという変数に会話履歴を保持するリストを用意しています。

次にStreamlitのUIを描画しています。st.headerでヘッダを設定し、st.text_areaでユーザーの入力を受け取るテキストエリアを配置しています。

ユーザーが入力すると、その内容をmessagesリストに追加し、OpenAIのAPIを呼び出してLLMの応答を取得します。LLMの応答も履歴に追加されます。

最後に、履歴を1つ1つ取り出して、st.markdownで画面に表示しています。"You: "となっている部分がユーザーの発言、"Assistant: "となっている部分がLLMの応答です。

これでWebアプリが完成しました。このコードをターミナルで以下のように実行すると、ローカルサーバーが立ち上がり、アプリが起動します。

streamlit run app.py

実行結果
ブラウザに"ChatGPT Clone"という画面が表示されます。

プロンプトを入力し、Ctrl＋Enterを押すと、ChatGPTのようにLLMとの会話ができます。

さいごに

実はこの記事をClaude3に書いてもらう前に何度かChatGPT(GPT4)でも挑戦していたのですが、エラーなしのコードを一発で出力させることができず、そうこうしているうちに利用回数制限が来てしまったのでClaude3に切り替えたのですが、Claude3(無料版のSonnetです)は一発で正解を叩き出してきたので、マジですごいなと思いました。LLM無課金勢はChatGPTではなくClaude3をデフォルトで使うといいと思います。

※2024年5月15日に名古屋で生成AIイベントやります！よろしくお願いします！
https://garage-nagoya.or.jp/event/p18871/