Moody Foody

Moody Foody: The AI That Turns Your Mood Into Your Next Meal.

Comment

About the Project

About

We built Moody Foody, an interactive AI-powered meal recommendation app. It lets users enter details like their mood, preferred cuisine, available ingredients, type of meal, whether they want a healthy option, dietary restrictions, cost, and even choose between AI-generated or famous chef recipes. All this information is sent to our Python Flask back end, which constructs a custom prompt and queries the Ollama API (using the Llama3 model) to generate creative meal options. The AI's suggestions are then displayed back on the same page, giving users personalized and innovative meal ideas.

Inspiration

We were inspired by the idea that our emotions and preferences have a direct impact on our food choices. We wanted to create an interactive experience where users could simply express how they feel and what they’re in the mood for, and let AI craft personalized meal recommendations. This project blends technology, creativity, and culinary art into one fun, innovative application.

What We Learned

  • Full-Stack Development:
    We integrated a dynamic HTML/JavaScript front end with a Python Flask back end, learning how these components interact through APIs.
  • API Integration:
    We discovered how to work with external APIs (using Ollama) to generate creative responses based on user inputs.
  • Asynchronous Programming:
    Implementing AJAX calls using JavaScript fetch helped us understand asynchronous communication between client and server.
  • User Experience Design:
    We refined our skills in designing an intuitive user interface that guides users through the process of inputting data and receiving real-time responses.

How We Built the Project

  1. Planning:
    We began by outlining the key inputs (mood, cuisine, ingredients, meal type, healthiness, dietary restrictions, cost, and recipe style) and mapping out the user flow on a single-page interface.

  2. Front-End Development:
    We built a responsive HTML form to capture user data and used JavaScript to handle user interactions (like custom dropdowns and dynamic updates). The form data is sent via AJAX to the Python back end.

  3. Back-End Development:
    We set up a Flask server that receives the form data, constructs a meaningful prompt, and uses a helper function (via Ollama) to fetch AI-generated meal recommendations.

  4. Integration:
    The Flask endpoint returns the AI response as JSON, and JavaScript then appends this response to a dedicated section on the same page, creating an interactive history of meal suggestions.

Challenges Faced

  • API Response Handling:
    Integrating with the Ollama API and ensuring that responses are correctly parsed and handled was challenging at first.
  • Dynamic UI Updates:
    Managing asynchronous data updates without refreshing the page required careful handling of JavaScript promises and DOM manipulation.
  • Input Validation:
    Ensuring the app handled missing or incomplete data gracefully and provided useful feedback to the user was an important learning curve.
  • Debugging:
    Tracking down bugs that spanned both the front end and back end improved our debugging skills and taught us how to better structure our code for maintainability.

Overall, this project was a rewarding blend of creativity and technology that pushed us to learn new skills and rethink how everyday choices—like what to eat—can be enhanced by AI.

Built With

Share this project:

Updates