264 lines
9.2 KiB
HTML
264 lines
9.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Upload your files in order to begin testing!</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
</head>
|
|
|
|
<body class="bg-white text-gray-200 min-h-screen flex flex-col">
|
|
|
|
|
|
<div id="loadingOverlay"
|
|
class="hidden fixed inset-0 bg-black bg-opacity-80 flex flex-col justify-center items-center z-50">
|
|
|
|
<div class="animate-spin h-20 w-20 border-4 border-orange-500 border-t-transparent rounded-full"></div>
|
|
|
|
<p class="mt-6 text-2xl text-orange-500 font-semibold text-center" id="loadingText"></p>
|
|
|
|
<div id="progressContainer" class="w-full max-w-lg mt-10 hidden flex flex-col items-center">
|
|
<div class="w-full bg-gray-700 rounded-full h-6 overflow-hidden shadow-lg">
|
|
<div id="progressBar"
|
|
class="bg-orange-500 h-6 transition-all duration-300 ease-out"
|
|
style="width: 0%;"></div>
|
|
</div>
|
|
|
|
<p id="progressLabel" class="text-center text-orange-500 mt-3 text-xl font-semibold">0%</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<nav class="bg-orange-400 p-4 shadow-lg">
|
|
<div class="max-w-6xl mx-auto flex items-center justify-center static">
|
|
<div class="w-40 absolute left-0">
|
|
<img src="/img/FEI_logo.svg" alt="FEI Logo">
|
|
</div>
|
|
<div class="w-40 absolute left-40">
|
|
<img src="/img/kemt_logo.png" alt="KEMT Logo">
|
|
</div>
|
|
|
|
<h1 class="text-2xl font-bold text-black">
|
|
Isolation Forest & Autoencoder Testing
|
|
</h1>
|
|
|
|
<button id="menuBtn"
|
|
class="absolute right-0 text-lg px-4 py-2 text-white hover:text-teal-300 transition">
|
|
Menu ▸
|
|
</button>
|
|
|
|
<div id="menuPanel"
|
|
class="hidden absolute right-0 top-14 w-48 bg-orange-500 border border-black rounded-xl shadow-xl
|
|
opacity-0 translate-y-3 transition-all duration-300">
|
|
<a href="/" class="block px-4 py-3 hover:bg-gray-600 hover:text-orange-500 rounded-t-xl transition">Home</a>
|
|
<a href="/upload" class="block px-4 py-3 hover:bg-gray-600 hover:text-orange-500 transition">Upload Dataset</a>
|
|
<a href="/default" class="block px-4 py-3 hover:bg-gray-600 hover:text-orange-500 rounded-b-xl transition">CICIDS Demo</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
|
|
<main class="flex-grow pb-10">
|
|
|
|
<div class="max-w-4xl mx-auto mt-16 p-6 bg-gray-600 rounded-xl shadow-xl">
|
|
|
|
|
|
<section id="step-1">
|
|
<h2 class="text-3xl font-bold text-orange-500 mb-4 flex items-center justify-center">
|
|
Upload your custom dataset here!
|
|
</h2>
|
|
|
|
<p class="text-lg leading-relaxed mb-6 text-center">
|
|
Here, you can upload your <span class="text-orange-500 font-semibold">own</span> dataset and test it out on either
|
|
<span class="text-orange-500 font-semibold">Isolation Forest</span> or
|
|
<span class="text-orange-500 font-semibold">Autoencoder</span>.
|
|
</p>
|
|
|
|
<p class="text-lg leading-relaxed mb-6 text-center">
|
|
Please note, you can only use .CSV format when uploading.
|
|
</p>
|
|
|
|
<form class="w-full flex justify-center">
|
|
<label for="file_input"
|
|
class="group relative cursor-pointer w-full max-w-md border-2 border-dashed border-orange-500/50
|
|
rounded-2xl p-8 text-center bg-gradient-to-br from-gray-900 to-gray-800 transition-all duration-300
|
|
hover:border-orange-300 hover:shadow-2xl hover:shadow-orange-500/25">
|
|
|
|
<div class="flex flex-col items-center gap-4">
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
class="h-12 w-12 text-orange-500 transition-transform duration-300 group-hover:scale-110"
|
|
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
|
|
d="M12 16v-8m0 0l-3 3m3-3l3 3M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2" />
|
|
</svg>
|
|
|
|
<input
|
|
id="file_input"
|
|
type="file"
|
|
name="filename"
|
|
accept=".csv"
|
|
class="block text-sm text-gray-300
|
|
file:mr-4 file:py-2 file:px-4
|
|
file:rounded-lg file:border-0
|
|
file:bg-orange-500 file:text-gray-900
|
|
hover:file:bg-orange-400 transition" />
|
|
|
|
<p id="file_hint" class="text-sm text-gray-400">Upload a CSV file to continue.</p>
|
|
</div>
|
|
</label>
|
|
</form>
|
|
</section>
|
|
|
|
|
|
<section id="step-2" class="hidden mt-12">
|
|
<h3 class="text-2xl font-bold text-orange-500 mb-4 text-center">
|
|
Select column that represents if data are normal or anomaly
|
|
</h3>
|
|
|
|
<div class="flex flex-col items-center gap-4">
|
|
<select id="label_select" class="bg-gray-900 border border-gray-600 rounded-lg px-4 py-2 w-72">
|
|
<option value="">-- select label column --</option>
|
|
</select>
|
|
|
|
<p id="label_error" class="text-red-400 text-sm hidden">Please select a label column.</p>
|
|
|
|
<button id="btn_step2_next"
|
|
class="px-6 py-2 rounded-lg bg-orange-500 text-white font-semibold hover:bg-orange-400 transition">
|
|
Next
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section id="step-3" class="hidden mt-12">
|
|
<h3 class="text-2xl font-bold text-orange-500 mb-2 text-center">
|
|
Select NORMAL label values
|
|
</h3>
|
|
|
|
<p class="text-white text-sm text-center mb-6">
|
|
Choose which values represent <span class="text-orange-500 font-semibold">normal</span> traffic/data.
|
|
</p>
|
|
|
|
<div id="normal_values" class="max-w-md mx-auto space-y-2"></div>
|
|
|
|
<p id="normal_error" class="text-red-400 text-sm text-center hidden mt-3">
|
|
Select at least one normal value.
|
|
</p>
|
|
|
|
<div class="flex justify-center mt-6">
|
|
<button id="btn_step3_next"
|
|
class="px-6 py-2 rounded-lg bg-orange-500 text-gray-900 font-semibold hover:bg-orange-400 transition">
|
|
Next
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section id="step-4" class="hidden mt-12">
|
|
<h3 class="text-2xl font-bold text-orange-500 mb-2 text-center">
|
|
Select numeric feature columns
|
|
</h3>
|
|
|
|
<p class="text-white text-sm text-center mb-4">
|
|
Pick up to <span class="text-orange-500 font-semibold">5</span> numeric columns for testing.
|
|
</p>
|
|
|
|
<div class="flex justify-center mb-3">
|
|
<span id="feature_counter"
|
|
class="text-sm text-gray-300 bg-gray-900/50 border border-gray-700 rounded-full px-4 py-1">
|
|
0 / 5 selected
|
|
</span>
|
|
</div>
|
|
|
|
<div id="feature_list" class="max-w-md mx-auto space-y-2"></div>
|
|
|
|
<p id="feature_error" class="text-red-400 text-sm text-center hidden mt-3">
|
|
Select at least 1 and at most 5 numeric columns.
|
|
</p>
|
|
|
|
<div class="flex justify-center mt-6">
|
|
<button id="btn_run"
|
|
class="px-6 py-2 rounded-lg bg-orange-500 text-white font-semibold hover:bg-orange-400 transition">
|
|
Run
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section id="step-5" class="hidden mt-16">
|
|
|
|
<h2 class="text-3xl font-bold text-orange-500 mb-4 flex items-center justify-center">
|
|
Choose your desired algorithm:
|
|
</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-10">
|
|
<button id="btnIF"
|
|
class="bg-gray-700 p-6 rounded-xl shadow-xl hover:-translate-y-1 transition">
|
|
<h3 class="text-2xl font-semibold text-orange-500 mb-2">Isolation Forest</h3>
|
|
<p class="text-white">Detect anomalies using random isolation trees.</p>
|
|
</button>
|
|
|
|
<button id="btnAE"
|
|
class="bg-gray-700 p-6 rounded-xl shadow-xl hover:-translate-y-1 transition">
|
|
<h3 class="text-2xl font-semibold text-orange-500 mb-2">Autoencoder</h3>
|
|
<p class="text-white">Neural network reconstruction-based anomaly detection.</p>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="w-full flex justify-center mt-10">
|
|
<button id="startBtn"
|
|
class="px-10 py-4 text-xl font-bold rounded-xl bg-gray-700 text-white cursor-not-allowed">
|
|
Start
|
|
</button>
|
|
</div>
|
|
|
|
<div id="resultContainer" class="mt-12 hidden"></div>
|
|
</section>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
|
|
<footer class="bg-orange-400 flex items-center justify-center h-10 w-full mt-auto">
|
|
<p class="text-black">© 2025 Michal Utlak</p>
|
|
</footer>
|
|
|
|
<script src="/JS/menu.js"></script>
|
|
<script src="/JS/upload.js"></script>
|
|
<script src="/JS/upload_choosing_fetch.js"></script>
|
|
|
|
<script>
|
|
const uploadField = document.getElementById("file_input");
|
|
|
|
uploadField.onchange = function() {
|
|
const MAX_SIZE = 50 * 1024 * 1024;
|
|
|
|
if(this.files[0].size > MAX_SIZE) {
|
|
showErrorPopup("File is too big! Maximum size is 50MB.");
|
|
this.value = "";
|
|
}
|
|
};
|
|
|
|
function showErrorPopup(message) {
|
|
const popup = document.createElement("div");
|
|
|
|
popup.innerHTML = `
|
|
<div class="fixed inset-0 flex justify-center items-center bg-black bg-opacity-70 z-50">
|
|
<div class="bg-red-600 p-6 rounded-xl shadow-xl text-center max-w-md">
|
|
<h2 class="text-2xl font-bold text-white mb-4">Error</h2>
|
|
<p class="text-white mb-6">${message}</p>
|
|
<button id="closeError"
|
|
class="bg-white text-red-600 px-6 py-2 rounded-lg font-semibold hover:bg-gray-200 transition">
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
document.body.appendChild(popup);
|
|
document.getElementById("closeError").onclick = () => popup.remove();
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html> |