Merge pull request #3 from hinxcode/loc-maps

Loc maps adaptation

Author: hinxcode

src/backend/services/embedding_service.py

@@ -57,11 +57,9 @@ def load_embeddings(self) -> None:
                 logger.info("Embeddings loaded successfully")
             else:
                 if not embeddings_path.exists():
-                    logger.warning(f"Embeddings file not found at {embeddings_path}")
+                    logger.error(f"Embeddings file not found at {embeddings_path}")
                 if not item_ids_path.exists():
-                    logger.warning(f"Item IDs file not found at {item_ids_path}")
-                    
-                logger.error("Failed to load embeddings: files not found")
+                    logger.error(f"Item IDs file not found at {item_ids_path}")
         except Exception as e:
             logger.error(f"Error loading embeddings: {str(e)}")
             logger.error(traceback.format_exc())

src/frontend/maps/src/App.jsx

@@ -2,11 +2,11 @@ import React, { useState, useCallback, useRef, useEffect } from 'react';
 import SearchBar from './components/SearchBar';
 import Lightbox from './components/Lightbox';
 import SearchResults from './components/SearchResults';
-import { searchByText, searchByImage, getImageUrl, getEmbeddingStats } from './services/api';
+import { searchByText, searchByImage, getEmbeddingStats, getIiifInfo } from './services/api';
 import './App.css';
 
 function App() {
-  const [photos, setPhotos] = useState([]);
+  const [maps, setMaps] = useState([]);
   const [searchQuery, setSearchQuery] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
@@ -32,9 +32,9 @@ function App() {
     fetchEmbeddingStats();
   }, []);
 
