// Load previously uploaded files when page loads function loadSavedFiles() { const files = JSON.parse(localStorage.getItem('uploadedFiles') || '[]'); const fileContainer = document.getElementById('file-container'); // Clear existing cards except the add button const existingCards = document.querySelectorAll('custom-file-card'); existingCards.forEach(card => card.remove()); // Recreate cards from localStorage files.forEach(file => { const card = document.createElement('custom-file-card'); card.setAttribute('name', file.name); card.setAttribute('status', file.status); fileContainer.insertBefore(card, addFileCard); }); } document.addEventListener('DOMContentLoaded', function() { // Load any previously uploaded files loadSavedFiles(); // Initialize modal functionality const addFileCard = document.getElementById('add-file-card'); const uploadModal = document.getElementById('upload-modal'); const closeModal = document.getElementById('close-modal'); const uploadForm = document.getElementById('upload-form'); // Open modal when add file card is clicked document.getElementById('add-file-card').addEventListener('click', () => { document.getElementById('upload-modal').classList.remove('hidden'); }); // Close modal document.getElementById('close-modal').addEventListener('click', () => { document.getElementById('upload-modal').classList.add('hidden'); }); // Handle file upload uploadForm.addEventListener('submit', async (e) => { e.preventDefault(); e.stopPropagation(); const fileName = document.getElementById('file-name').value.trim(); const fileInput = document.getElementById('file-upload'); const file = fileInput.files[0]; if (!file || !fileName) { alert('Please provide both a project name and select a file'); return false; } // Create a new file card immediately createFileCard(fileName, 'pending'); // Close modal uploadModal.classList.add('hidden'); // Simulate API call with mock response try { // Show loading state updateFileCardStatus(fileName, 'pending'); // Simulate API delay await new Promise(resolve => setTimeout(resolve, 2000)); // Generate mock response matching the API format const mockResponses = [ { "node": "convert_to_fcg", "output": { "fcg_file_path": "/tmp/tmp2l9mdy32/uploaded_file.fcg" } }, { "node": "detect_vulnerability_src", "output": { "predicted_class": Math.random() > 0.5 ? "Vulnerable" : "NonVulnerable", "confidence_score": (Math.random() * 0.5 + 0.5).toFixed(7) } }, { "node": "detect_vulnerability_func", "output": { "vulnerable_functions": [ { "function_name": "Example.doSomething()", "function_code": "function doSomething() public {\n // Vulnerable code\n}", "prediction": 1, "confidence": "99.99%" } ] } }, { "node": "explain_vulnerability_func", "output": { "explanations": [ { "function_name": "Example.doSomething()", "explanation": "Vulnerability analysis of the function...\n\n### Security Issues Found:\n1. Direct use of block.timestamp for critical logic\n2. Potential front-running possible\n3. Missing access controls" } ] } } ]; // Process each mock response in sequence for (const mockResponse of mockResponses) { switch(mockResponse.node) { case 'detect_vulnerability_src': const isVulnerable = mockResponse.output.predicted_class === "Vulnerable"; updateFileCardStatus(fileName, isVulnerable ? 'vulnerable' : 'safe'); localStorage.setItem(`analysis_${fileName}`, JSON.stringify({ isVulnerable, confidence: mockResponse.output.confidence_score, rawResponse: mockResponses // Store full response })); if (isVulnerable) { setTimeout(() => { window.location.href = `analysis.html?file=${encodeURIComponent(fileName)}`; }, 1500); } break; default: // Store other responses for detail view localStorage.setItem(`${mockResponse.node}_${fileName}`, JSON.stringify(mockResponse)); } } } catch (error) { console.error('Error:', error); updateFileCardStatus(fileName, 'error'); // Show error message to user alert('Analysis failed. Please try again.'); } // Reset form // Reset form after slight delay to allow user to see submission feedback setTimeout(() => { uploadForm.reset(); }, 500); return false; }); // Function to create a new file card function createFileCard(name, status) { const fileContainer = document.getElementById('file-container'); const card = document.createElement('custom-file-card'); card.setAttribute('name', name); card.setAttribute('status', status); fileContainer.insertBefore(card, addFileCard); // Store the file info in localStorage const files = JSON.parse(localStorage.getItem('uploadedFiles') || '[]'); files.push({ name, status }); localStorage.setItem('uploadedFiles', JSON.stringify(files)); } // Function to update file card status function updateFileCardStatus(name, status) { const cards = document.querySelectorAll('custom-file-card'); for (const card of cards) { if (card.getAttribute('name') === name) { card.setAttribute('status', status); // Update the file status in localStorage const files = JSON.parse(localStorage.getItem('uploadedFiles') || '[]'); const fileIndex = files.findIndex(f => f.name === name); if (fileIndex !== -1) { files[fileIndex].status = status; localStorage.setItem('uploadedFiles', JSON.stringify(files)); } break; } } } // Process analysis data from API function processAnalysisData(fileName, responses) { // This function now handles the full response array for (const response of responses) { if (response.node === 'detect_vulnerability_src') { updateFileCardStatus( fileName, response.output.predicted_class === "Vulnerable" ? 'vulnerable' : 'safe' ); localStorage.setItem(`analysis_${fileName}`, JSON.stringify(response)); } localStorage.setItem(`${response.node}_${fileName}`, JSON.stringify(response)); } } });