Customize UI to show some metadata

[cceyda]

Is your feature request related to a problem? Please describe. Some labeling jobs benefit from extra metadata to disambiguate the context. That is why I would like to show some of the metadata fields in the UI along the text that is being labeled.

Describe the solution you'd like The easiest interface to use imo would be If I could provide a simple parameter like 'metadata_view' to the labeling job.

# metadata.image is a field in the `record`
metadata_view={"img":"metadata.image"} # metadata.image could be url or base64 image
#or
metadata_view={"span":"metadata.extra_info"} 
#or
metadata_view={"img":"metadata.image","span":"metadata.extra_info"} 

which would add an html img/span(maybe a link too) tag under the UI using that field. This wouldn't give a lot of control over the placement(html style) of the things but I feel is good enough.

A good example of a more customizable UI is prodi.gy

Describe alternatives you've considered I could just fork and modify the UI for my job(which file would I have to mod?), but I have limited web dev knowledge 😅 Does the UI have access to the full record object? Additional context showing these fields only during labeling would be enough.

[dvsrepo]

Thanks, @cceyda this is a very detailed description of the feature, thanks for taking the time. We have planned this as an upcoming feature but it's still not prioritized in the roadmap (see #1837). We'll take your request into account in the planning process, and get back to you once is prioritized.

[dvsrepo]

@cceyda I know it is far from ideal (especially for images) but one way to show at least the content of the extra fields for TextClassification is to include them in the inputs dict, for example:

rg.TextClassificationRecord(inputs={"text": "...", "comment": ".....", "url": "..."})
# this will not make the URL an anchor but at least it will be visible in the record card

Just in case this can be useful for your use case while ship this feature.

[dhruvsakalley]

This is a really nice suggestion, also if the customizable UI would allow for some metadata elements to be editable (as opposed to readonly) during the annotation process that might be useful and might be able to solve for a related issue. https://github.com/argilla-io/argilla/issues/1939

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[cceyda]

I'm still interested in this.

[cceyda]

I feel like this might be nice to include at least in the "View record info" view that got introduced in v.1.2.0. @dvsrepo would frontend/components/commons/results/RecordInfo.vue be enough if I try to do some modifications of my own?

[cceyda]

Ok I DIYed a thing referencing the solution @burtenshaw shared on slack.

https://github.com/argilla-io/argilla/compare/develop...cceyda:argilla:image_shortcuts_custom

if metadata has a image_path key it renders an image like:

(You are responsible for hosting the image but that isn't a big problem imo) if metadata has a link it renders a link under the image.

Ideally I would like button next to the bulk "Validate,Discard" buttons that would hide/show all images. And maybe the link could be embedded with the image.

But my frontend skills end here. If you wanna edit the style you can always use the dev console and modify ".meta_image" style 🙈

I hope this gets the ball rolling on an official better implementation 🥺

[cceyda]

should probably remove these special meta fields from the metadata filter.

[dvsrepo]

🤯 @cceyda, we're already discussing how to push this official implementation, to see this type of contribution from the community is highly encouraging!

[keithCuniah]

Just for information, adding an image url in metadata is available for TextClassification and TokenClassification. Not in Text2Text