mirror of
https://github.com/Kakune55/PyGetGPT.git
synced 2025-05-06 18:29:24 +08:00
271 lines
11 KiB
Python
271 lines
11 KiB
Python
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>KakuAI</title>
|
||
<link rel="stylesheet" type="text/css" href="../static/popup.css">
|
||
<link rel="stylesheet" type="text/css" href="../static/index.css">
|
||
<link rel="stylesheet" type="text/css" href="../static/loading.css">
|
||
</head>
|
||
|
||
<body onload="init()">
|
||
<div id="loading" class="loading">
|
||
<div class="typewriter">
|
||
<div class="slide"><i></i></div>
|
||
<div class="paper"></div>
|
||
<div class="keyboard"></div>
|
||
</div>
|
||
</div>
|
||
<!--全局遮罩-->
|
||
<div id="global-blur"></div>
|
||
<!-- 通知框容器 -->
|
||
<div id="notification" class="notification">
|
||
<!-- 通知框内容容器 -->
|
||
<div class="notification-content">
|
||
<!-- 关闭按钮 -->
|
||
<span class="close" onclick="closeNotification()">×</span>
|
||
<!-- 通知文本 -->
|
||
<p id="notificationText">这是一条通知。</p>
|
||
<!-- 进度条容器 -->
|
||
<div class="progress-bar">
|
||
<!-- 进度条内部 -->
|
||
<div id="progressBarInner" class="progress-bar-inner"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="chat-container">
|
||
<div id="chat-messages"></div>
|
||
<input type="text" id="user-input" placeholder="输入消息..."> <!-- 用户输入消息的输入框 -->
|
||
<button id="user-input-button" disabled>发送</button> <!-- 发送消息按钮初始状态禁用 -->
|
||
<!-- 新增复选框、文本和附加功能按钮 -->
|
||
<img id="loadingico" alt="Loading..." src="../static/img/loading.gif"
|
||
style="height: 50px;transform: translate(10px, 20px);display: none;" />
|
||
<div id="additional-controls">
|
||
<label>
|
||
<input type="checkbox" id="additional-checkbox"> 联系上文 <a id="showtoken"><br>剩余Token将会被显示在这里</a>
|
||
</label>
|
||
<button id="additional-button">设置</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="popup-container" class="hidden"> <!--菜单部分-->
|
||
<div style="padding: 20px;">
|
||
<button id="close-popup">关闭</button>
|
||
<h1>设置</h1>
|
||
<p>使用的AI模型</p>
|
||
<select id="setUpDropdown" defaultValue="qwen-turbo"
|
||
onchange="setCookie('modelSet', document.getElementById('setUpDropdown').value, 265)">
|
||
<option value="qwen-turbo">qwen-turbo</option>
|
||
<option value="chatglm-turbo">chatglmTurbo</option>
|
||
<option value="gpt3.5-turbo">gpt3.5-turbo(X3 Token)</option>
|
||
<option value="gpt4.0-turbo">gpt4.0-turbo(X45 Token)</option>
|
||
</select>
|
||
<hr>
|
||
<h3>当前UserKey</h3>
|
||
<a id="showUserKey"><br>当前UserKey将会被显示在这里</a>
|
||
<hr>
|
||
<div id="buttons">
|
||
<button id="setUpButton1">设置UserKey</button>
|
||
<button id="setUpButton2"
|
||
onclick="window.location.href = 'https://afdian.net/a/kaku55'">获取更多Token</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="../static/popupMessagesBox.js"></script>
|
||
<script>
|
||
const chatMessages = document.getElementById('chat-messages'); // 聊天消息容器
|
||
const userInput = document.getElementById('user-input'); // 用户输入消息的输入框
|
||
const sendButton = document.getElementById('user-input-button'); // 发送消息按钮
|
||
const additionalButton = document.getElementById('additional-button'); // 附加功能按钮
|
||
const additionalCheckbox = document.getElementById('additional-checkbox'); // 复选框
|
||
const popupContainer = document.getElementById('popup-container'); // 菜单容器
|
||
const closePopup = document.getElementById('close-popup'); // 关闭菜单按钮
|
||
const setUpButton1 = document.getElementById('setUpButton1');// 菜单按钮1
|
||
const globalBlur = document.getElementById('global-blur'); //全局遮罩
|
||
|
||
var userhs1 = "x"; // 历史记录的保存
|
||
var userhs0 = "x";
|
||
var boths1 = "x";
|
||
var boths0 = "x";
|
||
|
||
// 关闭菜单
|
||
closePopup.addEventListener('click', () => {
|
||
popupContainer.classList.remove('show');
|
||
globalBlur.style.opacity = 0;
|
||
});
|
||
|
||
// 点击发送按钮后的处理函数
|
||
sendButton.addEventListener('click', sendMessage);
|
||
// 用户输入消息后的处理函数
|
||
userInput.addEventListener('input', handleUserInput);
|
||
// 点击附加功能按钮后的处理函数
|
||
additionalButton.addEventListener('click', additionalFunction);
|
||
// 菜单按钮的处理函数
|
||
setUpButton1.addEventListener('click', resetCookie);
|
||
|
||
// 发送消息函数
|
||
function sendMessage() {
|
||
document.getElementById("loadingico").style.display = "";
|
||
const userMessage = userInput.value; // 获取用户输入的消息
|
||
appendMessage('你', userMessage); // 在聊天界面中添加用户消息
|
||
chatMessages.scrollTop = chatMessages.scrollHeight; //自动滚动
|
||
userInput.value = ''; // 清空输入框
|
||
|
||
// 立即禁用发送按钮
|
||
sendButton.disabled = true;
|
||
|
||
// 在实际应用中，你可以将用户消息发送到后端进行处理
|
||
// 在这个示例中，我们模拟了来自助手的响应
|
||
setTimeout(function () {
|
||
requestAPI(userMessage);
|
||
}, 500);
|
||
}
|
||
|
||
// 在聊天界面中添加消息
|
||
function appendMessage(sender, message) {
|
||
const messageDiv = document.createElement('div');
|
||
messageDiv.innerHTML = `<strong>${sender}:</strong> ${message}`;
|
||
chatMessages.appendChild(messageDiv);
|
||
|
||
// 在每条消息后添加分隔线
|
||
const divider = document.createElement('div');
|
||
divider.className = 'message-divider';
|
||
chatMessages.appendChild(divider);
|
||
}
|
||
|
||
// 附加功能按钮的处理函数
|
||
function additionalFunction() {
|
||
// 处理附加功能按钮的点击事件
|
||
popupContainer.classList.add('show');
|
||
globalBlur.style.opacity = 1; //开启毛玻璃效果
|
||
}
|
||
|
||
// 用户输入框的输入事件处理函数
|
||
function handleUserInput() {
|
||
// 根据用户输入的内容启用或禁用发送按钮
|
||
sendButton.disabled = userInput.value.trim() === '';
|
||
}
|
||
|
||
// 使用Cookie保存用户的UserKey
|
||
function setCookie(cname, cvalue, exdays) {
|
||
var d = new Date();
|
||
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
|
||
var expires = "expires=" + d.toGMTString();
|
||
document.cookie = cname + "=" + cvalue + "; " + expires;
|
||
}
|
||
|
||
function init() {
|
||
setTimeout(function () {
|
||
checkCookie()
|
||
document.getElementById("loading").style.opacity = 0;
|
||
}, 1000);
|
||
|
||
}
|
||
|
||
function getCookie(cname) {
|
||
var name = cname + "=";
|
||
var ca = document.cookie.split(';');
|
||
for (var i = 0; i < ca.length; i++) {
|
||
var c = ca[i].trim();
|
||
if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); }
|
||
}
|
||
return "";
|
||
}
|
||
function checkCookie() {
|
||
var user = getCookie("userkey");
|
||
if (user != "") {
|
||
showNotification("欢迎回来\nUserKey：" + user + "\n当前选择模型：" + getCookie("modelSet"));
|
||
document.getElementById("showUserKey").innerHTML = user;
|
||
document.getElementById('setUpDropdown').value = getCookie("modelSet");
|
||
}
|
||
else {
|
||
user = prompt("请输入你的Userkey:", "");
|
||
if (user != "" && user != null) {
|
||
setCookie("userkey", user, 265);
|
||
setCookie('modelSet', document.getElementById('setUpDropdown').value, 265);
|
||
}
|
||
}
|
||
}
|
||
function resetCookie() {
|
||
user = prompt("请输入你的Userkey:", "");
|
||
if (user != "" && user != null) {
|
||
setCookie("userkey", user, 265);
|
||
alert("UserKey已更新");
|
||
document.getElementById("showUserKey").innerHTML = user;
|
||
}
|
||
}
|
||
|
||
|
||
function requestAPI(message) {
|
||
// 创建包含JSON数据的对象
|
||
var requestData = {
|
||
"model": document.getElementById("setUpDropdown").value,
|
||
"prompt": message,
|
||
"userkey": getCookie("userkey"),
|
||
"context": Number(additionalCheckbox.checked),
|
||
"history": [
|
||
{
|
||
"user": userhs1,
|
||
"bot": boths1
|
||
},
|
||
{
|
||
"user": userhs0,
|
||
"bot": boths0
|
||
}
|
||
]
|
||
};
|
||
|
||
|
||
fetch("api/user", {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify(requestData)
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
// 在这里处理返回的JSON数据
|
||
if (data["code"] == 200) {
|
||
appendMessage("KakuAI" + "(" + document.getElementById("setUpDropdown").value + ")", data["output"]);
|
||
document.getElementById("showtoken").innerHTML = "<br>剩余Tokens:" + data["surplus"];
|
||
}
|
||
else {
|
||
alert("ErrCode:" + data["code"] + " " + data["output"])
|
||
}
|
||
userhs1 = userhs0;
|
||
boths1 = boths0;
|
||
userhs0 = message;
|
||
boths0 = data["output"];
|
||
loading = false;
|
||
chatMessages.scrollTop = chatMessages.scrollHeight; //自动滚动
|
||
document.getElementById("loadingico").style.display = "none";
|
||
// 可以根据返回的数据执行相应的操作
|
||
})
|
||
.catch(error => {
|
||
console.error('请求出错:', error);
|
||
alert('请求出错:', error);
|
||
});
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', function () { //回车发送消息功能
|
||
function handleKey(event) {
|
||
if (event.keyCode === 13) {
|
||
// 在这里执行你希望回车键触发的操作
|
||
sendButton.click(); // 模拟按钮点击
|
||
}
|
||
}
|
||
// 绑定事件到输入框
|
||
userInput.addEventListener('keypress', handleKey);
|
||
});
|
||
|
||
|
||
</script>
|
||
</body>
|
||
|
||
</html> |