├── .dockerignore
├── .gcloudignore
├── .gitignore
├── .slugignore
├── CODE_OF_CONDUCT.md
├── Dockerfile
├── LICENSE
├── README.md
├── assets
    ├── demo.gif
    ├── image_0.png
    ├── image_1.png
    └── image_2.png
├── docs
    ├── 1_training.md
    ├── 2_b_gcloud.md
    └── 2_heroku_app.md
├── models
    └── README.md
├── notebooks
    └── 1_train.ipynb
├── requirements.txt
└── src
    ├── app.py
    ├── config.yaml
    └── static
        ├── css
            └── custom.css
        ├── index.html
        └── js
            └── main.jsx


/.dockerignore:
--------------------------------------------------------------------------------
 1 | data/
 2 | #models/
 3 | #!models/classes.txt
 4 | #!models/final.pth
 5 | #!models/model.pkl
 6 | .git
 7 | .idea
 8 | Dockerfile
 9 | README.md
10 | notebooks
11 | docs
12 | 


--------------------------------------------------------------------------------
/.gcloudignore:
--------------------------------------------------------------------------------
1 | data/*
2 | !data/.gitkeep 
3 | **/.ipynb_checkpoints/
4 | docs/
5 | README.md
6 | .idea


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | data/*
2 | !data/.gitkeep 
3 | **/.ipynb_checkpoints/
4 | models/
5 | !models/classes.txt
6 | !models/final.pth
7 | !models/model.pkl
8 | .idea
9 | 


--------------------------------------------------------------------------------
/.slugignore:
--------------------------------------------------------------------------------
1 | # Heres a comment
2 | *.psd
3 | *.pdf
4 | /test
5 | /spec
6 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Contributor Covenant Code of Conduct
 2 | 
 3 | ## Our Pledge
 4 | 
 5 | In the interest of fostering an open and welcoming environment, we as
 6 | contributors and maintainers pledge to making participation in our project and
 7 | our community a harassment-free experience for everyone, regardless of age, body
 8 | size, disability, ethnicity, sex characteristics, gender identity and expression,
 9 | level of experience, education, socio-economic status, nationality, personal
10 | appearance, race, religion, or sexual identity and orientation.
11 | 
12 | ## Our Standards
13 | 
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 | 
17 | * Using welcoming and inclusive language
18 | * Being respectful of differing viewpoints and experiences
19 | * Gracefully accepting constructive criticism
20 | * Focusing on what is best for the community
21 | * Showing empathy towards other community members
22 | 
23 | Examples of unacceptable behavior by participants include:
24 | 
25 | * The use of sexualized language or imagery and unwelcome sexual attention or
26 |  advances
27 | * Trolling, insulting/derogatory comments, and personal or political attacks
28 | * Public or private harassment
29 | * Publishing others' private information, such as a physical or electronic
30 |  address, without explicit permission
31 | * Other conduct which could reasonably be considered inappropriate in a
32 |  professional setting
33 | 
34 | ## Our Responsibilities
35 | 
36 | Project maintainers are responsible for clarifying the standards of acceptable
37 | behavior and are expected to take appropriate and fair corrective action in
38 | response to any instances of unacceptable behavior.
39 | 
40 | Project maintainers have the right and responsibility to remove, edit, or
41 | reject comments, commits, code, wiki edits, issues, and other contributions
42 | that are not aligned to this Code of Conduct, or to ban temporarily or
43 | permanently any contributor for other behaviors that they deem inappropriate,
44 | threatening, offensive, or harmful.
45 | 
46 | ## Scope
47 | 
48 | This Code of Conduct applies both within project spaces and in public spaces
49 | when an individual is representing the project or its community. Examples of
50 | representing a project or community include using an official project e-mail
51 | address, posting via an official social media account, or acting as an appointed
52 | representative at an online or offline event. Representation of a project may be
53 | further defined and clarified by project maintainers.
54 | 
55 | ## Enforcement
56 | 
57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
58 | reported by contacting the project team at npatta01@gmail.com. All
59 | complaints will be reviewed and investigated and will result in a response that
60 | is deemed necessary and appropriate to the circumstances. The project team is
61 | obligated to maintain confidentiality with regard to the reporter of an incident.
62 | Further details of specific enforcement policies may be posted separately.
63 | 
64 | Project maintainers who do not follow or enforce the Code of Conduct in good
65 | faith may face temporary or permanent repercussions as determined by other
66 | members of the project's leadership.
67 | 
68 | ## Attribution
69 | 
70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
72 | 
73 | [homepage]: https://www.contributor-covenant.org
74 | 
75 | For answers to common questions about this code of conduct, see
76 | https://www.contributor-covenant.org/faq
77 | 


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | FROM python:3.6-slim-stretch
 2 | 
 3 | RUN apt update && \
 4 |     apt install -y python3-dev gcc
 5 | 
 6 | WORKDIR app 
 7 | # Install pytorch and fastai
 8 | #RUN pip install torch_nightly -f https://download.pytorch.org/whl/nightly/cpu/torch_nightly.html
 9 | 
