Spaces:

multimodalart
/

upload_your_model

Running

App Files Files Community

multimodalart HF Staff commited on Jul 14, 2023

Commit

c13d23b

1 Parent(s): cfd6ace

Update index.html

Browse files

Files changed (1) hide show

index.html +139 -105

index.html CHANGED Viewed

@@ -1,120 +1,154 @@
-<script type="module">
-  import { createRepo, uploadFiles } from "https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/+esm";
-  const uploadButton = document.getElementById('uploadButton');
-  uploadButton.addEventListener('click', upload);
-  function isS3Url(url) {
-    // Replace this with the actual condition to identify S3 URLs
-    return url.startsWith('https://s3.amazonaws.com/');
-  }
-  function fetchWithProgress(url, init) {
-    if (isS3Url(url)) {
-      return new Promise((resolve, reject) => {
-        const xhr = new XMLHttpRequest();
-        xhr.open(init.method || 'GET', url);
-        for (let header in init.headers) {
-          xhr.setRequestHeader(header, init.headers[header]);
-        }
-        xhr.onload = () => {
-          resolve({
-            ok: xhr.status >= 200 && xhr.status < 300,
-            status: xhr.status,
-            statusText: xhr.statusText,
-            text: () => Promise.resolve(xhr.responseText)
-          });
-        };
-        xhr.onerror = () => reject(new TypeError('Network request failed'));
-        xhr.ontimeout = () => reject(new TypeError('Network request failed due to timeout'));
-        xhr.upload.onprogress = (event) => {
-          if (event.lengthComputable) {
-            const progress = event.loaded / event.total;
-            const progressBar = document.getElementById('progressBar');
-            progressBar.value = progress * 100;
-          }
-        };
-        xhr.send(init.body);
-      });
-    } else {
-      return fetch(url, init);
-    }
-  }
-  async function upload() {
-    const fileInput = document.getElementById('fileUpload');
-    const files = Array.from(fileInput.files);
-    const tokenInput = document.getElementById('tokenInput');
-    const HF_ACCESS_TOKEN = tokenInput.value;
-    const repoInput = document.getElementById('repoInput');
-    const REPO_ID = repoInput.value;
-    const progressBar = document.getElementById('progressBar');
-    const messageDiv = document.getElementById('message');
-    const errorDiv = document.getElementById('error');
-    const processingMessage = document.getElementById('processingMessage');
-    progressBar.value = 0;
-    messageDiv.textContent = '';
-    errorDiv.textContent = '';
-    processingMessage.textContent = '';
-    if (files.length > 0) {
-      let totalSize = 0;
-      for (let file of files) {
-        totalSize += file.size;
-      }
-      totalSize = totalSize / (1024 * 1024);
-      const startTime = Date.now();
-      try {
-        await createRepo({
-          repo: REPO_ID,
-          credentials: { accessToken: HF_ACCESS_TOKEN },
-        });
-      } catch (error) {
-        if (error.message === 'You already created this model repo') {
-          console.log('Repository already exists, proceeding to upload files');
         } else {
-          console.error('Error creating repository', error);
-          errorDiv.textContent = 'Error creating repository';
-          return;
         }
       }
-      try {
-        await uploadFiles({
-          repo: REPO_ID,
-          credentials: { accessToken: HF_ACCESS_TOKEN },
-          files: files.map(file => ({path: file.name, content: file})),
-          fetch: fetchWithProgress
-        });
-        console.log(`All files uploaded successfully`);
-        progressBar.value = 100;
-      } catch (error) {
-        console.error('Error uploading files', error);
-        errorDiv.textContent = 'Error uploading files';
-        return;
-      }
-      const elapsedTime = (Date.now() - startTime) / 1000;
-      let speed = totalSize / elapsedTime;
-      let time1GB = (1024 / speed) / 60;
-      let time5GB = (5 * 1024 / speed) / 60;
-      let time10GB = (10 * 1024 / speed) / 60;
-      messageDiv.innerHTML = `All files uploaded successfully in ${elapsedTime.toFixed(2)} seconds, for all ${totalSize.toFixed(2)} MB in the ${files.length} files, speed ${speed.toFixed(2)} MB/s.<br>To upload a 1GB model at this speed, it would take approximately ${time1GB.toFixed(2)} minutes.<br>To upload a 5GB model at this speed, it would take approximately ${time5GB.toFixed(2)} minutes.<br>To upload a 10GB model at this speed, it would take approximately ${time10GB.toFixed(2)} minutes.`;
-      processingMessage.textContent = "All files processed";
-    } else {
-      messageDiv.textContent = 'Please select files to upload';
-    }
-  }
-</script>

