From 851c37ffdf540a749dd66a1341d643f46eff22a7 Mon Sep 17 00:00:00 2001 From: Bobby Date: Mon, 20 Oct 2025 05:10:35 +0530 Subject: add js and css files --- static/js/app.js | 285 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 285 insertions(+) create mode 100644 static/js/app.js (limited to 'static/js') diff --git a/static/js/app.js b/static/js/app.js new file mode 100644 index 0000000..5cde1b7 --- /dev/null +++ b/static/js/app.js @@ -0,0 +1,285 @@ +let editor; +let currentLanguage = 'javascript'; +let chart = null; +let loadingInterval = null; +let loadingMessageIndex = 0; + +const loadingMessages = [ + "Parsing code structure...", + "Analyzing algorithm patterns...", + "Detecting time complexity...", + "Identifying nested loops...", + "Checking for recursion...", + "Examining data structures...", + "Loading execution environment...", + "Compiling test cases...", + "Generating test data...", + "Running performance benchmarks...", + "Measuring execution time...", + "Testing with small inputs...", + "Testing with large inputs...", + "Analyzing growth patterns...", + "Calculating complexity metrics...", + "Fitting complexity curves...", + "Validating results...", + "Finalizing analysis..." +]; + +const irregularIntervals = [2400, 3800, 4500, 1000, 2900, 4300, 1100, 3400, 950, 2250, 850, 3200, 2050, 1200, 1400, 1800, 900, 1300]; + +require.config({ + paths: { + vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs' + } +}); + +require(['vs/editor/editor.main'], function () { + editor = monaco.editor.create(document.getElementById('editor'), { + value: '// Write your algorithm here\nfunction algorithm(arr) {\n // Your code\n return arr;\n}', + language: 'javascript', + theme: 'vs-dark', + fontSize: 14, + minimap: { enabled: false }, + scrollBeyondLastLine: false, + automaticLayout: true, + lineNumbers: 'on', + roundedSelection: false, + scrollbar: { + vertical: 'visible', + horizontal: 'visible' + } + }); + + setupEventListeners(); +}); + +function setupEventListeners() { + // Language selector + document.getElementById('languageSelect').addEventListener('change', (e) => { + currentLanguage = e.target.value; + monaco.editor.setModelLanguage(editor.getModel(), currentLanguage); + + // default code template + const templates = { + javascript: '// Write your algorithm here\nfunction algorithm(arr) {\n // Your code\n return arr;\n}', + python: '# Write your algorithm here\ndef algorithm(arr):\n # Your code\n return arr', + go: '// Write your algorithm here\nfunc algorithm(arr []int) []int {\n // Your code\n return arr\n}' + }; + editor.setValue(templates[currentLanguage]); + }); + + // Analyze button + document.getElementById('analyzeBtn').addEventListener('click', analyzeCode); +} + +function startDynamicLoading() { + loadingMessageIndex = 0; + const loadingText = document.querySelector('#loadingState p'); + + function updateMessage() { + if (loadingMessageIndex < loadingMessages.length) { + loadingText.textContent = loadingMessages[loadingMessageIndex]; + + if (loadingMessageIndex < loadingMessages.length - 1) { + const nextInterval = irregularIntervals[loadingMessageIndex]; + loadingMessageIndex++; + loadingInterval = setTimeout(updateMessage, nextInterval); + } else { + loadingMessageIndex++; + } + } + } + + updateMessage(); +} + +function stopDynamicLoading() { + if (loadingInterval) { + clearTimeout(loadingInterval); + loadingInterval = null; + } +} + +async function analyzeCode() { + const code = editor.getValue(); + + if (!code.trim()) { + alert('Please enter code to analyze'); + return; + } + + showLoading(); + startDynamicLoading(); + + const analyzeBtn = document.getElementById('analyzeBtn'); + analyzeBtn.disabled = true; + + try { + const response = await fetch('/api/analyze', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + code: code, + language: currentLanguage + }) + }); + + const result = await response.json(); + + if (!response.ok) { + throw new Error(result.error || 'Analysis failed'); + } + + displayResults(result); + } catch (error) { + displayError(error.message); + } finally { + stopDynamicLoading(); + analyzeBtn.disabled = false; + } +} + +function showLoading() { + document.getElementById('resultsContent').style.display = 'none'; + document.getElementById('loadingState').classList.add('active'); +} + +function displayResults(result) { + stopDynamicLoading(); + document.getElementById('loadingState').classList.remove('active'); + document.getElementById('resultsContent').style.display = 'block'; + + const resultsHTML = ` +
+

Detected Complexity

+
${result.complexity}
+

+ Confidence: ${result.confidence.toFixed(1)}% +

+
+ +
+

Static Analysis

+ +
+ +
+

Performance Graph

+
+ +
+
+ +
+

Execution Timings

+ +
+ `; + + document.getElementById('resultsContent').innerHTML = resultsHTML; + + renderChart(result.performanceData, result.complexity); +} + +function renderChart(data, complexity) { + if (typeof Chart === 'undefined') { + console.error('Chart.js is not available'); + return; + } + + const ctx = document.getElementById('performanceChart'); + + // Destroy previous chart if exists + if (chart) { + chart.destroy(); + } + + chart = new Chart(ctx, { + type: 'line', + data: { + labels: data.map(d => d.size), + datasets: [{ + label: `Execution Time (${complexity})`, + data: data.map(d => d.time), + borderColor: '#667eea', + backgroundColor: 'rgba(102, 126, 234, 0.1)', + borderWidth: 2, + pointRadius: 4, + pointBackgroundColor: '#667eea', + tension: 0.4 + }] + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + labels: { color: '#d4d4d4' } + }, + tooltip: { + backgroundColor: '#252526', + titleColor: '#fff', + bodyColor: '#d4d4d4', + borderColor: '#3e3e42', + borderWidth: 1 + } + }, + scales: { + x: { + title: { + display: true, + text: 'Input Size (n)', + color: '#d4d4d4' + }, + ticks: { color: '#858585' }, + grid: { color: '#3e3e42' } + }, + y: { + title: { + display: true, + text: 'Time (ms)', + color: '#d4d4d4' + }, + ticks: { color: '#858585' }, + grid: { color: '#3e3e42' } + } + } + } + }); +} + +function displayError(message) { + stopDynamicLoading(); + document.getElementById('loadingState').classList.remove('active'); + document.getElementById('resultsContent').style.display = 'block'; + document.getElementById('resultsContent').innerHTML = ` +
+

Error

+
+ ${message} +
+
+ `; +} + +// Initialize app when DOM is ready +if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', initApp); +} else { + initApp(); +} + +function initApp() { + if (typeof Chart === 'undefined') { + console.error('Chart.js failed to load'); + alert('Failed to load required libraries. Please refresh the page.'); + } +} \ No newline at end of file -- cgit v1.2.3