Hugging Face's logo

Spaces:
UlrickBL
/
transformer_parameters
Running

App Files Community
UlrickBL commited on
Commit
adfaaab
·
verified ·
1 Parent(s): 124eaa7

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +222 -18
index.html CHANGED
@@ -1,19 +1,223 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Model Parameter Calculator</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ margin: 0;
11
+ padding: 0;
12
+ display: flex;
13
+ flex-direction: row;
14
+ height: 100vh;
15
+ }
16
+
17
+ .console {
18
+ width: 30%;
19
+ padding: 20px;
20
+ background-color: #f4f4f4;
21
+ overflow-y: auto;
22
+ }
23
+
24
+ .output {
25
+ width: 70%;
26
+ padding: 20px;
27
+ overflow-y: auto;
28
+ }
29
+
30
+ table {
31
+ width: 100%;
32
+ border-collapse: collapse;
33
+ }
34
+
35
+ th, td {
36
+ border: 1px solid #ddd;
37
+ padding: 8px;
38
+ text-align: left;
39
+ }
40
+
41
+ th {
42
+ background-color: #f2f2f2;
43
+ }
44
+
45
+ .highlight {
46
+ background-color: #d4edda;
47
+ color: #155724;
48
+ padding: 10px;
49
+ margin: 20px 0;
50
+ border: 1px solid #c3e6cb;
51
+ border-radius: 4px;
52
+ }
53
+ </style>
54
+ <script>
55
+ function calculateParameters() {
56
+ const hiddenSize = parseInt(document.getElementById('hidden_size').value);
57
+ const intermediateSize = parseInt(document.getElementById('intermediate_size').value);
58
+ const vocabSize = parseInt(document.getElementById('vocab_size').value);
59
+ const numKeyValueHeads = parseInt(document.getElementById('num_key_value_heads').value);
60
+ const numAttentionHeads = parseInt(document.getElementById('num_attention_heads').value);
61
+ const numHiddenLayers = parseInt(document.getElementById('num_hidden_layers').value);
62
+ const includeBias = document.getElementById('include_bias').value === 'yes';
63
+
64
+ // Attention calculations
65
+ const attentionQ = hiddenSize * hiddenSize;
66
+ const attentionV = hiddenSize * numKeyValueHeads;
67
+ const attentionBq = includeBias ? hiddenSize : 0;
68
+ const attentionBv = includeBias ? numKeyValueHeads : 0;
69
+ const attentionTotal = 2 * (attentionQ + attentionBq) + 2 * (attentionV + attentionBv);
70
+
71
+ // Feed Forward calculations
72
+ const switchW = hiddenSize * intermediateSize;
73
+ const switchB = includeBias ? intermediateSize : 0;
74
+ const luW = hiddenSize * intermediateSize;
75
+ const luB = includeBias ? intermediateSize : 0;
76
+ const projW = intermediateSize * hiddenSize;
77
+ const projB = includeBias ? hiddenSize : 0;
78
+ const feedForwardTotal = switchW + switchB + luW + luB + projW + projB;
79
+
80
+ // Embedding
81
+ const embeddingTotal = vocabSize * hiddenSize;
82
+
83
+ // 1 layer parameters
84
+ const oneLayerParams = attentionTotal + feedForwardTotal;
85
+
86
+ // Full layers parameters
87
+ const fullLayersParams = oneLayerParams * numHiddenLayers;
88
+
89
+ // Full size (includes embedding)
90
+ const fullSize = fullLayersParams + embeddingTotal;
91
+
92
+ // Display results
93
+ const outputTable = document.getElementById('output_table');
94
+ outputTable.innerHTML = `
95
+ <tr>
96
+ <th>Section</th>
97
+ <th>Parameter</th>
98
+ <th>Value</th>
99
+ </tr>
100
+ <tr>
101
+ <td>Attention</td>
102
+ <td>Q</td>
103
+ <td>${attentionQ.toLocaleString()}</td>
104
+ </tr>
105
+ <tr>
106
+ <td>Attention</td>
107
+ <td>Bq</td>
108
+ <td>${attentionBq.toLocaleString()}</td>
109
+ </tr>
110
+ <tr>
111
+ <td>Attention</td>
112
+ <td>V</td>
113
+ <td>${attentionV.toLocaleString()}</td>
114
+ </tr>
115
+ <tr>
116
+ <td>Attention</td>
117
+ <td>Bv</td>
118
+ <td>${attentionBv.toLocaleString()}</td>
119
+ </tr>
120
+ <tr>
121
+ <td>Attention</td>
122
+ <td>Total</td>
123
+ <td>${attentionTotal.toLocaleString()}</td>
124
+ </tr>
125
+ <tr>
126
+ <td>Feed Forward</td>
127
+ <td>Switch W</td>
128
+ <td>${switchW.toLocaleString()}</td>
129
+ </tr>
130
+ <tr>
131
+ <td>Feed Forward</td>
132
+ <td>Switch b</td>
133
+ <td>${switchB.toLocaleString()}</td>
134
+ </tr>
135
+ <tr>
136
+ <td>Feed Forward</td>
137
+ <td>LU W</td>
138
+ <td>${luW.toLocaleString()}</td>
139
+ </tr>
140
+ <tr>
141
+ <td>Feed Forward</td>
142
+ <td>LU b</td>
143
+ <td>${luB.toLocaleString()}</td>
144
+ </tr>
145
+ <tr>
146
+ <td>Feed Forward</td>
147
+ <td>Proj W</td>
148
+ <td>${projW.toLocaleString()}</td>
149
+ </tr>
150
+ <tr>
151
+ <td>Feed Forward</td>
152
+ <td>Proj b</td>
153
+ <td>${projB.toLocaleString()}</td>
154
+ </tr>
155
+ <tr>
156
+ <td>Feed Forward</td>
157
+ <td>Total</td>
158
+ <td>${feedForwardTotal.toLocaleString()}</td>
159
+ </tr>
160
+ <tr>
161
+ <td>Embedding</td>
162
+ <td>Embedding</td>
163
+ <td>${embeddingTotal.toLocaleString()}</td>
164
+ </tr>
165
+ `;
166
+
167
+ document.getElementById('one_layer_params').innerText = oneLayerParams.toLocaleString();
168
+ document.getElementById('full_layers_params').innerText = fullLayersParams.toLocaleString();
169
+ document.getElementById('full_size').innerText = fullSize.toLocaleString();
170
+ }
171
+ </script>
172
+ </head>
173
+ <body>
174
+
175
+ <div class="console">
176
+ <h3>Input Parameters</h3>
177
+ <label for="hidden_size">Hidden size:</label><br>
178
+ <input type="number" id="hidden_size" value="2048"><br><br>
179
+
180
+ <label for="intermediate_size">Intermediate size:</label><br>
181
+ <input type="number" id="intermediate_size" value="16384"><br><br>
182
+
183
+ <label for="vocab_size">Vocab size:</label><br>
184
+ <input type="number" id="vocab_size" value="64000"><br><br>
185
+
186
+ <label for="num_key_value_heads">Number of key-value heads:</label><br>
187
+ <input type="number" id="num_key_value_heads" value="80"><br><br>
188
+
189
+ <label for="num_attention_heads">Number of attention heads:</label><br>
190
+ <input type="number" id="num_attention_heads" value="8"><br><br>
191
+
192
+ <label for="num_hidden_layers">Number of hidden layers:</label><br>
193
+ <input type="number" id="num_hidden_layers" value="64"><br><br>
194
+
195
+ <label for="include_bias">Include bias?</label><br>
196
+ <select id="include_bias">
197
+ <option value="yes">Yes</option>
198
+ <option value="no">No</option>
199
+ </select><br><br>
200
+
201
+ <button onclick="calculateParameters()">Calculate</button>
202
+ </div>
203
+
204
+ <div class="output">
205
+ <h3>Model Parameter Results</h3>
206
+
207
+ <table id="output_table">
208
+ <tr>
209
+ <th>Section</th>
210
+ <th>Parameter</th>
211
+ <th>Value</th>
212
+ </tr>
213
+ </table>
214
+
215
+ <div class="highlight">
216
+ <strong>1 Layer Parameters:</strong> <span id="one_layer_params">0</span><br>
217
+ <strong>Full Layers Parameters:</strong> <span id="full_layers_params">0</span><br>
218
+ <strong>Complete Model Size:</strong> <span id="full_size">0</span>
219
+ </div>
220
+ </div>
221
+
222
+ </body>
223
  </html>