prediction_backend/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Knative AI Demo</title>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #container {
            width: 100%;
            height: 100%;
            #border: 1px solid red;
        }

        #image {
            height: 80%;
            width: calc(100% - 12px);
            margin: 5px 5px 0;
            border: 1px solid #00b8d4;
        }

        #buttons {
            text-align: center;
            padding-top: 20px;
            height: 20%;
        }

        #canvas {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>

<div id="container">
    <div id="image">
        <canvas id="canvas"></canvas>
    </div>
    <div id="buttons">
        <input type="file" id="imageSelect" name="image" accept="image/*">
    </div>
</div>

<script>
    $(document).ready(() => {
        const canvas = document.getElementById('canvas');
        let $canvas = $("#canvas");

        // Set canvas size to its visual size to avoid scaling
        canvas.width = $canvas.width();
        canvas.height = $canvas.height();

        const ctx = canvas.getContext('2d');

        let currentImage = null;
        let currentImageRatio = 1.0;

        function drawImage() {
            // clear canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // TODO: need to do auto rotation based on image orientation
            let hRatio = canvas.width / currentImage.naturalWidth;
            let vRatio = canvas.height / currentImage.naturalHeight;

            currentImageRatio = Math.min(hRatio, vRatio);
            ctx.drawImage(currentImage, 0, 0, currentImage.width, currentImage.height, 0, 0, currentImage.width * currentImageRatio, currentImage.height * currentImageRatio);
        }

        function callPrediction() {
            // TODO show loading overlay
            $.ajax({
                url: "/predict",
                type: "POST",
                data: JSON.stringify({
                    // something like /9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYG
                    "image_b64": currentImage.src.split(",")[1],
                }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    // TODO hide loading overlay
                    if (!data || !data["score"] || data["score"] === 0) {
                        // TODO show not found
                        return;
                    }
                    const relativeSizeBox = data["box"];
                    const absoluteSizeBox = {
                        // weird that Ys come first
                        "y1": relativeSizeBox[0] * currentImage.height * currentImageRatio,
                        "x1": relativeSizeBox[1] * currentImage.width * currentImageRatio,
                        "y2": relativeSizeBox[2] * currentImage.height * currentImageRatio,
                        "x2": relativeSizeBox[3] * currentImage.width * currentImageRatio,
                    };

                    // draw bounding box on canvas
                    ctx.beginPath();
                    ctx.lineWidth = "2";
                    ctx.strokeStyle = "red";
                    ctx.rect(absoluteSizeBox["x1"], absoluteSizeBox["y1"], absoluteSizeBox["x2"] - absoluteSizeBox["x1"], absoluteSizeBox["y2"] - absoluteSizeBox["y1"]);
                    ctx.stroke();
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    // TODO hide loading overlay
                    console.log(xhr.status);
                    console.log(thrownError);
                    // TODO show error message
                }
            });

        }

        $("#imageSelect").change(function () {
            const file = this.files[0];
            if (file) {
                let reader = new FileReader();
                reader.onload = function (e) {
                    const imageData = e.target.result;

                    const img = new Image();
                    img.onload = function () {
                        currentImage = img;
                        drawImage();
                        callPrediction();
                    };
                    img.src = imageData;
                }
                reader.readAsDataURL(file);
            }
        });
    });
</script>
</body>
</html>