Granny Bytes

Title
Welcome Page
Login Page
Recipe Selection Page
Cooking and Chatbot Page

Try Granny Bytes! (please be patient, it might take some time to load!)

Introduction

Granny Bytes is a project that explores inter-generational connections and how it can manifest within our interactions with technology.

Within this project we are researching the capabilities of AI and its potential relationship with both the elderly population and our (younger generation) interactions with them. AI is characterized by rapid advancement with each passing year, and can be considered one of the most groundbreaking technologies our modern world has welcomed.

On the other hand, with technology being such a new concept, there are many instances where the older generation are left behind in its wake, struggling to learn how to interact with the tools that power this current society.

And so, we wanted to create an interactive tool that reimagines the modernity of AI as a member of the pre-technology generation to foster a sense of familiarity and comfort for this population when interacting with an unfamiliar tool.

In addition, we were interested in seeing how this reimagination of “Grandma” via a technological reimagination could shift the kind of relationship that can be had between the younger and older generation.

We believe Granny Bytes is the method for bridging the gap between the two, and also creating a sort of permanence for the fleeting nature defining this relationship.

Concept

Within the relationship of grandmothers and the youth, food is a big factor of unification, and so we decided to use cooking as the focus for mirroring this relationship– seeing how AI and cooking can be a facet of our humanity.

Granny Bytes helps you answer any questions you have as you cook recipes passed down through different generations.The four recipes listed are recipes from our grandmothers.

At the end you can also send an image of your cooking to know how well you cooked it and things you can improve on.

Chat with Granny Bytes on your next cooking adventure.

How does Granny Bytes work

Our app simulates the experience of cooking with grandmothers, utilizing the AI capabilities of Gemini to imitate the grandmother's presence.

As of now, users are presented with 4 pre-written cultural recipes that have been passed down by each team members’ grandmothers.

When clicking on a recipe, users are greeted with an interactive recipe guide with a section hosting the ingredients and steps and a conversation space where the grandmother tells them the recipe steps one at a time and have them type in any questions they might have about it.

The chat is configured to have a caring and nurturing grandma tone. The grandmother respond to as many questions as the user has before proceeding to the next step.

At the end they can also upload an image of the cooked dish for grandma to see. The grandma gives feedback on how the dish can be made better.

How we built it

We are using google's gemini-pro and gemini-pro-vision model for the grandma chat and food image analysis respectively.

Steps:

We first used Figma to create the general visualization, interactions, and assets of our app.
Procreate was used to create certain assets like the animated grandma gif and the visuals for each step of each recipe.
HTML and CSS were used to translate the visuals to the front end.
JavaScript, Node.js, and Express.js, were used to build the web application's backend.

Further all the team members were able to collaborate on the code via Github functionalities.

Lastly, we used Render to deploy our app.

Inspiration

For the user experience, we were inspired by cozy 8-bit style games and MSN interfaces. We wanted the visuals to represent a seamless blend of old windows 2000 UI and the evolving cutting-edge AI technology.

All our assets have a pixelated characteristic to emulate this vision.

We also created "Mitty", our interface guide inspired by "Clippy" who has been around since 1996.

Challenges while building the web app

We came across quite a few challenges while making this project, but with some time and collaboration of thought, we were able to tackle each roadblock and come out with an accurate reflection of our vision.

To start, this was our first time using Github quite extensively in a collaborative setting. Navigating the process of pushing and pulling multiple branches and making sure there would be no conflicts when merging was a main challenge.

Then we went through the documentation of how to use google's AI models and did extensive prompt engineering to make sure the app had a voice of its own.

We were met by many challenges as we figured out each aspect of our project such as figuring out which data type we needed to use for the image analysis feature to work. We had to determine and test which data type would be able to translate the user uploaded image into code that can be rendered by the image analysis function, so that took some trial and error.

Also figuring out how to incorporate the prompt based conversation into a jquery terminal and then also dynamically updating prompts that go into the Gemini model based on the user’s selection of the recipe to be cooked. We learnt a lot in the process of making this project.

Accomplishments

Getting familiarised with using AI models to make web apps and collaborating on Github which we were all relatively new to at the beginning of the project.

Being able to implement a backend for our project using Node, especially being designers who typically have only really worked more on frontend projects that did not require servers.

All in all, we are happy with the amount of knowledge we gained through the progression of this project, and we also learned a lot about working in a group and getting through conflicts together.

What's next for Granny bytes?

In the future, we definitely want to add a feature where each person using Granny Bytes can upload their own family recipes and have any questions about making it answered by our AI grandma and even add more recipes from different cultures in order to have a more diverse selection of recipes for users to try out each others recipes.

We also plan on making the app more mobile friendly so that it can be accessed with more ease, since a lot of the time we only have our phones or just don’t want to lug around a laptop in the cooking space.