Spaces:
Running
Running
Commit
·
cfd6ace
1
Parent(s):
0b9db15
Update index.html
Browse files- index.html +112 -109
index.html
CHANGED
@@ -1,117 +1,120 @@
|
|
1 |
-
|
2 |
-
|
3 |
-
|
4 |
-
|
5 |
-
|
6 |
-
|
7 |
-
|
8 |
-
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
19 |
-
|
20 |
-
|
21 |
-
|
22 |
-
<label for="tokenInput">Hugging Face Token:</label>
|
23 |
-
<input type="password" id="tokenInput" name="tokenInput">
|
24 |
-
<label for="repoInput">Repository ID:</label>
|
25 |
-
<input type="text" id="repoInput" name="repoInput" placeholder="my-user/nlp-model">
|
26 |
-
<input type="file" id="fileUpload" multiple>
|
27 |
-
<button id="uploadButton">Upload Files</button>
|
28 |
-
<div id="processingMessage"></div>
|
29 |
-
<progress id="progressBar" value="0" max="100"></progress>
|
30 |
-
<div id="message"></div>
|
31 |
-
<div id="error"></div>
|
32 |
-
|
33 |
-
<script type="module">
|
34 |
-
import { createRepo, uploadFiles } from "https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/+esm";
|
35 |
-
const uploadButton = document.getElementById('uploadButton');
|
36 |
-
uploadButton.addEventListener('click', upload);
|
37 |
-
|
38 |
-
async function upload() {
|
39 |
-
const fileInput = document.getElementById('fileUpload');
|
40 |
-
const files = Array.from(fileInput.files); // convert FileList to Array
|
41 |
-
const tokenInput = document.getElementById('tokenInput');
|
42 |
-
const HF_ACCESS_TOKEN = tokenInput.value; // get the entered token
|
43 |
-
const repoInput = document.getElementById('repoInput');
|
44 |
-
const REPO_ID = repoInput.value; // get the entered repo id
|
45 |
-
const progressBar = document.getElementById('progressBar');
|
46 |
-
const messageDiv = document.getElementById('message');
|
47 |
-
const errorDiv = document.getElementById('error');
|
48 |
-
const processingMessage = document.getElementById('processingMessage');
|
49 |
-
progressBar.value = 0; // reset progress bar
|
50 |
-
messageDiv.textContent = ''; // clear previous messages
|
51 |
-
errorDiv.textContent = ''; // clear previous errors
|
52 |
-
processingMessage.textContent = ''; // clear previous processing message
|
53 |
-
|
54 |
-
if (files.length > 0) {
|
55 |
-
// calculate total size in MB
|
56 |
-
let totalSize = 0;
|
57 |
-
for (let file of files) {
|
58 |
-
totalSize += file.size;
|
59 |
-
}
|
60 |
-
totalSize = totalSize / (1024 * 1024); // convert to MB
|
61 |
-
|
62 |
-
// start time
|
63 |
-
const startTime = Date.now();
|
64 |
-
|
65 |
-
try {
|
66 |
-
// Attempt to create the repo
|
67 |
-
await createRepo({
|
68 |
-
repo: REPO_ID,
|
69 |
-
credentials: { accessToken: HF_ACCESS_TOKEN },
|
70 |
-
});
|
71 |
-
} catch (error) {
|
72 |
-
// If the repo already exists, we simply log and continue
|
73 |
-
if (error.message === 'You already created this model repo') {
|
74 |
-
console.log('Repository already exists, proceeding to upload files');
|
75 |
-
} else {
|
76 |
-
console.error('Error creating repository', error);
|
77 |
-
errorDiv.textContent = 'Error creating repository';
|
78 |
-
return; // stop if other errors occur during repository creation
|
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 |
-
let time1GB = (1024 / speed) / 60;
|
106 |
-
let time5GB = (5 * 1024 / speed) / 60;
|
107 |
-
let time10GB = (10 * 1024 / speed) / 60;
|
108 |
|
109 |
-
|
110 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
111 |
} else {
|
112 |
-
|
|
|
|
|
113 |
}
|
114 |
}
|
115 |
-
|
116 |
-
|
117 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<script type="module">
|
2 |
+
import { createRepo, uploadFiles } from "https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/+esm";
|
3 |
+
|
4 |
+
const uploadButton = document.getElementById('uploadButton');
|
5 |
+
uploadButton.addEventListener('click', upload);
|
6 |
+
|
7 |
+
function isS3Url(url) {
|
8 |
+
// Replace this with the actual condition to identify S3 URLs
|
9 |
+
return url.startsWith('https://s3.amazonaws.com/');
|
10 |
+
}
|
11 |
+
|
12 |
+
function fetchWithProgress(url, init) {
|
13 |
+
if (isS3Url(url)) {
|
14 |
+
return new Promise((resolve, reject) => {
|
15 |
+
const xhr = new XMLHttpRequest();
|
16 |
+
|
17 |
+
xhr.open(init.method || 'GET', url);
|
18 |
+
|
19 |
+
for (let header in init.headers) {
|
20 |
+
xhr.setRequestHeader(header, init.headers[header]);
|
21 |
+
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
22 |
|
23 |
+
xhr.onload = () => {
|
24 |
+
resolve({
|
25 |
+
ok: xhr.status >= 200 && xhr.status < 300,
|
26 |
+
status: xhr.status,
|
27 |
+
statusText: xhr.statusText,
|
28 |
+
text: () => Promise.resolve(xhr.responseText)
|
29 |
+
});
|
30 |
+
};
|
31 |
+
|
32 |
+
xhr.onerror = () => reject(new TypeError('Network request failed'));
|
33 |
+
|
34 |
+
xhr.ontimeout = () => reject(new TypeError('Network request failed due to timeout'));
|
35 |
+
|
36 |
+
xhr.upload.onprogress = (event) => {
|
37 |
+
if (event.lengthComputable) {
|
38 |
+
const progress = event.loaded / event.total;
|
39 |
+
const progressBar = document.getElementById('progressBar');
|
40 |
+
progressBar.value = progress * 100;
|
41 |
}
|
42 |
+
};
|
43 |
|
44 |
+
xhr.send(init.body);
|
45 |
+
});
|
46 |
+
} else {
|
47 |
+
return fetch(url, init);
|
48 |
+
}
|
49 |
+
}
|
50 |
+
|
51 |
+
async function upload() {
|
52 |
+
const fileInput = document.getElementById('fileUpload');
|
53 |
+
const files = Array.from(fileInput.files);
|
54 |
+
const tokenInput = document.getElementById('tokenInput');
|
55 |
+
const HF_ACCESS_TOKEN = tokenInput.value;
|
56 |
+
const repoInput = document.getElementById('repoInput');
|
57 |
+
const REPO_ID = repoInput.value;
|
58 |
+
const progressBar = document.getElementById('progressBar');
|
59 |
+
const messageDiv = document.getElementById('message');
|
60 |
+
const errorDiv = document.getElementById('error');
|
61 |
+
const processingMessage = document.getElementById('processingMessage');
|
62 |
+
progressBar.value = 0;
|
63 |
+
messageDiv.textContent = '';
|
64 |
+
errorDiv.textContent = '';
|
65 |
+
processingMessage.textContent = '';
|
66 |
+
|
67 |
+
if (files.length > 0) {
|
68 |
+
let totalSize = 0;
|
69 |
+
for (let file of files) {
|
70 |
+
totalSize += file.size;
|
71 |
+
}
|
72 |
+
totalSize = totalSize / (1024 * 1024);
|
73 |
|
74 |
+
const startTime = Date.now();
|
|
|
|
|
|
|
75 |
|
76 |
+
try {
|
77 |
+
await createRepo({
|
78 |
+
repo: REPO_ID,
|
79 |
+
credentials: { accessToken: HF_ACCESS_TOKEN },
|
80 |
+
});
|
81 |
+
} catch (error) {
|
82 |
+
if (error.message === 'You already created this model repo') {
|
83 |
+
console.log('Repository already exists, proceeding to upload files');
|
84 |
} else {
|
85 |
+
console.error('Error creating repository', error);
|
86 |
+
errorDiv.textContent = 'Error creating repository';
|
87 |
+
return;
|
88 |
}
|
89 |
}
|
90 |
+
|
91 |
+
try {
|
92 |
+
await uploadFiles({
|
93 |
+
repo: REPO_ID,
|
94 |
+
credentials: { accessToken: HF_ACCESS_TOKEN },
|
95 |
+
files: files.map(file => ({path: file.name, content: file})),
|
96 |
+
fetch: fetchWithProgress
|
97 |
+
});
|
98 |
+
|
99 |
+
console.log(`All files uploaded successfully`);
|
100 |
+
progressBar.value = 100;
|
101 |
+
} catch (error) {
|
102 |
+
console.error('Error uploading files', error);
|
103 |
+
errorDiv.textContent = 'Error uploading files';
|
104 |
+
return;
|
105 |
+
}
|
106 |
+
|
107 |
+
const elapsedTime = (Date.now() - startTime) / 1000;
|
108 |
+
let speed = totalSize / elapsedTime;
|
109 |
+
|
110 |
+
let time1GB = (1024 / speed) / 60;
|
111 |
+
let time5GB = (5 * 1024 / speed) / 60;
|
112 |
+
let time10GB = (10 * 1024 / speed) / 60;
|
113 |
+
|
114 |
+
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.`;
|
115 |
+
processingMessage.textContent = "All files processed";
|
116 |
+
} else {
|
117 |
+
messageDiv.textContent = 'Please select files to upload';
|
118 |
+
}
|
119 |
+
}
|
120 |
+
</script>
|