[AI] Build a Object Recognition App with Python & Angular

Explore Python and FastAPI to build a robust backend for an AI object recognition app, highlighting real-time performance, type hints, automatic documentation, and scalable endpoints.

Learn how to install Python on macOS using three approaches: Homebrew, the official Python installer, and pyenv, then verify the Python 3 version in your terminal.

Installing and running FastAPI teaches you to set up a Python project, create a main.py with a get route, activate a virtual environment, run uvicorn, and view Swagger docs.

Build a complex get route in a FastAPI app to fetch items by id, implement a 404 not found error handling, and test it via swagger docs and browser.

Install uvicorn to run a fast, production-ready asynchronous server for Python apps built on ASGI, and start it with uvicorn main:app --reload.

Create a shared requirements.txt to install all python packages with a pip install -r requirements.txt, locking versions for consistent behavior across teams using FastAPI, TensorFlow, NumPy, OpenCV, and uvicorn.

Explore Angular as a powerful framework and TypeScript as its safety-enhancing partner to build organized, data-driven web apps with responsive UI and scalable screens.

Install node.js from nodejs.org, the open source cross-platform JavaScript runtime, and verify the installation by running node --version to ensure version 20 or higher.

Install the Angular CLI globally, verify the version, and create your first Angular app with ng new. Run ng serve to view it at localhost:4200.

Generate an image control component with the Angular CLI in the components folder and wire it into the app component, noting its selector, standalone status, and template and styling.

Master Angular conditional rendering for image presence, implement an image container with binding and alt text, and hook a file input and upload button to update predictions via observables.

Load a pre-trained mobilenet v2 coco model into the app by setting the environment for tensorflow, importing tf, loading the saved model, and exposing the serving default signature.

Create a run_inference function that prepares an image for a TensorFlow model, converts it to a tensor, runs detection, and returns bounding boxes, labels, and confidence scores.

Create a post route /predict in a fast api app to receive an uploaded image, convert it to rgb with cv2, run inference, and return a json response with detections.

Build a label map to assign IDs for predictions and display object names, using the Coco label map for the ssd mobile dataset, and import it via label_map.py.

Create an Angular service to manage HTTP requests and prediction flows from a fast API server, using BehaviorSubject and observables to track loading, errors, and results.

Implement an upload image function in an Angular service using HttpClient and FormData, returning a predictions array via an Observable and handling loading and client-side and server-side errors.

Import upload image service into the component and initialize observables for predictions, loading, and error in the constructor, binding them to the service for image control and predictions flow.

Resolve http client integration by configuring app.config and providing the http client from angular common http, enabling image input handling and uploads to run the app.

Implement an on file selector function in the image control component to handle file input, create an object URL with URL.createObjectURL, and trigger the on file selected event.

Create an upload image function with a void return that checks the selected file and calls the image upload service via RxJS, wiring the backend URL and keys.

Secure the API key by creating a keys folder with api keys.ts exporting a string, and import it into the app using the local server URL such as http://127.0.0.1:800.

Process image uploads by embedding the API key, sending to the backend /predict route, and subscribing to the image upload observable to handle next, error, and complete with console logs.

Test the results by re-uploading images after resolving cross-origin issues. Observe zebra and bus correctly identified, while a dog may look like a sheep, highlighting dataset limitations and ongoing learning.

Explore why object recognition models misclassify images due to image clarity, background noise, and kernel filtering, and learn to test with clearer images or switch to larger models like V3.

Explore real-world use cases of object recognition apps built with Python and Angular, from hazard detection and inventory management to accessibility and education, while examining lighting, privacy, and context limits.