* Added loading icon for button

* Return baseline information from API
harish2704 · Mar 10, 2020 · 5eb354d · 5eb354d
1 parent df38045
commit 5eb354d
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 13 deletions.
diff --git a/gui/web/app.js b/gui/web/app.js
@@ -97,7 +97,9 @@ $(function() {
       }
     );
 
-    $('#run-btn').click(function(){
+    var runButton = $('#run-btn');
+    runButton.click(function(){
+      runButton.attr('disabled', 'disabled');;
       var data = new FormData();
       data.append('image', currentFile );
       $.ajax({
@@ -110,9 +112,12 @@ $(function() {
           console.log( 'success', data );
           drawBoxes( data );
           $('#output').text( data.text.join('\n') )
+          runButton.removeAttr('disabled');
         },
         error: function (error) {
           console.log( 'error', data );
+          alert('Some error occurred while Calling OCR API')
+          runButton.removeAttr('disabled');
         },
         data: data,
         processData: false,

diff --git a/gui/web/index.html b/gui/web/index.html
@@ -8,6 +8,12 @@
   .lineseg{
     border: red solid 2px
   }
+  .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 >
@@ -28,7 +34,11 @@ <h2>Pottan-OCR</h2>
               <input type="text" class="form-control" placeholder='Choose a file...' />
               <div class="input-group-append">
                 <button class="btn btn-primary btn-choose" type="button">Choose another image</button>
-                <button class="btn btn-success pull-right" id="run-btn">Run recognizer</button>
+                <button class="btn btn-success pull-right" id="run-btn">
+                    <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>
@@ -52,11 +62,12 @@ <h2>Pottan-OCR</h2>
           <canvas id="for-cropper" class="img-thumbnail" src="" alt="Selected image"/>
         </div>
         <div class="col-md-6">
-          <br />
-          <br />
-          <br />
-          <br />
-          <pre id="output"></pre>
+          <div class="card">
+            <div class="card-body">
+              <h5 class="card-title text-primary">OCR Output</h5>
+              <pre id="output"></pre>
+            </div>
+          </div>
         </div>
       </div>
 

diff --git a/pottan_ocr/ocr_server.py b/pottan_ocr/ocr_server.py
@@ -71,6 +71,7 @@ def getLineSegs( self, padding_top=0, padding_bottom=0 ):
         hocr =  readFile( self.hocrFile )
         dom = pq( hocr.encode('utf-8') )
         lineSegs = []
+        baseLineInfo = []
         for el in dom('.ocr_line'):
             if extract_text(el).strip():
                 title = el.get('title');
@@ -81,12 +82,12 @@ def getLineSegs( self, padding_top=0, padding_bottom=0 ):
                 cords[1] = cords[1]-padding_top
                 cords[2] = cords[2]+5
                 cords[3] = cords[3]+padding_bottom
-                #  cords[3] = cords[3] - int(float(titleItems[1].split(' ')[3] ))
 
-                #baseline inforation
                 lineSegs.append( cords )
-                #  lineSegs.append( { 'bbox': cords, 'rot':  float(titleItems[1].split(' ')[2] )  } )
-        return lineSegs
+
+                #baseline inforation
+                baseLineInfo.append( list( map(float, titleItems[1].split(' ')[2:] ) ) )
+        return lineSegs, baseLineInfo
 
     def getOcrResult( self, lineSegs ):
         global lineHeight
@@ -111,10 +112,10 @@ def do_ocr():
     padding_bottom = int(request.args['padding_bottom'] )
     ocrTask = OcrTask()
     f.save( ocrTask.imageFile )
-    lineSegs = ocrTask.getLineSegs( padding_top, padding_bottom )
+    lineSegs, baseLineInfo = ocrTask.getLineSegs( padding_top, padding_bottom )
     ocrResult = ocrTask.getOcrResult( lineSegs )
     ocrTask.cleanFiles()
-    response = jsonify( lines=lineSegs, text=ocrResult )
+    response = jsonify( lines=lineSegs, text=ocrResult, baselines=baseLineInfo )
     response.headers.add("Access-Control-Allow-Origin", "*")
     return response