[fix] TTS failed in Android

[optimize] Loading state of Recognition model
idea2app · Oct 7, 2024 · fe8724c · fe8724c
1 parent a8909ce
commit fe8724c
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 41 deletions.
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
         "dom-renderer": "^2.3.0",
         "iterable-observer": "^1.1.0",
         "mobx": "^6.13.3",
+        "mobx-restful": "^1.0.1",
         "tesseract.js": "^5.1.1",
         "web-cell": "^3.0.0",
         "web-utility": "^4.4.0"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/model/OCR.ts b/src/model/OCR.ts
@@ -1,8 +1,11 @@
 import { computed, observable } from 'mobx';
-import { createWorker,ImageLike, LoggerMessage } from 'tesseract.js';
+import { BaseModel, toggle } from 'mobx-restful';
+import { createWorker, ImageLike, LoggerMessage } from 'tesseract.js';
 
-export class OCRModel {
-    constructor(public language = 'chi_sim') {}
+export class OCRModel extends BaseModel {
+    constructor(public language = 'chi_sim') {
+        super();
+    }
 
     @observable
     accessor currentProgress: LoggerMessage | undefined;
@@ -15,6 +18,7 @@ export class OCRModel {
     @observable
     accessor resultText: string | undefined;
 
+    @toggle('uploading')
     async recognize(image: ImageLike) {
         const worker = await createWorker(this.language, 1, {
             logger: message => (this.currentProgress = message)

diff --git a/src/model/TTS.ts b/src/model/TTS.ts
@@ -1,5 +1,5 @@
 import { observable } from 'mobx';
-import { getVisibleText } from 'web-utility';
+import { getVisibleText, sleep } from 'web-utility';
 
 export enum TTSState {
     Clear,
@@ -26,6 +26,8 @@ export class TTSModel {
         return voices[0]
             ? Promise.resolve(voices)
             : new Promise<SpeechSynthesisVoice[]>(resolve => {
+                  sleep(1).then(() => resolve([]));
+
                   speechSynthesis.onvoiceschanged = () =>
                       resolve(speechSynthesis.getVoices());
               });
@@ -81,36 +83,34 @@ export class TTSModel {
         }
     }
 
-    static getSelectedText(box: Element) {
+    static getSelectedText(box?: Element) {
         const range = getSelection()?.getRangeAt(0);
 
-        if (
-            range &&
-            range + '' &&
-            (!box || box.contains(range.commonAncestorContainer))
-        )
-            return [...this.walk(range)]
-                .filter(({ nodeType, parentNode }) => {
-                    if (nodeType !== 3) return;
-
-                    const { width, height } = (
-                        parentNode as Element
-                    ).getBoundingClientRect();
-
-                    return width && height;
-                })
-                .map(({ nodeValue }, index, { length }) =>
-                    nodeValue.slice(
-                        index === 0 ? range.startOffset : 0,
-                        index === length - 1 ? range.endOffset : Infinity
-                    )
+        if (!range?.toString() || !box?.contains(range.commonAncestorContainer))
+            throw new RangeError('No text selected');
+
+        return [...this.walk(range)]
+            .filter(({ nodeType, parentNode }) => {
+                if (nodeType !== 3) return;
+
+                const { width, height } = (
+                    parentNode as Element
+                ).getBoundingClientRect();
+
+                return width && height;
+            })
+            .map(({ nodeValue }, index, { length }) =>
+                nodeValue.slice(
+                    index === 0 ? range.startOffset : 0,
+                    index === length - 1 ? range.endOffset : Infinity
                 )
-                .filter(text => text.trim())
-                .join('')
-                .trim();
+            )
+            .filter(text => text.trim())
+            .join('')
+            .trim();
     }
 
-    static getReadableText(box: Element) {
+    static getReadableText(box?: Element) {
         try {
             return this.getSelectedText(box);
         } catch {

diff --git a/src/page/Home.tsx b/src/page/Home.tsx
@@ -1,4 +1,4 @@
-import { Button, ProgressBar } from 'boot-cell';
+import { Button, ProgressBar, SpinnerBox } from 'boot-cell';
 import { observable } from 'mobx';
 import { component, observer } from 'web-cell';
 import { CustomElement } from 'web-utility';
@@ -38,11 +38,12 @@ export class HomePage extends HTMLElement implements CustomElement {
 
     render() {
         const { storeOCR, storeTTS, cameraOpened } = this;
-        const { currentPercent, resultText } = storeOCR,
+        const { uploading, currentPercent, resultText } = storeOCR;
+        const recognizing = uploading > 0,
             speaking = storeTTS.state === TTSState.Speaking;
 
         return (
-            <>
+            <SpinnerBox cover={recognizing}>
                 <header className="d-flex justify-content-around">
                     <Button
                         variant="danger"
@@ -75,7 +76,7 @@ export class HomePage extends HTMLElement implements CustomElement {
                     }
                 />
                 <article>{resultText}</article>
-            </>
+            </SpinnerBox>
         );
     }
 }