Implement Interactive PDF Viewer with Selectable Bounding Boxes and Metadata Output

[GautamR-Samagra]

Goal:

Create an interactive PDF viewer that allows users to view the PDF and its parsed text side by side, interact with selectable bounding boxes on the PDF, and obtain JSON outputs for selected PDF elements (e.g., table, header, footer, heading) along with required metadata.

Description

Develop a feature that enhances the user's ability to interact with PDF documents by:

• Displaying the PDF and the parsed text output side by side for easy comparison and analysis.
• Enabling hovering and clicking functionality on selectable bounding boxes within the PDF to highlight or select specific elements.
• Showing the corresponding parsed output for the selected bounding box on the parsed text side.
• Generating and providing JSON outputs for selected elements of the PDF (such as table, header, footer, heading, etc.), including necessary metadata for further processing or analysis.

An example of the desired functionality can be viewed in the video provided here.

Implementation Details

The implementation should cover the following aspects:

• A web-based application interface that displays PDFs and their parsed contents side by side.
• Functionality to define and interact with selectable bounding boxes over the PDF document. These boxes should be dynamic and adjustable to cover different PDF elements.
• Mechanisms to associate each bounding box with its corresponding parsed text or metadata, enabling users to click a bounding box and see related details on the parsed side.
• The ability to export selected element data as JSON, including specific metadata like page number, text content, and bounding box coordinates.

This project is open for anyone to start. Initially, no specific assignees. Questions and solutions can be discussed in the comments. The ticket will be assigned based on contributions and the quality of the pull request.

Product Name

pdfparsing

Organization Name

ai-tools

Domain

document parsing

Tech Skills Needed

• Python
• NodeJS

Category

Enhancement

Feature

Interactive PDF Viewer

Mentor(s)

@ChakshuGautam

Complexity

Medium

[Azazel0203]

Hello @GautamR-Samagra,

I'm Aadarsh, an ECE undergrad at IIT Varanasi. This project seems really interesting and aligns perfectly with my passion for machine learning.

I have compiled the output of the notebook into a PDF document for your convenience. You can download and review it from the following link: Output PDF.

To provide you with a visual insight into the project, I have also included some images of the output. You can view them here:
1

2

I'm intrigued by your project's potential and would love to contribute my skills.
Could you guide me on how to get started with contributing to this project?

Looking forward to the opportunity. Thanks!

[GautamR-Samagra]

Hi, this looks very promising. Can you integrate with a ocr tool/ PymuPDF so that you also get a json with the actual text on the right tab and whatever you have on the right tab is the left tab

[Azazel0203]

Sir i am getting the texts as well...i just haven't shown it in the output pdf Thankyou

…

On Fri, 19 Apr, 2024, 9:55 am Gautam, ***@***.***> wrote: Hi, this looks very promising. Can you integrate with a ocr tool/ PymuPDF so that you also get a json with the actual text on the right tab and whatever you have on the right tab is the left tab — Reply to this email directly, view it on GitHub <#301 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BBGMFX5USAAHCWFBX3SNI3DY6CMCXAVCNFSM6AAAAABFKSNEUKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANRVG4ZTEOJRG4> . You are receiving this because you commented.Message ID: ***@***.***>

[GautamR-Samagra]

Sir i am getting the texts as well...i just haven't shown it in the output pdf Thankyou
…
On Fri, 19 Apr, 2024, 9:55 am Gautam, @.> wrote: Hi, this looks very promising. Can you integrate with a ocr tool/ PymuPDF so that you also get a json with the actual text on the right tab and whatever you have on the right tab is the left tab — Reply to this email directly, view it on GitHub <#301 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/BBGMFX5USAAHCWFBX3SNI3DY6CMCXAVCNFSM6AAAAABFKSNEUKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANRVG4ZTEOJRG4 . You are receiving this because you commented.Message ID: @.>

That's great, can you create a repo for it and share that, will assign this ticket to you

[Azazel0203]

I've developed a repository that incorporates functionality for extracting text and implementing bounding boxes in PDF files. The backend processes for bounding box placement and text extraction are fully implemented and functional.

While the basic frontend tasks have been completed, such as establishing the frontend structure, more complex functionalities remain to be implemented.

You can find the repository here.

Thankyou