awacke1/PromptChordSheet · Streamlit Components to Do Multipage Apps?

Experimenting with pattern of generating streamlit components to do advanced layout. Test below demonstrates:

Streamlit components allow you to mix HTML5 and streamlit.  Create a streamlit demonstration to load all text files in current directory ending in .txt and show them in a two page (left and right page) viewer with small text.  Use program below as example on how to create streamlit components.  import streamlit as st
import streamlit.components.v1 as components

# bootstrap 4 collapse example
components.html(
    """
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <div id="accordion">
      <div class="card">
        <div class="card-header" id="headingOne">
          <h5 class="mb-0">
            <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            Collapsible Group Item #1
            </button>
          </h5>
        </div>
        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
          <div class="card-body">
            Collapsible Group Item #1 content
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header" id="headingTwo">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            Collapsible Group Item #2
            </button>
          </h5>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
          <div class="card-body">
            Collapsible Group Item #2 content
          </div>
        </div>
      </div>
    </div>
    """,
    height=600,
)

import streamlit as st
import streamlit.components.v1 as components
import os

def load_text_files():
    """Load text files from current directory."""
    text_files = [f for f in os.listdir('.') if f.endswith('.txt')]
    return text_files

def display_file_content(file_name):
    """Read and return the content of a given file."""
    with open(file_name, 'r') as file:
        return file.read()

def main():
    st.title("Text File Viewer")

    # Load text files from the current directory
    text_files = load_text_files()

    if text_files:
        # Create a select box for choosing the file
        selected_file = st.selectbox("Choose a file to view", text_files)
        
        # Read and display the content of the selected file
        file_content = display_file_content(selected_file)
        
        # HTML for displaying text files side by side
        html_content = f"""
        <div style="display: flex; justify-content: space-between;">
            <div style="width: 49%; overflow: scroll; white-space: pre-wrap; font-size: small;">
                <h5>Page 1</h5>
                <p>{file_content}</p>
            </div>
            <div style="width: 49%; overflow: scroll; white-space: pre-wrap; font-size: small;">
                <h5>Page 2</h5>
                <p>{file_content}</p>
            </div>
        </div>
        """
        
        # Use Streamlit components to render HTML
        components.html(html_content, height=600)
    else:
        st.write("No text files found in the current directory.")

if __name__ == "__main__":
    main()