【2023年最新版】Streamlit×ChatGPT3.5によるWebアプリケーション

AI
2023.03.07

はじめに

チャットAIの進歩について

最近では、人工知能（AI）の技術が飛躍的に進歩し、様々な分野で活用されるようになってきました。その中でも、自然言語処理（NLP）分野においては、特に大きな進展が見られます。OpenAIが開発したGPT（Generative Pre-trained Transformer）モデルは、その代表的なものの一つで、自然言語生成において驚くべき精度を誇っています。

この記事では、GPT3.5モデルを利用したAPIを使用し、streamlitを使ってWebアプリケーションを実装する方法を紹介します。具体的には、ユーザーが入力したテキストに対して、AIが応答を生成するWebアプリを作成します。このWebアプリケーションを利用するとチャットボットなどの実装が可能です。

使用する技術やツールの説明

この記事で使用する技術やツールは以下の通りです。

  • OpenAI API: GPT3.5モデルを利用した自然言語処理API
  • Streamlit: Pythonで作成できるWebアプリケーションのフレームワーク

Pythonは、オブジェクト指向の高水準プログラミング言語であり、多くのAIやデータサイエンスの分野で使用されています。OpenAI APIは、AIの応答を生成するためのAPIであり、GPT3.5モデルを使用しています。Streamlitは、PythonでWebアプリケーションを簡単に実装できるフレームワークであり、UIの設計からAPIの呼び出しまで、多くの作業を簡略化してくれます。

ChatGPT3.5のAPIについて

ChatGPT3.5のAPIの特徴や使い方

ChatGPT3.5は、OpenAIのAPIを利用して、対話型のチャットボットを作成するためのAPIです。このAPIを使用することで、ユーザーが入力したテキストに対して、AIが応答を生成することができます。

ChatGPT3.5のAPIは、以下のような特徴を持っています。

  • 大量のテキストを学習しているため、高い精度で応答を生成することができます。
  • 対話型の応答生成に特化しており、自然な対話を実現することができます。
  • カスタムのトレーニングデータを使用することができ、特定の分野に適したチャットボットを作成することができます。

chatgpt3.5のAPIを使用するには、OpenAIのアカウントが必要です。アカウントを作成した後、APIキーを取得し、APIを呼び出すことができます。APIを呼び出すには、HTTPリクエストを送信する必要があります。また、APIの呼び出しには、Pythonなどのプログラミング言語を使用することができます。

GPTモデルについての説明は以下の記事でも解説しております。

【完全ガイド】Google ColabでChatGPT3.5を実装する方法 - APIキー取得から文章生成まで
Google Colabを使ったChatGPT3.5の実装方法を完全ガイド。OpenAIのAPIキー取得から、ラッパークラスの作成、文章生成まで一連の手順を紹介。自然言語処理の分野で活用するための、初心者にも分かりやすい説明をしています。
neuralnetconsulting.info

Streamlitについて

Streamlitとは何か

Streamlitは、Pythonで書かれたWebアプリケーションを簡単に作成するためのフレームワークです。Streamlitを使用することで、Pythonのコードを書くだけでWebアプリを作成することができます。

Streamlitを初めて扱う人には以下の記事で簡単な実装についても解説しております。

はじめてのStreamlit: Pythonで簡単Webアプリ開発の手引き
この記事の説明: この記事では、Pythonで簡単にWebアプリを開発することができるStreamlitの基本的な使い方から、データの表示や操作方法まで、詳細に解説します。
neuralnetconsulting.info

Streamlitの機能や特徴

Streamlitの主な機能や特徴は以下の通りです。

  • シンプルで使いやすいフレームワーク: Streamlitは、Pythonで使うのにシンプルで直感的なフレームワークを提供しています。直感的にわかりやすい簡単なコードを書くだけで、自動的に見やすいGUIのWebアプリが生成されます。
  • リアルタイムでの反映: Streamlitは、コードの変更をリアルタイムに反映させることができます。つまり、コードを変更するたびに、自動的にWebアプリが更新されます。

Streamlitのインストール方法や簡単な使い方

Streamlitを使用するには、以下の手順に従ってインストールしてください。

  1. コマンドラインで以下のコマンドを実行して、Streamlitをインストールします。
pip install streamlit
  1. Streamlitを使用してWebアプリを作成するには、Pythonスクリプトを作成し、以下のコマンドを実行します。
streamlit run [ファイル名]
  1. ブラウザが自動的に起動し、Webアプリが実行されます。

Streamlitでは、Pythonで書かれたコードを使用して、Webアプリを簡単に作成することができます。StreamlitのAPIはシンプルで直感的であるため、Pythonの知識があれば誰でも簡単にWebアプリを作成することができます。

ChatGPT3.5のAPIをStreamlitで実装する

StreamlitのWebアプリ作成手順

  1. Streamlitをインストールします。ターミナルで以下のコマンドを実行します。
pip install streamlit
  1. WebアプリのベースとなるPythonファイルを作成します。ここではmain.pyとしますが、ファイル名は適宜変更してください。
  1. main.pyファイルを編集し、以下のようにコードを書きます。
import streamlit as st

# ページのタイトルを設定
st.set_page_config(page_title="chatgpt3.5 API Demo", page_icon=":smiley:")

# アプリのタイトルを設定
st.title("chatgpt3.5 API Demo")

# ユーザーの入力を受け取るためのテキストボックスを作成
user_input = st.text_input("Please input your message.")
  1. 以下のコマンドを実行して、Webアプリを起動します。
