Adding flask App

Flask_Contents/.gitignore

@@ -0,0 +1,8 @@
+.DS_Store
+
+/backend/pickle_files/
+/backend/data/
+
+/flask-app/.git/
+/flask-app/.gitignore
+/flask-app/static/uploads

Flask_Contents/README.md

@@ -0,0 +1,26 @@
+<img align="right" src="imgs/colgan-asl-logo.jpg" alt="colgan-asl-logo" width="150">
+
+<br />
+<br />
+<br />
+
+# ASL-T
+
+## Overview
+ASL-T is a data science project that would be used to help translate American Sign Language into the alphabet to make it easier to communicate. The input of this project would be an image and based on the input image, the output would be one of the twenty six letters or maybe nothing if the image is invalid(Doesn’t have a valid ASL sign.)  
+
+## Dataset
+As for the dataset that we will be using to train our model is taken from [Kaggle’s ASL dataset].
+
+[Kaggle’s ASL dataset]: https://www.kaggle.com/grassknoted/asl-alphabet?
+
+## Demo
+
+## Future Development
+
+## Contributors
+- [Michelle Lucero]
+- [Xuejin Gao]
+
+[Michelle Lucero]: https://github.com/MichelleLucero
+[Xuejin Gao]: https://github.com/xuejingao

Flask_Contents/flask-app/Procfile

@@ -0,0 +1 @@
+web: gunicorn app:app

Flask_Contents/flask-app/README.md

