diff --git a/web/index.html b/web/index.html index 249faae..66b5aef 100644 --- a/web/index.html +++ b/web/index.html @@ -3,73 +3,12 @@ - 反诈骗软件 Demo - + AntiScamAI + -
-

反诈骗软件 Demo

+

AntiScamAI

@@ -96,108 +35,6 @@
- - + - + \ No newline at end of file diff --git a/web/main.js b/web/main.js new file mode 100644 index 0000000..39d542a --- /dev/null +++ b/web/main.js @@ -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'); +}; \ No newline at end of file diff --git a/web/style.css b/web/style.css deleted file mode 100644 index d26b1c5..0000000 --- a/web/style.css +++ /dev/null @@ -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; -} diff --git a/web/styles.css b/web/styles.css new file mode 100644 index 0000000..b7c6ae7 --- /dev/null +++ b/web/styles.css @@ -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; +} \ No newline at end of file