+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+      }
+      input, button, progress {
+        display: block;
+        margin-top: 10px;
+      }
+      #message {
+        margin-top: 20px;
+        color: blue;
+      }
+      #error {
+        color: red;
+      }
+    </style>
+  </head>
+  <body>
+    <label for="tokenInput">Hugging Face Token:</label>
+    <input type="password" id="tokenInput" name="tokenInput">
+    <label for="repoInput">Repository ID:</label>
+    <input type="text" id="repoInput" name="repoInput" placeholder="my-user/nlp-model">
+    <input type="file" id="fileUpload" multiple>
+    <button id="uploadButton">Upload Files</button>
+    <div id="processingMessage"></div>
+    <progress id="progressBar" value="0" max="100"></progress>
+    <div id="message"></div>
+    <div id="error"></div>
+    <script type="module">
+      import { createRepo, uploadFiles } from "https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/+esm";
+      const uploadButton = document.getElementById('uploadButton');
+      uploadButton.addEventListener('click', upload);
+      function isS3Url(url) {
+        // Replace this with the actual condition to identify S3 URLs
+        return url.startsWith('https://s3.amazonaws.com/');
+      }
+      function fetchWithProgress(url, init) {
+        if (isS3Url(url)) {
+          return new Promise((resolve, reject) => {
+            const xhr = new XMLHttpRequest();
+            xhr.open(init.method || 'GET', url);
+            for (let header in init.headers) {
+              xhr.setRequestHeader(header, init.headers[header]);
+            }
+            xhr.onload = () => {
+              resolve({
+                ok: xhr.status >= 200 && xhr.status < 300,
+                status: xhr.status,
+                statusText: xhr.statusText,
+                text: () => Promise.resolve(xhr.responseText)
+              });
+            };
+            xhr.onerror = () => reject(new TypeError('Network request failed'));
+            xhr.ontimeout = () => reject(new TypeError('Network request failed due to timeout'));
+            xhr.upload.onprogress = (event) => {
+              if (event.lengthComputable) {
+                const progress = event.loaded / event.total;
+                const progressBar = document.getElementById('progressBar');
+                progressBar.value = progress * 100;
+              }
+            };
+            xhr.send(init.body);
+          });
         } else {
+          return fetch(url, init);
         }
       }
+      async function upload() {
+        const fileInput = document.getElementById('fileUpload');
+        const files = Array.from(fileInput.files);
+        const tokenInput = document.getElementById('tokenInput');
+        const HF_ACCESS_TOKEN = tokenInput.value;
+        const repoInput = document.getElementById('repoInput');
+        const REPO_ID = repoInput.value;
+        const progressBar = document.getElementById('progressBar');
+        const messageDiv = document.getElementById('message');
+        const errorDiv = document.getElementById('error');
+        const processingMessage = document.getElementById('processingMessage');
+        progressBar.value = 0;
+        messageDiv.textContent = '';
+        errorDiv.textContent = '';
+        processingMessage.textContent = '';
+        if (files.length > 0) {
+          let totalSize = 0;
+          for (let file of files) {
+            totalSize += file.size;
+          }
+          totalSize = totalSize / (1024 * 1024);
+          const startTime = Date.now();
+          try {
+            await createRepo({
+              repo: REPO_ID,
+              credentials: { accessToken: HF_ACCESS_TOKEN },
+            });
+          } catch (error) {
+            if (error.message === 'You already created this model repo') {
+              console.log('Repository already exists, proceeding to upload files');
+            } else {
+              console.error('Error creating repository', error);
+              errorDiv.textContent = 'Error creating repository';
+              return;
+            }
+          }
+          try {
+            await uploadFiles({
+              repo: REPO_ID,
+              credentials: { accessToken: HF_ACCESS_TOKEN },
+              files: files.map(file => ({path: file.name, content: file})),
+              fetch: fetchWithProgress
+            });
+            console.log(`All files uploaded successfully`);
+            progressBar.value = 100;
+          } catch (error) {
+            console.error('Error uploading files', error);
+            errorDiv.textContent = 'Error uploading files';
+            return;
+          }
+          const elapsedTime = (Date.now() - startTime) / 1000;
+          let speed = totalSize / elapsedTime;
+          let time1GB = (1024 / speed) / 60;
+          let time5GB = (5 * 1024 / speed) / 60;
+          let time10GB = (10 * 1024 / speed) / 60;
+          messageDiv.innerHTML = `All files uploaded successfully in ${elapsedTime.toFixed(2)} seconds, for all ${totalSize.toFixed(2)} MB in the ${files.length} files, speed ${speed.toFixed(2)} MB/s.<br>To upload a 1GB model at this speed, it would take approximately ${time1GB.toFixed(2)} minutes.<br>To upload a 5GB model at this speed, it would take approximately ${time5GB.toFixed(2)} minutes.<br>To upload a 10GB model at this speed, it would take approximately ${time10GB.toFixed(2)} minutes.`;
+          processingMessage.textContent = "All files processed";
+        } else {
+          messageDiv.textContent = 'Please select files to upload';
+        }
+      }
+    </script>
+  </body>
+</html>