File size: 3,691 Bytes
30e7eba
90b3e79
30e7eba
90b3e79
 
 
d19f708
90b3e79
 
 
d19f708
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
90b3e79
d19f708
 
 
 
 
 
 
90b3e79
 
 
d19f708
 
90b3e79
d19f708
 
 
 
 
 
 
90b3e79
 
30e7eba
 
 
90b3e79
 
d19f708
90b3e79
 
d19f708
90b3e79
 
 
 
 
d19f708
30e7eba
 
90b3e79
 
 
 
 
30e7eba
90b3e79
 
 
30e7eba
90b3e79
d19f708
 
30e7eba
90b3e79
 
 
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
<!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: #121212; /* Dark background */
            color: #e0e0e0; /* Light text color */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            transition: background-color 0.3s;
        }
        h1 {
            margin-bottom: 20px;
        }
        label {
            margin-top: 10px;
        }
        input[type="number"] {
            padding: 10px;
            margin: 10px 0;
            border: none;
            border-radius: 5px;
            background-color: #1f1f1f; /* Darker input background */
            color: #e0e0e0; /* Input text color */
            width: 200px;
            transition: background-color 0.3s;
        }
        input[type="number"]:focus {
            background-color: #272727; /* Input focus color */
            outline: none;
        }
        button {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            background-color: #6200ea; /* Button color */
            color: white;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #3700b3; /* Button hover color */
        }
        .output {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #444; /* Output border */
            border-radius: 4px;
            background-color: #1f1f1f; /* Output background */
            width: 300px; /* Set width for output */
            text-align: center;
        }
        .latex {
            margin-top: 10px;
            color: #90caf9; /* LaTeX output color */
        }
    </style>
</head>
<body>

    <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>

    <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 representation
            const latexEquation = `T = \\frac{S}{405} \\times n`;
            const latexOutput = `Total Time: ${totalTime.toFixed(4)} minutes<br>LaTeX Equation: \\[${latexEquation}\\]`;

            // Update HTML elements
            document.getElementById("result_text").innerText = `Total Time: ${totalTime.toFixed(4)} minutes`;
            document.getElementById("result_latex").innerHTML = latexOutput;

            // Render LaTeX
            MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
        };
    </script>

</body>
</html>