utils/data_users.py

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

ROOT_FIG_DIR = f'{os.getcwd()}/figures/'
def get_product_dev_page_layout():
    row4_1, row4_2, row4_3 = st.tabs(["Data Source Information", "Exploratory Data Stats", "Data Onboarding"])

    with row4_1:
        # st.write("**Data Source Info**")
        st.subheader('Data Source and Version Information')
        # new_title = '<h4 style="color:Green;">Data set infor:</h4>'
        # st.markdown(new_title, unsafe_allow_html=True)
        # where the data comes and how it is collected, what the data includes, what are the details of the data, how the data is used.
        # answers four different questions
        st.write("The data set consists of OCT images from CNV, DME, DRUSEN and NORMAL cases(from 4686 adult patients in total).")

        st.warning('Source')
        st.write("[Labeled Optical Coherence Tomography (OCT) and Chest X-Ray Images for Classification](https://data.mendeley.com/datasets/rscbjbr9sj/3)")
        st.caption("Version: 3")

        with st.expander('Data Collection Details(Click for more info)'):
            st.write("""OCT images are collected from the Shiley Eye Institute of the University of California San Diego, 
            the California Retinal Research Foundation,
            Medical Center Ophthalmology Associates, the Shanghai First People’s Hospital, and Beijing Tongren Eye Center between
        July 1, 2013 and March 1, 2017.""")
            
        st.subheader('Case Samples')
        # st.caption('VisuCase Samples')
        # https://www.aao.org/eye-health/ask-ophthalmologist-q/choroidal-neovascularization-definition-treatment
        st.image('./figures/oct_details.png')

        list_test = """<ul>Case explanations:
                            <li><strong>Choroidal Neovascularization (CNV)</strong> is a type of retinal disease that involves the growth of abnormal blood vessels in the choroid layer of the eye. These new blood vessels can lead to fluid accumulation beneath and within the layers of tissue, causing vision loss.
</li>
                            <li> <strong>Diabetic Macular Edema (DME)</strong>  is a common complication of diabetes that affects the retina responsible for central vision. This condition occurs when fluid accumulates in and around the macula, leading to retinal thickening and swelling, which can result in impaired vision or blindness.
</li>
                            <li><strong>DRUSEN</strong> is a condition associated with early Age-Related Macular Degeneration (AMD) in the retina. It involves the accumulation of small deposits of waste material in the retina, which can lead to vision problems.
</li>
                            <li><strong>NORMAL </strong> represents healthy retinalconditions and is a baseline for comparison with the aforementioned anomalies</li>
                        </ul>"""
        st.markdown(list_test, unsafe_allow_html=True)

        
        st.subheader('License Infomation')
        with st.expander('License: CC BY 4.0 license'):
            st.write("""
                The files associated with this dataset are licensed under a Creative Commons Attribution 4.0 International license. What does this mean?
                You can share, copy and modify this dataset so long as you give appropriate credit, 
                provide a link to the CC BY license, and indicate if changes were made, but you may not do 
                so in a way that suggests the rights holder has endorsed you or your use of the dataset. 
                Note that further permission may be required for any content within the dataset 
                that is identified as belonging to a third party. More details about the licences can be found 
                [here](https://creativecommons.org/about/cclicenses/).
            """)

        # st.write("Open to be used for researh.")

    with row4_2:
        st.subheader('Exploratory Data Stats')
        st.write("""
                The details regarding the train and test data are presented here. The details cover the following variables: number of samples per each category(label), image width and height, image aspect ratio.
            """)
        with st.expander('Click to Explore Training Data'):
            st.info("While exploring, select a column name  under Variable to see further details.")
            HtmlFile = open(f'{ROOT_FIG_DIR}/train_set_report.html', 'r', encoding='utf-8')
            source_code = HtmlFile.read() 
            components.html(source_code,scrolling=True, height=500)

        with st.expander('Click to Explore Test Data'):
            st.info("While exploring, select a column name  under Variable to see further details.")
            HtmlFile = open(f'{ROOT_FIG_DIR}/test_set_report.html', 'r', encoding='utf-8')
            source_code = HtmlFile.read() 
            components.html(source_code,scrolling=True, height=500)
        
        with st.expander('Click to Explore Sample Visualization'):
            clss = st.selectbox('Select a category(class)', ["CNV","DME", "NORMAL", "DRUSEN"])
            img_path = f'{ROOT_FIG_DIR}/{clss}_samples.png'
            st.image(img_path)
            # HtmlFile = open(f'{ROOT_FIG_DIR}/test_set_report.html', 'r', encoding='utf-8')
            # source_code = HtmlFile.read() 
            # components.html(source_code,scrolling=True, height=500)

    with row4_3:
        st.write("Data post-processing and augmentations are given in this section")
        st.subheader('Post-Processing Details')
        st.write(
        """
        Due to the presence of class imbalance in the data, a representative sampling strategy has been employed for the training set, utilizing hierarchical clustering to address this issue.The following algorthm describes the steps carried out to solve the issue.""")
        # st.caption('')
        # new_title = '<h5 style="color:Black;">Post Processing Steps:</h5>'
        # st.markdown(new_title, unsafe_allow_html=True)
        algo_path = f'{ROOT_FIG_DIR}/classimbalance.png'
        st.image(algo_path)
        # code = '''def representative_sampling():
        # for each_class in category_list:
        #     embeddings = get_resnet50_embeddings(each_class)
        #     n_cluster = run_hierarchical_clustering(embeddings)
        #     samples = get_representative_n_samples_within_each_cluster(n_cluster)'''
        # st.code(code, language='python')

        with st.expander('Click to Explore Post-processed Training Data by Representative Sampling'):
            HtmlFile = open(f'{ROOT_FIG_DIR}/filtered_set_report.html', 'r', encoding='utf-8')
            source_code = HtmlFile.read() 
            components.html(source_code,scrolling=True, height=500)
        
        st.subheader('Applied Data Augmentations')
        st.write("Model Input Size Resizing: 180x180x3")
        # st.caption('Post Processing Steps:')
        # code = '''def representative_sampling():
        #     ...     for class_i in category_list:
        #     ...         print("Hello, Streamlit!")'''
        # st.code(code, language='python')
        # st.code('for class_i in category_list: hiearhical_cluster(class_i)')


