add files

app/__init__.py

@@ -0,0 +1,5 @@
+from flask import Flask
+
+app = Flask(__name__)
+
+from app import routes

app/routes.py

@@ -0,0 +1,16 @@
+from flask import render_template
+from app import app
+
+
+@app.route('/', methods=['GET'])
+@app.route('/flowers', methods=['GET'])
+def login():
+    return render_template('flowers.html', title='Flowers', header='FLOWERS', status1="active")
+
+
+@app.route('/cats_dogs', methods=['GET'])
+def cats_dogs():
+    return render_template('cats_dogs.html', title='Cat vs dog', header='CAT AND DOG', status2="active")
+
+
+

app/static/cat vs dog/best.h5

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:17ee35f7f3f023b9154913ee07622eb4a6d878c8f208f9735bc11e0c7bf64059
+size 17077688

app/static/cat vs dog/tfjs_model/group1-shard1of3.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:055e074f4264a2fa54d8ec1b7e365c9b6c4b92c468e6a7e003bf61cbec2eb7db
+size 4194304

app/static/cat vs dog/tfjs_model/group1-shard2of3.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:57910314fefafaf01acfb2edaf901c1aafd4a26f402f65492ce710e7483432c4
+size 4194304

app/static/cat vs dog/tfjs_model/group1-shard3of3.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7126ad08d1b2ef785b5069bf62698e588d7710ef8ffb90a596e89603b9f11f65
+size 648452

app/static/flowers/best.h5

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2c633a1963e36fd6f3ffa483dfe395ab494b308ce98ac3c1572b35abef41a52a
+size 31591736

app/static/flowers/tfjs_model/group1-shard1of4.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d697f07703ef03a85b29bd3371fe763da87fe09af183be4f98faa1f67eeca2c5
+size 4194304

app/static/flowers/tfjs_model/group1-shard2of4.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c2d678e8d7f6ca18627778c7d90ff0bef393f2f2f2e91929878bcb57213ecf57
+size 4194304

app/static/flowers/tfjs_model/group1-shard3of4.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0f272dcb7a73a1f281dccc6229b20a6b76f552c764f1046d0df2cdf83e1ecc0f
+size 4194304

app/static/flowers/tfjs_model/group1-shard4of4.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:37245d66a166110b45decca6d1d4ac623225cf60e4a27fee0b83a65d1f20395d
+size 3805460

app/static/styles/style.css

