-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcompute-calculator.html
118 lines (116 loc) · 5.52 KB
/
compute-calculator.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Compute Calculator</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-14UBac9knxQGhMvFq3MqPpIFtfwyl7t1kjvCAGlnZi1Lz9pyb7VLOg5+/ccJcVfO/TD5n5V5l5ia1rQZ6ZO9dQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1>Compute Calculator</h1>
<form id="compute-form">
<label for="model">Model:</label>
<select id="model" name="model">
<option value="" disabled selected>Select pre-determined model</option>
<option value="model-1">Model 1</option>
<option value="model-2">Model 2</option>
<option value="model-3">Model 3</option>
<option value="custom">Custom</option>
</select>
<div id="custom-fields" style="display:none">
<label for="parameters">Parameters:</label>
<input type="text" id="parameters" name="parameters" placeholder="Enter parameters" />
<label for="tokens">Tokens:</label>
<input type="number" id="tokens" name="tokens" placeholder="Enter number of tokens" />
</div>
<label for="compute-amount">Compute Amount:</label>
<select id="compute-amount" name="compute-amount">
<option value="" disabled selected>Select compute chip or custom</option>
<option value="A100">A100</option>
<option value="H100">H100</option>
<option value="V100">V100</option>
<option value="custom">Custom</option>
</select>
<div id="custom-compute-amount" style="display:none">
<label for="custom-teraflops">Custom Teraflops:</label>
<input type="number" id="custom-teraflops" name="custom-teraflops" placeholder="Enter custom teraflops" />
</div>
<label for="chip-number">Number of Chips:</label>
<input type="number" id="chip-number" name="chip-number" placeholder="Enter number of chips" />
<div class="slidecontainer">
<span class="slider-label">Utilization Rate:</span>
<input type="range" min="0" max="1" step="0.01" value="0.25" class="slider" id="utilization-rate">
<span class="slider-value" id="utilization-rate-value">0.25</span>
</div>
<label for="training-time">Training Time:</label>
<input type="number" id="training-time" name="training-time" placeholder="Enter training time" />
<div class="button-container">
<button type="submit" id="calculate-button">Calculate</button>
</div>
</form>
</div>
<script src="script.js"></script>
<script>
document.getElementById("initalize").onclick = function() {
switch (document.getElementById("gpu").value) {
case "h100":
var gpu = new GPU("H100", 1000e12);
break;
case "a100":
var gpu = new GPU("A100", 312e12);
break;
case "geforce rtx 3080":
var gpu = new GPU("GeForce RTX 3090", 30e12);
break;
case "geforce rtx 3070":
var gpu = new GPU("GeForce RTX 3070", 85e12);
break;
case "geforce rtx 2080 ti":
var gpu = new GPU("GeForce RTX 2080 Ti", 28.5e12);
break;
case "tesla v100":
var gpu = new GPU("Tesla V100", 125e12);
break;
case "tesla t4":
var gpu = new GPU("Tesla T4", 16e12);
break;
}
switch (document.getElementById("model").value) {
case "gpt-3":
var model = new Model("GPT-3", 175000000000, 500000000000);
break;
case "BERT-base":
var model = new Model("BERT-base",110000000,5000000000);
break;
case "Test":
var model = new Model("Test", 350e9, 1e12);
break;
case "LaMDA":
var model = new Model("LaMDA", 137000000000, 168000000000);
break;
case "Gopher":
var model = new Model("Gopher", 280e9, 300e9);
break;
case "MT-NLG 530B":
var model = new Model("MT-NLG 530B", 530e9, 270e9);
break;
case "chinchilla":
var model = new Model("Chinchilla", 70e9, 1.4e12);
break;
}
var nc = document.getElementById("number-of-chips").value;
var util = document.getElementById("utilization-rate").value;
//get util float value
util = parseFloat(util);
const compute = new TransformerFLOPs(gpu,null,model,null,null,nc,util,null);
compute.calculateMissingVariable();
var seconds = compute.prettyTime(compute.time);
// set the innerHTML to "time required to train {model} on {gpu}: {pretty_time}"
document.getElementById("result").innerHTML = `Time required to train ${model.name} on ${gpu.name}: ${seconds}`;
}
</script>
</body>
</html>