Update index.html

index.html

@@ -33,158 +33,100 @@
     <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);
-
-      function isS3Url(url) {
-        // The condition to identify S3 URLs and other URLs to track
-        return url.startsWith('https://s3.us-east-1.amazonaws/') ||
-               url.includes('preupload/main') ||
-               url.includes('commit/main');
-      }
-
-      // Save the original fetch function
-      const originalFetch = fetch;
-
-      // Create a variable to track the total uploaded size
-      let totalUploaded = 0;
-
-      // Replace the global fetch function
-      let progressMap = new Map();
-      
-      fetch = (url, init) => {
-        console.log(url, init)
-        if (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)),
-                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) => {
-              if (event.lengthComputable) {
-                progressMap.set(url, event.loaded);
-                totalUploaded = Array.from(progressMap.values()).reduce((a, b) => a + b, 0);
-            
-                // Calculate speed
-                const elapsedSeconds = (Date.now() - startTime) / 1000;
-                const speedInMBps = totalUploaded / elapsedSeconds / 1024 / 1024;
-              
-                // Update progress bar and speed display
-                const progressBar = document.getElementById('progressBar');
-                progressBar.value = totalUploaded;
-                
-                // Update processing message
-                const processingMessage = document.getElementById('processingMessage');
-                if (totalUploaded === 0) {
-                  processingMessage.textContent = 'Preparing your upload';
-                } else if (totalUploaded === progressBar.max) {
-                  processingMessage.textContent = 'Processing your upload';
-                }
-              }
-            };
-
-
-      
-            xhr.send(init.body);
-          });
-        } else {
-          // Use the original fetch function for non-S3 requests
-          return originalFetch(url, init);
+      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);
         }
-      };
-
 
-      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;
+        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' : '';
           }
-          progressBar.max = totalSize;  // Set the max value of progress bar
-          totalUploaded = 0;  // Reset total uploaded size
-
-          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;
+        };
+
+        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 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 = totalSize;
+            await createRepo({repo: REPO_ID, credentials: { accessToken: HF_ACCESS_TOKEN }});
           } catch (error) {
-            console.error('Error uploading files', error);
-            errorDiv.textContent = 'Error uploading files';
-            return;
+            if (error.message !== 'You already created this model repo') throw error;
           }
+        };
 
-          const elapsedTime = (Date.now() - startTime) / 1000;
-          let totalSizeMB = totalSize / (1024 * 1024)
-          let speed = totalSizeMB / elapsedTime;
+        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}))});
 
-          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 ${totalSizeMB.toFixed(2)} MB in the ${files.length} files, speed ${speed.toFixed(2)} MB/s.`;
-          processingMessage.textContent = "All files processed";
-        } else {
-          messageDiv.textContent = 'Please select files to upload';
-        }
+        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>