1.下载相关模块
1.1下载openai模块
pip install openai
1.2 下载rest_framework模块
pip install djangorestframework
关于django中的restframework模块,想了解的话我可以再出一篇文章。评论区见嘻嘻嘻
1.3导入模块
from rest_framework.response import Response
from rest_framework.views import APIView
from openai import OpenAI
2.关于django代码的编写
2.1以下是在你的views.py文件里面写的哈
class ChatbotView(APIView):
def post(self, request):
user_input = request.data.get('message')
api_key = 'YOUR_API_KEY'
client = OpenAI(api_key=api_key)
completion = client.chat.completions.create(
model="gpt-3.5-turbo",
messages=[
{"role": "system", "content": "You are a helpful assistant."},
{"role": "user", "content": user_input}
]
)
ai_response = completion.choices[0].message.content
return Response({'message': ai_response})
2.2以下是你在你的urls.py文件里写的哈,相信导入views.py文件大家都会吧,打比方说我是在A01文件夹中的views.py里面写的2.1的代码,我要导入的话我就在urls.py里面from A01.views import ChatbotView
path('chatbotview', ChatbotView.as_view(), name='chatbotview')
这样django里面的代码就结束拉。
3.关于vue代码的编写
我就直接放图了啊
<template>
<div>
<h1>Chat with the AI Assistant</h1>
<div id="chat-container">
<p v-for="(message, index) in messages" :key="index">{{ message }}</p>
</div>
<input v-model="userInput" type="text" placeholder="Type your message here...">
<button @click="sendMessage">Send</button>
</div>
</template>
<script>
import { chatbotview } from '../../request/request.js';
export default {
data() {
return {
userInput: '',
messages: []
};
},
methods: {
sendMessage() {
this.messages.push('You: ' + this.userInput);
this.fetchResponse();
this.userInput = '';
},
async fetchResponse() {
const data = {
'message': this.userInput
};
this.chatbotview(data);
},
chatbotview(data) {
chatbotview(data).then(res => {
this.messages.push('AI Assistant: ' + res.data.message);
});
}
}
};
</script>
这里的chatbotview函数我写在了request.js里面
export const chatbotview = (data) =>{
return api.post('/chatbotview',data)
}
data是啥都懂吧各位,毕竟是post请求撒,我要把我要问的东西传过去嘛。其它的如果有不懂的话欢迎在评论区留言哈。
3.存在的一些问题
如果各位存在跨域的问题的话,前端后端都可以解决,一般本地我用django解决很快。
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'corsheaders', !!!!!!!!!!!!!!!!
'APP01.apps.App01Config'
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'corsheaders.middleware.CorsMiddleware', !!!!!!!!!!!
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
我写感叹号的地方就是要添加的东西,要记住这两个必须加到你自己添加的东西上面,才能起作用。
关于corsheaders我们可以通过pip下载
pip install corsheaders
4.结果展示
结果我就直接展示图片了哈,没有调样式,过几天我把他美化了之后,我在写一个美化的教程出来,嘿嘿嘿。