thinkorama

A Vue-based image gallery with AI-powered search using Tesseract OCR + BLIP-2 image captioning.

https://nitinkc.github.io/thinkorama/

Features

📸 Paginated image gallery with lightbox viewer
🔍 AI-powered search (Tesseract OCR + BLIP-2 image captioning)
🎯 Filter by category/folder
🖼️ Quick view all thumbnails with navigation
🎬 Fullscreen screensaver mode with speed controls
🎥 Fullscreen mode for lightbox images
▶️ Start screensaver from any image
🎯 Highlight animation when navigating from quick view
⏱️ Configurable screensaver intervals (30s to 10m) with progress bar

Quick Start

Prerequisites

Install Tesseract OCR

# macOS
brew install tesseract

# Ubuntu/Debian
sudo apt-get install tesseract-ocr

# Windows
# Download from https://github.com/UB-Mannheim/tesseract/wiki

Verify: tesseract --version

Create Virtual Environment and Install Dependencies

Each developer should create their own:

# Create virtual environment
python3 -m venv venv

# Activate (macOS/Linux)
source venv/bin/activate

# Activate (Windows)
venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

Note: BLIP-2 model (~990MB) downloads automatically on first run.

Initial Setup

Generate image list
```
python3 gen_images_json.py
```
Generate AI-powered search metadata
```
source venv/bin/activate
python gen_images_metadata_ai.py
```
⚠️ First run: ~5-10 minutes for 198 images (includes model download)
Run local server
```
python -m http.server 8000
```
Open: http://localhost:8000

Workflow

Adding New Images

Add images to images/ folder (organize in subfolders)
Update image list: python gen_images_json.py
Generate metadata (choose one):

Option A: Incremental (recommended for new images)
```
source venv/bin/activate
python gen_images_metadata_ai.py --incremental
```
- ✅ Only processes new images
- ✅ Preserves manual edits in existing metadata
- ✅ Faster for adding a few images
Option B: Full Regeneration
```
source venv/bin/activate
python gen_images_metadata_ai.py
```
- Creates automatic backup (images-metadata.backup.TIMESTAMP.json)
- Regenerates metadata for all images
- Use when you want to reprocess everything
Test locally: python -m http.server 8000

Converting PDFs to Images

If you have PDF files you want to include in the gallery:

Install ImageMagick

# macOS
brew install imagemagick

# Ubuntu/Debian
sudo apt-get install imagemagick

# Windows
# Download from https://imagemagick.org/script/download.php

Convert PDF to JPG images

# Single PDF (creates one image per page)
convert -density 300 path/to/document.pdf -quality 90 images/pdfs/document-%d.jpg

