Spaces:

HGKo
/

vision-web-app

Sleeping

vision-web-app / frontend /build /object-detection-search.html

David Ko

Add object detection vector search feature with UI and API endpoints

aa7ad0c about 1 month ago

24.2 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>객체 인식 결과 벡터 검색</title>
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
	<style>
	body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	padding: 20px;
	background-color: #f8f9fa;
	}
	.container {
	max-width: 1200px;
	margin: 0 auto;
	background-color: white;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	}
	.header {
	margin-bottom: 30px;
	text-align: center;
	}
	.upload-section, .detection-section, .search-section, .results-section {
	margin-bottom: 30px;
	padding: 20px;
	border: 1px solid #dee2e6;
	border-radius: 5px;
	}
	.canvas-container {
	position: relative;
	margin: 20px 0;
	}
	#imageCanvas {
	border: 1px solid #ddd;
	max-width: 100%;
	}
	.object-item {
	margin-bottom: 10px;
	padding: 10px;
	border: 1px solid #e9ecef;
	border-radius: 5px;
	background-color: #f8f9fa;
	}
	.result-item {
	display: flex;
	margin-bottom: 20px;
	padding: 15px;
	border: 1px solid #e9ecef;
	border-radius: 5px;
	background-color: #f8f9fa;
	}
	.result-image {
	width: 150px;
	height: 150px;
	object-fit: cover;
	margin-right: 15px;
	border: 1px solid #ddd;
	}
	.result-details {
	flex-grow: 1;
	}
	.badge {
	margin-right: 5px;
	}
	.nav-tabs {
	margin-bottom: 20px;
	}
	.tab-content {
	padding: 20px;
	border: 1px solid #dee2e6;
	border-top: none;
	border-radius: 0 0 5px 5px;
	}
	.bbox-overlay {
	position: absolute;
	border: 2px solid;
	background-color: rgba(255, 255, 255, 0.2);
	pointer-events: none;
	}
	.bbox-label {
	position: absolute;
	background-color: rgba(0, 0, 0, 0.7);
	color: white;
	padding: 2px 6px;
	border-radius: 3px;
	font-size: 12px;
	pointer-events: none;
	}
	.spinner-border {
	width: 1rem;
	height: 1rem;
	margin-right: 0.5rem;
	}
	.loading {
	display: none;
	align-items: center;
	margin-top: 10px;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="header">
	<h1>객체 인식 결과 벡터 검색</h1>
	<p class="lead">이미지에서 인식된 객체를 벡터 DB에 저장하고 유사한 객체를 검색합니다.</p>
	</div>

	<ul class="nav nav-tabs" id="myTab" role="tablist">
	<li class="nav-item" role="presentation">
	<button class="nav-link active" id="detect-tab" data-bs-toggle="tab" data-bs-target="#detect" type="button" role="tab" aria-controls="detect" aria-selected="true">객체 인식 및 저장</button>
	</li>
	<li class="nav-item" role="presentation">
	<button class="nav-link" id="search-tab" data-bs-toggle="tab" data-bs-target="#search" type="button" role="tab" aria-controls="search" aria-selected="false">객체 검색</button>
	</li>
	</ul>

	<div class="tab-content" id="myTabContent">
	<!-- 객체 인식 및 저장 탭 -->
	<div class="tab-pane fade show active" id="detect" role="tabpanel" aria-labelledby="detect-tab">
	<div class="upload-section">
	<h3>이미지 업로드</h3>
	<div class="mb-3">
	<input class="form-control" type="file" id="imageUpload" accept="image/*">
	</div>
	<button id="detectObjectsBtn" class="btn btn-primary" disabled>객체 인식하기</button>
	<div class="loading" id="detectLoading">
	<div class="spinner-border text-primary" role="status"></div>
	<span>객체 인식 중...</span>
	</div>
	</div>

	<div class="detection-section">
	<h3>인식 결과</h3>
	<div class="canvas-container">
	<canvas id="imageCanvas"></canvas>
	<!-- 바운딩 박스와 라벨은 자바스크립트로 추가됩니다 -->
	</div>
	<div id="detectedObjects" class="mt-3">
	<p>인식된 객체가 여기에 표시됩니다.</p>
	</div>
	<button id="saveToVectorDBBtn" class="btn btn-success mt-3" disabled>벡터 DB에 저장하기</button>
	<div class="loading" id="saveLoading">
	<div class="spinner-border text-success" role="status"></div>
	<span>벡터 DB에 저장 중...</span>
	</div>
	</div>
	</div>

	<!-- 객체 검색 탭 -->
	<div class="tab-pane fade" id="search" role="tabpanel" aria-labelledby="search-tab">
	<div class="search-section">
	<h3>검색 방법</h3>
	<div class="mb-3">
	<select class="form-select" id="searchType">
	<option value="image">이미지로 검색</option>
	<option value="class">클래스로 검색</option>
	</select>
	</div>

	<div id="imageSearchSection">
	<div class="mb-3">
	<label for="searchImageUpload" class="form-label">검색할 이미지 업로드</label>
	<input class="form-control" type="file" id="searchImageUpload" accept="image/*">
	</div>
	</div>

	<div id="classSearchSection" style="display: none;">
	<div class="mb-3">
	<label for="classNameInput" class="form-label">클래스 이름</label>
	<input type="text" class="form-control" id="classNameInput" placeholder="예: person, car, dog 등">
	</div>
	</div>

	<div class="mb-3">
	<label for="resultCount" class="form-label">검색 결과 수</label>
	<input type="number" class="form-control" id="resultCount" min="1" max="20" value="5">
	</div>

	<button id="searchBtn" class="btn btn-primary">검색하기</button>
	<div class="loading" id="searchLoading">
	<div class="spinner-border text-primary" role="status"></div>
	<span>검색 중...</span>
	</div>
	</div>

	<div class="results-section">
	<h3>검색 결과</h3>
	<div id="searchResults">
	<p>검색 결과가 여기에 표시됩니다.</p>
	</div>
	</div>
	</div>
	</div>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
	<script>
	// 전역 변수
	let currentImage = null;
	let detectedObjects = [];
	let imageWidth = 0;
	let imageHeight = 0;
	const colors = ['#FF5733', '#33FF57', '#3357FF', '#F033FF', '#FF3333', '#33FFFF', '#FFFF33'];

	// DOM 요소
	const imageUpload = document.getElementById('imageUpload');
	const detectObjectsBtn = document.getElementById('detectObjectsBtn');
	const imageCanvas = document.getElementById('imageCanvas');
	const ctx = imageCanvas.getContext('2d');
	const detectedObjectsDiv = document.getElementById('detectedObjects');
	const saveToVectorDBBtn = document.getElementById('saveToVectorDBBtn');
	const searchType = document.getElementById('searchType');
	const imageSearchSection = document.getElementById('imageSearchSection');
	const classSearchSection = document.getElementById('classSearchSection');
	const searchImageUpload = document.getElementById('searchImageUpload');
	const classNameInput = document.getElementById('classNameInput');
	const resultCount = document.getElementById('resultCount');
	const searchBtn = document.getElementById('searchBtn');
	const searchResults = document.getElementById('searchResults');

	// 로딩 표시
	const detectLoading = document.getElementById('detectLoading');
	const saveLoading = document.getElementById('saveLoading');
	const searchLoading = document.getElementById('searchLoading');

	// 이미지 업로드 처리
	imageUpload.addEventListener('change', function(e) {
	const file = e.target.files[0];
	if (!file) return;

	const reader = new FileReader();
	reader.onload = function(event) {
	const img = new Image();
	img.onload = function() {
	// 캔버스 크기 설정
	imageWidth = img.width;
	imageHeight = img.height;

	// 캔버스 크기를 이미지에 맞게 조정하되, 최대 너비 제한
	const maxWidth = 800;
	let displayWidth = img.width;
	let displayHeight = img.height;

	if (displayWidth > maxWidth) {
	const ratio = maxWidth / displayWidth;
	displayWidth = maxWidth;
	displayHeight = displayHeight * ratio;
	}

	imageCanvas.width = displayWidth;
	imageCanvas.height = displayHeight;

	// 이미지 그리기
	ctx.drawImage(img, 0, 0, displayWidth, displayHeight);

	// 현재 이미지 저장
	currentImage = event.target.result;

	// 객체 인식 버튼 활성화
	detectObjectsBtn.disabled = false;

	// 이전 객체 인식 결과 초기화
	detectedObjects = [];
	detectedObjectsDiv.innerHTML = '<p>인식된 객체가 여기에 표시됩니다.</p>';
	saveToVectorDBBtn.disabled = true;

	// 바운딩 박스 제거
	clearBoundingBoxes();
	};
	img.src = event.target.result;
	};
	reader.readAsDataURL(file);
	});

	// 객체 인식 처리
	detectObjectsBtn.addEventListener('click', function() {
	if (!currentImage) return;

	// 로딩 표시
	detectLoading.style.display = 'flex';
	detectObjectsBtn.disabled = true;

	// 객체 인식 API 호출
	fetch('/api/detect', {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json'
	},
	body: JSON.stringify({
	image: currentImage,
	model: 'yolo' // 기본 모델로 YOLO 사용
	})
	})
	.then(response => response.json())
	.then(data => {
	// 로딩 숨기기
	detectLoading.style.display = 'none';
	detectObjectsBtn.disabled = false;

	if (data.error) {
	alert('객체 인식 중 오류가 발생했습니다: ' + data.error);
	return;
	}

	// 인식된 객체 저장
	detectedObjects = data.objects \|\| [];

	// 결과가 없는 경우
	if (detectedObjects.length === 0) {
	detectedObjectsDiv.innerHTML = '<p>인식된 객체가 없습니다.</p>';
	saveToVectorDBBtn.disabled = true;
	return;
	}

	// 바운딩 박스 그리기
	drawBoundingBoxes();

	// 인식된 객체 목록 표시
	displayDetectedObjects();

	// 벡터 DB 저장 버튼 활성화
	saveToVectorDBBtn.disabled = false;
	})
	.catch(error => {
	detectLoading.style.display = 'none';
	detectObjectsBtn.disabled = false;
	console.error('Error:', error);
	alert('객체 인식 요청 중 오류가 발생했습니다.');
	});
	});

	// 바운딩 박스 그리기 함수
	function drawBoundingBoxes() {
	// 캔버스 크기 가져오기
	const canvasWidth = imageCanvas.width;
	const canvasHeight = imageCanvas.height;

	// 기존 바운딩 박스 제거
	clearBoundingBoxes();

	// 캔버스 컨테이너 가져오기
	const canvasContainer = document.querySelector('.canvas-container');

	// 각 객체에 대해 바운딩 박스 그리기
	detectedObjects.forEach((obj, index) => {
	const bbox = obj.bbox;
	const colorIndex = index % colors.length;

	// 상대 좌표를 캔버스 좌표로 변환
	const x = bbox.x * canvasWidth;
	const y = bbox.y * canvasHeight;
	const width = bbox.width * canvasWidth;
	const height = bbox.height * canvasHeight;

	// 바운딩 박스 요소 생성
	const boxElement = document.createElement('div');
	boxElement.className = 'bbox-overlay';
	boxElement.style.left = `${x}px`;
	boxElement.style.top = `${y}px`;
	boxElement.style.width = `${width}px`;
	boxElement.style.height = `${height}px`;
	boxElement.style.borderColor = colors[colorIndex];

	// 라벨 요소 생성
	const labelElement = document.createElement('div');
	labelElement.className = 'bbox-label';
	labelElement.style.left = `${x}px`;
	labelElement.style.top = `${y - 20}px`;
	labelElement.style.backgroundColor = colors[colorIndex];
	labelElement.textContent = `${obj.class} ${Math.round(obj.confidence * 100)}%`;

	// 요소를 캔버스 컨테이너에 추가
	canvasContainer.appendChild(boxElement);
	canvasContainer.appendChild(labelElement);
	});
	}

	// 바운딩 박스 제거 함수
	function clearBoundingBoxes() {
	const overlays = document.querySelectorAll('.bbox-overlay, .bbox-label');
	overlays.forEach(overlay => overlay.remove());
	}

	// 인식된 객체 목록 표시 함수
	function displayDetectedObjects() {
	let html = '<h4>인식된 객체 목록:</h4><ul class="list-group">';

	detectedObjects.forEach((obj, index) => {
	const colorIndex = index % colors.length;
	html += `
	<li class="list-group-item object-item">
	<div class="d-flex justify-content-between align-items-center">
	<div>
	<span class="badge bg-primary">${index + 1}</span>
	<span class="badge" style="background-color: ${colors[colorIndex]}">${obj.class}</span>
	<span>신뢰도: ${Math.round(obj.confidence * 100)}%</span>
	</div>
	</div>
	</li>
	`;
	});

	html += '</ul>';
	detectedObjectsDiv.innerHTML = html;
	}

	// 벡터 DB에 저장 처리
	saveToVectorDBBtn.addEventListener('click', function() {
	if (!currentImage \|\| detectedObjects.length === 0) return;

	// 로딩 표시
	saveLoading.style.display = 'flex';
	saveToVectorDBBtn.disabled = true;

	// 벡터 DB 저장 API 호출
	fetch('/api/add-detected-objects', {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json'
	},
	body: JSON.stringify({
	image: currentImage,
	objects: detectedObjects
	})
	})
	.then(response => response.json())
	.then(data => {
	// 로딩 숨기기
	saveLoading.style.display = 'none';
	saveToVectorDBBtn.disabled = false;

	if (data.error) {
	alert('벡터 DB 저장 중 오류가 발생했습니다: ' + data.error);
	return;
	}

	alert(`성공적으로 ${data.object_count}개의 객체를 벡터 DB에 저장했습니다.`);
	})
	.catch(error => {
	saveLoading.style.display = 'none';
	saveToVectorDBBtn.disabled = false;
	console.error('Error:', error);
	alert('벡터 DB 저장 요청 중 오류가 발생했습니다.');
	});
	});

	// 검색 유형 변경 처리
	searchType.addEventListener('change', function() {
	if (this.value === 'image') {
	imageSearchSection.style.display = 'block';
	classSearchSection.style.display = 'none';
	} else if (this.value === 'class') {
	imageSearchSection.style.display = 'none';
	classSearchSection.style.display = 'block';
	}
	});

	// 검색 이미지 업로드 처리
	searchImageUpload.addEventListener('change', function(e) {
	const file = e.target.files[0];
	if (!file) return;

	const reader = new FileReader();
	reader.onload = function(event) {
	// 이미지 데이터 저장
	searchImageUpload.dataset.image = event.target.result;
	};
	reader.readAsDataURL(file);
	});

	// 검색 처리
	searchBtn.addEventListener('click', function() {
	// 로딩 표시
	searchLoading.style.display = 'flex';
	searchBtn.disabled = true;

	// 검색 유형에 따라 요청 데이터 구성
	const searchTypeValue = searchType.value;
	const nResults = parseInt(resultCount.value) \|\| 5;
	let requestData = {
	searchType: searchTypeValue,
	nResults: nResults
	};

	if (searchTypeValue === 'image') {
	const imageData = searchImageUpload.dataset.image;
	if (!imageData) {
	alert('검색할 이미지를 업로드해주세요.');
	searchLoading.style.display = 'none';
	searchBtn.disabled = false;
	return;
	}
	requestData.image = imageData;
	} else if (searchTypeValue === 'class') {
	const className = classNameInput.value.trim();
	if (!className) {
	alert('검색할 클래스 이름을 입력해주세요.');
	searchLoading.style.display = 'none';
	searchBtn.disabled = false;
	return;
	}
	requestData.className = className;
	}

	// 검색 API 호출
	fetch('/api/search-similar-objects', {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json'
	},
	body: JSON.stringify(requestData)
	})
	.then(response => response.json())
	.then(data => {
	// 로딩 숨기기
	searchLoading.style.display = 'none';
	searchBtn.disabled = false;

	if (data.error) {
	alert('검색 중 오류가 발생했습니다: ' + data.error);
	return;
	}

	// 검색 결과 표시
	displaySearchResults(data.results);
	})
	.catch(error => {
	searchLoading.style.display = 'none';
	searchBtn.disabled = false;
	console.error('Error:', error);
	alert('검색 요청 중 오류가 발생했습니다.');
	});
	});

	// 검색 결과 표시 함수
	function displaySearchResults(results) {
	if (!results \|\| results.length === 0) {
	searchResults.innerHTML = '<p>검색 결과가 없습니다.</p>';
	return;
	}

	let html = '<div class="row">';

	results.forEach((result, index) => {
	const metadata = result.metadata \|\| {};
	const distance = result.distance ? (1 - result.distance).toFixed(2) * 100 : 0;
	const imageId = metadata.image_id \|\| '';
	const className = metadata.class \|\| '';
	const confidence = metadata.confidence ? Math.round(metadata.confidence * 100) : 0;
	const bbox = metadata.bbox \|\| {};

	html += `
	<div class="col-md-6 mb-3">
	<div class="card">
	<div class="card-body">
	<h5 class="card-title">결과 #${index + 1}</h5>
	<div class="d-flex justify-content-between">
	<span class="badge bg-primary">${className}</span>
	<span class="badge bg-info">유사도: ${distance}%</span>
	</div>
	<p class="card-text mt-2">
	<small>객체 ID: ${result.id}</small><br>
	<small>이미지 ID: ${imageId}</small><br>
	<small>신뢰도: ${confidence}%</small><br>
	<small>위치: X=${(bbox.x * 100).toFixed(1)}%, Y=${(bbox.y * 100).toFixed(1)}%, W=${(bbox.width * 100).toFixed(1)}%, H=${(bbox.height * 100).toFixed(1)}%</small>
	</p>
	</div>
	</div>
	</div>
	`;
	});

	html += '</div>';
	searchResults.innerHTML = html;
	}
	</script>
	</body>
	</html>