详细介绍如何在Python的Django框架中集成chatgpt
  • 后端
  • 2023-11-19 21:05:52
  • 30020 阅读

学习更多专业ChatGPT知识,点此查看: ChatGTP专题合辑

将ChatGPT集成到Django应用程序中,可以让您创建动态和交互式的聊天界面。通过按照本文中概述的步骤,您可以在Django项目中实现ChatGPT,并为用户提供引人入胜的对话体验。尝试不同的提示,改进用户界面,并探索更多可能性,以增强您的聊天应用程序的功能。

在Django应用中实现ChatGPT的步骤使用API

将ChatGPT集成到Django Web应用程序中,可以构建交互式的聊天界面,并为用户提供动态的对话体验。让我们简要了解整个步骤:

  1. 设置Django项目。

  2. 定义一个处理聊天功能的Django视图。

  3. 配置Django的URL路由,将聊天视图连接到特定的URL模式。

  4. 设计用户界面。

  5. 测试和运行应用程序。

在Django应用程序中实现ChatGPT

基本设置

使用pip安装Django,并创建一个新的Django项目。在setting.py中进行更改,将您的模板文件夹在TEMPLATES中进行配置。

目录结构:

views.py:创建聊天视图

代码由两个函数组成:query_view和get_completion。

query_view是一个视图函数,处理发送到关联端点的HTTP请求。当收到POST请求时,它从请求数据中提取提示,调用get_completion函数生成基于提示的完成,并将完成作为JSON响应返回。对于GET请求,它呈现“index.html”模板。

get_completion是一个负责使用OpenAI API基于给定提示生成完成的函数。它向OpenAI API的完成端点发送请求,指定提示、最大标记、引擎、温度和其他参数。它从API响应中检索生成的完成,并将其作为函数的输出返回。

from django.shortcuts import render
from django.http import JsonResponse
import openai
openai.api_key = 'YOUR_API_KEY'
def get_completion(prompt):
    print(prompt)
    query = openai.Completion.create(
        engine="text-davinci-003",
        prompt=prompt,
        max_tokens=1024,
        n=1,
        stop=None,
        temperature=0.5,
    )
    response = query.choices[0].text
    print(response)
    return response
def query_view(request):
    if request.method == 'POST':
        prompt = request.POST.get('prompt')
        response = get_completion(prompt)
        return JsonResponse({'response': response})
    return render(request, 'index.html')

urls.py:设置URL

这段代码设置了两个URL模式:一个用于管理站点,另一个用于根URL,还有一个与视图模块中的query_view函数关联的URL模式。

from django.contrib import admin  
from django.urls import path  
from . import views  
  
urlpatterns = [  
    path('admin/', admin.site.urls),  
    path('', views.query_view, name='query'),  
]

template/index.py:创建用户界面

使用HTML、CSS和Bootstrap创建一个聊天界面的HTML模板,并设置必要的JavaScript和AJAX代码来处理用户交互。

<!-- query.html -->
<html>
<head>
    <title>Query</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.0/dist/js.cookie.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css" integrity="sha384-b6lVK+yci+bfDmaY1u0zE8YYJt0TZxLEAFyYSLHId4xoVvsrQu3INevFKo+Xir8e" crossorigin="anonymous">
    <script>
        $(document).ready(function() {
            // Send the form on enter keypress and avoid if shift is pressed
            $('#prompt').keypress(function(event) {
                if (event.keyCode === 13 && !event.shiftKey) {
                    event.preventDefault();
                    $('form').submit();
                }
            });
            $('form').on('submit', function(event) {
                event.preventDefault();
            // get the CSRF token from the cookie
            var csrftoken = Cookies.get('csrftoken');
            // set the CSRF token in the AJAX headers
            $.ajaxSetup({
                headers: { 'X-CSRFToken': csrftoken }
            });
                // Get the prompt
                var prompt = $('#prompt').val();
                var dateTime = new Date();
                var time = dateTime.toLocaleTimeString();
                // Add the prompt to the response div
                $('#response').append('<p>('+ time + ') <i class="bi bi-person"></i>: ' + prompt + '</p>');
                // Clear the prompt
                $('#prompt').val('');
                $.ajax({
                    url: '/',
                    type: 'POST',
                    data: {prompt: prompt},
                    dataType: 'json',
                    success: function(data) {
                        $('#response').append('<p>('+ time + ') <i class="bi bi-robot"></i>: ' + data.response + '</p>');
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div class="container p-3">
        <h3>ChatGPT Clone</h3>
        <div class="mb-3">
            <form method="post">
                {% csrf_token %}
                <label for="prompt" class="form-label"><strong>Prompt: </strong></label>
                <textarea class="form-control" type="textarea" id="prompt" name="prompt" rows="3"></textarea>
                <br>
                <button class="btn btn-primary" type="submit">Submit</button>
            </form>
        </div>
        <br>
        <div class="mb-3">
            <h6>Response:</h6>
            <div class="container border overflow-auto h-50" id="response"></div>
        </div>
    </div>
</body>
</html>