ECS 189H Assignment 6

Due midnight Tuesday 5/30. In this assignment we will use the Google Cloud Computer Vision API to add automatically-generated labels to uploaded photos.

First, get an API key for the Google Cloud Vision API, using these instructions.

Next, try out the call to the GCV API from the lecture on 5/26.

Recall that because of the Same Origin Policy, we need to access the GCV API from the server. So the sequence of operations (some of which you've already done) should be:
  1. User selects a file to upload, and hits the "upload" button.
  2. Button function on browsers puts together POST request and sends to server.
  3. Server gets POST request and directs file to public directory.
  4. At end of upload (in the "end" event handler), server puts together a PUT request to the GCV API, with a link to the photo and requesting "label Detection".
  5. Server gets response from API and runs callback function.
  6. In the callback ("APIcallback"), the server should add the new labels to the database, and also put the labels into the response to send back to the browser.
  7. Browser gets response, and displays the labels.
Other functions to implement for the final product:

The image in the design documents for the filter button is confusing and not so easy to implement (no submit button - this is possible, but a bit of a pain). Instead, you can have the following as the inactive state of the nav bar:

and when filter is clicked, the input box and a submit button appear. When filter is clicked again, the input box and submit button disappear. You can use the CSS display: none property to make things appear and disappear in the nav bar column, or you can add and subtract things from the DOM.