IIIF Palette Service

This is an example of a IIIF Service that encodes color palettes into the IIIF Image API. It also provides a demonstration of a viewer for it, as well as a functional transform generator for adding this service to existing info.json files.

The demonstration below uses all three of these components. If you provide it with the Image API ID of an image, it will attempt to display the palette of that image. If the Image API doesn't support the service yet (and it would be shocking if it did), it will attempt to use the generator to calculate a palette for the image, and if successful it will return a modified copy of the info.json file that includes the new service.

Finally, it will display the palette of the image.

Demonstration of the IIIF Palette Service

How it Works

In order to define an IIIF Service, there needs to be an profile, a JSON-LD context, and a standardized JSON syntax. Together, these define how the service works and how the data will be structured both as an API and as Linked Open Data. The service is an abstract data model and doesn't actually implement anything—it just describes the way in which the data will appear.

In order to actually create the data this example provides an generator that will implement the service. It uses a lightly modified version of Cooper Hewett's palette code to generate a list of up to five dominant colors, along with their closest CSS3 matches. To use the generator, send POST request to http://palette.david.newbury.com?url=<IMAGE_API_ID> . This performs a functional transformation of the Image API's info.json file, and will return a copy of the info.json file with the service appended. I'm using this functional transformation pattern to allow several generators like this to be chained together as part of a pipeline that augments IIIF APIs with additional metadata.

Currently, it uses the IIIF Image API to send a 300px wide image for palette extraction. Future improvements might include being able to specify how large the image is (smaller is faster but less accurate), as well as being able to specify which fixed palette to use when determining closest matches.

Finally, this example provides an example of a consumer of this service that displays that palette associated with a specific image. A more sophisticated consumer might use this information to reference additional items with the same palette, to adjust the background behind an image to coordinate with the average color of the image, or to help with other automated tasks.

Example JSON Syntax

"service": {
          "@context": "http://palette.davidnewbury.com/vocab/context.json",
          "profile": "http://palette.davidnewbury.com/vocab/iiifpal",
          "label": "Palette automatically generated with a IIIF Palette Server",
          "average": {
            "closest": "#696969",
            "color": "#7e6c5a"
          },
          "palette": [
            {
              "closest": "#556b2f",
              "color": "#54554c"
            },
            {
              "closest": "#696969",
              "color": "#7b5f4d"
            },
            {
              "closest": "#d2b48c",
              "color": "#c8baa0"
            },
            {
              "closest": "#808080",
              "color": "#98896f"
            },
            {
              "closest": "#556b2f",
              "color": "#54402d"
            }
          ],
          "reference-closest": "css3"
        }

References