CoolFace
Apppublic

davanstrien/ocr-time-capsule

sourceHugging Faceupdated 11mo agoView on Hugging Face
30likes
App README

OCR Time Capsule 📦

A fast, modern web interface for exploring and comparing OCR text improvements in HuggingFace datasets. Browse through pre-processed OCR improvements to see how AI models enhance historical document transcriptions.

OCR Time Capsule

Features

  • —Fast Navigation: Browse through large OCR datasets with keyboard shortcuts (J/K or arrow keys)
  • —Side-by-Side Comparison: View original OCR and improved text simultaneously
  • —Advanced Diff Visualization: Character, word, or line-level differences with color highlighting
  • —No Backend Required: Direct integration with HuggingFace Dataset Viewer API
  • —Responsive Design: Works seamlessly on desktop and mobile devices
  • —Dark Mode: Easy on the eyes for extended reading sessions
  • —URL Sharing: Share specific dataset samples with direct links

Quick Start

Option 1: Local Development

  1. 1.Clone or download this directory
  2. 2.Serve the files using any static web server:
bash
# Using Python
python -m http.server 8000

# Using Node.js
npx serve .

# Using PHP
php -S localhost:8000
  1. 1.Open http://localhost:8000 in your browser

Option 2: GitHub Pages

  1. 1.Push this directory to a GitHub repository
  2. 2.Enable GitHub Pages in repository settings
  3. 3.Access via https://[username].github.io/[repo-name]/

Option 3: Direct File Access

Simply open index.html in a modern web browser. Note: Some features may be limited due to CORS restrictions.

Usage

Loading a Dataset

  1. 1.Enter a HuggingFace dataset ID (e.g., davanstrien/exams-ocr)
  2. 2.Click "Load" or press Enter
  3. 3.The explorer will automatically detect text columns

Navigation

  • —Next: Press J or → arrow key
  • —Previous: Press K or ← arrow key
  • —Switch Views: Press 1 (comparison), 2 (diff), or 3 (improved only)

Supported Column Names

The explorer automatically detects these column patterns:

Original OCR: text, ocr, original_text, ground_truth Improved OCR: markdown, new_ocr, corrected_text, vlm_ocr

Technical Details

Architecture

┌─────────────────┐     ┌──────────────────────┐
│   Browser UI    │────▶│ HF Dataset Viewer API│
│  (Alpine.js)    │     │ (datasets-server)    │
└─────────────────┘     └──────────────────────┘
        │
        ▼
┌─────────────────┐
│  Local Cache    │
│  (JavaScript)   │
└─────────────────┘

API Integration

Uses the HuggingFace Dataset Viewer API:

  • —Base URL: https://datasets-server.huggingface.co
  • —No authentication required for public datasets
  • —Automatic handling of image URL expiration
  • —Smart batching for efficient data loading

Performance Optimizations

  • —Batch Loading: Fetches 100 rows at a time
  • —Smart Caching: Reduces API calls
  • —Lazy Loading: Only loads visible content
  • —URL Refresh: Automatically refreshes expired image URLs

Customization

Adding New Column Patterns

Edit js/dataset-api.js and update the detectColumns method:

javascript
if (!originalTextColumn && ['your_column_name'].includes(name)) {
    originalTextColumn = name;
}

Styling

The UI uses Tailwind CSS. Modify styles in:

  • —css/styles.css for custom styles
  • —Tailwind classes directly in index.html

Keyboard Shortcuts

Add new shortcuts in js/app.js:

javascript
case 'your_key':
    // Your action here
    break;

Browser Support

  • —Chrome/Edge: Full support
  • —Firefox: Full support
  • —Safari: Full support (14+)
  • —Mobile browsers: Full support with touch navigation

Limitations

  • —Maximum 100 rows per API request
  • —Image URLs expire after ~1 hour
  • —No authentication support for private datasets (yet)
  • —Read-only interface (no editing capabilities)

Future Enhancements

  • —[ ] Export functionality for improved texts
  • —[ ] Batch processing capabilities
  • —[ ] Search within dataset
  • —[ ] Bookmarking system
  • —[ ] Authentication for private datasets
  • —[ ] Confidence scores visualization
  • —[ ] Multi-dataset comparison

Troubleshooting

"Dataset viewer is not available"

  • —Check if the dataset exists on HuggingFace
  • —Ensure the dataset has viewer enabled
  • —Try a known working dataset like davanstrien/exams-ocr

Images not loading

  • —Image URLs expire after ~1 hour
  • —The app automatically refreshes URLs on error
  • —Check browser console for detailed errors

Slow loading

  • —Large datasets may take time for initial load
  • —Consider using datasets with pre-computed statistics
  • —Check your internet connection

Contributing

This is a standalone tool designed for OCR exploration. Feel free to fork and customize for your needs!

License

MIT License - Use freely for any purpose

Related Projects