International Image Interoperability Framework

Peter Binkley

Code4LibAB, Edmonton, 25 Nov. 2016

These slides

http://tinyurl.com/code4libab2016-iiif

"Year of Javascript"

On the back of a napkin in a Cuban restaurant in Palo Alto

http://iiif.io

Milestones

• 2012: 1.0
• 2013: 1.1
• 2014: 2.0 versions
• 2015: IIIF Consortium formed (11 institutions)
• 2016: First full-time staff; 2.1 versions
• https://github.com/IIIF/awesome-iiif

Demos

• An image ((more information)
• A book
• A newspaper issue
• A hacked manuscript
• Puzzles

A Family of APIs

• Image API
• Presentation API
• Search API
• Authentication API (beta)

You need a tile server...

• Source images optimized for tiles: JPEG2000 or Pyramidal TIFF
• Applications:
• Djatoka
• Loris
• IIPImage
• riiif (Ruby)
• various shims, including one for ContentDM
• Or: go static! (Level 0 Compliance)

Image Service

• Depends on a specific URL pattern: /12288,8192,4096,4096/1024,/0/default.jpg
1. Region: 12288,8192,4096,4096
2. Size: 1024,
3. Rotation: 0
4. Quality: default
5. Format: jpg

Playing with URL components

Default: http://libimages.princeton.edu/loris2/pudl0001%2F5138415%2F00000011.jp2/full/full/0/default.jpg

Let's play! http://libimages.princeton.edu/loris2/pudl0001%2F5138415%2F00000011.jp2/999,999,2023,2023/256,/45/gray.jpg

info.json

http://libimages.princeton.edu/loris2/pudl0001%2F5138415%2F00000011.jp2/info.json

Formatted version

json-ld

• json-ld: Linked Data expressed in JSON
• e.g. "height": 7200 corresponds to:

Subject: <http://libimages.princeton.edu/loris2/pudl0001%2F5138415%2F00000011.jp2>

Predicate: <http://www.w3.org/2003/12/exif/ns#height>

Object: "7200"^^<http://www.w3.org/2001/XMLSchema#integer>

Let's try it:

• RDF Translator...
• ... with a Stanford manifest: https://purl.stanford.edu/wh234bz9013/iiif/manifest.json ...
• ... converts json-ld to N-triples ...

Hands On

jekyll-iiif

• Jekyll plugin to present static IIIF resources
• 0.1.0 released yesterday
• demo images and Jekyll config (5 mb)

Steps

• Install ruby, jekyll and bundler
• Download images and unzip into jekyll folder
• Run bundle install to install jekyll-iiif
• Create collections and iiif layout (not necessary if you're using jekyll-iiif-stuff.zip)
• Start jekyll: jekyll s
• Visit jekyll at http://127.0.0.1:4000/
• Explore tiles directory

Adding a Presentation Viewer

• Add a page aliceviewer.md with {% iiif_manifest alice %}
• Add CORS header to _config.yml
• Restart Jekyll
• Visit http://127.0.0.1:4000/aliceviewer.html

Drag and Drop

• Open Mirador demo in another browser window
• Go to Alice gallery page
• Drag one of the IIIF logos over to one of the Mirador panes
• Now try it in the Universal Viewer
• Based on URL convention: manifest=, canvas=

Limitations of jekyll-iiif

• Level 0 compliance (static tiles)
• Requires server config to enable CORS header
• Requires regeneration of full tiles directory to change host (e.g. when moving from dev to production)

Presentation API

• Package all the images together...
• ...but so much more:
• Labels (note: NOT descriptive metadata record)
• Technical details of capabilities
• Annotations

Structure of a Manifest

• Manifest
• Sequence(s)
• Canvas(es)
• Annotation(s) - image, text, etc.

Shared Canvas and Open Annotation

• Shared Canvas Data Model

Painting a Canvas

Image Annotation

• See sc:Canvas elements in Alice manifest

Sharing the Canvas

See the manifest for the manuscript with the cut-out illuminated initials.

• A main tileSource from IRHT...
• ...and a "detail" with a zone and a tileSource from BNF

Text Annotation

{
    "@type": "oa:Annotation",
    "motivation": "sc:painting",
    "resource": {
        "@type": "cnt:ContentAsText",
        "format": "text/plain",
        "chars": "Vea Stephens, St Martin's Crescent. 0 10 0"
    },
    "on": "http://dams.llgc.org.uk/iiif/3100186/canvas/3100187#xywh=346,6196,870,58"
},

Ranges

For more complex internal structures, e.g newspaper articles that span multiple pages.

{
  "@id": "http://example.org/iiif/book1/range/r1",
  "@type": "sc:Range",
  "label": "Introduction",
  "ranges": ["http://example.org/iiif/book1/range/r1-1"],
  "canvases": [
    "http://example.org/iiif/book1/canvas/p1",
    "http://example.org/iiif/book1/canvas/p2",
    "http://example.org/iiif/book1/canvas/p3#xywh=0,0,750,300"
  ]
},

Where's the Metadata?

"label":"Book 1",
"metadata": [
	{"label":"Author", "value":"Anne Author"},
	{"label":"Published", "value": [
	    {"@value": "Paris, circa 1400", "@language":"en"},
	    {"@value": "Paris, environ 14eme siecle", "@language":"fr"}
	    ]
	}
],

"There are no semantics conveyed by this information, and clients should not use it for discovery or other purposes."

... somewhere else

"seeAlso":
{
  "@id": "http://www.example.org/library/catalog/book1.marc",
  "format": "application/marc"
},

Tools

Image

• OpenSeaDragon

Manifest

• Mirador (Stanford)
• Universal Viewer (Wellcome Institute)

Future Directions

• Multimedia
• Discovery

Resources

• iiif.io - APIs, community hub
• Awesome IIIF - list of projects, tools, etc. etc.