MealMash
- 3 Devlogs
- 15 Total hours
I am developing an app to generate recipes from leftovers and ingredients the user already has at home
I am developing an app to generate recipes from leftovers and ingredients the user already has at home
New Generator Page + LOTS of bugfixes!
As I finished work on the recipes and swiping portion of the app in the last few weeks, the next page I wanted to work on was the generation page. This page holds all the settings for generation to set before swiping. The generation page I had before was very simple and unfinished, with only a place to add ingredients… so i deleted it and started from scratch.
I started off by designing in figma and brainstorming what I wanted the page to have. I settled on 3 modes: Pantry, Select Ingredients, and Any Ingredients. For Pantry mode, the recipes are generated using all the ingredients the user has at home (will make a separate page to add ingredients to their pantry in the future). The second mode allows the user to choose specific ingredients that they want to use now in the recipe. The final mode, any ingredients, uses anything to make the best recipe! I also decided I wanted controls for difficulty, time, number of servings, cuisine and meal type (breakfast, lunch, dinner …).
Over the past week, I added all these controls with dropdowns and multi-select buttons that I created from scratch. When the user sets these settings, it modifies the input to the AI to make recipes to fit them.
Here’s a video showing off the new page!
Another update on my recipe generator app: bugfixes, figma and images!
I first took the time to look into a few bugs I was experiencing, like the images and recipe preview disappearing briefly after loading and reappearing. The preview cards would also glitch if the make recipe button was clicked while it was swiping off screen. These were both pretty quick fixes, and I decided to clean up some code after and remove some old functions.
The next feature I wanted to add was unique images, as at the time, every recipe used the same placeholder image. I thought of using an image generator as the user swipes, but I realised that would be far too expensive and slow. Instead, I used gemini on the web to generate 10 images of different meal categories (e.g. seafood, dessert, salad…) on the same plate and removed the backgrounds, and saved them to a folder in the project.
I then made the AI that was generating the recipe also choose a recipe image category from the available images. I then replaced the placeholder to display that image! In the future, I will definitely add more specific recipe categories (100+ categories) to make the images more accurate to the recipe. I also worked on some figma designs for other parts of the app!
Here’s a little preview so far of swiping with the new images:
Updating the generation system: unique recipes!
I have been working on a recipe generator app and am currently working on the generation feature. I made swipable recipe cards that give the basic details of each recipe, and people can either choose to follow it (gives a detailed view with instructions), save it or skip it. When they swipe this card away, a new recipe is on the next card! Since joining Stardance, I have been working on modifying and redesigning how the generation works.
My first step in this was actually generating unique recipes, as, with the same inputs, the AI usually generates near-identical recipes. I have been working on adding constraints randomly added to the prompt each swipe to yield unique recipes for the same inputted ingredients!
I have three categories of constraints that get added: meal type (late night snack, high protein…), texture (crunchy, creamy…), and methods (grill, char, bake…).
Here are some screenshots of the cards and some unique recipes that were inputted the same ingredients!!!
(btw the image of the meal is just a placeholder rn)