Django はシンプルな GPT Web サイトを構築します

ここに画像の説明を挿入

記事ディレクトリ

環境のインストール

pip install django openai

メインプロジェクトとアプリケーションを作成する

プロジェクトの環境を整えたら、メインプロジェクトを作成し、クライアントで次のコマンドを実行します。

django-admin startproject webassistant

Django のドキュメントによると、django-admin は管理タスク用のコマンドラインユーティリティです。プロジェクトフォルダーに切り替えて、次のコマンドを使用します。

cd webassistant

アプリケーションアシスタントを作成するには、次のコマンドを実行します。

python manage.py startapp assistant

ここまでで、次のようなフォルダ構造になっているはずです:
ここに画像の説明を挿入
ターミナルで次のコマンドを実行して、Django が正常にインストールされたことをテストして、このセクションを終了しましょう:

python manage.py runserver

上記のコマンドは、Django ローカルサーバーを起動するために使用されます。サーバーが正常に動作する場合は、URL アドレス http://127.0.0.1:8000/ をコピーして、Web ブラウザーに貼り付けてください。ブラウザに次の結果が表示されることを確認してください:
ここに画像の説明を挿入
Django のインストールおめでとうございます!

アプリケーションを settings.py ファイルに登録します

Django では、プロジェクト内に任意の数のアプリケーションを作成できますが、各プロジェクトを登録する必要があります。Django では、すべてのアプリケーションは、プロジェクトフォルダーにある settings.py というファイルに登録されます。
ここに画像の説明を挿入

このファイルは、プロジェクトのすべての構成を担当します。1 行の乱雑なコードがプロジェクト全体を壊す可能性があるため、編集するときは注意してください。それを開いてリスト INSTALLED_APPS まで下にスクロールし、次のようにアシスタントアプリケーションを追加します。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # 注册APP
    'assistant',
]

views.py ファイルでアプリケーションのビューを作成します

Django では、views.py ファイルが重要な役割を果たし、フォームデータのキャプチャと検証、ユーザーの認証、API へのリクエストの送信など、アプリケーションのすべてのビジネスロジックを処理します。ファイル views.py は、アプリケーションのフォルダー内にあります。
ここに画像の説明を挿入

このアプリケーションには、home() と error_handler() の 2 つのビューがあり、views.py ファイルを開いて次のようにします。

from django.shortcuts import render
# import HttpResponse from django.urls
from django.http import HttpResponse


# this is the home view for handling home page logic
def home(request):
    return HttpResponse('The Home Page')


# this is the view for handling errors
def error_handler(request):
    return HttpResponse('404 Page')

コードスニペットには、両方とも文字列を応答として返す 2 つの関数があります。これは、文字列を入力として受け取る HttpResponse() 関数を使用して行われます。

アプリケーションの URL を構成する

ビューの準備ができたので、URL を登録しましょう。フォルダ内の urls.py は、assistant というファイルを作成します。Django が行う方法なので、他の名前は付けないでください。
ここに画像の説明を挿入
このファイル urls.py の主な目的は、views.py ファイルにビューを登録し、それを開いて貼り付けることです。このコード:

# here we are import path from in-built django-urls
from django.urls import path
# here we are importing all the Views from the views.py file
from . import views

# a list of all the urls
urlpatterns = [
    path('', views.home, name='home'),
    path('new_chat/', views.new_chat, name='new_chat'),
    path('error-handler/', views.error_handler, name='error_handler'),
]

ここで、これらの新しく作成された URL を登録して、プロジェクトが認識できるようにする必要があります。webassistant フォルダー内には、urls.py ファイルもあります。
ここに画像の説明を挿入

ここで、アプリの urls.py ファイルがプロジェクトの urls.py ファイルと同じではないことに注意してください。アシスタントフォルダー内のファイル urls.py は、すべてのアプリケーションのビューを登録するために使用され、ファイル urls.py フォルダー内のファイル webassistant は、すべてのアプリケーションの URL を登録するために使用されます。開くと、次のようになります。

from django.contrib import admin
from django.urls import path, include

# a list of all the projects urls
urlpatterns = [
    # the url to the admin site
    path('admin/', admin.site.urls),
    # registering all the assistant application urls
    path('', include('assistant.urls')),
]

コードには、管理サイト用とアプリケーション用の 2 つのパスを含む urlpatterns リストがあります。アプリケーション URL を登録するには、文字列をパス名として受け取る path() 関数と、すべてのアプリケーション URL を入力として受け取る include() 関数を使用します。

テンプレートの作成とレンダリング

このセクションでは、テンプレートを作成してレンダリングします。HTML とスタイリングを使用し、Bootstrap 5.3 フレームワークを使用します。アシスタントフォルダー内に、templates という名前の新しいフォルダーを作成します。スペルを間違えないでください。Django がそうしているためです。そうしないと、エラーが発生します。そのテンプレートフォルダー内に、すべてのテンプレートが配置される Assistant という別のフォルダーを作成します。

このアプリケーションには、次のように、home.html、404.html、および base.html の 3 つのテンプレートがあります。
ここに画像の説明を挿入
base.html テンプレートから始めて、それを開いて、次のコードを貼り付けます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Assistant | {
    
    % block title %}  {
    
    % endblock %}</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    {
    
    % block content %}
    {
    
    % endblock %}
