# Final Project

# Single Page Web App

Combining multiple APIs into a single interface.

Starting with the pixabay (or pexels, or shutterstock, or unsplash API) to search for a group of images. The user will fill out a form with search parameters and click a button to start the fetch. Those images will be displayed as cropped images in a responsive grid.

Pixabay lets you search by adding the following queryString values (image_type: photo), (orientation: horizontal), (category: people), (per_page: 30) plus a keyword for the search.

The fetched images should all be of people. Control this through the search parameters.

If the user clicks on one of the image results a <dialog> with the full-sized image should be shown, centered on the page.

The dialog that shows the large version of the image should also have a save button and a cancel button. The cancel button hides the dialog. The save button should save the image using the Cache API.

The top of the web page should have two buttons. Search and Saved. The Search button will show a <dialog> with the form for running the initial API search, which will then display the results. The Saved button will clear the main content area, read the contents of the saved images from the Cache and display them as a responsive grid, just like the search results - as cropped images with a standard size.

Clicking on a displayed saved image will show a <dialog> just like the search results do, except that this one only has a close button. It will show the full-sized version of the saved image.

This second <dialog> that displays the full-sized version of the image from the Cache will use the MediaPipe AI API to examine the image and do Face Detection on the image.

A message should be displayed if no faces are found.

If faces are found in the image then bounding boxes should be drawn around where the faces around, dots drawn where facial landmarks are found, and the percentage of confidence that each bounding box is highlighting a face.

# Submission

Due Date **Week 15** (See BS LMS for exact date) :::

No Deadline Extensions Available for the Final Project

Open BS LMS and go to the Activities > Assignments page.

Go to the Final Project assignment. Submit URL for private GitHub Repo.

Invite your instructor to your private repo.


Back to the Assignment List

Last Updated: 6/8/2023, 12:29:28 PM