xinnian/AntiScamAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增index页面

Browse Source
This commit is contained in:
高峰君主 2025-02-27 20:47:46 +08:00
parent 67a6915401
commit 3f684d99dc
4 changed files with 353 additions and 290 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

173
web/index.html
View File

@ -3,73 +3,12 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>反诈骗软件 Demo</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: 50px auto;
background-color: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
.section {
margin: 30px 0;
}
.section input,
.section button {
padding: 10px;
font-size: 16px;
width: 100%;
border: 1px solid #ccc;
border-radius: 4px;
margin: 10px 0;
}
.section input[type="file"] {
width: auto;
}
.section button {
background-color: #4CAF50;
color: white;
cursor: pointer;
}
.section button:hover {
background-color: #45a049;
}
.result {
margin-top: 20px;
padding: 10px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 4px;
}
.result p {
margin: 5px 0;
}
.result.success {
border-color: #4CAF50;
color: #4CAF50;
}
.result.error {
border-color: #f44336;
color: #f44336;
}
</style>
<title>AntiScamAI</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>反诈骗软件 Demo</h1>
<h1>AntiScamAI</h1>
<!-- 钓鱼网站检测 -->
<div class="section">
@ -96,108 +35,6 @@
</div>
</div>
<script>
// 创建 WebSocket 连接
const socket = new WebSocket('ws://localhost:8080'); // 后端WebSocket服务器的地址
socket.onopen = () => {
console.log('WebSocket 连接已建立');
};
socket.onmessage = (event) => {
const data = JSON.parse(event.data);
if (data.type === 'urlResult') {
displayUrlResult(data.result);
} else if (data.type === 'imageResult') {
displayImageResult(data.result);
} else if (data.type === 'textResult') {
displayTextResult(data.result);
}
};
socket.onerror = (error) => {
console.error('WebSocket 错误:', error);
};
socket.onclose = () => {
console.log('WebSocket 连接关闭');
};
// 钓鱼网站检测
function checkPhishingWebsite() {
const url = document.getElementById('urlInput').value;
if (url) {
socket.send(JSON.stringify({ type: 'checkPhishing', url }));
} else {
alert("请输入网址");
}
}
// 聊天图片检测
function checkChatImage() {
const imageInput = document.getElementById('imageInput');
if (imageInput.files.length > 0) {
const file = imageInput.files[0];
const reader = new FileReader();
reader.onload = function(e) {
socket.send(JSON.stringify({ type: 'checkImage', imageData: e.target.result }));
};
reader.readAsDataURL(file);
} else {
alert("请上传图片进行检测");
}
}
// 话术检测
function checkScript() {
const text = document.getElementById('textInput').value;
if (text) {
socket.send(JSON.stringify({ type: 'checkScript', text }));
} else {
alert("请输入文本进行检测");
}
}
// 显示检测结果
function displayUrlResult(result) {
const resultDiv = document.getElementById('urlResult');
if (result.isPhishing) {
resultDiv.textContent = "警告！这是一个钓鱼网站。";
resultDiv.classList.remove('success');
resultDiv.classList.add('error');
} else {
resultDiv.textContent = "这个网站看起来安全。";
resultDiv.classList.remove('error');
resultDiv.classList.add('success');
}
}
function displayImageResult(result) {
const resultDiv = document.getElementById('imageResult');
if (result.isSuspicious) {
resultDiv.textContent = "警告！图片检测到可疑内容。";
resultDiv.classList.remove('success');
resultDiv.classList.add('error');
} else {
resultDiv.textContent = "图片通过检测。";
resultDiv.classList.remove('error');
resultDiv.classList.add('success');
}
}
function displayTextResult(result) {
const resultDiv = document.getElementById('textResult');
if (result.isSuspicious) {
resultDiv.textContent = "警告！检测到可疑话术。";
resultDiv.classList.remove('success');
resultDiv.classList.add('error');
} else {
resultDiv.textContent = "文本通过检测。";
resultDiv.classList.remove('error');
resultDiv.classList.add('success');
}
}
</script>
<script src="scripts.js"></script>
</body>
</html>
</html>

231
web/main.js Normal file
View File

