ChatGPT API を用いた簡単な Webアプリ【Python】

ここ最近、仕事関係のちょっとした調べものやアイデア出し、趣味のプログラミングの講師役として ChatGPT を使う機会が多く、ChatGPT3.5-turbo API を用いた Google Colaboratry 上で動作する簡単な Webアプリを作成したため、メモがてら紹介します。

Google Colaboratry は、Google アカウントを持っていれば誰でも手軽に Python 実行環境を構築できるため、私と同じようなプログラミング初学者や、プログラミングに興味はあるが触れた事は無い方の参考になれば幸いです。

作成するもの

以下の機能を持つWebアプリを作成します。

  • ①ChatGPT のオリジナルページに近い、質問をするとAIからの返答が表示されるページ
  • ②条件を入力すると、プログラミングの関数名称の候補を10個提案してくれるページ
  • ③HTMLを入力すると、遷移先の記事を翻訳&要約してくれるページ

各機能はブラウザの左側に一覧表示され、ページを切り替える事で機能を切り替えるイメージ。

完成した状態のブラウザ上の動作画面は以下。

必要なもの

必要なものは以下です。

  • Google アカウント & Google Colaboratry 環境(始め方はこちら等を参照
  • OpenAI API用Key(Keyの取得方法は、検索すれば多くのサイトで説明されているため本記事では割愛)

コードを書いたファイルを事前に準備した後に Google Colab 上へアップロードして動作させる形式です。

VS Code 等のプログラミング用エディタをインストールしていれば完璧ですが、無くても本記事のコードをメモ帳等の汎用エディタへ貼り付け、拡張子を".py"として保存すれば動作します。(.py は Python で動作させるコード・スクリプトのファイル形式)

【第1段階】Google Colab 側での準備

まずは、Google Colab 上で以下のコードを実行します。

今回は Streamlit というWebアプリを簡単に作成できるライブラリを用いるため、下記で Google Colab 上へインストールしておきます。他、OpenAI が提供しているライブラリも同様にインストール。

!pip install streamlit
!pip install openai

Google Colab 上へのインストールが終わったら、次に下記のコードを実行します。

Streamlit の Multipage 機能を用いるため、必要なディレクトリ(pages)作成を指示。こちらに【第3段階】で後述するPython ファイルをアップロードしていきます。

import os
os.mkdir('pages')

【第2段階】メインページ部分を作成

次に、メインページとなる部分を下記で作成しておきます。

import streamlit as st

# Streamlitのマルチページ機能を使用。本スクリプトはメインページとして置くのみ。
st.title('Main page')
st.header('左欄から機能を選択')

内容は今回は特に何も入れず、「左側から機能を選択する」事をヘッダーとして表示するのみとしておきます。

【第3段階】それぞれのアプリ部分を制作

次に、それぞれのアプリ部分となるPythonファイルを作成していきます。

まずは、①ChatGPT のオリジナルページに近い、質問をするとAIからの返答が表示されるページを以下で作成します。OpenAI の API は辞書型で {“role" : “役割", “指示内容"} という形でデータを渡すため、そのような書き方にしています。

import streamlit as st
import openai

# API key を設定
openai.api_key = 'ここに取得したAPI Key を入力'

# chatGPTからの返答をres_contentで返す関数
def chatgpt_response(prompt):
    res = openai.ChatCompletion.create(
        model="gpt-3.5-turbo",
        messages=[
            # 1つの辞書が1つのメッセージを表す
            {"role": "system", "content": "You are a helpful assistant."},  # 最初に初期化を実施
            {"role": "user", "content": prompt},
        ]
    )

    # resの中から、回答部分のみを取り出して表示
    return res['choices'][0]['message']['content']


# streamlitで表示部分
st.title("SimpleAsking (ChatGPT)")
st.caption("機能: ChatGPT3.5-turbo API を用いた ChatGPTクローン")

input_prompt = st.text_area("入力欄", "")

if st.button("送信"):
    answer = chatgpt_response(input_prompt)
    st.markdown(answer)

次に、②プログラミングの関数名称の候補を10個提案してくれるページ部分。

入力するプロンプトに際してはこのページを参考とさせて頂きました。

import streamlit as st
import openai

# API key を設定
openai.api_key = 'ここに取得したAPI Key を入力'

# ChatGPTへ生成指示する関数
def generate_name(text, language):
    res = openai.ChatCompletion.create(
        model="gpt-3.5-turbo",
        messages=[
            {
                "role": "system",
                "content": "Please output 10 candidates "
                           "for appropriate variable "
                           "or function names in English from the input Japanese. "
                          f"Naming conventions must follow the {language} language specification "
                           "and the output must be on a single line in the format name1,name2,name3."
            },
            {
                "role": "user",
                "content": text
            },
        ],
    )
    # resの中から、回答部分のみを取り出して表示
    return res["choices"][0]["message"]["content"]


language_list = ["Python", "JavaScript", "Java", "Go", "Kotlin"]


# streamlitで表示部分
st.title("FunctionNamer (ChatGPT)")
st.caption("機能: 変数名や関数名を自動で命名")

selected_languarge = st.selectbox("言語を選択: ", language_list)

text_input = st.text_input("変数や関数にする処理の概要を記述", "")

if st.button("生成"):
    names = generate_name(text_input, language=selected_languarge)
    for name in names.split(","):
        st.code(name)

最後に、③HTMLを入力すると、遷移先の記事を翻訳&要約してくれるページ。基本的には②と同様の作りです。

翻訳・要約する言語を英語、日本語の2種類から選択できるようにしています。

import streamlit as st
import openai

# API key を設定
openai.api_key = 'ここに取得したAPI Key を入力'

# chatGPTからの返答をres_contentで返す関数
def generate_wrapup(html, language):
    res = openai.ChatCompletion.create(
        model="gpt-3.5-turbo",
        messages=[
            # 1つの辞書が1つのメッセージを表す
            {"role": "system",
             "content": "Please wrap up the content in the input html web page."\
                       f"If the content is not in {language} language, "\
                       f"translate the content to {language} and wrap up."},
            {"role": "user", "content": html},
        ]
    )
    # resの中から、回答部分のみを取り出して表示
    return res['choices'][0]['message']['content']


language_list = ["Japenese", "English"]


# streamlitで表示部分
st.title("WrapUpPage (ChatGPT)")
st.caption("機能: 指定したHTMLページ内の記事を翻訳および要約")

selected_languarge = st.selectbox("言語を選択: ", language_list)

input_html = st.text_area("HTMLを入力", "")

if st.button("送信"):
    wrapup = generate_wrapup(input_html, language=selected_languarge)
    st.markdown(wrapup)

【完成】動作させてみる

最後に、【第2段階】【第3段階】で作成した Python ファイルを Google Colab へアップロードしていきます。

アップロードする際は、メインページは /content の直下に、それぞれの機能のページは /content/pages へ。

そして、以下のコマンドを実行して streamlit を起動して、localtunnel 経由で Webアプリをオンラインで閲覧化とします。

# Streamlitをlocaltunnel経由で起動
!streamlit run MainPage_Multipage.py & sleep 3 && npx localtunnel --port 8501

以下のような留意を促すページがでるので、Click to Continue で進むと、冒頭のようなオンラインで起動する Webアプリの完成です。

Webアプリを閉じる際は、Google Colab 上でプログラム動作をストップするのみです。


以上、Streamlit を用いた簡単なWebアプリ作成の手順でした。

とても手軽で簡単に作成でき、機能の修正・変更も容易かつ応用しやすいので、興味のある方は是非試してみてください。


珈琲1杯でもおごるつもりでご支援して頂けたら大変喜びます😊

スポンサーリンク