Praison AI

SPA Architecture of Recipe Web App on Google Cloud

—

by

André Rocha

This diagram represents a Single Page Application (SPA) architecture of your recipe web app on Google Cloud, with a focus on security, advanced AI services, local user data storage, global reach through advanced networking, API management with Apigee, and user feedback collection with Google Forms: 1. The user accesses the app through a secure HTTPS connection with the Content Distribution Network (CDN) using the GET method. The traffic is filtered by the Web Application Firewall. 2. For static content, the CDN directly serves the content from the Cloud Storage, which hosts the web app repository and static content of the app, using the GET method. 3. For dynamic content, the CDN forwards the traffic to the Apigee API Gateway using the GET method. The Apigee API Gateway manages the APIs and routes the requests to the appropriate services. 4. The Apigee API Gateway distributes the requests to the Load Balancer on Google Cloud using the GET method. The Load Balancer uses HTTP headers to route traffic globally to the nearest backend. 5. The Load Balancer routes the requests to the appropriate services using both POST and GET methods. This includes the Ingredients Service for ingredient recognition (step 7), and the Recommendations Service for recipe generation (step 9). The Ingredients Service uses the Cloud Vision API and the Cloud Speech-to-Text API to identify the ingredients from photos or voice transcriptions using the POST method. The recognized ingredients are then sent back to the user’s device using the GET method. The Recommendations Service generates recipe recommendations using Cloud Functions, the BARD language model, BigQuery to query ingredient metadata, and Vertex AI for labeling data in the Cloud Storage, using the POST method. The recipe recommendations are then sent back to the user’s device using the GET method. 6. The Recommendations Service allows the user to down vote the recipe generated and retry to better outputs into the recommendation service. 7. The Preferences are stored locally on the user’s device using the POST method. 8. The user provides feedback through Google Forms, which is secured by reCAPTCHA and stored in Google Sheets. 9. The History is stored locally on the user’s device, the data can retrieve using the GET method. 10. The HTTPS traffic is secured using an HTTPS certificate for the ‘https://www.awesometeam5.io’ domain.