PDF display in a block

[BouzidiImen]

• I have searched to see if a similar issue already exists but I can't find any solution.
• I am working on a dashboard to demo a model that classifies articles and output tags, and I need the users to correct the results/output of the model.

Solution
I would like to have a feature that allows the display of a pdf file on the dashboard.

[abidlabs]

Thanks @BouzidiImen for the suggestion. Agree that this would be a useful component!

[fazpu]

https://github.com/vinodnimbalkar/svelte-pdf could be a good candidate for integration

[pseudotensor]

Any thoughts on this @abidlabs ?

[abidlabs]

Hi! We've now made it possible for Gradio users to create their own custom components -- meaning that you can write some Python and JavaScript (Svelte), and publish it as a Gradio component. You can use it in your own Gradio apps, or share it so that anyone can use it in their Gradio apps. Here are some examples of custom Gradio components:

• A "Rich Textbox" that allows you to write bold/italics/colored text
• A "Folium Map Viewer" component that allows you to use interactive maps

You can see the source code for those components by clicking the "Files" icon and then clicking "src". The complete source code for the backend and frontend is visible. In particular, its very fast if you want to build off an existing component. We've put together a Guide: https://www.gradio.app/guides/five-minute-guide, and we're happy to help if you'd like to put together a custom component for this issue

[freddyaboulton]

This is now possible with the gradio_pdf custom component available in version 4.

You can see it live on HuggingFace spaces here: https://huggingface.co/spaces/freddyaboulton/gradio_pdf

Install with pip install gradio_pdf and get started!

import gradio as gr
from gradio_pdf import PDF
from pdf2image import convert_from_path
from transformers import pipeline
from pathlib import Path

dir_ = Path(__file__).parent

p = pipeline(
    "document-question-answering",
    model="impira/layoutlm-document-qa",
)

def qa(question: str, doc: str) -> str:
    img = convert_from_path(doc)[0]
    output = p(img, question)
    return sorted(output, key=lambda x: x["score"], reverse=True)[0]['answer']


demo = gr.Interface(
    qa,
    [gr.Textbox(label="Question"), PDF(label="Document")],
    gr.Textbox(),
    examples=[["What is the total gross worth?", str(dir_ / "invoice_2.pdf")],
              ["Whos is being invoiced?", str(dir_ / "sample_invoice.pdf")]]
)

demo.launch()

[MousumiSahaDXC]

Hi @freddyaboulton Many thanks to you for building this. How to use gradio-pdf to upload multiple pdfs together and also display them in a single upload click .
Something like the one shown in the attached image