Update index.html

index.html

@@ -37,14 +37,9 @@
     
       // Override global fetch
       const originalFetch = window.fetch;
-      let uploadStartTime;
-      let uploadedBytes = 0;
-      let totalSize = 0; // Total size of the files
-      let uploadFinished = false;
     
       window.fetch = function(url, init) {
         if (typeof url === 'string' && init && init.method === 'PUT') {
-          uploadStartTime = uploadStartTime || Date.now();
           return new Promise((resolve, reject) => {
             const xhr = new XMLHttpRequest();
             xhr.open(init.method, url);
@@ -67,23 +62,9 @@
     
             xhr.upload.onprogress = (event) => {
               if (event.lengthComputable) {
-                uploadedBytes += event.loaded;
-                const progress = uploadedBytes / totalSize; // Use the known total size
+                const progress = event.loaded / event.total;
                 const progressBar = document.getElementById('progressBar');
                 progressBar.value = progress * 100;
-    
-                const speedDiv = document.getElementById('uploadSpeed');
-                const processingMessage = document.getElementById('processingMessage');
-    
-                if (progress < 1) { // If upload is not yet finished
-                  const elapsedTime = (Date.now() - uploadStartTime) / 1000; // in seconds
-                  const speed = uploadedBytes / elapsedTime; // in bytes per second
-                  speedDiv.textContent = `Upload speed: ${(speed / 1024 / 1024).toFixed(2)} MB/s`;
-                } else if (!uploadFinished) { // If upload just finished
-                  uploadFinished = true;
-                  speedDiv.textContent = '';
-                  processingMessage.textContent = "Processing your upload...";
-                }
               }
             };
     
@@ -96,48 +77,45 @@
     
       async function upload() {
         const fileInput = document.getElementById('fileUpload');
-        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 files = Array.from(fileInput.files);
         const tokenInput = document.getElementById('tokenInput');
-        const HF_ACCESS_TOKEN = tokenInput.value; // get the entered token
+        const HF_ACCESS_TOKEN = tokenInput.value;
         const repoInput = document.getElementById('repoInput');
-        const REPO_ID = repoInput.value; // get the entered repo id
+        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; // reset progress bar
-        messageDiv.textContent = ''; // clear previous messages
-        errorDiv.textContent = ''; // clear previous errors
-        processingMessage.textContent = "Preparing your upload..."; 
-        
+        progressBar.value = 0;
+        messageDiv.textContent = '';
+        errorDiv.textContent = '';
+        processingMessage.textContent = '';
+    
         if (files.length > 0) {
-          // start time
+          let totalSize = 0;
+          for (let file of files) {
+            totalSize += file.size;
+          }
+          totalSize = totalSize / (1024 * 1024);
+    
           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; // stop if other errors occur during repository creation
+              return;
             }
           }
     
           try {
-            // upload files
             await uploadFiles({
               repo: REPO_ID,
               credentials: { accessToken: HF_ACCESS_TOKEN },
@@ -145,25 +123,16 @@
             });
     
             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; // stop uploading further files on error
+            return;
           }
     
-          // calculate elapsed time and speed
-          const elapsedTime = (Date.now() - startTime) / 1000; // in seconds
-          //let speed = uploadedBytes / elapsedTime; // in bytes per second
+          const elapsedTime = (Date.now() - startTime) / 1000;
+          let speed = totalSize / elapsedTime;
     
-          // Convert totalSize and speed to MB and MB/s respectively
-          totalSize = totalSize / (1024 * 1024); // convert to MB
-          let speed = totalSize / elapsedTime; // convert bytes to MB and calculate 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;
@@ -175,5 +144,6 @@
         }
       }
     </script>
+
   </body>
 </html>