@internetarchive/bookreader 5.0.0-10-alpha-1 → 5.0.0-100

package/src/plugins/search/utils.js

@@ -0,0 +1,43 @@
+import { escapeHTML, escapeRegExp } from '../../BookReader/utils.js';
+
+/**
+ * @param {string} match
+ * @param {string} preTag
+ * @param {string} postTag
+ * @returns {string}
+ */
+export function renderMatch(match, preTag, postTag) {
+  // Search results are returned as a text blob with the hits wrapped in
+  // triple mustaches. Hits occasionally include text beyond the search
+  // term, so everything within the staches is captured and wrapped.
+  const preTagRe = escapeRegExp(escapeHTML(preTag));
+  const postTagRe = escapeRegExp(escapeHTML(postTag));
+  // [^] matches any character, including line breaks
+  const regex = new RegExp(`${preTagRe}([^]+?)${postTagRe}`, 'g');
+  return escapeHTML(match)
+    .replace(regex, '<mark>$1</mark>')
+    // Fix trailing hyphens. This over-corrects but is net useful.
+    .replace(/(\b)- /g, '$1');
+}
+
+/**
+ * Attach some fields to search inside results
+ * @param {SearchInsideResults} results
+ * @param {(pageNum: LeafNum) => PageNumString} displayPageNumberFn
+ * @param {string} preTag
+ * @param {string} postTag
+ */
+export function marshallSearchResults(results, displayPageNumberFn, preTag, postTag) {
+  // Attach matchIndex to a few things to make it easier to identify
+  // an active/selected match
+  for (const [index, match] of results.matches.entries()) {
+    match.matchIndex = index;
+    match.displayPageNumber = displayPageNumberFn(match.par[0].page);
+    match.html = renderMatch(match.text, preTag, postTag);
+    for (const par of match.par) {
+      for (const box of par.boxes) {
+        box.matchIndex = index;
+      }
+    }
+  }
+}

package/src/plugins/search/view.js

@@ -1,25 +1,27 @@
+// @ts-check
+/** @typedef {import('@/src/BookReader.js').default} BookReader */
+
 class SearchView {
   /**
    * @param {object} params
-   * @param {object} params.br The BookReader instance
-   * @param {function} params.cancelSearch callback when a user wants to cancel search
+   * @param {BookReader} params.br The BookReader instance
+   * @param {function} params.searchCancelledCallback callback when a user wants to cancel search
    *
    * @event BookReader:SearchResultsCleared - when the search results nav gets cleared
    * @event BookReader:ToggleSearchMenu - when search results menu should toggle
    */
   constructor({ br, searchCancelledCallback = () => {} }) {
+    /** @type {BookReader} */
     this.br = br;
-
-    // Search results are returned as a text blob with the hits wrapped in
-    // triple mustaches. Hits occasionally include text beyond the search
-    // term, so everything within the staches is captured and wrapped.
-    this.matcher = new RegExp('{{{(.+?)}}}', 'g');
     this.matches = [];
     this.cacheDOMElements();
-    this.bindEvents();
     this.cancelSearch = searchCancelledCallback;
   }
 
+  init() {
+    this.bindEvents();
+  }
+
   cacheDOMElements() {
     this.dom = {};
     // Search input within the top toolbar. Will be removed once the mobile menu is replaced.
@@ -42,7 +44,7 @@ class SearchView {
   }
 
   clearSearchFieldAndResults(dispatchEventWhenComplete = true) {
-    this.br.removeSearchResults();
+    this.br.plugins.search.removeSearchResults();
     this.removeResultPins();
     this.emptyMatches();
     this.setQuery('');
@@ -149,10 +151,12 @@ class SearchView {
   }
 
   updateResultsPosition() {
+    if (!this.dom.searchNavigation) return;
     this.dom.searchNavigation.find('[data-id=resultsCount]').text(this.resultsPosition());
   }
 
   updateSearchNavigationButtons() {
+    if (!this.dom.searchNavigation) return;
     this.dom.searchNavigation.find('.prev').attr('disabled', !this.currentMatchIndex);
     this.dom.searchNavigation.find('.next').attr('disabled', this.currentMatchIndex + 1 === this.matches.length);
   }
@@ -214,7 +218,7 @@ class SearchView {
       <form class="BRbooksearch desktop">
         <input type="search" name="query" class="BRsearchInput" value="" placeholder="Search inside"/>
         <button type="submit" class="BRsearchSubmit">
-          <img src="${this.br.imagesBaseURL}icon_search_button.svg" />
+          <img src="${this.br.options.imagesBaseURL}icon_search_button.svg" />
         </button>
       </form>
     `;
@@ -226,25 +230,20 @@ class SearchView {
    */
   renderPins(matches) {
     matches.forEach((match) => {
-      const queryString = match.text;
-      const pageIndex = this.br.leafNumToIndex(match.par[0].page);
-      const pageNumber = this.br.getPageNum(pageIndex);
+      const pageIndex = this.br.book.leafNumToIndex(match.par[0].page);
       const uiStringSearch = "Search result"; // i18n
-      const uiStringPage = "Page"; // i18n
-
-      const percentThrough = this.br.constructor.util.cssPercentage(pageIndex, this.br.getNumLeafs() - 1);
-
-      const queryStringWithB = queryString.replace(this.matcher, '<b>$1</b>');
-
-      let queryStringWithBTruncated = '';
-
-      if (queryString.length > 100) {
-        queryStringWithBTruncated = queryString
-          .replace(/^(.{100}[^\s]*).*/, "$1")
-          .replace(this.matcher, '<b>$1</b>')
-                + '...';
+      const percentThrough = this.br.constructor.util.cssPercentage(pageIndex, this.br.book.getNumLeafs() - 1);
+
+      let html = match.html;
+      if (html.length > 200) {
+        const start = Math.max(0, html.indexOf('<mark>') - 100);
+        if (start != 0) {
+          html = '…' + match.html
+            .substring(start)
+            // Make sure at word boundary though
+            .replace(/^\S+/, '');
+        }
       }
-
       // draw marker
       $('<div>')
         .addClass('BRsearch')
@@ -254,43 +253,35 @@ class SearchView {
         .attr('title', uiStringSearch)
         .append(`
           <div class="BRquery">
-            <div>${queryStringWithBTruncated || queryStringWithB}</div>
-            <div>${uiStringPage} ${pageNumber}</div>
+            <main>${html}</main>
+            <footer>Page ${match.displayPageNumber}</footer>
           </div>
         `)
-        .data({ pageIndex })
         .appendTo(this.br.$('.BRnavline'))
-        .hover(
-          (event) => {
-            // remove from other markers then turn on just for this
-            // XXX should be done when nav slider moves
-            const marker = event.currentTarget;
-            const tooltip = marker.querySelector('.BRquery');
-            const tooltipOffset = tooltip.getBoundingClientRect();
-            const targetOffset = marker.getBoundingClientRect();
-            const boxSizeAdjust = parseInt(getComputedStyle(tooltip).paddingLeft) * 2;
-            if (tooltipOffset.x - boxSizeAdjust < 0) {
-              tooltip.style.setProperty('transform', `translateX(-${targetOffset.left - boxSizeAdjust}px)`);
-            }
-            $('.BRsearch,.BRchapter').removeClass('front');
-            $(event.target).addClass('front');
-          },
-          (event) => $(event.target).removeClass('front'))
-        .click(function (event) {
-          // closures are nested and deep, using an arrow function breaks references.
-          // Todo: update to arrow function & clean up closures
-          // to remove `bind` dependency
-          this.br._searchPluginGoToResult(+$(event.target).data('pageIndex'));
-          this.br.updateSearchHilites();
-        }.bind(this));
+        .on("mouseenter", (event) => {
+          // remove from other markers then turn on just for this
+          // XXX should be done when nav slider moves
+          const marker = event.currentTarget;
+          const tooltip = marker.querySelector('.BRquery');
+          const tooltipOffset = tooltip.getBoundingClientRect();
+          const targetOffset = marker.getBoundingClientRect();
+          const boxSizeAdjust = parseInt(getComputedStyle(tooltip).paddingLeft) * 2;
+          if (tooltipOffset.x - boxSizeAdjust < 0) {
+            tooltip.style.setProperty('transform', `translateX(-${targetOffset.left - boxSizeAdjust}px)`);
+          }
+          $('.BRsearch,.BRchapter').removeClass('front');
+          $(event.target).addClass('front');
+        })
+        .on("mouseleave", (event) => $(event.target).removeClass('front'))
+        .on("click", () => { this.br.plugins.search.jumpToMatch(match.matchIndex); });
     });
   }
 
   /**
-   * @param {boolean} bool
+   * @param {boolean} show
    */
-  toggleSearchPending(bool) {
-    if (bool) {
+  toggleSearchPending(show = false) {
+    if (show) {
       this.br.showProgressPopup("Search results will appear below...", () => this.progressPopupClosed());
     }
     else {
@@ -386,21 +377,13 @@ class SearchView {
     }
   }
 
-  /**
-   * @param {Event} e
-   */
-  handleNavToggledCallback(e) {
-    const is_visible = this.br.navigationIsVisible();
-    this.togglePinsFor(is_visible);
-  }
-
   handleSearchStarted() {
     this.emptyMatches();
-    this.br.removeSearchHilites();
+    this.br.plugins.search.removeSearchHilites();
     this.removeResultPins();
     this.toggleSearchPending(true);
     this.teardownSearchNavigation();
-    this.setQuery(this.br.searchTerm);
+    this.setQuery(this.br.plugins.search.searchTerm);
   }
 
   /**
@@ -428,7 +411,6 @@ class SearchView {
 
     window.addEventListener(`${namespace}SearchCallbackError`, this.handleSearchCallbackError.bind(this));
     $(document).on(`${namespace}SearchCallback`, this.handleSearchCallback.bind(this))
-      .on(`${namespace}navToggled`, this.handleNavToggledCallback.bind(this))
       .on(`${namespace}SearchStarted`, this.handleSearchStarted.bind(this))
       .on(`${namespace}SearchCallbackBookNotIndexed`, this.handleSearchCallbackBookNotIndexed.bind(this))
       .on(`${namespace}SearchCallbackEmpty`, this.handleSearchCallbackEmpty.bind(this))

package/src/plugins/translate/TranslationManager.js

@@ -0,0 +1,162 @@
+// @ts-check
+import { Cache } from '../../util/cache.js';
+import { BatchTranslator } from '@internetarchive/bergamot-translator/translator.js';
+import { toISO6391 } from '../tts/utils.js';
+
+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/firefox_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: toISO6391(firstLang, true), type: "prod"});
+      }
+      if (secondLang !== "en") {
+        this.toLanguages.push({code: secondLang, name: toISO6391(secondLang, true), 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);
+      this.alreadyTranslated.add({index: key, response: response.target.text});
+      delete this.currentlyTranslating[key];
+    });
+
+    return promise;
+  }
+
+  /**
+   * Checks and updates the status of a model that is currently being retreived from IA
+   * @param {string} fromLanguage
+   * @param {string} toLanguage
+   * @returns {Promise<boolean>}
+   */
+  getTranslationModel = async(fromLanguage, toLanguage) => {
+    return this.translator.backing.getTranslationModel({from: fromLanguage, to: toLanguage})
+      .catch((err) => {
+        console.error(`An error occurred while trying to retreive the ${fromLanguage}-${toLanguage} model`);
+      });
+  }
+}