Description

Have you ever had troubles figuring out what you can cook with the stuff you have left in your refrigerator? Well, this app is the solution! Using the OpenAI API it allows you to upload an image of your ingredients and the AI will detect all ingredients and shows you a recipe of a dish you can cook with these foods. It will also display an AI generated image of your dish with the ingredients you have chosen! You can save and collect your favorite dishes so you can cook them again.

Features

• Personal Chatbot: You have your own AI kitchen partner that can answer your questions.
• Image analysis of your ingredients: Automatic detection of ingredients in an image.
• Recipe Generation: The AI will generate a recipe for you including instructions and a generated image.

Code Overview

• components: Small HTML components that are used in all pages such as the title and the navigation bar.
• js: All JavaScript files that match the respective page in the main folder. It also includes the util class for the API calls and a separate file to keep the OpenAI API key private.

Important Notes

• The OpenAI API requires an API Key which costs per-request. In the git repository, the api-key.js file with the export const apiKey is ignored, so it's not made public. In the release for the lecture "Mobile Computing", this API Key is added in order to function locally without a remote server. The pricing for the API is low, so the normal usage of the app for testing is not a problem. But I please ask you to not make this code public or share it so the API key stays private.
• The App was developed using the framework Tailwindcss instead of vanilla CSS, because it adds a lot of functionality that makes it easier and more performant.
• The VSCode extension "Live Server" does not work in this project as there is an open issue when fetching local .html files with JavaScript as it injects code and breaks the fetching. It has not been fixed yet from their side. Instead, the extension "Five Server" works and does a better job. This is what I used during development. Or use the "Live Preview" extension from Microsoft. For more details, see the issue on GitHub.

Author

This web app project was created 2024 by the Computer Science student Louis Wagner within the scope of the "Mobile Computing" lecture at the Karlsruhe Institute of Technology.