Initial commit

2021-09-17 17:54:42 +05:30
commit 19743356f1
10 changed files with 3627 additions and 0 deletions
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Tesseract OCR Malayalam demo</title>
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
+      crossorigin="anonymous"
+    />
+    <style type="text/css" media="all">
+      .btn .spinner-border,
+      .btn .txt-loading,
+      .btn[disabled] .txt-button {
+        display: none;
+      }
+      .btn[disabled] .spinner-border,
+      .btn[disabled] .txt-loading,
+      .btn .txt-button {
+        display: inline-block;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container-fluid" id="main">
+      <div class="row">
+        <div class="col-md-12">
+          <h2>Tesseract OCR Malayalam</h2>
+          <h4 class="text-danger">Please note</h4>
+          <ol>
+            <li>It can detect both Malayalam & English script</li>
+            <li>Pasting image from clip board is supported</li>
+          </ol>
+        </div>
+
+        <div class="col-md-12">
+          <div class="col-md-6 col-sm-12">
+            <div class="form-group">
+              <input
+                type="file"
+                accept="image/*"
+                style="visibility: hidden; height: 0"
+                @change="onChangeFile($event)"
+                ref="file_input"
+              />
+              <div class="input-group input-file">
+                <input
+                  type="text"
+                  readonly
+                  v-model="selectedFileName"
+                  class="form-control"
+                  placeholder="Choose a file..."
+                  @click="$refs.file_input.click()"
+                />
+                <div class="input-group-append">
+                  <button
+                    class="btn btn-primary btn-choose"
+                    type="button"
+                    @click="$refs.file_input.click()"
+                  >
+                    Choose another image
+                  </button>
+                  <button
+                    class="btn btn-success pull-right"
+                    @click="doOcr()"
+                    :disabled="isLoading"
+                  >
+                    <span
+                      class="spinner-border spinner-border-sm"
+                      role="status"
+                      aria-hidden="true"
+                    ></span>
+                    <span class="txt-loading">Loading...</span>
+                    <span class="txt-button">Run OCR</span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="row w-100">
+          <div class="col-md-6 col-sm-12">
+            <div>
+              <canvas
+                ref="canvas"
+                class="w-100"
+                alt="Selected image"
+                @resize="onCanvasResize($event)"
+              ></canvas>
+            </div>
+          </div>
+          <div class="col-md-6 col-sm-12">
+            <div class="card">
+              <div class="card-body">
+                <h5 class="card-title text-primary">OCR Output</h5>
+                <div id="output">
+                  <textarea
+                    class="form-control"
+                    rows="15"
+                    v-model="ocrOutput"
+                  ></textarea>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
+    <script src="./app.js" type="text/javascript" charset="utf-8"></script>
+  </body>
+</html>