Spaces:

djuna
/

Generate-Mergkit-For-Upscale-LLM

Running

App Files Files Community

djuna commited on Oct 15, 2024

Commit

e216b1a

verified ·

1 Parent(s): 143e9f4

Auto calculate range size for easier calculation

Browse files

Files changed (1) hide show

index.html +113 -35

index.html CHANGED Viewed

@@ -14,7 +14,7 @@
             align-items: center;
             min-height: 100vh;
         }
-        .container {
             background-color: #f9f9f9;
             padding: 20px;
             border-radius: 8px;
@@ -34,7 +34,8 @@
         label {
             font-weight: bold;
             margin-bottom: 5px;
-            display: block;
         }
         input {
             width: 100%;
@@ -52,11 +53,6 @@
             cursor: pointer;
             font-weight: bold;
         }
-        .checkbox-container {
-             display: flex;
-             align-items: center;
-             white-space: nowrap;
-        }
         button:hover {
             background-color: #2563eb;
         }
@@ -75,6 +71,24 @@
             white-space: pre-wrap;
             word-wrap: break-word;
         }
     </style>
 </head>
 <body>
@@ -82,13 +96,17 @@
         <h1>YAML Config Generator</h1>
         <p style="font-weight: bold">Credit: mlabonne</p>
         <form id="configForm">
-            <div>
-                <label for="rangeSize">Range Size:</label>
-                <input type="number" id="rangeSize" name="rangeSize" required placeholder="Range size (e.g. 42)">
-            </div>
             <div>
                 <label for="totalLayers">Total Layers:</label>
-                <input type="number" id="totalLayers" name="totalLayers" required placeholder="Total number of layers (e.g. 126)">
             </div>
             <div>
                 <label for="nbParameters">Number of Parameters (B):</label>
@@ -98,9 +116,9 @@
                 <label for="model">Model:</label>
                 <input type="text" id="model" name="model" required placeholder="Model name (e.g. meta-llama/Meta-Llama-3.1-405B-Instruct)">
             </div>
-            <div class="checkbox-container">
                 <label for="doWhatISay">Do what I say:</label>
-                <input style="width: initial; margin-bottom: 5px" type="checkbox" id="doWhatISay" name="doWhatISay">
             </div>
             <button type="submit">Generate Config</button>
         </form>
@@ -109,8 +127,14 @@
             <h2>Results:</h2>
             <p id="newSize"></p>
             <p id="newParam"></p>
-            <h3>YAML Config:</h3>
-            <pre id="yamlOutput"></pre>
         </div>
     </div>
@@ -118,44 +142,91 @@
         document.getElementById('configForm').addEventListener('submit', function(e) {
             e.preventDefault();
-            const rangeSize = parseInt(document.getElementById('rangeSize').value);
             const totalLayers = parseInt(document.getElementById('totalLayers').value);
             const nbParameters = parseFloat(document.getElementById('nbParameters').value);
             const model = document.getElementById('model').value;
             const doWhatISay = document.getElementById('doWhatISay').checked;
             const errorDiv = document.getElementById('error');
             const resultDiv = document.getElementById('result');
             errorDiv.innerHTML = '';
             errorDiv.style.display = 'none';
             resultDiv.style.display = 'none';
             const errors = [];
-            if (isNaN(rangeSize) || rangeSize <= 0 || !Number.isInteger(rangeSize)) {
-                errors.push("Range Size must be a positive integer.");
             }
-            if (isNaN(totalLayers) || totalLayers <= 0 || !Number.isInteger(totalLayers)) {
-                errors.push("Total Layers must be a positive integer.");
             }
             if (isNaN(nbParameters) || nbParameters <= 0) {
                 errors.push("Number of Parameters must be a positive number.");
             }
-            if (rangeSize > totalLayers) {
-                errors.push("Range Size cannot be greater than Total Layers.");
-            }
             if (model.trim() === "") {
                 errors.push("Model name cannot be empty.");
             }
-            if (!doWhatISay && totalLayers % rangeSize !== 0) {
                 errors.push("There are layers left after the main loop.");
             }
             let newSize = totalLayers + totalLayers - rangeSize;
             let newParam = (nbParameters / totalLayers) * newSize;
@@ -163,8 +234,8 @@
             for (let i = 0; i <= totalLayers - rangeSize; i += rangeSize / 2) {
                 let start = i;
-                if (!doWhatISay && !Number.isInteger(start)) {
-                    errors.push("The layer range contains non integer")
                 } else {
                     let end = Math.min(start + rangeSize, totalLayers);
                     yamlStr += `- sources:\n`;
@@ -174,7 +245,7 @@
             }
             // Check if there are remaining layers
-            if (totalLayers % rangeSize !== 0) {
                 let start = totalLayers - (totalLayers % rangeSize);
                 let end = totalLayers;
                 yamlStr += `- sources:\n`;
@@ -182,18 +253,25 @@
                 yamlStr += `    model: ${model}\n`;
             }
-            if (errors.length > 0) {
-                errorDiv.innerHTML = errors.join('<br>');
-                errorDiv.style.display = 'block';
-                return;
-            }
             yamlStr += "merge_method: passthrough\n";
             yamlStr += "dtype: bfloat16\n";
             document.getElementById('newSize').textContent = `New size = ${newSize} layers`;
             document.getElementById('newParam').textContent = `New parameters = ${newParam.toFixed(2)}B`;
             document.getElementById('yamlOutput').textContent = yamlStr;
-            resultDiv.style.display = 'block';
         });
     </script>
 </body>

             align-items: center;
             min-height: 100vh;
         }
+       .container {
             background-color: #f9f9f9;
             padding: 20px;
             border-radius: 8px;
         label {
             font-weight: bold;
             margin-bottom: 5px;
+            display: inline-block;
+            vertical-align: middle;
         }
         input {
             width: 100%;
             cursor: pointer;
             font-weight: bold;
         }
         button:hover {
             background-color: #2563eb;
         }
             white-space: pre-wrap;
             word-wrap: break-word;
         }
+        #possible-range-sizes {
+            margin-top: 20px;
+        }
+       .clickable {
+            cursor: pointer;
+            color: #3b82f6;
+            text-decoration: underline;
+        }
+.checkbox-container {
+    display: flex;
+    align-items: center;
+}
+.checkbox-container label {
+    flex: 1;
+    white-space: nowrap;
+    margin-right: 10px;
+}
     </style>
 </head>
 <body>
         <h1>YAML Config Generator</h1>
         <p style="font-weight: bold">Credit: mlabonne</p>
         <form id="configForm">
             <div>
                 <label for="totalLayers">Total Layers:</label>
+                <input type="number" id="totalLayers" name="totalLayers" required placeholder="Total number of layers">
+            </div>
+            <div class="checkbox-container">
+                <label for="autoRangeSize">Auto Range Size:</label>
+                <input type="checkbox" id="autoRangeSize" name="autoRangeSize">
+            </div>
+            <div id="range-size-input" style="display: none;">
+                <label for="rangeSize">Range Size:</label>
+                <input type="number" id="rangeSize" name="rangeSize" placeholder="Range size (e.g. 42)">
             </div>
             <div>
                 <label for="nbParameters">Number of Parameters (B):</label>
                 <label for="model">Model:</label>
                 <input type="text" id="model" name="model" required placeholder="Model name (e.g. meta-llama/Meta-Llama-3.1-405B-Instruct)">
             </div>
+            <div class="checkbox-container" id="god-mode">
                 <label for="doWhatISay">Do what I say:</label>
+                <input type="checkbox" id="doWhatISay" name="doWhatISay">
             </div>
             <button type="submit">Generate Config</button>
         </form>
             <h2>Results:</h2>
             <p id="newSize"></p>
             <p id="newParam"></p>
+            <div id="yaml-config-section" style="display: none;">
+                <h3>YAML Config:</h3>
+                <pre id="yamlOutput"></pre>
+            </div>
+        </div>
+        <div id="possible-range-sizes" style="display: none;">
+            <h2>Possible Range Sizes:</h2>
+            <ul id="possible-range-sizes-list"></ul>
         </div>
     </div>
         document.getElementById('configForm').addEventListener('submit', function(e) {
             e.preventDefault();
             const totalLayers = parseInt(document.getElementById('totalLayers').value);
+            const autoRangeSize = document.getElementById('autoRangeSize').checked;
+            const rangeSize = autoRangeSize? null : parseInt(document.getElementById('rangeSize').value);
             const nbParameters = parseFloat(document.getElementById('nbParameters').value);
             const model = document.getElementById('model').value;
             const doWhatISay = document.getElementById('doWhatISay').checked;
             const errorDiv = document.getElementById('error');
             const resultDiv = document.getElementById('result');
+            const possibleRangeSizesDiv = document.getElementById('possible-range-sizes');
             errorDiv.innerHTML = '';
             errorDiv.style.display = 'none';
             resultDiv.style.display = 'none';
+            possibleRangeSizesDiv.style.display = 'none';
             const errors = [];
+            if (isNaN(totalLayers) || totalLayers <= 0 ||!Number.isInteger(totalLayers)) {
+                errors.push("Total Layers must be a positive integer.");
             }
+            if (!autoRangeSize) {
+                if (isNaN(rangeSize) || rangeSize <= 0 ||!Number.isInteger(rangeSize)) {
+                    errors.push("Range Size must be a positive integer.");
+                }
+                if (rangeSize > totalLayers) {
+                    errors.push("Range Size cannot be greater than Total Layers.");
+                }
             }
             if (isNaN(nbParameters) || nbParameters <= 0) {
                 errors.push("Number of Parameters must be a positive number.");
             }
             if (model.trim() === "") {
                 errors.push("Model name cannot be empty.");
             }
+            if (!doWhatISay && totalLayers % (autoRangeSize? calculatePossibleRangeSize(totalLayers, doWhatISay)[0] : rangeSize)!== 0) {
                 errors.push("There are layers left after the main loop.");
             }
+            if (errors.length > 0) {
+                errorDiv.innerHTML = errors.join('<br>');
+                errorDiv.style.display = 'block';
+                return;
+            }
+            if (autoRangeSize) {
+                const possibleRangeSizes = calculatePossibleRangeSize(totalLayers, doWhatISay);
+                const possibleRangeSizesList = document.getElementById('possible-range-sizes-list');
+                possibleRangeSizesList.innerHTML = '';
+                possibleRangeSizes.forEach(size => {
+                    const listItem = document.createElement('li');
+                    const link = document.createElement('a');
+                    link.textContent = `${size}`;
+                    link.className = 'clickable';
+                    link.addEventListener('click', function() {
+                        generateConfig(totalLayers, size, nbParameters, model, doWhatISay);
+                        possibleRangeSizesDiv.style.display = 'none';
+                    });
+                    listItem.appendChild(link);
+                    possibleRangeSizesList.appendChild(listItem);
+                });
+                possibleRangeSizesDiv.style.display = 'block';
+            } else {
+                generateConfig(totalLayers, rangeSize, nbParameters, model, doWhatISay);
+            }
+        });
+        function calculatePossibleRangeSize(totalLayers, doWhatISay) {
+            const possibleRangeSizes = [];
+            for (let rangeSize = 1; rangeSize <= totalLayers; rangeSize++) {
+                if (totalLayers % rangeSize === 0) {
+                    if (!doWhatISay && rangeSize % 2!== 0) {
+                        continue; // skip odd range sizes if doWhatISay is false
+                    }
+                    possibleRangeSizes.push(rangeSize);
+                }
+            }
+            return possibleRangeSizes;
+        }
+        function generateConfig(totalLayers, rangeSize, nbParameters, model, doWhatISay) {
             let newSize = totalLayers + totalLayers - rangeSize;
             let newParam = (nbParameters / totalLayers) * newSize;
             for (let i = 0; i <= totalLayers - rangeSize; i += rangeSize / 2) {
                 let start = i;
+                if (!doWhatISay &&!Number.isInteger(start)) {
+                    console.error("The layer range contains non integer");
                 } else {
                     let end = Math.min(start + rangeSize, totalLayers);
                     yamlStr += `- sources:\n`;
             }
             // Check if there are remaining layers
+            if (totalLayers % rangeSize!== 0) {
                 let start = totalLayers - (totalLayers % rangeSize);
                 let end = totalLayers;
                 yamlStr += `- sources:\n`;
                 yamlStr += `    model: ${model}\n`;
             }
             yamlStr += "merge_method: passthrough\n";
             yamlStr += "dtype: bfloat16\n";
             document.getElementById('newSize').textContent = `New size = ${newSize} layers`;
             document.getElementById('newParam').textContent = `New parameters = ${newParam.toFixed(2)}B`;
             document.getElementById('yamlOutput').textContent = yamlStr;
+            document.getElementById('yaml-config-section').style.display = 'block';
+            document.getElementById('result').style.display = 'block';
+        }
+        document.getElementById('autoRangeSize').addEventListener('change', function() {
+            if (this.checked) {
+                document.getElementById('range-size-input').style.display = 'none';
+				document.getElementById('god-mode').style.display = 'none';
+            } else {
+                document.getElementById('range-size-input').style.display = 'block';
+				document.getElementById('god-mode').style.display = 'flex';
+            }
         });
     </script>
 </body>