PDF is not shown when I set the rendering to 'legacy_iframe' or 'legacy_embed'. I want a scrollable and zoomable PDF within a frame.

[mingjun1120]

I want to create a page with 2 columns (st.columns([2, 1]) where the left column will display the PDF uploaded by users and the right column will allow users to ask questions (RetrievalQA, not Conversational type) related to the uploaded file. However, I have found that some of the files are not displayed on the web when I set the rendering parameter to legacy_iframe or legacy_embed. The unwrap parameter works fine; the PDF file can be displayed, but I have to scroll to the bottom of the entire page to see the file contents if the file has many pages.

Below is my code:

import base64
import streamlit as st
from streamlit_javascript import st_javascript
from streamlit_pdf_viewer import pdf_viewer

st.set_page_config(page_title="pdf-GPT", page_icon="📖", layout="wide")
st.write("<h2 style='text-align: center;'><span style='color: blue;'>TEST</span> Legal </h2>", unsafe_allow_html=True)

with st.sidebar:

    uploaded_file = st.file_uploader(
        "Upload file", type=["pdf"], 
        help="Only PDF files are supported", 
    )

col1, col2 = st.columns(spec=[2, 1])

if uploaded_file:
    with col1:
        ui_width = st_javascript("window.innerWidth")
        
        # Read file as bytes:
        bytes_data = uploaded_file.getvalue()
        
        # Embed PDF in HTML
        pdf_display = pdf_viewer(input=bytes_data, rendering='unwrap')
        
        # Display file
        st.markdown(pdf_display, unsafe_allow_html=True)
    
    with col2:
        question = st.text_input(
            "Ask something about the article",
            placeholder="Can you give me a short summary?",
            disabled = not uploaded_file,
        )

How the web looks like:

Sample file:

2024 EY Open Science Data Challenge Participant Guidance.pdf