@internetarchive/bookreader 5.0.0-96 → 5.0.0-97

package/src/plugins/translate/TranslationManager.js

@@ -0,0 +1,167 @@
+// @ts-check
+import { Cache } from '../../util/cache.js';
+import { BatchTranslator } from '@internetarchive/bergamot-translator/translator.js';
+
+export const langs = /** @type {{[lang: string]: string}} */ {
+  "bg": "Bulgarian",
+  "ca": "Catalan",
+  "cs": "Czech",
+  "nl": "Dutch",
+  "en": "English",
+  "et": "Estonian",
+  "de": "German",
+  "fr": "French",
+  "is": "Icelandic",
+  "it": "Italian",
+  "nb": "Norwegian Bokmål",
+  "nn": "Norwegian Nynorsk",
+  "fa": "Persian",
+  "pl": "Polish",
+  "pt": "Portuguese",
+  "ru": "Russian",
+  "es": "Spanish",
+  "uk": "Ukrainian",
+};
+
+export class TranslationManager {
+  /** @type {Cache<{index: string, response: string}>} */
+  alreadyTranslated = new Cache(100);
+
+  /**
+  * @typedef {Object} genericModelInfo
+  * @property {string} name
+  * @property {number} size
+  * @property {number} estimatedCompressedSize
+  * @property {any} [qualityModel]
+  * @property {string} [expectedSha256Hash]
+  * @property {string} [modelType]
+  */
+  /**
+  * @type { {[langPair: string] : {model: genericModelInfo, lex: genericModelInfo, vocab: genericModelInfo, quality?: genericModelInfo}} }
+  */
+  modelRegistry = {};
+
+  /** @type {Record<key, {promise: Promise<string>, resolve: function, reject: function}>} */
+  currentlyTranslating = {}
+
+  /** @type {Record<string, string>[]} */
+  fromLanguages = [];
+  /** @type {Record<string, string>[]} */
+  toLanguages = [];
+
+  /** @type {boolean} */
+  active = false;
+
+  publicPath = '';
+
+  constructor() {
+    //TODO Should default to the book language as the first element
+    const enModel = {code: "en", name: "English", type: "prod"};
+    this.fromLanguages.push(enModel);
+    this.toLanguages.push(enModel);
+  }
+
+
+  async initWorker() {
+    if (this.initPromise) return this.initPromise;
+    this.initPromise = new Promise((resolve, reject) => {
+      this._initResolve = resolve;
+      this._initReject = reject;
+    });
+    const registryUrl = "https://cors.archive.org/cors/mozilla-translate-models/";
+    const registryJson = await fetch(registryUrl + "registry.json").then(r => r.json());
+    for (const language of Object.values(registryJson)) {
+      for (const file of Object.values(language)) {
+        file.name = registryUrl + file.name;
+      }
+    }
+
+    /** @type {BatchTranslator} */
+    // Arbitrary setting for number of workers, 1 is already quite fast
+    // batchSize from 8 -> 4 for improved performance
+    this.translator = new BatchTranslator({
+      registryUrl: `data:application/json,${encodeURIComponent(JSON.stringify(registryJson))}`,
+      workers: 2,
+      batchSize: 4,
+      workerUrl: this.publicPath + '/translator-worker.js',
+    });
+
+    const modelType = await this.translator.backing.registry;
+    const arr = {}; // unsure if we need to keep track of the files
+    for (const obj of Object.values(modelType)) {
+      const firstLang = obj['from'];
+      const secondLang = obj['to'];
+      const fromModelType = obj['files'];
+      arr[`${firstLang}${secondLang}`] = fromModelType;
+      // Assuming that all of the languages loaded from the registryUrl inside @internetarchive/bergamot-translator/translator.js are prod
+      // List of dev models found here https://github.com/mozilla/firefox-translations-models/tree/main/models/base
+      // There are also differences between the model types in the repo above here: https://github.com/mozilla/firefox-translations-models?tab=readme-ov-file#firefox-translations-models
+      if (firstLang !== "en") {
+        this.fromLanguages.push({code: firstLang, name:langs[firstLang], type: "prod"});
+      }
+      if (secondLang !== "en") {
+        this.toLanguages.push({code: secondLang, name:langs[secondLang], type: "prod"});
+      }
+    }
+    this._initResolve([this.modelRegistry]);
+    return this.initPromise;
+  }
+
+  /**
+   * Targets the page and paragraph of a text layer to create a translation from the "fromLang" to the "toLang". Tries to force order in translation by using the pageIndex (+1000 if the current page is not visible) and paragraphIndex
+   * @param {string} fromLang
+   * @param {string} toLang
+   * @param {string} pageIndex
+   * @param {number} paragraphIndex
+   * @param {string} text
+   * @param {number} priority
+   * @return {Promise<string>} translated text
+   */
+
+  getTranslation = async (fromLang, toLang, pageIndex, paragraphIndex, text, priority) => {
+    this.active = true;
+    if (fromLang == toLang || !fromLang || !toLang) {
+      return;
+    }
+    const key = `${fromLang}${toLang}-${pageIndex}:${paragraphIndex}`;
+    const cachedEntry = this.alreadyTranslated.entries.find(x => x.index == key);
+
+    if (cachedEntry) {
+      return cachedEntry.response;
+    }
+
+    if (key in this.currentlyTranslating) {
+      return this.currentlyTranslating[key].promise;
+    }
+
+    let _resolve = null;
+    let _reject = null;
+    const promise = new Promise((res, rej) => {
+      _resolve = res;
+      _reject = rej;
+    });
+
+    this.currentlyTranslating[key] = {
+      promise,
+      resolve: _resolve,
+      reject: _reject,
+    };
+
+    if (!text) {
+      this.currentlyTranslating[key].reject("No text was provided");
+      return promise;
+    }
+    this.translator.translate({
+      to: toLang,
+      from: fromLang,
+      text: text,
+      html: false,
+      priority: priority,
+    }).then((resp) => {
+      const response = resp;
+      this.currentlyTranslating[key].resolve(response.target.text);
+    });
+
+    return promise;
+  }
+}

package/src/plugins/translate/plugin.translate.js

@@ -0,0 +1,414 @@
+// @ts-check
+import { html, LitElement } from 'lit';
+import { BookReaderPlugin } from '../../BookReaderPlugin.js';
+import { customElement, property } from 'lit/decorators.js';
+import { langs, TranslationManager } from "./TranslationManager.js";
+
+// @ts-ignore
+const BookReader = /** @type {typeof import('@/src/BookReader.js').default} */(window.BookReader);
+
+export class TranslatePlugin extends BookReaderPlugin {
+
+  options = {
+    enabled: true,
+    panelDisclaimerText: "Translations are in alpha",
+  }
+
+  /** @type {TranslationManager} */
+  translationManager = new TranslationManager();
+
+  /** @type {Worker}*/
+  worker;
+
+  /**
+   * Contains the list of languages available to translate to
+   * @type {string[]}
+   */
+  toLanguages = [];
+
+  /**
+   * Current language code that is being translated From
+   * @type {!string}
+   */
+  langFromCode = "en";
+
+  /**
+   * Current language code that is being translated To
+   * @type {!string}
+   */
+  langToCode;
+  /**
+   * @type {BrTranslatePanel} _panel - Represents a panel used in the plugin.
+   * The specific type and purpose of this panel should be defined based on its usage.
+   */
+  _panel;
+
+  async init() {
+    if (!this.options.enabled) {
+      return;
+    }
+
+    this.translationManager.publicPath = this.br.options.imagesBaseURL.replace(/\/+$/, '') + '/..';
+
+    /**
+     * @param {*} ev
+     * @param {object} eventProps
+    */
+    this.br.on('textLayerRendered', async (_, {pageIndex, pageContainer}) => {
+      // Stops invalid models from running, also prevents translation on page load
+      // TODO check if model has finished loading or if it exists
+      if (!this.translationManager) {
+        return;
+      }
+      if (this.translationManager.active) {
+        const pageElement = pageContainer.$container[0];
+        this.translateRenderedLayer(pageElement);
+      }
+    });
+
+    /**
+     * @param {*} ev
+     * @param {object} eventProps
+    */
+    this.br.on('pageVisible', (_, {pageContainerEl}) => {
+      if (!this.translationManager.active) {
+        return;
+      }
+      for (const paragraphEl of pageContainerEl.querySelectorAll('.BRtranslateLayer > .BRparagraphElement')) {
+        if (paragraphEl.textContent) {
+          this.fitVisiblePage(paragraphEl);
+        }
+      }
+    });
+
+    await this.translationManager.initWorker();
+    // Note await above lets _render function properly, since it gives the browser
+    // time to render the rest of bookreader, which _render depends on
+    this._render();
+
+    this.langToCode = this.translationManager.toLanguages[0].code;
+
+  }
+
+  /** @param {HTMLElement} page*/
+  getParagraphsOnPage = (page) => {
+    return page ? Array.from(page.querySelectorAll(".BRtextLayer > .BRparagraphElement")) : [];
+  }
+
+  translateActivePageContainerElements() {
+    const currentlyActiveContainers = this.br.getActivePageContainerElements();
+    const visiblePageContainers = currentlyActiveContainers.filter((element) => {
+      return element.classList.contains('BRpage-visible');
+    });
+    const hiddenPageContainers = currentlyActiveContainers.filter((element) => {
+      return !element.classList.contains('BRpage-visible');
+    });
+
+    for (const page of visiblePageContainers) {
+      this.translateRenderedLayer(page, 0);
+    }
+    for (const loadingPage of hiddenPageContainers) {
+      this.translateRenderedLayer(loadingPage, 1000);
+    }
+  }
+
+  /** @param {HTMLElement} page */
+  async translateRenderedLayer(page, priority) {
+    if (this.br.mode == this.br.constModeThumb) {
+      return;
+    }
+
+    const pageIndex = page.dataset.index;
+
+    let pageTranslationLayer;
+    if (!page.querySelector('.BRPageLayer.BRtranslateLayer')) {
+      pageTranslationLayer = document.createElement('div');
+      pageTranslationLayer.classList.add('BRPageLayer', 'BRtranslateLayer');
+      pageTranslationLayer.setAttribute('lang', `${this.langToCode}`);
+      page.prepend(pageTranslationLayer);
+    } else {
+      pageTranslationLayer = page.querySelector('.BRPageLayer.BRtranslateLayer');
+    }
+
+    const textLayerElement = page.querySelector('.BRtextLayer');
+    textLayerElement.classList.add('showingTranslation');
+    $(pageTranslationLayer).css({
+      "width": $(textLayerElement).css("width"),
+      "height": $(textLayerElement).css("height"),
+      "transform": $(textLayerElement).css("transform"),
+      "pointer-events": $(textLayerElement).css("pointer-events"),
+      "z-index": 3,
+    });
+    const paragraphs = this.getParagraphsOnPage(page);
+
+    paragraphs.forEach(async (paragraph, pidx) => {
+      let translatedParagraph = page.querySelector(`[data-translate-index='${pageIndex}-${pidx}']`);
+      if (!translatedParagraph) {
+        translatedParagraph = document.createElement('p');
+        // set data-translate-index on the placeholder
+        translatedParagraph.setAttribute('data-translate-index', `${pageIndex}-${pidx}`);
+        translatedParagraph.className = 'BRparagraphElement';
+        const originalParagraphStyle = paragraphs[pidx];
+        const fontSize = `${parseInt($(originalParagraphStyle).css("font-size"))}px`;
+
+        $(translatedParagraph).css({
+          "margin-left": $(originalParagraphStyle).css("margin-left"),
+          "margin-top": $(originalParagraphStyle).css("margin-top"),
+          "top": $(originalParagraphStyle).css("top"),
+          "height": $(originalParagraphStyle).css("height"),
+          "width": $(originalParagraphStyle).css("width"),
+          "font-size": fontSize,
+        });
+
+        // Note: We'll likely want to switch to using the same logic as
+        // TextSelectionPlugin's selection, which allows for e.g. click-to-flip
+        // to work simultaneously with text selection.
+        translatedParagraph.addEventListener('mousedown', (e) => {
+          e.stopPropagation();
+          e.stopImmediatePropagation();
+        });
+
+        translatedParagraph.addEventListener('mouseup', (e) => {
+          e.stopPropagation();
+          e.stopImmediatePropagation();
+        });
+
+        translatedParagraph.addEventListener('dragstart', (e) =>{
+          e.preventDefault();
+        });
+        pageTranslationLayer.append(translatedParagraph);
+      }
+
+      if (paragraph.textContent.length !== 0) {
+        const pagePriority = parseFloat(pageIndex) + priority + pidx;
+        const translatedText = await this.translationManager.getTranslation(this.langFromCode, this.langToCode, pageIndex, pidx, paragraph.textContent, pagePriority);
+        // prevent duplicate spans from appearing if exists
+        translatedParagraph.firstElementChild?.remove();
+
+        const firstWordSpacing = paragraphs[pidx]?.firstChild?.firstChild;
+        const createSpan = document.createElement('span');
+        createSpan.className = 'BRlineElement';
+        createSpan.textContent = translatedText;
+        translatedParagraph.appendChild(createSpan);
+
+        $(createSpan).css({
+          "text-indent": $(firstWordSpacing).css('padding-left'),
+        });
+        if (page.classList.contains('BRpage-visible')) {
+          this.fitVisiblePage(translatedParagraph);
+        }
+      }
+    });
+  }
+
+  clearAllTranslations() {
+    document.querySelectorAll('.BRtranslateLayer').forEach(el => el.remove());
+  }
+
+  /**
+   * @param {Element} paragEl
+   */
+  fitVisiblePage(paragEl) {
+    // For some reason, Chrome does not detect the transform property for the translation + text layers
+    // Could not get it to fetch the transform value using $().css method
+    // Oddly enough the value is retrieved if using .style.transform instead?
+    const translateLayerEl = paragEl.parentElement;
+    if ($(translateLayerEl).css('transform') == 'none') {
+      const pageNumber = paragEl.getAttribute('data-translate-index').split('-')[0];
+      /** @type {HTMLElement} selectionTransform */
+      const textLayerEl = document.querySelector(`[data-index='${pageNumber}'] .BRtextLayer`);
+      $(translateLayerEl).css({'transform': textLayerEl.style.transform});
+    }
+
+    const originalFontSize = parseInt($(paragEl).css("font-size"));
+    let adjustedFontSize = originalFontSize;
+    while (paragEl.clientHeight < paragEl.scrollHeight && adjustedFontSize > 0) {
+      adjustedFontSize--;
+      $(paragEl).css({ "font-size": `${adjustedFontSize}px` });
+    }
+
+    const textHeight = paragEl.firstElementChild.clientHeight;
+    const scrollHeight = paragEl.scrollHeight;
+    const fits = textHeight < scrollHeight;
+    if (fits) {
+      const lines = textHeight / adjustedFontSize;
+      // Line heights for smaller paragraphs occasionally need a minor adjustment
+      const newLineHeight = scrollHeight / lines;
+      $(paragEl).css({
+        "line-height" : `${newLineHeight}px`,
+        "overflow": "visible",
+      });
+    }
+  }
+
+  handleFromLangChange = async (e) => {
+    this.clearAllTranslations();
+    const selectedLangFrom = e.detail.value;
+
+    // Update the from language
+    this.langFromCode = selectedLangFrom;
+
+    // Add 'From' language to 'To' list if not already present
+    if (!this.translationManager.toLanguages.some(lang => lang.code === selectedLangFrom)) {
+      this.translationManager.toLanguages.push({ code: selectedLangFrom, name: langs[selectedLangFrom] });
+    }
+
+    // Update the 'To' languages list and set the correct 'To' language
+    this._panel.toLanguages = this.translationManager.toLanguages;
+
+    console.log(this.langFromCode, this.langToCode);
+    if (this.langFromCode !== this.langToCode) {
+      this.translateActivePageContainerElements();
+    }
+  }
+
+  handleToLangChange = async (e) => {
+    this.clearAllTranslations();
+    this.langToCode = e.detail.value;
+    this.translateActivePageContainerElements();
+  }
+
+
+  /**
+  * Update the table of contents based on array of TOC entries.
+  */
+  _render() {
+    this.br.shell.menuProviders['translate'] = {
+      id: 'translate',
+      icon: html`<img src='${this.br.options.imagesBaseURL}/translate.svg' width="26"/>`,
+      label: 'Translate',
+      component: html`<br-translate-panel
+        @connected="${e => {
+        this._panel = e.target;
+        this._panel.fromLanguages = this.translationManager.fromLanguages;
+        this._panel.toLanguages = this.translationManager.toLanguages;
+      }
+      }"
+        @langFromChanged="${this.handleFromLangChange}"
+        @langToChanged="${this.handleToLangChange}"
+        .fromLanguages="${this.translationManager.fromLanguages}"
+        .toLanguages="${this.translationManager.toLanguages}"
+        .disclaimerMessage="${this.options.panelDisclaimerText}"
+        class="translate-panel"
+      />`,
+    };
+    this.br.shell.updateMenuContents();
+  }
+}
+BookReader?.registerPlugin('translate', TranslatePlugin);
+
+@customElement('br-translate-panel')
+export class BrTranslatePanel extends LitElement {
+  @property({ type: Array }) fromLanguages = []; // List of obj {code, name}
+  @property({ type: Array }) toLanguages = []; // List of obj {code, name}
+  @property({ type: String }) prevSelectedLang = ''; // Tracks the previous selected language for the "To" dropdown
+  @property({ type: String }) disclaimerMessage = '';
+
+  /** @override */
+  createRenderRoot() {
+    // Disable shadow DOM; that would require a huge rejiggering of CSS
+    return this;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.dispatchEvent(new CustomEvent('connected'));
+  }
+
+  render() {
+    const showPrevLangButton =
+      this.prevSelectedLang &&
+      (this.prevSelectedLang !== this._getSelectedLang('to') || this._getSelectedLang('from') === this._getSelectedLang('to'));
+
+    return html`<div class="app">
+      <div class="panel panel--from">
+        <label>
+          From
+          <select id="lang-from" name="from" class="lang-select" @change="${this._onLangFromChange}">
+            ${this.fromLanguages.map(
+      lang => html`<option value="${lang.code}">${lang.name}</option>`,
+    )}
+          </select>
+        </label>
+      </div>
+      <div class="panel panel--to">
+        <label>
+          To
+          <select id="lang-to" name="to" class="lang-select" @change="${this._onLangToChange}">
+            ${this.toLanguages.map(
+      lang => html`<option value="${lang.code}">${lang.name}</option>`,
+    )}
+          </select>
+        </label>
+        ${showPrevLangButton
+      ? html`<button class="prev-lang-btn" @click="${this._onPrevLangClick}">
+              ${this._getLangName(this.prevSelectedLang)}
+            </button>`
+      : ''}
+      </div>
+      <div class="footer" id="status"></div>
+      <br/>
+      <div class="disclaimer" id="disclaimerMessage"> ${this.disclaimerMessage} </div>
+    </div>`;
+  }
+
+  _onLangFromChange(event) {
+    const langFromChangedEvent = new CustomEvent('langFromChanged', {
+      detail: { value: event.target.value },
+      bubbles: true,
+      composed: true,
+    });
+    this.dispatchEvent(langFromChangedEvent);
+
+    // Update the prevSelectedLang if "To" is different from "From"
+    if (this._getSelectedLang('to') !== this._getSelectedLang('from')) {
+      this.prevSelectedLang = this._getSelectedLang('from');
+    }
+  }
+
+  _onLangToChange(event) {
+    const langToChangedEvent = new CustomEvent('langToChanged', {
+      detail: { value: event.target.value },
+      bubbles: true,
+      composed: true,
+    });
+    this.dispatchEvent(langToChangedEvent);
+
+    // Update the prevSelectedLang if "To" is different from "From"
+    if (this._getSelectedLang('from') !== event.target.value) {
+      this.prevSelectedLang = this._getSelectedLang('from');
+    }
+  }
+
+  _onPrevLangClick() {
+    const prevLang = this.prevSelectedLang;
+    if (prevLang == this._getSelectedLang('from')) {
+      console.log("_onPrevLangClick: will not change since prevLang is the same as the current 'To' language code");
+      return;
+    }
+    this.prevSelectedLang = this._getSelectedLang('to'); // Update prevSelectedLang to current "To" value
+    const langToChangedEvent = new CustomEvent('langToChanged', {
+      detail: { value: prevLang },
+      bubbles: true,
+      composed: true,
+    });
+    this.dispatchEvent(langToChangedEvent);
+
+    // Update the "To" dropdown to the previous language
+    const toDropdown = this.querySelector('#lang-to');
+    if (toDropdown) {
+      toDropdown.value = prevLang;
+    }
+  }
+
+  _getSelectedLang(type) {
+    const dropdown = this.querySelector(`#lang-${type}`);
+    return dropdown ? dropdown.value : '';
+  }
+
+  _getLangName(code) {
+    const lang = [...this.fromLanguages, ...this.toLanguages].find(lang => lang.code === code);
+    return lang ? lang.name : '';
+  }
+}
+

package/src/plugins/tts/utils.js

@@ -1,4 +1,4 @@
-import langs from 'iso-language-codes/js/data.js';
+import langs from 'iso-language-codes';
 
 /**
  * Use regex to approximate word count in a string
@@ -24,15 +24,6 @@ export function isAndroid(userAgent = navigator.userAgent) {
  * Language code in ISO 639-1 format. e.g. en, fr, zh
  **/
 
-/** Each lang is an array, with each index mapping to a different property */
-const COLUMN_TO_LANG_INDEX = {
-  'Name': 0,
-  'Endonym': 1,
-  'ISO 639-1': 2,
-  'ISO 639-2/T': 3,
-  'ISO 639-2/B': 4,
-};
-
 /**
  * @param {string} language in some format
  * @return {ISO6391?}
@@ -41,24 +32,22 @@ export function toISO6391(language) {
   if (!language) return null;
   language = language.toLowerCase();
 
-  return searchForISO6391(language, ['ISO 639-1']) ||
-    searchForISO6391(language, ['ISO 639-2/B']) ||
-    searchForISO6391(language, ['ISO 639-2/T', 'Endonym', 'Name']);
+  return searchForISO6391(language, ['iso639_1']) ||
+    searchForISO6391(language, ['iso639_2T']) ||
+    searchForISO6391(language, ['iso639_2B', 'nativeName', 'name']);
 }
 
 /**
  * Searches for the given long in the given columns.
  * @param {string} language
- * @param {Array<keyof COLUMN_TO_LANG_INDEX>} columnsToSearch
+ * @param {Array<keyof import('iso-language-codes').Code>} columnsToSearch
  * @return {ISO6391?}
  */
 function searchForISO6391(language, columnsToSearch) {
-  for (let i = 0; i < langs.length; i++) {
-    for (let colI = 0; colI < columnsToSearch.length; colI++) {
-      const column = columnsToSearch[colI];
-      const columnValue = langs[i][COLUMN_TO_LANG_INDEX[column]];
-      if (columnValue.split(', ').map(x => x.toLowerCase()).indexOf(language) != -1) {
-        return langs[i][COLUMN_TO_LANG_INDEX['ISO 639-1']];
+  for (const lang of langs) {
+    for (const colName of columnsToSearch) {
+      if (lang[colName].split(', ').map(x => x.toLowerCase()).indexOf(language) != -1) {
+        return lang.iso639_1;
       }
     }
   }

package/src/util/cache.js

@@ -0,0 +1,20 @@
+/**
+ * @template T
+ */
+export class Cache {
+  constructor(maxSize = 10) {
+    this.maxSize = maxSize;
+    /** @type {T[]} */
+    this.entries = [];
+  }
+
+  /**
+   * @param {T} entry
+   */
+  add(entry) {
+    if (this.entries.length >= this.maxSize) {
+      this.entries.shift();
+    }
+    this.entries.push(entry);
+  }
+}