인공지능 열기가 뜨겁습니다.
여러 개발 방법이 대두되는데요. 보통 파이썬을 이용한 방법이 많지요.
가장 쉽게 접근할 방법을 찾아보다가 이미 학습된 인공지능을 사용하는 것은
오직 자바스크립트만 이용한 방법도 있어 공유합니다.
위키독스 무료 공개 서적을 참조하였습니다.
https://wikidocs.net/book/5373
p5 자바스크립트와 ml5 머신러닝라이브러리
https://www.p5js.org https://www.ml5js.org https://teachablemachine.withgoogle.com https:/ ...
wikidocs.net
간단하게 완성된 예제는 구경해 보실 수 있습니다.
크레이의 블로그 상단에 이런 부분이 생겨났을 텐데요.
인터넷을 검색하여 동물사진을 다운받아 윈도우 탐색기에서 위 공간에
사진을 드래그해 넣어 주시면 됩니다.
소스는 아래와 같습니다.
단일 파일이기 때문에 그냥 아무 서버에 업로드하셔서 테스트해보시면 동일하게 작동될 겁니다 :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body bgcolor=''>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.dom.min.js"></script>
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
<div id="sketch-holder" style="margin:0 auto; width:1000px">
<img src='robot.png' width=30 valign=absmiddle>
아래 영역에 사진을 드래그해보세요.<br/>
</div>
<script>
let classifier;
let dropBox;
let img = 0;
function preload() {
classifier = ml5.imageClassifier('MobileNet');
}
function setup() {
dropBox = createCanvas(1000, 100);
background(240, 240, 240);
dropBox.drop(afterDrop);
dropBox.parent('sketch-holder');
}
function afterDrop(file){
img = loadImage(file.data, imageReady);
}
function imageReady(){
background(240, 240, 240);
image(img, 0, 0, 100, 100);
classifier.classify(img, gotResult);
}
function gotResult(error, results) {
if (error) {
console.error(error);
}
console.log(results);
fill(0);
textSize(20);
text('분석 : '+results[0].label, 110, 30);
text('정확도 : '+nf(results[0].confidence*100,0,1)+'%', 110, 70);
}
</script>
</body>
</html>
방문해주시는 모든 분들께 늘 감사드립니다.
도움이 되셨다면 공감 한방, 댓글은 굿잡!
감사합니다~