@@ -0,0 +1,48 @@
+# Building an Flask App
+
+## Agenda
+1. Review last weeks HW
+2. Flask live coding lecutre
+3. Break
+	* Wed class only, redo [Midpoint Self Assessment](https://forms.gle/WGKmmEFzyavfHFJ4A)
+4. Breakout Rooms
+
+#### [Flask Documentation](https://flask.palletsprojects.com/en/1.1.x/quickstart/)
+#### [Bootstrap Documentation](https://getbootstrap.com/docs/4.3/components/alerts/)
+[Bootstrap Themes](https://getbootstrap.com/docs/4.0/examples/)
+
+# Extra Credit:  Deploying your app to Heroku.
+Once you have a flask app running locally on your machine already, you can then try to make a live website that anyone can visit by depolying it to Heroku.  
+
+These instructions were adapted from [this tutorial blog](https://blog.cambridgespark.com/deploying-a-machine-learning-model-to-the-web-725688b851c7). 
+
+1. Sign up for a free Heroku account at https://signup.heroku.com/signup/dc
+2. You should all already have git installed, so you can skip this step. Make sure you have [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) installed.
+3. For Mac Users: [Install Homebrew](https://brew.sh/) if you dont have it already. (Window users can skip this step.)
+4. Install the [Heroku CLI tool](https://devcenter.heroku.com/articles/heroku-cli#download-and-install).  Mac users need homebrew to install Heroku, Window users dont need it to install Heroku. 
+
+___
+
+### STEP 1: Create a github repo with your webapp files.
+__(You should already have this step completed, but if you dont, you need to add your files to a github repo.)__ 
+1. Create a github repo for your app.
+2. Clone that repo to your local machine. 
+3. Git add, commit, and push the webapp files to your repo. 
+Now you should have a github repo that contains all the files you need for your web app, now we need to link, push, and deploy them onto heroku. Your github repo should look [something like this](https://github.com/zd123/zd-flask-app).
+
+___
+### STEP 2: Create and push files to Heroku.
+1. Make sure you have followed the instructions above for installing the Heroku CLI and git to your machine first. 
+2. From your github repo folder, in your terminal, type in `heroku login`.  Follow the login instructions. 
+3. Next create your app using `heroku create your-webapp-name`.  Replace 'your-webapp-name' with the app name you would like to use.  It will be a part of your final URL. 
+4. Then, add your git to heroku by using `heroku git:remote -a your-webapp-name`.  Again, replace 'your-webapp-name' with the name you used above to create your app. 
+5. Finally, push your files to heroku by using `git push heroku HEAD:master`
+After you push your files to heroku, it should spit out a link to your webapp, it will look something like, `https://web-app-name.herokuapp.com/`
+
+___
+### Making changes to your app. 
+Say you've updated your webapp files now want to update your hosted webapp. 
+1. Add, commit, and push all the changes to your github repo.
+2. Run the `git push heroku HEAD:master` command. 
+
+

Flask_Contents/flask-app/app.py

@@ -0,0 +1,165 @@
+import flask
+import os
+import pickle
+import numpy as np
+import pandas as pd
+import tensorflow
+
+import cv2
+from cv2 import cv2
+
+import skimage
+import skimage.io
+import skimage.transform
+
+import werkzeug.utils
+
+app = flask.Flask(__name__, template_folder='templates')
+
+
+# ASL File Paths
+path_to_asl_categories = 'models/CATEGORIES.pickle'
+path_to_asl_classifier = 'models/cnn1'
+
+# Saving to variables for usage
+try:
+    asl_cnn_classifier = tensorflow.keras.models.load_model(path_to_asl_classifier)
+except EOFError as e:
+    print(e)
+
+with open(path_to_asl_categories, 'rb') as f:
+    ASL_CATEGORIES = pickle.load(f)
+
+
+# For Uploading Images
+UPLOAD_FOLDER = 'static/uploads/'
+app.secret_key = "secret key" 
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024
+
+# ALLOWED_EXTENSIONS = set(['png', 'jpg', 'jpeg', 'gif'])
+ALLOWED_EXTENSIONS = set(['png', 'jpg', 'jpeg'])
+
+# Create Upload directory
+os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+
+def allowed_file(filename):
+	return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+
+@app.route('/', methods=['GET', 'POST'])
+def main():
+    if flask.request.method == 'GET':
+        # Just render the initial form, to get input
+        return(flask.render_template('main.html'))
+
+    if flask.request.method == 'POST':
+
+        if 'file' not in flask.request.files:
+            return flask.redirect(flask.request.url)
+
+        # print(dir(flask.request))
+        # Get file object from user input.
+        file = flask.request.files['file']
+
+        if file.filename == '':
+            return flask.redirect(flask.request.url)
+
+        if file and allowed_file(file.filename):
+            # Save the image to the backend static folder
+            filename = werkzeug.utils.secure_filename(file.filename)
+            path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+            file.save(path)
+
+            # Read image file
+            img = cv2.imread(path)
+
+            cv2.imwrite(path, cv2.resize(img, (300, 300)))
+            # Read image file string data
+            # filestr = file.read()
+
+            # Convert string data to np arr
+            # npimg = np.frombuffer(filestr, np.uint8)
+            # Convert np arr to image
+            # img = cv2.imdecode(npimg, cv2.IMREAD_COLOR)
+
+            # Resize the image to match the input the model will accept
+            img = cv2.resize(img, (64, 64))
+            # Reshape the image into shape (1, 64, 64, 3)
+            img = np.asarray([img])
+
+            # Get prediction of image from classifier
+            prediction = np.argmax(asl_cnn_classifier.predict(img), axis=-1)
+
+            # Get the value at index of CATEGORIES
+            prediction = ASL_CATEGORIES[prediction[0]]
+
+            return flask.render_template('main.html', 
+                prediction=prediction,
+                filename=filename)
+        else:
+            return flask.redirect(flask.request.url)
+
+        # if file:
+        #     # Read image file string data
+        #     filestr = file.read()
+
+        #     # Convert string data to np arr
+        #     npimg = np.frombuffer(filestr, np.uint8)
+        #     # Convert np arr to image
+        #     img = cv2.imdecode(npimg, cv2.IMREAD_COLOR)
+
+        #     # Resize the image to match the input the model will accept
+        #     img = cv2.resize(img, (64, 64))
+        #     # Reshape the image into shape (1, 64, 64, 3)
+        #     img = np.asarray([img])
+
+        #     # Get prediction of image from classifier
+        #     prediction = np.argmax(asl_cnn_classifier.predict(img), axis=-1)
+
+        #     # Get the value at index of CATEGORIES
+        #     prediction = ASL_CATEGORIES[prediction[0]]
+
+        #     return flask.render_template('main.html', 
+        #         prediction=prediction,
+        #         image=file)
+
+    return(flask.render_template('main.html'))
+
+
+@app.route('/input_values/', methods=['GET', 'POST'])
+def input_values():
+    if flask.request.method == 'GET':
+        # Just render the initial form, to get input
+        return(flask.render_template('input_values.html'))
+
+    if flask.request.method == 'POST':
+        # Get the input from the user.
+        var_one = flask.request.form['input_variable_one']
+        var_two = flask.request.form['another-input-variable']
+        var_three = flask.request.form['third-input-variable']
+
+        list_of_inputs = [var_one, var_two, var_three]
+
+        return(flask.render_template('input_values.html', 
+            returned_var_one=var_one,
+            returned_var_two=var_two,
+            returned_var_three=var_three,
+            returned_list=list_of_inputs))
+
+    return(flask.render_template('input_values.html'))
+
+
+@app.route('/about/')
+def about():
+    return flask.render_template('about.html')
+
+
+@app.route('/contributors/')
+def contributors():
+    return flask.render_template('contributors.html')
+
+
+
+if __name__ == '__main__':
+    app.run(debug=True)

Flask_Contents/flask-app/requirements.txt

@@ -0,0 +1,6 @@
+flask
+pandas
+gunicorn
+sklearn
+scikit-image
+tensorflow

Flask_Contents/flask-app/static/css/image.css

@@ -0,0 +1,51 @@
+img {
+  max-width: 100%;
+  max-height: 100%;
+  border-radius: 10px;
+}
+
+.portrait {
+  height: 80px;
+  width: 30px;
+}
+
+.landscape {
+  height: 30px;
+  width: 80px;
+}
+
+.square {
+  height: 75px;
+  width: 75px;
+}
+
+/* Profile imgs */
+.avatar {
+  vertical-align: middle;
+  height: 100px;
+  border-radius: 50%;
+}
+
+.visible,
+.hidden {
+  overflow: hidden;
+  /* This container should not have padding, borders, etc. */
+}
+.visible {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity 2s linear;
+}
+.hidden {
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0s 2s, opacity 2s linear;
+}
+.visible > div,
+.hidden > div {
+  /* Put any padding, border, min-height, etc. here. */
+}
+.hidden > div {
+  margin-top: -10000px;
+  transition: margin-top 0s 2s;
+}

Flask_Contents/flask-app/static/css/image_upload.css

@@ -0,0 +1,77 @@
+#image-upload .bg-secondary {
+    border: 2px dashed #fff;
+    background-color: rgba(255, 255, 255, 0.4) !important;
+    border-radius:16px;
+    position: relative;
+    z-index: 10;
+}
+
+#image-upload:hover .bg-secondary
+{
+    background-color: rgba(0, 0, 0, 0.4) !important;
+    z-index: 1000;
+}
+#image-upload:hover div.text-center {
+    -webkit-filter: brightness(40%);
+    filter: brightness(40%);
+    z-index: -1;
+}
+
+#image-upload h2 {
+    color: black;
+}
+
+#image-upload div.text-center {
+    position: absolute;
+    width: 100%;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 100;
+}
+
+.upload-btn {
+    display: block;
+    position: relative;
+    width: 300px;
+    margin: auto;
+    margin-bottom: 1rem;
+    cursor: pointer;
+    border: 0;
+    height: 60px;
+    border-radius: 5px;
+    outline: 0;
+    /* text-transform: uppercase; */
+    /* font-weight: 700; */
+}
+
+.upload-btn:after {
+    transition: 200ms all ease;
+    background: #fff;
+    text-align: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: block;
+    content: 'Choose File';
+    line-height: 60px;
+    border-radius: 5px;
+}
+
+#cloud_upload {
+    width: 100%;
+    max-width: 150px;
+}
+
+#image-upload h3.text-center {
+    margin-top: 6rem;
+    font-weight: 100;
+    color: #000;
+}
+#image-upload:hover h3.text-center {
+    margin-top: 6rem;
+    font-weight: 100;
+    color: #fff;
+}