ChatGPTAPI×ngrok×StreamlitでPython学習チャットボットを作ろう！

2023年6月28日 07:26

今回は、ChatGPT APIを使ったWebアプリ作成の入門として、Python学習を支援してくれるチャットボットを作成したいと思います。ChatGPTAPI使ってWebアプリ作ってみたいけどハードルが高いと思っている方に入門としておすすめです。Pythonの基本知識はあるといいです。まだ使ったことがない人のために丁寧に説明していきますので、ぜひ読んでみてください。

ngrokの準備

ngrokとは？

ngrokはローカルサーバーを外部公開できるツールになります。今回はGoogleコラボラトリー上で構築したチャットボットを動かすために使用します。今回使用する範囲では無料で使用ができます。
https://ngrok.com/

セットアップ

まずはngrokのサイトにアクセスをしてSignUpをクリックします

必要な情報を入力して登録を進めます.

登録が完了すると次のような—ボードになります。

トークンの取得

左側のメニューのYour Authtokenをクリックしてトークンを取得します。

トークンが表示されるのでコピーします。

Streamlitの準備

Streamlitとは？

StreamlitというのはWebアプリのフレームワークの一つです。

Pythonのみで簡単にWebアプリを構築することができるものになります。HTMLやJavaScriptなどを書く必要がないため、一般的なPythonWebアプリを作成する際に使用する他のフレームワークよりも簡単に利用できます。作成したアプリは、Streamlit Cloudで公開することも可能です。

https://streamlit.io/

アカウントの作成

まずはstreamlitにアクセスをしてsign upからユーザー登録をしていきます。今回は最終的にGitHubに連携をしてgithubリポジトリのコードを実行する形になるので、GitHub連携でアカウント登録すると便利です。

github連携を承認したあとは、各種入力が必要です。

アカウントの作成が完了すると、次のような画面になります。まずは、アプリの中身になるコードを作成して、その後、この画面に戻ってきます。

ChatBotのメインコードを書こう

今回は、githubを使って最終的にアプリケーションを公開するところまで、行います。開発環境はVSCodeなどが便利でしょう。

まず初めにgithubのリポジトリを作成します。以下は簡単な手順概要です。

GitHubにアクセスし、ログインします。
右上のプラスアイコン（+）をクリックし、ドロップダウンメニューから「New repository」を選択します。
リポジトリの詳細を入力します。
- 「Repository name」フィールドにリポジトリの名前を入力します。今回はchatgpt_botというリポジトリを作成しました。
- 「Description」フィールドにリポジトリの説明を入力します。任意です。
- 「Public」または「Private」の選択ボックスからリポジトリの公開設定を選択します。
- 「Initialize this repository with」オプションでREADMEの有無などを設定します。（私はMITLICENSEでgitignoreをPython,readmeはなしで作りました）
必要な設定を選択したら、「Create repository」ボタンをクリックします。
リポジトリが作成されました。
リポジトリをクローンするためのURLを取得します。画面右側にある「Code」ボタンをクリックし、HTTPSまたはSSHのクローンURLをコピーします。
ローカルPCの作業ディレクトリに移動しgit cloneして作成したリポジトリをローカルに持ってきます。

chatgpt_botというフォルダが作成されるので、streamlit_app.pyというファイルを新しく作成します。そしてそのファイルに以下のように記入します。今回はPython学習に対する質問に答えてくれるボットを作ります。追加機能として、練習問題を作成できるようにしました。

import streamlit as st
import openai

# Streamlit Community Cloudの「Secrets」からOpenAI API keyを取得
openai.api_key = st.secrets.OpenAIAPI.openai_api_key


prompt = """
あなたは優秀なPythonエンジニアで学習者にPythonを教える講師です。
Pythonプログラミング上達のために、学習者のレベルに合わせて適切なアドバイスを行ってください。
あなたは、特に学習計画の構築や、エラーの処理、例題の作成が得意です。
あなたの役割は学習者のPythonスキルを向上させることなので、Pythonプログラミングに関係ないことを聞かれても、答えないでください。
"""

# st.session_stateを使いメッセージを保存
if "plain_msg" not in st.session_state:
    st.session_state["plain_msg"] = [
        {"role": "system", "content": prompt}
    ]

quiz_prompt = """
あなたは優秀なPythonエンジニアです。
Pythonプログラミング上達のために、学習者のレベルに合わせて練習問題の作成ととその回答、解説の作成を行います。
"""
if "quiz_msg" not in st.session_state:
    st.session_state["quiz_msg"] = [
        {"role": "system", "content": quiz_prompt}
    ]




# チャットボットとやりとりする関数
def api_call(messages):

    response = openai.ChatCompletion.create(
        model="gpt-3.5-turbo",
        messages=messages
    )

    bot_message = response["choices"][0]["message"]
    messages.append(bot_message)
    return messages

def chat():
    messages = st.session_state["plain_msg"]
    message = {"role": "user", "content": st.session_state["user_input"]}
    messages.append(message)
    messages = api_call(messages)
    st.session_state[user_input] = ""

# 問題作成の関数
def create_exercise(difficulty, custom_exercise):
    # 問題作成のコードを記述
    exercise_prompt = difficulty + "のPythonの練習問題を1問作成してください。回答と解説もお願いします。"

    if custom_exercise:
        # フリーテキスト入力による問題作成の場合
        exercise_prompt = custom_exercise
    messages = st.session_state["plain_msg"]
    message = {"role": "user", "content": exercise_prompt}
    messages.append(message)
    messages = api_call(messages)
    
    
# メッセージの表示関数
def display_message_history(message_list,show_speaker=True):
    if message_list:
        for message in reversed(message_list[1:]):
            speaker = "😀" if message["role"] != "assistant" else "💻"
            st.write(speaker + ": " + message["content"])



# UIの構築
st.title("Python学習への道")
st.write("Pythonに関してわからないことがあれば聞いてください。一緒にPythonを勉強していきましょう！")

# 「練習問題を作成」セクション
st.header("練習問題を作成")

# 難易度の選択
difficulty = st.selectbox("難易度を選択してください", ["初心者向け", "中級者向け", "上級者向け"])

# フリーテキスト入力欄
custom_exercise = st.text_area("自分で問題を入力する場合はこちらに記述してください")

# 「練習問題を作成」ボタンを追加
if st.button("練習問題を作成"):
    create_exercise(difficulty, custom_exercise)

# 問題の表示
display_message_history(st.session_state["quiz_msg"])

user_input = st.text_input("メッセージを入力してください。", key="user_input", on_change=chat)

# メッセージ履歴の表示
display_message_history(st.session_state["plain_msg"])