@@ -0,0 +1,127 @@
+ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background-color: #333;
+}
+
+li {
+  float: left;
+}
+
+li a {
+  display: block;
+  color: white;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+
+li a:hover {
+  background-color: #111;
+}
+
+.active {
+  background-color: #4CAF50;
+}
+
+body {
+    padding: 0px;
+    margin: 0px;
+    font-family: Arial, Helvetica, sans-serif;
+    color: white;
+}
+
+body, html {
+    height: 100%;
+}
+
+html, body {
+    padding: 0px;
+    margin: 0px;
+    background: #35363A;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 100%;
+    overflow-x: scroll;
+}
+
+.header {
+    background-color: rgba(0, 0, 0, 0.3);
+    font-weight: bold;
+    text-transform: uppercase;
+    font-size: large;
+    color:white;
+
+    text-align: center;
+    padding: 30px;
+}
+
+.info
+{
+    text-align:left;
+    color:gray;
+    width:30%;
+    margin:auto;
+    padding:20px;
+    font-size:14px;
+}
+
+.content {
+    width: 100%;
+}
+
+.upload_part {
+    background-color: rgba(0, 0, 0, 0.3);
+    text-align: center;
+    padding: 40px;
+}
+
+.upload_button {
+    background-color: #FEED06;
+    color: black;
+    padding: 15px;
+    font-size: 16px;
+    border: 0px;
+    border-radius: 5px;
+    -webkit-box-shadow: 6px 8px 18px -5px rgba(0, 0, 0, 0.38);
+    -moz-box-shadow: 6px 8px 18px -5px rgba(0, 0, 0, 0.38);
+    box-shadow: 6px 8px 18px -5px rgba(0, 0, 0, 0.38);
+    cursor: pointer;
+}
+
+.upload_hint {
+    margin: 10px;
+    font-size: 14px;
+    color: rgb(200, 200, 200);
+}
+
+.result_part {
+    text-align: center;
+    padding: 40px;
+}
+
+.result_title {
+    font-size: 18px;
+    font-weight: bold;
+}
+
+.result_id {
+    padding: 10px;
+    margin: 15px;
+    font-size: 22px;
+}
+
+.result_id_number {
+    margin: 15px;
+    padding: 10px;
+    padding-left: 15px;
+    padding-right: 15px;
+    background-color: #FEED06;
+    color: black;
+    font-weight: bold;
+    font-size: 18px;
+    border-radius: 5px;
+}

app/templates/base.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        {% if title %}
+        <title>{{ title }} - Classification</title>
+        {% else %}
+        <title>Welcome to Classification Page</title>
+        {% endif %}
+
+        <! Link css file, jquery and tensorflowjs library>
+        <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/style.css') }}">
+        <script src="https://code.jquery.com/jquery-3.5.1.min.js"
+            integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script>
+    </head>
+    <body>
+        <ul>
+            <li><a class="{{ status1 }}" href="/flowers"> Flowers </a></li>
+            <li><a class="{{ status2 }}" href="/cats_dogs"> Cats and dogs </a></li>
+        </ul>
+
+        <div class='header'> {{ header }} CLASSIFICATION </div>
+
+        <div class='content'>
+            <div class='upload_part'>
+                <button class='upload_button' id="upload_button"> Choose image file </button>
+                <div class='upload_hint' id='upload_hint'>
+                    Available format: PNG, JPG và JPEG
+                </div>
+                <form action="/" method="POST" enctype="multipart/form-data" id='form'>
+                    <input type="file" name="file" id="fileinput" accept="image/*" style="display:none">
+                </form>
+            </div>
+
+            <div class='result_part'>
+                <div class='result_title'><b>Result</b></div>
+                <div class='result_id' id="result_info">_</div>
+                <img style="max-width:300px; border-radius:1rem"
+                     src="https://reactnativecode.com/wp-content/uploads/2018/02/Default_Image_Thumbnail.png"
+                     alt="User Image" id="display_image">
+            </div>
+        </div>
+    </body>
+    {% block scripts %} {% endblock %}
+</html>

app/templates/cats_dogs.html

@@ -0,0 +1,61 @@
+{% extends "base.html" %}
+
+{% block scripts %}
+    <script type="text/javascript">
+        const CLASS = {
+            0: 'Cat',
+            1: 'Dog',
+        };
+
+        // Load model
+        $("document").ready(async function() {
+            model = await tf.loadLayersModel('http://127.0.0.1:5000/static/cat vs dog/tfjs_model/model.json');
+            console.log('Load model');
+            console.log(model.summary());
+        });
+
+        $("#upload_button").click(function() {
+            $("#fileinput").trigger('click');
+        });
+
+        async function predict() {
+            // 1. Convert image to tensor
+            let image = document.getElementById("display_image");
+            let img = tf.browser.fromPixels(image);
+            let normalizationOffset = tf.scalar(255/2); // 127.5
+            let tensor = img
+                .resizeNearestNeighbor([160, 160])
+                .toFloat()
+                .sub(normalizationOffset)
+                .div(normalizationOffset)
+                .reverse(2)
+                .expandDims();
+
+            // 2. Predict
+            let predictions = await model.predict(tensor);
+            predictions = predictions.dataSync();
+            console.log(predictions);
+
+            // 3. Show image on web
+            var index = predictions < 0.5 ? 0 : 1;
+            $("#result_info").append(`${CLASS[index]}`);
+        };
+
+        $("#fileinput").change(function () {
+            let reader = new FileReader();
+            reader.onload = function () {
+                let dataURL = reader.result;
+
+                imEl = document.getElementById("display_image");
+                imEl.onload = function () {
+                   predict();
+                }
+                $("#display_image").attr("src", dataURL);
+                $("#result_info").empty();
+            }
+
+            let file = $("#fileinput").prop("files")[0];
+            reader.readAsDataURL(file);
+        });
+    </script>
+{% endblock %}

app/templates/flowers.html

@@ -0,0 +1,78 @@
+{% extends "base.html" %}
+
+{% block scripts %}
+    <script type="text/javascript">
+        const FLOWER_CLASS = {
+            0: 'Daisy',
+            1: 'Dandelion',
+            2: 'Rose',
+            3: 'Sunflower',
+            4: 'Tulip'
+        };
+
+        // Load model
+        $("document").ready(async function() {
+            model = await tf.loadLayersModel('http://127.0.0.1:5000/static/flowers/tfjs_model/model.json');
+            console.log('Load model');
+            console.log(model.summary());
+        });
+
+        $("#upload_button").click(function() {
+            $("#fileinput").trigger('click');
+        });
+
+        async function predict() {
+            // 1. Convert image to tensor
+            let image = document.getElementById("display_image");
+            let img = tf.browser.fromPixels(image);
+            let normalizationOffset = tf.scalar(255/2); // 127.5
+            let tensor = img
+                .resizeNearestNeighbor([224, 224])
+                .toFloat()
+                .sub(normalizationOffset)
+                .div(normalizationOffset)
+                .reverse(2)
+                .expandDims();
+
+            // 2. Predict
+            let predictions = await model.predict(tensor);
+            predictions = predictions.dataSync();
+            console.log(predictions);
+
+            // 3. Show image on web
+            let top5 = Array.from(predictions)
+                .map(function(p, i) {
+                    return {
+                        probability: p,
+                        className: FLOWER_CLASS[i]
+                    };
+                })
+
+                .sort(function(a, b) {
+                    return b.probability - a.probability;
+                });
+
+                console.log(top5);
+                $("#result_info").empty();
+
+                $("#result_info").append(`${top5[0].className}`);
+        };
+
+        $("#fileinput").change(function () {
+            let reader = new FileReader();
+            reader.onload = function () {
+                let dataURL = reader.result;
+
+                imEl = document.getElementById("display_image");
+                imEl.onload = function () {
+                   predict();
+                }
+                $("#display_image").attr("src", dataURL);
+                $("#result_info").empty();
+            }
+
+            let file = $("#fileinput").prop("files")[0];
+            reader.readAsDataURL(file);
+        });
+    </script>
+{% endblock %}

cat_dog.py

@@ -0,0 +1,82 @@
+import os
+import tensorflow as tf
+
+from tensorflow.keras.preprocessing.image import ImageDataGenerator
+
+
+# init necessary variables
+BATCH_SIZE = 32
+IMG_SIZE = (160, 160)
+IMG_SHAPE = IMG_SIZE + (3,)
+
+# 1. Download dataset
+_URL = 'https://storage.googleapis.com/mledu-datasets/cats_and_dogs_filtered.zip'
+path_to_zip = tf.keras.utils.get_file('cats_and_dogs.zip', origin=_URL, extract=True)
+PATH = os.path.join(os.path.dirname(path_to_zip), 'cats_and_dogs_filtered')
+train_dir = os.path.join(PATH, 'train')
+validation_dir = os.path.join(PATH, 'validation')
+
+# 2. Data augmentation
+image_gen = ImageDataGenerator(tf.keras.applications.mobilenet_v2.preprocess_input,
+                               rescale=1./255, rotation_range=40,
+                               width_shift_range=0.2, height_shift_range=0.2,
+                               shear_range=0.2, zoom_range=0.2,
+                               horizontal_flip=True, fill_mode='nearest')
+
+train_data_gen = image_gen.flow_from_directory(batch_size=BATCH_SIZE, directory=train_dir,
+                                               shuffle=True, target_size=IMG_SIZE, class_mode='binary')
+
+val_data_gen = image_gen.flow_from_directory(batch_size=BATCH_SIZE, directory=validation_dir,
+                                             shuffle=True, target_size=IMG_SIZE, class_mode='binary')
+
+# 3. Create the base model from the pre-trained model MobileNet V2
+base_model = tf.keras.applications.MobileNetV2(input_shape=IMG_SHAPE, include_top=False, weights='imagenet')
+
+# Freeze base model
+base_model.trainable = False
+
+# Connect new predict output to base model
+x = base_model.output
+x = tf.keras.layers.GlobalAveragePooling2D()(x)
+x = tf.keras.layers.Dropout(0.2)(x)
+outputs = tf.keras.layers.Dense(1)(x)
+model = tf.keras.Model(base_model.input, outputs)
+
+# Set up the learning process
+base_learning_rate = 0.0001
+model.compile(optimizer=tf.keras.optimizers.Adam(lr=base_learning_rate),
+              loss=tf.keras.losses.BinaryCrossentropy(from_logits=True),
+              metrics=['accuracy'])
+# 4. Train
+initial_epochs = 10
+
+# save best model
+checkpoint = tf.keras.callbacks.ModelCheckpoint('cat vs dog/best.h5', monitor='val_loss',
+                                                save_best_only=True, mode='auto')
+callback_list = [checkpoint]
+
+# transfer learning
+history = model.fit(train_data_gen, epochs=initial_epochs,
+                    validation_data=val_data_gen)
+
+# fine tune
+fine_tune_epochs = 10
+total_epochs = initial_epochs + fine_tune_epochs
+
+# unfreeze base model
+base_model.trainable = True
+
+# Fine-tune from this layer onwards
+fine_tune_at = 100
+
+# Freeze all the layers before the `fine_tune_at` layer
+for layer in base_model.layers[:fine_tune_at]:
+    layer.trainable = False
+
+model.compile(loss=tf.keras.losses.BinaryCrossentropy(from_logits=True),
+              optimizer=tf.keras.optimizers.RMSprop(lr=base_learning_rate/10),
+              metrics=['accuracy'])
+
+history_fine = model.fit(train_data_gen, epochs=total_epochs, initial_epoch=history.epoch[-1],
+                         validation_data=val_data_gen, callbacks=callback_list)
+

flowers.py

@@ -0,0 +1,80 @@
+import os
+import glob
+import shutil
+import tensorflow as tf
+
+from tensorflow.keras.preprocessing.image import ImageDataGenerator
+
+# init necessary variables
+BATCH_SIZE = 32
+IMG_SIZE = (224, 224)
+IMG_SHAPE = IMG_SIZE + (3,)
+num_classes = 5
+
+# 1. Download dataset
+_URL = "https://storage.googleapis.com/download.tensorflow.org/example_images/flower_photos.tgz"
+path_to_zip = tf.keras.utils.get_file(origin=_URL, fname="flower_photos.tgz", extract=True)
+base_dir = os.path.join(os.path.dirname(path_to_zip), 'flower_photos')
+classes = ['roses', 'daisy', 'dandelion', 'sunflowers', 'tulips']
+
+# create train and validation set
+for cl in classes:
+    img_path = os.path.join(base_dir, cl)
+    images = glob.glob(img_path + '/*.jpg')
+    # print("{}: {} Images".format(cl, len(images)))
+    num_train = int(round(len(images)*0.8))
+    train, val = images[:num_train], images[num_train:]
+
+    for t in train:
+        if not os.path.exists(os.path.join(base_dir, 'train', cl)):
+            os.makedirs(os.path.join(base_dir, 'train', cl))
+        shutil.move(t, os.path.join(base_dir, 'train', cl))
+
+    for v in val:
+        if not os.path.exists(os.path.join(base_dir, 'val', cl)):
+            os.makedirs(os.path.join(base_dir, 'val', cl))
+        shutil.move(v, os.path.join(base_dir, 'val', cl))
+
+train_dir = os.path.join(base_dir, 'train')
+val_dir = os.path.join(base_dir, 'val')
+
+# 2. Data augmentation
+image_gen = ImageDataGenerator(tf.keras.applications.mobilenet_v2.preprocess_input,
+                               rescale=1./255, rotation_range=45,
+                               width_shift_range=0.2, height_shift_range=0.2,
+                               shear_range=0.3, zoom_range=0.5, horizontal_flip=True)
+
+train_data_gen = image_gen.flow_from_directory(batch_size=BATCH_SIZE, directory=train_dir,
+                                               shuffle=True, target_size=IMG_SIZE, class_mode='sparse')
+
+val_data_gen = image_gen.flow_from_directory(batch_size=BATCH_SIZE, directory=val_dir,
+                                             shuffle=True, target_size=IMG_SIZE, class_mode='sparse')
+
+# 3. Create the base model from the pre-trained model MobileNet V2
+base_model = tf.keras.applications.mobilenet_v2.MobileNetV2(input_shape=IMG_SHAPE,
+                                                            weights='imagenet', include_top=False)
+# Freeze base model
+base_model.trainable = False
+
+# Connect new predict output to base model
+x = base_model.output
+x = tf.keras.layers.GlobalAveragePooling2D()(x)
+x = tf.keras.layers.Dense(1024, activation='relu')(x)
+x = tf.keras.layers.Dropout(0.2)(x)
+x = tf.keras.layers.Dense(512, activation='relu')(x)
+outputs = tf.keras.layers.Dense(num_classes)(x)
+model = tf.keras.Model(base_model.inputs, outputs)
+
+# Set up the learning process
+model.compile(optimizer='adam',
+              loss=tf.keras.losses.SparseCategoricalCrossentropy(from_logits=True),
+              metrics=['accuracy'])
+
+# 4. Train
+epochs = 10
+# save best model
+checkpoint = tf.keras.callbacks.ModelCheckpoint('flowers/best.h5', monitor='val_loss',
+                                                save_best_only=True, mode='auto')
+callback_list = [checkpoint]
+
+history = model.fit(train_data_gen, epochs=10, validation_data=val_data_gen, callbacks=callback_list)

main.py

@@ -0,0 +1,4 @@
+from app import app
+
+if __name__ == "__main__":
+    app.run()

requirements.txt

@@ -0,0 +1,3 @@
+tensorflow
+tensorflowjs
+flask