Update index.html

index.html

@@ -26,55 +26,64 @@
     <input type="file" id="fileUpload" multiple>
     <button id="uploadButton">Upload Files</button>
     <div id="processingMessage"></div>
-    <div style="display:flex"><progress id="progressBar" value="0" max="100"></progress><div id="uploadSpeed"></div></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";
-    
+
       const uploadButton = document.getElementById('uploadButton');
       uploadButton.addEventListener('click', upload);
-    
-      // Override global fetch
-      const originalFetch = window.fetch;
-    
-      window.fetch = function(url, init) {
-        if (typeof url === 'string' && init && init.method === 'PUT') {
+
+      function isS3Url(url) {
+        // Replace this with the actual condition to identify S3 URLs
+        return url.startsWith('https://s3.amazonaws.com/');
+      }
+
+      // Save the original fetch function
+      const originalFetch = fetch;
+
+      // Replace the global fetch function
+      fetch = (url, init) => {
+        if (isS3Url(url) && init.method === 'PUT') {
           return 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))
               });
             };
-    
+
             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;
+                progressBar.value = (event.loaded / event.total) * 100;
               }
             };
-    
+
             xhr.send(init.body);
           });
         } else {
+          // Use the original fetch function for non-S3 requests
           return originalFetch(url, init);
         }
-      }
-    
+      };
+
       async function upload() {
         const fileInput = document.getElementById('fileUpload');
         const files = Array.from(fileInput.files);
@@ -90,16 +99,16 @@
         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,
@@ -114,14 +123,14 @@
               return;
             }
           }
-    
+
           try {
             await uploadFiles({
               repo: REPO_ID,
               credentials: { accessToken: HF_ACCESS_TOKEN },
               files: files.map(file => ({path: file.name, content: file}))
             });
-    
+
             console.log(`All files uploaded successfully`);
             progressBar.value = 100;
           } catch (error) {
@@ -129,14 +138,14 @@
             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 {