draft

README.md

@@ -1,10 +1,190 @@
 ---
-title: Ocr Time Capsule
-emoji: 👁
-colorFrom: purple
+title: OCR Time Capsule
+emoji: 📦
+colorFrom: blue
 colorTo: indigo
 sdk: static
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 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](https://img.shields.io/badge/OCR-Time%20Capsule-blue)
+
+## 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. Clone or download this directory
+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
+```
+
+3. Open http://localhost:8000 in your browser
+
+### Option 2: GitHub Pages
+
+1. Push this directory to a GitHub repository
+2. Enable GitHub Pages in repository settings
+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. Enter a HuggingFace dataset ID (e.g., `davanstrien/exams-ocr`)
+2. Click "Load" or press Enter
+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
+
+- [OCR Time Machine](../app.py) - Interactive OCR improvement with VLMs
+- [HuggingFace Datasets](https://huggingface.co/datasets) - Browse available datasets
+- [Dataset Viewer Docs](https://huggingface.co/docs/dataset-viewer) - API documentation

index.html

@@ -1,19 +1,445 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en" class="h-full">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OCR Text Explorer</title>
+    
+    <!-- External Dependencies -->
+    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
+    <script src="https://unpkg.com/alpinejs@3.13.3/dist/cdn.min.js" defer></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+    
+    <!-- Tailwind Config -->
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    animation: {
+                        'fade-in': 'fadeIn 0.3s ease-in-out',
+                    },
+                    keyframes: {
+                        fadeIn: {
+                            '0%': { opacity: '0' },
+                            '100%': { opacity: '1' },
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    
+    <!-- Custom Styles -->
+    <link rel="stylesheet" href="css/styles.css">
+</head>
+<body class="h-full bg-gray-50 dark:bg-gray-900" x-data="ocrExplorer">
+    <!-- Header -->
+    <header class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
+        <div class="px-4 sm:px-6 lg:px-8 py-4">
+            <div class="flex items-center justify-between">
+                <div class="flex-1">
+                    <div class="flex items-center space-x-4">
+                        <h1 class="text-xl font-semibold text-gray-900 dark:text-white">
+                            📚 OCR Text Explorer
+                        </h1>
+                        <span class="text-sm text-gray-600 dark:text-gray-400 hidden sm:inline">
+                            Compare original and AI-improved OCR text from historical documents
+                        </span>
+                    </div>
+                    <div class="flex items-center space-x-2 mt-3">
+                        <input 
+                            type="text" 
+                            x-model="datasetId"
+                            @keyup.enter="loadDataset()"
+                            class="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+                            placeholder="Dataset ID (e.g., username/dataset-name)"
+                            style="width: 300px;"
+                        >
+                        <button 
+                            @click="loadDataset()"
+                            class="px-4 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        >
+                            Load
+                        </button>
+                    </div>
+                </div>
+                
+                <!-- Settings -->
+                <div class="flex items-center space-x-4">
+                    <button
+                        @click="showAbout = !showAbout"
+                        class="px-3 py-1.5 text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200"
+                        title="About this tool"
+                    >
+                        <svg class="w-5 h-5 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                        </svg>
+                        <span class="hidden sm:inline">About</span>
+                    </button>
+                    
+                    <button
+                        @click="darkMode = !darkMode"
+                        class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                        title="Toggle dark mode"
+                    >
+                        <svg x-show="!darkMode" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
+                        </svg>
+                        <svg x-show="darkMode" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
+                        </svg>
+                    </button>
+                    
+                    <select
+                        x-model="diffMode"
+                        class="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+                    >
+                        <option value="char">Character Diff</option>
+                        <option value="word">Word Diff</option>
+                        <option value="line">Line Diff</option>
+                    </select>
+                    
+                    <button
+                        @click="exportComparison()"
+                        class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                        title="Export comparison"
+                    >
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </header>
+    
+    <!-- About Panel -->
+    <div x-show="showAbout" x-transition class="bg-blue-50 dark:bg-blue-950/30 border-b border-blue-200 dark:border-blue-800">
+        <div class="px-4 sm:px-6 lg:px-8 py-6">
+            <div class="max-w-4xl">
+                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">About OCR Text Explorer</h2>
+                <div class="prose prose-sm dark:prose-invert text-gray-700 dark:text-gray-300">
+                    <p class="mb-3">
+                        OCR Text Explorer helps researchers and digital humanities professionals compare original OCR text 
+                        with AI-improved versions from historical documents. This tool is designed for browsing pre-processed 
+                        OCR improvements stored in HuggingFace datasets.
+                    </p>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                        <div>
+                            <h3 class="font-medium mb-2">🎯 Use Cases</h3>
+                            <ul class="list-disc list-inside space-y-1 text-sm">
+                                <li>Review OCR corrections from historical newspapers</li>
+                                <li>Quality assessment of digitization projects</li>
+                                <li>Training data validation for OCR models</li>
+                                <li>Accessibility improvements for scanned texts</li>
+                            </ul>
+                        </div>
+                        <div>
+                            <h3 class="font-medium mb-2">⚡ Key Features</h3>
+                            <ul class="list-disc list-inside space-y-1 text-sm">
+                                <li>Side-by-side text comparison</li>
+                                <li>Character, word, and line-level diffs</li>
+                                <li>Keyboard navigation (J/K or arrows)</li>
+                                <li>Direct HuggingFace dataset integration</li>
+                            </ul>
+                        </div>
+                    </div>
+                    <p class="text-sm">
+                        💡 <strong>Tip:</strong> For live OCR processing with vision-language models, check out 
+                        <a href="../app.py" class="text-blue-600 dark:text-blue-400 underline">OCR Time Machine</a>.
+                        This tool focuses on exploring already-processed datasets for faster navigation and analysis.
+                    </p>
+                </div>
+                <button 
+                    @click="showAbout = false"
+                    class="mt-4 text-sm text-blue-600 dark:text-blue-400 hover:underline"
+                >
+                    Close
+                </button>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Main Content -->
+    <main class="h-full flex">
+        <!-- Loading State -->
+        <div x-show="loading" class="flex-1 flex items-center justify-center">
+            <div class="text-center">
+                <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
+                <p class="mt-4 text-gray-600 dark:text-gray-400">Loading dataset...</p>
+            </div>
+        </div>
+        
+        <!-- Error State -->
+        <div x-show="error" class="flex-1 flex items-center justify-center p-8">
+            <div class="max-w-md w-full bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-6">
+                <h3 class="text-lg font-medium text-red-800 dark:text-red-400 mb-2">Error</h3>
+                <p class="text-red-600 dark:text-red-300" x-text="error"></p>
+                <button 
+                    @click="error = null; loadDataset()"
+                    class="mt-4 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700"
+                >
+                    Try Again
+                </button>
+            </div>
+        </div>
+        
+        <!-- Content Area -->
+        <div x-show="!loading && !error && currentSample" class="flex-1 flex h-full">
+            <!-- Image Panel -->
+            <div class="w-1/3 bg-gray-100 dark:bg-gray-800 p-4 overflow-hidden border-r border-gray-200 dark:border-gray-700">
+                <div class="sticky top-0">
+                    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-sm overflow-hidden">
+                        <img 
+                            :src="getImageSrc()" 
+                            :alt="`Page ${currentIndex + 1}`"
+                            class="w-full h-auto"
+                            @error="handleImageError"
+                        >
+                        <div class="p-3 border-t border-gray-200 dark:border-gray-600">
+                            <p class="text-sm text-gray-600 dark:text-gray-400">
+                                <span x-text="`Page ${currentIndex + 1} of ${totalSamples || '?'}`"></span>
+                                <span x-show="getImageDimensions()" class="ml-2">
+                                    • <span x-text="getImageDimensions()"></span>
+                                </span>
+                            </p>
+                        </div>
+                    </div>
+                    
+                    <!-- Statistics Panel -->
+                    <div class="mt-4 bg-white dark:bg-gray-700 rounded-lg shadow-sm p-4">
+                        <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">OCR Quality Metrics</h3>
+                        <div class="space-y-2">
+                            <div class="flex justify-between items-center">
+                                <span class="text-xs text-gray-600 dark:text-gray-400">Similarity</span>
+                                <span class="text-xs font-medium text-gray-900 dark:text-gray-100" x-text="`${similarity}%`"></span>
+                            </div>
+                            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2">
+                                <div class="bg-blue-600 h-2 rounded-full transition-all duration-300" :style="`width: ${similarity}%`"></div>
+                            </div>
+                            
+                            <div class="grid grid-cols-3 gap-2 mt-3">
+                                <div class="text-center">
+                                    <div class="text-lg font-semibold text-gray-900 dark:text-gray-100" x-text="charStats.total || '-'"></div>
+                                    <div class="text-xs text-gray-600 dark:text-gray-400">Characters</div>
+                                </div>
+                                <div class="text-center">
+                                    <div class="text-lg font-semibold text-green-600 dark:text-green-400" x-text="charStats.added || '0'"></div>
+                                    <div class="text-xs text-gray-600 dark:text-gray-400">Added</div>
+                                </div>
+                                <div class="text-center">
+                                    <div class="text-lg font-semibold text-red-600 dark:text-red-400" x-text="charStats.removed || '0'"></div>
+                                    <div class="text-xs text-gray-600 dark:text-gray-400">Removed</div>
+                                </div>
+                            </div>
+                            
+                            <div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-600">
+                                <div class="flex justify-between text-xs">
+                                    <span class="text-gray-600 dark:text-gray-400">Words</span>
+                                    <span class="text-gray-900 dark:text-gray-100">
+                                        <span x-text="wordStats.original || '-'"></span> → <span x-text="wordStats.improved || '-'"></span>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Text Comparison Panel -->
+            <div class="flex-1 bg-white dark:bg-gray-900 overflow-hidden">
+                <!-- Tab Navigation -->
+                <div class="border-b border-gray-200 dark:border-gray-700">
+                    <nav class="flex -mb-px">
+                        <button
+                            @click="activeTab = 'comparison'"
+                            :class="activeTab === 'comparison' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
+                            class="px-6 py-3 border-b-2 font-medium text-sm transition-colors"
+                        >
+                            Side by Side
+                        </button>
+                        <button
+                            @click="activeTab = 'diff'"
+                            :class="activeTab === 'diff' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
+                            class="px-6 py-3 border-b-2 font-medium text-sm transition-colors"
+                        >
+                            Inline Diff
+                        </button>
+                        <button
+                            @click="activeTab = 'improved'"
+                            :class="activeTab === 'improved' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
+                            class="px-6 py-3 border-b-2 font-medium text-sm transition-colors"
+                        >
+                            Improved Only
+                        </button>
+                    </nav>
+                </div>
+                
+                <!-- Tab Content -->
+                <div class="p-6 overflow-y-auto" style="height: calc(100% - 49px);">
+                    <!-- Side by Side Comparison -->
+                    <div x-show="activeTab === 'comparison'" class="grid grid-cols-2 gap-6">
+                        <div>
+                            <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Original OCR</h3>
+                            <div class="prose prose-sm dark:prose-invert max-w-none">
+                                <pre class="whitespace-pre-wrap font-mono text-xs bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 p-4 rounded-lg" x-text="getOriginalText()"></pre>
+                            </div>
+                        </div>
+                        <div>
+                            <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Improved OCR</h3>
+                            <div class="prose prose-sm dark:prose-invert max-w-none">
+                                <pre class="whitespace-pre-wrap font-mono text-xs bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 p-4 rounded-lg" x-text="getImprovedText()"></pre>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Inline Diff -->
+                    <div x-show="activeTab === 'diff'" class="prose prose-sm dark:prose-invert max-w-none">
+                        <div x-html="diffHtml" class="diff-content"></div>
+                    </div>
+                    
+                    <!-- Improved Only -->
+                    <div x-show="activeTab === 'improved'" class="prose prose-sm dark:prose-invert max-w-none">
+                        <pre class="whitespace-pre-wrap font-mono text-xs bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 p-4 rounded-lg" x-text="getImprovedText()"></pre>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    
+    <!-- Navigation Footer -->
+    <footer x-show="!loading && !error && currentSample" class="fixed bottom-0 left-0 right-0">
+        <!-- Enhanced Visual Page Browser -->
+        <div x-show="showDock" 
+             x-transition:enter="transition ease-out duration-300"
+             x-transition:enter-start="transform translate-y-full opacity-0"
+             x-transition:enter-end="transform translate-y-0 opacity-100"
+             x-transition:leave="transition ease-in duration-200"
+             x-transition:leave-start="transform translate-y-0 opacity-100"
+             x-transition:leave-end="transform translate-y-full opacity-0"
+             @mouseenter="showDockPreview()"
+             @mouseleave="hideDockPreview()"
+             class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 shadow-lg">
+            <div class="relative px-16 py-4">
+                <!-- Left scroll button -->
+                <button @click="scrollDockLeft()"
+                        :disabled="dockStartIndex <= 0"
+                        class="absolute left-2 top-1/2 -translate-y-1/2 p-2 rounded-full bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+                    </svg>
+                </button>
+                
+                <!-- Thumbnails container -->
+                <div class="flex items-center justify-center space-x-3 overflow-hidden">
+                    <template x-for="item in dockItems" :key="item.index">
+                        <div @click="jumpToDockPage(item.index)"
+                             class="relative cursor-pointer transition-all duration-200 hover:scale-105 flex-shrink-0"
+                             :class="item.index === currentIndex ? 'ring-2 ring-blue-500 scale-105' : ''">
+                            <img :src="item.imageSrc" 
+                                 :alt="`Page ${item.index + 1}`"
+                                 class="w-32 h-44 object-cover rounded shadow-lg"
+                                 @error="handleFlowImageError($event, item.index)">
+                            <div class="absolute bottom-0 inset-x-0 bg-gradient-to-t from-black/80 to-transparent p-2 rounded-b">
+                                <p class="text-sm text-white font-medium text-center" x-text="`${item.index + 1}`"></p>
+                            </div>
+                        </div>
+                    </template>
+                </div>
+                
+                <!-- Right scroll button -->
+                <button @click="scrollDockRight()"
+                        :disabled="dockStartIndex >= totalSamples - dockVisibleCount"
+                        class="absolute right-2 top-1/2 -translate-y-1/2 p-2 rounded-full bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                    </svg>
+                </button>
+                
+                <!-- Position indicator -->
+                <div class="absolute bottom-1 left-1/2 -translate-x-1/2 flex items-center space-x-2">
+                    <div class="w-32 h-1 bg-gray-200 dark:bg-gray-600 rounded-full overflow-hidden">
+                        <div class="h-full bg-blue-500 transition-all duration-300"
+                             :style="`width: ${((dockStartIndex + Math.floor(dockVisibleCount/2)) / (totalSamples - 1)) * 100}%`"></div>
+                    </div>
+                    <span class="text-xs text-gray-500 dark:text-gray-400" 
+                          x-text="`${dockStartIndex + 1}-${Math.min(dockStartIndex + dockVisibleCount, totalSamples)} of ${totalSamples}`"></span>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Navigation controls -->
+        <div class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-6 py-3">
+            <div class="flex items-center justify-between">
+            <div class="flex items-center space-x-4">
+                <button 
+                    @click="previousSample()"
+                    :disabled="currentIndex <= 0"
+                    class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                    ← Previous
+                </button>
+                
+                <!-- Interactive Page Counter with Dock Trigger -->
+                <div class="relative">
+                    <div @mouseenter="showDockPreview()"
+                         @mouseleave="hideDockPreview()"
+                         class="flex items-center space-x-2 px-4 py-2 rounded-md cursor-pointer transition-all duration-200 hover:bg-gray-100 dark:hover:bg-gray-700">
+                        <div class="flex items-center space-x-2">
+                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">
+                                Page <span x-text="currentIndex + 1"></span> of <span x-text="totalSamples || '?'"></span>
+                            </span>
+                            <svg class="w-4 h-4 text-gray-400 transition-transform duration-200"
+                                 :class="showDock ? 'rotate-180' : ''"
+                                 fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
+                            </svg>
+                        </div>
+                        <!-- Visual progress bar -->
+                        <div class="w-32 h-1 bg-gray-200 dark:bg-gray-600 rounded-full overflow-hidden">
+                            <div class="h-full bg-blue-500 transition-all duration-300"
+                                 :style="`width: ${(currentIndex / (totalSamples - 1)) * 100}%`"></div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="flex items-center space-x-1">
+                    <input 
+                        type="number" 
+                        x-model.number="jumpToPage"
+                        @keyup.enter="jumpToSample()"
+                        :min="1"
+                        :max="totalSamples"
+                        class="w-20 px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+                        placeholder="Go to"
+                    >
+                    <button 
+                        @click="jumpToSample()"
+                        class="px-2 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    >
+                        Go
+                    </button>
+                </div>
+                
+                <button 
+                    @click="nextSample()"
+                    :disabled="currentIndex >= (totalSamples - 1)"
+                    class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                    Next →
+                </button>
+            </div>
+            
+            <div class="text-sm text-gray-500 dark:text-gray-400">
+                Press <kbd class="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded">J</kbd> / <kbd class="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded">K</kbd> or <kbd class="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded">←</kbd> / <kbd class="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded">→</kbd> to navigate | <kbd class="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded">V</kbd> for visual browser
+            </div>
+        </div>
+    </footer>
+    
+    <!-- Local Scripts -->
+    <script src="js/diff-utils.js"></script>
+    <script src="js/dataset-api.js"></script>
+    <script src="js/app.js"></script>
+</body>
+</html>

style.css

@@ -1,28 +0,0 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
-}