Add object detection vector search feature with UI and API endpoints

api.py

@@ -43,6 +43,7 @@ except Exception as e:
 # Vector DB 초기화
 vector_db = None
 image_collection = None
+object_collection = None
 try:
     # ChromaDB 클라이언트 초기화 (인메모리 DB)
     vector_db = chromadb.Client()
@@ -57,11 +58,19 @@ try:
         get_or_create=True
     )
     
+    # 객체 인식 결과 컬렉션 생성
+    object_collection = vector_db.create_collection(
+        name="object_collection",
+        embedding_function=ef,
+        get_or_create=True
+    )
+    
     print("Vector DB initialized successfully")
 except Exception as e:
     print("Error initializing Vector DB:", e)
     vector_db = None
     image_collection = None
+    object_collection = None
 
 # YOLOv8 model
 yolo_model = None
@@ -598,6 +607,200 @@ def add_to_collection():
         print(f"Error in add-to-collection API: {e}")
         return jsonify({"error": str(e)}), 500
 
+@app.route('/api/add-detected-objects', methods=['POST'])
+def add_detected_objects():
+    """객체 인식 결과를 벡터 DB에 추가하는 API"""
+    if clip_model is None or object_collection is None:
+        return jsonify({"error": "Image embedding model or vector DB not available"})
+
+    try:
+        # 요청에서 이미지와 객체 검출 결과 데이터 추출
+        data = request.json
+        
+        if not data or 'image' not in data or 'objects' not in data:
+            return jsonify({"error": "Missing image or objects data"})
+        
+        # 이미지 데이터 처리
+        image_data = data['image']
+        if image_data.startswith('data:image'):
+            image_data = image_data.split(',')[1]
+        
+        image = Image.open(BytesIO(base64.b64decode(image_data))).convert('RGB')
+        image_width, image_height = image.size
+        
+        # 이미지 ID
+        image_id = data.get('imageId', str(uuid.uuid4()))
+        
+        # 객체 데이터 처리
+        objects = data['objects']
+        object_ids = []
+        object_embeddings = []
+        object_metadatas = []
+        
+        for obj in objects:
+            # 객체 ID 생성
+            object_id = f"{image_id}_{str(uuid.uuid4())[:8]}"
+            
+            # 바운딩 박스 정보 추출
+            bbox = obj.get('bbox', {})
+            x1 = bbox.get('x', 0)
+            y1 = bbox.get('y', 0)
+            width = bbox.get('width', 0)
+            height = bbox.get('height', 0)
+            
+            # 바운딩 박스를 이미지 좌표로 변환
+            x1_px = int(x1 * image_width)
+            y1_px = int(y1 * image_height)
+            width_px = int(width * image_width)
+            height_px = int(height * image_height)
+            
+            # 객체 이미지 자르기
+            try:
+                object_image = image.crop((x1_px, y1_px, x1_px + width_px, y1_px + height_px))
+                
+                # 임베딩 생성
+                embedding = generate_image_embedding(object_image)
+                if embedding is None:
+                    continue
+                
+                # 메타데이터 구성
+                metadata = {
+                    "image_id": image_id,
+                    "class": obj.get('class', ''),
+                    "confidence": obj.get('confidence', 0),
+                    "bbox": {
+                        "x": x1,
+                        "y": y1,
+                        "width": width,
+                        "height": height
+                    }
+                }
+                
+                object_ids.append(object_id)
+                object_embeddings.append(embedding)
+                object_metadatas.append(metadata)
+            except Exception as e:
+                print(f"Error processing object: {e}")
+                continue
+        
+        # 객체가 없는 경우
+        if not object_ids:
+            return jsonify({"error": "No valid objects to add"})
+        
+        # 객체들을 DB에 추가
+        object_collection.add(
+            ids=object_ids,
+            embeddings=object_embeddings,
+            metadatas=object_metadatas
+        )
+        
+        return jsonify({
+            "success": True,
+            "image_id": image_id,
+            "object_count": len(object_ids),
+            "object_ids": object_ids
+        })
+    
+    except Exception as e:
+        print(f"Error in add-detected-objects API: {e}")
+        return jsonify({"error": str(e)}), 500
+
+@app.route('/api/search-similar-objects', methods=['POST'])
+def search_similar_objects():
+    """유사한 객체 검색 API"""
+    if clip_model is None or object_collection is None:
+        return jsonify({"error": "Image embedding model or vector DB not available"})
+
+    try:
+        # 요청 데이터 추출
+        data = request.json
+        
+        if not data:
+            return jsonify({"error": "Missing request data"})
+        
+        # 검색 유형 결정
+        search_type = data.get('searchType', 'image')
+        n_results = int(data.get('nResults', 5))  # 결과 개수
+        
+        query_embedding = None
+        
+        if search_type == 'image' and 'image' in data:
+            # 이미지로 검색하는 경우
+            image_data = data['image']
+            if image_data.startswith('data:image'):
+                image_data = image_data.split(',')[1]
+            
+            image = Image.open(BytesIO(base64.b64decode(image_data))).convert('RGB')
+            query_embedding = generate_image_embedding(image)
+        
+        elif search_type == 'object' and 'objectId' in data:
+            # 객체 ID로 검색하는 경우
+            object_id = data['objectId']
+            result = object_collection.get(ids=[object_id], include=["embeddings"])
+            
+            if result and "embeddings" in result and len(result["embeddings"]) > 0:
+                query_embedding = result["embeddings"][0]
+        
+        elif search_type == 'class' and 'className' in data:
+            # 클래스 이름으로 검색하는 경우
+            class_name = data['className']
+            filter_query = {"class": {"$eq": class_name}}
+            
+            # 클래스로 필터링하여 검색
+            results = object_collection.query(
+                query_embeddings=None,
+                where=filter_query,
+                n_results=n_results,
+                include=["metadatas", "distances"]
+            )
+            
+            return jsonify({
+                "success": True,
+                "searchType": "class",
+                "results": format_object_results(results)
+            })
+        
+        else:
+            return jsonify({"error": "Invalid search parameters"})
+        
+        if query_embedding is None:
+            return jsonify({"error": "Failed to generate query embedding"})
+        
+        # 유사도 검색 실행
+        results = object_collection.query(
+            query_embeddings=[query_embedding],
+            n_results=n_results,
+            include=["metadatas", "distances"]
+        )
+        
+        return jsonify({
+            "success": True,
+            "searchType": search_type,
+            "results": format_object_results(results)
+        })
+    
+    except Exception as e:
+        print(f"Error in search-similar-objects API: {e}")
+        return jsonify({"error": str(e)}), 500
+
+def format_object_results(results):
+    """검색 결과 포맷팅"""
+    formatted_results = []
+    
+    if len(results['ids']) > 0 and len(results['ids'][0]) > 0:
+        for i, obj_id in enumerate(results['ids'][0]):
+            result_item = {
+                "id": obj_id,
+                "metadata": results['metadatas'][0][i] if 'metadatas' in results else {}
+            }
+            
+            if 'distances' in results:
+                result_item["distance"] = float(results['distances'][0][i])
+            
+            formatted_results.append(result_item)
+    
+    return formatted_results
+
 @app.route('/', defaults={'path': ''}, methods=['GET'])
 @app.route('/<path:path>', methods=['GET'])
 def serve_react(path):
@@ -610,7 +813,12 @@ def serve_react(path):
 @app.route('/similar-images', methods=['GET'])
 def similar_images_page():
     """Serve similar images search page"""
-    return send_from_directory(app.static_folder, 'similar-images.html')
+    return send_from_directory('frontend/build', 'similar-images.html')
+
+@app.route('/object-detection-search', methods=['GET'])
+def object_detection_search_page():
+    """Serve object detection search page"""
+    return send_from_directory('frontend/build', 'object-detection-search.html')
 
 @app.route('/api/status', methods=['GET'])
 def status():

frontend/build/object-detection-search.html

@@ -0,0 +1,581 @@
+<!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>