GGUF-Model-VRAM-Calculator

Running

App Files Files Community

SadP0i commited on Apr 22, 2024

Commit

7a3f79f

verified ·

1 Parent(s): bb71914

Upload index.html

Browse files

Added a small QoL at the suggestion of AMOGUS

Files changed (1) hide show

index.html +58 -19

index.html CHANGED Viewed

@@ -144,7 +144,7 @@
         return Number.parseFloat((model_config["parameters"] * bpw / 8).toFixed(2))
       }
-      async function calculateSizes(format) {
         format = "gguf"
@@ -170,18 +170,6 @@
           document.getElementById("resultcontext").innerText = (context_size / 2**30).toFixed(2)
           const result_total_el = document.getElementById("resulttotal");
           result_total_el.innerText = total_size.toFixed(2)
-          //const gpu = document.getElementById("gpusearch").value
-          // if (gpu !== "") {
-          //   const vram = parseFloat(gpu.split("-")[1].replace("GB", "").trim())
-          //   if (vram - total_size > 0.5) {
-          //     result_total_el.style.backgroundColor = "#bef264"
-          //   } else if (vram - total_size > 0) {
-          //     result_total_el.style.backgroundColor = "#facc15"
-          //   } else {
-          //     result_total_el.style.backgroundColor = "#ef4444"
-          //   }
-          // }
           const allocated_vram = Number.parseInt(document.getElementById("maxvram").value);
           const vram = allocated_vram
@@ -196,11 +184,15 @@
           const layer_size = ((model_size / 2**30) / model_config["num_hidden_layers"])
           const layer_size_el = document.getElementById("layersize");
           layer_size_el.innerText = layer_size.toFixed(2)
-          const layers_offload = Math.floor((allocated_vram - (context_size / 2**30)) / layer_size)
           const layers_offload_el = document.getElementById("layersoffload");
-          layers_offload_el.innerText = layers_offload > model_config["num_hidden_layers"] ? model_config["num_hidden_layers"] : Math.max(0, layers_offload)
         } catch(e) {
           alert(e);
@@ -211,7 +203,7 @@
     <title>Can I split it? - GGUF VRAM Calculator</title>
   </head>
   <body class="p-8">
-    <div x-data="{ format: 'gguf' }" class="flex flex-col max-h-screen items-center mt-16 gap-10">
       <div style="text-align: center;">
       <h1 class="text-xl font-semibold leading-6 text-gray-900">
         GGUF Model, Can I split it?
@@ -329,6 +321,53 @@
               class="block w-full rounded-md border-0 p-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
             />
           </div>
           <!-- GGUF Options -->
           <div x-show="format === 'gguf'" class="relative">
             <div class="flex flex-row gap-4">
@@ -444,7 +483,7 @@
           <button
             type="button"
             class="rounded-md bg-slate-800 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-slate-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-            @click="calculateSizes(format)"
           >
             Submit
           </button>
@@ -498,7 +537,7 @@
             <label
               class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium text-gray-900"
             >
-              Layers offloaded to GPU
             </label>
             <div
               id="layersoffload"
@@ -512,7 +551,7 @@
       src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
     ></script>
     <script defer>
-      calculateSizes("gguf")
     </script>
   </body>
 </html>

         return Number.parseFloat((model_config["parameters"] * bpw / 8).toFixed(2))
       }
+      async function calculateSizes(format, context_loc) {
         format = "gguf"
           document.getElementById("resultcontext").innerText = (context_size / 2**30).toFixed(2)
           const result_total_el = document.getElementById("resulttotal");
           result_total_el.innerText = total_size.toFixed(2)
           const allocated_vram = Number.parseInt(document.getElementById("maxvram").value);
           const vram = allocated_vram
           const layer_size = ((model_size / 2**30) / model_config["num_hidden_layers"])
           const layer_size_el = document.getElementById("layersize");
           layer_size_el.innerText = layer_size.toFixed(2)
+          const context_dealloc = context_loc === "vram" ? (context_size / 2**30) : 0;
+          console.log(context_loc)
+          const layers_offload = Math.floor((allocated_vram - context_dealloc) / layer_size)
           const layers_offload_el = document.getElementById("layersoffload");
+          layers_offload_el.innerText = `${layers_offload > model_config["num_hidden_layers"] ? model_config["num_hidden_layers"] : Math.max(0, layers_offload)}/${model_config["num_hidden_layers"]}`
         } catch(e) {
           alert(e);
     <title>Can I split it? - GGUF VRAM Calculator</title>
   </head>
   <body class="p-8">
+    <div x-data="{ format: 'gguf', context_loc: 'vram' }" class="flex flex-col max-h-screen items-center mt-16 gap-10">
       <div style="text-align: center;">
       <h1 class="text-xl font-semibold leading-6 text-gray-900">
         GGUF Model, Can I split it?
               class="block w-full rounded-md border-0 p-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
             />
           </div>
+          <div class="relative">
+            <label
+              class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium text-gray-900"
+              >Context offloaded to</label
+            >
+            <fieldset
+              x-model="context_loc"
+              class="block w-full rounded-md border-0 p-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+            >
+              <legend class="sr-only">Context location</legend>
+              <div
+                class="space-y-4 sm:flex sm:items-center sm:space-x-10 sm:space-y-0"
+              >
+                <div class="flex items-center">
+                  <input
+                    id="context-vram"
+                    name="context-allocation"
+                    type="radio"
+                    value="vram"
+                    checked
+                    class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                  />
+                  <label
+                    for="context-vram"
+                    class="ml-3 block text-sm font-medium leading-6 text-gray-900"
+                    >VRAM</label
+                  >
+                </div>
+                <div class="flex items-center">
+                  <input
+                    id="context-ram"
+                    name="context-allocation"
+                    type="radio"
+                    value="ram"
+                    class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                  />
+                  <label
+                    for="context-ram"
+                    class="ml-3 block text-sm font-medium leading-6 text-gray-900"
+                    >RAM</label
+                  >
+                </div>
+              </div>
+            </fieldset>
+          </div>
           <!-- GGUF Options -->
           <div x-show="format === 'gguf'" class="relative">
             <div class="flex flex-row gap-4">
           <button
             type="button"
             class="rounded-md bg-slate-800 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-slate-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+            @click="calculateSizes(format, context_loc)"
           >
             Submit
           </button>
             <label
               class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium text-gray-900"
             >
+              Layers offloaded to GPU (out of total)
             </label>
             <div
               id="layersoffload"
       src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
     ></script>
     <script defer>
+      calculateSizes("gguf", "vram")
     </script>
   </body>
 </html>