Awesome

IIIF Experiments

This repository shows some IIIF experiments based on Gallica content and real life use cases when working with IIIF documents (see also this BnF-TNA work). Most of the content is IIIF Presentation version 2 based.

Comparing Documents and Images
Deep Zoom with large images
IIIF Collections
IIIF Annotations
IIIF and maps
IIIF Ranges
IIIF and OCR
IIIF and A/V
IIIF Curation
IIIF Stories

Comparing Documents and Images

Comparing Documents with Mirador

Comparing images was one of the initial objectives of the IIIF initiative. Just drag and drop the IIIF icons in any IIIF viewer (like this one) to open side by side a BnF and a Standford digital edition of Sidereus nuncius, magna... spectacula pandens... quae a Galileo Galileo,... (RES P-V-743)

Gallica IIIF manifest

Standford Libraries IIIF manifest

Comparing Documents and Images with Mirador

Comparing a IIIF document and a local images is also possible in Mirador 3. Open this black & white photo in Mirador 3 using the drag-and-drop technique:

Then download its colorized version (produced with DeOldify) on your disk. Finally, drag and drop the image file in Mirador.

Creating a mixed Manifest including Documents and Images

A mixed manifest may also be build agregating the non IIIF colorized version and the original IIIF document as a sequence of canvas. Open it in Mirador 3. (Based on Glen Robson sample.)

Layering Multiple Images

Digitally layering multiple images can also be needed for specific use cases. Each image can be gradually exposed by the user to allow the differences to be compared (e.g. the Raphael Cartoons, Victoria and Albert Museum)

First, the Compariscope utility app (Luca Carini, V&A) can be used to align IIIF documents. In this example, we align three states of a Rembrandt engraving. A the end of the editing, we copy the alignment data into the manifest.

Click on the illustration bellow to open Compariscope on the Rembrandt example, built with a IIIF manifest listing 3 Gallica documents.

Then the manifest is visualised using LayerStack, a viewer based on OpenSeaDragon. Click on the illustration to see the result.

Other apps like Leaflet-iiif offer different approaches for layering images. Leaflet-iiif is a JavaScript library for creating zoomable views of IIIF images. In this example based on https://bl.ocks.org/mejackreed, we display side-by-side the original photograph from the above example and its colorized version (hosted by iiifhosting.com)

This other example displays the Quinatzin Mapa, on which technical photography techniques have been applied (see 1 and 2 for details on the scientific background), and its ultra violet version. Mixing several techniques ( XRF or vis-NIR spectrophotometer, etc.) in addition to IR and fluorescent UV photographs helps to study the nature of the materials used. Traditionally, IR images are used alone to better see carbon black patterns (iron gall inks will be almost transparent in IR) but IR images are also used to produce false color images. By also using the visible images, it is sometimes possible to identify materials that appear similar in the visible but are different in the IR. Fluorescence under UV light can highlight materials that fluoresce (e.g. some organic materials used as binder or varnish).

This last Leaflet-iiif example derived from https://bl.ocks.org/mejackreed uses the Leaflet plugin Icon Layers, which allows layers switching control with a set of icons. The previous example is now implemented with IR and UV versions.

Deep zoom with large images

Large composite file of images can be fragmented into smaller tiled units allowing rapid load and smooth deep zoom navigation in a browser. This example, based on 20k faces extrated from Gallica (1910-1920), makes use of OpenSeaDragon, an open-source, web-based viewer for high-resolution zoomable images. OpenSeaDragon has support for the IIIF Image API (this example is not IIIF-compliant).

Another example on Vogue frontpages

*tbc: large Cassini map *

IIIF Collections

For Periodicals

This basic IIIF collection describes a sub-collection of the Vogue magazine (French edition, 1920-1940), organized by publication date (year).

cb343833568.json is the collection's manifest that can be opened in a IIIF compliant viewer like Mirador.

{
  "@context": "http://iiif.io/api/presentation/3/context.json",
  "id": "https://raw.githubusercontent.com/altomator/IIIF/main/collection/cb343833568.json",
  "type": "Collection",
  ...
  "related": [{
			"id": "https://gallica.bnf.fr/ark:/12148/cb343833568/date",
			"format": "text/html",
			"label": "Gallica periodical: Vogue"
		}, ...],
  "seeAlso": [...],
  "items": [
    {
      "id": "https://raw.githubusercontent.com/altomator/IIIF/main/collection/cb343833568-1920.json",
      "type": "Collection",
      "label": "Vogue (1920)"
    },{
      "id": "https://raw.githubusercontent.com/altomator/IIIF/main/collection/cb343833568-1921.json",
      "type": "Collection",
      "label": "Vogue (1921)"
    }, ...
      ]
  }

Each sub-collection must setup links to the IIIF document manifests (or to other sub-collections):

{
	"@context": "http://iiif.io/api/presentation/3/context.json",
	"id": "https://raw.githubusercontent.com/altomator/IIIF/main/collection/cb343833568-1920.json",
	"type": "Collection",
	"label": "Vogue 1920",
	"description": "This collection gathers all the issues of the title Vogue for the year 1920",
	"attribution": "BnF - Gallica, gallica.bnf.fr",
	"logo": "https://gallica.bnf.fr/mbImage/logos/logo-bnf.png",
	"related": [{
			"id": "https://gallica.bnf.fr/ark:/12148/cb343833568/date1920",
			"format": "text/html",
			"label": { "fr": [ "Périodique Gallica : Vogue (1920)" ],"en": [ "Gallica periodical: Vogue (1920)" ] }
		}],
	"items": [{
		"id": "https://gallica.bnf.fr/iiif/ark:/12148/bpt6k9604118j/manifest.json",
		"type": "Manifest",
		"label": "Vogue, 15 juin 1920",
		
	},..
	]
}

The Biblissima Mirador 3 instance can be used to open this collection: https://iiif.biblissima.fr/mirador3/?iiif-content=https://raw.githubusercontent.com/altomator/IIIF/main/collection/vogue-avec-ocr/cb343833568.json

Once open, the collection can be browsed, starting from the Information side panel:

For Thematic Collections

IIIF collections are also useful for organizing documents according to a filing plan. This example is inspired by a Gallica selection of comics published in the press. The collection (API Presentation v3) lists comics series as sub-collections.

Launching Mirador with both a comics sample and the collection (as in the screenshot) is done with some Javascript:

...
windows: [
         {
           manifestId: 'https://gallica.bnf.fr/iiif/ark:/12148/bpt6k4130558s/manifest.json',
           canvasId: "https://gallica.bnf.fr/iiif/ark:/12148/bpt6k4130558s/canvas/f28" //open on image #28
         },
         {
           collectionPath: [
              "https://raw.githubusercontent.com/altomator/IIIF/main/collection/collection-bd.json"
            ] ,
            manifestId: "https://raw.githubusercontent.com/altomator/IIIF/main/collection/collection-bd.json"
         }
       ],
       catalog: [
         { manifestId: "https://raw.githubusercontent.com/altomator/IIIF/main/collection/collection-bd.json" },
       ]
...

Multiple collections can be used to organize a complex navigation scheme as Mirador windows. In this example, comic book content is organized around two entry points, by series and by authors.

IIIF collection in Mirador

This final example (produced using this Perl script) shows the complete Gallica thematic selection of women's magazines transcribes as a IIIF collection.

Same experiment for a collection of Paris maps or for a collection of music scores (avec UV).

IIIF Annotations

IIIF annotations are a convenient way to disseminate annotations, transcriptions, comments, etc., that may have been produced regarding a specific image or region of an image. IIIF annotations follow the Open Annotations and the W3C Web Annotation model for IIIF version 3.0.

AI Annotations

This IIIF demonstration leverages the GallicaPix objects detection data that are available when the GallicaPix database acts a IIIF annotation server. In this scenario, the annotations are stored somewhere, delivered by a server and hooked up to documents thanks to user interactions in Mirador (an instance of Mirador could also been programmatically hooked up to a database to avoid human interaction).

From GallicaPix (IIIF local menu available on each illustration) or using this URL, open the Vogue June 1920 issue in a Mirador instance, like the BnF https://manuscrits-france-angleterre.org/ portal.

Download the GallicaPix IIIF annotations for this June 20 issue on your local disk (or export it from GallicaPix using the IIIF menu).
Load the JSON annotations file in Mirador (on the upper right corner, Download button + Importing Annotation option).
Display the annotations (upper left corner, Toogle annotations button).

In the previous scenario, the manifest and its annotations are not formally linked. Other use cases may imply to directly link the annotations to the manifest, using the otherContent feature. A link to the annotations file is added into the first canvas of the manifest:

...
,
      "otherContent": [
    {
        "@id": "https://raw.githubusercontent.com/altomator/IIIF/main/annotations/bpt6k9604118j_iiif.json",
        "@type": "sc:AnnotationList",
        "label": "Annotations produced by GallicaPix"
    }
       ],
...

Now the annotations are visible when one opens the manifest in Mirador.

Obviously, as we're dealing with a server, the otherContent link in our manifest might be a direct call to the end-point outputing the JSON data (see in Mirador):

...
,
      "otherContent": [
    {
        "@id": "https://gallicapix.bnf.fr/rest?run=exportAnnotationsIIIF.xq&corpus=vogue&id=bpt6k9604118j&locale=en",
        "@type": "sc:AnnotationList",
        "label": "Annotations produced by GallicaPix"
    }
       ],
...

Note: The content of these annotations could even be searchable using the IIIF Content Search API.

Scientific Annotations

Some of the Mandragore database's enlightened manscripts has been exported as IIIF annotations. After opening a manuscript in an Mirador instance, one can visualize the Mandragore annotations. Try it on the Arabe-274 manuscript.

IIIF and maps

The IIIF Georeference extension allows to store the metadata needed to georeference a IIIF resource in a georeference annotation.

Example for this map (Carte Cassini 079, région de Reims) which has been georeferenced using AllMaps Editor. The illustrated region on the map is specified using an SVG selector drawn with AllMaps Editor. GCPs and selector are outputed as an IIIF Annotation Page.

Open it in AllMaps Viewer

AllMaps Viewer

For automation purposes, the same map can be georeferenced with 2 GCPs extracted from the BnF catalog's record (field 042, scale and coordinates):

042 0. $a a $u hi $b 86400 $d E0035700 $e E0050200 $f N0493100 $g N0490200

In this case (see the Annotation Page), there is no SVG selector and the third GCP is deduced from existing GCPs (with an obviously imprecise result).

Open it in AllMaps Viewer.

IIIF Ranges

ToC, lists, index can be exposed as a structure of Ranges. This v3.0 manifest showcases how to expose a ToC from a monography using this feature.

IIIF and OCR

Texts produced by OCR engines can be disseminated using various mechanisms offered by IIIF (look at this work).

...
, {
      "@id" : "https://gallica.bnf.fr/iiif/ark:/12148/bpt6k9604118j/canvas/f19",
      "label" : "3",
      "height" : 5221,
      "width" : 3791,
      "images" : [ {
        "motivation" : "sc:painting",
        "on" : "https://gallica.bnf.fr/iiif/ark:/12148/bpt6k9604118j/canvas/f19",
        "resource" : {
          "format" : "image/jpeg",
          "service" : {
            "profile" : "http://library.stanford.edu/iiif/image-api/1.1/compliance.html#level2",
            "@context" : "http://iiif.io/api/image/1/context.json",
            "@id" : "https://gallica.bnf.fr/iiif/ark:/12148/bpt6k9604118j/f19"
          },
          ...
        },
        "@type" : "oa:Annotation"
      } ],
      "seeAlso": {
            "@id": "https://raw.githubusercontent.com/altomator/IIIF/main/collection/X/X00000019.xml",
            "profile": "http://www.loc.gov/standards/alto/ns-v4#",
            "format": "text/xml"
          }, ...

These ALTO files could also be dereferenced on the fly thanks to the Gallica OCR API: ALTO file #19, document ID bpt6k9604118j

IIIF viewers need an extension to display the OCR content. Johannes Baiter (MDZ Digital Library team, Bavarian State Library) developped such a Mirador 3 plugin that can be used to open our OCR test:

Open the Mirador demo instance: https://mirador-textoverlay.netlify.app/
Add a new IIIF resource (use the + blue button) and load the Vogue collection manifest with its URL.
Using the Info side panel, navigate to the 1920 sub-collection, then to the June issue and finally to image #19 (page folio #3).
The text overlay toolbox must be visible, and the OCR content displayed as overlays.

OCR text as overlays

Same is true for transcription produced by HTR. Open with the MDZ plug-in this Michel Foucault reading notes transcribed by the ANR Fiches de lecture Michel Foucault project thanks to Transcribus, and jump to page 4 (note: scaling problem).

OCR as Annotations

OCR text can be described as an annotations list linked to a canvas (look at this IIIF recipe). ALTO XML can be easily converted to IIIF annotations with XSLT scripts.

OCR as XML fragments

Transcription of content into XML, XPaths being used to select a segment.

IIIF and A/V

Video

This simple manifest presents a single video file in a IIIF Presentation resource. The video file is referenced as a Gallica URL. Mirador and Universal Viewer can handle this A/V manifest.

Audio

tbc

IIIF Curation

tbc http://codh.rois.ac.jp/software/iiif-curation-viewer/demo/?curation=https://mp.ex.nii.ac.jp/api/curation/json/962dc427-6241-4200-82ad-69a0821b573c&lang=en

Digital mediation and IIIF

IIIF can be used for digital storytelling round images and documents.

Storiiies

Look at the Cogapp Storiiies web app and this example exploring an Egyptian papyrus. See also this post (FR).

Storiiies

The stories editor is here.

Exhibit

Exhibit is another IIIF applications editor developped by Mnemoscene.

This example demonstrates how to use Exhibit to create narratives based on IIIF documents:

Opening a IIIF manifest to start working with Exhibit is straightforward:

CanvasPanel

Digirati CanvasPanel is another way to build IIIF applications with complex layout and rendering requirements.

Almanac as a navigator extension

A Chrome extension that shows a random document from the Gallica digital library according to the current season.

This is a fork from the David Rumsey Map Tab by mejackreed, which is itself a fork from the original MapTab by bsudekum.

Awesome

IIIF Experiments

Comparing Documents and Images

Comparing Documents with Mirador

Comparing Documents and Images with Mirador

Creating a mixed Manifest including Documents and Images

Layering Multiple Images

Deep zoom with large images

IIIF Collections

For Periodicals

For Thematic Collections

IIIF Annotations

AI Annotations

Scientific Annotations

IIIF and maps

IIIF Ranges

IIIF and OCR

SeeAlso

OCR as Annotations

OCR as XML fragments

IIIF and A/V

Video

Audio

IIIF Curation

Digital mediation and IIIF

Storiiies

Exhibit

CanvasPanel

Almanac as a navigator extension