calorific

desktop title page
mobile title page
scan page
figma mockups / prototype

Inspiration

Many times, when you go to a restaurant or buy street food, there isn't a calorie indicator, and often times the ingredients aren't listed as well. Therefore! We have decided that it was a good idea to make a web-based calorie and ingredient detector app. So, when other people go to restaurants and see the menu without the calorie count, they will be able to pull out their phones and scan the food or image of the food to see all the details. :D :D :D :D

What it does

On the home page, you can choose to log in, where you will be redirected to a third party login service. Otherwise, there's a button that takes you directly to the scanning/upload photo page. If you like the picture you took, you can choose to process that image. If you don't like it, you can try again. After image processing, details are displayed, including calorie count and a simple ingredient list. In the future we could also probably make a user profile so the people can track their food!!! yippee

How we built it

Our team mainly worked on Visual Studio Code and Github for collaboration. We used Figma to design and fully prototype the web app, and then began to implement it with React and Next.js. On the back-end, our teammates used the open-source Llama3.2-vision LLM to identify the food and the calorie content. For a user-login system, we used clerk to allows third-party sign-ins.

Challenges we ran into

For the back-end, it was hard training a LLM locally since none of us had had prior experience with it. Regarding the design process, deciding on an aesthetic and mocking-up preliminary designs was the most difficult. Learning how to weave together web development and the new backend was also challenging.

Accomplishments that we're proud of

At roughly 5-6 am, the basic functions of the app works, and the design isn't bad either!

What we learned

Our teammates gained greater proficiency in prototyping through Figma, coding through tailwind css + next.js, designing an llm, and using the live collaboration feature on visual studio code. We also learned how to use new tools such as: clerk (login auth), ollama, and various web APIs.

What's next for calorific

Adding a user profile with a gallery of previous photos, perhaps a sharing feature with friends, and a loading bar that tracks when the llm will finish processing the image.