10 | ADD requirements.txt .
11 | RUN pip install -r requirements.txt
12 | #pip install --no-cache-dir -r
13 | ADD models models
14 | ADD src src
15 | 
16 | # Run it once to trigger resnet download
17 | RUN python src/app.py prepare
18 | 
19 | #EXPOSE 5000
20 | 
21 | # Start the server
22 | CMD ["python", "src/app.py", "serve"]


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Nidhin Pattaniyil
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Training the Image Classifier & Creating a Web App
 2 | ## Our example:  Food Images Classifier
 3 | 
 4 | ## Citation Note
 5 | If you do use our blog or GitHub repos to create your own web or mobile app, we would appreciate it if you would give our work attribution by sharing the below citation:  
 6 | >Pattaniyil, Nidhin and Shaikh, Reshama, [Deploying Deep Learning Models On Web And Mobile](https://reshamas.github.io/deploying-deep-learning-models-on-web-and-mobile/), 2019
 7 | 
 8 | 
 9 | This project was completed jointly by [Nidhin Pattaniyil](https://www.linkedin.com/in/nidhinpattaniyil/) and [Reshama Shaikh](https://reshamas.github.io).
10 | 
11 | The following were used for model **training** (see [requirements.txt](requirements.txt)):    
12 | - fastai:  version 1.0.42
13 | - PyTorch:  version  1.0.0
14 | - Python:  version 3.6
15 | 
16 | The following were used for model **deployment**:    
17 | - Heroku
18 | - Flask:  version 1.0
19 |  
20 | 
21 | ## Table of Contents
22 | 1.  [Training the Model](docs/1_training.md) using fastai:  [food classifier notebook](https://github.com/npatta01/food-classifier/blob/master/notebooks/1_train.ipynb)
23 | 2.  [Deploying the App on Heroku](docs/2_heroku_app.md):  our web app is [**food-img-classifier.herokuapp.com**](https://food-img-classifier.herokuapp.com)
24 | 3.  Deploying a Mobile App, see this repo:  [npatta01/mobile-deep-learning-classifier](https://github.com/npatta01/mobile-deep-learning-classifier)
25 | 
26 | 
27 | ## Demo
28 | 
29 | ![Demo](assets/demo.gif)
30 | 
31 | 
32 |  
33 | 
34 | 
35 |  
36 | 
37 |  
38 |  
39 |  
40 | 
41 | 


--------------------------------------------------------------------------------
/assets/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/npatta01/web-deep-learning-classifier/452520dc52c61c7b8fb52aead6d91b2ba3b6b9de/assets/demo.gif


--------------------------------------------------------------------------------
/assets/image_0.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/npatta01/web-deep-learning-classifier/452520dc52c61c7b8fb52aead6d91b2ba3b6b9de/assets/image_0.png


--------------------------------------------------------------------------------
/assets/image_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/npatta01/web-deep-learning-classifier/452520dc52c61c7b8fb52aead6d91b2ba3b6b9de/assets/image_1.png


--------------------------------------------------------------------------------
/assets/image_2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/npatta01/web-deep-learning-classifier/452520dc52c61c7b8fb52aead6d91b2ba3b6b9de/assets/image_2.png


--------------------------------------------------------------------------------
/docs/1_training.md:
--------------------------------------------------------------------------------
  1 | # Training the Model
  2 | 
  3 | 1.  Deep learning library
  4 | 2.  Setting up GPU
  5 | 3.  Getting the data
  6 | 4.  Training the model 
  7 | 
  8 | ## Deep learning library:  fastai
  9 | The [fastai](https://github.com/fastai/fastai) deep learning library, version 1.0 was utilized.  Fastai runs on top of PyTorch.   The [fastai MOOC](https://docs.fast.ai) was officially released to the public in early 2019.
 10 | 
 11 | ## GPU:  Google Cloud Compute
 12 | The data was retrieved and analyzed on Google Cloud Platform[(GCP)](console.cloud.google.com/compute/instances).  Any cloud platform (such as Paperspace or AWS) is usable, as long as a GPU is available.  Instructions for setting up a GPU working environment will be available from fastai.  
 13 | 
 14 | For this project, we used the Nvidia Tesla P100 with 100 GB of storage.  
 15 | 
 16 | ## Dataset:  Food-101
 17 | The [Food-101](https://www.vision.ee.ethz.ch/datasets_extra/food-101/) data was used which included **101 food categories** with a total of 101K images.  Thus, each class had 1000 images, of which 250 are manually reviewed test images and 750 are training images:    
 18 | >On purpose, the training images were not cleaned, and thus still contain some amount of noise. This comes mostly in the form of intense colors and sometimes wrong labels. All images were rescaled to have a maximum side length of 512 pixels.
 19 | 
 20 | #### Data Citation
 21 | Bossard, Lukas and Guillaumin, Matthieu and Van Gool, Luc, Food-101 -- Mining Discriminative Components with Random Forests, European Conference on Computer Vision, 2014
 22 | 
 23 | 
 24 | #### Retrieving the data
 25 | The dataset size is 5GB and can be retrieved using:  
 26 | ```bash
 27 | wget http://data.vision.ee.ethz.ch/cvl/food-101.tar.gz
 28 | ```
 29 | 
 30 | #### Unzip data
 31 | The `tar.gz` file can be opened using:  
 32 | ```bash
 33 | tar xzf file.tar.gz
 34 | ```
 35 | 
 36 | ## Training the data:  Resnet-34 CNN
 37 | 
 38 | ### Training Time
 39 | We used the Resnet-34 CNN architecture.  The model took about an hour to run on GCP. 
 40 | 
 41 | ### Training the Deep Learning Model
 42 | The code used for training the data is available in the repository [npatta01/web-deep-learning-classifier](https://github.com/npatta01/web-deep-learning-classifier) in the notebook [1_train.ipynb](https://github.com/npatta01/web-deep-learning-classifier/blob/master/notebooks/1_train_large.ipynb)  
 43 | 
 44 | We use `ImageDataBunch` to read in the images.  This Python class does the following:
 45 | - specifies the path where the images are located
 46 | - assigns training/validation ratio to 80/20
 47 | - uses the default transformation of images
 48 | - sets the image size to 224
 49 | - sets batch size to 64
 50 | - normalizes the images
 51 | 
 52 | ```python
 53 | path = Path('../data/food-101/images')
 54 | data = ImageDataBunch.from_folder(path, valid_pct=0.2,
 55 |         ds_tfms=get_transforms(), size=224, num_workers=8, bs=64).normalize(imagenet_stats)
 56 | ```
 57 | 
 58 | The data is trained on a pre-trained model, resnet34, and we run the `learner` to determine the optimal learning rate. 
 59 | ```python
 60 | learn = create_cnn(data, models.resnet34, metrics=error_rate,pretrained=True)
 61 | learn.lr_find()
 62 | learn.recorder.plot()
 63 | ```
 64 | In our case, a learning rate of 0.01 works well
 65 | ```python
 66 | lr = 1e-2
 67 | ```
 68 | Next, we fit 8 epochs using our learning rate of 0.01, and we observe our error rate drop to 28.9%.  We did run more complex architectures.  However, because the data had 101 classes and for the purpose of this example and article, and GPU time and storage, we used a simple architecture of `resnet34`. 
 69 | 
 70 | ```bash
 71 | epoch	train_loss	valid_loss	error_rate
 72 | 1	1.999872	1.817976	0.470594
 73 | 2	2.006050	1.872519	0.483911
 74 | 3	1.893473	1.697205	0.441634
 75 | 4	1.778546	1.497193	0.388960
 76 | 5	1.572615	1.307390	0.342030
 77 | 6	1.475655	1.188818	0.310990
 78 | 7	1.294712	1.108866	0.293218
 79 | 8	1.248308	1.094019	0.288564
 80 | ```
 81 | 
 82 | #### Unfreezing the layers
 83 | Next, we unfreezed some of the last layers and looked for a new learning rate. 
 84 | ```python
 85 | learn.unfreeze()
 86 | learn.lr_find(start_lr=1e-09, end_lr=1e-3)
 87 | learn.recorder.plot(skip_end=10)
 88 | ```
 89 | 
 90 | #### More training
 91 | We trained the data for 5 more epochs, which reduced our error rate from 28.9% to 28.1%.
 92 | 
 93 | ```python
 94 | learn.fit_one_cycle(5, max_lr=slice(1e-8,1e-4))
 95 | ```
 96 | ```bash
 97 | epoch	train_loss	valid_loss	error_rate
 98 | 1	1.253053	1.089987	0.286584
 99 | 2	1.215632	1.080179	0.284901
100 | 3	1.177106	1.072547	0.282871
101 | 4	1.183173	1.069058	0.282376
102 | 5	1.180598	1.069759	0.281436
103 | ```
104 | 
105 | #### Confusion matrix
106 | The confusion matrix revealed that the following foods were most commonly misclassified.
107 | ```bash
108 | [('filet_mignon', 'steak', 26),
109 |  ('steak', 'filet_mignon', 26),
110 |  ('tuna_tartare', 'beef_tartare', 23),
111 |  ('chocolate_cake', 'chocolate_mousse', 21),
112 |  ('pork_chop', 'filet_mignon', 20),
113 |  ('pork_chop', 'grilled_salmon', 20),
114 |  ('chocolate_mousse', 'chocolate_cake', 19),
115 |  ('prime_rib', 'steak', 18),
116 |  ('ravioli', 'lasagna', 18),
117 |  ('breakfast_burrito', 'huevos_rancheros', 17),
118 |  ('beef_tartare', 'tuna_tartare', 16),
119 |  ('lobster_bisque', 'clam_chowder', 16),
120 |  ('steak', 'pork_chop', 16),
121 |  ('tiramisu', 'chocolate_mousse', 16),
122 |  ('chicken_quesadilla', 'breakfast_burrito', 15),
123 |  ('panna_cotta', 'chocolate_mousse', 15),
124 |  ('ramen', 'pho', 15),
125 |  ```
126 |  
127 | 
128 | ### Output from the Deep Learning Model
129 | The output of the deep learning model is a file with weights.  The file is called `model.pth` (or `final.pth`).  If you train the model as in this repo, the model is saved to the `models` folder.  
130 | 
131 | The `final.pth` file can be downloaded to your local computer from Jupyter.
132 | 
133 | The `model.pth` file may be too large to be included in the git commit.  There are various options for proceeding with that size dataset:  
134 | 1.  Store the model on google drive.
135 | 2.  Store the model on GitHub releases.
136 | 3.  Store the model on a bucket in the cloud.  
137 | 
138 | We stored our final model data file under the "releases" area of the repository:  https://github.com/npatta01/web-deep-learning-classifier/releases
139 | 
140 |  
141 | 


--------------------------------------------------------------------------------
/docs/2_b_gcloud.md:
--------------------------------------------------------------------------------
 1 | ```
 2 | 
 3 | GCP_PROJECT=....
 4 | APP_NAME=food
 5 | REGION="us-central1"
 6 | MEMORY=1G
 7 | gcloud builds submit --tag gcr.io/$GCP_PROJECT/$APP_NAME
 8 | 
 9 | 
10 | gcloud beta run deploy $APP_NAME --image gcr.io/$GCP_PROJECT/$APP_NAME --region $REGION --memory $MEMORY --allow-unauthenticated
11 | 
12 | ```
13 | 


--------------------------------------------------------------------------------
/docs/2_heroku_app.md:
--------------------------------------------------------------------------------
 1 | # Heroku Web App Deployment
 2 | 
 3 | [Heroku](https://www.heroku.com/) was utilized to deploy the web app.
 4 | 
 5 | ### Input to Heroku App
 6 | 
 7 | This output file, **`model.pth`** is the input to the Heroku app.  
 8 | 
 9 |  
10 | ### Test running the web app
11 | This [Docker image](https://github.com/npatta01/web-deep-learning-classifier/blob/master/Dockerfile) contains Python 3, Flask and fastai.
12 | ```
13 | docker build -t app .
14 | docker run -p 5000:5000 -it app 
15 | ```
16 | 
17 | ## Heroku Setup
18 | If you don't have a Heroku account, create one here: [www.heroku.com](https://www.heroku.com/).  Each line can be copied and submitted.  
19 | 
20 | Install the cli    
21 | Refer to [Heroku Docs](https://devcenter.heroku.com/articles/heroku-cli) for latests instructions
22 | 
23 | ```
24 | (mac,linux)
25 | curl https://cli-assets.heroku.com/install.sh | sh
26 | 
27 | (windows)
28 | https://cli-assets.heroku.com/heroku-x64.exe
29 | ```
30 | 
31 | ```
32 | heroku login
33 | heroku container:login
34 | 
35 | APP_NAME="food-img-classifier"
36 | heroku create $APP_NAME
37 | 
38 | heroku container:push web --app ${APP_NAME}
39 | 
40 | heroku container:release web --app ${APP_NAME}
41 | heroku open --app $APP_NAME
42 | heroku logs --tail --app ${APP_NAME}
43 | ```
44 | 
45 | Note:  After 15 minutes of inactivity, Heroku will suspend the app.  The next time the web app is called, Heroku will restart the app.  There could be a slight delay in starting the app.
46 |  
47 | ## Our Flask Web Application
48 | - Our Flask web app is available here:  [**food-img-classifier.herokuapp.com**](https://food-img-classifier.herokuapp.com)
49 | - Give it a try!  Upload an image or add a URL. 
50 | 
51 | 


--------------------------------------------------------------------------------
/models/README.md:
--------------------------------------------------------------------------------
 1 | # `models` folder
 2 | Make sure this folder contains these two files:
 3 | 1.  `classes.txt`
 4 | 2.  `model.pkl`
 5 | 
 6 | Our versions of these two files can be downloaded here from .       
 7 | 
 8 | **Releases**:     
 9 | https://github.com/npatta01/web-deep-learning-classifier/releases  
10 | 
11 | `wget https://github.com/npatta01/web-deep-learning-classifier/releases/download/v1.0.1/classes.txt`  
12 | `wget https://github.com/npatta01/web-deep-learning-classifier/releases/download/v1.0.1/model.pkl`
13 | 


--------------------------------------------------------------------------------
/requirements.txt:
--------------------------------------------------------------------------------
1 | torch==1.0.0
2 | torchvision==0.2.1
3 | Flask==1.0.2
4 | fastai==1.0.42
5 | 
6 | 


--------------------------------------------------------------------------------
/src/app.py:
--------------------------------------------------------------------------------
  1 | from fastai import *
  2 | from fastai.vision import *
  3 | import fastai
  4 | import yaml
  5 | import sys
  6 | from io import BytesIO
  7 | from typing import List, Dict, Union, ByteString, Any
  8 | import os
  9 | import flask
 10 | from flask import Flask
 11 | import requests
 12 | import torch
 13 | import json
 14 | 
 15 | with open("src/config.yaml", 'r') as stream:
 16 |     APP_CONFIG = yaml.full_load(stream)
 17 | 
 18 | app = Flask(__name__)
 19 | 
 20 | 
 21 | def load_model(path=".", model_name="model.pkl"):
 22 |     learn = load_learner(path, fname=model_name)
 23 |     return learn
 24 | 
 25 | 
 26 | def load_image_url(url: str) -> Image:
 27 |     response = requests.get(url)
 28 |     img = open_image(BytesIO(response.content))
 29 |     return img
 30 | 
 31 | 
 32 | def load_image_bytes(raw_bytes: ByteString) -> Image:
 33 |     img = open_image(BytesIO(raw_bytes))
 34 |     return img
 35 | 
 36 | 
 37 | def predict(img, n: int = 3) -> Dict[str, Union[str, List]]:
 38 |     pred_class, pred_idx, outputs = model.predict(img)
 39 |     pred_probs = outputs / sum(outputs)
 40 |     pred_probs = pred_probs.tolist()
 41 |     predictions = []
 42 |     for image_class, output, prob in zip(model.data.classes, outputs.tolist(), pred_probs):
 43 |         output = round(output, 1)
 44 |         prob = round(prob, 2)
 45 |         predictions.append(
 46 |             {"class": image_class.replace("_", " "), "output": output, "prob": prob}
 47 |         )
 48 | 
 49 |     predictions = sorted(predictions, key=lambda x: x["output"], reverse=True)
 50 |     predictions = predictions[0:n]
 51 |     return {"class": str(pred_class), "predictions": predictions}
 52 | 
 53 | 
 54 | @app.route('/api/classify', methods=['POST', 'GET'])
 55 | def upload_file():
 56 |     if flask.request.method == 'GET':
 57 |         url = flask.request.args.get("url")
 58 |         img = load_image_url(url)
 59 |     else:
 60 |         bytes = flask.request.files['file'].read()
 61 |         img = load_image_bytes(bytes)
 62 |     res = predict(img)
 63 |     return flask.jsonify(res)
 64 | 
 65 | 
 66 | @app.route('/api/classes', methods=['GET'])
 67 | def classes():
 68 |     classes = sorted(model.data.classes)
 69 |     return flask.jsonify(classes)
 70 | 
 71 | 
 72 | @app.route('/ping', methods=['GET'])
 73 | def ping():
 74 |     return "pong"
 75 | 
 76 | 
 77 | @app.route('/config')
 78 | def config():
 79 |     return flask.jsonify(APP_CONFIG)
 80 | 
 81 | 
 82 | @app.after_request
 83 | def add_header(response):
 84 |     response.headers["Cache-Control"] = "no-cache, no-store, must-revalidate, public, max-age=0"
 85 |     response.headers["Expires"] = 0
 86 |     response.headers["Pragma"] = "no-cache"
 87 | 
 88 |     response.cache_control.max_age = 0
 89 |     return response
 90 | 
 91 | 
 92 | @app.route('/<path:path>')
 93 | def static_file(path):
 94 |     if ".js" in path or ".css" in path:
 95 |         return app.send_static_file(path)
 96 |     else:
 97 |         return app.send_static_file('index.html')
 98 | 
 99 | 
100 | @app.route('/')
101 | def root():
102 |     return app.send_static_file('index.html')
103 | 
104 | 
105 | def before_request():
106 |     app.jinja_env.cache = {}
107 | 
108 | 
109 | model = load_model('models')
110 | 
111 | if __name__ == '__main__':
112 |     port = os.environ.get('PORT', 5000)
113 | 
114 |     if "prepare" not in sys.argv:
115 |         app.jinja_env.auto_reload = True
116 |         app.config['TEMPLATES_AUTO_RELOAD'] = True
117 |         app.run(debug=False, host='0.0.0.0', port=port)
118 |         # app.run(host='0.0.0.0', port=port)
119 | 


--------------------------------------------------------------------------------
/src/config.yaml:
--------------------------------------------------------------------------------
 1 | title: Food Images Classifier
 2 | description: Classify food images using deep learning
 3 | about:
 4 | 
 5 | 
 6 |   This is a Food Images Classifier using Deep Learning built on top of Pytorch.
 7 | 
 8 | 
 9 |   The project was build by [Nidhin Pattaniyil](https://npatta01.github.io)
10 |   and [Reshama Shaikh](https://reshamas.github.io).
11 | 
12 | 
13 |   More info and the source code can he found below.
14 | 
15 | 
16 |   - [Blog](https://reshamas.github.io/deploying-deep-learning-models-on-web-and-mobile/)    
17 | 
18 |   - [Web app](https://food-img-classifier.herokuapp.com)
19 | 
20 |   - [Video](https://www.youtube.com/watch?v=7d2qFLeYvRc)
21 | 
22 | 
23 |   To try out this mobile app
24 | 
25 |     - [Expo](https://expo.io/@npatta01/food-app)
26 | 
27 |     - [Android](https://play.google.com/store/apps/details?id=com.rsnp.foodclassifier)
28 | 
29 |     - [iOS](https://itunes.apple.com/us/app/food-classifier/id1445356461?ls=1&mt=8)
30 | 
31 | 
32 | 
33 |   Check out our Manning liveProject [Deploying Deep Learning Model on Web and Mobile Applications Using TensorFlow](https://www.manning.com/liveproject/deploying-a-deep-learning-model-on-web-and-mobile-applications-using-tensorflow?utm_source=dataumbrella&utm_medium=affiliate&utm_campaign=liveproject_pattaniyil_11_24_20&a_aid=dataumbrella&a_bid=d66c1909)
34 | 
35 | 
36 | 
37 | 
38 | code: https://github.com/npatta01/web-deep-learning-classifier
39 | 
40 | sampleImages:
41 |   - name: lasagne
42 |     url: https://upload.wikimedia.org/wikipedia/commons/b/ba/Lasagne_-_stonesoup.jpg
43 |   - name: sushi
44 |     url: https://upload.wikimedia.org/wikipedia/commons/6/60/Sushi_platter.jpg
45 |   - name: waffles
46 |     url: https://upload.wikimedia.org/wikipedia/commons/5/5b/Waffles_with_Strawberries.jpg
47 |   - name: eggplant (not in training data)
48 |     url: https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Solanum_melongena_24_08_2012_%281%29.JPG/1280px-Solanum_melongena_24_08_2012_%281%29.JPG
49 |   - name: table (not in training & not a food)
50 |     url: https://image.shutterstock.com/image-photo/brown-light-wooden-round-dining-260nw-588358070.jpg 
51 | 


--------------------------------------------------------------------------------
/src/static/css/custom.css:
--------------------------------------------------------------------------------
 1 | .img-preview {
 2 |     width: 256px;
 3 |     height: 256px;
 4 |     position: relative;
 5 |     border: 5px solid #F8F8F8;
 6 |     box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
 7 |     margin-top: 1em;
 8 |     margin-bottom: 1em;
 9 | }
10 | 
11 | 
12 | #upload_button input[type=file] {
13 |     display:none;
14 | }


--------------------------------------------------------------------------------
/src/static/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 7 |     <title>Image Classifier</title>
 8 | 
 9 | 
10 |     <!-- Required dependencies -->
11 |     <script type="text/javascript"
12 |             src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.1/prop-types.min.js"></script>
13 |     <script type="text/javascript"
14 |             src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.2/umd/react.production.min.js"></script>
15 |     <script type="text/javascript"
16 |             src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.2/umd/react-dom.production.min.js"></script>
17 |     <script type="application/javascript" src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
18 |     <script type="text/babel" data-presets="es2017, stage-3"
19 |             data-plugins="syntax-async-functions,transform-class-properties,transform-es2015-modules-umd, transform-async-to-generator"></script>
20 |     <!-- Optional dependencies -->
21 |     <script type="text/javascript"
22 |             src="https://cdnjs.cloudflare.com/ajax/libs/react-transition-group/2.2.1/react-transition-group.min.js"></script>
23 |     <script type="text/javascript"
24 |             src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
25 |     <script type="text/javascript"
26 |             src="https://cdnjs.cloudflare.com/ajax/libs/react-popper/0.10.4/umd/react-popper.min.js"></script>
27 |     <!-- Reactstrap -->
28 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/7.1.0/reactstrap.min.js"></script>
29 |     <script src=" https://cdnjs.cloudflare.com/ajax/libs/react-router/4.3.1/react-router.min.js"></script>
30 | 
31 | 
32 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/react-markdown/4.0.6/react-markdown.js"></script>
33 |     <script src="https://unpkg.com/react-router-dom@4.3.1/umd/react-router-dom.min.js"></script>
34 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
35 | 
36 |     <!-- Lastly, include your app's bundle -->
37 |     <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
38 |     <link type="text/css" rel="stylesheet" href="css/custom.css"/>
39 | 
40 | 
41 | </head>
42 | 
43 | <body>
44 | 
45 | <div id="root"></div>
46 | 
47 | 
48 | <script type="text/babel" src="js/main.jsx"></script>
49 | 
50 | </body>
51 | 
52 | </html>
53 | 
54 | 


--------------------------------------------------------------------------------
/src/static/js/main.jsx:
--------------------------------------------------------------------------------
  1 | //import { Button } from 'reactstrap';
  2 | //import React from 'react';
  3 | const Button = window.Reactstrap.Button;
  4 | 
  5 | 
  6 | const Collapse = window.Reactstrap.Collapse;
  7 | const Navbar = window.Reactstrap.Navbar;
  8 | const NavbarBrand = window.Reactstrap.NavbarBrand;
  9 | const Nav = window.Reactstrap.Nav;
 10 | const NavItem = window.Reactstrap.NavItem;
 11 | const NavLink = window.Reactstrap.NavLink;
 12 | 
 13 | 
 14 | const Router = window.ReactRouterDOM.BrowserRouter;
 15 | const Route = window.ReactRouterDOM.Route;
 16 | const ReactMarkdown = window.ReactMarkdown;
 17 | 
 18 | const Form = window.Reactstrap.Form;
 19 | const FormGroup = window.Reactstrap.FormGroup;
 20 | const Label = window.Reactstrap.Label;
 21 | const Input = window.Reactstrap.Input;
 22 | 
 23 | 
 24 | const UncontrolledDropdown = window.Reactstrap.UncontrolledDropdown;
 25 | const Dropdown = window.Reactstrap.Dropdown;
 26 | const DropdownToggle = window.Reactstrap.DropdownToggle;
 27 | const DropdownMenu = window.Reactstrap.DropdownMenu;
 28 | const DropdownItem = window.Reactstrap.DropdownItem;
 29 | const Spinner = window.Reactstrap.Spinner;
 30 | 
 31 | 
 32 | 
 33 | const axios = window.axios;
 34 | 
 35 | const Select = window.Select;
 36 | 
 37 | 
 38 | //import { Button } from 'reactstrap';
 39 | 
 40 | // Obtain the root 
 41 | const rootElement = document.getElementById('root');
 42 | 
 43 | 
 44 | class About extends React.Component {
 45 |     //
 46 | 
 47 | // Use the render function to return JSX component
 48 |     render() {
 49 |         return (
 50 | 
 51 |             <div>
 52 |                 <h1>About</h1>
 53 |                 <ReactMarkdown source={window.APP_CONFIG.about}/>
 54 |             </div>
 55 |         );
 56 |     }
 57 | }
 58 | 
 59 | 
 60 | // Create a ES6 class component
 61 | class MainPage extends React.Component {
 62 |     //
 63 | 
 64 |     constructor(props) {
 65 |         super(props);
 66 |         this.state = {
 67 |             file: null,
 68 |             predictions: [],
 69 |             imageSelected: false,
 70 |             url: null,
 71 |             isLoading: false,
 72 |             selectedOption: null,
 73 | 
 74 |         }
 75 |     }
 76 | 
 77 |     _onFileUpload = (event) => {
 78 |         this.setState({
 79 |             rawFile: event.target.files[0],
 80 |             file: URL.createObjectURL(event.target.files[0]),
 81 |             imageSelected: true
 82 |         })
 83 |     };
 84 | 
 85 |     _onUrlChange = (url) => {
 86 |         this.state.url = url;
 87 |         if ((url.length > 5) && (url.indexOf("http") === 0)) {
 88 |             this.setState({
 89 |                 file: url,
 90 |                 imageSelected: true
 91 |             })
 92 |         }
 93 |     };
 94 | 
 95 |     _clear = async (event) => {
 96 |         this.setState({
 97 |             file: null,
 98 |             imageSelected: false,
 99 |             predictions: [],
100 |             rawFile: null,
101 |             url: ""
102 |         })
103 |     };
104 | 
105 |     _predict = async (event) => {
106 |         this.setState({isLoading: true});
107 | 
108 |         let resPromise = null;
109 |         if (this.state.rawFile) {
110 |             const data = new FormData();
111 |             data.append('file', this.state.rawFile);
112 |             resPromise = axios.post('/api/classify', data);
113 |         } else {
114 |             resPromise = axios.get('/api/classify', {
115 |                 params: {
116 |                     url: this.state.file
117 |                 }
118 |             });
119 |         }
120 | 
121 |         try {
122 |             const res = await resPromise;
123 |             const payload = res.data;
124 | 
125 |             this.setState({predictions: payload.predictions, isLoading: false});
126 |             console.log(payload)
127 |         } catch (e) {
128 |             alert(e)
129 |         }
130 |     };
131 | 
132 | 
133 |     renderPrediction() {
134 |         const predictions = this.state.predictions || [];
135 | 
136 |         if (predictions.length > 0) {
137 | 
138 |             const predictionItems = predictions.map((item) =>
139 |                 <li>{item.class} ({item.prob * 100}%) </li>
140 |             );
141 | 
142 |             return (
143 |                 <ul>
144 |                     {predictionItems}
145 |                 </ul>
146 |             )
147 | 
148 |         } else {
149 |             return null
150 |         }
151 |     }
152 | 
153 |     handleChange = (selectedOption) => {
154 |         this.setState({selectedOption});
155 |         console.log(`Option selected:`, selectedOption);
156 |     };
157 | 
158 |     sampleUrlSelected  = (item) => {
159 |         this._onUrlChange(item.url);
160 |     };
161 |     render() {
162 |         const sampleImages = APP_CONFIG.sampleImages;
163 |         return (
164 |             <div>
165 |                 <h2>{APP_CONFIG.description}</h2>
166 | 
167 |                 <p>Select an image </p>
168 | 
169 |                 <Form>
170 |                     <FormGroup>
171 |                         <div>
172 |                             <p>Provide a Url</p>
173 |                             <div>
174 | 
175 |                                 <UncontrolledDropdown >
176 |                                     <DropdownToggle caret>
177 |                                         Sample Image Url
178 |                                     </DropdownToggle>
179 |                                     <DropdownMenu>
180 |                                         {sampleImages.map(si =>
181 |                                             <DropdownItem onClick={()=>this.sampleUrlSelected(si)}>
182 |                                                 {si.name}
183 |                                             </DropdownItem>)
184 |                                         }
185 | 
186 |                                     </DropdownMenu>
187 |                                 </UncontrolledDropdown>
188 | 
189 |                             </div>
190 |                             <Input value={this.state.url} name="file" onChange={(e)=>this._onUrlChange(e.target.value)}
191 |                             />
192 |                         </div>
193 |                     </FormGroup>
194 | 
195 |                     <h3>OR</h3>
196 |                     <FormGroup id={"upload_button"}>
197 |                         <div>
198 |                             <p>Upload an image</p>
199 |                         </div>
200 |                         <Label for="imageUpload">
201 |                             <Input type="file" name="file" id="imageUpload" accept=".png, .jpg, .jpeg" ref="file"
202 |                                    onChange={this._onFileUpload}/>
203 |                             <span className="btn btn-primary">Upload</span>
204 |                         </Label>
205 |                     </FormGroup>
206 | 
207 |                     <img src={this.state.file} className={"img-preview"} hidden={!this.state.imageSelected}/>
208 | 
209 |                     <FormGroup>
210 |                         <Button color="success" onClick={this._predict}
211 |                                 disabled={this.state.isLoading}> Predict</Button>
212 |                         <span className="p-1 "/>
213 |                         <Button color="danger" onClick={this._clear}> Clear</Button>
214 |                     </FormGroup>
215 | 
216 | 
217 |                     {this.state.isLoading && (
218 |                         <div>
219 |                             <Spinner color="primary" type="grow" style={{width: '5rem', height: '5rem'}}/>
220 | 
221 |                         </div>
222 |                     )}
223 | 
224 |                 </Form>
225 | 
226 |                 {this.renderPrediction()}
227 | 
228 | 
229 |             </div>
230 |         );
231 |     }
232 | }
233 | 
234 | class CustomNavBar extends React.Component {
235 | 
236 | 
237 |     render() {
238 |         const link = APP_CONFIG.code;
239 |         return (
240 |             <Navbar color="light" light fixed expand="md">
241 |                 <NavbarBrand href="/">{APP_CONFIG.title}</NavbarBrand>
242 |                 <Collapse navbar>
243 |                     <Nav className="ml-auto" navbar>
244 |                         <NavItem>
245 |                             <NavLink href="/about">About</NavLink>
246 |                         </NavItem>
247 |                         <NavItem>
248 |                             <NavLink href={link}>GitHub</NavLink>
249 |                         </NavItem>
250 | 
251 |                     </Nav>
252 |                 </Collapse>
253 |             </Navbar>
254 |         )
255 |     }
256 | }
257 | 
258 | // Create a function to wrap up your component
259 | function App() {
260 |     return (
261 | 
262 | 
263 |         <Router>
264 |             <div className="App">
265 |                 <CustomNavBar/>
266 |                 <div>
267 |                     <main role="main" className="container">
268 |                         <Route exact path="/" component={MainPage}/>
269 |                         <Route exact path="/about" component={About}/>
270 | 
271 |                     </main>
272 | 
273 | 
274 |                 </div>
275 |             </div>
276 |         </Router>
277 |     )
278 | }
279 | 
280 | (async () => {
281 |     const response = await fetch('/config');
282 |     const body = await response.json();
283 | 
284 |     window.APP_CONFIG = body;
285 | 
286 |     // Use the ReactDOM.render to show your component on the browser
287 |     ReactDOM.render(
288 |         <App/>,
289 |         rootElement
290 |     )
291 | })();
292 | 
293 | 
294 | 


--------------------------------------------------------------------------------