Verovio, Streamlit, and Segmentation Error with Fonts. Advice needed

[RichardFreedman]

Friends,

I have been using Verovio successfully in a Jupyter notebook environment to render scores (and measure selections). I have installed Verovio with pip, and then use the toolkit to call up the piece or measures. No problems.

Now I would like to use Verovio in a great resource called Streamlit, which (in brief) allows you to quickly create interactive web apps with simple commands and widgets. So users can filter data (lists of pieces), or show charts, plots, etc. Example for metadata in the CRIM Project here.

In principle, it works! Well, it works the first time I load the app. We fetch MEI or MusicXML, then pass it to the toolkit, and it renders just fine! But then when I reload the app for a different piece, there is a segmentation fault, apparently because Streamlit cannot find the fonts. I attach the error message here and also the basic code in Streamlit (which is simply python inside a wrapper for Streamlit).

Does anyone have a suggestion about how to make the fonts accessible or some other solution? Thank you!
logs.txt

Richard

[ahankinson]

My best guess would be that it still has Verovio running in memory, but it somehow cleaned up the data directory. What's the actual Python script that you're writing? Is there any way to see this?

[RichardFreedman]

Thanks Andrew! In the end I was able to solve it quite simply with the Verovio App. Streamlit is a great way to build interactive web applications, with all sorts of widgets to select from lists, turn on and off functions, upload and download content.

Here is code to make it work:

import streamlit as st
from pathlib import Path
import requests
from requests.sessions import DEFAULT_REDIRECT_LIMIT
import base64
import verovio
import os
from streamlit import caching


import streamlit.components.v1 as components


components.html(
    """
    <div class="panel-body">
    <div id="app" class="panel" style="border: 1px solid lightgray; min-height: 800px;"></div>
</div>

<script type="module">
    import 'https://editor.verovio.org/javascript/app/verovio-app.js';

    // Create the app - here with an empty option object
    const app = new Verovio.App(document.getElementById("app"), {});

    // Load a file (MEI or MusicXML)
    fetch("https://raw.githubusercontent.com/CRIM-Project/CRIM-online/master/crim/static/mei/MEI_4.0/CRIM_Mass_0001_1.mei")
        .then(function(response) {
            return response.text();
        })
        .then(function(text) {
            app.loadData(text);
        });
</script>


    """,
    height=600,
)