Step1.申请密钥
Step2.创建Python接口
from django.shortcuts import render,HttpResponse as resp
import json
import openai
# Create your views here.
def chat_with_ai(req):
uwords = req.POST.get("uwords")
if not uwords:
return resp("Oops! eeeerrrrrorrrrrr~")
openai.api_key = "这里填写Step1里面申请到的密钥"
model_engine = "text-davinci-003"
prompt = uwords
completions = openai.Completion.create(
engine=model_engine,
prompt=prompt,
max_tokens=2048,
n=1,
stop=None,
temperature=0.7,
)
message = completions.choices[0].text
return resp(message)
Step3.测试接口
Step4.前端页面连接接口:
Step4源码:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1,maximum-scale=1.0,user-scalable=0 ">
<meta charset="utf-8"/>
<title>untitled</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.xchat {
position: fixed;
z-index: 9999999;
/* right: 20px; */
bottom: 0;
top: 10vh;
left: 5vw;
width: 90vw;
height: 80vh;
background: rgb(252, 252, 252);
box-shadow: rgba(0, 0, 0, 0.16) 0px 5px 40px;
border-radius: 5px;
overflow: hidden;
}
.xtop {
width: 100%;
height: 60px;
background: rgb(13, 175, 144);
box-sizing: border-box;
padding: 10px;
}
.xlogo {
float: left;
width: 40px;
height: 40px;
border-radius: 50%;
}
.xsname {
float: left;
height: 40px;
font-size: 14px;
color: white;
line-height: 40px;
margin-left: 10px;
}
.xclose {
float: right;
width: 14px;
margin: 20px 10px 0 0;
cursor: pointer;
}
.xmid {
width: 100%;
height: 320px;
box-sizing: border-box;
padding: 10px;
overflow-y: auto;
}
.xmsg {
max-width: calc(100% - 50px);
height: auto;
overflow: hidden;
margin: 0 0 10px 0;
}
.xmid > div {
overflow: hidden;
}
.xfrom {
width: 100%;
height: 16px;
line-height: 16px;
font-size: 12px;
color: rgb(178, 178, 178);
margin: 0 0 3px 0;
}
.xmessage {
display: inline-block;
max-width: 100%;
height: auto;
border: 1px solid lightgray;
border-radius: 3px;
padding: 10px;
box-sizing: border-box;
font-size: 13px;
text-align: justify !important;
word-break: break-all;
line-height: 22px;
}
.xa > .xmessage {
color: #333;
background: white;
}
.xa {
float: left;
}
.xb {
float: right;
text-align: right;
}
.xb > p {
text-align: right;
}
.xb > .xmessage {
color: white;
background: rgb(13, 175, 144);
}
.xbottom {
width: 100%;
height: 98px;
box-sizing: border-box;
border-top: 1px solid #eee;
}
.xsendmsg {
width: 100%;
height: 58px;
box-sizing: border-box;
outline: none;
resize: none;
padding: 10px;
border: none;
/*background: white;*/
background: rgb(252, 252, 252);
font-size: 13px;
font-family: auto;
color: #333;
}
.xgsend {
width: 100%;
height: 40px;
background-color: transparent;
box-sizing: border-box;
padding: 4px 10PX;
}
.xsend {
float: right;
width: 60px;
height: 32px;
line-height: 32px;
display: inline-block;
vertical-align: middle;
font-size: 13px;
cursor: pointer;
text-align: center;
opacity: 1;
color: white;
border-width: 0px;
border-style: initial;
border-color: initial;
border-image: initial;
outline: none;
border-radius: 3px;
text-decoration: none;
background: rgb(13, 175, 144);
}
.startchat {
width: 62px;
height: 62px;
border: none;
display: none;
border-radius: 50%;
background: rgb(13, 175, 144);
outline: none;
cursor: pointer;
position: fixed;
right: 120px;
bottom: 100px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 5px 14px;
}
.startchaticon {
width: 24px;
transform: translateY(2px);
}
</style>
</head>
<body>
<div class="xchat">
<div class="xtop">
<img class="xlogo"
>
<p class="xsname">CHATGPT BY 诚筑说</p>
<img class="xclose" style="display: none;"
>
</div>
<div class="xmid"></div>
<div class="xbottom">
<textarea rows="3" class="xsendmsg" placeholder="请输入"></textarea>
<div class="xgsend">
<button type="button" class="xsend">发送</button>
</div>
</div>
</div>
<button type="button" class="startchat">
<img class="startchaticon">
</button>
</body>
<script src="https://zhuzuoji.com/public/static/js/jquery.min.js"
type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function () {
$(".xsendmsg").focus(function () {
$(this).attr("placeholder", "")
}).blur(function () {
$(this).attr("placeholder", "请输入")
})
renderMessages("Ask me abt what u want to...", "xa");
function renderMessages(omsg, xcls, type) {
var odate = new Date();
var $ele = $('<div class="xmsg ' + xcls + '">' +
'<p class="xmessage">' + omsg + '</p>' +
'</div>');
var $pa;
if (xcls == 'xa') {
$pa = $('<p class="xfrom">AI ' + odate.toLocaleString('en-US', {
hour: 'numeric',
minute: 'numeric',
hour12: true
}) + '</p>');
} else {
$pa = $('<p class="xfrom">' + odate.toLocaleString('en-US', {
hour: 'numeric',
minute: 'numeric',
hour12: true
}) + '</p>');
}
$ele.prepend($pa);
var $div = $('<div></div>');
$div.append($ele);
$(".xmid").append($div).scrollTop(999999);
}
$('.xsendmsg').keyup(function (event) {
var e = event.keyCode || event.which;
// console.log(e);
if (e === 13) {
$('.xsend').click();
}
;
})
$('.xsend').click(function sendChat() {
var cont = $('.xsendmsg').val();
if (cont.replace(/ /g, '').length > 0) {
// var obj = {
// type: 'normal',
// guid: guid,
// msg: cont,
// role: 'client'
// };
//
// ws.send(JSON.stringify(obj));
$('.xsendmsg').val('');
renderMessages(cont, 'xb', 'send');
$.ajax({
url:'这里填写Step3里的接口地址',
data:{uwords:cont},
type:'post',
success:function (result) {
console.log(result);
result = result.replaceAll('\n','<br/>');
result = result.replaceAll('<br/><br/>','<br/>');
result = result.replace('<br/>','');
result = result.replaceAll(' ',' ');
renderMessages(result, 'xa', 'send');
}
})
} else {
alert('不可发送空白内容哦!');
}
})
}
</script>
</html>
