見出し画像

ChatGPT APIとPython Streamlitを使ってカスタマイズ可能なUIを作成する方法

S1S10

ご覧いただきありがとうございます：本稿は、2023年6月に思い描いたアイデアを下書き（草稿）したもので、この度ようやく公開することができました。個人の趣味として2023年5月頃にローカル環境で開発したこの作品は、ちょっと時間が経っていますが、新しい視角から楽しんでいただけることを願っております。※本稿で触れているChatGPT APIは、当時から現在までに多くのアップデートがなされていますが、本稿内で使用しているOpenai APIのバージョンは"0.28"です。

プロローグ

ChatGPTをウェブブラウザから使っていて、もっとうまく使いこなせたら！特に、以下の機能が欲しいと感じたことはありませんか？

  • 会話を保存（ダウンロード）したい！

  • 同じプロンプトを何度も使いたい！

  • ChatGPTのウェブブラウザもいいけれど、ChatGPT APIを自分で使って面白いプログラミングがしたい！

この記事では、Python Streamlitを使ってUIを作り、ChatGPT APIを活用する方法を紹介します。

TL;DR

ChatGPT APIをPythonのStreamlitで使う方法について解説します。会話が可能なUIを作成しました。さらに、会話の内容をファイルとして保存（ダウンロード）する機能も追加しました。

[Demo]
- MyChatGPT Workspace - a Hugging Face Space by S1S10

screenshot: MyChatGPT Workspace

[Demo source code] は、以下にあります。
- Hagginface: S1S10/MyChatGPT_workspace at main (huggingface.co)

[Quick START]

  • OpenAI key設定：左側 "Initialize menu" の下にある "Key visible/edit:" のチェックボックスをクリックすると "INPUT YOUR OPENAI_API_KEY" が入力可能となります。"None" を有効なOpenAI Keyに書き換えると使用可能となります。（※自己責任でお願いします。OpenAI Keyを使う度に変更するなどOne-Time的に使い捨て用に準備したり、心配な方は、ローカルPCなどで起動することをお勧めします）

OpenAI key設定

  • Chat：右側 "You" のテキストエリアにChatGPTへの聞きたいことを入力し Send ボタンをクリックするとChatGPTからの回答が表示されます。以降、同様に繰り返しChatを続けられます。

Chat

  • 会話のセーブ（.csvファイルダウンロード）：Chatを行うと左側 "Log menu" 下に "Download data as CSV" というボタンが出現します。このボタンをクリックするとファイル名 "df_log(YYYYMMDD-HHMMSS).csv" がダウンロードされます。※ダウンロードすると会話履歴が非表示になりますが、Chat のテキストエリアに . (ピリオド) を入力して Send ボタンをクリックすると再表示されます。

会話のセーブ

  • セーブした会話（ダウンロードした.csvファイル）をロードする：①ダウンロードしたファイルをアップロードすることにより、以前の会話内容を再表示できます。左側 "Preset menu" の下に "Upload .csv file:" があり "Drag and drop file here" という領域に（エクスプローラーなどで開いた）ファイルをドラッグ＆ドロップするとアップロードされます。もしくは "Browse files" のボタンをクリックするとファイル選択が可能となります。②その後、"Autopilot menu" の下、"Reproduction GPT conversation on saved .csv data:" のチェックボックスをクリックすると、右側のChatエリアに会話が表示されます。

①セーブした会話をロードする
②セーブした会話をロードする

本稿は、以下の § (セクション)で構成されています。

　§ StreamlitとChatGPT APIについて（簡単な説明）
　§ UI作成とChatGPTの統合
　§ 会話内容の保存機能
　§ TIPS for Premiun Users

§ StreamlitとChatGPT APIについて

Python Streamlitとは？

Python Streamlit（以下、Streamlit）は、Pythonプログラミング言語を使用して、データアプリケーションやインタラクティブなウェブアプリを簡単かつ迅速に構築するためのオープンソースフレームワークです。以下、Streamlitの概要や利点、インストール方法について説明します。

Ref. https://docs.streamlit.io/

概要

Streamlitは、データサイエンティストや開発者がPythonで作成したスクリプトをシームレスにウェブアプリに変換できるよう設計されています。これにより、データの可視化やモデルのインタラクションなど、様々なウェブベースのデータツールを素早く構築できます。

利点

Streamlitの主な利点は以下のとおりです。

  1. 簡単に使用できる: Streamlitは、Pythonの基本的な知識があればすぐに始められます。特別なウェブ開発スキルは必要ありません。

  2. 速度: スクリプトをウェブアプリに変換するのが非常に速く、数行のコードでインタラクティブなUIを作成できます。

  3. カスタマイズ: Streamlitは、コンポーネントを追加してカスタマイズすることができ、個別のニーズに合わせたアプリケーションが作成できます。

  4. 更新が容易: ユーザーがアプリケーションを変更すると、自動的に再描画されるため、更新が簡単です。

