Support more languages

public/app.js

@@ -5,11 +5,11 @@
  * Copyright 2020 Harish.K<harish2704@gmail.com>
  */
 
-function ocrByServer(image) {
+function ocrByServer(image, opts) {
   var data = new FormData();
   data.append("image", image);
   return fetch(
-    "./ocr",
+    "./ocr?lang="+opts.lang.join(':'),
     {
       method: "POST",
       body: data,
@@ -28,11 +28,17 @@ new Vue({
     currentFileBlob: null,
     isLoading: false,
     ocrOutput: "",
+    availableLangs:[
+      { label: 'Malayalam', code: 'mal' },
+      { label: 'English', code: 'eng' },
+      { label: 'Hindi', code: 'hin' },
+    ],
+    selectedLangs:['mal']
   },
   methods: {
     doOcr: function () {
       this.isLoading = true;
-      ocrByServer(this.currentFileBlob)
+      ocrByServer(this.currentFileBlob, { lang: this.selectedLangs })
         .then((data) => {
           console.log("success", data);
           this.ocrOutput = data.text;

public/index.html

@@ -50,7 +50,7 @@
                   readonly
                   v-model="selectedFileName"
                   class="form-control"
-                  placeholder="Choose a file..."
+                  placeholder="Choose an image..."
                   @click="$refs.file_input.click()"
                 />
                 <div class="input-group-append">
@@ -59,7 +59,7 @@
                     type="button"
                     @click="$refs.file_input.click()"
                   >
-                    Choose another image
+                    Choose an image
                   </button>
                   <button
                     class="btn btn-success pull-right"
@@ -78,6 +78,15 @@
               </div>
             </div>
           </div>
+          <div class="col-lg-6 col-md-12">
+            <div class="form-group row">
+              <label for="inputEmail3" class="col-form-label mr-3" >Language</label>
+              <div class="form-check form-check-inline" v-for="lang in availableLangs" :key="lang.code" >
+                <input class="form-check-input" type="checkbox" :id="`lang-${lang.code}`" v-model="selectedLangs" :value="lang.code" />
+                <label class="form-check-label" :for="`lang-${lang.code}`" >{{lang.label}}</label >
+              </div>
+            </div>
+          </div>
         </div>
 
         <div class="row w-100">

routes/root.js

@@ -17,7 +17,7 @@ module.exports = async function (fastify, opts) {
     const data = await req.file();
     const uid = crypto.randomBytes(16).toString("hex");
     const filename = `${UPLOAD_PATH}/${uid}.${mime.extension(data.mimetype)}`;
-    const lang = "mal+eng";
+    const lang = req.query.lang ? req.query.lang.replace(/:/g, "+") : "mal";
     await pump(data.file, fs.createWriteStream(filename));
     const args = [filename, "stdout", "-l", lang];
     const { stdout, stderr } = await exec("tesseract", args);