@ -0,0 +1,231 @@
// 创建 WebSocket 连接
const socket = new WebSocket('ws://localhost:8080'); // 后端WebSocket服务器的地址
socket.onopen = () => {
console.log('WebSocket 连接已建立');
};
socket.onmessage = (event) => {
const data = JSON.parse(event.data);
if (data.type === 'urlResult') {
displayUrlResult(data.result);
} else if (data.type === 'imageResult') {
displayImageResult(data.result);
} else if (data.type === 'textResult') {
displayTextResult(data.result);
}
};
socket.onerror = (error) => {
console.error('WebSocket 错误:', error);
};
socket.onclose = () => {
console.log('WebSocket 连接关闭');
};
// 钓鱼网站检测
function checkPhishingWebsite() {
const url = document.getElementById('urlInput').value;
if (url) {
socket.send(JSON.stringify({ type: 'checkPhishing', url }));
} else {
alert("请输入网址");
}
}
// 聊天图片检测
function checkChatImage() {
const imageInput = document.getElementById('imageInput');
if (imageInput.files.length > 0) {
const file = imageInput.files[0];
const reader = new FileReader();
reader.onload = function(e) {
socket.send(JSON.stringify({ type: 'checkImage', imageData: e.target.result }));
};
reader.readAsDataURL(file);
} else {
alert("请上传图片进行检测");
}
}
// 话术检测
function checkScript() {
const text = document.getElementById('textInput').value;
if (text) {
socket.send(JSON.stringify({ type: 'checkScript', text }));
} else {
alert("请输入文本进行检测");
}
}
// 显示检测结果（适配语言切换）
function displayUrlResult(result) {
const resultDiv = document.getElementById('urlResult');
const language = localStorage.getItem('language') || 'zh-CN';
const translations = {
'zh-CN': {
warning: '警告！这是一个钓鱼网站。',
safe: '这个网站看起来安全。',
},
'en-US': {
warning: 'Warning! This is a phishing website.',
safe: 'This website looks safe.',
},
};
if (result.isPhishing) {
resultDiv.textContent = translations[language].warning;
resultDiv.classList.remove('success');
resultDiv.classList.add('error');
} else {
resultDiv.textContent = translations[language].safe;
resultDiv.classList.remove('error');
resultDiv.classList.add('success');
}
}
function displayImageResult(result) {
const resultDiv = document.getElementById('imageResult');
const language = localStorage.getItem('language') || 'zh-CN';
const translations = {
'zh-CN': {
warning: '警告！图片检测到可疑内容。',
safe: '图片通过检测。',
},
'en-US': {
warning: 'Warning! Suspicious content detected in the image.',
safe: 'The image passed the check.',
},
};
if (result.isSuspicious) {
resultDiv.textContent = translations[language].warning;
resultDiv.classList.remove('success');
resultDiv.classList.add('error');
} else {
resultDiv.textContent = translations[language].safe;
resultDiv.classList.remove('error');
resultDiv.classList.add('success');
}
}
function displayTextResult(result) {
const resultDiv = document.getElementById('textResult');
const language = localStorage.getItem('language') || 'zh-CN';
const translations = {
'zh-CN': {
warning: '警告！检测到可疑话术。',
safe: '文本通过检测。',
},
'en-US': {
warning: 'Warning! Suspicious script detected.',
safe: 'The text passed the check.',
},
};
if (result.isSuspicious) {
resultDiv.textContent = translations[language].warning;
resultDiv.classList.remove('success');
resultDiv.classList.add('error');
} else {
resultDiv.textContent = translations[language].safe;
resultDiv.classList.remove('error');
resultDiv.classList.add('success');
}
}
// 语言切换
function switchLanguage(language) {
const translations = {
'zh-CN': {
title: 'AntiScamAI',
phishingLabel: '钓鱼网站检测',
phishingPlaceholder: '输入网址进行检测',
phishingButton: '检测网址',
imageLabel: '聊天图片检测',
imageButton: '检测图片',
textLabel: '话术检测',
textPlaceholder: '输入文本进行检测',
textButton: '检测话术',
darkModeButton: '切换深色模式',
urlWarning: '警告！这是一个钓鱼网站。',
urlSafe: '这个网站看起来安全。',
imageWarning: '警告！图片检测到可疑内容。',
imageSafe: '图片通过检测。',
textWarning: '警告！检测到可疑话术。',
textSafe: '文本通过检测。',
},
'en-US': {
title: 'AntiScamAI',
phishingLabel: 'Phishing Website Detection',
phishingPlaceholder: 'Enter URL to check',
phishingButton: 'Check URL',
imageLabel: 'Chat Image Detection',
imageButton: 'Check Image',
textLabel: 'Script Detection',
textPlaceholder: 'Enter text to check',
textButton: 'Check Script',
darkModeButton: 'Toggle Dark Mode',
urlWarning: 'Warning! This is a phishing website.',
urlSafe: 'This website looks safe.',
imageWarning: 'Warning! Suspicious content detected in the image.',
imageSafe: 'The image passed the check.',
textWarning: 'Warning! Suspicious script detected.',
textSafe: 'The text passed the check.',
},
};
const translation = translations[language];
document.querySelector('h1').textContent = translation.title;
document.querySelectorAll('h2')[0].textContent = translation.phishingLabel;
document.querySelector('#urlInput').placeholder = translation.phishingPlaceholder;
document.querySelectorAll('button')[2].textContent = translation.phishingButton;
document.querySelectorAll('h2')[1].textContent = translation.imageLabel;
document.querySelectorAll('button')[3].textContent = translation.imageButton;
document.querySelectorAll('h2')[2].textContent = translation.textLabel;
document.querySelector('#textInput').placeholder = translation.textPlaceholder;
document.querySelectorAll('button')[4].textContent = translation.textButton;
document.querySelector('.theme-switcher button').textContent = translation.darkModeButton;
// 更新结果文本
const urlResult = document.getElementById('urlResult');
if (urlResult.textContent.includes('警告')) {
urlResult.textContent = translation.urlWarning;
} else if (urlResult.textContent.includes('安全')) {
urlResult.textContent = translation.urlSafe;
}
const imageResult = document.getElementById('imageResult');
if (imageResult.textContent.includes('警告')) {
imageResult.textContent = translation.imageWarning;
} else if (imageResult.textContent.includes('通过')) {
imageResult.textContent = translation.imageSafe;
}
const textResult = document.getElementById('textResult');
if (textResult.textContent.includes('警告')) {
textResult.textContent = translation.textWarning;
} else if (textResult.textContent.includes('通过')) {
textResult.textContent = translation.textSafe;
}
}
// 页面加载时初始化语言
window.onload = () => {
const savedLanguage = localStorage.getItem('language') || 'zh-CN';
switchLanguage(savedLanguage);
};
// 深色模式切换
function toggleDarkMode() {
document.body.classList.toggle('dark-theme');
const isDarkMode = document.body.classList.contains('dark-theme');
localStorage.setItem('darkMode', isDarkMode);
}
// 页面加载时初始化深色模式
window.onload = () => {
const isDarkMode = localStorage.getItem('darkMode') === 'true';
if (isDarkMode) document.body.classList.add('dark-theme');
};

122
web/style.css
View File

@ -1,122 +0,0 @@
/* 重置一些默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
line-height: 1.6;
}
/* 容器样式 */
.container {
width: 80%;
margin: 50px auto;
text-align: center;
}
/* 标题 */
h1, h2 {
color: #444;
font-size: 24px;
margin-bottom: 20px;
}
/* 按钮样式 */
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
border-radius: 5px;
}
button:hover {
background-color: #45a049;
}
/* 输入框样式 */
textarea, select, input[type="number"], input[type="checkbox"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
border: 1px solid #ddd;
font-size: 16px;
}
/* 表格样式 */
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
table, th, td {
border: 1px solid #ddd;
}
th, td {
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
/* 页面内容区 */
#settings-page, #manual-detect-page, #auto-detect-toggle, #intercept-logs-page, #system-logs-page {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-top: 20px;
}
/* 结果展示区域 */
#manual-result, #auto-detect-toggle, #intercept-logs-page, #system-logs-page {
margin-top: 20px;
font-size: 18px;
}
/* 间距与对齐 */
label {
font-size: 16px;
display: block;
margin-top: 10px;
}
input[type="number"], select, textarea {
max-width: 300px;
margin: 10px auto;
display: block;
}
/* 开关样式 */
input[type="checkbox"] {
width: 20px;
height: 20px;
}
/* 手动检测文本框 */
textarea {
height: 120px;
}
/* 日志页面内容 */
#intercept-logs-page, #system-logs-page {
overflow-y: auto;
max-height: 300px;
}
#intercept-logs-page table, #system-logs-page table {
margin-top: 10px;
}

117
web/styles.css Normal file
View File

@ -0,0 +1,117 @@
body {
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #f4f4f9, #e6f7ff);
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: 50px auto;
background-color: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
.section {
margin: 30px 0;
}
.section input,
.section button {
padding: 10px;
font-size: 16px;
width: 100%;
border: 1px solid #ccc;
border-radius: 4px;
margin: 10px 0;
}
.section input[type="file"] {
width: auto;
}
.section button {
background-color: #4c68af;
color: white;
cursor: pointer;
}
.section button:hover {
background-color: #4553a0;
}
/*
.result {
margin-top: 20px;
padding: 10px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 4px;
}
.result p {
margin: 5px 0;
}
.result.success {
border-color: #4CAF50;
color: #4CAF50;
}
.result.error {
border-color: #f44336;
color: #f44336;
}
*/
.section button {
background-color: #4c68af;
color: white;
cursor: pointer;
width: auto; /* 修改宽度 */
padding: 10px 20px; /* 调整内边距 */
border-radius: 20px; /* 添加圆角 */
}
/* 添加的设置页面样式 */
.section label {
display: block;
margin: 10px 0;
font-size: 16px;
color: #555;
}
.section select {
padding: 10px;
font-size: 16px;
width: 100%;
border: 1px solid #ccc;
border-radius: 4px;
margin: 10px 0;
}
.section input[type="checkbox"],
.section input[type="radio"] {
margin-right: 10px;
}
.section button {
background-color: #4c68af;
color: white;
cursor: pointer;
width: auto;
padding: 10px 20px;
border-radius: 20px;
border: none;
font-size: 16px;
margin-top: 10px;
}
.section button:hover {
background-color: #4553a0;
}