はじめに
今回は、ChatGPTのAPIを利用してWebアプリケーションを作成します。
PythonとDjangoで実装します。
自分で作成したアプリから、ChatGPTの機能が呼び出せるとアイディア次第では便利ですね!
Djangoの環境とプロジェクトの作成方法は以下をご覧ください。
余談ですが、Laravel向けに解説した記事もございますので参考にしてください。
他にも私のブログで、ChatGPTについて解説している記事がありますのでご覧ください。
ChatGPTについて
ChatGPTは、OpenAIによって開発された大規模な自然言語処理モデルです。
ChatGPTについては以下の記事もご覧ください。
また、有料プランもあります。
以下の記事も参考にしてください。
VS Codeインストール
VS Codeのインストール方法は、以下の記事にまとめましたのでご覧ください。
VS Codeのオススメ設定や拡張機能などは、以下の記事にまとめました。
ChatGPTのAPIキーの取得
ChatGPTのAPIを利用するためには、アカウントを作成し、APIキーを取得する必要があります。
アカウントの作成方法は以下の記事を参考にしてください。
APIの登録方法については以下の記事を参考にしてください。
ログインした状態で、以下のサイトにアクセスします。
右上のメニューから、「View API keys」をクリックします。
![OpenAI View API keys](https://chigusa-web.com/wp-content/uploads/2023/03/2023-03-12_17h11_56-300x346.png)
「Create new secret key」をクリックし、APIキーを作成します。
![ChatGPT Create new secret key](https://chigusa-web.com/wp-content/uploads/2023/03/2023-03-12_17h12_56-1024x447.png)
APIキーが表示されます。
この画面でしかコピーできず、再度表示することができませんので注意してください。
![View API keys](https://chigusa-web.com/wp-content/uploads/2023/03/2023-03-12_17h14_51-500x243.png)
Djangoプロジェクトの作成
以下のコマンドで、Djangoプロジェクトを作成します。
最後にドットを付けて、同じ階層にプロジェクトファイルを作成します。
$ django-admin startproject chatGptApp .
アプリ追加と設定
追加
以下のコマンドで、Djangoプロジェクトにアプリを追加します。
$ python manage.py startapp chat
URLの追加
チャット画面を表示するためのURLを追加します。
まずはビューに、適当な文字を返却する処理を実装します。
from django.shortcuts import render
from django.http import HttpResponse
# Create your views here.
def index(request):
"""
チャット画面
"""
return HttpResponse("ChatGPT")
アプリのURLを定義するファイルを作成します。
from django.urls import path
from . import views
app_name = "chat"
urlpatterns = [
path("", views.index, name="index"),
]
サイトのurls.pyに追加します。
パスは任意で指定していただければと思いますが、「chat/」としました。
from django.contrib import admin
from django.urls import include, path
urlpatterns = [
path('chat/', include('chat.urls')),
path('admin/', admin.site.urls),
]
設定の修正
サイトのsettings.pyに、アプリを追加します。
INSTALLED_APPS = [
'chat.apps.ChatConfig',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
起動
この時点で動作確認をしましょう。
以下のコマンドでサーバーを起動します。
$ python manage.py runserver
以下のURLにアクセスします。
http://localhost:8000/chat/
「ChatGPT」と表示されたらOKです。
![](https://chigusa-web.com/wp-content/uploads/2023/03/2023-03-12_21h32_06.png)
チャット画面の作成
フォームの作成
画面からフォームのパラメータを受け取るためのクラスを作成します。
チャットの文章を入力するためのテキストエリアを用意しました。
from django import forms
class ChatForm(forms.Form):
sentence = forms.CharField(label='チャット', widget=forms.Textarea(), required=True)
チャットをするための画面のテンプレートファイルを作成します。
<html>
<head>
<meta charset='utf-8' />
</head>
<body>
<form method="POST">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">ChatGPT</button>
</form>
</body>
</html>
ビューを修正します。
テンプレートをレンダリングするように修正します。
from django.http import HttpResponse
from django.template import loader
from .forms import ChatForm
# Create your views here.
def index(request):
"""
チャット画面
"""
form = ChatForm()
template = loader.get_template('chat/index.html')
context = {
'form': form
}
return HttpResponse(template.render(context, request))
以下のURLにアクセスします。
http://localhost:8000/chat/
チャットするための画面が表示されました。
![ChatGPT API 連携画面](https://chigusa-web.com/wp-content/uploads/2023/03/2023-03-12_21h36_43-500x312.png)
フォームクラスの方で定義したテキストエリアが表示されます。
必須入力としたため、入力せずにChatGPTボタンを押下すると、エラーが表示されます。
![ChatGPT API 連携画面](https://chigusa-web.com/wp-content/uploads/2023/03/2023-03-12_21h37_35-500x314.png)
ChatGPTボタン押下時の実装
ビューを修正し、ChatGPTボタン押下時の処理を実装します。(POST時)
リクエストをフォームに格納し、バリデーションを行います。
バリデーション結果に問題がなければ、ChatGPTの処理を行う想定です。
from django.http import HttpResponse
from django.template import loader
from .forms import ChatForm
# Create your views here.
def index(request):
"""
チャット画面
"""
if request.method == "POST":
form = ChatForm(request.POST)
if form.is_valid():
# TODO: ChatGPT処理
pass
else:
form = ChatForm()
template = loader.get_template('chat/index.html')
context = {
'form': form
}
return HttpResponse(template.render(context, request))
ChatGPT API処理の実装
ライブラリのインストール
Djangoアプリケーションが動作しているPython環境に、ChatGPTのライブラリをインストールします。
今回はVS Codeを使い、Dockerコンテナで作業していますので、以下のファイルを修正します。
一番最後の行を追記します。
FROM python:3
ENV PYTHONUNBUFFERED 1
RUN pip install django
RUN pip install openai
F1キーをクリックし、コンテナをリビルドします。(Dev Containers: Rebuild Container)
![Dev Containers Rebuild Container](https://chigusa-web.com/wp-content/uploads/2023/04/2023-04-01_18h47_19.png)
実装
ビューを修正し、ChatGPT APIの処理を実装します。
結果を受け取る変数(chat_results)を用意し、処理を行います。
APIキーについては、各自の値を指定してください。
from django.http import HttpResponse
from django.template import loader
from .forms import ChatForm
import openai
# Create your views here.
def index(request):
"""
チャット画面
"""
# 応答結果
chat_results = ""
if request.method == "POST":
# ChatGPTボタン押下時
form = ChatForm(request.POST)
if form.is_valid():
sentence = form.cleaned_data['sentence']
# TODO: APIキーのハードコーディングは避ける
openai.api_key = "APIキー"
# ChatGPT
response = openai.ChatCompletion.create(
model="gpt-3.5-turbo",
messages=[
{
"role": "system",
"content": "日本語で応答してください"
},
{
"role": "user",
"content": sentence
},
],
)
chat_results = response["choices"][0]["message"]["content"]
else:
form = ChatForm()
template = loader.get_template('chat/index.html')
context = {
'form': form,
'chat_results': chat_results
}
return HttpResponse(template.render(context, request))
APIキーなど機密情報の管理については、以下の記事にまとめました。
結果を出力するために、テンプレートファイルを修正します。
<html>
<head>
<meta charset='utf-8' />
</head>
<body>
<form method="POST">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">ChatGPT</button>
</form>
{{ chat_results }}
</body>
</html>
動作確認
これで完成です。
テキストを入力して、ChatGPTボタンをクリックすると、応答結果が表示されます。
![ChatGPT API 連携アプリ](https://chigusa-web.com/wp-content/uploads/2023/03/2023-03-12_22h11_00-1024x556.png)
補足
本格的に利用するには、もう少し処理の実装が必要です。
例えば、ChatGPTの特徴である会話を成り立たせることもAPIでは可能ですが、APIを呼び出す際に応答結果を含める必要があります。
また、応答までの時間がまずまず掛かりますので、例えば非同期通信でローディングを表示するといった対応も必要かもしれません。
今回はあくまでもChatGPTのAPIについての実装がメインですが、本格的に利用する場合は検討してみてください。
デザイン調整
デザインの調整に関しては、別なアプリですが以下の記事を参考にしてください。
![bootstrap](https://chigusa-web.com/wp-content/uploads/2022/03/2022-03-06_15h48_42-500x374.png)
その他
外部サーバーへ公開
作成したアプリは公開して使ってもらいましょう!
Djangoアプリケーションを外部公開する方法をまとめました。
脆弱性対策
脆弱性を抱えたアプリケーションの場合、攻撃を受ける可能性があり大変危険です。
作成したアプリケーションは、脆弱性対策も意識しましょう。
GitHubと連携
GitHubと連携する方法を解説しました。
プロジェクトの管理はGitHubを活用しましょう。
GitHub Copilot
GitHub Copilotを導入し、AIにコーディングをサポートしてもらうこともできます。
AIサービス
他にもAIの便利なサービスがあります。
ChatPDFについては、以下の記事を参考にしてください。
AIにアプリを作ってもらえる、GPTAppです。
WebChatGPTでWebの情報を回答してもらうことができます。
さいごに
今回はChatGPTのAPIを利用して、Webアプリケーションを作成してみました。
ぜひ試してみてくださいね。
他にも私のブログで、ChatGPTについて解説している記事がありますのでご覧ください。
コメント