streamlit run main.py
  1. ブラウザが自動的に起動し、Webアプリが実行されます。以下の画像のようなユーザーの入力を受け取るためのテキストボックスが表示されます。

APIを呼び出すためのコードの実装方法

ChatGPT3.5のAPIを呼び出すためには、OpenAIのAPIキーが必要です。APIキーを取得したら、以下のようなPythonコードを使用してAPIを呼び出すことができます。

import openai

class GPT3:
    def __init__(self):
        openai.api_key = "<YOUR_API_KEY>"
    
    def generate_text(self, prompt):
        print(prompt)
        response = openai.ChatCompletion.create(
            model="gpt-3.5-turbo",
            messages=[
            {"role": "user", "content": prompt}
            ]
        )
        return response['choices'][0]['message']['content']

上記の例では、OpenAIのAPIキーを <YOUR_API_KEY> の部分に指定しています。

model引数には、使用するGPT-3のモデルを指定します。ここではgpt-3.5-turboを使用しています。messages配列内は、辞書型が指定されており、チャットの履歴を表すオブジェクトのとなっております。各オブジェクトには、roleとcontentという2つのキーがあります。roleは、発話者がsystemかuserかを示し、contentは、発話の内容を示します。例えば、以下のように指定できます。

messages= [ { “role”: “system”, “content”: “こんにちは、私はOpenAIのチャットボットです。” }, { “role”: “user”, “content”: “こんにちは、私は人間です。” } ]とすることにより、チャットの文脈をChatGPTに伝えることができます。

また、このコードと解説は下記にも記載しております。

【完全ガイド】Google ColabでChatGPT3.5を実装する方法 - APIキー取得から文章生成まで
Google Colabを使ったChatGPT3.5の実装方法を完全ガイド。OpenAIのAPIキー取得から、ラッパークラスの作成、文章生成まで一連の手順を紹介。自然言語処理の分野で活用するための、初心者にも分かりやすい説明をしています。
neuralnetconsulting.info

ユーザーインターフェースの設計と実装方法

ユーザーインターフェースの設計には、Streamlitが提供する様々なコンポーネントを使用することができます。以下の例では、今回のコードの全文を表示しています。テキストボックスと送信ボタンを使用して、ユーザーの入力とAPIの呼び出しを実装しています。

import streamlit as st
import openai

class GPT3:
    def __init__(self):
        openai.api_key = "YOUR_API_KEY"
    
    def generate_text(self, prompt):
        response = openai.ChatCompletion.create(
            model="gpt-3.5-turbo",
            messages=[
            {"role": "user", "content": prompt}
            ]
        )
        return response['choices'][0]['message']['content']

# ページのタイトルを設定
st.set_page_config(page_title="chatgpt3.5 API Demo", page_icon=":smiley:")

# アプリのタイトルを設定
st.title("chatgpt3.5 API Demo")

# フォームを作成
with st.form(key = 'profile_form'):

    # ユーザーの入力を受け取るためのテキストボックスを作成
    user_input = st.text_input("Please input your message.")

    # テキスト送信用のボタンを作成
    send_btn = st.form_submit_button('Send')

    # ユーザーが送信ボタンをクリックした場合にのみ、APIを呼び出して結果を表示する
    if send_btn == True:
        if user_input:
            # APIを呼び出し、結果を取得する
            gpt3 = GPT3()
            result = gpt3.generate_text(user_input)

            # 結果を表示する
            st.write(result)

上記の例では、st.form_submit_buttonを使用してAPIの呼び出しをトリガーするようにしています。そして、APIの呼び出し結果をresultへ格納し、表示するために st.write() を使用しています。

その他のコンポーネントとして、スライダーやセレクトボックス、グラフ表示などがあります。これらのコンポーネントを使用することで、より複雑なユーザーインターフェースを実装することができます。

まとめと今後の展望

本記事では、chatgpt3.5のAPIをStreamlitを用いてWebアプリとして実装する手順を紹介しました。まず、ChatGPTt3.5のAPIの特徴や使い方について説明しました。次に、Streamlitについて説明し、インストール方法や簡単な使い方について紹介しました。そして、APIを呼び出すためのコードの実装方法や、ユーザーインターフェースの設計と実装方法について説明しました。最後に、実際にWebアプリを作成しました。

今後の展望としては、以下のような改善点が挙げられます。

  • ユーザーインターフェースの改善: 現在のWebアプリでは、テキストボックスに入力した文章に対してのみ応答していますが、より使いやすいユーザーインターフェースを検討する必要があります。
  • APIキーの管理: APIキーをスクリプトファイル内に直接記述すると、セキュリティ上の問題があるため、別ファイルに記述するなどが必要です。
  • 前回の会話の内容の保持：ChatGPTの出力を得ることはできましたが、前回の会話の内容を考慮した回答にはなっていないため、アルゴリズムの改善が必要です。

本記事で紹介した内容についての参考文献や関連リンクは以下の通りです。

以上、本記事のまとめと今後の展望についてでした。

文字起こしに特化したWhisper APIを使用したStreamlitによるWebアプリ開発についても執筆しましたので、ご覧ください。

【Whisper APIで音声認識】Streamlitで簡単にWebアプリを作る方法
この記事では、OpenAIが開発した音声認識モデルWhisper APIを使って、StreamlitでWebアプリケーションを構築する方法について解説します。Whisper APIは高い音声認識精度を持ち、簡単に実装することができます。
neuralnetconsulting.info

コメント

タイトルとURLをコピーしました