Viewer Features

Interactive navigation, rendering, and document exploration

Overview

AI-Viewer provides a rich set of features for exploring PDAI documents. This guide covers navigation, viewing modes, mathematical rendering, agent output layers, and customisation options.

Core Features

Universal PDAI Support

AI-Viewer displays any PDAI-compliant document using page-centric structure:

pdai/DocumentName/
└── pages/
    └── page_NNN/
        ├── page_NNN.png
        ├── page_NNN.xml
        ├── page_NNN.html
        └── page_NNN_translation_english.xml

Page-centric loading — All page files from one folder
Consistent naming — page_NNN[_agent].ext pattern
Underscore convention — No hyphens in filenames

High-Quality Display

High-resolution images — Supports 600+ DPI page images
Crisp text rendering — Proper font handling
Zoom capabilities — From 25% to 500%
Smooth scaling — Anti-aliased image display

Viewing Modes

Document Mode (Press D)

Dual-pane layout for reading:

Pane	Content
Left	Page image (`pages/page_NNN/page_NNN.png`)
Right	OCR text or translation

Language Selection:

Language	Source
Original	`pages/page_NNN/page_NNN.html`
Deutsch	`pages/page_NNN/page_NNN_translation_german.xml`
English	`pages/page_NNN/page_NNN_translation_english.xml`

Agent Mode (Press A)

Three-pane layout for agent work:

Pane	Content
Left	Source input (image or XML)
Middle	Agent output (rendered or raw XML)
Right	Agent navigator and controls

Agent Navigator Features:

Browse available agents by category
View agent configuration (model, template)
Process new pages with “Brew Agent”
Check processing status

Segment Navigation

When a document has segment definitions in manifest.json:

How It Works

Dropdown appears with segment types (letters, chapters, paragraphs)
Select a segment to jump directly to its start page
View metadata for the selected segment (dates, authors, titles)

Segment Types

Type	Use Case	Metadata Displayed
`chapters`	Scholarly treatises	Title, number, page range
`paragraphs`	Numbered arguments	Number, start text
`letters`	Correspondence editions	Sender, recipient, date, place
`documents`	Diplomatic acts	Parties, date, reference

Example: Letter Navigation

For the Euler-Goldbach correspondence:

Segment dropdown: "Letters"
├── Letter 1 (Euler → Goldbach, 1729-10-13)
├── Letter 2 (Goldbach → Euler, 1729-12-01)
├── Letter 3 (Euler → Goldbach, 1730-01-15)
└── ...

Agent Output Layers

Available Agents

The viewer displays agents from ai-orchestrator.yml or defaults:

Agent	Output File	Description
English Translation	`page_NNN_translation_english.xml`	Translated text
German Translation	`page_NNN_translation_german.xml`	Translated text
OCR Enhanced	`page_NNN_ocr_enhanced.xml`	Improved OCR

Viewing Agent Output

In Document Mode:

Use language dropdown to switch translations

In Agent Mode:

Select agent from navigator
View rendered output or raw XML
Click “Brew Agent” to generate new output

Output Display Options

View	Description
Rendered	Formatted HTML with styling
XML	Raw XML source

Mathematical Rendering

MathJax Integration

Perfect rendering of mathematical content from OCR output:

<!-- Inline mathematics -->
The equation \(E = mc^2\) is fundamental.

<!-- Display mathematics -->
\[\int_0^1 f(x) \, dx = \frac{\pi}{4}\]

Supported Elements

Element	LaTeX	Rendered
Fractions	`\frac{a}{b}`	$\frac{a}{b}$
Exponents	`x^{2n+1}`	$x^{2n+1}$
Subscripts	`a_{i,j}`	$a_{i,j}$
Integrals	`\int_0^1 f(x) dx`	$\int_0^1 f(x) dx$
Summations	`\sum_{i=1}^n`	$\sum_{i=1}^n$
Greek Letters	`\alpha, \beta, \gamma`	$\alpha, \beta, \gamma$

Keyboard Navigation

Full Shortcut Reference

Key	Action
`←`	Previous page
`→`	Next page
`↑`	Zoom in
`↓`	Zoom out
`D`	Document mode
`A`	Agent mode
`R`	Refresh agent result
`F`	Toggle fullscreen
`H`	Hide/show navbar
`Home`	First page
`End`	Last page

