For CSSS Fall Hack 2020 we decided to create a chrome extension to animefy images in a webpage. Much of the work was done by @Yijunmaverick’s Cartoon Gan which generates 4 different style of images based on the input image.

To use the extension, simply right click on a page and click on Animefy and it will find all the image tags on the page and adds 5 different buttons to each image. These buttons either transfer the image to the desired style or revert the image to its original style.

Here is how it works in the background. When you click on the Animefy all the image objects are stored on a variable called images using dom’s getElementsByTagName method. We then find the parent element and add 5 different buttons.

var images = document.getElementsByTagName("img");
// For loop goes here 
    // When iterating through all images we add the following
    // objects to the parent of images[i]
    var button_0 = document.createElement("button");
    var button_1 = document.createElement("button");
    var button_2 = document.createElement("button");
    var button_3 = document.createElement("button");
    var button_4 = document.createElement("button");
    // Adding the buttons to the parent element
    images[i].parentElement.appendChild(button_0);
    images[i].parentElement.appendChild(button_1);
    images[i].parentElement.appendChild(button_2);
    images[i].parentElement.appendChild(button_3);
    images[i].parentElement.appendChild(button_4);

Each button converts the image to Base64 by calling the following function:

function imgToBase64(img) {
	var canvas = document.createElement("canvas");
	var ctx = canvas.getContext("2d");
	canvas.width = img.naturalWidth;
	canvas.height = img.naturalHeight;
	img.crossOrigin = "anonymous";
	ctx.drawImage(img, 0, 0);
	return canvas.toDataURL();
}

Once that’s done, the image is sent to the backend server to be processed using a REST POST request with the desired style. On the backend we are listening on the / endpoint for post requests, once it comes in, we convert the images to binary and then feed them to the GAN network to get the desired style. Once that’s done, we convert it back to Base64 format and send it back to the extension, where it replaces the current image with the recieved image. To speed up the process, we scale down the images to 480 on either axis if it greater than 480.

The backend code is available here: app.py

Here is the source code to our project: alhparsa/CSSS-Hackathon