Useful snippets

[Th3G33k]

Here are some useful snippets, to use with transformers.js:

• Service worker
• Clear browser cache
• Node.js progress callback
• Web progress callback

[Th3G33k]

Service worker

<script src="sw-transformers.js"></script>

// sw-transformers.js

if (self.document) {
  // main script
  navigator.serviceWorker?.register("sw-transformers.js");
} else {
  // service worker script
  self.addEventListener("fetch", (event) => {
    event.respondWith(
      (async () => {
        let request, cache, response;
        request = event.request;
        cache = await caches.open("transformers-cache");
        response = await cache.match(request);
        if (response) return response;

        response = await fetch(request);
        if (response.status === 200 && !request.url.match(/onnx$|json$/)) {
          // cache files other than onnx and json (cached by transformers.js)
          cache.put(request, response.clone());
        }
        return response;
      })(),
    );
  });
}

Scroll to top

[Th3G33k]

Clear browser cache

async function clearBrowserCache() {
  return await caches.delete('transformers-cache');
}

Scroll to top

[Th3G33k]

Node.js progress callback

const { pipeline } = await import('@xenova/transformers');

function progress_callback(args) {
  if (args.status != 'progress') return;
  let n = Math.floor(args.progress / 5);
  let str = '\r[' + '#'.repeat(n) + '.'.repeat(20 - n) + '] ' + args.file + (n == 20 ? '\n' : '');
  process.stdout.write(str);
}

let pipe = await pipeline('text-to-speech', 'Xenova/mms-tts-eng', {progress_callback});

Scroll to top

[Th3G33k]

Web progress callback

<div>
  <progress id="progress" value="0" max="100"></progress>
  <label for="progress">0</label>
</div>

function progress_callback(args) {
  if (args.status != 'progress') return;
  let elm = document.getElementById('progress')
  if(!elm) return
  elm.value = args.progress
  if(args.progress == 100 && elm.labels[0]) elm.labels[0].innerHTML = +elm.labels[0].innerHTML + 1
}

let pipe = await pipeline('text-to-speech', 'Xenova/mms-tts-eng', {progress_callback});

Scroll to top