URL Navigation

URL Parameters

Parameter	Description	Example
`doc`	Document path	`doc=pdai/E57`
`page`	Starting page (0-indexed)	`page=5`
`mode`	View mode	`mode=agent`
`lang`	Language	`lang=english`

Example URLs

# Home catalog
http://localhost:4100/ai-viewer/viewer.html

# Specific document
http://localhost:4100/ai-viewer/viewer.html?doc=pdai/E57

# Specific page
http://localhost:4100/ai-viewer/viewer.html?doc=pdai/E57&page=25

# Agent mode
http://localhost:4100/ai-viewer/viewer.html?doc=pdai/E57&mode=agent

Figure Display

Extracted Figures

Figures extracted by AI-Scholar are stored with their page:

pages/page_012/
├── page_012.png           # Full page image
├── page_012.xml           # OCR XML
├── page_012.html          # HTML
├── page_012_fig_1.png     # First figure
└── page_012_fig_2.png     # Second figure

Figure References

Text references to figures (e.g., “Fig. 1”) link to extracted images.

Caption Display

Figure captions from OCR are displayed below the figure:

<figure>
  [Diagram of tidal forces]
  <caption>FIGURE 1: Schematic representation of lunar effects</caption>
</figure>

Footnote Validation

Validation Features

Marker detection — Finds <fn> tags in text
Entry matching — Matches markers to footnote entries
Orphan detection — Highlights unmatched footnotes in red
Sequence checking — Validates footnote numbering order

Visual Indicators

Indicator	Meaning
Normal footnote marker	Valid, matched to entry
Red highlighted marker	Orphaned, no matching entry
Warning icon	Validation issue detected

Display Themes

Built-in Theme

The viewer uses a dark theme with:

