Hugging Face's logo

Spaces:
multimodalart
/
upload_your_model
Running

App Files Community
multimodalart HF Staff commited on
Commit
c13d23b
·
1 Parent(s): cfd6ace

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +139 -105
index.html CHANGED
@@ -1,120 +1,154 @@
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
- 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>
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <style>
5
+ body {
6
+ font-family: Arial, sans-serif;
7
+ }
8
+ input, button, progress {
9
+ display: block;
10
+ margin-top: 10px;
11
+ }
12
+ #message {
13
+ margin-top: 20px;
14
+ color: blue;
15
+ }
16
+ #error {
17
+ color: red;
18
+ }
19
+ </style>
20
+ </head>
21
+ <body>
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/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
+ function fetchWithProgress(url, init) {
45
+ if (isS3Url(url)) {
46
+ return new Promise((resolve, reject) => {
47
+ const xhr = new XMLHttpRequest();
48
 
49
+ xhr.open(init.method || 'GET', url);
 
 
 
50
 
51
+ for (let header in init.headers) {
52
+ xhr.setRequestHeader(header, init.headers[header]);
53
+ }
54
 
55
+ xhr.onload = () => {
56
+ resolve({
57
+ ok: xhr.status >= 200 && xhr.status < 300,
58
+ status: xhr.status,
59
+ statusText: xhr.statusText,
60
+ text: () => Promise.resolve(xhr.responseText)
61
+ });
62
+ };
63
 
64
+ xhr.onerror = () => reject(new TypeError('Network request failed'));
 
 
 
 
 
 
 
65
 
66
+ xhr.ontimeout = () => reject(new TypeError('Network request failed due to timeout'));
67
 
68
+ xhr.upload.onprogress = (event) => {
69
+ if (event.lengthComputable) {
70
+ const progress = event.loaded / event.total;
71
+ const progressBar = document.getElementById('progressBar');
72
+ progressBar.value = progress * 100;
73
+ }
74
+ };
75
 
76
+ xhr.send(init.body);
77
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
78
  } else {
79
+ return fetch(url, init);
 
 
80
  }
81
  }
82
 
83
+ async function upload() {
84
+ const fileInput = document.getElementById('fileUpload');
85
+ const files = Array.from(fileInput.files);
86
+ const tokenInput = document.getElementById('tokenInput');
87
+ const HF_ACCESS_TOKEN = tokenInput.value;
88
+ const repoInput = document.getElementById('repoInput');
89
+ const REPO_ID = repoInput.value;
90
+ const progressBar = document.getElementById('progressBar');
91
+ const messageDiv = document.getElementById('message');
92
+ const errorDiv = document.getElementById('error');
93
+ const processingMessage = document.getElementById('processingMessage');
94
+ progressBar.value = 0;
95
+ messageDiv.textContent = '';
96
+ errorDiv.textContent = '';
97
+ processingMessage.textContent = '';
98
+
99
+ if (files.length > 0) {
100
+ let totalSize = 0;
101
+ for (let file of files) {
102
+ totalSize += file.size;
103
+ }
104
+ totalSize = totalSize / (1024 * 1024);
105
+
106
+ const startTime = Date.now();
107
+
108
+ try {
109
+ await createRepo({
110
+ repo: REPO_ID,
111
+ credentials: { accessToken: HF_ACCESS_TOKEN },
112
+ });
113
+ } catch (error) {
114
+ if (error.message === 'You already created this model repo') {
115
+ console.log('Repository already exists, proceeding to upload files');
116
+ } else {
117
+ console.error('Error creating repository', error);
118
+ errorDiv.textContent = 'Error creating repository';
119
+ return;
120
+ }
121
+ }
122
 
123
+ try {
124
+ await uploadFiles({
125
+ repo: REPO_ID,
126
+ credentials: { accessToken: HF_ACCESS_TOKEN },
127
+ files: files.map(file => ({path: file.name, content: file})),
128
+ fetch: fetchWithProgress
129
+ });
130
+
131
+ console.log(`All files uploaded successfully`);
132
+ progressBar.value = 100;
133
+ } catch (error) {
134
+ console.error('Error uploading files', error);
135
+ errorDiv.textContent = 'Error uploading files';
136
+ return;
137
+ }
138
 
139
+ const elapsedTime = (Date.now() - startTime) / 1000;
140
+ let speed = totalSize / elapsedTime;
 
141
 
142
+ let time1GB = (1024 / speed) / 60;
143
+ let time5GB = (5 * 1024 / speed) / 60;
144
+ let time10GB = (10 * 1024 / speed) / 60;
145
+
146
+ 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.`;
147
+ processingMessage.textContent = "All files processed";
148
+ } else {
149
+ messageDiv.textContent = 'Please select files to upload';
150
+ }
151
+ }
152
+ </script>
153
+ </body>
154
+ </html>