File size: 6,018 Bytes
bd48828 8007eab bd48828 8007eab bd48828 5e772a5 8007eab bd48828 8007eab 5e772a5 8007eab 5e772a5 8007eab bd48828 5e772a5 bd48828 5e772a5 bd48828 5e772a5 bd48828 8007eab bd48828 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 |
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
}
input, button, progress {
display: block;
margin-top: 10px;
}
#message {
margin-top: 20px;
color: blue;
}
#error {
color: red;
}
#drop_zone {
width: 300px;
height: 200px;
border: 2px dashed #aaa;
line-height: 200px;
text-align: center;
margin-top: 10px;
}
#file_list {
margin-top: 10px;
}
#fileUpload {
display: none;
}
</style>
</head>
<body>
<label for="tokenInput">Hugging Face Token:</label>
<input type="password" id="tokenInput" name="tokenInput">
<label for="repoInput">Repository ID:</label>
<input type="text" id="repoInput" name="repoInput" placeholder="my-user/nlp-model">
<div id="drop_zone">Drag files/folders here or click to browse from your computer.</div>
<ul id="file_list"></ul>
<input type="file" id="fileUpload" multiple>
<button id="uploadButton">Upload Files</button>
<div id="processingMessage"></div>
<progress id="progressBar" value="0" max="100"></progress>
<div id="message"></div>
<div id="error"></div>
<script type="module">
import { createRepo, uploadFiles } from "https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/+esm";
class FileUploader {
constructor() {
this.files = [];
this.fileInput = document.getElementById('fileUpload');
this.dropZone = document.getElementById('drop_zone');
this.fileList = document.getElementById('file_list');
this.uploadButton = document.getElementById('uploadButton');
this.fileInput.addEventListener('change', (e) => this.handleFileSelect(e));
this.dropZone.addEventListener('click', () => this.fileInput.click());
this.dropZone.addEventListener('dragover', event => event.preventDefault());
this.dropZone.addEventListener('drop', (e) => this.handleFileDrop(e));
this.uploadButton.addEventListener('click', () => this.upload());
}
handleFileSelect(event) {
const newFiles = Array.from(event.target.files).map(file => ({ path: file.name, content: file }));
this.files = this.files.concat(newFiles);
this.updateFileList();
}
handleFileDrop(event) {
event.preventDefault();
let items = event.dataTransfer.items;
for (let i = 0; i < items.length; i++) {
let item = items[i].webkitGetAsEntry();
if (item) {
this.traverseFileTree(item);
}
}
}
traverseFileTree(item, path = '') {
if (item.isFile) {
item.file((file) => {
this.files.push({ path: path + file.name, content: file });
this.updateFileList();
});
} else if (item.isDirectory) {
let dirReader = item.createReader();
dirReader.readEntries((entries) => {
for (let i = 0; i < entries.length; i++) {
this.traverseFileTree(entries[i], path + item.name + "/");
}
});
}
}
updateFileList() {
this.fileList.innerHTML = '';
for (let file of this.files) {
let listItem = document.createElement('li');
listItem.textContent = file.path;
this.fileList.appendChild(listItem);
}
}
async upload() {
const tokenInput = document.getElementById('tokenInput');
const HF_ACCESS_TOKEN = tokenInput.value;
const repoInput = document.getElementById('repoInput');
const REPO_ID = repoInput.value;
const progressBar = document.getElementById('progressBar');
const messageDiv = document.getElementById('message');
const errorDiv = document.getElementById('error');
const processingMessage = document.getElementById('processingMessage');
progressBar.value = 0;
messageDiv.textContent = '';
errorDiv.textContent = '';
processingMessage.textContent = '';
if (this.files.length > 0) {
const totalSize = this.files.reduce((total, file) => total + file.content.size, 0) / (1024 * 1024);
const startTime = Date.now();
try {
await createRepo({ repo: REPO_ID, credentials: { accessToken: HF_ACCESS_TOKEN } });
} catch (error) {
if (error.message !== 'You already created this model repo') {
console.error('Error creating repository', error);
errorDiv.textContent = 'Error creating repository';
return;
}
console.log('Repository already exists, proceeding to upload files');
}
try {
await uploadFiles({ repo: REPO_ID, credentials: { accessToken: HF_ACCESS_TOKEN }, files: this.files });
console.log('All files uploaded successfully');
progressBar.value = 100;
} catch (error) {
console.error('Error uploading files', error);
errorDiv.textContent = 'Error uploading files';
return;
}
const elapsedTime = (Date.now() - startTime) / 1000;
const speed = totalSize / elapsedTime;
messageDiv.textContent = `All files uploaded successfully in ${elapsedTime.toFixed(2)} seconds, for all ${totalSize.toFixed(2)} MB in the ${this.files.length} files, speed ${speed.toFixed(2)} MB/s.`;
processingMessage.textContent = "All files processed";
this.files = [];
this.updateFileList();
} else {
messageDiv.textContent = 'Please select files to upload';
}
}
}
new FileUploader();
</script>
</body>
</html> |