Spaces:
Running
Running
File size: 4,524 Bytes
7e1dd21 b4c0213 c2a8871 310a2f8 b4c0213 3e75ed6 b4c0213 c2a8871 3e75ed6 c2a8871 3e75ed6 b4c0213 310a2f8 b4c0213 310a2f8 b4c0213 dda908e d823e4a cb966cc d823e4a b4c0213 3e75ed6 b4c0213 3e75ed6 b4c0213 3e75ed6 b4c0213 dda908e 1653a6c dda908e 2448fe7 310a2f8 3e75ed6 07ee08f b4c0213 07ee08f b4c0213 07ee08f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 |
<!DOCTYPE html>
<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, uploadFiles } from "https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/+esm";
const uploadButton = document.getElementById('uploadButton');
uploadButton.addEventListener('click', 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
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
}
}
try {
// upload files
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`);
// 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
}
// 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';
}
}
</script>
</body>
</html> |