@internetarchive/bookreader 5.0.0-95 → 5.0.0-97

package/src/plugins/plugin.experiments.js

@@ -21,6 +21,9 @@ class ExperimentModel {
   /** @type {string} */
   learnMore;
 
+  /** @type {import("@/src/BookReader.js").default} */
+  br;
+
   assetRoot = '/BookReader/';
 
   enabledLoading = false;
@@ -46,10 +49,32 @@ export class ExperimentsPlugin extends BookReaderPlugin {
 
     /** Where the state of this plugin is saved in localStorage */
     localStorageKey: 'BrExperiments',
+
+    /** The experiments that should be shown in the experiments panel */
+    enabledExperiments: ['translate'],
   }
 
   /** @type {ExperimentModel[]} */
-  experiments = [
+  allExperiments = [
+    new class extends ExperimentModel {
+      name = 'translate';
+      title = 'Translate Plugin';
+      description = "Translate books directly in your browser.";
+      learnMore = 'https://mozilla.github.io/translations/';
+      icon = 'images/translate.svg';
+      enabled = false;
+      async enable({ manual = false}) {
+        await importAsScript(this.buildAssetPath('plugins/plugin.translate.js'));
+        this.br.initializePlugin('translate');
+      }
+      async disable() {
+        // need to reload to remove translate plugin script
+        // Sleep so that the event loop can finish processing before the reload
+        sleep(0).then(() => {
+          window.location.reload();
+        });
+      }
+    }(),
     new class extends ExperimentModel {
       name = 'hypothesis';
       title = 'Hypothes.is';
@@ -93,10 +118,11 @@ export class ExperimentsPlugin extends BookReaderPlugin {
       return;
     }
 
-    for (const experiment of this.experiments) {
+    for (const experiment of this.allExperiments) {
       // TODO: imagesBaseURL should be replaced with assetRoot everywhere
       experiment.assetRoot = this.br.options.imagesBaseURL.replace(/images\/$/, '');
       experiment.icon = experiment.buildAssetPath(experiment.icon);
+      experiment.br = this.br;
     }
 
     this._loadExperimentStates();
@@ -106,7 +132,7 @@ export class ExperimentsPlugin extends BookReaderPlugin {
 
   _loadExperimentStates() {
     const savedStates = JSON.parse(localStorage.getItem(this.options.localStorageKey) || '{}');
-    this.experiments.forEach(experiment => {
+    this.allExperiments.forEach(experiment => {
       if (savedStates[experiment.name] !== undefined) {
         experiment.enabled = savedStates[experiment.name];
         if (experiment.enabled) {
@@ -118,7 +144,7 @@ export class ExperimentsPlugin extends BookReaderPlugin {
 
   _saveExperimentStates() {
     const states = Object.fromEntries(
-      this.experiments.map(experiment => [experiment.name, experiment.enabled]),
+      this.allExperiments.map(experiment => [experiment.name, experiment.enabled]),
     );
     localStorage.setItem(this.options.localStorageKey, JSON.stringify(states));
   }
@@ -145,13 +171,12 @@ export class ExperimentsPlugin extends BookReaderPlugin {
   _render() {
     this.br.shell.menuProviders['experiments'] = {
       id: 'experiments',
-      // https://icon-sets.iconify.design/hugeicons/?icon-filter=eco-lab-02&query=lab
       icon: html`
-        <svg xmlns="http://www.w3.org/2000/svg" width="34" viewBox="0 0 24 24"><path fill="currentColor" d="M10 5.75h1.25v2.5H9.5c-.41 0-.75.34-.75.75s.34.75.75.75h.25v1.96A5.72 5.72 0 0 0 6.25 17c0 3.17 2.58 5.75 5.75 5.75s5.75-2.58 5.75-5.75c0-2.33-1.39-4.4-3.5-5.29V9.75h.25c.41 0 .75-.34.75-.75s-.34-.75-.75-.75h-1.75v-1.5H14c1.52 0 2.75-1.23 2.75-2.75V3c0-.41-.34-.75-.75-.75h-2c-.579 0-1.115.178-1.558.483A2.75 2.75 0 0 0 10 1.25H8c-.41 0-.75.34-.75.75v1c0 1.52 1.23 2.75 2.75 2.75m2.75-.5V5c0-.69.56-1.25 1.25-1.25h1.25V4c0 .69-.56 1.25-1.25 1.25zm-1.5 6.98V9.75h1.5v2.48c0 .33.22.62.53.72c1.77.56 2.97 2.19 2.97 4.06A4.26 4.26 0 0 1 12 21.26a4.26 4.26 0 0 1-4.25-4.25c0-1.87 1.19-3.5 2.97-4.06c.32-.1.53-.39.53-.72m-2.5-9.48H10c.69 0 1.25.56 1.25 1.25v.25H10c-.69 0-1.25-.56-1.25-1.25z" color="currentColor"/></svg>
+        <img src="${this.br.options.imagesBaseURL}/icon_experiment.svg" width="26"/>
       `,
       label: 'Experiments',
       component: html`<br-experiments-panel
-        .experiments="${this.experiments}"
+        .experiments="${this.allExperiments.filter(experiment => this.options.enabledExperiments.includes(experiment.name))}"
         @connected="${e => this._panel = e.target}"
         @toggle="${async e => {
         await this._toggleExperiment(e.detail.experiment, e.detail.enabled);
@@ -240,14 +265,14 @@ export class BrExperimentToggle extends LitElement {
 
   render() {
     return html`
-      <div class="experiment-card">
+      <div class="experiment-card" style="margin-bottom: 10px;">
         <div style="display: flex; align-items: center; gap: 10px;">
           <img src="${this.icon}" style="width: 20px; height: 20px;" alt="" />
           <div style="flex-grow: 1; font-weight: bold;">${this.title}</div>
         </div>
         <p style="opacity: 0.9">
           ${this.description}
-          <a href="${this.learnMore}" target="_blank">Learn more</a>.
+          ${this.learnMore ? html`<a href="${this.learnMore}" target="_blank">Learn more</a>.` : ''}
         </p>
         <div style="display: flex">
           <div style="flex-grow: 1;"></div>

package/src/plugins/plugin.text_selection.js

@@ -3,31 +3,12 @@ import { createDIVPageLayer } from '../BookReader/PageContainer.js';
 import { SelectionObserver } from '../BookReader/utils/SelectionObserver.js';
 import { BookReaderPlugin } from '../BookReaderPlugin.js';
 import { applyVariables } from '../util/strings.js';
+import { Cache } from '../util/cache.js';
 /** @typedef {import('../util/strings.js').StringWithVars} StringWithVars */
 /** @typedef {import('../BookReader/PageContainer.js').PageContainer} PageContainer */
 
 const BookReader = /** @type {typeof import('../BookReader').default} */(window.BookReader);
 
-/**
- * @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);
-  }
-}
 
 export class TextSelectionPlugin extends BookReaderPlugin {
   options = {
@@ -327,6 +308,9 @@ export class TextSelectionPlugin extends BookReaderPlugin {
     }
 
     const textLayer = createDIVPageLayer(pageContainer.page, 'BRtextLayer');
+    // Have to wait to make sure the page container is actually rendered,
+    // otherwise width/height are unset after a mode change.
+    await Promise.resolve();
     const ratioW = parseFloat(pageContainer.$container[0].style.width) / pageContainer.page.width;
     const ratioH = parseFloat(pageContainer.$container[0].style.height) / pageContainer.page.height;
     textLayer.style.transform = `scale(${ratioW}, ${ratioH})`;
@@ -356,6 +340,10 @@ export class TextSelectionPlugin extends BookReaderPlugin {
     }
     $container.append(textLayer);
     this.stopPageFlip($container);
+    this.br.trigger('textLayerRendered', {
+      pageIndex,
+      pageContainer,
+    });
   }
 
   /**

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;
+  }
+}