AI-Viewer

Interactive document viewer for PDAI documents

AI-Viewer

Interactive viewing for AI-processed documents. Browse, navigate, and explore PDAI documents with mathematical rendering, segment navigation, and agent output layers.

Python 3.10+ License: MIT

Overview

AI-Viewer is the presentation layer of the three-package AI document processing ecosystem. It serves PDAI documents generated by AI-Scholar through an interactive web interface with rich navigation, mathematical rendering, and segment-based browsing.

Universal PDAI Support

Works with any PDAI-compliant document using page-centric structure. Automatic detection of page folders. Graceful handling of partial structures.

Segment Navigation

Browse documents by logical structure—letters, chapters, paragraphs. Jump directly to any segment using manifest.json mappings.

Mathematical Rendering

MathJax integration for LaTeX formulas. Inline and display mathematics render beautifully with proper symbol fonts.

Agent Output Layers

View different processing layers—original OCR, translations, annotations. Switch between agent outputs to compare results.

Quick Start

The simplest way to view PDAI documents is with Python’s built-in HTTP server:

# Start server from project root (parent of ai-viewer and pdai)
cd /path/to/2026project
python -m http.server 4100

# Open viewer
open http://localhost:4100/ai-viewer/viewer.html

The Three-Package Architecture

AI-Viewer is part of a cohesive document processing ecosystem:

flowchart LR
    subgraph Scholar["ai-scholar"]
        direction TB
        OCR[OCR Processing]
        SEG[Segmentation]
        AGENT[Agent Pipelines]
    end
    
    subgraph Data["pdai"]
        direction TB
        PAGES["pages/page_NNN/"]
        SEGS["segments/"]
        MANIFEST["manifest.json"]
    end
    
    subgraph Viewer["ai-viewer"]
        direction TB
        HTML[viewer.html]
        UI[Interactive UI]
    end
    
    Scholar -->|generates| Data
    Data -->|serves| Viewer
    Viewer -.->|triggers agents| Scholar

Three-package architecture for AI document processing

Package Role Description
ai-scholar Processing OCR, segmentation, translation, annotation agents
pdai Data Structured document storage in page-centric format
ai-viewer Presentation Interactive web-based document viewing

See Three-Package Integration for the complete workflow.

PDAI Document Structure

AI-Viewer reads documents in the canonical PDAI page-centric structure:

pdai/DocumentName/
├── DocumentName.pdf              # Original PDF (optional)
├── manifest.json                 # Segment mappings + metadata
├── ai-orchestrator.yml           # Agent configuration
├── css/                          # Display styles
├── templates/                    # Document-specific templates
├── pages/                        # ALL page-level content
│   ├── page_000/                 # Folder per page
│   │   ├── page_000.png          # Page image
│   │   ├── page_000.xml          # OCR XML
│   │   ├── page_000.html         # HTML conversion
│   │   ├── page_000_translation_english.xml   # Agent output
│   │   └── page_000_fig_1.png    # Extracted figure
│   ├── page_001/
│   │   └── ...
│   └── ...
└── segments/                     # Document segments (optional)
    └── letters/
        ├── letter_000/
        └── letter_001/

See PDAI Standard for complete format specification.

Key Features

Interactive Navigation

  • Page browsing with keyboard shortcuts (← →)

  • Zoom controls (↑ ↓) for detailed inspection

  • Fullscreen mode (F) for focused reading

  • Navigation bar toggle (H) for maximum content space

Dual Viewing Modes

Document Mode (press D):

  • Left pane: Page image
  • Right pane: OCR text/translations

Agent Mode (press A):

  • Left pane: Source input (image or XML)
  • Middle pane: Agent output (translations, analysis)
  • Right pane: Agent navigator and controls

Segment-Based Browsing

When a document has manifest.json with segment definitions:

  1. Select segment type from dropdown (letters, chapters, paragraphs)

  2. Choose a specific segment to jump to its start page

  3. View segment metadata (sender, recipient, date for letters)

Mathematical Excellence

  • MathJax rendering for inline $...$ and display $$...$$ mathematics

  • Symbol highlighting for Greek letters and mathematical operators

  • Equation scaling that responds to zoom level

Agent Output Layers

View different processing results:

  • Original OCR — Raw text extraction

  • Translations — English, German, or custom language translations

  • Annotations — Entity markup, theorem extraction, commentary

Documentation Sections

Getting Started

Document Description
Quick Start Installation and first document viewing
Installation Detailed setup instructions
CLI Reference Command-line options

Features

Document Description
Viewer Features Navigation, themes, accessibility
PDAI Standard Document format specification

Architecture

Document Description
Three-Package Integration Complete workflow across packages
Server Architecture Server design and data flow
API Reference REST endpoints and Python API

Development

Document Description
Contributing Development setup and guidelines

Complete Workflow Example

Process and view a scholarly document:

# 1. Process PDF with AI-Scholar (generates pages/page_NNN/)
ai-scholar process ../pdai/E57/E57.pdf

# 2. Run segmentation to identify structure
ai-scholar segment ../pdai/E57

# 3. Run translation agent
ai-scholar agent ../pdai/E57 translation-english --pages 0-50

# 4. Start server from project root
cd /path/to/2026project
python -m http.server 4100

# 5. Open browser
open http://localhost:4100/ai-viewer/viewer.html?doc=pdai/E57

Keyboard Shortcuts

Key Action
← → Navigate pages
↑ ↓ Zoom in/out
D Document mode
A Agent mode
R Refresh agent result
F Toggle fullscreen
H Hide navbar

Author

Gerd Graßhoff

Licence

MIT Licence — see LICENCE for details.