Update index.html

index.html

@@ -12,15 +12,15 @@
             display: flex;
             flex-direction: row;
             height: 100vh;
-            background: linear-gradient(120deg, #f8b7d4, #d1c1f2);
-            color: #4a154b;
+            background: linear-gradient(to right, #ff9a9e, #fad0c4);
+            color: #4b0082;
         }
 
         .console {
             width: 30%;
             padding: 20px;
-            background-color: #fef4fc;
-            border-right: 2px solid #d1c1f2;
+            background-color: #fdfdfd;
+            border-right: 2px solid #ff9a9e;
             overflow-y: auto;
         }
 
@@ -34,73 +34,39 @@
             width: 100%;
             border-collapse: collapse;
             margin-bottom: 20px;
+            background-color: #ffffff;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
         }
 
         th, td {
             border: 1px solid #ddd;
             padding: 8px;
-            text-align: left;
+            text-align: center;
         }
 
         th {
-            background-color: #d1c1f2;
-            color: #4a154b;
+            background-color: #ff9a9e;
+            color: #fff;
+            text-transform: uppercase;
         }
 
         .highlight {
-            background-color: #f8d7f1;
-            color: #4a154b;
+            background-color: #fdf2ff;
+            color: #800080;
             padding: 10px;
             margin: 20px 0;
-            border: 1px solid #d1c1f2;
-            border-radius: 4px;
-        }
-
-        h3 {
-            color: #4a154b;
-        }
-
-        label, input, select {
-            display: block;
-            margin-bottom: 10px;
-            width: 100%;
-        }
-
-        input, select {
-            padding: 8px;
-            border: 1px solid #d1c1f2;
-            border-radius: 4px;
-            background: #fef4fc;
-            color: #4a154b;
-        }
-
-        button {
-            background-color: #d1c1f2;
-            color: white;
-            padding: 10px 20px;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-        }
-
-        button:hover {
-            background-color: #bfa8e3;
+            border: 1px solid #ff9a9e;
+            border-radius: 8px;
         }
 
         .section-title {
-            background-color: #e9d8f5;
-            color: #4a154b;
+            margin-top: 30px;
+            font-size: 1.2em;
+            font-weight: bold;
+            color: #800080;
             text-align: center;
-            padding: 5px 0;
-            margin-bottom: 5px;
-        }
-
-        .sub-table {
-            margin-top: 10px;
-        }
-
-        .no-bias {
-            display: none;
         }
     </style>
     <script>
@@ -109,33 +75,25 @@
             const intermediateSize = parseInt(document.getElementById('intermediate_size').value);
             const vocabSize = parseInt(document.getElementById('vocab_size').value);
             const numKeyValueHeads = parseInt(document.getElementById('num_key_value_heads').value);
-            const numAttentionHeads = parseInt(document.getElementById('num_attention_heads').value);
             const numHiddenLayers = parseInt(document.getElementById('num_hidden_layers').value);
             const includeBias = document.getElementById('include_bias').value === 'yes';
 
             // Attention calculations
-            const attentionQ = hiddenSize * hiddenSize;
-            const attentionK = hiddenSize * numKeyValueHeads;
-            const attentionV = hiddenSize * numKeyValueHeads;
-            const attentionBq = includeBias ? hiddenSize : 0;
-            const attentionBk = includeBias ? numKeyValueHeads : 0;
-            const attentionBv = includeBias ? numKeyValueHeads : 0;
-            const attentionQOutput = hiddenSize;
-            const attentionKOutput = numKeyValueHeads;
-            const attentionVOutput = numKeyValueHeads;
-            const attentionTotal = 2 * (attentionQ + attentionBq) + 2 * (attentionK + attentionBk) + 2 * (attentionV + attentionBv);
+            const attentionQW = [hiddenSize, hiddenSize, hiddenSize * hiddenSize];
+            const attentionV = [hiddenSize, numKeyValueHeads, hiddenSize * numKeyValueHeads];
+            const attentionBq = includeBias ? [hiddenSize, 1, hiddenSize] : [0, 0, 0];
+            const attentionBv = includeBias ? [numKeyValueHeads, 1, numKeyValueHeads] : [0, 0, 0];
+            const attentionTotal = attentionQW[2] + attentionV[2] + attentionBq[2] + attentionBv[2];
 
             // Feed Forward calculations
-            const switchW = hiddenSize * intermediateSize;
-            const switchB = includeBias ? intermediateSize : 0;
-            const luW = hiddenSize * intermediateSize;
-            const luB = includeBias ? intermediateSize : 0;
-            const projW = intermediateSize * hiddenSize;
-            const projB = includeBias ? hiddenSize : 0;
-            const feedForwardTotal = switchW + switchB + luW + luB + projW + projB;
+            const switchW = [hiddenSize, intermediateSize, hiddenSize * intermediateSize];
+            const switchB = includeBias ? [intermediateSize, 1, intermediateSize] : [0, 0, 0];
+            const projW = [intermediateSize, hiddenSize, intermediateSize * hiddenSize];
+            const projB = includeBias ? [hiddenSize, 1, hiddenSize] : [0, 0, 0];
+            const feedForwardTotal = switchW[2] + switchB[2] + projW[2] + projB[2];
 
             // Embedding