# Batch convert all PDFs in a folder
for pdf in pdfs/*.pdf; do
  filename=$(basename "$pdf" .pdf)
  convert -density 300 "$pdf" -quality 90 "images/pdfs/${filename}-%d.jpg"
done

Options explained:

-density 300 - High resolution (300 DPI)
-quality 90 - JPG quality (0-100, 90 is good balance)
%d - Page number placeholder (creates file-0.jpg, file-1.jpg, etc.)

Update image list and generate metadata

python gen_images_json.py
source venv/bin/activate
python gen_images_metadata_ai.py --incremental

Note: Each PDF page becomes a searchable image with OCR + AI captioning.

Metadata Generation Modes

# Incremental: Only process new images (preserves manual edits)
python gen_images_metadata_ai.py --incremental

# Full: Regenerate all (creates backup automatically)
python gen_images_metadata_ai.py

# Sample: Test with 10 images
python gen_images_metadata_ai.py --sample 10

# Help
python gen_images_metadata_ai.py --help

Fixing Individual Image Metadata

If an image has poor OCR results, regenerate it individually with enhanced preprocessing:

source venv/bin/activate
python gen_single_image_metadata.py path/to/image.jpg

This script:

Tries 5 different OCR strategies (default, preprocessed, PSM 6, PSM 11, PSM 3)
Shows all results side-by-side
Lets you choose whether to update the metadata file
Useful for debugging or improving specific images

Example:

python gen_single_image_metadata.py mind/Gj5Xi5ZXkAAL2u_.jpg

How It Works

Architecture

Static HTML (index.html) loads Vue 3 and lightGallery from CDNs
No build step - plain JavaScript components
Client-side search - all filtering happens in the browser

Search System

Two-tier AI approach for maximum searchability:

Tesseract OCR - Extracts actual text visible in images (book titles, quotes, diagrams)
BLIP-2 Image Captioning - AI-generated descriptions of image content and scenes

Process:

Run OCR + AI captioning locally on all images (one-time)
Generate images-metadata.json with extracted text + captions
Client-side search filters images in real-time
Commit metadata to repo, zero runtime cost

Searchable by:

📝 Extracted OCR text from images
🤖 AI-generated scene descriptions
📁 Folder names
📄 Filenames

Metadata Structure

{
  "path": "books/book1.jpg",
  "text": "books book1 Thinking Fast and Slow Daniel Kahneman a book cover with text",
  "ocr": "Thinking Fast and Slow Daniel Kahneman",
  "caption": "a book cover with text and a blue background",
  "folder": "books",
  "filename": "book1.jpg"
}

User Interface Features

Gallery Navigation

Pagination - Browse images 12 per page with smart page number display
Quick View - Click "⊞ Quick View" to see all thumbnails in a modal
Highlight Animation - When navigating from Quick View, the target image pulses with a blue border for easy identification

Image Lightbox

When you click an image thumbnail:

Zoom - Click zoom icon to zoom in/out
Fullscreen - Click ⛶ icon to view in fullscreen mode
Start Screensaver - Click ▶ icon to start screensaver from that image
Navigate - Use arrow buttons or swipe (mobile) to browse

Screensaver Mode

Start from header button or from any lightbox image:

Auto-advance - Images change automatically at set intervals
Progress Bar - Blue bar at bottom shows countdown to next image
Speed Controls - Move mouse to show speed panel (top-right)
- Options: 30s, 1m, 2m, 3m, 5m (default), 10m
- Active speed highlighted in blue
- Panel auto-hides after 3 seconds
Manual Navigation - Use ← → arrow keys to browse
Exit - Press Escape or click anywhere

Search

Text Search - Find images by OCR text, AI captions, or filenames
Folder Filter - Dropdown to filter by category (books, management, etc.)
Clear - X button to reset search and show all images

Scripts

gen_images_json.py - Scans images/ folder, creates images.json
gen_images_metadata_ai.py - OCR + BLIP-2 captioning for all images
gen_single_image_metadata.py - Enhanced OCR for individual images (5 strategies)

File Structure

thinkorama/
├── index.html              # Main entry point
├── style.css              # All styles
├── images/                # Image files (organized by folder)
├── js/
│   ├── app.js            # Vue app initialization
│   ├── gallery.js        # Gallery component with pagination
│   ├── search.js         # Search bar component
│   ├── quickview.js      # Thumbnail modal
│   └── screensaver.js    # Fullscreen slideshow
├── images.json           # Generated: list of image paths
├── images-metadata.json  # Generated: OCR + AI captions
└── venv/                 # Python virtual environment

Troubleshooting

"tesseract not found"

Ensure Tesseract is installed: tesseract --version
On macOS, restart terminal after brew install

"No module named 'pytesseract'" or "'transformers'"

Activate virtual environment: source venv/bin/activate
Install dependencies: pip install -r requirements.txt

Search not appearing

Check browser console for errors
Ensure images-metadata.json exists
Verify metadata was generated: python gen_images_metadata_ai.py

Poor OCR quality

Use gen_single_image_metadata.py for specific images
Tesseract works best with clear, high-contrast text
Some artistic/low-resolution images may not yield good results

Advanced Configuration

Improving OCR Quality

Edit gen_images_metadata_ai.py to add preprocessing:

from PIL import ImageEnhance, ImageFilter

# In extract_text_from_image function:
img = img.convert('L')  # Grayscale
img = ImageEnhance.Contrast(img).enhance(2)  # Increase contrast
text = pytesseract.image_to_string(img, config='--psm 6')

Using Different BLIP Models

# Larger model (better quality, slower):
processor = BlipProcessor.from_pretrained("Salesforce/blip-image-captioning-large")
model = BlipForConditionalGeneration.from_pretrained("Salesforce/blip-image-captioning-large")

Processing Sample Images

Test with fewer images:

python gen_images_metadata_ai.py --sample 10

Deployment

GitHub Pages / Static Hosting:

Generate metadata locally:

source venv/bin/activate
python gen_images_metadata_ai.py

Commit images.json and images-metadata.json
Push and deploy

Benefits:

✅ Zero server-side processing
✅ Instant client-side search
✅ Works offline after initial load
✅ Free hosting

Performance

Metadata Generation (one-time)

OCR: ~0.5-1 second per image
BLIP-2 captioning: ~0.5-1 second per image
Total: ~1-2 seconds per image
198 images: ~5-10 minutes

Client-Side Search

✅ Instant filtering in browser
✅ No server required
✅ Scales to thousands of images

Tech Stack

Frontend: Vue 3 (CDN), Bootstrap 5, lightGallery
AI/ML: Tesseract OCR, BLIP-2 (Salesforce)
Hosting: Static files (GitHub Pages compatible)
No build tools: Plain JavaScript, no bundler required

Name		Name	Last commit message	Last commit date
Latest commit History 82 Commits
.github		.github
images		images
js		js
.gitignore		.gitignore
README.md		README.md
gen_images_json.py		gen_images_json.py
gen_images_metadata_ai.py		gen_images_metadata_ai.py
gen_single_image_metadata.py		gen_single_image_metadata.py
images-metadata.json		images-metadata.json
images.json		images.json
index.html		index.html
requirements.txt		requirements.txt
style.css		style.css

Folders and files

Latest commit

History

Repository files navigation