index.html

## index.html
<html>
<head>

<title>Tesseract</title>

<style>
body {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
</style>

</head>
<body>

<!-- Test image -->
<img id="test">

<!-- Tesseract -->
<script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script>

<!-- Application -->
<script>
class Analyze {
  constructor() {
    // Test cases
    this.annotations = [];

    // Which test
    this.index = 0;

    // How many passed
    this.pass = 0;

    // Reference to test image
    this.image = document.querySelector( '#test' );
    this.image.addEventListener( 'load', ( evt ) => this.doImageLoaded( evt ) );

    // Load the annotations
    // Test cases
    this.xhr = new XMLHttpRequest();
    this.xhr.addEventListener( 'load', ( evt ) => this.doAnnotationsLoaded( evt ) );
    this.xhr.open( 'GET', 'dataset/annotations.txt', true );
    this.xhr.send( null );
  }

  doAnnotationsLoaded( evt ) {
    let rows = this.xhr.responseText.split( '\n' );

    for( let r = 0; r < rows.length; r++ ) {
      let pair = rows[r].split( ',' );

      this.annotations.push( {
        source: pair[0],
        text: pair[1]
      } );
    }

    console.log( 'Annotations loaded.' );

    this.analyze();
  }

  doImageLoaded( evt ) {
    console.log( 'Image loaded.' );

    Tesseract.recognize( this.image )
      .then( ( result ) => {
        console.log( 'Test #' + ( this.index + 1 ) );

        this.annotations[this.index].found = result.text.trim();
        this.annotations[this.index].confidence = result.confidence;

        if( this.annotations[this.index].text.toLowerCase() == result.text.trim().toLowerCase() ) {
          this.pass = this.pass + 1;
          this.annotations[this.index].pass = true;
        } else {
          this.annotations[this.index].pass = false;
        }

        // if( this.index < ( this.annotations.length - 1 ) ) {
        if( this.index < 9 ) {
          console.log(
            this.annotations[this.index].pass +
            ': ' +
            this.annotations[this.index].text +
            ', ' +
            this.annotations[this.index].found
          );
          this.index = this.index + 1;
          this.analyze();
        } else {
          console.log( this.pass );
          console.log( this.annotations );
        }
      } );
  }

  analyze() {
    this.image.src = 'dataset/' + this.annotations[this.index].source;
  }
}

let app = new Analyze();
</script>

</body>
</html>