76-Snacklit

Solving all your dietary problems

Comment

Inspiration

America is known to have one the fattest populations globally. When you think of American foods, you think of fries, hamburgers, chips, and more extremely unhealthy food items. Every day humans eat the same meals which lack diversity and can cause health problems in the future. Bananas, bread, and other foods get rotten or moldy extremely quickly. Eating rotten or expired food can lead to dietary problems. With the advent of new technologies like GPT and BLIP-2 increasing in popularity, we created a unique solution that would not only help America, but the entire world.

What it does

A website that allows humans to upload a food or food group and get important information like the physical characteristics of the food. Users have the freedom to post foods like chocolate and oranges to create multiple unique recipes like chocolate truffles. Access all your recipes and items you have created as they are saved in a database. In case you ever forget when your food expires, Snicklet saves expiration dates and the specific time the food will expire. The most amazing feature of the website is the access to amazing technology which does advanced image analysis on food. The artificial intelligence will recommend if the food is healthy to eat and the visuals of the food item.

How we built it

When we joined the hackathon we decided to use Flask, Replicate, BLIP-2, and GPT for the backend. We saw a research paper that provided a solution for two-way communication between the two amazing models. Since BLIP-2 has no proper documentation we used replicate which is an unofficial API for BLIP-2. VS Code Live Share was used for collaborative editing and allowed each person to have a local host.

The front end used Next-JS for the main framework. Next-JS provided simple documentation to understand and debug. We used fetch requests to retrieve responses from the Flask app. For the Google login page, we used next-auth which provided simple and safe authentication for the website. The database used for the website is PocketBase to upload files, handle files, and create fields, and accounts. Each account has access to its own images and recipes.

Challenges we ran into

Over the development of the website, we had countless problems. The first problem was using VS Code Liveshare. Many times the terminal glitched out and in Stack Overflow, there was no provided solution for the bug. The decision for which react component library was debatable because there are so many UI component libraries. Next-UI attracted us because of the gradients, shadow buttons, and complex animations. Next-UI was relatively easy to install and integrate into the website as the documentation provided tons of information and error cases. Overriding the CSS stylings in Next-UI is probably the most annoying feature of Next-JS. I hope in the future, Next-JS decides to continue production of the package and give more freedom to the developers to modify CSS stylings more simpler. Pocketbase used to error many times and gave auto-cancellation errors. We did not have any particular solution, but we used a workaround that worked relatively well. File handling took much less time than expected. Our team is amazed about the speed of Pocketbase because Pockethost hosts a new Pocketbase for free. In our opinion, the backend was the most difficult problem because the Flask app kept erroring about errors like 'CORS policy' or 'No Attributes'. The backend team decided to use Postman for the testing of the API and we had no troubles. BLIP-2 provided slow responses and there was no work-around for this situation.

Accomplishments that we're proud of

The team is happy that the UI/UX design looks flawless and responsive. React Canvas Confetti provided amusing UI effects which improved the user experience when opening the website. During the coding, we had no errors with Next-JS. The pages for the website look unique and have a similar approach to the website clickup.com. The front end took the most to complete but was completed in under twelve hours. The backend was written in under a hundred lines of code. We are proud to use new world-impacting tools like BLIP-2 and GPT-3. The tools are the main component of the website and are utilized to provide accurate responses in order to amaze the user.

What we learned

After finishing the application, we learned that Flask and Next-JS communication was much more difficult than expected. Using Google Docs to do planning worked well because there were many links we were accessing like Devpost links, documentation websites, and more. Always try to speed up response times or come up with a solution. We did not know that the communication between GPT-3 and BLIP-2 would take more than twenty seconds to execute. Never be too dependent on Chat-GPT. Chat-GPT cannot solve all your questions and sometimes it's better to search up the errors on Google rather than Chat-GPT. Many times, Chat-GPT provided horrible solutions to problems or copy and pasted the same exact code without any changes.

What's next for Snacklit

When Open AI decides to relate GPT-4 API to the public and enables image input, the website can use GPT-4 and become exponentially faster in the future. Snicklit has so many features, but the team wants to implement SMS in the future, so people are notified when their food has expired. We want to host the website using Vercel and improve the website and hopefully migrate to Expo in the future, so more users have access to the useful tool.

Built With

Share this project:

Updates