test/index.html at main · cksldl/test · 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
<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>포켓몬도감</title>
   <link rel="stylesheet" href="style.css">
</head>

<body>
   <h1>포켓몬 도감 만들기 프로젝트</h1>
   <script class="jsbin" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   <div class="file-upload">
       <button class="file-upload-btn" type="button" onclick="$('.file-upload-input').trigger( 'click' )">Add
           Image</button>

       <div class="image-upload-wrap">
           <input class="file-upload-input" type='file' onchange="readURL(this);" accept="image/*" />
           <div class="drag-text">
               <h3>Drag and drop a file or select add Image</h3>
           </div>
       </div>
       <div class="file-upload-content">
           <img class="file-upload-image" id="my-image" src="#" alt="your image" />
           <div class="image-title-wrap">
               <button type="button" onclick="removeUpload()" class="remove-image">Remove <span
                       class="image-title">Uploaded Image</span></button>
           </div>
       </div>
   </div>
   <div>Teachable Machine Image Model</div>
   <button type="button" onclick="init()">Start</button>
   <button type="button" onclick="predict()">예측하기</button>
   <div id="webcam-container"></div>
<div id="label-container"></div>
<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 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/6Okv_AMx3/";

    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();


        // append elements to the DOM
        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() {
        // predict can take in an image, video or canvas html element
        var image = document.getElementById("my-image")
        const prediction = await model.predict(webcam.canvas);
        if (prediction[0].probability > 0.2) {
    labelContainer.childNodes[0].innerHTML = "피카츄 설명"
 }
 else if (prediction[1].probability > 0.2) {
    labelContainer.childNodes[0].innerHTML = "파이리 설명"
 }
 else if (prediction[2].probability > 0.2) {
    labelContainer.childNodes[0].innerHTML = "꼬부기 설명"
 }
 else {
    labelContainer.childNodes[3].innerHTML = "아무것도 아님";
 }
    }
</script>

       async function loop() {
           webcam.update(); // update the webcam frame
           await predict();
           window.requestAnimationFrame(loop);
       }

       // run the webcam image through the image model
       async function predict() {
           // predict can take in an image, video or canvas html element
           const prediction = await model.predict(webcam.canvas);

       }
   </script>
   <script>function readURL(input) {
           if (input.files && input.files[0]) {

               var reader = new FileReader();

               reader.onload = function (e) {
                   $('.image-upload-wrap').hide();

                   $('.file-upload-image').attr('src', e.target.result);
                   $('.file-upload-content').show();

                   $('.image-title').html(input.files[0].name);
               };

               reader.readAsDataURL(input.files[0]);

           } else {
               removeUpload();
           }
       }

       function removeUpload() {
           $('.file-upload-input').replaceWith($('.file-upload-input').clone());
           $('.file-upload-content').hide();
           $('.image-upload-wrap').show();
       }
       $('.image-upload-wrap').bind('dragover', function () {
           $('.image-upload-wrap').addClass('image-dropping');
       });
       $('.image-upload-wrap').bind('dragleave', function () {
           $('.image-upload-wrap').removeClass('image-dropping');
       });
   </script>
</body>

</html>