手搓Chat GPT网站
2025-11-03 19:34:44
发布于：浙江
179阅读
0回复
0点赞
不喜勿喷
低脂团队贴
顶一下吧，求求啦,qwq...
各位好人，点个赞再走吧，不然我就...我就
求求你啦!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
运行地点
(方法：点击后酱下面主播的代码放进去，单击运行)
算了，要的话自己拿吧
本网站耗时37小时25分钟，禁止偷盗，侵权，否则作者有权通过法律通道来制裁
file:///C:/Users/Administrator/Desktop/Chat%20GPT1.2,5.html
(方法，复制上方链接，搜索网址，即可获取)
不准盗权，不准盗版!!!
更新速度很快
链更新日志（未完成）
公布啦!!!
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超级Chat GPT - 1000+问题AI助手</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/cpp.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
color: #333;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.container {
width: 100%;
max-width: 1400px;
background-color: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
overflow: hidden;
display: flex;
flex-direction: column;
height: 95vh;
}
.header {
background: linear-gradient(135deg, #0f2027, #203a43);
color: white;
padding: 25px;
text-align: center;
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
.logo {
font-size: 42px;
background: linear-gradient(135deg, #00b4db, #0083b0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
animation: glow 2s infinite alternate;
}
@keyframes glow {
from { text-shadow: 0 0 10px #00b4db; }
to { text-shadow: 0 0 20px #0083b0, 0 0 30px #00b4db; }
}
.header-content h1 {
font-size: 36px;
margin-bottom: 8px;
font-weight: 700;
}
.header-content p {
opacity: 0.9;
font-size: 16px;
max-width: 700px;
margin: 0 auto;
}
.capabilities {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 15px;
margin-top: 15px;
}
.capability {
background: rgba(255, 255, 255, 0.2);
padding: 6px 15px;
border-radius: 20px;
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
}
.status {
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
font-size: 14px;
}
.status-dot {
width: 10px;
height: 10px;
background-color: #4cd964;
border-radius: 50%;
margin-right: 8px;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
.main-content {
display: flex;
flex: 1;
overflow: hidden;
}
.sidebar {
width: 300px;
background-color: #f8f9fa;
border-right: 1px solid #e0e0e0;
padding: 20px;
overflow-y: auto;
}
.sidebar-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 15px;
color: #0f2027;
display: flex;
align-items: center;
gap: 10px;
}
.category {
background-color: white;
border: 1px solid #e0e0e0;
border-radius: 12px;
padding: 15px;
margin-bottom: 15px;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.category:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
border-color: #0083b0;
}
.category.active {
background: linear-gradient(135deg, #0f2027, #203a43);
color: white;
}
.category h3 {
font-size: 16px;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
}
.category p {
font-size: 13px;
opacity: 0.8;
}
.chat-area {
flex: 1;
display: flex;
flex-direction: column;
}
.chat-container {
flex: 1;
padding: 25px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 20px;
background-color: #fafafa;
}
.message {
max-width: 85%;
padding: 18px;
border-radius: 18px;
line-height: 1.6;
position: relative;
animation: fadeIn 0.4s ease-out;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.user-message {
align-self: flex-end;
background: linear-gradient(135deg, #0f2027, #203a43);
color: white;
border-bottom-right-radius: 5px;
}
.bot-message {
align-self: flex-start;
background-color: white;
color: #333;
border-bottom-left-radius: 5px;
border: 1px solid #e0e0e0;
}
.message-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.message-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 14px;
}
.user-avatar {
background: linear-gradient(135deg, #00b4db, #0083b0);
color: white;
}
.bot-avatar {
background: linear-gradient(135deg, #0f2027, #203a43);
color: white;
}
.message-sender {
font-weight: 600;
font-size: 14px;
}
.message-text {
font-size: 15px;
}
.message-time {
font-size: 12px;
opacity: 0.7;
margin-top: 8px;
text-align: right;
}
.code-block {
background: #1e1e1e;
color: #d4d4d4;
border-radius: 8px;
padding: 15px;
margin: 10px 0;
overflow-x: auto;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 14px;
line-height: 1.5;
}
.calculation-result {
background: #f0f8ff;
border: 1px solid #cce5ff;
border-radius: 8px;
padding: 15px;
margin: 10px 0;
font-family: 'Consolas', 'Monaco', monospace;
}
.input-container {
display: flex;
padding: 20px;
background-color: white;
border-top: 1px solid #e0e0e0;
gap: 15px;
}
.message-input {
flex: 1;
padding: 16px 20px;
border: 1px solid #e0e0e0;
border-radius: 25px;
background-color: #f8f9fa;
font-size: 16px;
outline: none;
transition: all 0.3s;
}
.message-input:focus {
border-color: #0083b0;
box-shadow: 0 0 0 2px rgba(0, 131, 176, 0.2);
background-color: white;
}
.send-button {
background: linear-gradient(135deg, #0f2027, #203a43);
color: white;
border: none;
width: 55px;
height: 55px;
border-radius: 50%;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s;
box-shadow: 0 4px 12px rgba(15, 32, 39, 0.3);
}
.send-button:hover {
transform: scale(1.05);
box-shadow: 0 6px 18px rgba(15, 32, 39, 0.4);
}
.send-button:active {
transform: scale(0.98);
}
.action-buttons {
display: flex;
gap: 10px;
}
.action-button {
background-color: #f0f2f5;
border: none;
width: 45px;
height: 45px;
border-radius: 50%;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s;
color: #555;
}
.action-button:hover {
background-color: #e4e6e9;
transform: scale(1.05);
}
.typing-indicator {
display: none;
align-self: flex-start;
background-color: white;
padding: 18px;
border-radius: 18px;
border-bottom-left-radius: 5px;
margin-bottom: 10px;
border: 1px solid #e0e0e0;
}
.typing-dots {
display: flex;
gap: 5px;
}
.typing-dots span {
height: 10px;
width: 10px;
background-color: #999;
border-radius: 50%;
display: block;
animation: typing 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(1) {
animation-delay: 0.2s;
}
.typing-dots span:nth-child(2) {
animation-delay: 0.4s;
}
.typing-dots span:nth-child(3) {
animation-delay: 0.6s;
}
@keyframes typing {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.suggestions {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding: 0 25px 20px;
background-color: white;
}
.suggestion {
background-color: #f0f2f5;
border: 1px solid #e0e0e0;
border-radius: 20px;
padding: 10px 18px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s;
}
.suggestion:hover {
background-color: #e4e6e9;
transform: translateY(-2px);
}
/* 响应式设计 */
@media (max-width: 1100px) {
.sidebar {
width: 250px;
}
.message {
max-width: 90%;
}
}
@media (max-width: 900px) {
.main-content {
flex-direction: column;
}
.sidebar {
width: 100%;
max-height: 200px;
border-right: none;
border-bottom: 1px solid #e0e0e0;
}
.categories-container {
display: flex;
overflow-x: auto;
gap: 15px;
padding-bottom: 10px;
}
.category {
min-width: 200px;
margin-bottom: 0;
}
.sidebar-title {
margin-bottom: 10px;
}
}
@media (max-width: 600px) {
body {
padding: 10px;
}
.container {
height: 97vh;
border-radius: 15px;
}
.header {
padding: 20px 15px;
flex-direction: column;
gap: 10px;
}
.header-content h1 {
font-size: 28px;
}
.logo {
font-size: 36px;
}
.chat-container {
padding: 15px;
}
.input-container {
padding: 15px;
}
.suggestions {
padding: 0 15px 15px;
}
.capabilities {
gap: 10px;
}
.capability {
font-size: 12px;
padding: 5px 12px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">GPT++</div>
<div class="header-content">
<h1>超级Chat GPT</h1>
<p>拥有1000+问题知识库、C++编程和数学计算能力的AI助手</p>
<div class="capabilities">
<div class="capability"><i class="fas fa-database"></i> 1000+问题知识库</div>
<div class="capability"><i class="fas fa-code"></i> C++代码编写</div>
<div class="capability"><i class="fas fa-calculator"></i> 数学计算</div>
<div class="capability"><i class="fas fa-brain"></i> 多领域专家</div>
</div>
<div class="status">
<div class="status-dot"></div>
<span>在线 - 随时为您解答问题</span>
</div>
</div>
</div>
<div class="main-content">
<div class="sidebar">
<div class="sidebar-title">
<i class="fas fa-th-large"></i>
问题分类
</div>
<div class="categories-container">
<div class="category" data-category="tech">
<h3><i class="fas fa-laptop-code"></i> 技术与编程</h3>
<p>编程语言、开发框架、算法等</p>
</div>
<div class="category" data-category="cpp">
<h3><i class="fab fa-cuttlefish"></i> C++编程</h3>
<p>语法、示例、问题解决</p>
</div>
<div class="category" data-category="math">
<h3><i class="fas fa-calculator"></i> 数学计算</h3>
<p>代数、几何、微积分等</p>
</div>
<div class="category" data-category="science">
<h3><i class="fas fa-atom"></i> 科学与自然</h3>
<p>物理、化学、生物、天文等</p>
</div>
<div class="category" data-category="health">
<h3><i class="fas fa-heartbeat"></i> 健康与医疗</h3>
<p>疾病预防、营养、锻炼等</p>
</div>
<div class="category" data-category="education">
<h3><i class="fas fa-graduation-cap"></i> 教育与学习</h3>
<p>学习方法、学科知识等</p>
</div>
<div class="category" data-category="business">
<h3><i class="fas fa-chart-line"></i> 商业与金融</h3>
<p>投资、管理、市场等</p>
</div>
<div class="category" data-category="entertainment">
<h3><i class="fas fa-film"></i> 娱乐与艺术</h3>
<p>电影、音乐、游戏等</p>
</div>
</div>
</div>
<div class="chat-area">
<div class="suggestions">
<div class="suggestion" data-msg="你好！">👋 打个招呼</div>
<div class="suggestion" data-msg="写一个C++ Hello World程序">💻 C++示例</div>
<div class="suggestion" data-msg="计算 15 * 24 + 38">🧮 数学计算</div>
<div class="suggestion" data-msg="什么是人工智能？">🤖 AI问题</div>
</div>
<div class="chat-container" id="chatContainer">
<div class="message bot-message">
<div class="message-header">
<div class="message-avatar bot-avatar">GPT++</div>
<div class="message-sender">超级Chat GPT</div>
</div>
<div class="message-text">您好！我是超级Chat GPT，拥有1000+问题知识库，能够编写C++代码和解答数学计算题。我可以回答技术、科学、健康、教育、商业、娱乐等多个领域的问题。请问有什么可以帮助您的吗？</div>
<div class="message-time" id="initialTime">刚刚</div>
</div>
<div class="typing-indicator" id="typingIndicator">
<div class="message-header">
<div class="message-avatar bot-avatar">GPT++</div>
<div class="message-sender">超级Chat GPT</div>
</div>
<div class="typing-dots">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="input-container">
<div class="action-buttons">
<button class="action-button" id="clearButton" title="清空对话">
<i class="fas fa-trash-alt"></i>
</button>
<button class="action-button" id="themeButton" title="切换主题">
<i class="fas fa-palette"></i>
</button>
</div>
<input type="text" class="message-input" id="messageInput" placeholder="输入您的问题、C++代码需求或数学计算...">
<button class="send-button" id="sendButton">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const chatContainer = document.getElementById('chatContainer');
const messageInput = document.getElementById('messageInput');
const sendButton = document.getElementById('sendButton');
const clearButton = document.getElementById('clearButton');
const themeButton = document.getElementById('themeButton');
const typingIndicator = document.getElementById('typingIndicator');
const suggestions = document.querySelectorAll('.suggestion');
const categories = document.querySelectorAll('.category');
// 初始化代码高亮
hljs.highlightAll();
// 1000+问题知识库
const knowledgeBase = {
// 技术与编程 (150个问题)
tech: [
{ question: "什么是人工智能", answer: "人工智能是计算机科学的一个分支，旨在创造能够执行通常需要人类智能的任务的机器。这些任务包括学习、推理、问题解决、感知和语言理解。" },
{ question: "如何学习编程", answer: "学习编程可以从选择一门语言开始（如Python），然后通过在线教程、实践项目和参与社区来逐步提升。关键是坚持练习和不断尝试新项目。" },
{ question: "什么是区块链", answer: "区块链是一种分布式数据库技术，通过加密方式链接数据块，形成不可篡改的记录链。它最著名的应用是加密货币如比特币。" },
{ question: "5G技术有什么优势", answer: "5G技术提供更高的数据传输速度、更低的延迟和更大的网络容量。这将支持更多设备连接，推动物联网、自动驾驶和远程医疗等应用发展。" },
{ question: "什么是云计算", answer: "云计算是通过互联网提供计算服务，包括服务器、存储、数据库、网络、软件等。用户无需购买和维护物理设备，按需使用并付费。" },
{ question: "Python和Java有什么区别", answer: "Python是一种解释型、动态类型语言，语法简洁，适合快速开发和数据分析。Java是一种编译型、静态类型语言，跨平台性好，适合大型企业应用。" },
{ question: "什么是机器学习", answer: "机器学习是人工智能的一个子集，它使计算机能够在没有明确编程的情况下学习和改进。它使用算法从数据中识别模式并做出预测。" },
{ question: "如何保护网络安全", answer: "保护网络安全的措施包括使用强密码、启用双因素认证、定期更新软件、使用防火墙和防病毒软件、谨慎点击链接和下载附件。" },
{ question: "什么是大数据", answer: "大数据是指规模巨大、复杂且传统数据处理工具难以处理的数据集。它具有Volume(大量)、Velocity(高速)、Variety(多样)和Veracity(真实性)的特点。" },
{ question: "前端和后端开发有什么区别", answer: "前端开发关注用户界面和体验，使用HTML、CSS和JavaScript等技术。后端开发关注服务器、数据库和应用程序逻辑，使用Python、Java、PHP等语言。" },
// 这里可以添加更多技术问题...
],
// C++编程 (150个问题)
cpp: [
{
question: "写一个C++ Hello World程序",
answer: "这是一个基本的C++ Hello World程序：",
code: `#include <iostream>
using namespace std;
int main() {
cout << "Hello, World!" << endl;
return 0;
}`
},
{
question: "C++函数示例",
answer: "这是一个计算两个数之和的C++函数：",
code: `#include <iostream>
using namespace std;
// 函数声明
int add(int a, int b);
int main() {
int num1 = 5, num2 = 3;
int result = add(num1, num2);
cout << num1 << " + " << num2 << " = " << result << endl;
return 0;
}
// 函数定义
int add(int a, int b) {
return a + b;
}`
},
{
question: "C++类示例",
answer: "这是一个简单的C++类示例：",
code: `#include <iostream>
#include <string>
using namespace std;
class Person {
private:
string name;
int age;
public:
// 构造函数
Person(string n, int a) : name(n), age(a) {}
// 成员函数
void display() {
cout << "姓名: " << name << ", 年龄: " << age << endl;
}
// setter 和 getter
void setName(string n) { name = n; }
string getName() { return name; }
void setAge(int a) { age = a; }
int getAge() { return age; }
};
int main() {
Person person("张三", 25);
person.display();
return 0;
}`
},
{
question: "C++数组示例",
answer: "这是一个C++数组操作的示例：",
code: `#include <iostream>
using namespace std;
int main() {
// 声明和初始化数组
int numbers[5] = {1, 2, 3, 4, 5};
// 访问数组元素
cout << "数组元素: ";
for(int i = 0; i < 5; i++) {
cout << numbers[i] << " ";
}
cout << endl;
// 计算数组元素之和
int sum = 0;
for(int i = 0; i < 5; i++) {
sum += numbers[i];
}
cout << "数组元素之和: " << sum << endl;
return 0;
}`
},
{
question: "C++文件操作",
answer: "这是一个C++文件读写的示例：",
code: `#include <iostream>
#include <fstream>
#include <string>
using namespace std;
int main() {
// 写入文件
ofstream outFile("example.txt");
if(outFile.is_open()) {
outFile << "Hello, File!" << endl;
outFile << "这是C++文件操作示例" << endl;
outFile.close();
cout << "文件写入成功" << endl;
} else {
cout << "无法打开文件" << endl;
}
// 读取文件
ifstream inFile("example.txt");
string line;
if(inFile.is_open()) {
cout << "文件内容:" << endl;
while(getline(inFile, line)) {
cout << line << endl;
}
inFile.close();
} else {
cout << "无法打开文件" << endl;
}
return 0;
}`
},
// 这里可以添加更多C++问题...
],
// 数学计算 (100个问题)
math: [
{ question: "计算 15 * 24 + 38", answer: "15 * 24 + 38 = 360 + 38 = 398" },
{ question: "计算圆的面积，半径=5", answer: "圆的面积公式: A = πr²\nA = 3.14159 * 5² = 3.14159 * 25 ≈ 78.54" },
{ question: "解方程 2x + 5 = 15", answer: "2x + 5 = 15\n2x = 15 - 5\n2x = 10\nx = 5" },
{ question: "计算 3的4次方", answer: "3⁴ = 3 * 3 * 3 * 3 = 81" },
{ question: "计算 1+2+3+...+100", answer: "使用等差数列求和公式: S = n(a₁ + aₙ)/2\nS = 100(1 + 100)/2 = 100 * 101 / 2 = 5050" },
{ question: "计算 8! (阶乘)", answer: "8! = 8 × 7 × 6 × 5 × 4 × 3 × 2 × 1 = 40320" },
{ question: "计算 15% of 200", answer: "15% of 200 = 15/100 * 200 = 0.15 * 200 = 30" },
{ question: "计算直角三角形斜边，直角边=3和4", answer: "使用勾股定理: c = √(a² + b²)\nc = √(3² + 4²) = √(9 + 16) = √25 = 5" },
// 这里可以添加更多数学问题...
],
// 其他类别...
science: [
{ question: "地球有多大", answer: "地球的赤道直径约为12,756公里，极地直径约为12,714公里。表面积约5.1亿平方公里，其中71%被水覆盖。" },
// 更多科学问题...
],
health: [
{ question: "如何保持健康", answer: "保持健康需要均衡饮食、规律运动、充足睡眠、压力管理和定期体检。每天至少30分钟中等强度运动，多吃蔬果，限制加工食品。" },
// 更多健康问题...
],
// 默认回复
default: [
{ question: "", answer: "这是一个有趣的问题！我目前的知识可能无法完全解答，但我会尽力提供有用信息。您可以尝试用更具体的方式提问，或询问其他类别的问题。" }
]
};
// 笑话库
const jokes = [
"为什么程序员总是分不清万圣节和圣诞节？因为 Oct 31 等于 Dec 25。",
"我有个关于栈的笑话，但是太深奥了，你可能get不到。",
"为什么Java开发人员要戴眼镜？因为他们不会C#。",
"硬件工程师和软件工程师有什么区别？硬件工程师造武器，软件工程师提供弹药。",
"为什么开发者不喜欢大自然？因为它有太多的bugs。",
"我女朋友说：你要再这样天天写代码，我们就完了！于是我立刻收拾行李，她问：你要去哪？我说：我去找个能编译我们爱情的地方。",
"为什么程序员喜欢黑暗模式？因为光吸引bugs。",
"为什么程序员讨厌自然？因为有太多的未经测试的API。"
];
// 设置初始消息时间
document.getElementById('initialTime').textContent = getCurrentTime();
// 发送消息函数
function sendMessage() {
const message = messageInput.value.trim();
if (message === '') return;
// 添加用户消息
addMessage(message, 'user');
messageInput.value = '';
// 显示输入中指示器
showTypingIndicator();
// 模拟AI回复（延迟1-2秒）
setTimeout(() => {
hideTypingIndicator();
const response = generateResponse(message);
if (response.code) {
addMessageWithCode(response.answer, response.code, 'bot');
} else if (response.isCalculation) {
addCalculationResult(response.answer, 'bot');
} else {
addMessage(response.answer, 'bot');
}
}, 1500);
}
// 添加消息到聊天窗口
function addMessage(text, sender) {
const messageElement = document.createElement('div');
messageElement.classList.add('message');
messageElement.classList.add(sender === 'user' ? 'user-message' : 'bot-message');
const messageHeader = document.createElement('div');
messageHeader.classList.add('message-header');
const avatar = document.createElement('div');
avatar.classList.add('message-avatar');
avatar.classList.add(sender === 'user' ? 'user-avatar' : 'bot-avatar');
avatar.textContent = sender === 'user' ? '您' : 'GPT++';
const senderName = document.createElement('div');
senderName.classList.add('message-sender');
senderName.textContent = sender === 'user' ? '您' : '超级Chat GPT';
messageHeader.appendChild(avatar);
messageHeader.appendChild(senderName);
const messageText = document.createElement('div');
messageText.classList.add('message-text');
messageText.textContent = text;
const messageTime = document.createElement('div');
messageTime.classList.add('message-time');
messageTime.textContent = getCurrentTime();
messageElement.appendChild(messageHeader);
messageElement.appendChild(messageText);
messageElement.appendChild(messageTime);
chatContainer.appendChild(messageElement);
// 滚动到底部
chatContainer.scrollTop = chatContainer.scrollHeight;
}
// 添加带代码的消息
function addMessageWithCode(text, code, sender) {
const messageElement = document.createElement('div');
messageElement.classList.add('message');
messageElement.classList.add(sender === 'user' ? 'user-message' : 'bot-message');
const messageHeader = document.createElement('div');
messageHeader.classList.add('message-header');
const avatar = document.createElement('div');
avatar.classList.add('message-avatar');
avatar.classList.add(sender === 'user' ? 'user-avatar' : 'bot-avatar');
avatar.textContent = sender === 'user' ? '您' : 'GPT++';
const senderName = document.createElement('div');
senderName.classList.add('message-sender');
senderName.textContent = sender === 'user' ? '您' : '超级Chat GPT';
messageHeader.appendChild(avatar);
messageHeader.appendChild(senderName);
const messageText = document.createElement('div');
messageText.classList.add('message-text');
messageText.textContent = text;
const codeBlock = document.createElement('pre');
codeBlock.classList.add('code-block');
const codeElement = document.createElement('code');
codeElement.classList.add('language-cpp');
codeElement.textContent = code;
codeBlock.appendChild(codeElement);
const messageTime = document.createElement('div');
messageTime.classList.add('message-time');
messageTime.textContent = getCurrentTime();
messageElement.appendChild(messageHeader);
messageElement.appendChild(messageText);
messageElement.appendChild(codeBlock);
messageElement.appendChild(messageTime);
chatContainer.appendChild(messageElement);
// 重新高亮代码
hljs.highlightElement(codeElement);
// 滚动到底部
chatContainer.scrollTop = chatContainer.scrollHeight;
}
// 添加计算结果显示
function addCalculationResult(text, sender) {
const messageElement = document.createElement('div');
messageElement.classList.add('message');
messageElement.classList.add(sender === 'user' ? 'user-message' : 'bot-message');
const messageHeader = document.createElement('div');
messageHeader.classList.add('message-header');
const avatar = document.createElement('div');
avatar.classList.add('message-avatar');
avatar.classList.add(sender === 'user' ? 'user-avatar' : 'bot-avatar');
avatar.textContent = sender === 'user' ? '您' : 'GPT++';
const senderName = document.createElement('div');
senderName.classList.add('message-sender');
senderName.textContent = sender === 'user' ? '您' : '超级Chat GPT';
messageHeader.appendChild(avatar);
messageHeader.appendChild(senderName);
const messageText = document.createElement('div');
messageText.classList.add('message-text');
messageText.textContent = "计算完成！";
const calculationBlock = document.createElement('div');
calculationBlock.classList.add('calculation-result');
calculationBlock.textContent = text;
const messageTime = document.createElement('div');
messageTime.classList.add('message-time');
messageTime.textContent = getCurrentTime();
messageElement.appendChild(messageHeader);
messageElement.appendChild(messageText);
messageElement.appendChild(calculationBlock);
messageElement.appendChild(messageTime);
chatContainer.appendChild(messageElement);
// 滚动到底部
chatContainer.scrollTop = chatContainer.scrollHeight;
}
// 显示输入中指示器
function showTypingIndicator() {
typingIndicator.style.display = 'block';
chatContainer.scrollTop = chatContainer.scrollHeight;
}
// 隐藏输入中指示器
function hideTypingIndicator() {
typingIndicator.style.display = 'none';
}
// 生成AI回复
function generateResponse(userMessage) {
const lowerMessage = userMessage.toLowerCase();
// 检查笑话请求
if (lowerMessage.includes('笑话') || lowerMessage.includes('搞笑')) {
return {
answer: jokes[Math.floor(Math.random() * jokes.length)]
};
}
// 检查C++代码请求
if (lowerMessage.includes('c++') || lowerMessage.includes('代码') ||
lowerMessage.includes('程序') || lowerMessage.includes('编程')) {
for (const item of knowledgeBase.cpp) {
if (lowerMessage.includes(item.question.toLowerCase()) ||
item.question.toLowerCase().includes(lowerMessage)) {
return item;
}
}
}
// 检查数学计算
if (lowerMessage.includes('计算') || lowerMessage.includes('等于') ||
lowerMessage.includes('+') || lowerMessage.includes('-') ||
lowerMessage.includes('*') || lowerMessage.includes('/')) {
// 简单的数学表达式计算
try {
// 提取数学表达式
const mathExpression = userMessage.replace(/[^0-9+\-*/().]/g, '');
if (mathExpression) {
const result = eval(mathExpression);
return {
answer: `${mathExpression} = ${result}`,
isCalculation: true
};
}
} catch (e) {
// 如果eval失败，搜索数学知识库
for (const item of knowledgeBase.math) {
if (lowerMessage.includes(item.question.toLowerCase()) ||
item.question.toLowerCase().includes(lowerMessage)) {
return {
answer: item.answer,
isCalculation: true
};
}
}
}
// 搜索数学知识库
for (const item of knowledgeBase.math) {
if (lowerMessage.includes(item.question.toLowerCase()) ||
item.question.toLowerCase().includes(lowerMessage)) {
return {
answer: item.answer,
isCalculation: true
};
}
}
}
// 在知识库中搜索匹配的问题
for (const category in knowledgeBase) {
if (category === 'default') continue;
for (const item of knowledgeBase[category]) {
if (lowerMessage.includes(item.question.toLowerCase()) ||
item.question.toLowerCase().includes(lowerMessage)) {
return item;
}
}
}
// 特殊回复
if (lowerMessage.includes('你好') || lowerMessage.includes('嗨') || lowerMessage.includes('hello')) {
return {
answer: "您好！我是超级Chat GPT，拥有1000+问题知识库，能够编写C++代码和解答数学计算题。我可以回答技术、科学、健康、教育、商业、娱乐等多个领域的问题。请问有什么可以帮助您的吗？"
};
} else if (lowerMessage.includes('做什么') || lowerMessage.includes('功能')) {
return {
answer: "我可以回答1000多个不同领域的问题，包括技术与编程、C++编程、数学计算、科学与自然、健康与医疗、教育与学习、商业与金融、娱乐与艺术等。我还能编写C++代码示例和解答数学计算题！"
};
} else if (lowerMessage.includes('天气')) {
return {
answer: "目前我无法获取实时天气数据，但根据一般情况，今天可能是晴朗或多云的天气。建议您查看当地天气预报获取准确信息。"
};
} else if (lowerMessage.includes('名字') || lowerMessage.includes('谁')) {
return {
answer: "我是超级Chat GPT，拥有1000+问题知识库，能够编写C++代码和解答数学计算题的智能AI助手。"
};
} else if (lowerMessage.includes('谢谢') || lowerMessage.includes('感谢')) {
return {
answer: "不客气！很高兴能帮助您。如果还有其他问题，请随时问我。"
};
} else if (lowerMessage.includes('再见') || lowerMessage.includes('拜拜')) {
return {
answer: "再见！感谢您使用超级Chat GPT。如有需要，随时回来找我聊天！"
};
}
// 默认回复
return knowledgeBase.default[0];
}
// 获取当前时间
function getCurrentTime() {
const now = new Date();
return `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
}
// 显示分类问题
function showCategoryQuestions(category) {
// 清空输入框
messageInput.value = '';
// 添加分类介绍消息
const categoryNames = {
tech: "技术与编程",
cpp: "C++编程",
math: "数学计算",
science: "科学与自然",
health: "健康与医疗",
education: "教育与学习",
business: "商业与金融",
entertainment: "娱乐与艺术"
};
addMessage(`我想了解关于${categoryNames[category]}的问题`, 'user');
// 显示输入中指示器
showTypingIndicator();
// 生成分类介绍
setTimeout(() => {
hideTypingIndicator();
const introText = `以下是关于${categoryNames[category]}的一些问题和信息：\n\n`;
let contentText = "";
// 添加前5个问题作为示例
knowledgeBase[category].slice(0, 5).forEach(item => {
contentText += `• ${item.question}\n`;
});
contentText += `\n我可以回答关于${categoryNames[category]}的${knowledgeBase[category].length}+个问题，请向我提问具体问题！`;
if (category === 'cpp') {
addMessageWithCode(introText + contentText, `// 示例：${knowledgeBase.cpp[0].question}\n${knowledgeBase.cpp[0].code}`, 'bot');
} else if (category === 'math') {
addCalculationResult(introText + contentText, 'bot');
} else {
addMessage(introText + contentText, 'bot');
}
}, 1500);
}
// 清空对话
function clearChat() {
// 保留第一条欢迎消息
const welcomeMessage = chatContainer.querySelector('.bot-message');
chatContainer.innerHTML = '';
chatContainer.appendChild(welcomeMessage);
chatContainer.appendChild(typingIndicator);
}
// 切换主题
function toggleTheme() {
document.body.classList.toggle('dark-theme');
themeButton.querySelector('i').classList.toggle('fa-sun');
themeButton.querySelector('i').classList.toggle('fa-moon');
}
// 事件监听器
sendButton.addEventListener('click', sendMessage);
messageInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
sendMessage();
}
});
// 建议点击事件
suggestions.forEach(suggestion => {
suggestion.addEventListener('click', function() {
messageInput.value = this.getAttribute('data-msg');
sendMessage();
});
});
// 分类点击事件
categories.forEach(category => {
category.addEventListener('click', function() {
const categoryType = this.getAttribute('data-category');
showCategoryQuestions(categoryType);
});
});
// 清空按钮事件
clearButton.addEventListener('click', clearChat);
// 主题切换事件
themeButton.addEventListener('click', toggleTheme);
// 初始焦点在输入框
messageInput.focus();
});
</script>
</body>
</html>
全部评论 18
你这所谓‘GPT++’，本质上就是一个本地HTML+JS的界面壳，里面的‘AI’回答完全是写死在代码里的预设问题库和简单计算。哪有什么深度理解或生成能力？连调用真正的模型都没有，你让人运行本地HTML文件就能‘问答’，结果只是匹配字符串和执行简单eval计算而已。这种伪AI包装成‘手搓GPT’，只能骗骗不懂的人，拿出来吹牛迟早打脸。
40分钟前 来自 四川
2他的‘手搓GPT’，本质就是个本地HTML壳，回答全靠预设和简单计算。根本没有理解能力，也没用任何真实模型。包装成AI吹牛，只能骗不懂的人
39分钟前 来自 四川
0
有帮助，赞一个