将 ChatGPT 集成到 Django 应用程序中,您可以创建动态且交互式的聊天界面。按照本文概述的步骤,您可以在Django项目中实现ChatGPT,并为用户提供引人入胜的对话体验。尝试不同的提示,改进用户界面,并探索更多可能性以增强聊天应用程序的功能。
使用 API 在 Django 应用程序中实现 ChatGPT 的步骤
将ChatGPT集成到 Django Web 应用程序中,您可以构建交互式聊天界面并为用户提供动态对话体验。如果您希望掌握此类集成并探索更高级的项目,Django Web 开发课程将逐步指导您。让我们总结一下总体步骤:
- 设置 Django 项目。
- 定义一个处理聊天功能的 Django 视图。
- 配置 Django 的 URL 路由以将聊天视图连接到特定的 URL 模式。
- 设计用户界面。
- 测试并运行应用程序。
在 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 的 Completion 端点发出请求,指定提示、最大令牌、引擎、温度和其他参数。它从 API 响应中检索生成的完成并将其作为函数的输出返回。
Python
1
来自 django .快捷方式 导入 render
2
从 django . http 导入 JsonResponse
3
导入 openai
4
5
openai . api_key = '您的 API 密钥'
6
7
def get_completion(提示):
8
打印(提示)
9
查询 = openai .完成.创建(
10
引擎= “text-davinci-003”,
11
提示=提示,
12
最大令牌数= 1024,
十三
n = 1 ,
14
停止=无,
15
温度= 0.5,
16
)
17
18
响应 = 查询.选择[ 0 ].文本
19
打印(响应)
20
返回 响应
21
22
23
def query_view(请求):
24
如果 请求.方法 == 'POST':
二十五
提示 = 请求.POST .获取( '提示' )
二十六
响应 = get_completion(提示)
二十七
返回 JsonResponse({ 'response':response })
二十八
返回 渲染(请求,'index.html')
urls.py:设置 URL
此代码设置了两个 URL 模式:一个用于管理站点,一个用于根 URL,还有一个与 views 模块中的 query_view 函数相关联。
Python
1
从 django . contrib 导入 admin
2
来自 django . urls 导入 路径
3
来自.导入 视图
4
5
6
urlpatterns = [
7
路径(' admin / ' ,admin.site.urls),
8
路径('',视图。query_view ,名称= 'query' ),
9
10
]
template/index.py:创建用户界面
使用 HTML、CSS 和 Bootstrap 为聊天界面创建 HTML 模板,并设置必要的 JavaScript 和 AJAX 代码来处理用户交互。
HTML
1
<!-- 查询.html -->
2
< HTML >
3
<头>
4
<标题>查询</标题>
5
<脚本 src = “https://code.jquery.com/jquery-3.6.0.min.js” ></脚本>
6
<脚本 src = “https://cdn.jsdelivr.net/npm/js-cookie@3.0.0/dist/js.cookie.min.js” ></脚本>
7
<脚本 src = “https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js” 完整性= “sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN” crossorigin = “匿名” ></脚本>
8
< link href = “https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css” rel = “样式表” 完整性= “sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD” crossorigin = “匿名” >
9
<链接 rel = “样式表” href = “https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css” 完整性= “sha384-b6lVK+yci+bfDmaY1u0zE8YYJt0TZxLEAFyYSLHId4xoVvsrQu3INevFKo+Xir8e” crossorigin = “匿名” >
10
<脚本>
11
$ ( document ) .ready (函数(){
12
// 按下 Enter 键时发送表单,按下 Shift 键时避免发送表单
十三
$ ( '#prompt' ). keypress (函数(事件){
14
如果(事件。keyCode === 13 && !事件。shiftKey ) {
15
事件.preventDefault ( );
16
$ ( '表格' ).提交();
17
}
18
});
19
$ ( 'form' ). on ( 'submit' , function ( event ) {
20
事件.preventDefault ( );
21
// 从 cookie 中获取 CSRF 令牌
22
var csrftoken = Cookie。获取('csrftoken');
23
24
// 在 AJAX 标头中设置 CSRF 令牌
二十五
$ .ajaxSetup ( {
二十六
标题:{ 'X-CSRFToken':csrftoken }
二十七
});
二十八
// 获取提示
二十九
var 提示符 = $ ( '#prompt' ).值();
三十
var dateTime = new Date ();
31
var 时间 = 日期时间。toLocaleTimeString ();
三十二
// 将提示添加到响应 div
33
$ ( '#response' ). append ( '<p>(' + time + ')<i class="bi bi-person"></i>:' + prompt + '</p>' );
三十四
// 清除提示
三十五
$ ( '#prompt' ). val ( '' );
三十六
$ .ajax ( {
三十七
网址:'/',
三十八
类型:'POST',
三十九
数据:{提示:提示},
40
数据类型:'json',
41
成功:功能(数据){
四十二
$ ( '#response' ). append ( '<p>(' + time + ') < i class="bi bi-robot"></i>:' + data.response + ' </p>' );
43
}
四十四
});
四十五
});
四十六
});
四十七
</脚本>
四十八
</头>
49
<正文>
50
< div class = “容器 p-3” >
51
< h3 > ChatGPT 克隆</ h3 >
52
< div 类= “mb-3” >
53
<表单 方法= “post” >
54
{% csrf_token %}
55
< label for = "prompt" class = " form- label " > <strong>提示:</strong> </label>
56
< textarea class = “form-control” 类型= “textarea” id = “prompt” name = “ prompt” 行= “3” > </textarea>
57
< br >
58
< button class = "btn btn-primary" type = "submit" >提交</ button >
59
</表单>
60
</ div >
61
< br >
62
< div 类= “mb-3” >
63
< h6 >响应:</ h6 >
64
< div class = “容器边框溢出自动 h-50” id = “响应” ></ div >
65
66
</ div >
67
</ div >
68
</正文>
69
</html>
输出:
※※免费获取 GPTGPT&Claude账号※※
本站提供免费ChatGPT共享账号,号池链接:
如果想使用低价稳定个人独立账号,可进入本站小店进行购买,全网最低价账号,全程售后保障,客服跟进
小店链接:https://store.aiprois.com
客服微信:youngchatgpt
本站官网:https://aiprois.com/
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
暂无评论内容