Spaces:
Running
Running
| <html> | |
| <head> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| } | |
| input, button, progress { | |
| display: block; | |
| margin-top: 10px; | |
| } | |
| #message { | |
| margin-top: 20px; | |
| color: blue; | |
| } | |
| #error { | |
| color: red; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <label for="tokenInput">Hugging Face Token:</label> | |
| <input type="password" id="tokenInput" name="tokenInput"> | |
| <label for="repoInput">Repository ID:</label> | |
| <input type="text" id="repoInput" name="repoInput" placeholder="my-user/nlp-model"> | |
| <input type="file" id="fileUpload" multiple> | |
| <button id="uploadButton">Upload Files</button> | |
| <div id="processingMessage"></div> | |
| <progress id="progressBar" value="0" max="100"></progress> | |
| <div id="message"></div> | |
| <div id="error"></div> | |
| <script type="module"> | |
| import { createRepo, uploadFile } from "https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/+esm"; | |
| const uploadButton = document.getElementById('uploadButton'); | |
| uploadButton.addEventListener('click', uploadFiles); | |
| async function uploadFiles() { | |
| 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 | |
| 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 | |
| // 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; // stop if other errors occur during repository creation | |
| } | |
| } | |
| for (let i = 0; i < files.length; i++) { | |
| const file = files[i]; | |
| processingMessage.textContent = `Processing your file ${i+1}/${files.length}...`; | |
| try { | |
| // upload file | |
| await uploadFile({ | |
| repo: REPO_ID, | |
| credentials: { accessToken: HF_ACCESS_TOKEN }, | |
| file: file, | |
| commitTitle: `committing file: ${file.name}`, | |
| }); | |
| console.log(`File ${file.name} uploaded successfully`); | |
| // update progress bar | |
| progressBar.value = ((i + 1) / files.length) * 100; | |
| } catch (error) { | |
| console.error('Error uploading file', error); | |
| errorDiv.textContent = 'Error uploading file'; | |
| return; // stop uploading further files on error | |
| } | |
| } | |
| // calculate elapsed time and speed | |
| const elapsedTime = (Date.now() - startTime) / 1000; // in seconds | |
| let speed = totalSize / elapsedTime; // in MB/s | |
| let speedUnit = 'MB/s'; | |
| if (speed < 1) { | |
| speed *= 1024; // convert to KB/s | |
| speedUnit = 'KB/s'; | |
| } else if (speed > 1024) { | |
| speed /= 1024; // convert to GB/s | |
| speedUnit = 'GB/s'; | |
| } | |
| 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)} ${speedUnit}`; | |
| // Estimate time to upload larger files | |
| let size1GB = 1024; // size in MB | |
| let time1GB = size1GB / speed; // estimate time in seconds | |
| let time1GBMinutes = time1GB / 60; // convert time to minutes | |
| let size5GB = 5 * size1GB; | |
| let time5GBMinutes = (size5GB / speed) / 60; // estimate time in minutes | |
| let size10GB = 10 * size1GB; | |
| let time10GBMinutes = (size10GB / speed) / 60; // estimate time in minutes | |
| messageDiv.textContent += `\nTo upload a 1GB model in this speed, it would take ${time1GBMinutes.toFixed(2)} minutes.`; | |
| messageDiv.textContent += `\nTo upload a 5GB model in this speed, it would take ${time5GBMinutes.toFixed(2)} minutes.`; | |
| messageDiv.textContent += `\nTo upload a 10GB model in this speed, it would take ${time10GBMinutes.toFixed(2)} minutes.`; | |
| } else { | |
| messageDiv.textContent = 'Please select a file to upload'; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |