vue component implementation

lexmartinez · Dec 14, 2017 · d2a3836 · d2a3836
1 parent d1125d8
commit d2a3836
Show file tree

Hide file tree

Showing 12 changed files with 9,024 additions and 70 deletions.
diff --git a/index.html b/index.html
@@ -3,7 +3,8 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>app</title>
+    <title>Simple OCR Application built on Electron, Vue.js & Tesseract.js</title>
+    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons">
   </head>
   <body>
     <div id="app"></div>

diff --git a/index.js b/index.js
@@ -18,21 +18,21 @@ const renderApp = () => {
 
 // call the renderApp() method when Electron has finished initializing
 app.on('ready', ()=>{
- setTimeout(renderApp, 3000);
+ setTimeout(renderApp, 3000)
 });
 
 // when all windows are closed, quit the application on Windows/Linux
 app.on('window-all-closed', () => {
  // only quit the application on OS X if the user hits cmd + q
  if (process.platform !== 'darwin') {
-  app.quit();
+  app.quit()
  }
 });
 
 app.on('activate', () => {
  // re-create the screen if the dock icon is clicked in OS X and no other
  // windows were open
  if (screen === null) {
-  renderApp();
+  renderApp()
  }
 });
diff --git a/package.json b/package.json
@@ -75,8 +75,10 @@
     "webpack-merge": "^4.1.0"
   },
   "dependencies": {
+    "tesseract.js": "^1.0.10",
     "vue": "^2.5.2",
-    "vue-router": "^3.0.1"
+    "vue-router": "^3.0.1",
+    "vuetify": "^0.17.4"
   },
   "engines": {
     "node": ">= 4.0.0",

diff --git a/screenshots/demo.gif b/screenshots/demo.gif
diff --git a/src/App.vue b/src/App.vue
@@ -1,6 +1,5 @@
 <template>
   <div id="app">
-    <img src="./assets/logo.png">
     <router-view/>
   </div>
 </template>
@@ -10,14 +9,3 @@ export default {
   name: 'app'
 }
 </script>
-
-<style>
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
diff --git a/src/components/OCR.vue b/src/components/OCR.vue
@@ -0,0 +1,149 @@
+<template>
+  <v-app id="inspire" dark>
+    <v-toolbar app fixed clipped-left>
+      <v-toolbar-title>Simple OCR</v-toolbar-title>
+      <v-spacer></v-spacer>
+      <span v-if="isSuccess || isFailed">
+      <v-btn icon @click="reset">
+        <v-icon>refresh</v-icon>
+      </v-btn>
+      <v-btn icon @click="save">
+        <v-icon>save</v-icon>
+      </v-btn>
+      <v-btn icon @click="drive">
+        <v-icon>file_upload</v-icon>
+      </v-btn></span>
+    </v-toolbar>
+    <v-content>
+      <v-container fluid fill-height>
+        <v-layout justify-center align-center>
+          <div class="container" v-if="isInitial">
+            <form enctype="multipart/form-data" novalidate>
+              <h1>Upload image</h1>
+              <div class="dropbox">
+                <input type="file" :name="'document'" :disabled="isSaving" @change="filesChange($event.target.files);" accept="image/*" class="input-file">
+                <p v-if="isInitial">
+                  Drag your file here to begin<br> or click to browse
+                </p>
+              </div>
+            </form>
+          </div>
+          <div class="container text-xs-center" v-if="isSaving">
+            <v-progress-circular v-bind:size="200" v-bind:width="15" v-bind:rotate="-90"
+              v-bind:value="(status.progress * 100)" color="primary">
+                  {{progress}} %
+            </v-progress-circular>
+            <h2>{{status.status}}</h2>
+          </div>
+            <v-layout row wrap v-if="isSuccess || isFailed">
+            <v-flex xs12>
+              <v-divider></v-divider>
+              <v-text-field label="Result" v-model="status.text" counter full-width multi-line single-line :auto-grow="true"></v-text-field>
+            </v-flex>
+            </v-layout>
+        </v-layout>
+      </v-container>
+    </v-content>
+    <v-footer app fixed>
+      <span>&copy; 2017 - Lex Martinez &lt;@lexmartinez&gt;</span>
+    </v-footer>
+  </v-app>
+</template>
+
+<script>
+import Tesseract from 'tesseract.js'
+
+const STATUS_INITIAL = 0
+const STATUS_SAVING = 1
+const STATUS_SUCCESS = 2
+const STATUS_FAILED = 3
+
+export default {
+  name: 'ocr',
+  resource: 'OCR',
+  data () {
+    return {
+      currentStatus: null,
+      status: {},
+      drawer: null
+    }
+  },
+  computed: {
+    isInitial () {
+      return this.currentStatus === STATUS_INITIAL
+    },
+    isSaving () {
+      return this.currentStatus === STATUS_SAVING
+    },
+    isSuccess () {
+      return this.currentStatus === STATUS_SUCCESS
+    },
+    isFailed () {
+      return this.currentStatus === STATUS_FAILED
+    },
+    progress () {
+      return Math.floor(this.status.progress * 100)
+    }
+  },
+  methods: {
+    ocr: function (event) {
+      Tesseract.workerOptions.workerPath = 'http://localhost:8080/static/worker.js'
+      Tesseract.workerOptions.langPath = 'http://localhost:8080/static/'
+      Tesseract.recognize(event)
+        .progress((status) => {
+          this.status = status
+        })
+        .then((result) => {
+          this.currentStatus = STATUS_SUCCESS
+          this.status = result
+        }).catch((error) => {
+          this.currentStatus = STATUS_FAILED
+          this.status = error
+        })
+    },
+    reset () {
+      this.currentStatus = STATUS_INITIAL
+      this.status = {}
+    },
+    filesChange (fileList) {
+      if (!fileList.length) return
+      this.currentStatus = STATUS_SAVING
+      this.ocr(fileList[0])
+    }
+  },
+  mounted () {
+    this.reset()
+  }
+}
+</script>
+
+<style>
+  .dropbox {
+    outline: 2px dashed grey; /* the dash box */
+    outline-offset: -10px;
+    background: transparent;
+    color: dimgray;
+    padding: 10px 10px;
+    min-height: 200px; /* minimum height */
+    position: relative;
+    cursor: pointer;
+  }
+
+  .input-file {
+    opacity: 0; /* invisible but it's there! */
+    width: 100%;
+    height: 200px;
+    position: absolute;
+    cursor: pointer;
+  }
+
+  .dropbox:hover {
+    background: rgba(255,255,255,0.1); /* when mouse over to the drop zone, change color */
+  }
+
+  .dropbox p {
+    font-size: 1.2em;
+    text-align: center;
+    padding: 50px 0;
+  }
+</style>
diff --git a/src/main.js b/src/main.js
@@ -3,8 +3,11 @@
 import Vue from 'vue'
 import App from './App'
 import router from './router'
+import Vuetify from 'vuetify'
+import('vuetify/dist/vuetify.min.css')
 
 Vue.config.productionTip = false
+Vue.use(Vuetify)
 
 /* eslint-disable no-new */
 new Vue({

diff --git a/src/router/index.js b/src/router/index.js
@@ -1,15 +1,15 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import HelloWorld from '@/components/HelloWorld'
+import OCR from '@/components/OCR'
 
 Vue.use(Router)
 
 export default new Router({
   routes: [
     {
       path: '/',
-      name: 'HelloWorld',
-      component: HelloWorld
+      name: 'OCR',
+      component: OCR
     }
   ]
 })
diff --git a/static/eng.traineddata.gz b/static/eng.traineddata.gz