ChatGPT APIとStreamlitを使って超簡単にAIアプリを作ってみた

こんにちは 堤です。

3月1日にChatGPTのAPIが公開されました。

openai.com

APIが公開されたことでChatGPTを活用したアプリが色々登場して盛り上がっていますね！
今回はPythonのみで簡単にWebアプリを作成できるStreamlitとChatGPT APIを組み合わせて簡単にAIアプリを作成する方法をご紹介します。

Streamlitについて

StreamlitはフロントもバックエンドもPythonのみの記述でWebアプリケーションを作成できるフレームワークです。

streamlit.io

Webアプリ作りたいけどフロントの知識が全くない。。という人でもUIが簡単に作成できるのでとても便利です。
データ可視化や機械学習モデルの共有がとても簡単にできるのでデータサイエンスの領域でよく使われています。

作成するアプリ

今回はこのChatGPT APIとStreamlitを組み合わせたアプリを作っていきます。
今回は例として変数名や関数名を自動で命名してくれるアプリケーションを作りたいと思います！

名前は『AutoNamer(オートネイマー)』という名前にします。

もちろんChatGPTに考えてもらいました。

いい感じの名前ですね！かっこいいかどうかは置いておいて

処理概要

AutoNamerは以下のような処理をするようにしたいと思います。

1. 言語の選択

キャメルケースやスネークケースなど言語によって命名規則などが異なるので、最初に何の言語で変数名や関数名を生成するかを選択します。

2. 変数名や関数名にしたい処理の概要を記述

ここにどんな処理や対象の変数名や関数名が欲しいかを記述します。
例えば『うるう年かどうかを判定する関数』とか『ユーザーが認証されているかを示す変数』などと入力します。

3. 命名候補を出力

最後に命名の候補を出力します。自分で気に入ったものを選べるように今回は10個候補となる名前を出力してもらうようにしましょう。

コード

これらの処理をStreamlitを使って記述するとこのようなコードになります。

import streamlit as st
import openai
import os

CHATGPT_API_KEY = os.environ["CHATGPT_API_KEY"]
openai.api_key = CHATGPT_API_KEY

def generate_name(text,language):
    res = openai.ChatCompletion.create(
    model="gpt-3.5-turbo",
    messages=[
        {
            "role": "system",
            "content": f"Please output 10 candidates for appropriate variable or function names in English from the input Japanese. 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
        },
    ],
    )
    return res["choices"][0]["message"]["content"]

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

st.title("AutoNamer")
st.header('変数名や関数名を自動で命名するアプリです')

selected_language = st.selectbox("言語を選択してください", language_list)

text_input = st.text_input("変数や関数にする処理の概要を記述してください", "")

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

generate_name関数でChatGPT APIを用いて命名を行います

def generate_name(text,language):
    res = openai.ChatCompletion.create(
    model="gpt-3.5-turbo",
    messages=[
        {
            "role": "system",
            "content": f"Please output 10 candidates for appropriate variable or function names in English from the input Japanese. 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
        },
    ],
    )
    return res["choices"][0]["message"]["content"]

ChatGPT APIには上記のような形式でリクエストを送ります。

messagesでロールとコンテンツをパラメータとして渡します。

roleにはsystemã‚„user、assistantが設定でき、systemはChatGPTにどのようにふるまってほしいかの条件を記述し、userで質問や命令を記述します。ChatGPT APIは会話の履歴を保持しない仕様になっているため、assistantに過去の会話の内容を記載することで過去の履歴を保持します。

今回はsystemとuserを使用します。

systemには

"Please output 10 candidates for appropriate variable or function names in English from the input Japanese. Naming conventions must follow the {language} language specification and the output must be on a single line in the format name1,name2,name3."

と設定しました。

• 日本語の入力から英名で命名候補を10個出力すること
• 入力された言語の命名規則に合わせること
• name1,name2,name3のような形式で出力すること

を条件として指定しています。

userには変数や関数にしたい処理や対象を日本語で入力します。

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

st.title("AutoNamer")
st.header('変数名や関数名を自動で命名するアプリです')

selected_language = st.selectbox("言語を選択してください", language_list)

text_input = st.text_input("変数や関数にする処理の概要を記述してください", "")

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

その下の処理ではStreamlitでの処理を記述しています。HTMLを書かなくてもst.selectboxã‚„st.buttonと書くだけで簡単にセレクトボックスやボタンといった要素を生成できます。

動作

これだけの記述でもう完成です。1つのファイルだけで完結するって素晴らしい...

実際にAutoNamerの動作を確認してみましょう。

$ streamlit run app.pyとコマンドを実行するとアプリがローカルホストで立ち上がります。

実際に入力して使ってみましょう。

ちゃんと出力されています...が一部Pythonの命名規則とは異なるキャメルケースになってしまっているものがあります。

違う言語でも試してみましょう

今度はちゃんとJavaの命名規則に沿ったものになってます！ 名前も意味が通っていていい感じです。

この後何回か試してみましたが、候補が10個以上出力されてしまったり、反対に10個出力されなかったことがありました。 命名規則に沿ったものにすることも合わせて、systemの条件の渡し方(プロンプトエンジニアリング)にはまだまだ改善の余地がありそうです。

まとめ

今回はStreamlitとChatGPT APIを使ってAIアプリを作成してみました。 まだまだ改善の余地はありますがわずか30行ほどのPythonコードのみでそれなりのアプリが作成できたのでかなりハードル低くWebアプリが作成できますね！

外部公開もStreamlitにはStreamlit Sharingというホスティングサービスもあるためデプロイも無料で簡単に行うことができます。

streamlit.io

そこまでUIとかにはこだわらなくていいけどちょっとした個人や社内用のアプリを作りたいとかの用途であればかなり使えると思います。ChatGPT APIとの相性もとてもいいなーと個人的には感じたので色々アプリを作ってみたいです。

執筆者堤 拓哉

インフラエンジニア。データ分析やデータ基盤周りの話に興味があります。