|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<title>Chatgpt</title>
|
|
|
<script type="text/javascript" language="javascript" src="js/MicrosoftAjax.js"></script>
|
|
|
<script src="js/jquery.1.9.1.min.js" type="text/javascript"></script>
|
|
|
<script type="text/javascript" src="js/Global.js"></script>
|
|
|
<!-- <link rel="stylesheet" href="./style.css"> -->
|
|
|
<script>
|
|
|
$(document).ready(function () {
|
|
|
ajaxInit(null);
|
|
|
$(document).keydown(function (event) {
|
|
|
if (event.keyCode == 13) {
|
|
|
GetMess();
|
|
|
//GetTest();
|
|
|
return false;
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
var kjindex = 0;
|
|
|
function GetMess() {
|
|
|
|
|
|
if ($("#txt_content").val() == "") {
|
|
|
|
|
|
// alert("Please enter your question content！");
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
var shtml = '<div class="chatbox__messages__user-message--ind-message"><div class="chatbox-triangle"></div><p class="name"><img src="cxy.png" width="25px" height="25px" /><span class="nameSpan">You:</span></p><p class="message">' + $("#txt_content").val() + '</p></div>';
|
|
|
$("#div_mess").append(shtml);
|
|
|
|
|
|
let obj = $("#div_mess")
|
|
|
|
|
|
obj.scrollTop(obj.prop("scrollHeight"));
|
|
|
var question = $("#txt_content").val();
|
|
|
$("#txt_content").val("");
|
|
|
$("#f_mess").show();
|
|
|
|
|
|
var param = new Object();
|
|
|
param.prompt = question;
|
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
//提交数据的类型 POST GET
|
|
|
type: "POST",
|
|
|
//提交的网址
|
|
|
url: "http://101.37.88.86:8007/api/GPT?msg=" + question,
|
|
|
//提交的数据
|
|
|
data: { msg: "" },
|
|
|
//返回数据的格式
|
|
|
datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
|
|
|
|
|
|
//成功返回之后调用的函数
|
|
|
success: function (data) {
|
|
|
$("#f_mess").hide();
|
|
|
if (data != null && data != "") {
|
|
|
kjindex++;
|
|
|
|
|
|
var shtml2 = '<div class="chatbox__messages__user-message--ind-message1"><div class="chatbox-triangle1"></div><p class="name"><img src="chatgptimg2.jpg" width="25px" height="25px"/><span class="nameSpan">Chatgpt:</span></p><p class="message" id="p_' + kjindex + '" ></p></div>';
|
|
|
$("#div_mess").append(shtml2);
|
|
|
|
|
|
var len = data.length;
|
|
|
var dd = data.split('');
|
|
|
var idx = 0;
|
|
|
var st = setInterval(function () {
|
|
|
if (idx < len) {
|
|
|
$("#p_" + kjindex).append(dd[idx]);
|
|
|
idx++;
|
|
|
}
|
|
|
else {
|
|
|
clearInterval(st);
|
|
|
}
|
|
|
}, 120);
|
|
|
|
|
|
let obj = $("#div_mess")
|
|
|
obj.scrollTop(obj.prop("scrollHeight") + 20);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
}</script>
|
|
|
</head>
|
|
|
<body>
|
|
|
<!-- partial:index.partial.html -->
|
|
|
<div class='container' ng-cloak ng-app="chatApp">
|
|
|
<h1>HZSoft Chatgpt</h1>
|
|
|
<div class='chatbox' ng-controller="MessageCtrl as chatMessage">
|
|
|
<div class="chatbox-head"></div>
|
|
|
<div class="chatbox-middle" id="div_mess">
|
|
|
<!--<div class="chatbox__messages__user-message--ind-message">
|
|
|
<div class="chatbox-triangle"></div>
|
|
|
<p class="name">
|
|
|
< img src="cxy.png" width="25px" height="25px">
|
|
|
|
|
|
<span class="nameSpan">You:</span>
|
|
|
</p >
|
|
|
<p class="message">
|
|
|
|
|
|
</p >
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="chatbox__messages__user-message--ind-message1">
|
|
|
<div class="chatbox-triangle1"></div>
|
|
|
<p class="name">
|
|
|
< img src="chatgptimg2.jpg" width="25px" height="25px">
|
|
|
|
|
|
<span class="nameSpan">Chatgpt:</span>
|
|
|
</p >
|
|
|
<p class="message">
|
|
|
</p >
|
|
|
</div>-->
|
|
|
</div>
|
|
|
<div class="chatbox-bottom">
|
|
|
</div>
|
|
|
<form>
|
|
|
<div style="height: 30px; font-size: 14px; padding-left: 10px; line-height: 30px;"><font color='red' id="f_mess" style="display:none">The robot is processing, please wait....</font></div>
|
|
|
<input type="text" id="txt_content" style="width: 90%; height: 35px; outline: none; font-weight: 300; color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.03); padding-left: 10px;" placeholder="Enter your message" />
|
|
|
</form>
|
|
|
</div>
|
|
|
<!-- partial -->
|
|
|
|
|
|
|
|
|
</body>
|
|
|
</html>
|
|
|
<style>
|
|
|
|
|
|
html, body {
|
|
|
background: linear-gradient(120deg, #17bebb, #f0a6ca);
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.container {
|
|
|
/* border: 1px solid red; */
|
|
|
width: 1000px;
|
|
|
height: 580px;
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
margin: -350px 0 0 -500px;
|
|
|
}
|
|
|
|
|
|
h1 {
|
|
|
text-align: center;
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
.chatbox {
|
|
|
width: 1000px;
|
|
|
height: 550px;
|
|
|
background: rgba(255, 255, 255, 0.05);
|
|
|
}
|
|
|
|
|
|
.chatbox-head {
|
|
|
height: 30px;
|
|
|
background: black;
|
|
|
}
|
|
|
|
|
|
.chatbox-middle {
|
|
|
width: 1000px;
|
|
|
height: 460px;
|
|
|
overflow-y: auto;
|
|
|
max-height: 460px;
|
|
|
}
|
|
|
|
|
|
::-webkit-scrollbar {
|
|
|
width: 8px;
|
|
|
}
|
|
|
|
|
|
.chatbox__messages__user-message--ind-message {
|
|
|
width: 65%;
|
|
|
border-radius: 5px;
|
|
|
background: rgba(255, 255, 255, 0.2);
|
|
|
position: relative;
|
|
|
/* border: 1px solid red; */
|
|
|
margin-left: 40px;
|
|
|
margin-top: 15px;
|
|
|
}
|
|
|
|
|
|
.chatbox__messages__user-message--ind-message1 {
|
|
|
width: 65%;
|
|
|
border-radius: 5px;
|
|
|
background: rgba(255, 255, 255, 0.2);
|
|
|
position: relative;
|
|
|
margin-left: 300px;
|
|
|
margin-top: 15px;
|
|
|
}
|
|
|
|
|
|
.name {
|
|
|
padding: 10px 20px;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
.nameSpan {
|
|
|
margin-left: 5px;
|
|
|
}
|
|
|
|
|
|
.message {
|
|
|
text-align: left;
|
|
|
color: gray;
|
|
|
padding: 0 10px 10px 10px;
|
|
|
white-space: pre-wrap;
|
|
|
}
|
|
|
|
|
|
.chatbox-triangle {
|
|
|
width: 0px;
|
|
|
height: 0px;
|
|
|
border: 20px solid;
|
|
|
border-color: transparent rgba(255, 255, 255, 0.2) transparent transparent;
|
|
|
position: absolute;
|
|
|
left: -40px;
|
|
|
top: 25%;
|
|
|
}
|
|
|
|
|
|
.chatbox-triangle1 {
|
|
|
width: 0px;
|
|
|
height: 0px;
|
|
|
border: 20px solid;
|
|
|
border-color: transparent transparent transparent rgba(255, 255, 255, 0.2);
|
|
|
position: absolute;
|
|
|
right: -40px;
|
|
|
top: 25%;
|
|
|
}
|
|
|
</style> |