インストール方法

Streamlitのインストールは簡単で、以下の手順に従ってインストールできます。

  1. Python 3.7 ～ Python 3.11 がインストールされていることを確認してください。必要に応じて、Pythonをダウンロードし、インストールします。

  2. ターミナル（Mac / Linux）またはコマンドプロンプト（Windows）を開き、次のコマンドを入力します。

pip install streamlit

このコマンドを実行することで、Streamlitをシステムにインストールできます。インストールが完了したら、すぐにアプリケーションの開発を始めることができます。

ここでは、Python Streamlitの概要、利点、およびインストール方法について説明しました。Streamlitを使用すれば、データの可視化やインタラクティブなウェブアプリの構築がわずかな時間で実現できます。それでは、Streamlitを使ってChatGPT APIを活用し、UIを作成していきましょう。

ChatGPT APIについて

以下、ChatGPT APIの概要、利点、取得方法、必要な認証情報について説明します。また、APIとの接続方法についても紹介します。

ref. GPT - OpenAI API
ref. API Reference - OpenAI API

概要

ChatGPT APIは、OpenAIが提供するAPIで、対話型のGPTモデルにアクセスできます。これを使用すると、ユーザーのクエリに対して自然言語で応答を返すAIを簡単に構築できます。ChatGPT APIは、各種アプリケーションにおいて自然言語処理機能を利用できるようにします。

利点

ChatGPT APIの利点は次の通りです。

  1. 多様なアプリケーション: カスタマーサポート、ゲーム、教育アプリなど、あらゆる分野でのアプリケーション開発が容易になります。

  2. 対話型: ChatGPT APIは対話型の応答を生成するため、アプリ上での会話が自然でスムーズになります。

  3. カスタマイズ可能: プロンプトの内容だけでなく、APIの他のパラメータ（例：temperature, max_tokens）を調整することで、回答の質やスタイルをカスタマイズできます。

APIキーについて

ChatGPT APIを使用するには、まずOpenAIプラットフォームにサインアップしてアカウントを作成する必要があります。アカウント作成後、APIキーが付与され、これを利用してAPIにアクセスできるようになります。APIキーの取扱いは、セキュリティに注意して保管し、不正な利用や漏洩を防いでください。

接続方法

あらかじめインストールされているPythonのRequestsライブラリを使って、ChatGPT APIに接続できます。以下は（gpt-3.5-turboに対応した）簡単な接続例です。

import requests
import json

# Set your OpenAI API key
api_key = "your-api-key"

# Define the URL for ChatGPT API
chat_gpt_url = "https://api.openai.com/v1/chat/completions"

# Set the headers for authentication and content type
headers = {
    "Authorization": f"Bearer {api_key}",
    "Content-Type": "application/json"
}

# Define the payload for the request
# Please make sure to include both 'messages' and 'role' (either 'system', 'user', or 'assistant') 
data = {
    "messages": [
        {"role": "system", "content": "You are an assistant that speaks like Shakespeare."},
        {"role": "user", "content": "tell me a joke"}
    ],
    "model": "gpt-3.5-turbo"
}

# Make the POST request to the ChatGPT API
response = requests.post(chat_gpt_url, headers=headers, json=data)

# Parse the JSON response and print the result
result = json.loads(response.text)
print(result["choices"][0]["message"]["content"])

このコードでは、messagesとroleを含むpayloadを使用しています。messages内には、システムメッセージおよびユーザーからの会話を含み、モデル：gpt-3.5-turboで処理されます。このコードを使ってAPIに接続し、ChatGPTからの応答を得ることができます。さらに、Python Streamlitを用いることで、インタラクティブなUIとAPIの統合が可能となります。

§ UI作成とChatGPT APIの統合

このセクションでは、PythonのStreamlitライブラリを使用してユーザーインターフェース(UI)を作成し、ChatGPT APIと統合する方法について解説します。

ソースコードの概要:

  • 外部設定ファイルをインポート

  • キャッシュ機能を追加

  • アバタープロパティを設定

  • GPT Workspaceクラスを作成

    • 自作のUI初期化、生成応答、ログ取得関数を定義

以下、内容はソースコード(app.py · S1S10/MyChatGPT_workspace at main (huggingface.co))を参照してください。ここでは大まかな（関数について）流れを紹介します。

1. 必要なライブラリのインポート

はじめに、必要なライブラリをインポートします。

import settings
import yaml
import openai
import streamlit as st
from streamlit_chat import message
import base64
import pandas as pd
import datetime
import argparse
import os

2. Streamlitを利用したUI作成

次に、Streamlitを利用してUIを構築します。

2.1 セッション状態の初期化

まず、セッション状態を初期化し、ページ設定やセッション変数を定義します。

