I made a selfie filter that adjusts a photo with style transfer and poseNet. The filter is exaggerated and influenced by anime style, similar to filter apps like Meitu app.
This is a continuation of my final for Machine Learning for the Web. I added options for users to add their own text overlays inspired by typesetting used in Shoujo manga.
Typesetting in Manga
I’m interested in the relationship between text and images in comics. For this project, I used conventions used in Shoujo manga (Japanese comics aimed for young girl audiences) because it is so nostalgic for me. Although originally, the text would be Japanese and thus the typesetting would be based on the Japanese language, there is now standards for manga translations to English. These are used by fan translation groups as well as official US print releases. I found this reddit thread that has collected references to different fonts and typesetting conventions.
A good manga translation typesetting guide
I chose to focus on the white text bubbles and floating text that’s used for sound effects and asides.
Users can type what they want to be in text bubbles or sound effects in comma separated strings. Users click on the canvas to add text bubbles. The sound effects are placed randomly based on points of eyes from PoseNet.
I want users to be able to upload their own photos and download the result.
I’m interested in if animating the text would add anything.
Also, the webpage needs to be cleaned up and made to look nicer.
The final result I got was not exactly like the reference images. But I think the sketchy and scribbly elements fit the style of the artist’s work. I don’t fully understand the different types of paths and when they are called (part of opentype.js library), but it was interesting to explore this library.