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.)