自分だけのクイズを作成しよう - Quipha
スポンサーリンク

【Django】ChatGPT APIを使って連携

【Django】ChatGPT APIを使って連携 AI

当サイトではアフィリエイト広告を利用しています。

スポンサーリンク

はじめに

今回は、ChatGPTのAPIを利用してWebアプリケーションを作成します。
PythonとDjangoで実装します。

自分で作成したアプリから、ChatGPTの機能が呼び出せるとアイディア次第では便利ですね!

Djangoの環境とプロジェクトの作成方法は以下をご覧ください。

使用するバージョン
  • Windows 11 / 10
  • macOS Monterey (M1)
  • Python 3.11.2
  • Django 4.1.7

WindowsでもMacでも同様に作成できます。

余談ですが、Laravel向けに解説した記事もございますので参考にしてください。

他にも私のブログで、ChatGPTについて解説している記事がありますのでご覧ください。

ChatGPTについて

ChatGPTは、OpenAIによって開発された大規模な自然言語処理モデルです。

ChatGPTについては以下の記事もご覧ください。

また、有料プランもあります。
以下の記事も参考にしてください。

VS Codeインストール

VS Codeのインストール方法は、以下の記事にまとめましたのでご覧ください。

VS Codeのオススメ設定や拡張機能などは、以下の記事にまとめました。

ChatGPTのAPIキーの取得

ChatGPTのAPIを利用するためには、アカウントを作成し、APIキーを取得する必要があります。

アカウントの作成方法は以下の記事を参考にしてください。

APIの登録方法については以下の記事を参考にしてください。

APIキーの利用には料金がかかります。詳しくはOpenAIのサイトをご確認ください。

ログインした状態で、以下のサイトにアクセスします。

platform.openai.com

右上のメニューから、「View API keys」をクリックします。

OpenAI View API keys

「Create new secret key」をクリックし、APIキーを作成します。

ChatGPT Create new secret key

APIキーが表示されます。
この画面でしかコピーできず、再度表示することができませんので注意してください。

View API keys

APIキーは絶対に他人に知られないようにしましょう。

Djangoプロジェクトの作成

以下のコマンドで、Djangoプロジェクトを作成します。
最後にドットを付けて、同じ階層にプロジェクトファイルを作成します。

$ django-admin startproject chatGptApp .

「chatGptApp」はプロジェクト名ですので、任意で指定してください。

アプリ追加と設定

追加

以下のコマンドで、Djangoプロジェクトにアプリを追加します。

$ python manage.py startapp chat

URLの追加

チャット画面を表示するためのURLを追加します。
まずはビューに、適当な文字を返却する処理を実装します。

chat/views.py
from django.shortcuts import render
from django.http import HttpResponse

# Create your views here.


def index(request):
    """
    チャット画面
    """
    return HttpResponse("ChatGPT")

アプリのURLを定義するファイルを作成します。

chat/urls.py
from django.urls import path
from . import views

app_name = "chat"
urlpatterns = [
    path("", views.index, name="index"),
]

サイトのurls.pyに追加します。
パスは任意で指定していただければと思いますが、「chat/」としました

chatGptApp/settings.py
from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('chat/', include('chat.urls')),
    path('admin/', admin.site.urls),
]

設定の修正

サイトのsettings.pyに、アプリを追加します。

chatGptApp/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です。

スポンサーリンク

チャット画面の作成

フォームの作成

画面からフォームのパラメータを受け取るためのクラスを作成します。

チャットの文章を入力するためのテキストエリアを用意しました。

chat/forms.py
from django import forms

class ChatForm(forms.Form):

    sentence = forms.CharField(label='チャット', widget=forms.Textarea(), required=True)

チャットをするための画面のテンプレートファイルを作成します。

chat/templates/chat/index.html
<html>

<head>
    <meta charset='utf-8' />
</head>

<body>
    <form method="POST">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">ChatGPT</button>
    </form>
</body>

</html>

{{ form.as_p }}は、フォームクラスの入力項目を表示します。
{% csrf_token %}は、CSRFの対策です。

ビューを修正します。
テンプレートをレンダリングするように修正します。

chat/views.py
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 連携画面

デザインについては今回は気にしません。別記事で解説します。

フォームクラスの方で定義したテキストエリアが表示されます。
必須入力としたため、入力せずにChatGPTボタンを押下すると、エラーが表示されます。

ChatGPT API 連携画面

ChatGPTボタン押下時の実装

ビューを修正し、ChatGPTボタン押下時の処理を実装します。(POST時)
リクエストをフォームに格納し、バリデーションを行います。
バリデーション結果に問題がなければ、ChatGPTの処理を行う想定です。

chat/views.py
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コンテナで作業していますので、以下のファイルを修正します。

一番最後の行を追記します。

.devcontainer/Dockerfile
FROM python:3
ENV PYTHONUNBUFFERED 1
RUN pip install django

RUN pip install openai

F1キーをクリックし、コンテナをリビルドします。(Dev Containers: Rebuild Container)

Dev Containers Rebuild Container

実装

ビューを修正し、ChatGPT APIの処理を実装します。
結果を受け取る変数(chat_results)を用意し、処理を行います。
APIキーについては、各自の値を指定してください。

chat/views.py
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キーについては、ソース中にハードコーディングするのは避けるべきです。
別記事で解説しますが、リポジトリ管理しないファイルに定数を用意するなど、そういった対応が必要です。
誤ってAPIキーをGitHubなどに公開しないように注意が必要です。

APIキーなど機密情報の管理については、以下の記事にまとめました。

結果を出力するために、テンプレートファイルを修正します。

chat/templates/chat/index.html
<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 連携アプリ

補足

本格的に利用するには、もう少し処理の実装が必要です。
例えば、ChatGPTの特徴である会話を成り立たせることもAPIでは可能ですが、APIを呼び出す際に応答結果を含める必要があります。

また、応答までの時間がまずまず掛かりますので、例えば非同期通信でローディングを表示するといった対応も必要かもしれません。

今回はあくまでもChatGPTのAPIについての実装がメインですが、本格的に利用する場合は検討してみてください。

デザイン調整

デザインの調整に関しては、別なアプリですが以下の記事を参考にしてください。

bootstrap

その他

外部サーバーへ公開

作成したアプリは公開して使ってもらいましょう!
Djangoアプリケーションを外部公開する方法をまとめました。

脆弱性対策

脆弱性を抱えたアプリケーションの場合、攻撃を受ける可能性があり大変危険です。
作成したアプリケーションは、脆弱性対策も意識しましょう。

GitHubと連携

GitHubと連携する方法を解説しました。
プロジェクトの管理はGitHubを活用しましょう。

GitHub Copilot

GitHub Copilotを導入し、AIにコーディングをサポートしてもらうこともできます。

AIサービス

他にもAIの便利なサービスがあります。

ChatPDFについては、以下の記事を参考にしてください。

AIにアプリを作ってもらえる、GPTAppです。

WebChatGPTでWebの情報を回答してもらうことができます。

さいごに

今回はChatGPTのAPIを利用して、Webアプリケーションを作成してみました。
ぜひ試してみてくださいね。

他にも私のブログで、ChatGPTについて解説している記事がありますのでご覧ください。

\オススメ/

コメント