-            const embeddingTotal = vocabSize * hiddenSize;
+            const embedding = [vocabSize, hiddenSize, vocabSize * hiddenSize];
 
             // 1 layer parameters
             const oneLayerParams = attentionTotal + feedForwardTotal;
@@ -144,36 +102,107 @@
             const fullLayersParams = oneLayerParams * numHiddenLayers;
 
             // Full size (includes embedding)
-            const fullSize = fullLayersParams + embeddingTotal;
-
-            // Display results
-            const attentionTable = document.getElementById('attention_table');
-            attentionTable.innerHTML = ` 
-                <tr><th>Type</th><th>Input Size</th><th>Output Size</th><th>Total Size</th></tr>
-                <tr><td>Q</td><td>${hiddenSize.toLocaleString()}</td><td>${attentionQOutput.toLocaleString()}</td><td>${(hiddenSize * attentionQOutput).toLocaleString()}</td></tr>
-                <tr><td>K</td><td>${hiddenSize.toLocaleString()}</td><td>${attentionKOutput.toLocaleString()}</td><td>${(hiddenSize * attentionKOutput).toLocaleString()}</td></tr>
-                <tr><td>V</td><td>${hiddenSize.toLocaleString()}</td><td>${attentionVOutput.toLocaleString()}</td><td>${(hiddenSize * attentionVOutput).toLocaleString()}</td></tr>
-                ${includeBias ? `<tr class="bias-row"><td>Bias</td><td>${attentionBq.toLocaleString()}</td><td>${attentionBk.toLocaleString()}</td><td>${attentionBv.toLocaleString()}</td><td></td></tr>` : ''}
-            `;
-
-            const feedForwardTable = document.getElementById('feed_forward_table');
-            feedForwardTable.innerHTML = `
-                <tr><th>Type</th><th>Input Size</th><th>Output Size</th><th>Total Size</th></tr>
-                <tr><td>Switch W</td><td>${hiddenSize.toLocaleString()}</td><td>${intermediateSize.toLocaleString()}</td><td>${(hiddenSize * intermediateSize).toLocaleString()}</td></tr>
-                <tr><td>LU W</td><td>${hiddenSize.toLocaleString()}</td><td>${intermediateSize.toLocaleString()}</td><td>${(hiddenSize * intermediateSize).toLocaleString()}</td></tr>
-                <tr><td>Proj W</td><td>${intermediateSize.toLocaleString()}</td><td>${hiddenSize.toLocaleString()}</td><td>${(intermediateSize * hiddenSize).toLocaleString()}</td></tr>
-                ${includeBias ? `<tr class="bias-row"><td>Bias</td><td>${switchB.toLocaleString()}</td><td>${luB.toLocaleString()}</td><td>${projB.toLocaleString()}</td><td></td></tr>` : ''}
-            `;
-
-            const embeddingTable = document.getElementById('embedding_table');
-            embeddingTable.innerHTML = `
-                <tr><th>Type</th><th>Input Size</th><th>Output Size</th><th>Total Size</th></tr>
-                <tr><td>Embedding</td><td>${vocabSize.toLocaleString()}</td><td>${hiddenSize.toLocaleString()}</td><td>${embeddingTotal.toLocaleString()}</td></tr>
-            `;
-
-            document.getElementById('one_layer_params').innerText = oneLayerParams.toLocaleString();
-            document.getElementById('full_layers_params').innerText = fullLayersParams.toLocaleString();
-            document.getElementById('full_size').innerText = fullSize.toLocaleString();
+            const fullSize = fullLayersParams + embedding[2];
+
+            // Generate tables
+            const attentionTable = `
+                <table>
+                    <tr>
+                        <th>Attention</th>
+                        <th>Input Size</th>
+                        <th>Output Size</th>
+                        <th>Total Size</th>
+                    </tr>
+                    <tr>
+                        <td>Q / Wq</td>
+                        <td>${attentionQW[0]}</td>
+                        <td>${attentionQW[1]}</td>
+                        <td>${attentionQW[2].toLocaleString()}</td>
+                    </tr>
+                    <tr>
+                        <td>V / Wv</td>
+                        <td>${attentionV[0]}</td>
+                        <td>${attentionV[1]}</td>
+                        <td>${attentionV[2].toLocaleString()}</td>
+                    </tr>
+                    ${includeBias ? `
+                    <tr>
+                        <td>Bq</td>
+                        <td>${attentionBq[0]}</td>
+                        <td>${attentionBq[1]}</td>
+                        <td>${attentionBq[2].toLocaleString()}</td>
+                    </tr>
+                    <tr>
+                        <td>Bv</td>
+                        <td>${attentionBv[0]}</td>
+                        <td>${attentionBv[1]}</td>
+                        <td>${attentionBv[2].toLocaleString()}</td>
+                    </tr>
+                    ` : ''}
+                </table>`;
+
+            const feedForwardTable = `
+                <table>
+                    <tr>
+                        <th>Feed Forward</th>
+                        <th>Input Size</th>
+                        <th>Output Size</th>
+                        <th>Total Size</th>
+                    </tr>
+                    <tr>
+                        <td>Switch / W</td>
+                        <td>${switchW[0]}</td>
+                        <td>${switchW[1]}</td>
+                        <td>${switchW[2].toLocaleString()}</td>
+                    </tr>
+                    ${includeBias ? `<tr>
+                        <td>Switch / b</td>
+                        <td>${switchB[0]}</td>
+                        <td>${switchB[1]}</td>
+                        <td>${switchB[2].toLocaleString()}</td>
+                    </tr>` : ''}
+                    <tr>
+                        <td>Proj / W</td>
+                        <td>${projW[0]}</td>
+                        <td>${projW[1]}</td>
+                        <td>${projW[2].toLocaleString()}</td>
+                    </tr>
+                    ${includeBias ? `<tr>
+                        <td>Proj / b</td>
+                        <td>${projB[0]}</td>
+                        <td>${projB[1]}</td>
+                        <td>${projB[2].toLocaleString()}</td>
+                    </tr>` : ''}
+                </table>`;
+
+            const embeddingTable = `
+                <table>
+                    <tr>
+                        <th>Embedding</th>
+                        <th>Input Size</th>
+                        <th>Output Size</th>
+                        <th>Total Size</th>
+                    </tr>
+                    <tr>
+                        <td>Embedding</td>
+                        <td>${embedding[0]}</td>
+                        <td>${embedding[1]}</td>
+                        <td>${embedding[2].toLocaleString()}</td>
+                    </tr>
+                </table>`;
+
+            // Update output
+            document.getElementById('output').innerHTML = `
+                <div class="highlight">
+                    <strong>1 Layer Parameters:</strong> ${oneLayerParams.toLocaleString()}<br>
+                    <strong>Full Layers Parameters:</strong> ${fullLayersParams.toLocaleString()}<br>
+                </div>
+                ${attentionTable}
+                ${feedForwardTable}
+                <div class="highlight">
+                    <strong>Complete Model Size:</strong> ${fullSize.toLocaleString()}
+                </div>
+                ${embeddingTable}`;
         }
     </script>
 </head>
@@ -181,52 +210,32 @@
 
 <div class="console">
     <h3>Input Parameters</h3>
-    <label for="hidden_size">Hidden size:</label>
-    <input type="number" id="hidden_size" value="2048">
-
-    <label for="intermediate_size">Intermediate size:</label>
-    <input type="number" id="intermediate_size" value="16384">
+    <label for="hidden_size">Hidden size:</label><br>
+    <input type="number" id="hidden_size" value="2048"><br><br>
 
-    <label for="vocab_size">Vocab size:</label>
-    <input type="number" id="vocab_size" value="64000">
+    <label for="intermediate_size">Intermediate size:</label><br>
+    <input type="number" id="intermediate_size" value="16384"><br><br>
 
-    <label for="num_key_value_heads">Number of key-value heads:</label>
-    <input type="number" id="num_key_value_heads" value="80">
+    <label for="vocab_size">Vocab size:</label><br>
+    <input type="number" id="vocab_size" value="64000"><br><br>
 
-    <label for="num_attention_heads">Number of attention heads:</label>
-    <input type="number" id="num_attention_heads" value="8">
+    <label for="num_key_value_heads">Number of key-value heads:</label><br>
+    <input type="number" id="num_key_value_heads" value="80"><br><br>
 
-    <label for="num_hidden_layers">Number of hidden layers:</label>
-    <input type="number" id="num_hidden_layers" value="64">
+    <label for="num_hidden_layers">Number of hidden layers:</label><br>
+    <input type="number" id="num_hidden_layers" value="64"><br><br>
 
-    <label for="include_bias">Include bias?</label>
+    <label for="include_bias">Include bias?</label><br>
     <select id="include_bias">
         <option value="yes">Yes</option>
         <option value="no">No</option>
-    </select>
+    </select><br><br>
 
     <button onclick="calculateParameters()">Calculate</button>
 </div>
 
-<div class="output">
+<div class="output" id="output">
     <h3>Model Parameter Results</h3>
-
-    <div class="section-title">1 Layer Parameters</div>
-    <div><strong>1 Layer Parameters:</strong> <span id="one_layer_params">0</span></div>
-    <div><strong>Full Layers Parameters:</strong> <span id="full_layers_params">0</span></div>
-
-    <div class="section-title">Attention Parameters</div>
-    <table id="attention_table" class="sub-table"></table>
-
-    <div class="section-title">Feed Forward Parameters</div>
-    <table id="feed_forward_table" class="sub-table"></table>
-
-    <div class="section-title">Embedding Parameters</div>
-    <table id="embedding_table" class="sub-table"></table>
-
-    <div class="highlight">
-        <strong>Complete Model Size:</strong> <span id="full_size">0</span>
-    </div>
 </div>
 
 </body>