GPT-3.5智能对话助手 - 强大的AI聊天机器人
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GPT-3.5</title>
<style>
#toggle-drawer-button {
display: block;
margin: 0 auto;
width: 120px;
color: #FFA6C1;
}
<pre><code> .hidden-drawer {
display: none;
}
.typing-effect {
overflow: hidden;
white-space: nowrap;
color: black;
font-family: 'Arial', sans-serif;
font-size: 15px;
padding: 3px 3py;
font-weight: bold;
animation: typing linear 3.5s infinite;
}
.copy-button {
display: inline-block;
cursor: pointer;
background-color: #007bff;
color: #fff;
padding: 5px 10px;
border: none;
border-radius: 4px;
font-size: 12px;
margin-left: 5px;
}
.copy-button:hover {
background-color: #0056b3;
}
h1 {
text-align: center;
font-size: 35px;
color: lightblue;
}
.container {
width: 90%;
margin: 0 auto;
padding-top: 0px;
}
.conversation-label,
.response-label {
color: lightgreen;
font-size: 16px;
font-weight: bold;
margin-bottom: 1px;
}
.input-box {
width: 100%;
height: auto;
font-family: Arial, sans-serif;
font-size: 15px;
background-color: rgba(173, 216, 230, 0.3);
border: 2px solid blue;
border-radius: 5px;
padding: 2px;
resize: none;
outline: none;
font-weight: bold;
overflow-y: scroll;
color: black;
}
.input-box1 {
width: 100%;
height: auto;
font-family: Arial, sans-serif;
font-size: 16px;
background-color: rgba(173, 216, 230, 0.5);
border: 2px solid blue;
border-radius: 5px;
padding: 2px;
resize: none;
outline: none;
font-weight: bold;
overflow-y: scroll;
color: black;
}
.response-box {
width: 100%;
height: auto;
font-family: Arial, sans-serif;
font-size: 16px;
background-color: rgba(173, 216, 230, 0.3);
border: 2px solid blue;
border-radius: 5px;
padding: 3px;
resize: none;
overflow-y: scroll;
margin-bottom: 0px;
outline: none;
font-weight: bold;
}
.button-container {
display: flex;
justify-content: center;
margin-top: 2px;
}
.button {
width: 95px;
display: inline-block;
background-color: lightblue;
color: #0099FF;
padding: 5px 10px;
text-align: center;
text-decoration: none;
font-size: 16px;
border: none;
border-radius: 2px;
font-weight: bold;
cursor: pointer;
margin: 0 35px;
margin-top: 0px;
}
.button:hover {
background-color: #FFA500;
}
.clear-button {
background-color: lightblue;
}
.clear-button:hover {
background-color: red;
}
.author-info {
position: fixed;
top: 5px;
right: 5px;
color: gold;
font-size: 5px;
background-image: linear-gradient(30deg, #00bcd4, #ff4081);
padding: 5px 10px;
border-radius: 20px;
text-transform: uppercase;
font-family: "Arial", sans-serif;
animation: glow 4s ease-in-out infinite alternate;
}
@keyframes glow {
from {
box-shadow: 0 0 5px #00bcd4, 0 0 20px #00bcd4, 0 0 30px #00bcd4;
}
to {
box-shadow: 0 0 20px #00bcd4, 0 0 40px #00bcd4, 0 0 60px #00bcd4;
}
}
.author-info a {
color: #fff;
text-decoration: none;
}
.checkbox-container {
display: flex;
align-items: center;
}
.checkbox-container input[type="checkbox"] {
margin-right: 8px;
appearance: none;
-webkit-appearance: none;
width: 22px;
height: 22px;
border: 2px solid blue;
border-radius: 4px;
outline: none;
cursor: pointer;
}
.checkbox-container input[type="checkbox"]:checked {
background-color: #2196F3;
border-color: #2196F3;
}
.checkbox-container input[type="checkbox"]:checked::before {
content: "";
position: absolute;
top: 4px;
left: 8px;
width: 8px;
height: 12px;
border-right: 2px solid blue;
border-bottom: 2px solid blue;
transform: rotate(45deg);
}
.checkbox-container label {
font-size: 16px;
}
/* 用户消息样式 */
.user-message {
color: blue;
}
/* GPT回复样式 */
.gpt-response {
color: black;
}
.input-box1::placeholder {
color: yellow;
}
</style>
</code></pre>
</head>
<body>
<div class="container">
<h1>GPT-3.5</h1>
<button id="toggle-drawer-button" class="button">参数设置</button>
<!-- 抽屉内容 -->
<div id="drawer-content" class="hidden-drawer">
<div>
<label class="conversation-label">系统角色：</label><br>
<input type="text" id="system-message" class="input-box" placeholder="输入gpt的预设角色">
</div>
<div>
<label class="conversation-label">选择GPT模型（5种）：</label><br>
<select id="model-select" class="input-box">
{% for key, value in models.items() %}
<option value="{{ key }}">{{ value }}</option>
{% endfor %}
</select>
</div>
<div>
<label class="conversation-label">温度（Temperature）：</label><br>
<input type="float" id="temperature" class="input-box"
placeholder="范围>=0，接近0倾向连贯性，越大倾向多样性，建议0-1">
</div>
<div>
<label class="conversation-label">最大令牌数（Max-Tokens）：</label><br>
<input type="int" id="max-tokens" class="input-box"
placeholder="最大范围4000/16000，默认模型最大不超过4000，代表对话总字数">
</div>
</div>
<div>
<label class="conversation-label">用户输入框：</label><br>
<textarea id="user-input" class="input-box1"
placeholder="2023.9.29已更新流式快速响应，快来体验吧！！！🐕🐕🐕"></textarea>
</div>
<div>
<div class="checkbox-container">
<label for="continuous-chat" class="conversation-label">开启连续对话：</label>
<input type="checkbox" id="continuous-chat">
</div>
</div>
<div>
<label class="response-label">对话消息记录框：</label><br>
<!-- 修改逐个字显示的文本框 -->
<div id="response-text" class="response-box"></div>
</div>
<br>
<div class="button-container">
<button id="send-button" class="button">发送</button>
<button id="clear-button" class="button clear-button">清空</button>
</div>
<div class="author-info">MADE-BY-中北锋哥</div>
<script>
document.addEventListener("DOMContentLoaded", function (event) {
// 设置默认值
document.getElementById("system-message").value = "You are a helpful assistant.";
document.getElementById("temperature").value = "0.2";
document.getElementById("max-tokens").value = "12345";
});
<pre><code>// 复制文本内容到剪贴板
function copyToClipboard(text) {
const textArea = document.createElement("textarea");
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
}
// 切换抽屉的显示状态
const toggleDrawerButton = document.getElementById("toggle-drawer-button");
const drawerContent = document.getElementById("drawer-content");
toggleDrawerButton.addEventListener("click", function () {
if (drawerContent.style.display === "none" || drawerContent.style.display === "") {
drawerContent.style.display = "block";
} else {
drawerContent.style.display = "none";
}
});
document.getElementById("send-button").addEventListener("click", function () {
// 获取用户输入和选定的模型
var user_input = document.getElementById("user-input").value;
var selected_model = document.getElementById("model-select").value;
var system_message = document.getElementById("system-message").value;
var temperature = parseFloat(document.getElementById("temperature").value);
var max_tokens = parseInt(document.getElementById("max-tokens").value);
var continuous_chat = document.getElementById("continuous-chat").checked; // 获取连续对话复选框状态
// 检查用户输入是否为空
if (user_input === "") {
alert("请输入有效的消息内容。");
return; // 不发送请求
}
// 发送请求到服务器
fetch("/get_response", {
method: "POST",
body: JSON.stringify({
user_input: user_input,
selected_model: selected_model,
system_message: system_message,
temperature: temperature,
max_tokens: max_tokens,
continuous_chat: continuous_chat
}),
headers: {
"Content-Type": "application/json" // 更新 Content-Type
}
})
.then(response => response.body.getReader()) // 获取可读流
.then(reader => {
// 获取要逐个字显示的文本框
var responseTextElement = document.getElementById("response-text");
// 创建一个包含用户消息的新对话条目
var userMessage = document.createElement("div");
userMessage.className = "user-message";
// 创建复制按钮并添加点击事件
var userCopyButton = document.createElement("button");
userCopyButton.className = "copy-button";
userCopyButton.textContent = "复制";
userCopyButton.addEventListener("click", function () {
copyToClipboard(user_input);
userCopyButton.textContent = "已复制";
});
// 添加用户消息文本
userMessage.textContent = "用户：" + user_input;
userMessage.appendChild(userCopyButton);
responseTextElement.appendChild(userMessage);
// 创建一个包含GPT回复的新对话条目
var gptResponse = document.createElement("div");
gptResponse.className = "gpt-response";
// 创建复制按钮并添加点击事件
var gptCopyButton = document.createElement("button");
gptCopyButton.className = "copy-button";
gptCopyButton.textContent = "复制";
gptCopyButton.addEventListener("click", function () {
copyToClipboard(gptResponse.textContent.replace(/(复制|已复制)$/g, ""));
gptCopyButton.textContent = "已复制";
});
// 添加GPT回复文本
gptResponse.textContent = "GPT3.5: ";
// 逐个字逐个字地将GPT回复添加到对话框中
const decoder = new TextDecoder();
reader.read().then(function processText({ done, value }) {
if (done) {
// 添加复制按钮到GPT回复
gptResponse.appendChild(gptCopyButton);
return;
}
var span = document.createElement("span");
span.className = "typing-effect"; // 使用打字机效果样式
span.textContent = decoder.decode(value);
gptResponse.appendChild(span);
responseTextElement.scrollTop = responseTextElement.scrollHeight; // 滚动到底部
reader.read().then(processText);
});
responseTextElement.appendChild(gptResponse);
responseTextElement.appendChild(conversationItem);
// 清空用户输入框
document.getElementById("user-input").value = "";
})
.catch(error => {
console.error(error);
// 如果发生错误，弹出错误提示框
alert("发生错误：" + error.message);
});
});
// 清除tokens
document.addEventListener("DOMContentLoaded", function () {
const clearButton = document.getElementById("clear-button");
clearButton.addEventListener("click", function () {
// 向服务器发送清除请求
fetch("/clear_history", {
method: "POST",
})
.then((response) => response.json())
.then((data) => {
// 清空用户输入和逐个字显示的文本框
document.getElementById("user-input").value = "";
document.getElementById("response-text").innerHTML = "";
})
.catch((error) => {
console.error("清除请求失败: ", error);
});
});
});
</code></pre>
<p>// 获取按钮元素
var sendButton = document.getElementById("send-button");
var clearButton = document.getElementById("clear-button");</p>
<pre><code> // 添加点击事件监听器
sendButton.addEventListener("click", function() {
// 在按钮点击时添加视觉反馈样式
sendButton.classList.add("button-clicked");
// 发送请求并获取响应
getResponse();
});
clearButton.addEventListener("click", function() {
// 在按钮点击时添加视觉反馈样式
clearButton.classList.add("button-clicked");
});
</code></pre>
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/pbJ1 著作权归作者所有。请勿转载和采集!