Sprint 1 Wiki - mas2g2/RJI-CS4320-Project GitHub Wiki

1. Deployment Environment LINK TO EC2

2. Technical Requirements

Use Case 1

The user can upload images to the site

The user can select what category these images are

Functional Requirement 1: Uploading Images

The system must be able to recognize .jpg images The system should be able to access these images for processing The images must be able have additional meta information tagged to them The system should return an error if the user tries to upload a non recognized file format The system should be able to take in multiple files per upload submission

Functional Requirement 2: Category Select

The site will display all of the categories the system can process The user must only be able to select 1 category for these images to be The default category will be other

Use Case 2

The user shall be able to download photos

Functional Requirement 1: View Photo Details

Photos are passed to the display as a JSON array Array contains file path, file name, technical rating, and aesthetic rating of each image The system will display the submitted images in a grid fashion on the photo gallery page after they have been rated by the neural net image assessment system Ratings are displayed as a small overlay on the images User can click on each photo to see all info on the photo in a list

Functional Requirement 2: Download Photos

On large batches, more photos are dynamically loaded as the user scrolls further down the page via ajax calls to the backend with javascript By clicking the download button of each photo, the user can download each photo individually The user also has the option to download all of the images at once via a select all checkbox They can specify which directory the files will be downloaded to as well

User Case 3

The user will be able to go through the images that meet the minimum specified rating after they have been submitted and rated before the user chooses which images will be downloaded.

Functional Requirement 1: Display images

After the user submits the photos, the system will show all of the photos that were submitted along with the rating that the system gave them

Functional Requirement 2: Set Minimum rating

The user will be able to specify a rating that each image must have, in an input text box that the system will use to compare with every image’s quality rating.

Functional Requirement 3: Remove/Hide images that did not achieve minimum rating

The system will compare the rating that each image received with the rating that was specified by the user and it will hide images that failed to achieve the minimum rating.

3.)

4.)

Use Case 1: Upload Images to Server

The user needs to submit an image into the system from the system homepage, since we are implementing our project as a web application we would need to use a form HTML element which will collect the image. This file is then submitted to the ‘/rating/’ route via POST method. The python flask backend verifies it has received a post request and reads the files submitted to the form, if any exist. The submitted photos are appended with a random integer at the end to avoid files with the same name and the photos are moved to specified storage on the server. Photo records are then saved to the database that take the filename and filepath inputs.

Use Case 2: Submit Images to Rating System

These .jpg photos are then submitted to the neural network image assessment system. The rating system outputs a json array that contains the technical and aesthetic rating of each photo. These ratings are then added to the Photo records in the database and a JSON array that contains the file path, filename, and ratings of each file is passed to the ‘/photoGallery/’ template. For this task, the system will require: HTML, Python, MySQL, an image, a web server.

Use Case 3: Download Images

The photo gallery template will dynamically load the images that are passed to it from the json object created on the backend after receiving the photo ratings. In the case of a large number of files being submitted, batches of files are loaded to the page via AJAX. The photos are displayed in a grid fashion. From here, the user will be be able to download images. A user can click an image to view more details about it or click each photo’s download button to download individually. The user also has the option to select all the photos to download via a checkbox. For this task the system will require: JavaScript, HTML, Python, an image, and a web server

Use Case 4: Filtering Images

The user will be able to filter the images based on their ratings. The user can sort by aesthetic and technical ratings in descending and ascending order. Additionally, the user can filter the displayed results by selecting an image rating range 1-10 on both measures. For this task the system will require HTML and JavaScript.

Flask is used to handle backend functionality for our web application. This includes database connectivity, form processing, running the image assessment, web access, routing and the dynamic loading of web pages. File structure is has split html files into a templates directory. JavaScript and CSS has been organized in a static items directory.

DDL

mySQL Schema

Files that are stubbed out in your repository, with comments about the use cases they are connected to.

User Interface Files

1. Home View
2. Login View
3. Photo Gallery View
4. Styling and JS Files

Model Files (Database Access)

1. Database Access File

Controller Files (API or other)

1. Routing and Back-end Controller File

Describe languages you need to use, and any gaps in skills on your team.

HTML, JavaScript, CSS, mySQL, Python

1. HTML
   • used to display content on pages
   • saved as templates for flask
   • w3schools is our guide
   • everyone is familiar with this language
   • https://www.w3schools.com/html/
2. JavaScript
   • used to make pages interactive
   • ex.) slideshows, buttons, hamburger menu, etc.
   • w3schools is our guide
   • everyone is familiar with this language
   • saved in flask as in the static items folder
   • https://www.w3schools.com/js/
3. CSS
   • used to stylize content on all of our pages
   • saved in flask as in the static items folder
   • w3schools is our guide
   • everyone is familiar with this language
   • https://www.w3schools.com/css/
4. Python
   • used for our back-end services and to run image assessment
   • w3schools and flask.com are our guides
   • only two members of our team are comfortable with flask and python
   • https://www.w3schools.com/python/
   • http://flask.pocoo.org/
5. mySql
   • used to store user and photo information
   • used for login and photo submissions
   • w3schools is our guide
   • everyone on the team is comfortable with this language
   • https://www.w3schools.com/sql/