Running a IIIF server in Streamlit

Using Streamlit
1

Has anyone been able to get a IIIF server running in Streamlit? E.g., Mirador or Universal Viewer? (IIIF Viewers — IIIF | International Image Interoperability Framework)

One that I tried in particular is the diva.js viewer, as it seemed one of the most straightforward. (https://diva.simssa.ca/) From the instructions in github (GitHub - DDMAL/diva.js: 📚 IIIF-compatible document image viewer), I included the following as an html block in Streamlit (using unsafe_allow_html)

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/diva.js/6.0.2/css/diva.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/diva.js/6.0.2/js/diva.js"></script>
    <div id="diva-wrapper"></div>
    <script>
        let diva = new Diva('diva-wrapper', {
            objectData: "http://www.example.com/manifest.json"
            // possible settings
        });
    </script>

But nothing showed up. (Note the above example includes a dummy IIIF manifest. I did use an active one: https://iiif.bodleian.ox.ac.uk/iiif/manifest/e854c131-0499-468d-bccc-87e3a4c06ec7.json

I’m pretty good with Python and HTML, but my JS knowledge is pretty low. I looked through the Streamlit forums but didn’t find any references. Has anyone else worked with this successfully (or otherwise)?

2

Hi @ewolfe1

Instead of using st.markdown() with the unsafe_allow_html parameter, have you tried using st.components.v1.html() to embed the HTML block?

More info from the Docs page:

There’s also a resource on IIIF here as well that you can check out for potential Python libraries or APIs with this functionality: