Spaces:

djuna
/

Generate-Mergkit-For-Upscale-LLM

Running

App Files Files Community

djuna commited on Aug 13

Commit

26d6e68

•

1 Parent(s): fd2cea4

Update index.html

Browse files

Files changed (1) hide show

index.html +173 -19

index.html CHANGED Viewed

@@ -1,19 +1,173 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>YAML Config Generator</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+        }
+        .container {
+            background-color: #f9f9f9;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            width: 100%;
+            max-width: 400px;
+        }
+        h1 {
+            text-align: center;
+            color: #333;
+        }
+        form {
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+        }
+        label {
+            font-weight: bold;
+            margin-bottom: 5px;
+            display: block;
+        }
+        input {
+            width: 100%;
+            padding: 8px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            box-sizing: border-box;
+        }
+        button {
+            background-color: #3b82f6;
+            color: white;
+            border: none;
+            padding: 10px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: bold;
+        }
+        button:hover {
+            background-color: #2563eb;
+        }
+        #error {
+            color: #dc2626;
+            margin-top: 10px;
+        }
+        #result {
+            margin-top: 20px;
+        }
+        pre {
+            background-color: #f3f4f6;
+            padding: 10px;
+            border-radius: 4px;
+            overflow-x: auto;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>YAML Config Generator</h1>
+        <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>
+                <input type="number" id="nbParameters" name="nbParameters" step="0.01" required placeholder="Number of parameters in the model (e.g. 410.0)">
+            </div>
+            <div>
+                <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>
+            <button type="submit">Generate Config</button>
+        </form>
+        <div id="error" style="display: none;"></div>
+        <div id="result" style="display: none;">
+            <h2>Results:</h2>
+            <p id="newSize"></p>
+            <p id="newParam"></p>
+            <h3>YAML Config:</h3>
+            <pre id="yamlOutput"></pre>
+        </div>
+    </div>
+    <script>
+        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 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 (errors.length > 0) {
+                errorDiv.innerHTML = errors.join('<br>');
+                errorDiv.style.display = 'block';
+                return;
+            }
+            let newSize = totalLayers + totalLayers - rangeSize;
+            let newParam = (nbParameters / totalLayers) * newSize;
+            let yamlStr = "slices:\n";
+            for (let i = 0; i <= totalLayers - rangeSize; i += rangeSize / 2) {
+                let start = i;
+                let end = Math.min(start + rangeSize, totalLayers);
+                yamlStr += `- sources:\n`;
+                yamlStr += `  - layer_range: [${start}, ${end}]\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;
+            resultDiv.style.display = 'block';
+        });
+    </script>
+</body>
+</html>