AnimalDogamApp/index.html at main · capstone22-5-4/AnimalDogamApp · 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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />

    <title>Hello, world!</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <section>
      <img class="img1" src="https://ifh.cc/g/06L6OO.png" />
      <div class="preview"></div>

      <button id="triggerUpload" class="btn">사진 올리기</button>
      <input type="file" id="filePicker" />
      <div class="fileName"></div>

      <button class="btn1" type="button" onclick="predict()">등록하기</button>
      <div id="label-container"></div>
    </section>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teachablemachine-image.min.js"></script>
    <script>
      var triggerUpload = document.getElementById('triggerUpload'),
        upInput = document.getElementById('filePicker'),
        preview = document.querySelector('.preview');

      //force triggering the file upload here...
      triggerUpload.onclick = function () {
        upInput.click();
      };

      upInput.onchange = function (e) {
        var uploaded = this.value,
          ext = uploaded.substring(uploaded.lastIndexOf('.') + 1),
          ext = ext.toLowerCase(),
          fileName = uploaded.substring(uploaded.lastIndexOf('\\') + 1),
          accepted = ['jpg', 'png', 'gif', 'jpeg'];

        /*
    ::Add in blank img tag and spinner
    ::Use FileReader to read the img data
    ::Set the image source to the FileReader data
  */
        function showPreview() {
          init();
          preview.innerHTML = "<div class='loadingLogo'></div>";
          preview.innerHTML += '<img id="img-preview" />';
          var reader = new FileReader();
          reader.onload = function () {
            var img = document.getElementById('img-preview');
            img.src = reader.result;
          };
          reader.readAsDataURL(e.target.files[0]);
          preview.removeChild(document.querySelector('.loadingLogo'));
          document.querySelector('.fileName').innerHTML =
            fileName + '<b> Uploaded!</b>';
        }

        //only do if supported image file
        if (new RegExp(accepted.join('|')).test(ext)) {
          showPreview();
        } else {
          preview.innerHTML = '';
          document.querySelector('.fileName').innerHTML =
            'Hey! Upload an image file, not a <b>.' + ext + '</b> file!';
        }
      };
    </script>

    <script type="text/javascript">
      // More API functions here:
      // https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image

      // the link to your model provided by Teachable Machine export panel
      const URL = 'https://teachablemachine.withgoogle.com/models/XsPQWaq_t/';

      let model, webcam, labelContainer, maxPredictions;

      // Load the image model and setup the webcam
      async function init() {
        const modelURL = URL + 'model.json';
        const metadataURL = URL + 'metadata.json';

        // load the model and metadata
        // Refer to tmImage.loadFromFiles() in the API to support files from a file picker
        // or files from your local hard drive
        // Note: the pose library adds "tmImage" object to your window (window.tmImage)
        model = await tmImage.load(modelURL, metadataURL);
        maxPredictions = model.getTotalClasses();

        labelContainer = document.getElementById('label-container');
        for (let i = 0; i < maxPredictions; i++) {
          // and class labels
          labelContainer.appendChild(document.createElement('div'));
        }
      }

      // run the webcam image through the image model
      async function predict() {
        var image = document.getElementById('img-preview');
        // predict can take in an image, video or canvas html element
        const prediction = await model.predict(image, false);
        prediction.sort(
          (a, b) => parseFloat(b.probability) - parseFloat(a.probability),
        );

        for (let i = 0; i < 3; i++) {
          const classPrediction =
            prediction[i].className +
            ': ' +
            prediction[i].probability.toFixed(2);
          labelContainer.childNodes[i].innerHTML = classPrediction;
        }

        //이부분에서 만약 확률이 75% 넘으면 서버? 로 전송
      }
    </script>
  </body>
</html>