Search results now display image thumbnails when the result is from a
diagram or image extraction:
Features:
- 20x20 thumbnail displayed instead of document icon for image results
- Visual "Diagram" badge with image icon for image/diagram results
- Pink border highlight on thumbnails (border-pink-400/30)
- Hover scale animation on thumbnails
- Graceful fallback to document icon if image fails to load
Implementation:
- Check for imagePath field in search results
- Display thumbnail using /api${imagePath} endpoint
- Add @error handler for broken images
- Larger thumbnail (80x80) for better diagram visibility
Files Changed:
- client/src/views/SearchView.vue - Thumbnail rendering and badge
Testing URL:
http://172.29.75.55:8083/search?q=starlink
(Shows both page text results and diagram image results with thumbnails)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit addresses multiple critical fixes and adds new functionality
for the NaviDocs local testing environment (port 8083):
Search Fixes:
- Fixed search to use backend /api/search instead of direct Meilisearch
- Resolves network accessibility issue when accessing from external IPs
- Search now works from http://172.29.75.55:8083/search
PDF Text Selection:
- Added PDF.js text layer for selectable text
- Imported pdf_viewer.css for proper text layer styling
- Changed text layer opacity to 1 for better interaction
- Added user-select: text for improved text selection
- Pink selection highlight (rgba(255, 92, 178, 0.3))
Database Cleanup:
- Created cleanup scripts to remove 20 duplicate documents
- Removed 753 orphaned entries from Meilisearch index
- Cleaned 17 document folders from filesystem
- Kept only newest version of each document
- Scripts: clean-duplicates.js, clean-meilisearch-orphans.js
Auto-Fill Feature:
- New /api/upload/quick-ocr endpoint for first-page OCR
- Automatically extracts metadata from PDFs on file selection
- Detects: boat make, model, year, name, and document title
- Checks both OCR text and filename for boat name
- Auto-fills upload form with extracted data
- Shows loading indicator during metadata extraction
- Graceful fallback to filename if OCR fails
Tenant Management:
- Updated organization ID to use boat name as tenant
- Falls back to "Liliane 1" for single-tenant setup
- Each boat becomes a unique tenant in the system
Files Changed:
- client/src/views/DocumentView.vue - Text layer implementation
- client/src/composables/useSearch.js - Backend API integration
- client/src/components/UploadModal.vue - Auto-fill feature
- server/routes/quick-ocr.js - OCR endpoint (new)
- server/index.js - Route registration
- server/scripts/* - Cleanup utilities (new)
Testing:
All features tested on local deployment at http://172.29.75.55:8083
- Backend: http://localhost:8001
- Frontend: http://localhost:8083
- Meilisearch: http://localhost:7700🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit implements comprehensive image extraction display for PDF documents:
1. Created useDocumentImages.js composable:
- fetchPageImages() function to retrieve images for specific page
- getImageUrl() helper to generate full image URLs
- Proper loading states and error handling
2. Created ImageOverlay.vue component:
- Positioned absolutely over PDF canvas at correct coordinates
- Semi-transparent border to indicate image location
- Hover tooltip displaying extracted OCR text with confidence level
- Click handler to open full-size image modal
- Accessibility support (keyboard navigation, ARIA labels)
- Responsive positioning with smooth hover effects
3. Modified DocumentView.vue:
- Imported and integrated useDocumentImages composable
- Added ImageOverlay components for each extracted image
- Integrated FigureZoom modal for full-size image viewing
- Automatically fetches images when page changes
- Displays image count in header
- Tracks canvas dimensions for proper image positioning
Features:
- Images overlay at exact PDF coordinates using scale conversion
- OCR text displayed in tooltip on hover
- Full-size image view on click with zoom/pan controls
- Reduced motion and high contrast mode support
- Seamless integration with existing PDF viewer
Generated with Claude Code (https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Comprehensive image extraction architecture design
- Database schema for document_images table
- Migration 004: Add document_images table with indexes
- Migration runner script
- Design and status documentation
Prepares foundation for image extraction feature with OCR on images.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
