app.js

import {
  __internal_XetBlob as XetBlob,
  __internal_sha256,
} from "@huggingface/hub";

async function checkRange(n) {
  // Get selected option
  const select = document.getElementById("file");
  const option = select.options[select.selectedIndex];

  // hash is in data-xet-hash attribute
  const xetHash = option.getAttribute("data-xet-hash");
  const sha = option.getAttribute("data-sha");
  const size = +option.getAttribute("data-size");
  const path = `https://huggingface.co/celinah/xet-experiments/resolve/main/${option.value}`;

  const output = document.getElementById("output");
  output.textContent = "...";

  const blob = new XetBlob({
    repo: {
      type: "model",
      name: "celinah/xet-experiments",
    },
    hash: xetHash,
    size,
    internalLogging: true,
  });

  const [own, bridge] = await Promise.all([
    blob.slice(0, n).arrayBuffer(),
    fetch(path, { headers: { Range: `bytes=0-${n - 1}` } }).then((res) =>
      res.arrayBuffer()
    ),
  ]);

  output.textContent += `Own: ${own.byteLength.toLocaleString()}\nBridge: ${bridge.byteLength.toLocaleString()}\n`;
  // Check if the first n bytes are the same
  const array1 = new Uint8Array(own);
  const array2 = new Uint8Array(bridge);

  let different = false;
  for (let i = 0; i < n; i++) {
    if (array1[i] !== array2[i]) {
      output.textContent += `Difference at ${i}\n`;
      different = true;
      break;
    }
  }

  if (!different) {
    output.textContent += "No differences\n";
  }
}

async function download() {
  const select = document.getElementById("file");
  const option = select.options[select.selectedIndex];
  const xetHash = option.getAttribute("data-xet-hash");
  const size = +option.getAttribute("data-size");

  const output = document.getElementById("output");
  output.textContent = "...";

  const blob = new XetBlob({
    repo: {
      type: "model",
      name: "celinah/xet-experiments",
    },
    hash: xetHash,
    size,
    listener: (progress) => {
      output.textContent += JSON.stringify(progress) + "\n";
      output.textContent =
        output.textContent.split(/\n+/).slice(-1000).join("\n") + "\n";
    },
    internalLogging: true,
  });

  const arrayBuffer = await blob.arrayBuffer();
  const blob2 = new Blob([arrayBuffer]);
  const url = URL.createObjectURL(blob2);

  const a = document.createElement("a");
  a.href = url;
  a.download = option.value;
  a.click();
}

async function checkSha() {
  const select = document.getElementById("file");
  const option = select.options[select.selectedIndex];
  const xetHash = option.getAttribute("data-xet-hash");
  const sha = option.getAttribute("data-sha");
  const size = +option.getAttribute("data-size");

  const output = document.getElementById("output");
  output.textContent = "...";

  const blob = new XetBlob({
    repo: {
      type: "model",
      name: "celinah/xet-experiments",
    },
    hash: xetHash,
    size,
    internalLogging: true,
  });

  const iterator = __internal_sha256(blob);

  while (1) {
    const result = await iterator.next();

    if (result.done) {
      const hash = result.value;
      output.textContent += `SHA: ${hash}\n`;
      output.textContent += `Expected: ${sha}\n`;
      output.textContent += `Match: ${hash === sha}\n`;
      break;
    }

    output.textContent = `Progress: ${result.value * 100}%\n`;
  }
}

// On loaded, add event listeners
window.document.addEventListener("DOMContentLoaded", () => {
  console.log("Loaded");
  document.getElementById("10kB").addEventListener("click", () => {
    console.clear();

    checkRange(10_000).catch((err) => {
      console.error(err);
      alert(err);
    });
  });

  document.getElementById("100kB").addEventListener("click", () => {
    console.clear();

    checkRange(100_000).catch((err) => {
      console.error(err);
      alert(err);
    });
  });

  document.getElementById("1MB").addEventListener("click", () => {
    console.clear();

    checkRange(1_000_000).catch((err) => {
      console.error(err);
      alert(err);
    });
  });

  document.getElementById("sequential").addEventListener("click", () => {
    console.clear();

    checkRange(100_000)
      .then(() => checkRange(1_000_000))
      .catch((err) => {
        console.error(err);
        alert(err);
      });
  });

  document.getElementById("download").addEventListener("click", () => {
    console.clear();

    download().catch((err) => {
      console.error(err);
      alert(err);
    });
  });

  document.getElementById("sha").addEventListener("click", () => {
    console.clear();

    checkSha().catch((err) => {
      console.error(err);
      alert(err);
    });
  });
});