Tesseract.JS OCR

## 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>
	<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>