Multi-page annotation ML backend

I want to make with ~8 images at once
This is the view I want to use, how can I modify the tesseract.py API backend for ML-assisted labeling of the example?
The biggest problem I'm facing is finding the idx of the image and returning the result
This is urgent, please help me :(

```

<View style="display: flex; justify-content: center;">
<Header value=" Rate this page:"/>
<Rating name="rating_{{idx}}" toName="page_{{idx}}"/>
</View>
</Repeater>
</View>

<!-- {
"document": [
{
"page": "https://htx-pub.s3.amazonaws.com/demo/images/demo_stock_purchase_agreement/0001.jpg"
},
{
"page": "https://htx-pub.s3.amazonaws.com/demo/images/demo_stock_purchase_agreement/0002.jpg"
},
{
"page": "https://htx-pub.s3.amazonaws.com/demo/images/demo_stock_purchase_agreement/0003.jpg"
}
]
} -->
```