Skip to content

Setup our Generous Interface for your own Images

Jump to bottom
Aron Ambrosiani edited this page Oct 3, 2018 · 3 revisions

This document describes how to:

  • Automatically harvest custom images from Europeana and run these through Google Vision.
  • Modify the application to use your preferred logo and text descriptions.
  • Adding or removing translations.

Prerequirements

To complete this guide you should be familiar with the command line and how to use it. This guide is known to work on Ubuntu and Mac OS.

Core Software Requirements

  • Node.js 8.11.1 (latest stable version at the time of writing) is known to work
  • Python 3.6 or later
  • Git

Service Requirements

Installing and Running the Default Application

By default the application is the same as our demo prototype. Lets make sure it runs on your computer before we get started modifying it for your own content.

Open your terminal in a directory of your choice. Start by downloading the application code and enter its new directory:

git clone https://github.com/riksantikvarieambetet/Generous-Interface-Fashion.git && cd Generous-Interface-Fashion/app

You now have a directory called “Generous-Interface-Fashion” and within it two other directories, lets stick to the one named “app” for now.

In your open terminal we should now install the tool Vue-CLI (this guide will only use it behind the scenes):

npm install -g @vue/cli

With this tool installed we can now install the application itself by running the following:

npm install

This might take a while, but once done we can start the application:

npm run serve

After a while your default web browser should open at http://127.0.0.1:8080/. If not, just enter the URL once your terminal indicates that the application is running. That’s it!

Modifying the Application

Now we can do some basic modifications, to the app itself. Leave the terminal running as it is.

Changing the logo

Let's start by replacing the logo in the top left corner.

You should open the file /app/src/main.js in your favorite text editor. The logo is controlled with a link defined on line 17. Just change the URL to the location of your logo. Note that a logo 90x90 pixels is known to work well. Once you have changed to your own logo, the terminal will indicate that it's restarting the application. Your browser should automatically refresh(if not do it manually). The new logo should now have replaced the old placeholder.

Localisation

By the way if you wish to disable Swedish language support you do that in the same file, just remove line 21–23.

Now we can go ahead and edit the application description and other text content. Open the file /app/src/i18n.js, in this file you will find all text used within the application that does not origin from the content/Europeana. If you disabled Swedish you can just ignore those texts. Go ahead and edit some of the text and save the file to trigger the application to restart as described earlier. The changes should appear.

Using your own Data

Now we can go ahead and replace the content. I will use free art nouveau posters from different institutions as an example. It’s all based on this Europeana query.

The first thing we need to do is to convert this query to a text string that can be consumed by the Europeana API. The resulting sting will look as the following:

&query="art+nouveau"+AND+what%3Aposter&reusability=open&reusability=restricted&thumbnail=true

So what happened here? Lets go through the different parts of the string above.

&query="art+nouveau"+AND+what%3Aposter

This part is the actually search string you would write in the Europeana search box as a URL-encoded string.

&reusability=open&reusability=restricted

This part is used to restrict the content to items with open or semi-open licenses. Non-open content is not supported by the application. You could however limit it to only open contend by modifying this. (TODO: clarify open, semi-open, non-open)

&thumbnail=true

This part limits the content to items with thumbnails. Thumbnails are required so don’t remove these!

Now we can go ahead and modify the data generator to get your content into the application.

First open another terminal window in the data directory found in the Generous-Interface-Fashion directory. Here run the following to install a dependency of ours called pipenv:

pip install pipenv

Now we can install the application itself:

pipenv --python 3 && pipenv install

Now you should be able to run the application, but first let’s configure the application to target your content.

Open up the file named data-generator.py and pay attention to the parts that looks at the following:

for item in islice(search.generic_query_generator('qf=DATA_PROVIDER%3A"Världskulturmuseet"&query=dräkt+OR+textil+OR+smycke'), 1000):
    unprocessed_items.append(ItemStorage('none', 'none', item))

There should be five parts like this one. These define Europeana queries and the item limit. The example above uses the search query qf=DATA_PROVIDER%3A"Världskulturmuseet"&query=dräkt+OR+textil+OR+smycke and limits the number of results to 1000. By stacking parts like the following you can target multiple Europeana queries at the same time. Lets replace the five default queries with my art nouveau example:

for item in islice(search.generic_query_generator('&query="art+nouveau"+AND+what%3Aposter&reusability=open&reusability=restricted&thumbnail=true'), 1000):
    unprocessed_items.append(ItemStorage('none', 'none', item))

You can modify the limit of items, but we have not tested the application with a higher number of items than 5000. Go ahead and save the files.

Now we can run the application. From within the data directory type or copy the following into your terminal:

pipenv run python data-generator.py

You will now be prompted for your Europeana API key and the absolute path to your Google Service Account JSON file. Once entered the application will start the process of harvesting your content. This might take a while.

Once done you will find a file named data.json in the data directory. Such a file also exists in your app directory (app/public). To replace the content within the app just replace the old file with the new one. Go ahead and reload the application and the new content should be there. All filters should also work as expected and visualize the data for your content.

Clone this wiki locally