refactor: upgrade xenova/transformers to 2.17.2

j0rd1smit · Jun 6, 2024 · 335d063 · 335d063
1 parent dc7f0ee
commit 335d063
Show file tree

Hide file tree

Showing 6 changed files with 447 additions and 768 deletions.
diff --git a/assets/js/utils.js b/assets/js/utils.js
@@ -13,13 +13,19 @@ const LoadingStatus = {
   LOADING: "loading",
 };
 
-const ModelNames = {
-  WHISPER_TINY_EN: "openai/whisper-tiny.en",
-  WHISPER_TINY: "openai/whisper-tiny",
-  WHISPER_BASE: "openai/whisper-base",
-  WHISPER_BASE_EN: "openai/whisper-base.en",
-  WHISPER_SMALL: "openai/whisper-small",
-  WHISPER_SMALL_EN: "openai/whisper-small.en",
-};
+const ModelNames = [
+  "distil-whisper/distil-small.en",
+  "distil-whisper/distil-medium.en",
+  "distil-whisper/distil-large-v3",
+  "Xenova/whisper-tiny.en",
+  "Xenova/whisper-tiny",
+  "Xenova/whisper-base.en",
+  "Xenova/whisper-base",
+  "Xenova/whisper-small.en",
+  "Xenova/whisper-small",
+  "Xenova/whisper-medium",
+  "Xenova/whisper-medium.en",
+  "Xenova/whisper-large",
+];
 
 export { MessageTypes, ModelNames, LoadingStatus };
diff --git a/assets/js/whisper-based-transcription.js b/assets/js/whisper-based-transcription.js
@@ -44,6 +44,13 @@ const LOADING_MESSAGE_CONTAINER = document.getElementById(
 let WORKER;
 
 $(document).ready(() => {
+  for (const modelName of ModelNames) {
+    const option = document.createElement("option");
+    option.value = modelName;
+    option.innerText = modelName;
+    MODEL_NAME_SELECTION_INPUT.appendChild(option);
+  }
+
   FORM_SUBMIT_BTN.disabled = true;
   /** Form view elements **/
   FORM_SUBMIT_BTN.addEventListener("click", async (event) => {
@@ -70,6 +77,7 @@ $(document).ready(() => {
     downloadTranscript();
   });
   WORKER = createWorker();
+  onFormInputChanges();
 });
 
 function createWorker() {
@@ -193,7 +201,7 @@ function createResultLine(result, isDone) {
   const { start, end, text } = result;
 
   const span = document.createElement("span");
-  span.innerText = text;
+  span.innerText = removeSpecialCharacters(text);
   span.onclick = () => jumpVideoToTime(start);
   span.setAttribute("class", GENERATED_TEXT_CLASS);
   span.setAttribute(START_TIME_ATTR, `${start}`);
@@ -211,12 +219,16 @@ function createResultLine(result, isDone) {
   return span;
 }
 
+function removeSpecialCharacters(inputString) {
+  return inputString.replace(/<\|\d+\.\d+\|>/g, "");
+}
+
 async function handleFormSubmission() {
   if (!isFileUploaded() || !isModelNameSelected()) {
     return;
   }
 
-  const model_name = `openai/${MODEL_NAME_SELECTION_INPUT.value}`;
+  const model_name = `${MODEL_NAME_SELECTION_INPUT.value}`;
   const file = FILE_UPLOAD_BTN.files[0];
   const audio = await readAudioFrom(file);
 
@@ -243,7 +255,7 @@ function showTranscriptionView() {
   showElement(TRANSCRIPT_CONTAINER);
   setProgressBarTo(0);
   showElement(PROGRESS_BAR_CONTAINER);
-  MODEL_NAME_DISPLAY.innerText = `openai/${MODEL_NAME_SELECTION_INPUT.value}`;
+  MODEL_NAME_DISPLAY.innerText = `${MODEL_NAME_SELECTION_INPUT.value}`;
   RESULTS_CONTAINER.innerHTML = "";
   PARTIAL_RESULTS_CONTAINER.innerHTML = "";
 }
@@ -265,13 +277,12 @@ function isFileUploaded() {
 }
 
 function isModelNameSelected() {
-  const selectedValue = MODEL_NAME_SELECTION_INPUT.value;
+  const modelName = MODEL_NAME_SELECTION_INPUT.value;
 
   if (MODEL_NAME_SELECTION_INPUT.value === "") {
     return false;
   }
-  const modelName = `openai/${selectedValue}`;
-  return Object.values(ModelNames).indexOf(modelName) !== -1;
+  return ModelNames.indexOf(modelName) !== -1;
 }
 
 function hideElement(element) {

diff --git a/assets/js/whisper.worker.js b/assets/js/whisper.worker.js
@@ -2,7 +2,7 @@ import { createModelLoader } from "./modelFactories.js";
 import { MessageTypes, ModelNames } from "./utils.js";
 
 const modelLoaders = {};
-for (const model_name of Object.values(ModelNames)) {
+for (const model_name of ModelNames) {
   modelLoaders[model_name] = createModelLoader(model_name);
 }
 
@@ -19,7 +19,7 @@ async function transcribe(audio, model_name) {
 
   if (!modelLoaders[model_name]) {
     console.log("Model not found");
-    sendLoadingMessage("error", "Model not found");
+    sendLoadingMessage("error", `Model not found: ${model_name}`);
     return;
   }
 

diff --git a/layouts/_default/whisper-based-transcription.html b/layouts/_default/whisper-based-transcription.html
@@ -45,18 +45,8 @@ <h1 class="posttitle ">{{ .Title }}</h1>
                         class="form-select"
                         aria-label="Default select example"
                         id="model-name-input"
-                      >
-                        <option selected value="whisper-tiny.en">
-                          whisper-tiny.en
-                        </option>
-                        <option value="whisper-tiny">whisper-tiny</option>
-                        <option value="whisper-base">whisper-base.en</option>
-                        <option value="whisper-base">whisper-base</option>
-                        <option value="whisper-small">whisper-small</option>
-                        <option value="whisper-small.en">
-                          whisper-small.en
-                        </option>
-                      </select>
+                      ></select>
+
                       <div class="form-text">
                         Large will be more accurate, but slower. In the models
                         are listed in order of size. The models with .en at the