Spaces:
Running
Running
Commit
•
78424dc
1
Parent(s):
b392d47
Update index.html
Browse files- index.html +128 -160
index.html
CHANGED
@@ -1,167 +1,135 @@
|
|
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 |
-
<div style="display:flex"><progress id="progressBar" value="0" max="100"></progress><div id="uploadSpeed"></div></div>
|
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/hub@0.8.3/+esm";
|
35 |
-
|
36 |
-
const uploadButton = document.getElementById('uploadButton');
|
37 |
-
uploadButton.addEventListener('click', upload);
|
38 |
-
|
39 |
-
// Override global fetch
|
40 |
-
const originalFetch = window.fetch;
|
41 |
-
let uploadStartTime;
|
42 |
-
let uploadedBytes = 0;
|
43 |
-
let totalSize = 0; // Total size of the files
|
44 |
-
|
45 |
-
window.fetch = function(url, init) {
|
46 |
-
if (typeof url === 'string' && init && init.method === 'PUT') {
|
47 |
-
uploadStartTime = uploadStartTime || Date.now();
|
48 |
-
return new Promise((resolve, reject) => {
|
49 |
-
const xhr = new XMLHttpRequest();
|
50 |
-
xhr.open(init.method, url);
|
51 |
-
|
52 |
-
for (let header in init.headers) {
|
53 |
-
xhr.setRequestHeader(header, init.headers[header]);
|
54 |
-
}
|
55 |
-
|
56 |
-
xhr.onload = () => {
|
57 |
-
resolve({
|
58 |
-
ok: xhr.status >= 200 && xhr.status < 300,
|
59 |
-
status: xhr.status,
|
60 |
-
statusText: xhr.statusText,
|
61 |
-
text: () => Promise.resolve(xhr.responseText),
|
62 |
-
});
|
63 |
-
};
|
64 |
-
|
65 |
-
xhr.onerror = () => reject(new TypeError('Network request failed'));
|
66 |
-
xhr.ontimeout = () => reject(new TypeError('Network request failed due to timeout'));
|
67 |
-
|
68 |
-
xhr.upload.onprogress = (event) => {
|
69 |
-
if (event.lengthComputable) {
|
70 |
-
uploadedBytes += event.loaded;
|
71 |
-
const progress = uploadedBytes / totalSize; // Use the known total size
|
72 |
-
const progressBar = document.getElementById('progressBar');
|
73 |
-
progressBar.value = progress * 100;
|
74 |
-
|
75 |
-
const speedDiv = document.getElementById('uploadSpeed');
|
76 |
-
const elapsedTime = (Date.now() - uploadStartTime) / 1000; // in seconds
|
77 |
-
const speed = uploadedBytes / elapsedTime; // in bytes per second
|
78 |
-
speedDiv.textContent = `Upload speed: ${(speed / 1024 / 1024).toFixed(2)} MB/s`;
|
79 |
-
}
|
80 |
-
};
|
81 |
-
|
82 |
-
xhr.send(init.body);
|
83 |
-
});
|
84 |
-
} else {
|
85 |
-
return originalFetch(url, init);
|
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 |
-
const startTime = Date.now();
|
112 |
-
|
113 |
-
try {
|
114 |
-
// Attempt to create the repo
|
115 |
-
await createRepo({
|
116 |
-
repo: REPO_ID,
|
117 |
-
credentials: { accessToken: HF_ACCESS_TOKEN },
|
118 |
-
});
|
119 |
-
} catch (error) {
|
120 |
-
// If the repo already exists, we simply log and continue
|
121 |
-
if (error.message === 'You already created this model repo') {
|
122 |
-
console.log('Repository already exists, proceeding to upload files');
|
123 |
-
} else {
|
124 |
-
console.error('Error creating repository', error);
|
125 |
-
errorDiv.textContent = 'Error creating repository';
|
126 |
-
return; // stop if other errors occur during repository creation
|
127 |
-
}
|
128 |
-
}
|
129 |
-
|
130 |
-
try {
|
131 |
-
// upload files
|
132 |
-
await uploadFiles({
|
133 |
-
repo: REPO_ID,
|
134 |
-
credentials: { accessToken: HF_ACCESS_TOKEN },
|
135 |
-
files: files.map(file => ({path: file.name, content: file}))
|
136 |
-
});
|
137 |
-
|
138 |
-
console.log(`All files uploaded successfully`);
|
139 |
-
|
140 |
-
// update progress bar
|
141 |
-
progressBar.value = 100;
|
142 |
-
} catch (error) {
|
143 |
-
console.error('Error uploading files', error);
|
144 |
-
errorDiv.textContent = 'Error uploading files';
|
145 |
-
return; // stop uploading further files on error
|
146 |
}
|
147 |
-
|
148 |
-
|
149 |
-
|
150 |
-
|
151 |
-
|
152 |
-
|
153 |
-
|
154 |
-
|
155 |
-
|
156 |
-
|
157 |
-
|
158 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
159 |
} else {
|
160 |
-
|
|
|
|
|
161 |
}
|
162 |
}
|
163 |
-
</script>
|
164 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
165 |
|
166 |
-
|
167 |
-
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<script type="module">
|
2 |
+
import { createRepo, uploadFiles } from "https://cdn.jsdelivr.net/npm/@huggingface/hub@0.8.3/+esm";
|
3 |
+
|
4 |
+
const uploadButton = document.getElementById('uploadButton');
|
5 |
+
uploadButton.addEventListener('click', upload);
|
6 |
+
|
7 |
+
// Override global fetch
|
8 |
+
const originalFetch = window.fetch;
|
9 |
+
let uploadStartTime;
|
10 |
+
let uploadedBytes = 0;
|
11 |
+
let totalSize = 0; // Total size of the files
|
12 |
+
|
13 |
+
window.fetch = function(url, init) {
|
14 |
+
if (typeof url === 'string' && init && init.method === 'PUT') {
|
15 |
+
uploadStartTime = uploadStartTime || Date.now();
|
16 |
+
return new Promise((resolve, reject) => {
|
17 |
+
const xhr = new XMLHttpRequest();
|
18 |
+
xhr.open(init.method, url);
|
19 |
+
|
20 |
+
for (let header in init.headers) {
|
21 |
+
xhr.setRequestHeader(header, init.headers[header]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
22 |
}
|
23 |
+
|
24 |
+
xhr.onload = () => {
|
25 |
+
resolve({
|
26 |
+
ok: xhr.status >= 200 && xhr.status < 300,
|
27 |
+
status: xhr.status,
|
28 |
+
statusText: xhr.statusText,
|
29 |
+
text: () => Promise.resolve(xhr.responseText),
|
30 |
+
});
|
31 |
+
};
|
32 |
+
|
33 |
+
xhr.onerror = () => reject(new TypeError('Network request failed'));
|
34 |
+
xhr.ontimeout = () => reject(new TypeError('Network request failed due to timeout'));
|
35 |
+
|
36 |
+
xhr.upload.onprogress = (event) => {
|
37 |
+
if (event.lengthComputable) {
|
38 |
+
uploadedBytes += event.loaded;
|
39 |
+
const progress = uploadedBytes / totalSize; // Use the known total size
|
40 |
+
const progressBar = document.getElementById('progressBar');
|
41 |
+
progressBar.value = progress * 100;
|
42 |
+
|
43 |
+
const speedDiv = document.getElementById('uploadSpeed');
|
44 |
+
const elapsedTime = (Date.now() - uploadStartTime) / 1000; // in seconds
|
45 |
+
const speed = uploadedBytes / elapsedTime; // in bytes per second
|
46 |
+
speedDiv.textContent = `Upload speed: ${(speed / 1024 / 1024).toFixed(2)} MB/s`;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
47 |
}
|
48 |
+
};
|
49 |
+
|
50 |
+
xhr.send(init.body);
|
51 |
+
});
|
52 |
+
} else {
|
53 |
+
return originalFetch(url, init);
|
54 |
+
}
|
55 |
+
}
|
56 |
+
|
57 |
+
async function upload() {
|
58 |
+
const fileInput = document.getElementById('fileUpload');
|
59 |
+
const files = Array.from(fileInput.files); // convert FileList to Array
|
60 |
+
|
61 |
+
// Calculate total size of the files
|
62 |
+
totalSize = files.reduce((acc, file) => acc + file.size, 0);
|
63 |
+
|
64 |
+
const tokenInput = document.getElementById('tokenInput');
|
65 |
+
const HF_ACCESS_TOKEN = tokenInput.value; // get the entered token
|
66 |
+
const repoInput = document.getElementById('repoInput');
|
67 |
+
const REPO_ID = repoInput.value; // get the entered repo id
|
68 |
+
const progressBar = document.getElementById('progressBar');
|
69 |
+
const messageDiv = document.getElementById('message');
|
70 |
+
const errorDiv = document.getElementById('error');
|
71 |
+
const processingMessage = document.getElementById('processingMessage');
|
72 |
+
progressBar.value = 0; // reset progress bar
|
73 |
+
messageDiv.textContent = ''; // clear previous messages
|
74 |
+
errorDiv.textContent = ''; // clear previous errors
|
75 |
+
processingMessage.textContent = ''; // clear previous processing message
|
76 |
+
|
77 |
+
if (files.length > 0) {
|
78 |
+
// start time
|
79 |
+
const startTime = Date.now();
|
80 |
+
|
81 |
+
try {
|
82 |
+
// Attempt to create the repo
|
83 |
+
await createRepo({
|
84 |
+
repo: REPO_ID,
|
85 |
+
credentials: { accessToken: HF_ACCESS_TOKEN },
|
86 |
+
});
|
87 |
+
} catch (error) {
|
88 |
+
// If the repo already exists, we simply log and continue
|
89 |
+
if (error.message === 'You already created this model repo') {
|
90 |
+
console.log('Repository already exists, proceeding to upload files');
|
91 |
} else {
|
92 |
+
console.error('Error creating repository', error);
|
93 |
+
errorDiv.textContent = 'Error creating repository';
|
94 |
+
return; // stop if other errors occur during repository creation
|
95 |
}
|
96 |
}
|
|
|
97 |
|
98 |
+
try {
|
99 |
+
// upload files
|
100 |
+
await uploadFiles({
|
101 |
+
repo: REPO_ID,
|
102 |
+
credentials: { accessToken: HF_ACCESS_TOKEN },
|
103 |
+
files: files.map(file => ({path: file.name, content: file}))
|
104 |
+
});
|
105 |
+
|
106 |
+
console.log(`All files uploaded successfully`);
|
107 |
+
|
108 |
+
// update progress bar
|
109 |
+
progressBar.value = 100;
|
110 |
+
} catch (error) {
|
111 |
+
console.error('Error uploading files', error);
|
112 |
+
errorDiv.textContent = 'Error uploading files';
|
113 |
+
return; // stop uploading further files on error
|
114 |
+
}
|
115 |
+
|
116 |
+
// calculate elapsed time and speed
|
117 |
+
const elapsedTime = (Date.now() - startTime) / 1000; // in seconds
|
118 |
+
let speed = uploadedBytes / elapsedTime; // in bytes per second
|
119 |
+
|
120 |
+
// Convert totalSize and speed to MB and MB/s respectively
|
121 |
+
totalSize = totalSize / (1024 * 1024); // convert to MB
|
122 |
+
speed = speed / (1024 * 1024); // convert to MB/s
|
123 |
+
|
124 |
+
// Estimate time to upload larger files in minutes
|
125 |
+
let time1GB = (1024 / speed) / 60;
|
126 |
+
let time5GB = (5 * 1024 / speed) / 60;
|
127 |
+
let time10GB = (10 * 1024 / speed) / 60;
|
128 |
|
129 |
+
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.`;
|
130 |
+
processingMessage.textContent = "All files processed";
|
131 |
+
} else {
|
132 |
+
messageDiv.textContent = 'Please select files to upload';
|
133 |
+
}
|
134 |
+
}
|
135 |
+
</script>
|