新增index页面
This commit is contained in:
parent
67a6915401
commit
3f684d99dc
173
web/index.html
173
web/index.html
@ -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
231
web/main.js
Normal 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
122
web/style.css
@ -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
117
web/styles.css
Normal 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;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user