ChatGPTのWebアプリを爆速で構築＆公開する

水鳥川いると申します。

今回はOpenAI APIを利用してChatGPTのような会話アプリを爆速で作成しました。

正直、ここまで簡単にChatGPTのようなアプリを作成できてしまっていいのってくらい簡単なので、プログラミングに興味ある方はぜひチャレンジしてみてください。

作成したWebアプリ
https://streamlit-shino-b3dcmbttjq-an.a.run.app/

前回、TwitterAPIを利用して会話できる仕組みを構築しましたが、それのWebアプリになります。

開発環境

streamlit + Google Cloud Run

streamlit

streamlitはPythonで簡単にWebアプリケーションを作成できるオープンソースのライブラリです。streamlitを使うことで、データの可視化や機械学習モデルのデバッグ、プロトタイプの作成など、様々な用途でWebアプリケーションを作成することができます。

また、streamlitは簡単なコードで高度なUIを作成することができ、ウェブフレームワークのような複雑な設定やコーディングは必要ありません。そのため、Pythonの初心者や、Webアプリケーション作成に慣れていない人でも簡単に使いこなすことができます。

streamlitはデータ基盤会社のsnowflake社が買収したのもあり、開発がすごい勢いで行われています。Pythonでフロントエンドを書けるサービスは今までもありましたが、streamlitは裏でReactが動いていることもあり、Webアプリを簡単に構築できるのがすごく良いです。

Google Cloud Run

Cloud Runはサーバーレスなコンテナ実行環境を提供するGCPのサービスです。Cloud Runを使うことによって、Dockerイメージを構築するだけでアプリのデプロイを簡単におこなうことができます。

簡単に言うと、Pythonのプログラムを実行＆管理してくれるクラウドサーバーみたいなものです。

開発手順

① Pythonでstreamlitアプリを構築

以下のようにPythonでmainのプログラムを構築していきます。
キャラの部分は省略していますが、性格や口調などを追加してあげるとキャラクターになりきって会話してくれます。

毎回デプロイすると大変なので、GoogleColabo上で動かすことでローカル環境で簡単にテストが可能です。

import openai
import streamlit as st

# OpenAI APIキーを設定する関数
def setup_openai_api():
    """
    OpenAI APIキーを環境変数から読み込み、OpenAIに接続する。
    """
    openai.api_key = "XXXXXXXXXXXXXXXXXX"

def stream_write(chunks, key=None):
    result_area = st.empty()
    text = ''
    for chunk in chunks:
        next: str = chunk['choices'][0]['delta'].get('content', '') # type: ignore
        text += next
        if "。" in next:
            text += "\n"
        if option == "紫之創":
          result_area.info(option + "：" + text)
        elif option == "仁兎なずな":
          result_area.warning(option + "：" + text)

    return text

@st.cache_data
def cached_chat(messages):
    completion = openai.ChatCompletion.create(
        model='gpt-3.5-turbo',
        messages=messages,
        stream=True,
    )
    text = stream_write(completion, key=f'output_{messages}')
    return text

setup_openai_api()  # OpenAI APIキーを設定する


shino = """あなたは「あんさんぶるスターズ」に登場する紫之創（愛称：はじめ／しののん）です。\
これから紫之創になりきって140文字以内で会話をしてください。\"""

nazuna = """あなたは「あんさんぶるスターズ」に登場する仁兎なずな（愛称：に～ちゃん／ナズ）です。\
これから仁兎なずなになりきって140文字以内で会話をしてください。\"""

messages = []
display_messages = []

option = st.radio(
  '会話をしたい相手を選んでください。', 
  ['紫之創', '仁兎なずな']
)

if option == "紫之創":
  messages = []
  system = {"role": "system", "content": shino}
  messages.append(system)

elif option == "仁兎なずな":
  messages = []
  system = {"role": "system", "content": nazuna}
  messages.append(system)
    

chat_widget = st.empty()

while True:
    with chat_widget.container():
        for message in display_messages:
            if message['role'] == "user":
              st.code("あなた：" + message['content'])
            elif option == "紫之創":
              st.info(option + "：" + message['content'])
            elif option == "仁兎なずな":
              st.warning(option + "：" + message['content'])
        input_text = st.text_input('入力', key=f'input_{messages}')

        if len(input_text) == 0:
            st.stop()
        messages.append({"role": "user", "content": input_text})
        display_messages.append({"role": "user", "content": input_text})
        text = cached_chat(messages)
        messages.append({"role": "assistant", "content": text})
        display_messages.append({"role": "assistant", "content": text})

streamlitでの構築はこちらの記事を参考にさせていただきました。

StreamlitでChatGPTのStreamを表示する - Qiita

② Cloud Runにデプロイ

前回、Pythonアプリを常時実行するためにAzureのWindows仮想マシン上でpyファイルを常時起動していたのですが、無料枠がすぐになくなってしまいました。
そこで今回はCloudRunでPythonアプリを常時起動にしました。

CloudRunへのデプロイはこちらの記事を参考にさせていただきました。

【爆速!!】Streamlitで作成したアプリをCloud Runで公開｜CO-WRITE

追加したい機能

・LangChainのCAMELを利用し、キャラクターに自律性もたせてシミュレーションゲームにする

・IAMでアクセス権設定