Spaces:

HGKo
/

vision-web-app

Runtime error

vision-web-app / frontend /build /similar-images.html

David Ko

유사 이미지 검색 기능 추가: CLIP 모델과 ChromaDB 벡터 데이터베이스 활용

9d90c9e 3 months ago

11.7 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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
	<style>
	.image-container {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-top: 20px;
	}
	.image-card {
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 10px;
	width: 220px;
	}
	.image-preview {
	width: 200px;
	height: 200px;
	object-fit: cover;
	border-radius: 4px;
	margin-bottom: 10px;
	}
	.spinner-border {
	display: none;
	}
	.result-container {
	margin-top: 30px;
	}
	.similar-image {
	width: 150px;
	height: 150px;
	object-fit: cover;
	border-radius: 4px;
	}
	.similar-item {
	margin-bottom: 15px;
	}
	</style>
	</head>
	<body>
	<div class="container mt-5">
	<h1 class="mb-4">유사 이미지 검색</h1>

	<div class="row">
	<div class="col-md-6">
	<div class="card">
	<div class="card-header">
	<h5>이미지 업로드</h5>
	</div>
	<div class="card-body">
	<form id="uploadForm">
	<div class="mb-3">
	<label for="imageInput" class="form-label">이미지 선택</label>
	<input type="file" class="form-control" id="imageInput" accept="image/*">
	</div>
	<div class="mb-3">
	<div class="form-check">
	<input class="form-check-input" type="checkbox" id="addToCollection">
	<label class="form-check-label" for="addToCollection">
	컬렉션에 이미지 추가
	</label>
	</div>
	</div>
	<button type="submit" class="btn btn-primary">
	<span class="spinner-border spinner-border-sm" id="searchSpinner" role="status" aria-hidden="true"></span>
	유사 이미지 검색
	</button>
	</form>

	<div class="mt-3">
	<div id="previewContainer" style="display: none;">
	<h6>업로드된 이미지:</h6>
	<img id="imagePreview" class="image-preview" src="" alt="Preview">
	</div>
	</div>
	</div>
	</div>

	<div class="card mt-4">
	<div class="card-header">
	<h5>샘플 이미지 추가</h5>
	</div>
	<div class="card-body">
	<p>벡터 DB에 샘플 이미지를 추가합니다.</p>
	<button id="addSamplesBtn" class="btn btn-secondary">
	<span class="spinner-border spinner-border-sm" id="sampleSpinner" role="status" aria-hidden="true"></span>
	샘플 이미지 추가
	</button>
	</div>
	</div>
	</div>

	<div class="col-md-6">
	<div class="card">
	<div class="card-header">
	<h5>검색 결과</h5>
	</div>
	<div class="card-body">
	<div id="resultsContainer">
	<p id="noResults">검색 결과가 여기에 표시됩니다.</p>
	<div id="similarImagesContainer" class="row"></div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<script>
	// 이미지 미리보기
	document.getElementById('imageInput').addEventListener('change', function(e) {
	const file = e.target.files[0];
	if (file) {
	const reader = new FileReader();
	reader.onload = function(event) {
	document.getElementById('imagePreview').src = event.target.result;
	document.getElementById('previewContainer').style.display = 'block';
	};
	reader.readAsDataURL(file);
	}
	});

	// 폼 제출 처리
	document.getElementById('uploadForm').addEventListener('submit', async function(e) {
	e.preventDefault();

	const fileInput = document.getElementById('imageInput');
	const addToCollection = document.getElementById('addToCollection').checked;

	if (!fileInput.files[0]) {
	alert('이미지를 선택해주세요.');
	return;
	}

	// 로딩 표시
	document.getElementById('searchSpinner').style.display = 'inline-block';

	const formData = new FormData();
	formData.append('image', fileInput.files[0]);

	try {
	// 컬렉션에 추가 옵션이 선택된 경우
	if (addToCollection) {
	const addResponse = await fetch('/api/add-to-collection', {
	method: 'POST',
	body: formData
	});
	const addResult = await addResponse.json();
	console.log('Add to collection result:', addResult);
	}

	// 유사 이미지 검색
	const searchResponse = await fetch('/api/similar-images', {
	method: 'POST',
	body: formData
	});

	const searchResult = await searchResponse.json();
	console.log('Search result:', searchResult);

	// 결과 표시
	displayResults(searchResult);
	} catch (error) {
	console.error('Error:', error);
	alert('오류가 발생했습니다: ' + error.message);
	} finally {
	// 로딩 표시 제거
	document.getElementById('searchSpinner').style.display = 'none';
	}
	});

	// 결과 표시 함수
	function displayResults(results) {
	const container = document.getElementById('similarImagesContainer');
	const noResults = document.getElementById('noResults');

	container.innerHTML = '';

	if (results.error) {
	noResults.textContent = '오류: ' + results.error;
	noResults.style.display = 'block';
	return;
	}

	if (!results.similar_images \|\| results.similar_images.length === 0) {
	noResults.textContent = '유사한 이미지를 찾을 수 없습니다. 먼저 이미지를 컬렉션에 추가해보세요.';
	noResults.style.display = 'block';
	return;
	}

	noResults.style.display = 'none';

	results.similar_images.forEach((item, index) => {
	const col = document.createElement('div');
	col.className = 'col-6 similar-item';

	const card = document.createElement('div');
	card.className = 'card h-100';

	// 이미지 URL이 메타데이터에 있는 경우
	let imageUrl = '';
	if (item.metadata && item.metadata.url) {
	imageUrl = item.metadata.url;
	} else {
	// 실제 구현에서는 이미지 ID로 이미지를 가져오는 API가 필요할 수 있음
	imageUrl = 'https://via.placeholder.com/150?text=Image+' + (index + 1);
	}

	const distance = item.distance ? item.distance.toFixed(4) : 'N/A';

	card.innerHTML = `
	<img src="${imageUrl}" class="similar-image card-img-top" alt="Similar Image ${index + 1}">
	<div class="card-body">
	<h6 class="card-title">유사도: ${distance}</h6>
	<p class="card-text">ID: ${item.id.substring(0, 8)}...</p>
	</div>
	`;

	col.appendChild(card);
	container.appendChild(col);
	});
	}

	// 샘플 이미지 추가
	document.getElementById('addSamplesBtn').addEventListener('click', async function() {
	const spinner = document.getElementById('sampleSpinner');
	spinner.style.display = 'inline-block';

	try {
	// 샘플 이미지 URL 배열 (실제 구현에서는 적절한 이미지로 변경)
	const sampleImages = [
	{ url: 'https://source.unsplash.com/random/300x300?cat', label: 'cat' },
	{ url: 'https://source.unsplash.com/random/300x300?dog', label: 'dog' },
	{ url: 'https://source.unsplash.com/random/300x300?bird', label: 'bird' },
	{ url: 'https://source.unsplash.com/random/300x300?flower', label: 'flower' },
	{ url: 'https://source.unsplash.com/random/300x300?car', label: 'car' }
	];

	for (const sample of sampleImages) {
	// 이미지 가져오기
	const response = await fetch(sample.url);
	const blob = await response.blob();

	// FormData 생성
	const formData = new FormData();
	formData.append('image', blob, 'sample.jpg');
	formData.append('metadata', JSON.stringify({
	label: sample.label,
	url: sample.url
	}));

	// API 호출
	const addResponse = await fetch('/api/add-to-collection', {
	method: 'POST',
	body: formData
	});

	const result = await addResponse.json();
	console.log(`Added sample ${sample.label}:`, result);
	}

	alert('5개의 샘플 이미지가 컬렉션에 추가되었습니다.');
	} catch (error) {
	console.error('Error adding samples:', error);
	alert('샘플 이미지 추가 중 오류가 발생했습니다: ' + error.message);
	} finally {
	spinner.style.display = 'none';
	}
	});
	</script>

	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
	</body>
	</html>