ECS 189H Assignment 5

Please submit by midnight, Thursday May 25, 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.

In this assignment we'll make an app in which the user uploads photos to a database. They can add and delete labels for the photos by hand. In Assignment 6, we'll get the Google Cloud Computer Vision API to automatically provide labels, and allow the user to filter photos based on the labels or just show their favorites.

Design documents and specs

Here's Dani's design, which includes both parts of the project; we will only implement the first part of it for this assignment. Here are the assets she has provided. You may put this directory wherever is convenient for you in your implementation, and hand it in along with everything else. Here is a detailed description of how the controls should work.

If you want to make your own design, you may submit similar documents, on Canvas, by midnight Friday May 19, along with a brief text file describing the behavior of each control. Dani says she is happy to provide feedback on designs, either before or after Friday; she is dnmacedo@ucdavis.edu. Your design should include all the functional features that this one does.

First part of implementation

In this first assignment, we will get images uploaded and displayed, and allow the user to add and delete labels and pick favorites, but we will not get the automatic labels (the cool part) or implement the filtering by labels or favorites. Of course, feel free to move on to that part if you want!

• See the lecture from 5/12 for uploading files. I would start with this example, and then display only the image that was just uploaded, just to get started. Notice that since the image is uploaded to /public, you can just use the image's URL on the server as its "src" property.
• Getting the image to display while it is uploading is, suprisingly, harder! Here's an example of showing an image loaded from a file dialog, and fading it out: fader.html, fader.js, fader.css
• Next, work on the browser code for adding labels and deleting labels. Send each label to the server as an AJAX request; see the lecture from 5/10. You can make up your own code for how to communicate from the browser to the server, using queries. For instance, maybe "delete label 'ice cream' from image 'picnicDay.jpg'" would produce the URL 138.68.25.50:????/change?img=picnicDay.jpg&label=ice%20cream&op=delete. Don't do anything on the server yet, except successfully parse the queries and respond the the HTTP requests.
• On the server, set up a database to contain the names of all the photos, their labels, and their "favorite" tags. We'll be using the Node SQLite3 module. The database should have just one table, with each row storing the name of an image file (text), a string containing its labels, separated by commas (text), and a flag indicating whether it is a favorite or not (integer, 0 or 1). The file name should be the primary key.
• Now get the data into the database; when the user uploads an image make a new row in the database, when the user adds a label add it to label string, and when the user deletes a label, take it out of the label string, and when they "favorite" or "unfavorite" an image, change the integer value for "favorite".
• Now let's go back to the app. When it comes up, it should immediately show all the images in the database, with the labels under each image. To get them, you'll have to make an AJAX query to the server, and have the server dump the whole database, and send the data down to the browser as a JSON string in the body of the response object.