참조 : www.youtube.com/watch?v=OI3fZJHQF8Y&list=PLU9-uwewPMe2-vtJAgWB6SNhHcTjJDgEO&index=3
1 - Teachable Machine -> Get Started - > Image Project 클릭 하면 아래와 같은 창이 뜸
- 클래스 이름을 적어주고 Upload를 눌러 전 포스팅에서 다운받은 강아지상 연예인사진과 고양이상 연예인 사진을 업로드
- 업로드 완료 후 Traning 을 누르면 아래와 같은 창이 뜸
- Preview란의 Export Model을 클릭
- upload(shareable link)로 업로드를 해주면 아래와 같이 sharable link 주소가 나오고
code snippets to use your model: 즉 사용가능한 코드를 알려줌
2.codepen 사이트에서 image upload에 대한 다른 개발자가 만든 도구를 가져오고
티쳐블머신에서 가져온 코드와 codepen에서 가져온코드(HTML , JS)를 적절히 섞고 조정하여 goormIDE 에서 HTML,CSS,JS로 만든 컨테이너 개발환경 속 index.html 파일을 아래와 같이 만들고
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>Teachable Machine Image Model</div>
<button type="button" onclick="init()">Start</button>
<button type="button" onclick="predict()">예측</button>
<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="face-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 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>
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>
<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/MXDx7GlIj/';
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() {
// predict can take in an image, video or canvas html element
var image = document.getElementById('face-image');
const prediction = await model.predict(image, false);
for (let i = 0; i < maxPredictions; i++) {
const classPrediction =
prediction[i].className + ': ' + prediction[i].probability.toFixed(2);
labelContainer.childNodes[i].innerHTML = classPrediction;
}
}
</script>
</body>
<!-- Copyright (c) 2020 by Aaron Vanston (https://codepen.io/aaronvanston/pen/yNYOXR)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -->
</html>codepen의 CSS코드를 복사하여 style.css에 붙여 넣기한다
preview index.html을 클릭하고 작동시켜 본다
'WebApp > WebApp' 카테고리의 다른 글
| WebApp_동물상앱 - 웹어플 디자인(최종) (0) | 2021.01.01 |
|---|---|
| WebApp_동물상앱 - 웹어플 디자인(2) (0) | 2020.12.31 |
| WebApp_동물상앱 - 웹어플 디자인(1)( with. Zeplin, BootStrap) (0) | 2020.12.31 |
| WebApp - 셀레니움(With python) (0) | 2020.12.28 |
| WebApp - 크롤링(With Python) (0) | 2020.12.22 |
