Hi,
I’m trying to build a data extraction tool that uses an OCR API (https://platform.mindee.com/) to extract data from uploaded invoices.
I want to create the same exact layout as shown below, with the added features of clicking through each invoice and either “approving” or “rejecting.”
How can I go about displaying the visual in weweb?
The current PDF viewer element in weweb doesn’t allow overlays.
What part of the layout is hard for you to make?
Colored overlays on the right of the PDF that link to the extracted field on the right.
How will you know where the colored overlays will be? What data do you have?
Mindee provides coordinates on the page to render the colored overlays.
Example:
“polygon”: [
[0.1, 0.205],
[0.216, 0.205],
[0.216, 0.228],
[0.1, 0.228]
],
Then you have to use some draw library to draw those on an image/pdf. Or you could use it to absolutely position rectangles, but I’m not sure how that would work.
I’d absolutely position rectangles over the PDF. So you’d have a rectangle of position relative, then inside that your PDF viewer, then adjacent to that your divs (or another wrapper div that is also position relative). The individual polygons would all be position absolute. That lets you draw rectangles on “top” of the PDF.
The generalized form of a polygon is a list of points that make it up, with each edge being the line drawn between each pair of points. The last line is implied by going from the last point to the first point. If you know it is a rectangle, then the first point and the third point are all you need to figure out the bounding box.
The format of the numbers makes it look like they represent the % of page width and height. You can multiply by 100 and add a “%” at the end to get the x/y and the width/height going for you. That positions a div that you can put anything else inside.
There’s some work between here and there, but I hope this gets you started for your initial experimentation!
Yeah, that might be a solution, but it should be responsive with the screen resize/rem units etc. also he needs to calculate the width/height based on the points. Other than that, this would be the first approach I’d go for.
Appreciate the responses, will look into these. Thanks!
