Homepage
Homepage 2
Generate
Generate Selected
Browse Recipes

Wonderbyte ☕

A cutting-edge platform where the art of culinary discovery meets the power of AI. Wonderbyte harnesses the capabilities of OpenAI's GPT-4 Vision API to transform images into recipes, creating a unique and personalized cooking experience.

Features

Wonderbyte is equipped with an array of features that leverage the power of AI to elevate the cooking experience for users around the globe:

Image-to-Recipe Generation: By harnessing advanced image recognition technology, Wonderbyte takes user-uploaded images of dishes and provides detailed recipes for them, enabling users to recreate and enjoy a vast array of culinary delights.
Smart Ingredient Recognition: Wonderbyte goes beyond dish recognition, analyzing images of raw ingredients to suggest a multitude of recipes, effectively helping users to utilize what's in their pantry and reducing food waste.
Intuitive User Interface Design: With a clear focus on user experience, Wonderbyte presents an intuitive and elegant interface that simplifies the process of navigating through the app, making the journey from image to recipe seamless and enjoyable for users of all ages and tech-savviness.
Comprehensive Recipe Gallery with Full-Text Search: Wonderbyte offers an extensive database of recipes that users can browse through. The full-text search capability enables users to find recipes based on any keyword, ingredient, or culinary term, providing a robust and user-friendly system for discovering new meal ideas and cooking inspirations.

These features collectively make Wonderbyte not just a tool but a culinary companion, ready to assist in the discovery and creation of new and exciting meals every day.

Inspiration

Cooking is difficult, especially for university students like us. The goal of Wonderbyte is to solve issues of malnutrition and bad diets by allowing users easy access to new recipes as well as uncover how some of their favourite dishes are cooked.

If you are a broke student who continuously spends all their money on takeout, you can simply take a picture of it and the site will generate a recipe as well as all the necessary ingredients for you. No more googling recipes and having to close pop up after pop up!

How we built it

AI-Powered Recipe Generation: Upload a food image and receive a custom recipe in seconds.
SvelteKit Integration: Enjoy a sleek, modern web experience built with SvelteKit for rapid development and smooth user interactions.
Express Backend: Robust backend services provided by Express, ensuring reliable API endpoints and server-side logic.
PostgreSQL Database: Secure and scalable storage for all recipes and user data with PostgreSQL.
GSAP Animations: Engaging and beautiful web animations powered by GSAP enhance the user interface.
DaisyUI Components: Utilize a vast collection of DaisyUI components for a consistent and responsive design.
TailwindCSS Styling: Customizable and low-level CSS framework TailwindCSS for crafting a unique design system.

Challenges we faced

Crafting a seamless and intuitive user interface stood as one of our main challenges. The UI is pivotal in facilitating user interaction with Wonderbyte, allowing for the effortless submission of food images and the reception of generated recipes. This required a thoughtful design approach to ensure that the interface was not only aesthetically pleasing but also functionally complex. It involved an iterative process with rigorous usability testing to achieve an optimal balance between simplicity and functionality.

Another significant hurdle was the integration of the vision API. Ensuring that this API worked seamlessly with Wonderbyte required a detailed understanding of its capabilities and limitations. We invested considerable effort in fine-tuning the integration, ensuring that the API’s processing and response times were optimized to meet our users' expectations for quick and reliable recipe suggestions.

These challenges were addressed with a focused dedication to quality and user satisfaction, resulting in a tool that stands to transform the culinary planning experience for our users. Through strategic design and technical proficiency, Wonderbyte is poised to become an essential asset for any culinary enthusiast's kitchen.

What we learned

This was our first time using OpenAI; integrating it with the backend proved to be a challenge, especially because we were also using image recognition rather than just text generation. Ultimately, we successfully completed the integration.

What's next for Wonderbyte

In the next phase of Wonderbyte, we're looking to implement a sophisticated recommendation engine. This feature will curate personalized recipe suggestions based on your previously submitted food images. It will learn your preferences over time, offering dishes that not only tantalize the taste buds but also align with your dietary habits and cooking skills.

Another exciting direction is the integration of a ‘smart shopping’ module. Wonderbyte will generate a shopping list from the recipe you choose, considering seasonal availability and current pantry stock, ensuring you have all you need for your next culinary adventure.

By enhancing Wonderbyte with these features, we aim to make it an indispensable kitchen companion that not only simplifies meal planning but also inspires creativity and passion for cooking. Join us on this delicious journey as we continue to innovate and elevate your cooking experience.