DX開発事業部の西田です。

この記事は「もくもく会ブログリレー」 31日目、光栄なことにラストの投稿を飾らせていただくことになりました!

Streamlitとは

本記事では、StreamlitとGeminiを使ったチャットボットWebアプリを簡単に作ることを目指します。

Streamlitはフロントエンド(HTMLやCSS、JavaScriptなど)の知識がなくてもPyhtonの知識さえあれば見栄えのよいデータ可視化アプリを作成できるOSSのWebアプリフレームワークです。
2019年に登場した比較的若いフレームワークですが、Pythonをよく利用するデータサイエンティストから人気が集まり、2023年にチャットコンポーネントをリリースしたことでLLMとの相性もよくなったことで今勢いが増しています。

Community CloudへデプロイすればパブリックなアプリならGitHubリポジトリと連携するだけで無料で公開することもできます。

まず試してみる

特にLLMは使わず簡単な定型文を返すチャットボットアプリを動かしてみます。

Streamlitライブラリのインストール。

pip install streamlit==1.36.0

chatbot.py という名前でPythonファイルを作成します。

import streamlit as st

st.title("はじめてのチャットボット🤖")

# セッションにチャット履歴がなければ初期化
if "chat_history" not in st.session_state:
    st.session_state.chat_history = []

# チャット履歴を表示
for message in st.session_state.chat_history:
    with st.chat_message(message["role"]):
        st.markdown(message["content"])

# チャットボットの返答を作成
def generate_response(user_input):
    if "こんにちは" in user_input:
        return "こんにちは!今日はどうされましたか?"
    elif "ありがとう" in user_input:
        return "どういたしまして!お役に立てて嬉しいです。"
    elif "さようなら" in user_input:
        return "さようなら!またお話ししましょう。"
    else:
        return f"ご質問ありがとうございます。『{user_input}』についてはお答えできませんが、他にお困りのことはありますか?"

# ユーザーの入力が送信された際に実行される処理
if prompt := st.chat_input("何かお困りですか?"):

    # ユーザの入力を表示
    with st.chat_message("user"):
        st.markdown(prompt)
    # ユーザの入力をチャット履歴に追加
    st.session_state.chat_history.append({"role": "user", "content": prompt})

    # チャットボットの返答を表示
    response = generate_response(prompt)
    with st.chat_message("assistant"):
        st.markdown(response)
    # チャットボットの返答をチャット履歴に追加
    st.session_state.chat_history.append({"role": "assistant", "content": response})

あとはコマンドを実行するだけでローカルサーバーが立ち上がります。

streamlit run chatbot.py 

  You can now view your Streamlit app in your browser.

  Local URL: http://localhost:8501
  Network URL: http://172.16.0.66:8501

Pythonコードだけでシンプルなチャットボット画面を作成して定形の対話ができました!

Geminiと対話できるAIチャットボットの作成

これだけでは面白くないので、本格的にLLMと対話できるチャットボットに改造していきます。

Geminiを利用するためのライブラリのインストール。

pip install google-generativeai==0.7.1

先ほど作ったファイルを書き換えます。

import streamlit as st
import google.generativeai as genai


# サイドバーにGeminiのAPIキーの入力欄を設ける
with st.sidebar:
    gemini_api_key = st.text_input("Gemini API Key", key="chatbot_api_key", type="password")
    "[Get an Gemini API key](https://aistudio.google.com/app/apikey)"
    "[View the source code](https://github.com/danishi/streamlit-gemini-chatbot)"

st.title("✨ Gemini Chatbot")
st.caption("🚀 A Streamlit chatbot powered by Gemini")

# セッションにチャット履歴がなければ初期化
if "chat_history" not in st.session_state:
    st.session_state.chat_history = []

# チャット履歴を表示
for message in st.session_state.chat_history:
    st.chat_message(message["role"]).write(message["content"])

# ユーザーの入力が送信された際に実行される処理
if prompt := st.chat_input("How can I help you?"):

    # APIキーのチェック
    if not gemini_api_key:
        st.info("Please add your [Gemini API key](https://aistudio.google.com/app/apikey) to continue.")
        st.stop()

    # モデルのセットアップ
    genai.configure(api_key=gemini_api_key)
    model = genai.GenerativeModel('gemini-1.5-flash')

    # ユーザの入力をチャット履歴に追加し画面表示
    st.session_state.chat_history.append({"role": "user", "content": prompt})
    st.chat_message("user").write(prompt)

    # これまでの会話履歴を取得
    messages = []
    for message in st.session_state.chat_history:
        messages.append(
            {
                "role": message["role"] if message["role"] == "user" else "model",
                'parts': message["content"]
            }
        )

    # Geminiへ問い合わせを行う
    response = model.generate_content(messages)

    # Geminiの返答をチャット履歴に追加し画面表示
    st.session_state.chat_history.append({"role": "assistant", "content": response.text})
    st.chat_message("assistant").write(response.text)

これで起動すると、Geminiを使ったチャットボットアプリが立ち上がります。
APIキーを発行して、サイドバーにセットして問い合わせを行います。

コードを生成させることに成功しました。
会話履歴を送信しているのでマルチターンの問い合わせにも回答できます。

このようにStreamlitを使えば、数行のPythonコードでリッチな見た目のGeminiを使った生成AIチャットボットを作成することができました!

完成品をStreamlitへ公開しておいたのでぜひお試しください。
マルチモーダル問い合わせサンプルも実装しています。

またGoogle Cloud公式のCloud Runにデプロイするサンプルも見つけたので紹介しておきます!

Sample code and notebooks for Generative AI on Google Cloud, with Gemini on Vertex AI - GoogleCloudPlatform/generative-ai

もくもく会ブログリレーはこれにて終了ですが、アイレットではこの企画のように部署の垣根を超えて技術研鑽やアウトプットを促進し合う素晴らしい文化が根付いています!
これからのもくもく会の活動にもご注目ください✨