Pengguna:Mahastama/OCR.js
Catatan: Setelah disimpan, Anda mungkin perlu melewati tembolok peramban web untuk melihat perubahan.
- Firefox/Safari: Tekan dan tahan Shift sembari mengeklik Reload, atau tekan Ctrl-F5 atau Ctrl-R (⌘-R di Mac)
- Google Chrome: Tekan Ctrl-Shift-R (⌘-Shift-R di Mac)
- Internet Explorer / Edge: Tahan Ctrl sembari mengeklik Refresh, atau tekan Ctrl-F5
- Opera: Tekan Ctrl-F5.
/*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 ) );