-  const formatPhotosForGallery = (results) => {
+  const formatItemsForGallery = (results) => {
     return results.map(result => ({
-      src: getImageUrl(result.id, 200),
+      src: result.metadata.paths.thumbnail,
       width: 200,
       height: 150,
       alt: result.file_name,
@@ -50,7 +50,7 @@ function App() {
 
     try {
       const results = await searchByText(query, resultsPerPage, currentPage);
-      setPhotos(formatPhotosForGallery(results));
+      setMaps(formatItemsForGallery(results));
       setHasMore(results.length >= resultsPerPage);
     } catch (error) {
       console.error('Error performing search:', error);
@@ -66,7 +66,7 @@ function App() {
 
     try {
       const results = await searchByImage(image, resultsPerPage, currentPage);
-      setPhotos(formatPhotosForGallery(results));
+      setMaps(formatItemsForGallery(results));
       setHasMore(results.length >= resultsPerPage);
     } catch (error) {
       console.error('Error performing search:', error);
@@ -84,21 +84,28 @@ function App() {
     }
   }, [currentPage]);
 
-  const handleLightboxOpened = useCallback((index) => {
-    const selectedItem = photos[index].originalData;
-    const imageUrl = getImageUrl(selectedItem.id, 1600);
+  const handleLightboxOpened = useCallback(async (selectedMap) => {
+    try {
+      const iiifInfo = await getIiifInfo(selectedMap.originalData.metadata.iiif_id);
 
-    setSelectedMap(imageUrl);
-  }, [photos]);
+      setSelectedMap({
+        ...selectedMap.originalData,
+        iiifInfo: iiifInfo
+      });
+    } catch (error) {
+      console.error("Failed to get IIIF info:", error);
+      setError('Failed to get IIIF info from Library of Congress\'s API. Please try again.');
+    }
+  }, [setSelectedMap]);
 
   const handleLightboxClosed = useCallback(() => {
     setSelectedMap(null);
-  }, []);
+  }, [setSelectedMap]);
 
   const handleSearchModeChanged = useCallback((mode) => {
     setSearchMode(mode);
     setCurrentPage(1);
-    setPhotos([]);
+    setMaps([]);
     setHasMore(false);
 
     if (mode === 'text') {
@@ -135,7 +142,7 @@ function App() {
           </p>
         )}
         <SearchResults 
-          photos={photos}
+          items={maps}
           isLoading={isLoading}
           error={error}
           onClick={handleLightboxOpened}
@@ -147,7 +154,7 @@ function App() {
 
       <Lightbox
         isVisible={!!selectedMap}
-        imageUrl={selectedMap}
+        data={selectedMap}
         onBack={handleLightboxClosed}
       />
     </div>

src/frontend/maps/src/components/Lightbox.css

@@ -84,7 +84,7 @@
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
-  color: white;
+  color: #eee;
   background-color: rgba(0, 0, 0, 0.7);
   padding: 20px;
   border-radius: 8px;
@@ -106,7 +106,7 @@
   margin-top: 10px;
   padding: 8px 16px;
   background-color: #3498db;
-  color: white;
+  color: #eee;
   border: none;
   border-radius: 4px;
   cursor: pointer;
@@ -115,3 +115,33 @@
 .lightbox-error button:hover {
   background-color: #2980b9;
 }
+
+.lightbox-info-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: #eee;
+  padding: 15px;
+  margin: 20px;
+  border-radius: 8px;
+  max-width: 400px;
+  text-align: left;
+  z-index: 1001;
+}
+
+.lightbox-title {
+  margin: 0 0 10px 0;
+  font-size: 1.1rem;
+  font-weight: bold;
+}
+
+.lightbox-source-link {
+  color: #a9d9f7;
+  text-decoration: none;
+  font-size: 0.9rem;
+}
+
+.lightbox-source-link:hover {
+  text-decoration: underline;
+}

src/frontend/maps/src/components/Lightbox.jsx

@@ -1,56 +1,66 @@
 import React, { useRef, useEffect, useState } from 'react';
 import OpenSeadragon from 'openseadragon';
+import { getLocInfo } from '../services/api';
 import './Lightbox.css';
 
-const Lightbox = React.memo(({ imageUrl, onBack, isVisible }) => {
+const Lightbox = React.memo(({ data, onBack, isVisible }) => {
   const viewerRef = useRef(null);
-  const [isLoading, setIsLoading] = useState(true);
+  const [isViewerLoading, setIsViewerLoading] = useState(true);
+  const [isMapInfoLoading, setIsMapInfoLoading] = useState(true);
   const [error, setError] = useState(null);
+  const [mapTitle, setMapTitle] = useState('');
 
   useEffect(() => {
     if (!isVisible || !viewerRef.current) {
       return;
     }
 
-    setIsLoading(true);
+    setIsViewerLoading(true);
     setError(null);
 
     const viewer = OpenSeadragon({
       element: viewerRef.current,
       prefixUrl: 'https://openseadragon.github.io/openseadragon/images/',
-      tileSources: {
-        type: 'image',
-        url: imageUrl
-      },
+      tileSources: data.iiifInfo,
       showNavigator: true,
       minZoomLevel: 0.1,
       defaultZoomLevel: 0.5,
       maxZoomLevel: 10
     });
 
     viewer.addHandler('open', () => {
-      setIsLoading(false);
+      setIsViewerLoading(false);
     });
 
     viewer.addHandler('open-failed', () => {
       setError('Failed to load image');
-      setIsLoading(false);
+      setIsViewerLoading(false);
     });
 
     return () => {
       viewer.destroy();
     };
-  }, [imageUrl, isVisible]);
+  }, [data, isVisible]);
 
   useEffect(() => {
-    if (!isLoading) return;
+    if (!data) return;
 
-    const timeoutId = setTimeout(() => {
-      setIsLoading(false);
-    }, 5000);
-
-    return () => clearTimeout(timeoutId);
-  }, [isLoading]);
+    setIsMapInfoLoading(true);
+    setMapTitle('');
+    
+    try {
+      const fetchLocInfo = async () => {
+        const locInfo = await getLocInfo(data.metadata.url);
+        setMapTitle(locInfo?.item?.title || 'Untitled');
+        setIsMapInfoLoading(false);
+      };
+      fetchLocInfo();
+    } catch (error) {
+      console.error('Failed to fetch LOC info:', error);
+      setError('Failed to get map\'s info from Library of Congress\'s API. Please try again.');
+      setIsMapInfoLoading(false);
+    }
+  }, [data]);
 
   return (
     <div className={`lightbox-overlay ${isVisible ? 'visible' : ''}`}>
@@ -59,19 +69,37 @@ const Lightbox = React.memo(({ imageUrl, onBack, isVisible }) => {
           Back to results
         </button>
         <div className="tile-gallery-viewer" ref={viewerRef}>
-          {isLoading && isVisible && (
+          {isVisible && isViewerLoading &&(
             <div className="lightbox-loading">
               <div className="lightbox-spinner" />
               <p>Loading map...</p>
             </div>
           )}
-          {error && isVisible && (
+          {isVisible && error && (
             <div className="lightbox-error">
               <div className="lightbox-error-icon">⚠️</div>
               <p>{error}</p>
             </div>
           )}
         </div>
+        {data && (
+          <div className="lightbox-info-overlay">
+            <h3 className="lightbox-title">
+              {
+                isMapInfoLoading ? (
+                  <span>Loading map's info...</span>
+                ) : (
+                  <span>{mapTitle}</span>
+                )
+              }
+            </h3>            
+            {data?.metadata?.url && (
+              <a href={data.metadata.url} target="_blank" rel="noopener noreferrer" className="lightbox-source-link">
+                View at Library of Congress
+              </a>
+            )}
+          </div>
+        )}
       </div>
     </div>
   );

src/frontend/maps/src/components/SearchResults.jsx

@@ -4,7 +4,7 @@ import Pagination from './Pagination';
 import './SearchResults.css';
 
 const SearchResults = React.memo(({ 
-  photos,
+  items,
   isLoading,
   error,
   onClick,
@@ -28,13 +28,13 @@ const SearchResults = React.memo(({
     );
   }
 
-  if (photos.length > 0) {
+  if (items.length > 0) {
     return (
       <div className="gallery-container">
         <Gallery 
-          images={photos}
+          images={items}
           enableImageSelection={false}
-          onClick={(index) => onClick(index)}
+          onClick={(index) => onClick(items[index])}
           margin={2}
           rowHeight={180}
           targetRowHeight={200}

src/frontend/maps/src/services/api.js

@@ -1,11 +1,37 @@
 const API_URL = import.meta.env.API_BASE_URL;
 
-export const getImageUrl = (documentId, size) => {
-  if (!documentId) return '';
-  if (size) {
-    return `${API_URL}/images/${encodeURIComponent(documentId)}?size=${size}`;
+export const getIiifInfo = async (iiifId) => {
+  const url = `https://tile.loc.gov/image-services/iiif/${iiifId}/info.json`;
+
+  try {
+    const response = await fetch(url);
+    
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    return await response.json();
+  } catch (error) {
+    console.error(`Failed to fetch IIIF info for ${iiifId}:`, error);
+    throw error;
+  }
+};
+
+export const getLocInfo = async (locItemUrl) => {
+  try {
+    const urlObject = new URL(locItemUrl);
+    urlObject.protocol = 'https';
+    urlObject.searchParams.set('fo', 'json');
+
+    const response = await fetch(urlObject.href);
+    
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    return await response.json();
+  } catch (error) {
+    console.error(`Failed to process or fetch LOC info for ${locItemUrl}:`, error);
+    throw error;
   }
-  return `${API_URL}/images/${encodeURIComponent(documentId)}`;
 };
 
 /**