Problems displaying pdf in Streamlit Cloud

Community Cloud
1

Greetings. I’m working on a Streamlit app that allows users to pose questions to GPT-3 about a historical text. I’ve recently moved my Python script to Streamlit cloud, and everything works well except rendering the pdf. Below is a screenshot, and here is a link to the app:

Screenshot 2023-01-03 105814
Screenshot 2023-01-03 1058141917×920 61.8 KB

The pdf displays correctly when I run it locally, but no luck with Streamlit Cloud. I’ve tried multiple methods (here, here respectively), and here), and tried loading the pdf directly from the web, from Github, and from Google Drive. None seem to work. Here’s my code for displaying the pdf.

st.title("Ask A Source: Thomas More's 'The History of Richard III'")
col1, col2 = st.columns([2,3])
with col1:

    #method 1
    pdf_url = 'https://github.com/Dr-Hutchinson/prompt_chain_0/blob/main/annotated_full_text.pdf'
    pdf_display = F'<iframe src="{pdf_url}" width="700" height="700" type="application/pdf"></iframe>'
    st.markdown(pdf_display, unsafe_allow_html=True)

    #method 2
    st.markdown("""
    <embed src="https://thomasmorestudies.org/wp-content/uploads/2020/09/Richard.pdf" width="800" height="800">
    """, unsafe_allow_html=True)
    #pdf_display = F'<iframe src="https://thomasmorestudies.org/wp-content/uploads/2020/09/Richard.pdf" width="700" height="1000" type="application/pdf"></iframe>'

Any ideas on how to proceed?

1 Like
2

Your method 2 works for me in Streamlit Cloud.

3

Thanks very much for the reply. Unfortunately, all I get is an empty frame or or a message indicating Chrome is blocking the file (I’ve tried the same thing for Github and Google Drive, all with the same error)

4

I clicked your app link and the pdf is showing fine for me. What browser are you using? Can you try private/incognito windows? Can you try other browsers? Maybe you need to clear your browser cache or you have a security setting that is blocking it.

image
image1168×593 31.3 KB

1 Like
5

Thank you very much for checking it! For some reason it doesn’t display on my computers hooked up to my college’s network, but also displays fine on my phone(!). This will give me some options to see what’s going on. Thank you!

1 Like
6

Can I ask which browser you used? I’m using Chrome and Edge with no luck so far.

7

I opened it in Firefox without an issue. I do see that it isn’t loading in Chrome and Edge, though. (Edge being built on Chromium, of course.)

Can you try changing the source to the raw link:

https://raw.githubusercontent.com/Dr-Hutchinson/prompt_chain_0/c2f3795f25683fb194e11072abb9d586964896a2/annotated_full_text.pdf

8

any updates @Daniel_Hutchinson on how you rendered it on streamlit cloud? I tried Chrome and i got the same thing and for safari it doesn’t even show lol.

This is how I’m rendering it

def show_pdf(folder_name, file_name):

    with tempfile.NamedTemporaryFile("wb") as f_src:
        logging.info(f"Downloading {file_name}...")
        s3.download_file(f"{folder_name}/{file_name}", f_src.name)

        with open(f_src.name, "rb") as f:
            base64_pdf = base64.b64encode(f.read()).decode("utf-8")

        pdf_display = f"""
        <iframe
            src="data:application/pdf;base64,{base64_pdf}"
            width="100%" height="1000"
            type="application/pdf"
            style="min-width: 400px;"
        >
        </iframe>
        """

        st.markdown(pdf_display, unsafe_allow_html=True)
9

Have you found a solution? I have the same problem. It only works in firefox.

10

I have also tried to display a PDF file in browser, and I failed in Chrome and Edge. It only works well on Firefox.

11

Please, check this out: GitHub - lfoppiano/streamlit-pdf-viewer: Streamlit PDF viewer

it’s a new component we are developing for viewing PDF documents in streamlit

3 Likes
12

Great component! It would be fantastic if it has scroll bars and zoom :slight_smile: