ECS 162 Assignment 6

Please submit by 10pm, Wds June 6, using Canvas.
We will accept submissions by teams of at most three.
Everyone in the team should submit the same files, and will get the same grade.

We will finish up the PhotoQ project with this assignment. The interesting part of this app will be adding the tags from the Google Cloud Vision API, and using them to search the photo database. Hopefully we will see all the work we have put into the server will pay off!

There are four main steps to adding tags to our app.

1. Getting the tags, and putting them into the database, is similar to getting the sizes of the images; for every image we will send an HTTP message to the API, asking it to look at the picture, and it will send us back a JSON string containing the tags. We will get two kinds, "landmark" and "label". We'll need to store this information, for each photo, in the database. Sometimes the API provides dozens of tags; we will only keep the top six, always including the landmark tag, if one is provided. More details here.
2. Second, we'd like the user to be able to search the database by tags, rather than ID numbers. The user will provide one or more tags, and we would like to display photos which have those tags. There may be very few - or no! - photos with all of the tags given, or there may be many.

   (The following seems unnecessary, and can be skipped). We'll aim to return 12. If there are too many, we can show the first 12, and show a message telling the user how many more there are. If there are only a few, and there are multiple tags, we can include other photos which might be missing one of the tags, but has the others. If there are only a few photos, and only one tag, we can just return a few photos.

   Here is more detailed advice.
3. Third, we need to display the tags over a photo, when the photo is clicked. Take a look at the designs, where you see the overlay come up on the image and the tags pop up. Each tag has a "delete" x, which removes it from the picture and also from the database. There is also a special "add tag" tag at the bottom, allowing the user to provide a more descriptive tag. When added, it should change color and look like the other tags, and the new tag should be added to the database (for a total of seven). The user cannot add any new tags until they delete one of the old ones. Changing the database on the server in response to the user's instructions (adding and deleting tags) will require AJAX requests, in the onclick functions. Here are hints on displaying and interacting with the tags.
4. Finally, you see in the designs that we'd like to provide an autocomplete feature, so that as a user types into the query input box, possible tags completing what they were typing pop up. This will require another AJAX request, after the second character, to get a list of possible tag completions from the server. More details here.