|
|
<!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; |
|
|
} |
|
|
</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"> |
|
|
<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.uploadButton = document.getElementById('uploadButton'); |
|
|
this.uploadButton.addEventListener('click', () => this.upload()); |
|
|
} |
|
|
|
|
|
async upload() { |
|
|
const fileInput = document.getElementById('fileUpload'); |
|
|
const files = Array.from(fileInput.files); |
|
|
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 (files.length > 0) { |
|
|
const totalSize = files.reduce((total, file) => total + file.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: files.map(file => ({ path: file.name, content: file })) }); |
|
|
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 ${files.length} files, speed ${speed.toFixed(2)} MB/s.`; |
|
|
processingMessage.textContent = "All files processed"; |
|
|
} else { |
|
|
messageDiv.textContent = 'Please select files to upload'; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
new FileUploader(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
