https://ai-fruit-test.netlify.app/

1<!DOCTYPE html>
2<html lang="ko">
3
4<head>
5  <meta charset="UTF-8">
6<!-- This site is hosted on Netlify. Anyone can build and deploy a site
7     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=171af0f2-71fa-4a1c-bae2-14157ea14ee6
8     Netlify hosting facts for this site: static/SSR served via Netlify Edge. -->
9  <meta name="viewport" content="width=device-width, initial-scale=1.0">
10  <title>인공지능 과일상 테스트</title>
11  <link rel="stylesheet" href="style.css">
12  <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
13</head>
14
15<body>
16  <div class="header">
17    <h1>🍓🍈🍇과일상 테스트🍎🍒🍑</h1>
18    <h3>얼굴로 보는 인공지능 과일상 테스트</h3>
19  </div>
20  <div class="container">
21    <div id="upload-area" class="area">
22      <span class="guide-image">📸</span>
23      <br />
24      <span>사진을 올려놓거나 눌러서 업로드해주세요!</span>
25      <input id="upload-input" style="display: none;" type="file" accept="image/*" onchange="readFile(this.files[0]);" />
26    </div>
27    <div id="share-area" class="area">
28      <h3>과일상 테스트 공유하기</h3>
29      <div class="addthis_inline_share_toolbox"></div>
30    </div>
31    <div id="loading-area" class="area" style="display: none;">
32      <span class="guide-image">🌹😉</span>
33      <br />

34      <span>인공지능 모델을 불러오는 중입니다...</span>
35    </div>
36    <div id="result-area" class="area" style="display: none;">
37      <img id="upload-image" src="#" alt="youra image" />
38      <div id='label-container'></div>
39    </div>
40    <div id="retry-area" class="area" style="display: none;">
41      <span>다른 사진으로 테스트하려면 눌러주세요!</span>
42    </div>
43  </div>
44  <div id="disqus_thread"></div>
45
46
47  

47<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>

47
48  

48<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@latest/dist/teachablemachine-image.min.js"></script>

48
49  

