According to this article on PubMed, an estimated 124 million children are Vitamin A deficient. Although a large part of this is due to a lack of accessibility of food to these children, many are simply lacking the knowledge they need to have in order to maintain an acceptable level of vitamins. YMY Vitamins aims to change that, by making it easy for anyone to track their vitamin usage with a snap of a picture and a few button clicks.

What it does

In tracking their vitamin usage with YMY, users must take a picture of the Nutrition Facts of the label of the item they have consumed. Once the app finishes processing the image, the user is prompted to enter the number of servings of the item they have consumed. Then, they are presented with the information taken from the image so that they are able to confirm it, or make changes if necessary. Finally, they are presented with a table, showing them the total percentages of the suggested daily value of each vitamin they have consumed. They then can restart the process in order to log additional items.

How I built it

YMY uses HTML and CSS for the basic webpage, and modifies it with JavaScript. The JavaScript code uses the Tesseract.js library to process the text in the image, and the Bootstrap library to better format the webpage for the user.

Challenges I ran into

I had trouble figuring out exactly how to store the information that the user presented, and then looping over the information at a later time. I eventually discovered the forEach method of the Map class, which made storing the user's input a lot easier. It provided a simple data structure that I could easily process later in the code.

Accomplishments that I'm proud of

I'm proud of figuring out exactly how to use the Tesseract.js library to properly accept a user image and then process the text contained in that image. It took me a while to figure out how to do it, but now I think I have a really well-made project because of it.

What I learned

I learned a lot about how to store information and accept information in HTML fields. Before this, I really didn't know much about accepting files from users, and making sure the accepted files matched certain specifications. I also learned a lot about storing information in JavaScript objects, which made it a lot easier for me to access specific vitamins and modify them based on user input. And in my opinion, the best thing I learned was how to use the HTML event handlers like element.onclick, which makes it a lot easier to accept user input dynamically.

What's next for YMY Vitamins

In the future, I'd like to implement a better image recognition system, that filters the input to check for reasonable input. For example, once in a while, Tesseract.js will misread a unit or a vitamin name, which would make it impossible for the system to recognize a specific vitamin in the item. I'd like to have the program try to correct these types of errors by checking for similarities between vitamin names/unit names with the stored information.

External information/libraries used

Share this project: