Hugging Face's logo

Spaces:
multimodalart
/
upload_to_hub
Running

App Files Community
multimodalart HF staff commited on
Commit
b4c0213
·
1 Parent(s): 7e1dd21

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +95 -16
index.html CHANGED
@@ -1,19 +1,98 @@
1
  <!DOCTYPE html>
2
  <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
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 onclick="uploadFiles()">Upload Files</button>
28
+ <progress id="progressBar" value="0" max="100"></progress>
29
+ <div id="message"></div>
30
+ <div id="error"></div>
31
+
32
+ <script type="module">
33
+ import { createRepo, commit, deleteRepo, listFiles } from "https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/+esm";
34
+
35
+ async function uploadFiles() {
36
+ const fileInput = document.getElementById('fileUpload');
37
+ const files = Array.from(fileInput.files); // convert FileList to Array
38
+ const tokenInput = document.getElementById('tokenInput');
39
+ const HF_ACCESS_TOKEN = tokenInput.value; // get the entered token
40
+ const repoInput = document.getElementById('repoInput');
41
+ const REPO_ID = repoInput.value; // get the entered repo id
42
+ const progressBar = document.getElementById('progressBar');
43
+ const messageDiv = document.getElementById('message');
44
+ const errorDiv = document.getElementById('error');
45
+ progressBar.value = 0; // reset progress bar
46
+ messageDiv.textContent = ''; // clear previous messages
47
+ errorDiv.textContent = ''; // clear previous errors
48
+
49
+ if (files.length > 0) {
50
+ // assuming repo creation is successful and we have the necessary rights
51
+ // if not, repo creation and proper error handling should be done
52
+ await createRepo({
53
+ repo: REPO_ID,
54
+ credentials: { accessToken: HF_ACCESS_TOKEN },
55
+ });
56
+
57
+ for (let i = 0; i < files.length; i++) {
58
+ const file = files[i];
59
+
60
+ // read file content
61
+ const reader = new FileReader();
62
+ reader.readAsArrayBuffer(file);
63
+ reader.onload = async () => {
64
+ const arrayBuffer = reader.result;
65
+ const uint8Array = new Uint8Array(arrayBuffer);
66
+
67
+ try {
68
+ // upload file
69
+ await commit({
70
+ repo: REPO_ID,
71
+ credentials: { accessToken: HF_ACCESS_TOKEN },
72
+ message: `committing file: ${file.name}`,
73
+ files: [{
74
+ path: file.name,
75
+ content: uint8Array,
76
+ }],
77
+ });
78
+
79
+ console.log(`File ${file.name} uploaded successfully`);
80
+
81
+ // update progress bar
82
+ progressBar.value = ((i + 1) / files.length) * 100;
83
+ } catch (error) {
84
+ console.error('Error uploading file', error);
85
+ errorDiv.textContent = 'Error uploading file';
86
+ return; // stop uploading further files on error
87
+ }
88
+ };
89
+ }
90
+
91
+ messageDiv.textContent = 'All files uploaded successfully';
92
+ } else {
93
+ messageDiv.textContent = 'Please select a file to upload';
94
+ }
95
+ }
96
+ </script>
97
+ </body>
98
  </html>