TTV-Tutorial: Transcribe Data From an Image

In following write-up we will guide you through the Template creation process done in Microworkers (TTV) for extracting data from an image, or technically called data transcription.
 
Let’s assume that we have a lot of scanned images that require some sort of transcription. Such labour can often be time consuming, while also demands a manual human interaction. Microworkers’ Template Test & Verification (TTV) incomparably lessens the time factor utilizing the power of crowdsourcing.
 
For the purpose of this example we used a piece of paper that each of us meets daily, a shopping receipt. With (TTV) campaign we are going to transcribe only the specific information that can be found on the scan.
Let’s now see how we can adjust the Template to serve the need.
 Guide is mainly based on TTV’s Template Editor in Source Code 
 
Firstly, have a quick look below on the Template and task preview, so you may see how the entire project is visually conceived.
 
Template Preview: (requires Microworkers account login): Classify Shopping Receipt

Screen-capture of task from Worker’s perspective: (click image to enlarge)



We will now dive deeper into the coding and styles which have been used for making this Template. (we’ve parsed an entire Template’s code on snippets to get things easier and hence simplify the follow-up process)

• Task Instructions Panel

For a list of instructions we’ve utilized Bootstrap Primary Panel class as a container. To emphasize more sensitive ones, we took advantage of styles from Bootstrap Text/Typography styling sheet.
 

<!-- Instructions -->
<div class="panel panel-primary">
<div class="panel-heading"><strong>Task Instructions:</strong></div>
<div class="panel-body">
<h5><strong>The necessary details can often be found at the top or bottom of the receipt. </strong></h5>
<ul>
<li>Look at the shopping receipt and input data in corresponding column.</li>
<li>Check examples given for inputting data in compliant format.</li>
<li>
<p class="bg-warning">If any of the information cannot be found or is not clearly visible fill in such column with <u>None</u>.</p>
</li>
<li>
<p class="bg-danger"><u>Do not</u> use dollar sign ($), just type in the total number <u>including tax</u><strong>.</strong></p>
</li>
<li>
<p class="bg-danger">If number is not rounded use a <u>dot</u> (<strong>.</strong>)</p>
</li>
</ul>
</div>
</div>
<!-- End Instructions -->

• Shopping Receipts Source

Since our project requires more than a few images for working on, we need a CSV callback to incorporate many into a Template, different one for each assignment (Microworkers CSV approach explained). The process is easy, similar as to how we’ve explained it in our previous blog post Creating Template With Images, however, the only difference is that instead a direct link to an image we put CSV variable ${images}, in this specific case.

Visual Editor: Click Here

 
Template doesn’t include a CSV file itself, an option for attaching a CSV will be given later, during the campaign setup
 

<!-- Csv -->
<div class="row">
<div class="text-left">
<div class="col-sm-6">
<div><img alt="image_url" class="img-thumbnail" src="${images}" /></div>
</div>
</div>
<!-- End Csv -->

• Data Input

Now, as we are done with instructions and supplying our Template with raw data, it’s time to take care of where that transcribed data are supposed to be inputted. For this purpose we chose Bootstrap Input forms placing each one inside the same-already-used panel now with Info class for better layout.

Visual Editor: Click Here

Important:
When working with Input (text area) forms, it’s very important to give an adequate term to a name column/code to avoid any potential overlap among collected data.

Our “Examples” are designed using Bootstrap Default label class and Superscript text.

That’s going to be all in today’s guide on how to create better looking and in the same hand a fully functional Template that participants will enjoy filling in. Now, let your imagination go wild in making some nice Templates for your own needments!
 
Don’t forget to contact us for any concerns you might have during the creation or anything in connection with (TTV) utilization. We’ll give our best to assist.
 
 
Until the next Template tutorial please stay tuned!