index.html

<script type="module">
  import { createRepo, uploadFiles } from "https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/+esm";

  const uploadButton = document.getElementById('uploadButton');
  uploadButton.addEventListener('click', upload);

  function isS3Url(url) {
    // Replace this with the actual condition to identify S3 URLs
    return url.startsWith('https://s3.amazonaws.com/');
  }

  function fetchWithProgress(url, init) {
    if (isS3Url(url)) {
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();

        xhr.open(init.method || 'GET', url);

        for (let header in init.headers) {
          xhr.setRequestHeader(header, init.headers[header]);
        }

        xhr.onload = () => {
          resolve({
            ok: xhr.status >= 200 && xhr.status < 300,
            status: xhr.status,
            statusText: xhr.statusText,
            text: () => Promise.resolve(xhr.responseText)
          });
        };

        xhr.onerror = () => reject(new TypeError('Network request failed'));

        xhr.ontimeout = () => reject(new TypeError('Network request failed due to timeout'));

        xhr.upload.onprogress = (event) => {
          if (event.lengthComputable) {
            const progress = event.loaded / event.total;
            const progressBar = document.getElementById('progressBar');
            progressBar.value = progress * 100;
          }
        };

        xhr.send(init.body);
      });
    } else {
      return fetch(url, init);
    }
  }

  async function 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) {
      let totalSize = 0;
      for (let file of files) {
        totalSize += file.size;
      }
      totalSize = totalSize / (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.log('Repository already exists, proceeding to upload files');
        } else {
          console.error('Error creating repository', error);
          errorDiv.textContent = 'Error creating repository';
          return;
        }
      }

      try {
        await uploadFiles({
          repo: REPO_ID,
          credentials: { accessToken: HF_ACCESS_TOKEN },
          files: files.map(file => ({path: file.name, content: file})),
          fetch: fetchWithProgress
        });

        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;
      let speed = totalSize / elapsedTime;

      let time1GB = (1024 / speed) / 60;
      let time5GB = (5 * 1024 / speed) / 60;
      let time10GB = (10 * 1024 / speed) / 60;

      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.`;
      processingMessage.textContent = "All files processed";
    } else {
      messageDiv.textContent = 'Please select files to upload';
    }
  }
</script>