이번에는 ML5.js를 활용해 간단한 이미지 분류 웹 어플리케이션을 만드는 방법에 대해 알아볼 것입니다. 이 튜토리얼에서는 사전에 훈련된 MobileNet 모델을 사용할 것입니다.
필요한 도구
- 최신 버전의 웹 브라우저
- 텍스트 에디터
- 웹 서버 (예: Python의 SimpleHTTPServer)
1. HTML 파일 생성
먼저, 빈 HTML 파일을 만듭니다. 아래의 코드를 복사하여 시작하세요:
<!DOCTYPE html>
<html>
<head>
<title>Image Classifier with ml5.js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js"></script>
<script src="https://unpkg.com/ml5@0.4.3/dist/ml5.min.js"></script>
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>이 코드는 p5.js와 ml5.js 라이브러리를 불러옵니다. 'sketch.js'라는 별도의 JavaScript 파일에 코드를 작성할 예정이므로 이를 불러오는 태그도 포함되어 있습니다.
2. JavaScript 파일 생성
다음으로, 'sketch.js'라는 JavaScript 파일을 생성하고 아래의 코드를 복사해 넣습니다:
let classifier;
let image;
function preload() {
classifier = ml5.imageClassifier('MobileNet');
image = loadImage('image.jpg'); // replace with path to your image
}
function setup() {
createCanvas(400, 400);
classifier.classify(image, (err, results) => {
if (err) {
console.error(err);
return;
}
console.log(results); // 이미지 분류 결과를 콘솔창에 출력합니다.
});
}
function draw() {
image(image, 0, 0);
}이 코드는 ML5.js의 'ml5.imageClassifier' 함수를 이용해 MobileNet 모델을 불러오고, 이미지를 분류합니다. 이때 'image.jpg'는 분류할 이미지의 경로를 나타내며, 이를 자신의 이미지 파일 경로로 교체해야 합니다.
3. 웹 서버 실행
코드를 작성한 후에는 웹 서버를 실행시켜 프로젝트를 볼 수 있습니다. Python의 SimpleHTTPServer를 사용하는 경우, 터미널에서 프로젝트 폴더로 이동한 후 다음 명령어를 입력하면 됩니다:
python -m SimpleHTTPServer이후 웹 브라우저에서 'localhost:8000'에 접속하면 본인이 작성한 웹 어플리케이션을 볼 수 있습니다.
총정리
이 튜토리얼을 통해 ML5.js를 이용해 간단한 이미지 분류 웹 어플리케이션을 만드는 방법을 알아보았습니다. 물론, 이 어플리케이션은 매우 기본적인 예제일 뿐이며, ML5.js의 다양한 기능을 활용하여 더 복잡하고 다양한 머신 러닝 웹 어플리케이션을 만들 수 있습니다. 이 도구를 사용하면 웹에서 머신 러닝을 쉽게 사용해 볼 수 있으므로, 여러분의 창의력을 발휘해 보세요!
댓글