Spaces:
Running
Running
Commit
•
b00a78e
1
Parent(s):
157cbfc
Update index.html
Browse files- index.html +20 -50
index.html
CHANGED
@@ -37,14 +37,9 @@
|
|
37 |
|
38 |
// Override global fetch
|
39 |
const originalFetch = window.fetch;
|
40 |
-
let uploadStartTime;
|
41 |
-
let uploadedBytes = 0;
|
42 |
-
let totalSize = 0; // Total size of the files
|
43 |
-
let uploadFinished = false;
|
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);
|
@@ -67,23 +62,9 @@
|
|
67 |
|
68 |
xhr.upload.onprogress = (event) => {
|
69 |
if (event.lengthComputable) {
|
70 |
-
|
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 processingMessage = document.getElementById('processingMessage');
|
77 |
-
|
78 |
-
if (progress < 1) { // If upload is not yet finished
|
79 |
-
const elapsedTime = (Date.now() - uploadStartTime) / 1000; // in seconds
|
80 |
-
const speed = uploadedBytes / elapsedTime; // in bytes per second
|
81 |
-
speedDiv.textContent = `Upload speed: ${(speed / 1024 / 1024).toFixed(2)} MB/s`;
|
82 |
-
} else if (!uploadFinished) { // If upload just finished
|
83 |
-
uploadFinished = true;
|
84 |
-
speedDiv.textContent = '';
|
85 |
-
processingMessage.textContent = "Processing your upload...";
|
86 |
-
}
|
87 |
}
|
88 |
};
|
89 |
|
@@ -96,48 +77,45 @@
|
|
96 |
|
97 |
async function upload() {
|
98 |
const fileInput = document.getElementById('fileUpload');
|
99 |
-
const files = Array.from(fileInput.files);
|
100 |
-
|
101 |
-
// Calculate total size of the files
|
102 |
-
totalSize = files.reduce((acc, file) => acc + file.size, 0);
|
103 |
-
|
104 |
const tokenInput = document.getElementById('tokenInput');
|
105 |
-
const HF_ACCESS_TOKEN = tokenInput.value;
|
106 |
const repoInput = document.getElementById('repoInput');
|
107 |
-
const REPO_ID = repoInput.value;
|
108 |
const progressBar = document.getElementById('progressBar');
|
109 |
const messageDiv = document.getElementById('message');
|
110 |
const errorDiv = document.getElementById('error');
|
111 |
const processingMessage = document.getElementById('processingMessage');
|
112 |
-
|
113 |
-
|
114 |
-
|
115 |
-
|
116 |
-
|
117 |
-
|
118 |
if (files.length > 0) {
|
119 |
-
|
|
|
|
|
|
|
|
|
|
|
120 |
const startTime = Date.now();
|
121 |
|
122 |
try {
|
123 |
-
// Attempt to create the repo
|
124 |
await createRepo({
|
125 |
repo: REPO_ID,
|
126 |
credentials: { accessToken: HF_ACCESS_TOKEN },
|
127 |
});
|
128 |
} catch (error) {
|
129 |
-
// If the repo already exists, we simply log and continue
|
130 |
if (error.message === 'You already created this model repo') {
|
131 |
console.log('Repository already exists, proceeding to upload files');
|
132 |
} else {
|
133 |
console.error('Error creating repository', error);
|
134 |
errorDiv.textContent = 'Error creating repository';
|
135 |
-
return;
|
136 |
}
|
137 |
}
|
138 |
|
139 |
try {
|
140 |
-
// upload files
|
141 |
await uploadFiles({
|
142 |
repo: REPO_ID,
|
143 |
credentials: { accessToken: HF_ACCESS_TOKEN },
|
@@ -145,25 +123,16 @@
|
|
145 |
});
|
146 |
|
147 |
console.log(`All files uploaded successfully`);
|
148 |
-
|
149 |
-
// update progress bar
|
150 |
progressBar.value = 100;
|
151 |
} catch (error) {
|
152 |
console.error('Error uploading files', error);
|
153 |
errorDiv.textContent = 'Error uploading files';
|
154 |
-
return;
|
155 |
}
|
156 |
|
157 |
-
|
158 |
-
|
159 |
-
//let speed = uploadedBytes / elapsedTime; // in bytes per second
|
160 |
|
161 |
-
// Convert totalSize and speed to MB and MB/s respectively
|
162 |
-
totalSize = totalSize / (1024 * 1024); // convert to MB
|
163 |
-
let speed = totalSize / elapsedTime; // convert bytes to MB and calculate MB/s
|
164 |
-
|
165 |
-
|
166 |
-
// Estimate time to upload larger files in minutes
|
167 |
let time1GB = (1024 / speed) / 60;
|
168 |
let time5GB = (5 * 1024 / speed) / 60;
|
169 |
let time10GB = (10 * 1024 / speed) / 60;
|
@@ -175,5 +144,6 @@
|
|
175 |
}
|
176 |
}
|
177 |
</script>
|
|
|
178 |
</body>
|
179 |
</html>
|
|
|
37 |
|
38 |
// Override global fetch
|
39 |
const originalFetch = window.fetch;
|
|
|
|
|
|
|
|
|
40 |
|
41 |
window.fetch = function(url, init) {
|
42 |
if (typeof url === 'string' && init && init.method === 'PUT') {
|
|
|
43 |
return new Promise((resolve, reject) => {
|
44 |
const xhr = new XMLHttpRequest();
|
45 |
xhr.open(init.method, url);
|
|
|
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 = progress * 100;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
68 |
}
|
69 |
};
|
70 |
|
|
|
77 |
|
78 |
async function upload() {
|
79 |
const fileInput = document.getElementById('fileUpload');
|
80 |
+
const files = Array.from(fileInput.files);
|
|
|
|
|
|
|
|
|
81 |
const tokenInput = document.getElementById('tokenInput');
|
82 |
+
const HF_ACCESS_TOKEN = tokenInput.value;
|
83 |
const repoInput = document.getElementById('repoInput');
|
84 |
+
const REPO_ID = repoInput.value;
|
85 |
const progressBar = document.getElementById('progressBar');
|
86 |
const messageDiv = document.getElementById('message');
|
87 |
const errorDiv = document.getElementById('error');
|
88 |
const processingMessage = document.getElementById('processingMessage');
|
89 |
+
progressBar.value = 0;
|
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,
|
106 |
credentials: { accessToken: HF_ACCESS_TOKEN },
|
107 |
});
|
108 |
} catch (error) {
|
|
|
109 |
if (error.message === 'You already created this model repo') {
|
110 |
console.log('Repository already exists, proceeding to upload files');
|
111 |
} else {
|
112 |
console.error('Error creating repository', error);
|
113 |
errorDiv.textContent = 'Error creating repository';
|
114 |
+
return;
|
115 |
}
|
116 |
}
|
117 |
|
118 |
try {
|
|
|
119 |
await uploadFiles({
|
120 |
repo: REPO_ID,
|
121 |
credentials: { accessToken: HF_ACCESS_TOKEN },
|
|
|
123 |
});
|
124 |
|
125 |
console.log(`All files uploaded successfully`);
|
|
|
|
|
126 |
progressBar.value = 100;
|
127 |
} catch (error) {
|
128 |
console.error('Error uploading files', error);
|
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;
|
|
|
144 |
}
|
145 |
}
|
146 |
</script>
|
147 |
+
|
148 |
</body>
|
149 |
</html>
|