Spaces:
Running
Running
File size: 5,888 Bytes
30e7eba 90b3e79 30e7eba 90b3e79 d19f708 90b3e79 7b9336d d19f708 7b9336d d19f708 7b9336d d19f708 7b9336d d19f708 7b9336d d19f708 7b9336d d19f708 7b9336d d19f708 7b9336d d19f708 7b9336d d19f708 7b9336d d19f708 7b9336d d19f708 90b3e79 7b9336d d19f708 7b9336d d19f708 7b9336d d19f708 7b9336d 90b3e79 7b9336d 90b3e79 d19f708 90b3e79 7b9336d d19f708 7b9336d d19f708 90b3e79 7b9336d 90b3e79 30e7eba 7b9336d 30e7eba 90b3e79 30e7eba 90b3e79 30e7eba de2f69e 30e7eba 90b3e79 de2f69e 30e7eba 90b3e79 d19f708 90b3e79 30e7eba |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 |
<!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>
|