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">