sameersyed/Defence_FrameWork
0
1const chatMessages = document.getElementById('chatMessages');2const userInput = document.getElementById('userInput');3const sendBtn = document.getElementById('sendBtn');4const imageUpload = document.getElementById('imageUpload');5const imagePreview = document.getElementById('imagePreview');6 7let uploadedImage = null;8 9// Image upload handler10imageUpload.addEventListener('change', (e) => {11 const file = e.target.files[0];12 if (file) {13 const reader = new FileReader();14 reader.onload = (event) => {15 uploadedImage = event.target.result;16 imagePreview.innerHTML = `17 <img src="${event.target.result}" alt="Preview">18 <p style="margin-top: 8px; color: #888;">Image ready for spam detection</p>19 `;20 imagePreview.classList.add('show');21 };22 reader.readAsDataURL(file);23 }24});25 26// Send message on Enter27userInput.addEventListener('keydown', (e) => {28 if (e.key === 'Enter' && !e.shiftKey) {29 e.preventDefault();30 sendMessage();31 }32});33 34async function sendMessage() {35 const message = userInput.value.trim();36 37 if (!message && !uploadedImage) return;38 39 userInput.disabled = true;40 sendBtn.disabled = true;41 42 // Display user message43 if (message) {44 addMessage(message, 'user');45 }46 47 // Display image if uploaded48 if (uploadedImage) {49 addImageMessage(uploadedImage, 'user');50 }51 52 userInput.value = '';53 54 const loadingId = addLoadingMessage();55 56 try {57 const modelType = sessionStorage.getItem('modelType') || 'general';58 const response = await fetch('/api/chat', {59 method: 'POST',60 headers: {61 'Content-Type': 'application/json'62 },63 body: JSON.stringify({ 64 message: message || 'Analyze this image for spam',65 image: uploadedImage,66 model_type: modelType67 })68 });69 70 const data = await response.json();71 72 removeLoadingMessage(loadingId);73 74 if (response.ok) {75 addMessage(data.response, 'bot');76 const score = calculateSecurityScore(data.response);77 updateSecurityScore(score);78 } else {79 addMessage(`Error: ${data.error || 'Something went wrong'}`, 'bot');80 }81 } catch (error) {82 removeLoadingMessage(loadingId);83 addMessage('Error: Unable to connect to the server.', 'bot');84 } finally {85 userInput.disabled = false;86 sendBtn.disabled = false;87 userInput.focus();88 89 // Clear image90 uploadedImage = null;91 imagePreview.classList.remove('show');92 imagePreview.innerHTML = '';93 imageUpload.value = '';94 }95}96 97function addMessage(text, sender) {98 const messageDiv = document.createElement('div');99 messageDiv.className = `message ${sender}-message`;100 101 const avatar = document.createElement('div');102 avatar.className = 'message-avatar';103 avatar.textContent = sender === 'bot' ? '🤖' : '👤';104 105 const contentDiv = document.createElement('div');106 contentDiv.className = 'message-content';107 108 if (sender === 'bot') {109 const formattedText = formatBotMessage(text);110 contentDiv.innerHTML = `<strong>ShieldML Security Advisor</strong><div class="report-content">${formattedText}</div>`;111 } else {112 contentDiv.innerHTML = `<p>${escapeHtml(text)}</p>`;113 }114 115 messageDiv.appendChild(avatar);116 messageDiv.appendChild(contentDiv);117 chatMessages.appendChild(messageDiv);118 119 chatMessages.scrollTop = chatMessages.scrollHeight;120}121 122function addImageMessage(imageSrc, sender) {123 const messageDiv = document.createElement('div');124 messageDiv.className = `message ${sender}-message`;125 126 const avatar = document.createElement('div');127 avatar.className = 'message-avatar';128 avatar.textContent = '👤';129 130 const contentDiv = document.createElement('div');131 contentDiv.className = 'message-content';132 contentDiv.innerHTML = `<img src="${imageSrc}" style="max-width: 300px; border-radius: 8px;">`;133 134 messageDiv.appendChild(avatar);135 messageDiv.appendChild(contentDiv);136 chatMessages.appendChild(messageDiv);137 138 chatMessages.scrollTop = chatMessages.scrollHeight;139}140 141function formatBotMessage(text) {142 // First decode HTML entities that Flask jsonify creates143 text = text.replace(/&/g, '&')144 .replace(/</g, '<')145 .replace(/>/g, '>')146 .replace(/"/g, '"')147 .replace(/'/g, "'");148 149 // Convert newlines to HTML150 text = text.replace(/\n\n/g, '<div style="height: 16px;"></div>')151 .replace(/\n/g, '<br>');152 153 return text;154}155 156function escapeHtml(text) {157 const div = document.createElement('div');158 div.textContent = text;159 return div.innerHTML;160}161 162function addLoadingMessage() {163 const messageDiv = document.createElement('div');164 messageDiv.className = 'message bot-message';165 messageDiv.id = 'loading-message';166 167 const avatar = document.createElement('div');168 avatar.className = 'message-avatar';169 avatar.textContent = '🤖';170 171 const contentDiv = document.createElement('div');172 contentDiv.className = 'message-content';173 contentDiv.innerHTML = '<strong>ShieldML Security Advisor</strong><p>Analyzing... 🔍</p>';174 175 messageDiv.appendChild(avatar);176 messageDiv.appendChild(contentDiv);177 chatMessages.appendChild(messageDiv);178 chatMessages.scrollTop = chatMessages.scrollHeight;179 180 return 'loading-message';181}182 183function removeLoadingMessage(id) {184 const loadingMsg = document.getElementById(id);185 if (loadingMsg) {186 loadingMsg.remove();187 }188}189 190 191// Dataset checking functions192function showDatasetForm() {193 document.getElementById('datasetForm').style.display = 'block';194}195 196function hideDatasetForm() {197 document.getElementById('datasetForm').style.display = 'none';198}199 200async function checkDataset() {201 const totalSamples = parseInt(document.getElementById('totalSamples').value);202 const numClasses = parseInt(document.getElementById('numClasses').value);203 const featureDims = parseInt(document.getElementById('featureDims').value);204 const datasetType = document.getElementById('datasetType').value;205 206 if (!totalSamples || !numClasses) {207 alert('Please enter at least total samples and number of classes');208 return;209 }210 211 const datasetInfo = {212 total_samples: totalSamples,213 num_classes: numClasses,214 feature_dimensions: featureDims || 0,215 dataset_type: datasetType || 'unknown',216 class_distribution: generateMockDistribution(numClasses, totalSamples)217 };218 219 hideDatasetForm();220 221 addMessage(`Checking dataset: ${totalSamples} samples, ${numClasses} classes`, 'user');222 223 const loadingId = addLoadingMessage();224 225 try {226 const response = await fetch('/api/chat', {227 method: 'POST',228 headers: {229 'Content-Type': 'application/json'230 },231 body: JSON.stringify({ 232 message: 'Dataset security check',233 dataset: datasetInfo234 })235 });236 237 const data = await response.json();238 239 removeLoadingMessage(loadingId);240 241 if (response.ok) {242 addMessage(data.response, 'bot');243 const score = calculateSecurityScore(data.response);244 updateSecurityScore(score);245 } else {246 addMessage(`Error: ${data.error || 'Something went wrong'}`, 'bot');247 }248 } catch (error) {249 removeLoadingMessage(loadingId);250 addMessage('Error: Unable to connect to the server.', 'bot');251 }252 253 // Clear form254 document.getElementById('totalSamples').value = '';255 document.getElementById('numClasses').value = '';256 document.getElementById('featureDims').value = '';257 document.getElementById('datasetType').value = '';258}259 260function generateMockDistribution(numClasses, totalSamples) {261 // Generate mock class distribution for demo262 const distribution = {};263 let remaining = totalSamples;264 265 for (let i = 0; i < numClasses - 1; i++) {266 const samples = Math.floor(Math.random() * (remaining / (numClasses - i)));267 distribution[`class_${i}`] = samples;268 remaining -= samples;269 }270 distribution[`class_${numClasses - 1}`] = remaining;271 272 return distribution;273}274 275function switchTab(tab) {276 // Remove active class from all nav items277 document.querySelectorAll('.nav-item').forEach(item => {278 item.classList.remove('active');279 });280 281 // Add active class to clicked item282 event.target.closest('.nav-item').classList.add('active');283 284 // Handle tab-specific actions285 if (tab === 'chat') {286 document.getElementById('datasetForm').style.display = 'none';287 } else if (tab === 'image') {288 document.getElementById('imageUpload').click();289 } else if (tab === 'dataset') {290 showDatasetForm();291 }292}293 294function updateModelType() {295 const modelType = document.getElementById('modelType').value;296 sessionStorage.setItem('modelType', modelType);297 console.log('Model type updated:', modelType);298}299 300 301// Security Score Update302function updateSecurityScore(score) {303 const scoreFill = document.getElementById('scoreFill');304 const scoreText = document.getElementById('scoreText');305 306 if (scoreFill && scoreText) {307 scoreFill.style.width = score + '%';308 scoreText.textContent = score;309 310 // Change color based on score311 if (score >= 80) {312 scoreFill.style.background = '#51cf66';313 } else if (score >= 50) {314 scoreFill.style.background = '#667eea';315 } else {316 scoreFill.style.background = '#ff6b6b';317 }318 }319}320 321// Calculate security score from analysis322function calculateSecurityScore(response) {323 let score = 100;324 325 // Deduct points for threats326 const criticalCount = (response.match(/CRITICAL/g) || []).length;327 const highCount = (response.match(/HIGH/g) || []).length;328 const mediumCount = (response.match(/MEDIUM/g) || []).length;329 330 score -= (criticalCount * 25);331 score -= (highCount * 15);332 score -= (mediumCount * 10);333 334 return Math.max(0, Math.min(100, score));335}336 337 338// CSV Upload Handler339const csvUpload = document.getElementById('csvUpload');340const csvPreview = document.getElementById('csvPreview');341 342csvUpload.addEventListener('change', async (e) => {343 const file = e.target.files[0];344 if (!file) return;345 346 csvPreview.innerHTML = `<p>📊 Analyzing ${file.name}...</p>`;347 csvPreview.classList.add('show');348 349 const formData = new FormData();350 formData.append('file', file);351 352 const loadingId = addLoadingMessage();353 354 try {355 const response = await fetch('/api/analyze-dataset', {356 method: 'POST',357 body: formData358 });359 360 const data = await response.json();361 362 removeLoadingMessage(loadingId);363 364 if (response.ok) {365 displayDatasetAnalysis(data);366 } else {367 addMessage(`Error: ${data.error}`, 'bot');368 }369 } catch (error) {370 removeLoadingMessage(loadingId);371 addMessage('Error: Unable to analyze dataset.', 'bot');372 } finally {373 csvPreview.classList.remove('show');374 csvPreview.innerHTML = '';375 csvUpload.value = '';376 }377});378 379function displayDatasetAnalysis(data) {380 const messageDiv = document.createElement('div');381 messageDiv.className = 'message bot-message';382 383 const avatar = document.createElement('div');384 avatar.className = 'message-avatar';385 avatar.textContent = '🤖';386 387 const contentDiv = document.createElement('div');388 contentDiv.className = 'message-content';389 390 let html = `391 <strong>ShieldML ML-Based Dataset Analysis</strong>392 <div class="dataset-analysis">393 <h3>📊 Dataset: ${data.filename}</h3>394 395 <div class="info-section">396 <h4>Dataset Information</h4>397 <p><strong>Total Samples:</strong> ${data.analysis.total_samples}</p>398 <p><strong>Total Features:</strong> ${data.analysis.total_features}</p>399 <p><strong>Training Safety:</strong> <span class="risk-${data.analysis.training_safety.toLowerCase()}">${data.analysis.training_safety}</span></p>400 </div>401 402 <div class="risk-section">403 <h4>⚠️ ML-Based Risk Assessment</h4>404 <p class="risk-score ${getRiskClass(data.analysis.overall_risk_score)}">405 Overall Risk Score: ${data.analysis.overall_risk_score}%406 </p>407 <ul>408 `;409 410 data.analysis.risks.forEach(risk => {411 html += `<li class="risk-${risk.severity.toLowerCase()}">412 <strong>${risk.type}</strong> (${risk.severity})413 <br>Confidence: ${risk.confidence}%414 <br>${risk.description}415 <br><em>Suggestion: ${risk.suggestion}</em>416 </li>`;417 });418 419 html += `420 </ul>421 </div>422 `;423 424 // Display charts if available425 if (data.charts && Object.keys(data.charts).length > 0) {426 html += `427 <div class="charts-section">428 <h4>📈 Visualizations</h4>429 `;430 431 for (const [chartName, chartData] of Object.entries(data.charts)) {432 if (chartData) {433 html += `434 <div class="chart-container">435 <h5>${chartName.replace(/_/g, ' ').toUpperCase()}</h5>436 <img src="${chartData}" alt="${chartName}" style="max-width: 100%; border-radius: 8px; margin: 10px 0;">437 </div>438 `;439 }440 }441 442 html += `443 </div>444 `;445 }446 447 html += `448 </div>449 `;450 451 contentDiv.innerHTML = html;452 messageDiv.appendChild(avatar);453 messageDiv.appendChild(contentDiv);454 chatMessages.appendChild(messageDiv);455 chatMessages.scrollTop = chatMessages.scrollHeight;456 457 // Update security score458 updateSecurityScore(100 - data.analysis.overall_risk_score);459}460 461function getRiskClass(score) {462 if (score > 60) return 'risk-high';463 if (score > 30) return 'risk-medium';464 return 'risk-low';465}466 467async function downloadReport() {468 try {469 const response = await fetch('/api/download-report');470 471 if (!response.ok) {472 const error = await response.json();473 alert(error.error || 'Error downloading report');474 return;475 }476 477 const blob = await response.blob();478 const url = window.URL.createObjectURL(blob);479 const a = document.createElement('a');480 a.href = url;481 a.download = 'dataset_security_report.html';482 document.body.appendChild(a);483 a.click();484 window.URL.revokeObjectURL(url);485 document.body.removeChild(a);486 487 // Show success message488 addMessage('✅ Report downloaded successfully!', 'bot');489 } catch (error) {490 alert('Error downloading report: ' + error.message);491 }492}493