Image annotator with bounding box

Overview

I started to explore front-end and web development. As a simple outcome of my exploration, I deployed image annotator based on bounding boxes.
On this article, I’ll leave my studying, development and deployment memos until the product working.

Product

• Image Annotator

The one I developed and deployed is the image annotator with bounding box. You can give the input file which holds the image url list and bounding box’s labels. The image below is the sample of doing annoation.

For each images, you can choose the label and draw bounding boxes. If you want, you can add a note too.

Motivation

I’m a data scientist. Basically, I make a model, think about how to use that model and more frequently think about how to be able to avoid using model-based approach. Totally, I’m far from front-end and web-development.
Every year, as my personal trial, I try something new to me. This year, I chose front-end. So, by using my vacation, I studied front-end things and somehow reached deployment.

Path to deployment

Set the goal

I set several conditions as a goal.

• easy app
• simple design
• somehow deploy
• not stick to the latest technology

Even on the vacation, the time I could use was limited with some reason(haha, my first baby was born!!). And I wanted to reach the pause of something. So, by giving up being greedy, I set high priorty on simplicity and deployment.
This time, as a first trial, I chose image annotator with bounding boxes as a theme. That’s because sometimes I encounter the situation I need to do manual annotation on image and all the time just by diposable scripts, I had dealt with it. So, I decided to make this as front-end-oriented app.

Technology selection

I developed things with typescript + React.
I had almost no experience of javascript and other alt-js languages. I chose typescript for this development. It’s simply because I like the language with explicit types. About react, actually, I didn’t have big reason to choose. Just because I frequently heard the name.
For deployment, I used heroku. It is cheap and simple.

Study process

When I start something new, basically I use official document or academic paper. But this time, I tried video contents from Udemy. I used the following three courses.

1. The Web Developer Bootcamp
2. React - The Complete Guide (incl Hooks, React Router, Redux)
3. React - Learn React with Hooks by creating a Roguelike game

The first course is about web development. It was nice to grasp how front-end and back-end work although it seems bit redundant and I skipped many back-end lectures.
The second course is about React. I personally did this with typescript although the lectures are based on the vanilla javascript.
I used the third one just to check the another example of using React. But it was simple, short and fun.
Because the time is limited, sometimes I skipped the lectures. Even so, it was kinda fun to study based on video contents.

Development

Because this is the first app, I didn’t hesitate to compromise and the app is very simple. But even so, there are some points I felt difficult.
The difficulty I felt is as below.

1. design
2. CSS
3. assumption of user behavior

It was hard to expect what kind of behavior pattern users have. Also, even when I imagined the desing, CSS part for that is hard to write. So, in the end, the app became ultra simple. It is, I felt, necessary to take a time to study these three.
Anyway, although there are many problems such that duplicated methods are used and input validation is not enough and so on. Somehow it became something which looks working.

Deployment

I used heroku and 30 minutes were enough from registoring to connecting to git and deploy.

Impression after this

Totally, I felt two types of difficulties. One is about design and user bahavior analysis which I wrote before. Another is app management after deployment.
This time, the app is just for practice. But even so, I felt some difficulties when I think about the situation that I would develop something for monetizing. For example, this app is already on the web. Anybody can get access. But being different from usual blog service, it is hard to get certain evaluation from Google. (Of course, if the product has nice quality and satisfys some demand, the search rank would rise and more people would visit.)

Simple example of all_of from C++ algorithm library

Overview

This article shows the simple example of all_of from algorithm library on C++.

Simple example of transform from C++ algorithm library

Overview

This article shows simple example of the transform function from algorithm library of C++ and its syntax.

Face anonymizer with Python

Abstract

On this article, I’ll introduce how to anonymize human’s face and the code for that with Python.
Although I’m not 100% sure, when we compare with before, I think the face detection has been reaching certain level of accuracy. If the picture is not so complex, with some accuracy, the faces are detected. With this face detection, relatively easily, we can anonymize human’s face.

Scala like error handling with Python

Abstract

On this article, I’ll try to do Scala-like error and output handling with Python.
This is my personal memo.

sum function with divide and conquer algorithm

Overview

By divide and conquer algorithm, I’ll write sum function. This article is my personal memo about a book.

Functional Kotlin: Book review

These days I've been on the journey of studying Functional programming and as one of the books, read Functional Kotlin.

I'll leave the review of it.

Awesome keyboard: My best buying

I think there are many people who are on the journey of finding the best keyboard for themselves. I was on that. On this post, I’ll introduce my personal best buying of keyboard.


As a data scientist, I spend a lot of time in front of my PC. Although I'm not a work-environment geek, I more or less care about some points. One of those is Keyboard.

Kuzushiji-MNIST exploring

Overview

Kuzushiji-MNIST is MNIST like data set based on classical Japanese letters.
The following image is part of the data set. As you can see, this is composed of visually complex letters.



On this article, I’ll do simple introduction of Kuzushiji-MNIST and classification with Keras model.

Data Science with Functional Programming on Python

Data Science with Functional Programming

Overview

On this article, I’ll show some functional programming approach to data science with Python. With functional approach, some pre-processing can be concise. Especially when you are reluctant to use pandas library on some situation, this kind of approach can lead to code-readability.

How to write Dense block of DenseNets: understanding and coding with Keras

Abstract

This article covers basic understanding and coding of Dense block of DenseNets. DenseNets is one of the convolutional neural network models. If you have an experience of using fine-tuning or frequently tackle with image recognition tasks, probably you have heard that before.
DenseNets is composed of Dense blocks. It is expressed as the image below, which is quoted from https://arxiv.org/abs/1608.06993.

On the context of the history of convolutional neural network, ResNet helps the network to be deeper without degradation problem by the shortcut path to the output of the Residual module. DenseNets and Dense block is near concept from the different approach.

This article is to help to understand the basic concept of Dense block of DenseNets and how to write that. For coding, I’ll use Python and Keras.
About the ResNet and Residual module, please read the article below.

• How to write Residual module: understanding and coding with Keras

If you want to know the detail of DenseNets and Dense block, I recommend you read the article below.

• https://arxiv.org/abs/1608.06993

When you find a mistake, please let me know by comment or mail.

How to write Residual module: understanding and coding with Keras

Abstract

This article covers basic understanding and coding of Residual module. If you have experience of using fine tuning or frequently tackle with image recognition tasks, probably you have heard the network name, ResNet. ResNet is composed of Residual module, whose structure is expressed as below.

The image above is from https://arxiv.org/abs/1512.03385.
Basically, deeper neural network contributes to the better outcome. If you have enough computational resource(unfortunately, I don't have), for difficult task, you can approach it with really deep neural network. However, with deeper neural network, the problem of degradation comes, which makes it difficult to train the model. Residual module offers one of the solutions to this problem, meaning that with this, we can make deeper neural network by softening the difficulty of training.
For precise and better understanding, I recommend that you read the paper below. Here, I'll just show summary for simple and concise understanding and coding with Keras.

• https://arxiv.org/abs/1512.03385

If there are strange or wrong points, please let me know by comment or message.

An insight into AUC objective function from the viewpoint of evaluation

Abstract

This article is to think about the model which is with AUC objective function by some evaluation methods. Also, I can say this is to think about the AUC objective function from the viewpoint of evaluation as the title of the article shows.
On the article, AUC as an objective function: with Julia and Optim.jl package, I made a model with AUC objective function. The predicted score by that was distributed in really narrow area, because AUC objective function is based on the order without caring the distance from explained variable. With some evaluation norms, the model's score seems not nice.
 
About this point, just in case, I'll leave the simple experiment.

Julia: version 0.6.3