def get_product_manager_page_layout():

    row4_1, row4_2 = st.tabs(["Data Source Information", "Exploratory Data Stats"])

    with row4_1:
        # st.write("**Data Source Info**")
        st.subheader('Data Source and Version Information')
        # new_title = '<h4 style="color:Green;">Data set infor:</h4>'
        # st.markdown(new_title, unsafe_allow_html=True)
        # where the data comes and how it is collected, what the data includes, what are the details of the data, how the data is used.
        # answers four different questions
        st.write(" The data set consists of OCT images from CNV, DME, DRUSEN and NORMAL cases(from 4686 adult patients in total).")

        st.warning('Source')
        st.write("[Labeled Optical Coherence Tomography (OCT) and Chest X-Ray Images for Classification](https://data.mendeley.com/datasets/rscbjbr9sj/3)")
        st.caption("Version: 3")

        with st.expander('Data Collection Details(Click for more info)'):
            st.write("""OCT images are collected from the Shiley Eye Institute of the University of California San Diego, 
            the California Retinal Research Foundation,
            Medical Center Ophthalmology Associates, the Shanghai First People’s Hospital, and Beijing Tongren Eye Center between
        July 1, 2013 and March 1, 2017.""")
            
        st.subheader('Case Samples')
        # st.caption('VisuCase Samples')
        # https://www.aao.org/eye-health/ask-ophthalmologist-q/choroidal-neovascularization-definition-treatment
        st.image('./figures/oct_details.png')

        list_test = """<ul>Case explanations:
                            <li><strong>Choroidal Neovascularization (CNV)</strong> is a type of retinal disease that involves the growth of abnormal blood vessels in the choroid layer of the eye. These new blood vessels can lead to fluid accumulation beneath and within the layers of tissue, causing vision loss.
</li>
                            <li> <strong>Diabetic Macular Edema (DME)</strong>  is a common complication of diabetes that affects the retina responsible for central vision. This condition occurs when fluid accumulates in and around the macula, leading to retinal thickening and swelling, which can result in impaired vision or blindness.
</li>
                            <li><strong>DRUSEN</strong> is a condition associated with early Age-Related Macular Degeneration (AMD) in the retina. It involves the accumulation of small deposits of waste material in the retina, which can lead to vision problems.
</li>
                            <li><strong>NORMAL </strong> represents healthy retinalconditions and is a baseline for comparison with the aforementioned anomalies</li>
                        </ul>"""
        st.markdown(list_test, unsafe_allow_html=True)

        
        st.subheader('License Infomation')
        with st.expander('License: CC BY 4.0 license'):
            st.write("""
                The files associated with this dataset are licensed under a Creative Commons Attribution 4.0 International license. What does this mean?
                You can share, copy and modify this dataset so long as you give appropriate credit, 
                provide a link to the CC BY license, and indicate if changes were made, but you may not do 
                so in a way that suggests the rights holder has endorsed you or your use of the dataset. 
                Note that further permission may be required for any content within the dataset 
                that is identified as belonging to a third party. More details about the licences can be found 
                [here](https://creativecommons.org/about/cclicenses/).
            """)

        # st.write("Open to be used for researh.")

    with row4_2:
        st.subheader('Exploratory Data Stats')
        st.write("""
                The details regarding the train and test data are presented here. The details cover the following variables: number of samples per each category(label), image width and height, image aspect ratio.
            """)
        with st.expander('Click to Explore Training Data'):
            st.info("While exploring, select a column name  under Variable to see further details.")
            HtmlFile = open(f'{ROOT_FIG_DIR}/train_set_report.html', 'r', encoding='utf-8')
            source_code = HtmlFile.read() 
            components.html(source_code,scrolling=True, height=500)

        with st.expander('Click to Explore Test Data'):
            st.info("While exploring, select a column name  under Variable to see further details.")
            HtmlFile = open(f'{ROOT_FIG_DIR}/test_set_report.html', 'r', encoding='utf-8')
            source_code = HtmlFile.read() 
            components.html(source_code,scrolling=True, height=500)
        
        with st.expander('Click to Explore Sample Visualization'):
            clss = st.selectbox('Select a category(class)', ["CNV","DME", "NORMAL", "DRUSEN"])
            img_path = f'{ROOT_FIG_DIR}/{clss}_samples.png'
            st.image(img_path)
            # HtmlFile = open(f'{ROOT_FIG_DIR}/test_set_report.html', 'r', encoding='utf-8')
            # source_code = HtmlFile.read() 
            # components.html(source_code,scrolling=True, height=500)



