pneumonia-x-rays-classification/index.html at main · tensorflowters/pneumonia-x-rays-classification · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>
    <title>TensorFlow.js Model 2 Inferencing</title>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
</head>
<body>
    <h1>TensorFlow.js Model Inferencing</h1>
    <input type="file" id="upload" />
    <p id="response"></p>

    <script>
        async function run() {
            const model = await tf.loadLayersModel('http://localhost:8000/notebooks/2_cross_validation/model.json');

            document.getElementById('upload').addEventListener('change', async function(e) {
                const img = document.createElement('img');
                img.src = URL.createObjectURL(e.target.files[0]);
                img.width = 180;
                img.height = 180;
                await img.decode();

                let tensor = tf.browser.fromPixels(img)
                    .resizeNearestNeighbor([180, 180])
                    .toFloat()
                    .mean(2)
                    .expandDims(2)
                    .expandDims();


                const classNames = ["normal", "pneumonia"];
                const pred = model.predict(tensor);

                tfToArray = pred.arraySync()

                document.getElementById("response").innerText = `This x-ray is ${classNames[tfToArray[0].indexOf(1)]}`
            });
        }

        // Run the function
        run();
    </script>
</body>
</html>