728x90
이미지 업로더를 구현하고 업로드된 이미지를 대상으로 사물 인식을 수행하는 웹 애플리케이션을 만들어 보겠습니다. 이 예제에서는 사용자가 이미지를 업로드하면, 그 이미지에서 사물을 인식하고 결과를 화면에 표시하는 기능을 제공합니다.
주요 기술 및 라이브러리
- HTML5: 파일 입력을 통한 이미지 업로드
- JavaScript: 이미지 처리 및 사물 인식
- TensorFlow.js: 머신러닝 모델 사용
- Coco-SSD 모델: 사물 인식 모델
구현 단계
- HTML: 이미지 업로더와 결과를 표시할 영역을 구성합니다.
- JavaScript: 사용자가 이미지를 업로드하면 해당 이미지에서 사물을 인식하여 결과를 출력합니다.
- TensorFlow.js와 Coco-SSD 모델을 사용하여 사물 인식을 수행합니다.
※ 소스
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Object Detection</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
#canvas {
border: 1px solid #ccc;
margin-top: 20px;
}
.result {
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Image Object Detection</h1>
<input type="file" id="imageUpload" accept="image/*">
<canvas id="canvas"></canvas>
<div id="result" class="result"></div>
<script>
const imageUpload = document.getElementById('imageUpload');
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const result = document.getElementById('result');
// 이미지가 업로드될 때 처리
imageUpload.addEventListener('change', (event) => {
const file = event.target.files[0];
if (!file) {
return;
}
const reader = new FileReader();
reader.onload = function(e) {
const img = new Image();
img.src = e.target.result;
img.onload = function() {
// 캔버스 크기를 이미지 크기에 맞춤
canvas.width = img.width;
canvas.height = img.height;
// 이미지 캔버스에 그림
context.drawImage(img, 0, 0, img.width, img.height);
// 모델 로드 및 객체 탐지
cocoSsd.load().then(model => {
model.detect(canvas).then(predictions => {
console.log(predictions);
drawPredictions(predictions);
});
});
}
};
reader.readAsDataURL(file);
});
// 예측된 객체 그리기
function drawPredictions(predictions) {
predictions.forEach(prediction => {
// 경계 상자 그리기
context.beginPath();
context.rect(...prediction.bbox);
context.lineWidth = 2;
context.strokeStyle = 'green';
context.fillStyle = 'green';
context.stroke();
// 레이블과 확률 표시
context.fillText(
`${prediction.class} (${Math.round(prediction.score * 100)}%)`,
prediction.bbox[0],
prediction.bbox[1] > 10 ? prediction.bbox[1] - 5 : 10
);
});
// 예측 결과 표시
result.innerHTML = predictions.map(p => `${p.class}: ${Math.round(p.score * 100)}%`).join('<br>');
}
</script>
</body>
</html>
※ 실행
728x90
반응형
'Software > JavaScript' 카테고리의 다른 글
| Javascript 시작하기 - 피아노 소리 (0) | 2024.07.29 |
|---|---|
| NodeJS 시작하기 - Google Cloud이미지를 저장 (0) | 2024.07.27 |
| Javascript 시작하기 - 음성인식 (0) | 2024.07.26 |
| Javascript 시작하기 - 다국어 방안 2 (0) | 2024.07.26 |
| Vue.js 시작하기 - 다국어 지원 (0) | 2024.07.26 |