app/templates/flowers.html

{% 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('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 %}