</body>
</html>

リンク経由で Bootstrap5.3 CSS を追加した HTML 定型文です。

home.html:

{
    
    % extends 'assistant/base.html' %}
{
    
    % block title %} Home {
    
    % endblock %}
{
    
    % block content %}
<div class="row justify-content-center my-4">
    <div class="col-md-7 mt-4">
        <div class="card">
            <h1 class="card-header text-center">A.I WEB ASSISTANT</h1>
            <div class="card-body">
              <div class="d-flex justify-content-end">
                <button type="button" class="btn btn-primary mb-3" onclick="location.href='{% url 'new_chat' %}'">New Chat +</button>
              </div>
              <div class="chat-history mb-3">
                {
    
    % for message in messages %}
                  <div class="card mb-2 {% if message.role == 'assistant' %}bg-success text-white{% endif %}">
                    <div class="card-body p-2">
                      <strong>{
    
    {
    
     message.role|title }}:</strong> {
    
    {
    
     message.content|linebreaksbr }}
                    </div>
                  </div>
                {
    
    % endfor %}
              </div>
              <form action="." method="POST">
                <!-- this secures the form from malicious attacks during submission -->
                {
    
    % csrf_token %}
                <input class="form-control mb-2" required type="text" autofocus="autofocus" name="prompt" value="{
    
    { prompt }}" id="">
                <label for="temperature" class="form-label">Temperature:</label>
                <input class="form-control mb-2" type="number" step="0.01" min="0" max="2" name="temperature" value="{
    
    { temperature }}" id="temperature">
                <button class="btn btn-success fw-bold" type="submit">
                     GENERATE
                </button>
              </form>
            </div>
        </div>
    </div>
</div>
{
    
    % endblock %}

404.html

{
    
    % extends 'assistant/base.html' %}
{
    
    % block title %} 404 {
    
    % endblock %}
{
    
    % block content %}
<div class="row justify-content-center my-4">
    <div class="col-md-7 mt-4">
        <h1>Page Not Found</h1>
        <p>Make sure you are connected to the internet or your query is correct</p>
        <a href="{% url 'home' %}" class="btn btn-secondary">Go Home</a>
    </div>
</div>
{
    
    % endblock %}

views.py ファイルのコードは次のとおりです。

from django.shortcuts import render

# this is the home view for handling home page logic
def home(request):
    return render(request, 'assistant/home.html')

# this is the view for handling errors
def error_handler(request):
    return render(request, 'assistant/404.html')

鍵

ここに画像の説明を挿入
secret_key.py の KEY を入力するファイルを作成します。

API_KEY = 'put your API key here'

送信リマインダー機能を実現

Web アシスタントのインターフェースを設計し、API キーを正常に生成したので、この API を Django アプリケーションと統合しましょう。views.py ファイルを開き、次のようにします。

# 导入 render 和 redirect
from django.shortcuts import render, redirect
# 导入 openai API
import openai
# 从 secret_key 文件导入生成的 API 密钥
from .secret_key import API_KEY
# 从 secret_key 文件加载 API 密钥
openai.api_key = API_KEY

# 这是处理主页逻辑的主页视图
def home(request):
    try:
        # 如果会话中没有包含 messages 键，则创建一个
        if 'messages' not in request.session:
            request.session['messages'] = [
                {
    
    "role": "系统", "content": "您现在正在与用户聊天，为他们提供全面、简短和简洁的答案."},
            ]

        if request.method == 'POST':
            # 从表单获取提示
            prompt = request.POST.get('prompt')
            # 从表单获取温度
            temperature = float(request.POST.get('temperature', 0.1))
            # 将提示添加到 messages 列表
            request.session['messages'].append({
    
    "role": "user", "content": prompt})
            # 将会话设置为已修改
            request.session.modified = True
            # 调用 openai API
            response = openai.ChatCompletion.create(
                model="gpt-3.5-turbo",
                messages=request.session['messages'],
                temperature=temperature,
                max_tokens=1000,
            )
            # 格式化响应
            formatted_response = response['choices'][0]['message']['content']
            # 将响应添加到 messages 列表
            request.session['messages'].append({
    
    "role": "assistant", "content": formatted_response})
            request.session.modified = True
            # 重定向到主页
            context = {
    
    
                'messages': request.session['messages'],
                'prompt': '',
                'temperature': temperature,
            }
            return render(request, 'assistant/home.html', context)
        else:
            # 如果请求不是 POST 请求，渲染主页
            context = {
    
    
                'messages': request.session['messages'],
                'prompt': '',
                'temperature': 0.1,
            }
            return render(request, 'assistant/home.html', context)
    except Exception as e:
        print(e)
        # 如果有错误，重定向到错误处理器
        return redirect('error_handler')

def new_chat(request):
    # 清除 messages 列表
    request.session.pop('messages', None)
    return redirect('home')

# 这是处理错误的视图
def error_handler(request):
    return render(request, 'assistant/404.html')

予防

リクエストは公式インターフェースなので、マジックをオンにする必要があります。

我的工具箱：https://openai.nm.cn/

完全なソースコード

gong 众 号：川川带你学AI
回复：230422