Pengguna:Mahastama/OCR.js

/*jshint boss:true*/
/*global $, mw*/

/**
 * This script adds a toolbar button that replaces the editbox text with OCR text
 * derived by sending the .prp-page-image image throughTRAWACA.
 * 
 * It is a fork of the script to run Google Cloud Vision OCR
 */
( function ( mw, $ ) {
	var token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiIsImp0aSI6IjRmMWcyM2ExMmFhIn0.eyJpc3MiOiJodHRwOlwvXC9leGFtcGxlLmNvbSIsImF1ZCI6Imh0dHA6XC9cL2V4YW1wbGUub3JnIiwianRpIjoiNGYxZzIzYTEyYWEiLCJpYXQiOjE1ODUxMTkxNjAsImV4cCI6MTU4NjQzMzE2MCwidWlkIjoiYXBpQHRyYXdhY2EuaWQifQ.Ht3Kd0YwZJdb5Cvv-BjwZn6wokvuM7luaL1Z8ruXny0";
	var toolUrl = "https://trawaca.id/api/default/ocrjawa";
	var postId = "1234567890";
	var loadingGifUrl = 'https://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif';

	/**
	 * The initialisation function, run on every load. Adds the OCR button to the
	 * toolbar if we're currently editing or previewing in the Page namespace.
	 */
	function run() {
		mw.loader.using( [ 'mediawiki.api', 'ext.wikiEditor', 'user.options' ], function () {
			if ( mw.config.get( 'wgCanonicalNamespace' ) === 'Page' ) {
				customizeToolbar();
			}
		} );
	}

	/**
	 * Add the OCR button to the toolbar. This is called in run, and doesn't
	 * need to check anything about whether we need to add the button.
	 */
	function customizeToolbar() {
		$( document ).ready( function () {
			var ocrButtonDetails = {
				type: 'button',
				icon: 'https://upload.wikimedia.org/wikipedia/commons/b/bd/GoogleOcr_WikiEditor_button.png',
				label: 'Run TRAWACA OCR',
				action: { type: 'callback', execute: doOcr }
			};
			var ocrButton = {
				section: 'main', // 'proofreadpage-tools',
				group: 'insert', // 'other',
				tools: { 'TrawacaOcr': ocrButtonDetails }
			};
			$( "#wpTextbox1" ).wikiEditor( 'addToToolbar', ocrButton );
			$( "a[rel='TrawacaOcr']" ).css("width", "45px");
		} );
		
		// Pre-load the loading gif.
		$( '<img />' ).attr( 'src', loadingGifUrl ).appendTo( 'body' ).hide();
	}

	/**
	 * This function is run when the OCR button is clicked. It sends the page
	 * image to the API and replace the editbox's text with the restult.
	 */
	function doOcr() {
		if ( $( '.prp-page-image img' ).length === 0 ) {
			mw.notify( 'Image to OCR not found' );
		}
		
		//Display notification
		var txt;
		var r = confirm("This image will be sent to Trawaca server in https://trawaca.id/, a collaboration project between Duta Wacana Christian University and Wikimedia Indonesia. Do you agree to continue?");
		if (r == true) {
		  txt = 1;
		} else {
		  txt = 0;
		} 
		
		if(txt==1){
			// Send the HTTPS URL because this will be accessed by PHP in the tool.
			showLoadingMsg( 'OCR in progress' );
			var imageUrl = $( '.prp-page-image img' ).attr('src');
			
			//build formdata
			$.ajax({
				url: imageUrl,
				xhrFields: {
					responseType: 'blob'
				}
			} ).done( function ( image ) {
				var formdata = new FormData();
				formdata.append('sourcefile', image);
				formdata.append('postId', postId);
	
				//ajax call upload
				$.ajax({
					url: toolUrl,
					type: "POST",
					data: formdata,
					//token header
					headers: { Authorization: 'Bearer ' + token },
					crossDomain: true,
					contentType: false,
					processData: false,
					timeout: 0,
					cache: false,
					dataType: "json",
				} ).done( function ( data ) {
					//TODO: update
					//$( '#wpTextbox1' ).val( JSON.stringify( data ) );
					var tempDiv = document.createElement("div");
					tempDiv.setAttribute("id", "outDivTrawaca");
				    tempDiv.innerHTML = data.htmloutput;
					$("body").append(tempDiv);
					$( '#wpTextbox1' ).val($( '#outDivTrawaca' ).html());
					$( '#outDivTrawaca' ).remove();
				} ).fail( function ( e ) {
					mw.notify( 'Error: ' + JSON.stringify(e) );
				} ).always( function () { showLoadingMsg( '' ); } );
			} );
		}
	}

	/**
	 * Show (or hide) a loading message. Pass false to remove the message altogether.
	 *
	 * @param {string} msg The message to show.
	 */
	function showLoadingMsg( msg ) {
		var msgBox, loadingGif,
			loadingId = 'TrawacaOcrLoading';

		// Always remove any existing message.
		$( '#' + loadingId ).remove();

		// Add the new message if required.
		if ( msg.length !== 0 ) {
			msgBox = $( "<p>" )
				.attr( "id", loadingId )
				.css( "background-color", "#efefef" ).css( "border", "1px solid #ccc" )
				.text( msg );
			loadingGif = $( "<img>" )
				.attr( "src", loadingGifUrl )
				.attr( "alt", "Animated loading indicator" )
				.css( "display", "inline-block" ).css( "margin", "0.3em" );
			msgBox.prepend( loadingGif );
			$( '#wpTextbox1' ).before( msgBox );
		}
	}

	run();
}( mediaWiki, jQuery ) );