File size: 1,454 Bytes
26ae658
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
45
46
47
48
49

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
  </head>
  <body>

  	Make sure to run this via a server

    <br>
    <input accept="image/*" type='file' id="input_button" />

  	<br>
    <img id="img1" src="./image.jpg" style="width: 300px " />
    <br>  <br>
    <button   onclick="predict()">predict</button>
    <br>
    <p id="result"> </p>

    <script>

      let image = document.getElementById('img1');
      let input_button = document.getElementById('input_button');

      input_button.onchange = evt => {
        const [file] = input_button.files
        if (file) {
          image.src = URL.createObjectURL(file)
        }
      }

      async function predict() {
        var  model = await tf.loadGraphModel('./model.json');

        let example = tf.browser.fromPixels(document.getElementById("img1") , 3 ).cast('float32');
        console.log(  example.shape  )
        example = example.reshape([1,example.shape[0], example.shape[1] ,example.shape[2]]);

        let prediction = await model.predict(example);
        let class_scores = await prediction.data();
        let max_score_id =  class_scores.indexOf(Math.max(...class_scores));
        let classes = [  "amina mostafa2024020001" ,  "misaa babnjki2024020002" ,  ] ;

        console.log(class_scores);
        document.getElementById("result").innerHTML = classes[max_score_id].toString();
      }
    </script>
  </body>
</html>