Exporting Dataset with Button

1

I'm working on setting up a basic ner.manual application for my team. For this first iteration we're wanting to give them the ability to upload, annotate, and export a set of text documents.

The upload portion is working well enough for now, but the issue we're running into is with the export. I can provide a button that will export, but because it's displayed as a part of the ner block, it disappears when the stream is out of tasks.

The other issue is, if the user has not saved, there is nothing to export. I was looking over the list of custom events exposed by prodigy, but I did not see the save event on the list.

I'm wanting to either give them a button that will activate on save (and stay visible after the stream is empty) or to auto-export to the file drop when they save. However because I cannot see the save event being exposed, the only thing I can think is to look for a way to trigger an auto-save in the script after the stream runs out of examples, so that I can ensure there is data in the dataset before attempting to export.

I'm hoping there's a better way around this, or maybe that I'm thinking about it in completely the wrong way.

Best,

2

Welcome to the forum @kwaddle!

The easiest way to add export functionality from the UI would be adding a custom button with the export logic (just like planned).
To make sure the button stays visible, you could, for example, append it to the existing Prodigy buttons (the prodigy-buttons container):

function onExportClick(event) {
    // add export logic
}

const button = document.createElement('button')
button.innerHTML = `
        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5 20H19C19.5523 20 20 19.5523 20 19V8H18V19H6V8H4V19C4 19.5523 4.44772 20 5 20Z" fill="white"/>
            <path d="M11 16V4H13V16H17L12 21L7 16H11Z" fill="white"/>
        </svg>`;
button.setAttribute('id', 'export-button'); // assign an id
button.setAttribute('style', 'width: 100px; height: 100px; border: 5px solid white; border-width: 4px 4px 0 2px !important; background-color: lightskyblue; text-align: center;');

var buttonsContainer = document.getElementsByClassName('prodigy-buttons'); // Access by class name // Ensure buttonsContainer is defined
if (buttonsContainer) {
    console.log(buttonsContainer)
    buttonsContainer[0].appendChild(button)
    button.addEventListener('click', onExportClick);
    } else {
        console.error('buttonsContainer not found');
    }

This should result in the following UI and it should not disappear when the end of stream screen shows up:

image
image1043×518 11.8 KB

The annotators will still have to remember to save. Please remember that Prodigy saves the annotations automatically, everytime the full batch of annotations is completed. Thus, you can make sure it is being saved more frequently by making the batch_size smaller. You can even automatically save an example each time the users hits the accept/reject/ignore buttons by setting instant_submit to true in your prodigy.json but this would make it impossible to use the undo feature of the UI.

Finally, you can make sure everything is saved by listening to prodigyend event and adding the logic there or just display a reminder to save and export before shutting down the browser tab.

1 Like
3

This is great! Thanks so much! I'll give it a try :slight_smile: