Loading Tesseract.js files on the mobile

Technical

I have a problem with Tesseract.js library, specifically with setting path to .js files.

The docs say in order to use it completely offline I need to load JS files from the local folder like this:

const { createWorker } = Tesseract;
    const worker = createWorker({
      workerPath: '../node_modules/tesseract.js/dist/worker.min.js',
      langPath: '../lang-data',
      corePath: '../node_modules/tesseract.js-core/tesseract-core.wasm.js',
      logger: m => console.log(m),
    });

The above example tells to reference files directly from the node_modules folder. As I figured it out, Quasar won’t let me do this
I tried to place these files in ‘statics’ folder, ‘public’ folder, but it won’t load these files either way.
I checked the Tesseract object, it’s loading correctly.

Where should I place those files so they can be loaded both in browser and an Android device?

dobbel

@Technical said in Loading Tesseract.js files on the mobile:

Tesseract

you could just include them in the index.template.html:

<!-- v2 -->
<script src='https://unpkg.com/tesseract.js@v2.1.0/dist/tesseract.min.js'></script>

<!-- v1 -->
<script src='https://unpkg.com/tesseract.js@1.0.19/src/index.js'></script>

The above example tells to reference files directly from the node_modules folder.

I think you can import files from node-modules files just like this:

import tesseractJS from "tesseract.js/dist/worker.min.js"
import tesseractCoreJS from "tesseract.js-core/tesseract-core.wasm.js"

const { createWorker } = Tesseract;
    const worker = createWorker({
      workerPath: tesseractJS ,
      langPath: '../lang-data',
      corePath: tesseractCoreJS,
      logger: m => console.log(m),
    });

Technical

@dobbel I think you’ve misunderstood it a bit.

While your approach with referencing packages from will work, the point is to make Tesseract work completely offline, which your suggestion contradicts.
The ‘workerPath’ and ‘corePath’ variables are filenames of the scripts which the library should load, not imported objects.

dobbel

@Technical

While your approach with referencing packages from will work, the point is to make Tesseract work completely offline, which your suggestion contradicts.

If you change the cdn import to a project import you’ll have an offline solution for android. If you want offline support for web, creating a PWA instead of SPA will give you offline support almost out of the box.

The ‘workerPath’ and ‘corePath’ variables are filenames of the scripts which the library should load, not imported objects.

Your right about it’s about the ```file names``, What if you copy those 2 files in your public dir you could reach them from there.

const { createWorker } = Tesseract;
    const worker = createWorker({
      workerPath: 'tesseract.js/dist/worker.min.js' ,
      langPath: '../lang-data',
      corePath: 'tesseract.js-core/tesseract-core.wasm.js',
      logger: m => console.log(m),
    });

Technical

@dobbel I tried the paths you are suggesting and it didn’t work. I can’t seemingly grasp what would be the relative directory when loading the JS files. Is it the root directory, statics folder, the public directory or the path must be relative to the src/pages folder? I’ve tried everything and neither worker.

dobbel

@Technical

If you place the files in public then they are at "/myfile.js"

See:
https://quasar.dev/quasar-cli/handling-assets#Static-Assets---%2Fpublic