From efe4445639c9932504a5a42d9b3814d0f446e03f Mon Sep 17 00:00:00 2001 From: johnpccd Date: Sun, 25 May 2025 13:44:49 +0200 Subject: [PATCH] fix client search --- README.md | 1 + client/js/search.js | 74 ++++++++++++++++++++++++++++++--------------- 2 files changed, 51 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index 54ddaef..12970f0 100644 --- a/README.md +++ b/README.md @@ -679,6 +679,7 @@ This modular architecture provides several benefits: - [ ] Terraform dependencies - [ ] Move all auth logic to auth module - [ ] Remove bootstrap endpoint +- [ ] Move cloud function code to src folder and reuse code with embedding service ### Pagination Status ✅ - **✅ Images API**: Fully implemented with `skip`, `limit`, `total` parameters diff --git a/client/js/search.js b/client/js/search.js index 64dad32..b9a59b4 100644 --- a/client/js/search.js +++ b/client/js/search.js @@ -43,9 +43,13 @@ async function performSearch() { `; try { - const results = await apiClient.searchImages(query, threshold, maxResults); - await displaySearchResults(results, query); + console.log('Performing search with:', { query, threshold, maxResults }); + const response = await apiClient.searchImages(query, threshold, maxResults); + console.log('Search response received:', response); + + await displaySearchResults(response, query); } catch (error) { + console.error('Search error:', error); handleApiError(error, 'searching images'); resultsContainer.innerHTML = `
@@ -57,10 +61,18 @@ async function performSearch() { } // Display search results -async function displaySearchResults(results, query) { +async function displaySearchResults(response, query) { const container = document.getElementById('searchResults'); - if (!results || results.length === 0) { + console.log('displaySearchResults called with:', { response, query }); + + // Extract results array from response object + const results = response.results || response; + + console.log('Extracted results:', results); + console.log('Results is array:', Array.isArray(results)); + + if (!results || !Array.isArray(results) || results.length === 0) { container.innerHTML = `
@@ -71,6 +83,8 @@ async function displaySearchResults(results, query) { return; } + console.log('Processing', results.length, 'results'); + // Create results HTML with placeholder images first const resultsHtml = `
@@ -78,59 +92,67 @@ async function displaySearchResults(results, query) {

Found ${results.length} images matching "${escapeHtml(query)}"

- ${results.map(result => ` + ${results.map(result => { + // Handle both old format (result.image) and new format (direct result) + const image = result.image || result; + const similarity = result.similarity || result.similarity_score || 0; + + console.log('Processing result:', { result, image, similarity }); + + return `
- ${escapeHtml(result.image.description || 'Image')} + onclick="viewImage('${image.id}')">
- ${Math.round(result.similarity * 100)}% match + ${Math.round(similarity * 100)}% match
-
${escapeHtml(truncateText(result.image.description || 'Untitled', 60))}
+
${escapeHtml(truncateText(image.description || 'Untitled', 60))}

- ${formatDate(result.image.upload_date)} + ${formatDate(image.upload_date)}

- ${result.image.tags && result.image.tags.length > 0 ? ` + ${image.tags && image.tags.length > 0 ? `
- ${result.image.tags.slice(0, 3).map(tag => + ${image.tags.slice(0, 3).map(tag => `${escapeHtml(tag)}` ).join('')} - ${result.image.tags.length > 3 ? - `+${result.image.tags.length - 3}` : '' + ${image.tags.length > 3 ? + `+${image.tags.length - 3}` : '' }
` : ''}
- -
- Similarity: ${(result.similarity * 100).toFixed(1)}% + Similarity: ${(similarity * 100).toFixed(1)}%
- `).join('')} + `; + }).join('')}
`; @@ -138,9 +160,10 @@ async function displaySearchResults(results, query) { // Load actual images asynchronously (need to import loadImageBlob from images.js) for (const result of results) { + const image = result.image || result; if (typeof loadImageBlob === 'function') { - loadImageBlob(result.image.id).then(blobUrl => { - const imgElement = document.getElementById(`search-img-${result.image.id}`); + loadImageBlob(image.id).then(blobUrl => { + const imgElement = document.getElementById(`search-img-${image.id}`); const loadingOverlay = imgElement?.parentElement.querySelector('.loading-overlay'); if (imgElement) { @@ -151,8 +174,8 @@ async function displaySearchResults(results, query) { } } }).catch(error => { - console.error(`Failed to load search image ${result.image.id}:`, error); - const imgElement = document.getElementById(`search-img-${result.image.id}`); + console.error(`Failed to load search image ${image.id}:`, error); + const imgElement = document.getElementById(`search-img-${image.id}`); const loadingOverlay = imgElement?.parentElement.querySelector('.loading-overlay'); if (imgElement) { @@ -175,7 +198,10 @@ function addSearchRefinementOptions(query, results) { const container = document.getElementById('searchResults'); // Extract common tags from results - const allTags = results.flatMap(result => result.image.tags || []); + const allTags = results.flatMap(result => { + const image = result.image || result; + return image.tags || []; + }); const tagCounts = {}; allTags.forEach(tag => { tagCounts[tag] = (tagCounts[tag] || 0) + 1;