<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Calculation for Dataset Training</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS_HTML"></script>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: rgba(18, 18, 18, 0.9); /* Dark background with slight transparency */
color: #e0e0e0; /* Light text color */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
transition: background-color 0.3s;
}
.background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(26, 1, 117, 0.5), rgba(225, 5, 34, 0.5)),
linear-gradient(135deg, rgba(225, 5, 152, 0.5), rgba(49, 5, 209, 0.5)),
rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px); /* Glassmorphism effect */
display: flex;
justify-content: center;
align-items: center;
}
.glass-panel {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 32px;
box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2),
-8px -8px 20px rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: transform 0.3s;
}
.glass-panel:hover {
transform: translateY(-5px); /* Neumorphism hover effect */
}
h1 {
margin-bottom: 20px;
}
label {
margin-top: 10px;
opacity: 0.8;
font-size: 0.9rem;
font-weight: bold;
text-transform: uppercase;
display: block;
}
input[type="number"] {
padding: 10px;
margin: 10px 0;
border: none;
border-radius: 5px;
background-color: rgba(31, 31, 31, 0.9); /* Darker input background */
color: #e0e0e0; /* Input text color */
width: 100%;
transition: background-color 0.3s, border-color 0.3s;
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5),
inset -5px -5px 10px rgba(255, 255, 255, 0.1);
}
input[type="number"]:focus {
background-color: rgba(39, 39, 39, 0.9); /* Input focus color */
outline: none;
}
button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: rgba(98, 0, 234, 0.9); /* Button color */
color: white;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),
-5px -5px 10px rgba(255, 255, 255, 0.1);
}
button:hover {
background-color: rgba(55, 0, 179, 0.9); /* Button hover color */
transform: translateY(-2px); /* Button hover effect */
}
.output {
margin-top: 20px;
padding: 15px;
border: 1px solid #444; /* Output border */
border-radius: 4px;
background-color: rgba(31, 31, 31, 0.9); /* Output background */
width: 100%; /* Responsive output */
text-align: center;
}
.latex {
margin-top: 10px;
color: #90caf9; /* LaTeX output color */
}
@media (max-width: 600px) {
.glass-panel {
padding: 20px;
}
input[type="number"], button {
width: calc(100% - 20px); /* Full width inputs */
}
}
</style>
</head>
<body>
<div class="background">
<div class="glass-panel">
<h1>Time Calculation for Dataset Training</h1>
<label for="dataset_size">Dataset Size (kB):</label>
<input type="number" id="dataset_size" value="67.4" step="0.1"><br>
<label for="epochs">Number of Epochs:</label>
<input type="number" id="epochs" value="1"><br>
<button id="calculate_btn">Calculate</button>
<div class="output">
<h3 id="result_text"></h3>
<div id="result_latex" class="latex"></div>
</div>
</div>
</div>
<script>
// Function to calculate total time and update results
document.getElementById("calculate_btn").onclick = function() {
const datasetSize = parseFloat(document.getElementById("dataset_size").value);
const epochs = parseInt(document.getElementById("epochs").value);
// Calculate time
const timePerEpoch = datasetSize / 405;
const totalTime = timePerEpoch * epochs;
// Create LaTeX representations
const latexEquationOriginal = `\\[ Total \\: Time = \\frac{S}{405} \\times n \\]`;
const latexEquationValues = `\\[ Total \\: Time = \\frac{${datasetSize}}{405} \\times ${epochs} = ${totalTime.toFixed(4)} \\: minutes \\]`;
// Update HTML elements
document.getElementById("result_text").innerText = `Total Time: ${totalTime.toFixed(4)} minutes`;
document.getElementById("result_latex").innerHTML = latexEquationOriginal + "<br>" + latexEquationValues;
// Render LaTeX
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
};
</script>
</body>
</html>