49<script type="text/javascript">
50
51    const URL = "https://teachablemachine.withgoogle.com/models/L70E2v9g3/";
52
53    let model, webcam, labelContainer, maxPredictions;
54    let isModelReady = false;
55    let input = document.getElementById("upload-input");
56    let image = document.getElementById("upload-image");
57    let loadingArea = document.getElementById("loading-area");
58    let uploadArea = document.getElementById("upload-area");
59    let shareArea = document.getElementById("share-area");
60    let resultArea = document.getElementById("result-area");
61    let retryArea = document.getElementById("retry-area");
62    const reader = new FileReader();
63
64    async function readFile(file) {
65      uploadArea.style.display = "none";
66      shareArea.style.display = "none";
67      if(isModelReady === false) {
68        loadingArea.style.display = "block";
69        await init()
70      }
71      reader.readAsDataURL(file);
72    }
73
74    reader.onload = async function(event) {
75      await image.setAttribute('src', event.target.result);
76      await predict();
77      loadingArea.style.display = "none";
78      resultArea.style.display = "block";
79      retryArea.style.display = "block";
80    };
81
82    uploadArea.onclick = function() {
83      input.click();        
84    }
85
86    uploadArea.ondragover = function(event) {
87      event.preventDefault();        
88    }
89
90    uploadArea.ondrop = function(event) {
91      event.preventDefault();
92      const file = event.dataTransfer.files[0];
93      readFile(file);
94    }
95
96    retryArea.onclick = function() {
97      retryArea.style.display = "none";
98      resultArea.style.display = "none";
99      uploadArea.style.display = "block";
100      shareArea.style.display = "block";
101      input.value = "";
102    }
103
104    async function init() {
105      const modelURL = URL + "model.json";
106      const metadataURL = URL + "metadata.json";
107
108      model = await tmImage.load(modelURL, metadataURL);
109      maxPredictions = model.getTotalClasses();
110
111      labelContainer = document.getElementById("label-container");
112      for (let i = 0; i < maxPredictions + 1; i++) { 
113            labelContainer.appendChild(document.createElement("div"));
114      }
115    }
116
117    async function predict() {
118      const prediction = await model.predict(image);
119      prediction.sort((x, y) => y.probability - x.probability);
120
121      switch (prediction[0].className) {
122        case "멜론":
123          labelContainer.childNodes[0].innerHTML = `<h3>당신은 멜론상!🍈</h3>
124                <p>당신은 겉으로는 상당히 다소곳해 보이는 타입이지만 마음속에는 언제나 큰 포부나 이상을 품고 있는 사람입니다.
125        남이 하자는 대로 따라가기 싫어하며, 자기 나름대로의 이상이나 신념을 위해 살고자 노력하는 당신!
126        이런 점들 때문에 다소 완고하다는 얘기를 듣기도 하네요, 금전적인 욕구 역시 누구보다 강하고 돈을 많이 모으려는 욕망이 마음속에 크게 자리 잡고 있네요. 
127        또, 재테크 분야에 상당한 능력을 가지고 있습니다. 누구에게 지는 것을 매우 싫어하고 모든 일에 최고가 되길 꿈꾸는 야심가 타입!</p>`;
128          break;
129        case "사과":
130          labelContainer.childNodes[0].innerHTML = `<h3>당신은 사과상!🍎</h3>
131                <p>당신은 모든 일들을 정확하게 처리해야 직성이 풀리는 성실한 성격의 소유자입니다.
132즉, 절대로 무리해서 일을 처리하지 않고 적당한 시간을 두고 꼼꼼하게 체크하는 타입입니다. 
133어떤 과제가 주어졌을 때 밤을 지새우며 하기보다는 일정한 시간은 쉬고 일정한 시간에 집중해서 과제를 완성해냅니다. 
134웃어른은 공경하고 예의 바른 당신, 예의나 매너에 민감해서 그것에 어긋나는 사람들을 굉장히 싫어합니다.
135특히 붉은 사과를 좋아하는 사람은 대인관계에 세심한 신경을 쓰며 고지식하다는 이야기를 자주 듣고는 합니다.</p>`;
136          break;

137        case "복숭아":
138          labelContainer.childNodes[0].innerHTML = `<h3>당신은 복숭아상!🍑</h3>
139                <p>당신은 대체로 온화한 성격을 가졌고 누구와도 원만한 인간관계를 유지합니다.
140다소 언짢은 일이 있어도 항상 얼굴에는 미소가 떠나지 않는 당신, 이러한 성격 때문에 주위 사람들에게 항상 평이 좋고 절대 남에게 미움을 받지 않는 스타일입니다.
141또한 매우 가정적이어서 집안일에 충실하며 그것을 즐기는 당신, 다양한 모임의 시간을 즐기고 그 안에서 에너지를 충전하는군요? 
142하지만 때로는 너무 사람이 좋아 보여 손해를 보는 경우도 종종 있으니 주의하세요!</p>`;
143          break;
144        case "체리":
145          labelContainer.childNodes[0].innerHTML = `<h3>당신은 체리상!🍒</h3>
146                <p>당신은 정열적인 스타일로 늘 가슴속에 무엇인가 불타고 있는 꿈이 거창한 스타일입니다.
147스릴이나 변화를 좋아해 틀에 박힌 듯한 삶 속에서의 권태를 거부하며, 무엇이든지 한번 시작한 일은 열심히 최선을 다하는 적극적인 타입의 당신! 
148그리고 당신은 약간 사람을 자신만의 기준을 정해 가리면서 사귀는 경향이 있으며, 첫인상 만으로 어떤 사람을 평가하는 일이 종종 있네요! 
149하지만 당신의 장점은 목표한 일이 어려움에 부딪히더라도 포기 않고 과감하게 밀고 나가는 추진력과 열정에 있습니다.</p>`;
150          break;
151        case "포도":
152          labelContainer.childNodes[0].innerHTML = `<h3>당신은 포도상!🍇</h3>
153                <p>당신은 외로움을 많이 타며, 자신의 테두리 속에서 나오기를 꺼려합니다.
154반면 미적 감각이나 상상력, 창의력은 누구보다도 풍부하며 이를 바탕으로 자신만의 독특한 개성을 발전시켜 나아갑니다. 
155당신은 남들이 가까이하기 어려워하는 차가운 면을 가지고 있지만 마음은 정말 따뜻한 반전 매력을 가지고 있습니다. 
156겉으로 보이는 행동과 본심이 크게 차이나는 타입으로 당신을 점차 알아가는 사람들은 이러한 당신의 매력에 빠지고 마는데요! 
157상대방과 관계를 맺어나가는데 꽤 오랜 시간이 걸리지만 일단 친해지게 되면 자신의 모든 것을 주려고 하는 스타일입니다.</p>`;
158          break;
159      }
160      for (let i = 0; i < maxPredictions; i++) {
161        const classPrediction =
162        prediction[i].className + ": " + Math.round(prediction[i].probability * 100) + "%";
163        labelContainer.childNodes[i+1].innerHTML = classPrediction;
164      }
165      isModelReady = true;
166    }
167  </script>

167
168  

168<script>
169    /**
170    *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
171    *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables    */
172    /*
173    var disqus_config = function () {
174    this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
175    this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
176    };
177    */
178    (function() { // DON'T EDIT BELOW THIS LINE
179    var d = document, s = d.createElement('script');
180    s.src = 'https://ingongjineung-gwailsang-teseuteu.disqus.com/embed.js';
181    s.setAttribute('data-timestamp', +new Date());
182    (d.head || d.body).appendChild(s);
183    })();
184</script>

184
185<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

186<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-63fe889387386870"></script>

186
187</body>
188</html>
189