Update index.html

index.html

@@ -33,86 +33,66 @@
     <script type="module">
       import { createRepo, uploadFiles } from "https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/+esm";
 
-      const uploadButton = document.getElementById('uploadButton');
-      uploadButton.addEventListener('click', upload);
+      class FileUploader {
+        constructor() {
+          this.uploadButton = document.getElementById('uploadButton');
+          this.uploadButton.addEventListener('click', () => this.upload());
+        }
 
-      async function upload() {
-        const fileInput = document.getElementById('fileUpload');
-        const files = Array.from(fileInput.files); // convert FileList to Array
-        const tokenInput = document.getElementById('tokenInput');
-        const HF_ACCESS_TOKEN = tokenInput.value; // get the entered token
-        const repoInput = document.getElementById('repoInput');
-        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; // reset progress bar
-        messageDiv.textContent = ''; // clear previous messages
-        errorDiv.textContent = ''; // clear previous errors
-        processingMessage.textContent = ''; // clear previous processing message
+        async 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');
 
-        if (files.length > 0) {
-          // calculate total size in MB
-          let totalSize = 0;
-          for (let file of files) {
-            totalSize += file.size;
-          }
-          totalSize = totalSize / (1024 * 1024); // convert to MB
+          progressBar.value = 0;
+          messageDiv.textContent = '';
+          errorDiv.textContent = '';
+          processingMessage.textContent = '';
 
-          // start time
-          const startTime = Date.now();
+          if (files.length > 0) {
+            const totalSize = files.reduce((total, file) => total + file.size, 0) / (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') {
+            try {
+              await createRepo({ repo: REPO_ID, credentials: { accessToken: HF_ACCESS_TOKEN } });
+            } catch (error) {
+              if (error.message !== 'You already created this model repo') {
+                console.error('Error creating repository', error);
+                errorDiv.textContent = 'Error creating repository';
+                return;
+              }
               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
             }
-          }
 
-          try {
-            // upload files
-            await uploadFiles({
-              repo: REPO_ID,
-              credentials: { accessToken: HF_ACCESS_TOKEN },
-              files: files.map(file => ({path: file.name, content: file}))
-            });
+            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) {
+              console.error('Error uploading files', error);
+              errorDiv.textContent = 'Error uploading files';
+              return;
+            }
 
-            console.log(`All files uploaded successfully`);
+            const elapsedTime = (Date.now() - startTime) / 1000;
+            const speed = totalSize / elapsedTime;
 
-            // 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
+            messageDiv.textContent = `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.`;
+            processingMessage.textContent = "All files processed";
+          } else {
+            messageDiv.textContent = 'Please select files to upload';
           }
-
-          // 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;
-
-          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.`;
-          processingMessage.textContent = "All files processed";
-        } else {
-          messageDiv.textContent = 'Please select files to upload';
         }
       }
+
+      new FileUploader();
     </script>
   </body>
 </html>