Support gated models

index.html

@@ -76,19 +76,24 @@
         "Q8_0": 8.5,
       }
   
-      async function modelConfig(hf_model) {
+      async function modelConfig(hf_model, hf_token) {
+        auth = hf_token == "" ? {} : {
+            headers: {
+                'Authorization': `Bearer ${hf_token}`
+            }
+        }
         let config = await fetch(
-          `https://huggingface.co/${hf_model}/raw/main/config.json`
+          `https://huggingface.co/${hf_model}/raw/main/config.json`, auth
         ).then(r => r.json())
         let model_size = 0
         try {
-          model_size = (await fetch(`https://huggingface.co/${hf_model}/resolve/main/model.safetensors.index.json`).then(r => r.json()))["metadata"]["total_size"] / 2
+          model_size = (await fetch(`https://huggingface.co/${hf_model}/resolve/main/model.safetensors.index.json`, auth).then(r => r.json()))["metadata"]["total_size"] / 2
           if (isNaN(model_size)) {
             throw new Erorr("no size in safetensors metadata")
           }
         } catch (e) {
           try {
-            model_size = (await fetch(`https://huggingface.co/${hf_model}/resolve/main/pytorch_model.bin.index.json`).then(r => r.json()))["metadata"]["total_size"] / 2
+            model_size = (await fetch(`https://huggingface.co/${hf_model}/resolve/main/pytorch_model.bin.index.json`, auth).then(r => r.json()))["metadata"]["total_size"] / 2
             if (isNaN(model_size)) {
               throw new Erorr("no size in pytorch metadata")
             }
@@ -157,7 +162,7 @@
 
       async function calculateSizes(format) {
         try {
-          const model_config = await modelConfig(document.getElementById("modelsearch").value)
+          const model_config = await modelConfig(document.getElementById("modelsearch").value, document.getElementById("hf_token").value)
           const context = parseInt(document.getElementById("contextsize").value)
           let bsz = 512
           let cache_bit = 16
@@ -204,10 +209,29 @@
         LLM Model, Can I run it?
       </h1>
       <p>
-        *This does not support gated or private repos
+        To support gated or private repos, you need to <a href="https://huggingface.co/settings/tokens" style="color: #4444ff"><b>create an authentification token</b></a>, to check the box <span style="color: #6e1818"><b>"Read access to contents of all public gated repos you can access"</b></span> and then enter the token in the field below.
       </p>
+      
       <div class="flex flex-col gap-10">
         <div class="w-auto flex flex-col gap-4">
+          <!-- Huggingface Authentification Token -->
+          <div
+            class="relative"
+            x-data="{
+              results: null,
+              query: null
+            }"
+          >
+            <label
+              for="gpusearch"
+              class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium text-gray-900"
+              >Huggingface Token (optional)</label
+            >
+            <input
+              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"
+              id="hf_token"
+            />
+          </div>
           <!-- GPU Selector -->
           <div
             class="relative"