upload_to_hub_folders_progress_bar

Running

App Files Files Community

multimodalart HF Staff commited on Jul 15, 2023

Commit

ad155f6

0 Parent(s):

Duplicate from multimodalart/upload_your_model

Browse files

Files changed (4) hide show

.gitattributes +35 -0
README.md +12 -0
index.html +132 -0
style.css +28 -0

.gitattributes ADDED Viewed

	@@ -0,0 +1,35 @@

+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

README.md ADDED Viewed

	@@ -0,0 +1,12 @@

+---
+title: Upload To Hub Multiple At Once
+emoji: 👁
+colorFrom: indigo
+colorTo: gray
+sdk: static
+pinned: false
+license: mit
+duplicated_from: multimodalart/upload_your_model
+---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html ADDED Viewed

	@@ -0,0 +1,132 @@

+<!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/hub@0.8.3/+esm";
+      class FileUploader {
+        constructor() {
+          this.fileInput = document.getElementById('fileUpload');
+          this.uploadButton = document.getElementById('uploadButton');
+          this.tokenInput = document.getElementById('tokenInput');
+          this.repoInput = document.getElementById('repoInput');
+          this.progressBar = document.getElementById('progressBar');
+          this.messageDiv = document.getElementById('message');
+          this.errorDiv = document.getElementById('error');
+          this.processingMessage = document.getElementById('processingMessage');
+          this.hijackFetch();
+          this.uploadButton.addEventListener('click', this.upload);
+        }
+        hijackFetch = () => {
+          const originalFetch = fetch;
+          this.totalUploaded = 0;
+          this.progressMap = new Map();
+          fetch = (url, init) => init.method !== 'PUT' ? originalFetch(url, init) : this.handleFetch(url, init);
+        };
+        handleFetch = (url, init) => new Promise((resolve, reject) => {
+          const xhr = new XMLHttpRequest();
+          xhr.open(init.method, 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), json: () => Promise.resolve(JSON.parse(xhr.responseText)), headers: {get: (header) => xhr.getResponseHeader(header)}});
+          xhr.onerror = () => reject(new TypeError('Network request failed'));
+          xhr.ontimeout = () => reject(new TypeError('Network request failed due to timeout'));
+          xhr.upload.onprogress = (event) => this.updateUploadProgress(event, url);
+          xhr.send(init.body);
+        });
+        updateUploadProgress = (event, url) => {
+          if (event.lengthComputable) {
+            this.progressMap.set(url, event.loaded);
+            this.totalUploaded = Array.from(this.progressMap.values()).reduce((a, b) => a + b, 0);
+            this.progressBar.value = this.totalUploaded;
+            this.processingMessage.textContent = this.totalUploaded === 0 ? 'Preparing your upload' : this.totalUploaded === this.progressBar.max ? 'Processing your upload' : '';
+          }
+        };
+        upload = async () => {
+          const files = Array.from(this.fileInput.files);
+          const HF_ACCESS_TOKEN = this.tokenInput.value;
+          const REPO_ID = this.repoInput.value;
+          this.progressBar.value = 0;
+          this.messageDiv.textContent = '';
+          this.errorDiv.textContent = '';
+          this.processingMessage.textContent = '';
+          if (files.length > 0) {
+            this.progressBar.max = files.reduce((total, file) => total + file.size, 0);
+            this.totalUploaded = 0;
+            this.startTime = Date.now();
+            try {
+              await this.createRepository(REPO_ID, HF_ACCESS_TOKEN);
+              await this.uploadFilesToRepo(REPO_ID, HF_ACCESS_TOKEN, files);
+              this.handleUploadSuccess(files);
+            } catch (error) {
+              this.handleErrorDuringUpload(error);
+            }
+          } else {
+            this.messageDiv.textContent = 'Please select files to upload';
+          }
+        };
+        createRepository = async (REPO_ID, HF_ACCESS_TOKEN) => {
+          try {
+            await createRepo({repo: REPO_ID, credentials: { accessToken: HF_ACCESS_TOKEN }});
+          } catch (error) {
+            if (error.message !== 'You already created this model repo') throw error;
+          }
+        };
+        uploadFilesToRepo = (REPO_ID, HF_ACCESS_TOKEN, files) => uploadFiles({repo: REPO_ID, credentials: { accessToken: HF_ACCESS_TOKEN }, files: files.map(file => ({path: file.name, content: file}))});
+        handleUploadSuccess = (files) => {
+          const elapsedTime = (Date.now() - this.startTime) / 1000;
+          let totalSizeMB = this.progressBar.max / (1024 * 1024)
+          let speed = totalSizeMB / elapsedTime;
+          this.messageDiv.innerHTML = `All files uploaded successfully in ${elapsedTime.toFixed(2)} seconds, for all ${totalSizeMB.toFixed(2)} MB in the ${files.length} files, speed ${speed.toFixed(2)} MB/s.`;
+          this.processingMessage.textContent = "All files processed";
+        };
+        handleErrorDuringUpload = (error) => {
+          console.error('Error during upload', error);
+          this.errorDiv.textContent = 'Error during upload: ' + error.message;
+        };
+      }
+      new FileUploader();
+    </script>
+  </body>
+</html>

style.css ADDED Viewed

	@@ -0,0 +1,28 @@

+body {
+	padding: 2rem;
+	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+}
+h1 {
+	font-size: 16px;
+	margin-top: 0;
+}
+p {
+	color: rgb(107, 114, 128);
+	font-size: 15px;
+	margin-bottom: 10px;
+	margin-top: 5px;
+}
+.card {
+	max-width: 620px;
+	margin: 0 auto;
+	padding: 16px;
+	border: 1px solid lightgray;
+	border-radius: 16px;
+}
+.card p:last-child {
+	margin-bottom: 0;
+}