Oxford blue background (#1a1a2e)
Warm accents (#e94560)
High contrast text
Subtle gradients

CSS Customisation

Documents can include custom CSS in css/:

pdai/E57/css/
├── default.css      # Standard viewer styling
└── scholarly.css    # Academic presentation

Performance

Progressive Loading

On-demand — Pages load as needed
Lazy loading — Content loaded when visible
Binary search — Efficient page count detection

Browser Caching

Content Type	Cache Strategy
Page images	Long cache (immutable)
HTML/XML content	Cache with revalidation
Static assets	Long cache

Performance Metrics

Document Size	Initial Load	Page Switch
Small (1-50 pages)	< 2s	Instant
Medium (51-200 pages)	< 5s	< 0.5s
Large (201-500 pages)	< 10s	< 1s

Accessibility

Keyboard Support

Full keyboard navigation for all functions:

Tab — Navigate interactive elements
Enter/Space — Activate buttons
Escape — Close dialogs

Visual Accessibility

High contrast — Enhanced visibility
Font scaling — Respects browser settings
Motion reduction — Respects prefers-reduced-motion

Configuration

Document Configuration (ai-orchestrator.yml)

version: "1.0"
document: E57
model: gemini-3-flash-preview

agents:
  translation-english:
    display_name: English Translation
    model: gemini-3-flash-preview
    instruction: translation.j2
    variables:
      target_lang: en
      target_lang_full: English

Default Agents

When no orchestrator config exists, the viewer provides defaults:

English Translation
German Translation
OCR Enhanced

--- title: "Viewer Features" subtitle: "Interactive navigation, rendering, and document exploration" --- ## Overview AI-Viewer provides a rich set of features for exploring PDAI documents. This guide covers navigation, viewing modes, mathematical rendering, agent output layers, and customisation options. ## Core Features ### Universal PDAI Support AI-Viewer displays any PDAI-compliant document using page-centric structure: ``` pdai/DocumentName/ └── pages/ └── page_NNN/ ├── page_NNN.png ├── page_NNN.xml ├── page_NNN.html └── page_NNN_translation_english.xml ``` - **Page-centric loading** — All page files from one folder - **Consistent naming** — `page_NNN[_agent].ext` pattern - **Underscore convention** — No hyphens in filenames ### High-Quality Display - **High-resolution images** — Supports 600+ DPI page images - **Crisp text rendering** — Proper font handling - **Zoom capabilities** — From 25% to 500% - **Smooth scaling** — Anti-aliased image display ## Viewing Modes ### Document Mode (Press D) Dual-pane layout for reading: | Pane | Content | |------|---------| | **Left** | Page image (`pages/page_NNN/page_NNN.png`) | | **Right** | OCR text or translation | **Language Selection:** | Language | Source | |----------|--------| | Original | `pages/page_NNN/page_NNN.html` | | Deutsch | `pages/page_NNN/page_NNN_translation_german.xml` | | English | `pages/page_NNN/page_NNN_translation_english.xml` | ### Agent Mode (Press A) Three-pane layout for agent work: | Pane | Content | |------|---------| | **Left** | Source input (image or XML) | | **Middle** | Agent output (rendered or raw XML) | | **Right** | Agent navigator and controls | **Agent Navigator Features:** - Browse available agents by category - View agent configuration (model, template) - Process new pages with "Brew Agent" - Check processing status ## Segment Navigation When a document has segment definitions in `manifest.json`: ### How It Works 1. **Dropdown appears** with segment types (letters, chapters, paragraphs) 2. **Select a segment** to jump directly to its start page 3. **View metadata** for the selected segment (dates, authors, titles) ### Segment Types | Type | Use Case | Metadata Displayed | |------|----------|-------------------| | `chapters` | Scholarly treatises | Title, number, page range | | `paragraphs` | Numbered arguments | Number, start text | | `letters` | Correspondence editions | Sender, recipient, date, place | | `documents` | Diplomatic acts | Parties, date, reference | ### Example: Letter Navigation For the Euler-Goldbach correspondence: ``` Segment dropdown: "Letters" ├── Letter 1 (Euler → Goldbach, 1729-10-13) ├── Letter 2 (Goldbach → Euler, 1729-12-01) ├── Letter 3 (Euler → Goldbach, 1730-01-15) └── ... ``` ## Agent Output Layers ### Available Agents The viewer displays agents from `ai-orchestrator.yml` or defaults: | Agent | Output File | Description | |-------|-------------|-------------| | English Translation | `page_NNN_translation_english.xml` | Translated text | | German Translation | `page_NNN_translation_german.xml` | Translated text | | OCR Enhanced | `page_NNN_ocr_enhanced.xml` | Improved OCR | ### Viewing Agent Output **In Document Mode:** - Use language dropdown to switch translations **In Agent Mode:** - Select agent from navigator - View rendered output or raw XML - Click "Brew Agent" to generate new output ### Output Display Options | View | Description | |------|-------------| | **Rendered** | Formatted HTML with styling | | **XML** | Raw XML source | ## Mathematical Rendering ### MathJax Integration Perfect rendering of mathematical content from OCR output: ```html  The equation $E = mc^2$ is fundamental.  \[\int_0^1 f(x) \, dx = \frac{\pi}{4}\] ``` ### Supported Elements | Element | LaTeX | Rendered | |---------|-------|----------| | Fractions | `\frac{a}{b}` | $\frac{a}{b}$ | | Exponents | `x^{2n+1}` | $x^{2n+1}$ | | Subscripts | `a_{i,j}` | $a_{i,j}$ | | Integrals | `\int_0^1 f(x) dx` | $\int_0^1 f(x) dx$ | | Summations | `\sum_{i=1}^n` | $\sum_{i=1}^n$ | | Greek Letters | `\alpha, \beta, \gamma` | $\alpha, \beta, \gamma$ | ## Keyboard Navigation ### Full Shortcut Reference | Key | Action | |-----|--------| | <kbd>←</kbd> | Previous page | | <kbd>→</kbd> | Next page | | <kbd>↑</kbd> | Zoom in | | <kbd>↓</kbd> | Zoom out | | <kbd>D</kbd> | Document mode | | <kbd>A</kbd> | Agent mode | | <kbd>R</kbd> | Refresh agent result | | <kbd>F</kbd> | Toggle fullscreen | | <kbd>H</kbd> | Hide/show navbar | | <kbd>Home</kbd> | First page | | <kbd>End</kbd> | Last page | ### Navigation Controls - **Page input** — Enter page number directly - **Previous/Next buttons** — Click navigation - **Segment dropdown** — Jump to logical sections ## URL Navigation ### URL Parameters | Parameter | Description | Example | |-----------|-------------|---------| | `doc` | Document path | `doc=pdai/E57` | | `page` | Starting page (0-indexed) | `page=5` | | `mode` | View mode | `mode=agent` | | `lang` | Language | `lang=english` | ### Example URLs ``` # Home catalog http://localhost:4100/ai-viewer/viewer.html # Specific document http://localhost:4100/ai-viewer/viewer.html?doc=pdai/E57 # Specific page http://localhost:4100/ai-viewer/viewer.html?doc=pdai/E57&page=25 # Agent mode http://localhost:4100/ai-viewer/viewer.html?doc=pdai/E57&mode=agent ``` ## Figure Display ### Extracted Figures Figures extracted by AI-Scholar are stored with their page: ``` pages/page_012/ ├── page_012.png # Full page image ├── page_012.xml # OCR XML ├── page_012.html # HTML ├── page_012_fig_1.png # First figure └── page_012_fig_2.png # Second figure ``` ### Figure References Text references to figures (e.g., "Fig. 1") link to extracted images. ### Caption Display Figure captions from OCR are displayed below the figure: ```xml <figure> [Diagram of tidal forces] <caption>FIGURE 1: Schematic representation of lunar effects</caption> </figure> ``` ## Footnote Validation ### Validation Features - **Marker detection** — Finds `<fn>` tags in text - **Entry matching** — Matches markers to footnote entries - **Orphan detection** — Highlights unmatched footnotes in red - **Sequence checking** — Validates footnote numbering order ### Visual Indicators | Indicator | Meaning | |-----------|---------| | Normal footnote marker | Valid, matched to entry | | Red highlighted marker | Orphaned, no matching entry | | Warning icon | Validation issue detected | ## Display Themes ### Built-in Theme The viewer uses a dark theme with: - Oxford blue background (`#1a1a2e`) - Warm accents (`#e94560`) - High contrast text - Subtle gradients ### CSS Customisation Documents can include custom CSS in `css/`: ``` pdai/E57/css/ ├── default.css # Standard viewer styling └── scholarly.css # Academic presentation ``` ## Performance ### Progressive Loading - **On-demand** — Pages load as needed - **Lazy loading** — Content loaded when visible - **Binary search** — Efficient page count detection ### Browser Caching | Content Type | Cache Strategy | |--------------|----------------| | Page images | Long cache (immutable) | | HTML/XML content | Cache with revalidation | | Static assets | Long cache | ### Performance Metrics | Document Size | Initial Load | Page Switch | |---------------|--------------|-------------| | Small (1-50 pages) | < 2s | Instant | | Medium (51-200 pages) | < 5s | < 0.5s | | Large (201-500 pages) | < 10s | < 1s | ## Accessibility ### Keyboard Support Full keyboard navigation for all functions: - <kbd>Tab</kbd> — Navigate interactive elements - <kbd>Enter</kbd>/<kbd>Space</kbd> — Activate buttons - <kbd>Escape</kbd> — Close dialogs ### Screen Reader Support - **ARIA labels** — Proper labeling throughout - **Semantic HTML** — Meaningful structure - **Alt text** — Image descriptions - **Focus management** — Logical focus order ### Visual Accessibility - **High contrast** — Enhanced visibility - **Font scaling** — Respects browser settings - **Motion reduction** — Respects `prefers-reduced-motion` ## Configuration ### Document Configuration (ai-orchestrator.yml) ```yaml version: "1.0" document: E57 model: gemini-3-flash-preview agents: translation-english: display_name: English Translation model: gemini-3-flash-preview instruction: translation.j2 variables: target_lang: en target_lang_full: English ``` ### Default Agents When no orchestrator config exists, the viewer provides defaults: - English Translation - German Translation - OCR Enhanced ## See Also - **[Quick Start](quickstart.qmd)** — Getting started - **[PDAI Standard](pdai-standard.qmd)** — Document format specification - **[Integration](integration.qmd)** — Three-package workflow - **[Architecture](architecture.qmd)** — Viewer design