Meal Finder

Introduction

With the shift to remote working, people face the challenge of determining what to have for dinner every day. Meal Finder is a web application that helps users discover restaurants and meals according to their cravings. By simply dragging and dropping an image into a designated area on the webpage, Web Finder shows them a carousel of meals from different restaurants.

How it is built

Fontend: VueJs, Node.js, HTML/SCSS, Javascript

Backend: Php, C++, mySQL

Inspired by Jina, Meal Finder converts a user specified image to a vector. Then, it saves the vector with the food name, restaurant name, and other meta data to a database. When a user searches with a food image, it returns a list of food records from the database according to the Euclidean distance between the vectors.

Image processing:

• Examine the center portion of the image.
• Convert RGB to HSL
• Divide hue range to 16 equal sections, count the number of pixels in each section, and fill the number of pixels in a vector.

Add image to database:

• Call image processing code and get the hue vector
• Insert food name, food type, restaurant name, restaurant url, and hue vector into a new row of the food table.

Search an image from the table:

• Call image processing code and get the hue vector
• Search with the hue vector according to the Euclidean Distance between hue vectors

Challenges I ran into

• Time was a major issue

Accomplishments that I'm proud of

I'm proud that I was able to create a complete web application with frontend, backend, and database. I am also glad that I made the image processing algorithm that converts images to vectors which can be used for searching.

What's next for Meal Finder

• Replace image processing algorithm with Jina
• Add more data to the database
• Display restaurant locations on a map
• Show restaurants based on user specified location
• Better UI

Built With

• c++
• mysql
• node.js
• php
• vuejs