Spaces:
Running
Running
Commit
•
b392d47
1
Parent(s):
432f2a7
Update index.html
Browse files- index.html +27 -19
index.html
CHANGED
@@ -32,7 +32,7 @@
|
|
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 |
|
@@ -40,6 +40,7 @@
|
|
40 |
const originalFetch = window.fetch;
|
41 |
let uploadStartTime;
|
42 |
let uploadedBytes = 0;
|
|
|
43 |
|
44 |
window.fetch = function(url, init) {
|
45 |
if (typeof url === 'string' && init && init.method === 'PUT') {
|
@@ -67,7 +68,7 @@
|
|
67 |
xhr.upload.onprogress = (event) => {
|
68 |
if (event.lengthComputable) {
|
69 |
uploadedBytes += event.loaded;
|
70 |
-
const progress = uploadedBytes /
|
71 |
const progressBar = document.getElementById('progressBar');
|
72 |
progressBar.value = progress * 100;
|
73 |
|
@@ -87,45 +88,47 @@
|
|
87 |
|
88 |
async function upload() {
|
89 |
const fileInput = document.getElementById('fileUpload');
|
90 |
-
const files = Array.from(fileInput.files);
|
|
|
|
|
|
|
|
|
91 |
const tokenInput = document.getElementById('tokenInput');
|
92 |
-
const HF_ACCESS_TOKEN = tokenInput.value;
|
93 |
const repoInput = document.getElementById('repoInput');
|
94 |
-
const REPO_ID = repoInput.value;
|
95 |
const progressBar = document.getElementById('progressBar');
|
96 |
const messageDiv = document.getElementById('message');
|
97 |
const errorDiv = document.getElementById('error');
|
98 |
const processingMessage = document.getElementById('processingMessage');
|
99 |
-
progressBar.value = 0;
|
100 |
-
messageDiv.textContent = '';
|
101 |
-
errorDiv.textContent = '';
|
102 |
-
processingMessage.textContent = '';
|
103 |
|
104 |
if (files.length > 0) {
|
105 |
-
|
106 |
-
for (let file of files) {
|
107 |
-
totalSize += file.size;
|
108 |
-
}
|
109 |
-
totalSize = totalSize / (1024 * 1024);
|
110 |
-
|
111 |
const startTime = Date.now();
|
112 |
|
113 |
try {
|
|
|
114 |
await createRepo({
|
115 |
repo: REPO_ID,
|
116 |
credentials: { accessToken: HF_ACCESS_TOKEN },
|
117 |
});
|
118 |
} catch (error) {
|
|
|
119 |
if (error.message === 'You already created this model repo') {
|
120 |
console.log('Repository already exists, proceeding to upload files');
|
121 |
} else {
|
122 |
console.error('Error creating repository', error);
|
123 |
errorDiv.textContent = 'Error creating repository';
|
124 |
-
return;
|
125 |
}
|
126 |
}
|
127 |
|
128 |
try {
|
|
|
129 |
await uploadFiles({
|
130 |
repo: REPO_ID,
|
131 |
credentials: { accessToken: HF_ACCESS_TOKEN },
|
@@ -133,16 +136,20 @@
|
|
133 |
});
|
134 |
|
135 |
console.log(`All files uploaded successfully`);
|
|
|
|
|
136 |
progressBar.value = 100;
|
137 |
} catch (error) {
|
138 |
console.error('Error uploading files', error);
|
139 |
errorDiv.textContent = 'Error uploading files';
|
140 |
-
return;
|
141 |
}
|
142 |
|
143 |
-
|
144 |
-
|
|
|
145 |
|
|
|
146 |
let time1GB = (1024 / speed) / 60;
|
147 |
let time5GB = (5 * 1024 / speed) / 60;
|
148 |
let time10GB = (10 * 1024 / speed) / 60;
|
@@ -155,5 +162,6 @@
|
|
155 |
}
|
156 |
</script>
|
157 |
|
|
|
158 |
</body>
|
159 |
</html>
|
|
|
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 |
|
|
|
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') {
|
|
|
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 |
|
|
|
88 |
|
89 |
async function upload() {
|
90 |
const fileInput = document.getElementById('fileUpload');
|
91 |
+
const files = Array.from(fileInput.files); // convert FileList to Array
|
92 |
+
|
93 |
+
// Calculate total size of the files
|
94 |
+
totalSize = files.reduce((acc, file) => acc + file.size, 0);
|
95 |
+
|
96 |
const tokenInput = document.getElementById('tokenInput');
|
97 |
+
const HF_ACCESS_TOKEN = tokenInput.value; // get the entered token
|
98 |
const repoInput = document.getElementById('repoInput');
|
99 |
+
const REPO_ID = repoInput.value; // get the entered repo id
|
100 |
const progressBar = document.getElementById('progressBar');
|
101 |
const messageDiv = document.getElementById('message');
|
102 |
const errorDiv = document.getElementById('error');
|
103 |
const processingMessage = document.getElementById('processingMessage');
|
104 |
+
progressBar.value = 0; // reset progress bar
|
105 |
+
messageDiv.textContent = ''; // clear previous messages
|
106 |
+
errorDiv.textContent = ''; // clear previous errors
|
107 |
+
processingMessage.textContent = ''; // clear previous processing message
|
108 |
|
109 |
if (files.length > 0) {
|
110 |
+
// start time
|
|
|
|
|
|
|
|
|
|
|
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 },
|
|
|
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 |
+
// calculate elapsed time and speed
|
149 |
+
const elapsedTime = (Date.now() - startTime) / 1000; // in seconds
|
150 |
+
let speed = totalSize / elapsedTime; // in MB/s
|
151 |
|
152 |
+
// Estimate time to upload larger files in minutes
|
153 |
let time1GB = (1024 / speed) / 60;
|
154 |
let time5GB = (5 * 1024 / speed) / 60;
|
155 |
let time10GB = (10 * 1024 / speed) / 60;
|
|
|
162 |
}
|
163 |
</script>
|
164 |
|
165 |
+
|
166 |
</body>
|
167 |
</html>
|