def init_session(self):
    st.set_page_config(
        page_title=self.definitions["MESSAGES"]["com"]["page-title"],
        page_icon=self.definitions["MESSAGES"]["com"]["page-icon"],
        initial_sidebar_state="expanded",
    )
    # ...

2.2 サイドバー機能の追加

次に、サイドバーを作成し、プリセットメニューやオートパイロットメニューなどの機能を追加します。

def sidebar_session(self):
    # [Preset menu]
    st.sidebar.title(":blue[Preset menu]")
    model_name = st.sidebar.radio("Choose a model:", ("GPT-3.5", "GPT-4"))
    # ...

    # [Autopilot menu]
    st.sidebar.title(":blue[Autopilot menu]")
    # ...

    # [Initialize menu]
    st.sidebar.title(":blue[Initialize menu]")
    # ...

    # [Avatar setting] for HuggingFace
    # ...

    # [Log menu]
    st.sidebar.title(":blue[Log menu]")
    # ...

    return (
        uploaded_file,
        chk_reload,
        chk_command,
        chk_col_number,
        df,
        start_auto_test,
        start_auto,
        counter_placeholder,
        model_name,
    )

2.3 応答生成関数の定義

generate_response関数を作成し、入力プロンプトを受け取り、ChatGPT APIから応答を生成します。

def generate_response(self, model, prompt, messages, call_chain):
    #...

3. ChatGPT APIとの統合

UIとChatGPT APIを統合するために、以下の手順を実行します。

3.1 ChatGPT APIへの問い合わせ

gpt_call関数を定義し、GPTモデルに対して入力プロンプトを渡し、APIから結果を受け取ります。

def gpt_call(self, user_input, model_name, use_response_stream, use_role_assistant):
    # ...

3.2 生成された応答の表示

gpt_conversation関数を定義し、生成された応答をUIに表示します。

def gpt_conversation(self, response_container, counter_placeholder, chk_reload):
    # ...

3.3 ログの更新

update_log関数を定義し、チャットのログを更新し、CSV形式でダウンロードできるようにします。

def update_log(self):
    #...

4. 実行

最後に、__main__内でgpt_workspaceクラスをインスタンス化し、ソースコードを実行します。

if __name__ == "__main__":
    # ...
    gpt_workspace(
        args.lang,
        args.gpt_avatar_style,
        args.gpt_avatar_name,
        args.you_avatar_style,
        args.you_avatar_name,
    )()

以上で、Python Streamlitを使ってUIを作成し、ChatGPT APIと統合する方法が完了しました。これにより、ChatGPT APIを活用した対話型のユーザーインターフェースを簡単に構築することができます。

§ 会話内容の保存機能

このセクションでは、会話履歴をCSV形式で保存・ダウンロードする機能について実装方法を解説します。

1. データフレームへの会話内容の追加

まず、gpt_conversation関数内で以下のように会話履歴をデータフレームに追加します。

def gpt_conversation(self, response_container, counter_placeholder, chk_reload):
    # ...
    self.df_log["You"] = st.session_state["past"]
    self.df_log["GPT_responce"] = st.session_state["generated"]
    self.df_log["model_name"] = st.session_state["model_name"]
    self.df_log["total_tokens"] = st.session_state["total_tokens"]
    self.df_log["cost"] = st.session_state["cost"]
    # ...

ここでは、データフレームdf_logにpast, generated, model_name, total_tokens, costを追加しています。これでデータフレームに会話履歴が保存されます。※データフレームのカラム名は、past → You, gererated → GPTresponceに割当てます（他、mode_name, total_tokens, costはそのまま）。

2. 会話内容をCSVに変換

convert_df関数を定義し、データフレームをCSV形式に変換します。

@st.cache_data
def convert_df(df):
    return df.to_csv().encode("utf-8")

この関数は、データフレームを引数として受け取り、to_csvメソッドでCSVに変換した後、utf-8でエンコードして返します。

3. CSVファイルをダウンロード

update_log関数内で、保存対象のデータをダウンロードボタンに設定します。

def update_log(self):
    csv = convert_df(self.df_log)
    #...
    st.sidebar.download_button(
        label="Download data as CSV",
        data=csv,
        file_name=self.csv_fname,
        mime="text/csv",
    )
    # ...

"st.sidebar.download_button" を使って、事前に変換したCSVデータをダウンロードできるように設定します。この機能により、ユーザーは会話履歴をファイルとしてダウンロードできるようになります。

以上で、UIに会話内容をCSV形式で保存(ダウンロード)する機能が実装されました。これにより、ユーザーは会話履歴をファイルとして保存して参照できるようになります。

おわりに

本稿では、Python StreamlitとChatGPT APIを用いて、独自の対話型ユーザーインターフェイスを作成する方法について説明しました。これにより、会話履歴の保存やプロンプトの繰り返し利用、APIのパラメーター調整など、ChatGPTをさらに使いやすくパーソナライズできる環境が実現できます。また、会話内容をCSV形式で保存しダウンロードする機能も実装しました。今回紹介した手法を応用することで、さまざまな分野のChatGPTアプリケーション開発のアイデアを試すことが容易になり、より効率的に自然言語処理機能を利用できることでしょう。今後もPython StreamlitとChatGPT APIを活用して、さらにパワフルで効果的な対話型インターフェースを開発することをお試しください。独自に、Autopilot menu を実装しています。また、機会がありましたら紹介させていただければと思います。

Appendix.

(1) .env の設定について

  • Docker環境やvenv環境などローカルPCで実行する場合、以下を参考に .env ファイルを準備してください。

OPENAI_API_KEY="OpenAI Key"
CHATGPT_LOGO="svg定義"

(2) Chat表示形式について

  • Quick Startの手順でChatを行うと以下のようにロボット(ChatGPTアイコン)との会話が吹き出しのように表示されます。※しかし、一部のMarkdown形式やmermaid形式が正しく表示されない場合もあります。

Markdown形式テスト
mermaid形式テスト

  • 一部Markdown形式やmermaid形式が正しく表示されない問題を改善する方法

set GPT icon:

  1. 左側のInitialize menuの下にある "set GPT icon:" のチェックボックスをクリックすると "INPUT GPT ICON AS SVI DEFINE" が入力可能となります。”Avatar” をSVG定義に書き換えます。

  2. 例えば、以下のSVG定義をコピー＆ペーストしてください。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">     <defs>         <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">             <stop offset="0%" stop-color="#f88c37"/>             <stop offset="50%" stop-color="#1c7eb1"/>             <stop offset="100%" stop-color="#c242cf"/>         </linearGradient>     </defs>     <text x="10" y="55" font-family="Arial" font-size="30" font-weight="bold" fill="url(#gradient)">         G         <animate attributeType="CSS" attributeName="font-size" from="30" to="35" dur="1s" repeatCount="indefinite" />     </text>     <text x="35" y="55" font-family="Arial" font-size="30" font-weight="bold" fill="url(#gradient)" style="mix-blend-mode: overlay;">         P         <animate attributeType="CSS" attributeName="font-size" from="30" to="35" dur="1s" repeatCount="indefinite" />     </text>     <text x="60" y="55" font-family="Arial" font-size="30" font-weight="bold" fill="url(#gradient)" style="mix-blend-mode: overlay;">         T         <animate attributeType="CSS" attributeName="font-size" from="30" to="35" dur="1s" repeatCount="indefinite" />     </text> </svg>

（※会話後に設定変更したなど、履歴が非表示になった場合は、Chat のテキストエリアに . (ピリオド) を入力して Send ボタンをクリックすると再表示されます）
すると、MarkdownやMermaid形式の表示が以下のように表示されます（表示可）

Markdown形式テスト
mermaid形式テスト

[変更履歴]

Rev. 1.0 (2024.1.21)：リリース
Rev. 1.1 (2024.1.24)：Appendix. (2) Chat表示形式についてを追記

～～～ この先、有料コンテンツを用意しております ～～～

§ TIPS for Premium Users

＊＊＊重要＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
　提供している有料コンテンツは、目立った特別なものではないかもしれません。しかし、ユーザーの皆様がこのツールを使って少しでも便利さを感じていただきたいという思いがあります。有料化の背景には、このツールを作り上げるための時間とエネルギーに対し、それがあなたにとって価値のあるものであると感じ、その努力を評価する形でチップとしてお気持ちをいただけると、それはあたたかい称賛と感じています。
　そのような支援は、大きな励みとなり、次なる改善への力となります。それはまるで、あなたが私に一杯の至福のコーヒーと心地よい一時を提供してくださるような感謝の気持ちと受け取っております。こうしたあたたかいお気持ち、心から感謝申し上げます。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

───[ 注意 ]────────────────────────────────────────
　Demo環境（OpenAI key準備した上で）は、TIP 1,3 を試すことができます。TIP 2は手法の紹介のみです。
────────────────────────────────────────────────

コンテンツは、以下のTIPSです。
- TIP 1: ChatGPTを使って(チャットアイコンの)デザイン制作とSVGファイルの生成（※GPT-4 で行ったプロンプト結果を一部紹介します。毎回同じように再現できるとは限りませんのでご了承ください）

SVGs experimental results

- TIP 2: アバターアイコンの設定（※Streamlitのアバターをご存知の方は、調べればわかるような話だと思います）

e.g. Avatar: Coco

- TIP 3: stream responseの紹介（※ソースコードを見ればわかるような話なので該当箇所の紹介です）

Use Stream Responce

ここから先は

5,803字 / 11画像

¥ 300

この記事が気に入ったらサポートをしてみませんか？