A custom add-on I wrote for image OCR in docs!

To try out Img to Docs, you can install it here!

This was a project I did during the summer after my senior year of high school. I had been taking some Coursera courses where I found myself taking pictures of presentation slides to use as notes, and I figured that it would be really convenient to have an OCR tool built into my google docs notes for quick note taking. I couldn’t find any add-on like this already available, so I decided to make it myself.

This project was written with HTML, CSS, JS, and Google Apps Script (which is like JS, but with extra tools for interacting with the google doc). The OCR engine being used is Tesseract JS.

I’ve published this add-on to the G-Suite Marketplace for free, so anyone can install and use it.

Code Snippets (full code available here):

JS:

Interfacing with Tesseract JS:

// Creating an object needed to use Tesseract
const worker = new Tesseract.createWorker({
	logger: m => progressUpdate(m),
});

(async () => {
    // Initialize the worker object
	await worker.load();
	await worker.loadLanguage($("#langsel").val());
	await worker.initialize($("#langsel").val());
	const {
		data: {
			text
		}
	} = await worker.recognize(file);
    // Send the output to a function to update it
	progressUpdate({
		status: 'done',
		data: text
	});
	await worker.terminate();
})();

Animating icon to show text recognition is done:

(The CSS icon classes shown below are from my FontAwesome kit)

// Replacing the "in progress" text and icon with "completed" ones
$("#drop-icon").removeClass('fa-spinner fa-pulse');
$("#drop-icon").addClass('fa-check');
$("#drop-text").html("Done!");
// Animating a shift from the "completed" status icon and info back to regular "on standby" ones
// (to show that it's ready for a new file to be uploaded)
setTimeout(function() {
    // phase out "in progress" view
	$("#drop-icon").animate({
		opacity: 0.4
	}, 500)
	$("#drop-text").animate({
		opacity: 0.4
	}, 500)
	$('#insert-text').prop('disabled', false);
    // phase in the "on standby" view
	setTimeout(function() {
		$("#drop-icon").removeClass('fa-check');
		$("#drop-icon").addClass("fa-cloud-upload-alt");
		$("#drop-icon").animate({
			opacity: 1
		}, 500);
		$("#drop-text").html("Drag files or click to upload");
		$("#drop-text").animate({
			opacity: 1
		}, 500);
		$("#progress").width("0%");
	}, 500);
}, 500);

CSS:

Animating the file dropper transitions:

.droppable {
	background: #1dadf5; /* blue color during "standby" */
	color: #fff;
	padding: 25px 0 8px;
	margin-left: 10px;
	margin-right: 10px;
	text-align: center;
	outline: 2px dashed #d8eff1; /* dashed outline */
	outline-offset: -10px;
    /* transition times */
	-webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
	transition: outline-offset .15s ease-in-out, background-color .15s linear;
}
/* css class for when files are hovering over the dropper */
.droppable.dragover {
    /* indicate to user that the dropper sees their files */
	background: #44D362; /* change color to green */
	outline: 3px dashed #d8eff1; /* make dashes wider */
	outline-offset: -20px; /* shift dashed outline inward */
}