Spaces:
Running
Running
Commit
•
ccd8a2a
1
Parent(s):
006084e
Update index.html
Browse files- index.html +34 -25
index.html
CHANGED
@@ -26,55 +26,64 @@
|
|
26 |
<input type="file" id="fileUpload" multiple>
|
27 |
<button id="uploadButton">Upload Files</button>
|
28 |
<div id="processingMessage"></div>
|
29 |
-
<
|
30 |
<div id="message"></div>
|
31 |
<div id="error"></div>
|
|
|
32 |
<script type="module">
|
33 |
import { createRepo, uploadFiles } from "https://cdn.jsdelivr.net/npm/@huggingface/hub@0.8.3/+esm";
|
34 |
-
|
35 |
const uploadButton = document.getElementById('uploadButton');
|
36 |
uploadButton.addEventListener('click', upload);
|
37 |
-
|
38 |
-
|
39 |
-
|
40 |
-
|
41 |
-
|
42 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
43 |
return new Promise((resolve, reject) => {
|
44 |
const xhr = new XMLHttpRequest();
|
|
|
45 |
xhr.open(init.method, url);
|
46 |
-
|
47 |
for (let header in init.headers) {
|
48 |
xhr.setRequestHeader(header, init.headers[header]);
|
49 |
}
|
50 |
-
|
51 |
xhr.onload = () => {
|
52 |
resolve({
|
53 |
ok: xhr.status >= 200 && xhr.status < 300,
|
54 |
status: xhr.status,
|
55 |
statusText: xhr.statusText,
|
56 |
text: () => Promise.resolve(xhr.responseText),
|
|
|
57 |
});
|
58 |
};
|
59 |
-
|
60 |
xhr.onerror = () => reject(new TypeError('Network request failed'));
|
61 |
xhr.ontimeout = () => reject(new TypeError('Network request failed due to timeout'));
|
62 |
-
|
63 |
xhr.upload.onprogress = (event) => {
|
64 |
if (event.lengthComputable) {
|
65 |
-
const progress = event.loaded / event.total;
|
66 |
const progressBar = document.getElementById('progressBar');
|
67 |
-
progressBar.value =
|
68 |
}
|
69 |
};
|
70 |
-
|
71 |
xhr.send(init.body);
|
72 |
});
|
73 |
} else {
|
|
|
74 |
return originalFetch(url, init);
|
75 |
}
|
76 |
-
}
|
77 |
-
|
78 |
async function upload() {
|
79 |
const fileInput = document.getElementById('fileUpload');
|
80 |
const files = Array.from(fileInput.files);
|
@@ -90,16 +99,16 @@
|
|
90 |
messageDiv.textContent = '';
|
91 |
errorDiv.textContent = '';
|
92 |
processingMessage.textContent = '';
|
93 |
-
|
94 |
if (files.length > 0) {
|
95 |
let totalSize = 0;
|
96 |
for (let file of files) {
|
97 |
totalSize += file.size;
|
98 |
}
|
99 |
totalSize = totalSize / (1024 * 1024);
|
100 |
-
|
101 |
const startTime = Date.now();
|
102 |
-
|
103 |
try {
|
104 |
await createRepo({
|
105 |
repo: REPO_ID,
|
@@ -114,14 +123,14 @@
|
|
114 |
return;
|
115 |
}
|
116 |
}
|
117 |
-
|
118 |
try {
|
119 |
await uploadFiles({
|
120 |
repo: REPO_ID,
|
121 |
credentials: { accessToken: HF_ACCESS_TOKEN },
|
122 |
files: files.map(file => ({path: file.name, content: file}))
|
123 |
});
|
124 |
-
|
125 |
console.log(`All files uploaded successfully`);
|
126 |
progressBar.value = 100;
|
127 |
} catch (error) {
|
@@ -129,14 +138,14 @@
|
|
129 |
errorDiv.textContent = 'Error uploading files';
|
130 |
return;
|
131 |
}
|
132 |
-
|
133 |
const elapsedTime = (Date.now() - startTime) / 1000;
|
134 |
let speed = totalSize / elapsedTime;
|
135 |
-
|
136 |
let time1GB = (1024 / speed) / 60;
|
137 |
let time5GB = (5 * 1024 / speed) / 60;
|
138 |
let time10GB = (10 * 1024 / speed) / 60;
|
139 |
-
|
140 |
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.`;
|
141 |
processingMessage.textContent = "All files processed";
|
142 |
} else {
|
|
|
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/hub@0.8.3/+esm";
|
35 |
+
|
36 |
const uploadButton = document.getElementById('uploadButton');
|
37 |
uploadButton.addEventListener('click', upload);
|
38 |
+
|
39 |
+
function isS3Url(url) {
|
40 |
+
// Replace this with the actual condition to identify S3 URLs
|
41 |
+
return url.startsWith('https://s3.amazonaws.com/');
|
42 |
+
}
|
43 |
+
|
44 |
+
// Save the original fetch function
|
45 |
+
const originalFetch = fetch;
|
46 |
+
|
47 |
+
// Replace the global fetch function
|
48 |
+
fetch = (url, init) => {
|
49 |
+
if (isS3Url(url) && init.method === 'PUT') {
|
50 |
return new Promise((resolve, reject) => {
|
51 |
const xhr = new XMLHttpRequest();
|
52 |
+
|
53 |
xhr.open(init.method, url);
|
54 |
+
|
55 |
for (let header in init.headers) {
|
56 |
xhr.setRequestHeader(header, init.headers[header]);
|
57 |
}
|
58 |
+
|
59 |
xhr.onload = () => {
|
60 |
resolve({
|
61 |
ok: xhr.status >= 200 && xhr.status < 300,
|
62 |
status: xhr.status,
|
63 |
statusText: xhr.statusText,
|
64 |
text: () => Promise.resolve(xhr.responseText),
|
65 |
+
json: () => Promise.resolve(JSON.parse(xhr.responseText))
|
66 |
});
|
67 |
};
|
68 |
+
|
69 |
xhr.onerror = () => reject(new TypeError('Network request failed'));
|
70 |
xhr.ontimeout = () => reject(new TypeError('Network request failed due to timeout'));
|
71 |
+
|
72 |
xhr.upload.onprogress = (event) => {
|
73 |
if (event.lengthComputable) {
|
|
|
74 |
const progressBar = document.getElementById('progressBar');
|
75 |
+
progressBar.value = (event.loaded / event.total) * 100;
|
76 |
}
|
77 |
};
|
78 |
+
|
79 |
xhr.send(init.body);
|
80 |
});
|
81 |
} else {
|
82 |
+
// Use the original fetch function for non-S3 requests
|
83 |
return originalFetch(url, init);
|
84 |
}
|
85 |
+
};
|
86 |
+
|
87 |
async function upload() {
|
88 |
const fileInput = document.getElementById('fileUpload');
|
89 |
const files = Array.from(fileInput.files);
|
|
|
99 |
messageDiv.textContent = '';
|
100 |
errorDiv.textContent = '';
|
101 |
processingMessage.textContent = '';
|
102 |
+
|
103 |
if (files.length > 0) {
|
104 |
let totalSize = 0;
|
105 |
for (let file of files) {
|
106 |
totalSize += file.size;
|
107 |
}
|
108 |
totalSize = totalSize / (1024 * 1024);
|
109 |
+
|
110 |
const startTime = Date.now();
|
111 |
+
|
112 |
try {
|
113 |
await createRepo({
|
114 |
repo: REPO_ID,
|
|
|
123 |
return;
|
124 |
}
|
125 |
}
|
126 |
+
|
127 |
try {
|
128 |
await uploadFiles({
|
129 |
repo: REPO_ID,
|
130 |
credentials: { accessToken: HF_ACCESS_TOKEN },
|
131 |
files: files.map(file => ({path: file.name, content: file}))
|
132 |
});
|
133 |
+
|
134 |
console.log(`All files uploaded successfully`);
|
135 |
progressBar.value = 100;
|
136 |
} catch (error) {
|
|
|
138 |
errorDiv.textContent = 'Error uploading files';
|
139 |
return;
|
140 |
}
|
141 |
+
|
142 |
const elapsedTime = (Date.now() - startTime) / 1000;
|
143 |
let speed = totalSize / elapsedTime;
|
144 |
+
|
145 |
let time1GB = (1024 / speed) / 60;
|
146 |
let time5GB = (5 * 1024 / speed) / 60;
|
147 |
let time10GB = (10 * 1024 / speed) / 60;
|
148 |
+
|
149 |
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.`;
|
150 |
processingMessage.textContent = "All files processed";
|
151 |
} else {
|