Add example for multi page image labeling (released in 1.15.0)

[maerteijn]

Is your feature request related to a problem? Please describe.
In Label Studio 1.15.0 you added a great feature for multi page image labeling.

I can't get this to work, following the documentation provided on the template page: https://labelstud.io/templates/multi-page-document-annotation. Whatever I try, no images are displayed, nor the controls to go to the next/previous image. No javascript errors are displayed in the console. I have no clue what I do wrong.

Even a barebone <Image valueList="$images" name="image" /> with the minimal required data is not doing anything:

task: {
    annotations: annotations,
    predictions: [],
    id: 1,
    data: {
        images: [
            "https://htx-pub.s3.amazonaws.com/demo/images/demo_stock_purchase_agreement/0001.jpg"
        ]
    }
}

Describe the solution you'd like
For other templates you provide "Preview" and "Open in Playground" links (see example below).

It would be very helpful to add an example for this feature too, so I can double check what I did wrong.

[maerteijn]

So I've got this working now with the stand alone editor, it's important to explicitly enable the following feature flag:

     "fflag_feat_front_lsdv_4583_multi_image_segmentation_short": true

And to disable this one:

     "fflag_fix_front_dev_3391_interactive_view_all": false

So like this:

<script>
    window.APP_SETTINGS = {
        feature_flags: {
           "fflag_feat_front_lsdv_4583_multi_image_segmentation_short": true,
           "fflag_fix_front_dev_3391_interactive_view_all": false
        }
    }
</script>

Then you can use this multi page feature as described in the documentation:

<script>
    const lsfConfig = {
      config: `<View>
                  <RectangleLabels name="rectangles" toName="pdf" showInline="true">
                    <Label value="Title" background="red"/>
                    <Label value="Summary" background="blue"/>
                    <Label value="Author" background="green"/>
                    <Label value="Table" background="gold"/>
                    <Label value="Citation" background="purple"/>
                  </RectangleLabels>
                  <Image valueList="$pages" name="pdf"/>
                </View>`,
      interfaces: ["submit", "skip", "controls", "topbar", "side-column"],
      task: {
        annotations: [],
        predictions: [],
        id: 1,
        data: {
          pages: [
            "https://htx-pub.s3.amazonaws.com/demo/images/demo_stock_purchase_agreement/0001.jpg",
            "https://htx-pub.s3.amazonaws.com/demo/images/demo_stock_purchase_agreement/0002.jpg",
            "https://htx-pub.s3.amazonaws.com/demo/images/demo_stock_purchase_agreement/0003.jpg",
          ],
        },
      },
      history: [],
    };

    const ls = new LabelStudio("label-studio", lsfConfig);

    ls.on("labelStudioLoad", (ls) => {
      const annotation = ls.annotationStore.addAnnotation({
        userGenerate: true,
      });
      ls.annotationStore.selectAnnotation(annotation.id);
    });
</script>

[heidi-humansignal]

Hello,

Sorry, I wasn't reproduce this on my local setup. It was working out of the box, but I wasn't using stand alone setup. Glad you figured it out. Let me look into it and probably update the document with more details.

Thank you,
Abu

Comment by Abubakar Saad
Workflow Run