def get_product_practitioner_page_layout():


    row4_1, row4_2, row4_3 = st.tabs(["Data Source Information", "Exploratory Data Stats", "Data Onboarding"])

    with row4_1:
        # st.write("**Data Source Info**")
        st.subheader('Data Source and Version Information')
        # new_title = '<h4 style="color:Green;">Data set infor:</h4>'
        # st.markdown(new_title, unsafe_allow_html=True)
        # where the data comes and how it is collected, what the data includes, what are the details of the data, how the data is used.
        # answers four different questions
        st.write(" The data set consists of OCT images from CNV, DME, DRUSEN and NORMAL cases(from 4686 adult patients in total).")

        st.warning('Source')
        st.write("[Labeled Optical Coherence Tomography (OCT) and Chest X-Ray Images for Classification](https://data.mendeley.com/datasets/rscbjbr9sj/3)")
        st.caption("Version: 3")

        with st.expander('Data Collection Details(Click for more info)'):
            st.write("""OCT images are collected from the Shiley Eye Institute of the University of California San Diego, 
            the California Retinal Research Foundation,
            Medical Center Ophthalmology Associates, the Shanghai First People’s Hospital, and Beijing Tongren Eye Center between
        July 1, 2013 and March 1, 2017.""")
            
        st.subheader('Case Samples')
        # st.caption('VisuCase Samples')
        # https://www.aao.org/eye-health/ask-ophthalmologist-q/choroidal-neovascularization-definition-treatment
        st.image('./figures/oct_details.png')

        list_test = """<ul>Case explanations:
                            <li><strong>Choroidal Neovascularization (CNV)</strong> is a type of retinal disease that involves the growth of abnormal blood vessels in the choroid layer of the eye. These new blood vessels can lead to fluid accumulation beneath and within the layers of tissue, causing vision loss.
</li>
                            <li> <strong>Diabetic Macular Edema (DME)</strong>  is a common complication of diabetes that affects the retina responsible for central vision. This condition occurs when fluid accumulates in and around the macula, leading to retinal thickening and swelling, which can result in impaired vision or blindness.
</li>
                            <li><strong>DRUSEN</strong> is a condition associated with early Age-Related Macular Degeneration (AMD) in the retina. It involves the accumulation of small deposits of waste material in the retina, which can lead to vision problems.
</li>
                            <li><strong>NORMAL </strong> represents healthy retinalconditions and is a baseline for comparison with the aforementioned anomalies</li>
                        </ul>"""
        st.markdown(list_test, unsafe_allow_html=True)

        
        st.subheader('License Infomation')
        with st.expander('License: CC BY 4.0 license'):
            st.write("""
                The files associated with this dataset are licensed under a Creative Commons Attribution 4.0 International license. What does this mean?
                You can share, copy and modify this dataset so long as you give appropriate credit, 
                provide a link to the CC BY license, and indicate if changes were made, but you may not do 
                so in a way that suggests the rights holder has endorsed you or your use of the dataset. 
                Note that further permission may be required for any content within the dataset 
                that is identified as belonging to a third party. More details about the licences can be found 
                [here](https://creativecommons.org/about/cclicenses/).
            """)

        # st.write("Open to be used for researh.")

    with row4_2:
        st.subheader('Exploratory Data Stats')
        st.write("""
                The details regarding the train and test data are presented here. The details cover the following variables: number of samples per each category(label), image width and height, image aspect ratio.
            """)
        with st.expander('Click to Explore Training Data'):
            st.info("While exploring, select a column name  under Variable to see further details.")
            HtmlFile = open(f'{ROOT_FIG_DIR}/train_set_report.html', 'r', encoding='utf-8')
            source_code = HtmlFile.read() 
            components.html(source_code,scrolling=True, height=500)

        with st.expander('Click to Explore Test Data'):
            st.info("While exploring, select a column name  under Variable to see further details.")
            HtmlFile = open(f'{ROOT_FIG_DIR}/test_set_report.html', 'r', encoding='utf-8')
            source_code = HtmlFile.read() 
            components.html(source_code,scrolling=True, height=500)
        
        with st.expander('Click to Explore Sample Visualization'):
            clss = st.selectbox('Select a category(class)', ["CNV","DME", "NORMAL", "DRUSEN"])
            img_path = f'{ROOT_FIG_DIR}/{clss}_samples.png'
            st.image(img_path)
            # HtmlFile = open(f'{ROOT_FIG_DIR}/test_set_report.html', 'r', encoding='utf-8')
            # source_code = HtmlFile.read() 
            # components.html(source_code,scrolling=True, height=500)

    with row4_3:
        st.write("Data post-processing and augmentations are given in this section")
        st.subheader('Post-Processing Details')
        st.write(
        """
        Due to the presence of class imbalance in the data, a representative sampling strategy has been employed for the training set, utilizing hierarchical clustering to address this issue.The following algorthm describes the steps carried out to solve the issue.""")
        # st.caption('')
        # new_title = '<h5 style="color:Black;">Post Processing Steps:</h5>'
        # st.markdown(new_title, unsafe_allow_html=True)
        algo_path = f'{ROOT_FIG_DIR}/classimbalance.png'
        st.image(algo_path)
        # code = '''def representative_sampling():
        # for each_class in category_list:
        #     embeddings = get_resnet50_embeddings(each_class)
        #     n_cluster = run_hierarchical_clustering(embeddings)
        #     samples = get_representative_n_samples_within_each_cluster(n_cluster)'''
        # st.code(code, language='python')

        with st.expander('Click to Explore Post-processed Training Data by Representative Sampling'):
            HtmlFile = open(f'{ROOT_FIG_DIR}/filtered_set_report.html', 'r', encoding='utf-8')
            source_code = HtmlFile.read() 
            components.html(source_code,scrolling=True, height=500)
        
        st.subheader('Applied Data Augmentations')
        st.write("Model Input Size Resizing: 180x180x3")
        # st.caption('Post Processing Steps:')
        # code = '''def representative_sampling():
        #     ...     for class_i in category_list:
        #     ...         print("Hello, Streamlit!")'''
        # st.code(code, language='python')
        # st.code('for class_i in category_list: hiearhical_cluster(class_i)')