Update index.html

index.html

@@ -32,7 +32,7 @@
 
     <script type="module">
       import { createRepo, uploadFiles } from "https://cdn.jsdelivr.net/npm/@huggingface/hub@0.8.3/+esm";
-
+    
       const uploadButton = document.getElementById('uploadButton');
       uploadButton.addEventListener('click', upload);
     
@@ -40,6 +40,7 @@
       const originalFetch = window.fetch;
       let uploadStartTime;
       let uploadedBytes = 0;
+      let totalSize = 0; // Total size of the files
     
       window.fetch = function(url, init) {
         if (typeof url === 'string' && init && init.method === 'PUT') {
@@ -67,7 +68,7 @@
             xhr.upload.onprogress = (event) => {
               if (event.lengthComputable) {
                 uploadedBytes += event.loaded;
-                const progress = uploadedBytes / event.total;
+                const progress = uploadedBytes / totalSize; // Use the known total size
                 const progressBar = document.getElementById('progressBar');
                 progressBar.value = progress * 100;
     
@@ -87,45 +88,47 @@
     
       async function upload() {
         const fileInput = document.getElementById('fileUpload');
-        const files = Array.from(fileInput.files);
+        const files = Array.from(fileInput.files); // convert FileList to Array
+    
+        // Calculate total size of the files
+        totalSize = files.reduce((acc, file) => acc + file.size, 0);
+    
         const tokenInput = document.getElementById('tokenInput');
-        const HF_ACCESS_TOKEN = tokenInput.value;
+        const HF_ACCESS_TOKEN = tokenInput.value; // get the entered token
         const repoInput = document.getElementById('repoInput');
-        const REPO_ID = repoInput.value;
+        const REPO_ID = repoInput.value; // get the entered repo id
         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 = '';
+        progressBar.value = 0; // reset progress bar
+        messageDiv.textContent = ''; // clear previous messages
+        errorDiv.textContent = ''; // clear previous errors
+        processingMessage.textContent = ''; // clear previous processing message
     
         if (files.length > 0) {
-          let totalSize = 0;
-          for (let file of files) {
-            totalSize += file.size;
-          }
-          totalSize = totalSize / (1024 * 1024);
-    
+          // start time
           const startTime = Date.now();
     
           try {
+            // Attempt to create the repo
             await createRepo({
               repo: REPO_ID,
               credentials: { accessToken: HF_ACCESS_TOKEN },
             });
           } catch (error) {
+            // If the repo already exists, we simply log and continue
             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;
+              return; // stop if other errors occur during repository creation
             }
           }
     
           try {
+            // upload files
             await uploadFiles({
               repo: REPO_ID,
               credentials: { accessToken: HF_ACCESS_TOKEN },
@@ -133,16 +136,20 @@
             });
     
             console.log(`All files uploaded successfully`);
+    
+            // update progress bar
             progressBar.value = 100;
           } catch (error) {
             console.error('Error uploading files', error);
             errorDiv.textContent = 'Error uploading files';
-            return;
+            return; // stop uploading further files on error
           }
     
-          const elapsedTime = (Date.now() - startTime) / 1000;
-          let speed = totalSize / elapsedTime;
+          // calculate elapsed time and speed
+          const elapsedTime = (Date.now() - startTime) / 1000; // in seconds
+          let speed = totalSize / elapsedTime; // in MB/s
     
+          // Estimate time to upload larger files in minutes
           let time1GB = (1024 / speed) / 60;
           let time5GB = (5 * 1024 / speed) / 60;
           let time10GB = (10 * 1024 / speed) / 60;
@@ -155,5 +162,6 @@
       }
     </script>
 
+
   </body>
 </html>