Build Streamlit GUI to use Personal Recipe Assistant?: Python — JigsawStack #1

Introduction

In today’s tutorial, we’ll be building a Streamlit graphical user interface for a personal recipe assistant using JigsawStack. Before diving in, I want to emphasize that the purpose of my tutorials is not for you to code alongside me. Instead, I always upload the full code to my GitHub profile, which you can find linked in the description below.

JigsawStack is an SDK designed to streamline the integration of AI functionalities into various tech stacks. It offers a comprehensive suite of APIs that provide capabilities such as an advanced prompt engine, web scraping, image generation, vision OCR, TTS (text-to-speech), and STT (speech-to-text), among others.

What’s exciting about today’s tutorial is that we'll only have two dependencies in the requirements.txt file. We’ll only need streamlit and jigsawstack. In the Streamlit folder, we need to create a secrets.toml file and add two environment variables: JIGSAWSTACK_PRIVATE_API_KEY and JIGSAWSTACK_PUBLIC_API_KEY. These variables will enable us to use JigsawStack.

Project Overview

This is a multi-page Streamlit app, and you can find the structure laid out in the pages folder. The app consists of four pages:

1. The first page allows users to upload a photo and recognize ingredients from the uploaded photo.
2. The second page enables users to review the recognized ingredients.
3. The third page is for selecting cooking preferences.
4. The fourth page generates recipes based on the selected preferences.

We’ll go through the code page by page. The initial lines of code for all four pages are nearly identical. At the top of each file, we usually have the imports, then we set Streamlit’s page configuration, add a little custom CSS, retrieve JigsawStack API keys from the secrets.toml file (or use text inputs in the sidebar if they're not found), and initialize the JigsawStack client, although the third page does not require these operations as we'll see later.

Page-Specific Code

Page 1: Uploading a Photo

The first page focuses on uploading a photo to recognize ingredients. It utilizes a function to format the response time, which we will use later. We check if a VOCR (Vision Optical Character Recognition) response is stored in Streamlit's session state. If not, we provide an interface for the user to upload a photo. If a response does exist, we display a success message along with options to re-upload or proceed to the next page.

Here, we employ two JigsawStack APIs:

• The store.upload method to store the uploaded photo.
• The vision.vocr method to perform the OCR and vision analysis to recognize culinary ingredients from the uploaded image.

Each time the user uploads a photo, it will be named fridge.jpg and overwrite any existing file with that name in JigsawStack.

Page 2: Reviewing Recognized Ingredients

The second page allows users to review the recognized ingredients. Again, we check the session state for the VOCR response. If it’s not present, a warning message prompts users to return to the first page and upload a photo. If the response is available, we display recognized ingredients in a text area for user editing, alongside the uploaded photo for reference. Details about the recognized items can be accessed in a dialogue.

Page 3: Selecting Cooking Preferences

On the third page, we check if both the VOCR response and reviewed ingredients are stored. If they are, we display an interface featuring select or multi-select widgets for meal types, cooking times, cuisines, diets, allergies, and serving sizes. If either response isn't stored, a warning directs the user accordingly.

Page 4: Generating Recipes

The final page features several functions for interacting with the JigsawStack API to create, list, retrieve, delete, or run prompts to generate recipes. We run the prompt based on our ingredients and preferences. If required data is missing, we display appropriate notifications.

Running the App

You can run the Streamlit app using the command streamlit run <filename.py>. It can be viewed in your browser at localhost:8501.

Once launched, the application will prompt users to upload a photo. Your uploaded image will be processed to recognize ingredients, which users can then edit and refine. Users can further customize their recipe suggestions by selecting preferences, which will guide the recipe generation based on the ingredients and choices made.

Conclusion

The integration of POCR with JigsawStack’s capabilities proves to be a powerful tool in personal recipe assistance, showcasing how technology can enhance everyday cooking experiences. The application demonstrates a practical approach to utilizing AI in culinary practices.

Keywords

• Streamlit
• JigsawStack
• Recipe Assistant
• Optical Character Recognition (OCR)
• Multi-page Application
• API Integration
• Cooking Preferences
• Ingredients Recognition

FAQ

Q: What is JigsawStack?
A: JigsawStack is an SDK designed to integrate AI functionalities into various applications, providing capabilities such as web scraping, image generation, and OCR.

Q: What does VOCR stand for?
A: VOCR stands for Vision Optical Character Recognition, which combines image analysis and text recognition to identify items within images.

Q: Can I modify the recognized ingredients?
A: Yes, you can edit, add, or delete ingredients based on the OCR results from the uploaded photo.

Q: What dependencies are needed to run this application?
A: The application requires streamlit and jigsawstack as dependencies.

Q: How do I generate recipes using this application?
A: After uploading a photo and reviewing the ingredients, you can select your cooking preferences and generate recipes tailored to your ingredients and selections.