Upload 13 files

utils/control.py

@@ -21,7 +21,7 @@ def visualize_samples(sample_list,class_name,columns=5):
     plt.suptitle("Class {0}".format(class_name)) 
     for i, image in enumerate(sample_list):
         plt.subplot(len(sample_list) / columns + 1, columns, i + 1)
-        plt.imshow(cv2.imread(image))
+        plt.imshow(cv2.imread(image.replace("F:/","E:/")))
     return f
 
 def select_num_interval(

utils/data_users.py

@@ -5,55 +5,239 @@ import os
 
 ROOT_FIG_DIR = f'{os.getcwd()}/figures/'
 def get_product_dev_page_layout():
-    # st.title("Data Details")
+    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)')
+
 
-    # st.write(
-    #     """
-    #     ##
-    #     Examining data is the key factor here and it provides deta-centric approach to test any idea.
-    #     """)
+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():
 
-    # list_test = """<ul>
-    #                     <li><strong>Target Group: </strong>Developer, Model Owners, Product Managers</li>
-    #                 </ul>"""
-    # st.markdown(list_test, unsafe_allow_html=True)
-    # LAYING OUT THE MIDDLE SECTION OF THE APP WITH THE MAPS
-    # row4_1, row4_2, row4_3 = st.columns((1,1,1))
 
     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 Information')
+        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(" Data set consists of OCT images from CNV, DME, DRUSEN and NORMAL cases...(from 4686 adult patients) a")
+        st.write(" The data set consists of OCT images from CNV, DME, DRUSEN and NORMAL cases(from 4686 adult patients in total).")
 
-        st.caption('Source')
+        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("""As stated OCT images are clloected from the Shiley Eye Institute of the University of California San Diego, 
+            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.caption('Case Samples')
+            
+        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>CNV: </strong>t) choroidal neovascularization (CNV) with neovascular membrane (white arrowheads) and associated subretinal fluid (arrows</li>
-                            <li> <strong style="color:Green;"><em>DRUSEN: </em></strong> Multiple drusen (arrowheads) present in early AMD</li>
-                            <li><strong>DME: </strong>) Diabetic
-    macular edema (DME) with retinal-thickening-associated intraretinal fluid</li>
-                            <li>Normal</li>
+                            <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.caption('License:')
+        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?
@@ -69,17 +253,22 @@ def get_product_dev_page_layout():
 
     with row4_2:
         st.subheader('Exploratory Data Stats')
-        with st.expander('Training Data Info'):
+        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('Test Data Info'):
+        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('Sample Visualization for each Category'):
+        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)
@@ -88,27 +277,29 @@ def get_product_dev_page_layout():
             # components.html(source_code,scrolling=True, height=500)
 
     with row4_3:
-        # st.write("**Post Processesd Data Details**")
-        st.subheader('Pre-Processing Details')
+        st.write("Data post-processing and augmentations are given in this section")
+        st.subheader('Post-Processing Details')
         st.write(
         """
-        ##
-        Since the training set has a problem of class imbalanced, we need to solve this issue. To do so, representative sampling strategy is used with hierarchical clustering. 
-        """)
+        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)
-        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('Training Data Info after Representative Sampling'):
+        # 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():
@@ -118,14 +309,4 @@ def get_product_dev_page_layout():
         # st.code('for class_i in category_list: hiearhical_cluster(class_i)')
 
 
-def get_developer_page_layout():
-    st.header("Developer")
-
-    markdown = """
-    1. For the [GitHub repository](https://github.com/giswqs/streamlit-multipage-template) or [use it as a template](https://github.com/giswqs/streamlit-multipage-template/generate) for your own project.
-    2. Customize the sidebar by changing the sidebar text and logo in each Python files.
-    3. Find your favorite emoji from https://emojipedia.org.
-    """
-
-    st.markdown(markdown)
 

utils/decisions_users.py

@@ -45,6 +45,10 @@ from utils.model_utils import get_feature_vector, get_feature_extractor_model, g
 sns.set_style('darkgrid')
 plt.rcParams['axes.grid'] = False
 
+
+# import tensorflow as tf
+os.environ['TF_CPP_MIN_LOG_LEVEL'] = '2'  # Suppress TensorFlow logging (1)
+tf.get_logger().setLevel('ERROR')  # Suppress TensorFlow logging (2)
 # st.set_page_config(layout="wide")
 
 #https://github.com/IliaLarchenko/albumentations-demo/blob/3cb6528a513fe3b35dbb2c2a63cdcfbb9bb2a932/src/utils.py#L149
@@ -95,6 +99,27 @@ def open_gray(fn):
     img = cv2.resize(img,(224,224))
     return img
 
+def show_values(axs, orient="v", space=.01):
+    def _single(ax):
+        if orient == "v":
+            for p in ax.patches:
+                _x = p.get_x() + p.get_width() / 2
+                _y = p.get_y() + p.get_height() + (p.get_height()*0.01)
+                value = '{:.1f}'.format(p.get_height())
+                ax.text(_x, _y, value, ha="center") 
+        elif orient == "h":
+            for p in ax.patches:
+                _x = p.get_x() + p.get_width() + float(space)
+                _y = p.get_y() + p.get_height() - (p.get_height()*0.5)
+                value = '{:.2f}'.format(p.get_width())
+                ax.text(_x, _y, value, ha="left")
+
+    if isinstance(axs, np.ndarray):
+        for idx, ax in np.ndenumerate(axs):
+            _single(ax)
+    else:
+        _single(axs)
+
 def plot_n_similar(seed_id,similar_ids, test_path,n=10, scale=5):
     # img_list = []
     # title_list = ["SEED ID:{0} <br> Label:{1}".format(seed_id,os.path.basename(test_labels[seed_id]))]
@@ -223,7 +248,7 @@ def visualize_bar_plot(df_data):
 
 def run_instance_exp_keras_model(img_path, new_model, feature_extractor_model):
 
-    st.subheader('Instance Exploration')
+    # st.subheader('Instance Predictions')
     # st.columns((1,1,1))  with row4_2:
     LABELS = ['CNV', 'DRUSEN', 'DME', 'NORMAL']
 
@@ -236,7 +261,9 @@ def run_instance_exp_keras_model(img_path, new_model, feature_extractor_model):
     display_image = load_image(img_path)
     # fig = px.imshow(display_image)
     # left_column.plotly_chart(fig, use_container_width=True)
-    left_column.image(display_image,caption = "Selected Input")
+    left_column.image(display_image)
+    left_column.write("Input Image")
+
     # left_column.image(cv2.resize(display_image, (180,180)),caption = "Selected Input")
    
 
@@ -248,14 +275,24 @@ def run_instance_exp_keras_model(img_path, new_model, feature_extractor_model):
     prob_cls =np.asarray(probs)[0]
     # print(prob_cls)
     tmp_df = pd.DataFrame.from_dict({'class':LABELS,'probability':prob_cls})
-    fig = plt.figure(figsize=(8, 9))
-    sns.barplot(x='probability', y='class', data=tmp_df)
+    fig = plt.figure(figsize=(8, 8.8))
+    p =sns.barplot(x='probability', y='class', data=tmp_df)
+    show_values(p, "h", space=0.05)
     middle_column.pyplot(fig)
-    # middle_column.write("Probabilities")
+    middle_column.write("Predicted Class Probabilities")
+
+    # fig = px.bar(LABELS, prob_cls)
+    # fig = px.bar(tmp_df, x="class", y="probability", orientation='h')
+
+    # middle_column.plotly_chart(fig, use_container_width=False)
 
     # grad img 
-    right_column.image(roi_img, caption = "Decision ROI")
-    # right_column.image(cv2.resize(roi_img, display_image.shape[:2]),caption = "GradCAM ROI")
+    print("roi image stats", roi_img.shape)
+    # right_column.image(roi_img, caption = "Decision ROI")
+    print(display_image.shape)
+    tmp_shape = display_image.shape[:2]
+    right_column.image(cv2.resize(roi_img, (tmp_shape[1],tmp_shape[0])))
+    right_column.write("GradCAM RoI")
 
     # seed_id = 900
     seed_id = test_id_list.index(org_img_path)
@@ -268,26 +305,29 @@ def run_instance_exp_keras_model(img_path, new_model, feature_extractor_model):
     closest_fns_tmp = [f'{os.getcwd()}/data/oct2017/train/' + each_fn.split("\\")[-2] +'/'+each_fn.split("\\") [-1] 
                 for each_fn in closest_fns]
     # print(closest_fns)
-    st.subheader('Top-10 Similar Samples from Gallery Set')
+    st.subheader('Top-10 Similar Samples from Gallery(representative) Set')
     # st.plotly_chart(plot_n_similar(seed_id,closest_fns, img_path,n=10, scale=4), use_container_width=True)
     st.pyplot(plot_n_similar(seed_id,closest_fns_tmp, img_path,n=10,scale=4))
 
-    with st.expander('Correct Decision'):
-                st.info("Correct th decision if it is not valid. This sample will be added to next training bucket.")
-                tmp_col1, tmp_col2 = st.columns(2)
-                with tmp_col1:
-                    label_correect = st.radio(
-                    "Choose label visibility 👇",
-                    ["CNV", "DME", "NORMAL","DRUSEN"],
-                    horizontal=True)
-                with tmp_col2:
-                    tmp_btn = st.button('ADD TO TRAINING BUCKET')
-                if tmp_btn:
-                    st.warning("Sample added to training set..")
-
-    
-
-def main():
+    if "load_state" not in st.session_state:
+        st.session_state.load_state = True
+    # if st.session_state.load_state:
+    #     st.session_state.load_state = False
+    #     with st.expander('Correct Decision'):
+    #                 st.info("Correct th decision if it is not valid. This sample will be added to next training bucket.")
+    #                 tmp_col1, tmp_col2 = st.columns(2)
+    #                 with tmp_col1:
+    #                     label_correect = st.radio(
+    #                     "Choose label visibility 👇",
+    #                     ["CNV", "DME", "NORMAL","DRUSEN"],
+    #                     disabled=False,
+    #                     horizontal=True)
+    #                 with tmp_col2:
+    #                     tmp_btn = st.button('ADD TO TRAINING BUCKET')
+    #                 if tmp_btn:
+    #                     st.warning("Sample added to training set..")
+
+def main(user_type='Developer'):
 
     new_model =  get_model(MODEL_PATH)
     feature_extractor_model = get_feature_vector_model(MODEL_PATH)
@@ -306,41 +346,62 @@ def main():
         representative_id_list = [f'{os.getcwd()}/data/oct2017/train/' + each_fn.split("\\")[-2] +'/'+each_fn.split("\\") [-1] 
                 for each_fn in representative_id_list]
         # st.info('GLOABAL EXPLANATION!! ')
-        option = st.selectbox('Please select to explore Representative or Borderline Samples', ["Representative Samples","Borderline Cases"])
-        if option:
+        option = st.selectbox('Please select to explore Representative/Borderline Samples', ["Choose here","Representative Samples","Borderline Cases"],index=0)
+        if not option.startswith("Choose"):
+            if user_type!='Manager':
+                if option.startswith('Rep'):
+                    with st.expander('Click to see Representative Sampling Algorithm'):
+                        algo_path = f'{ROOT_FIG_DIR}/representativesampling.png'
+                        st.image(algo_path)
+                    with st.expander('Click to see Manifold(t-SNE) Visualization of Representative Samples'):
+                        show_tsne_vis(f"{ROOT_FIG_DIR}/tsne_representative.png", title="Representative")
+                else: 
+                    with st.expander('Click to see Borderline Sampling Algorithm'):
+                        algo_path = f'{ROOT_FIG_DIR}/borderlinesampling.png'
+                        st.image(algo_path)
+                    with st.expander('Click to see Manifold(t-SNE) Visualization of Broderline Samples'):
+                        show_tsne_vis(f"{ROOT_FIG_DIR}/tsne_borderline.png", title="Borderline")
             clss = st.selectbox('Select a category(class)', ["CNV","DME", "NORMAL", "DRUSEN"])
-            side_1, side_2 = st.columns(2)
-
-        with side_1:
-            check_emb = st.checkbox('Embdedding Space Visuzalization')
+            # side_1, side_2 = st.columns(2)
 
-        with side_2:
-            check_samp = st.checkbox('Random Sample Visuzalization')
 
-        if check_emb and check_samp:
-            st.write("Emb and vis")
-            if option.startswith("Rep"):
-                filter_lst = list(filter(lambda k: clss in k, representative_id_list))
-                show_random_samples(filter_lst,clss)
-                show_tsne_vis(f"{ROOT_FIG_DIR}/tsne_representative.png", title="Representative")
-            else:
-                filter_lst = list(filter(lambda k: clss in k, borderline_id_list))
-                show_random_samples(filter_lst,clss)
-                show_tsne_vis(f"{ROOT_FIG_DIR}/tsne_borderline.png", title="Borderline")
-        elif check_emb:
-            st.write("embedding vis")
-            if option.startswith("Rep"):
-                show_tsne_vis(f"{ROOT_FIG_DIR}/tsne_representative.png", title="Representative")
-            else:
-                show_tsne_vis(f"{ROOT_FIG_DIR}/tsne_borderline.png", title="Borderline")
-        elif check_samp:
-            st.write("rand vis")
             if option.startswith("Rep"):
                 filter_lst = list(filter(lambda k: clss in k, representative_id_list))
                 show_random_samples(filter_lst,clss)
             else:
                 filter_lst = list(filter(lambda k: clss in k, borderline_id_list))
                 show_random_samples(filter_lst,clss)
+
+        # with side_1:
+        #     check_emb = st.checkbox('Embdedding Space Visuzalization')
+
+        # with side_2:
+        #     check_samp = st.checkbox('Random Sample Visuzalization')
+
+        # if check_emb and check_samp:
+        #     st.write("Emb and vis")
+        #     if option.startswith("Rep"):
+        #         filter_lst = list(filter(lambda k: clss in k, representative_id_list))
+        #         show_random_samples(filter_lst,clss)
+        #         show_tsne_vis(f"{ROOT_FIG_DIR}/tsne_representative.png", title="Representative")
+        #     else:
+        #         filter_lst = list(filter(lambda k: clss in k, borderline_id_list))
+        #         show_random_samples(filter_lst,clss)
+        #         # show_tsne_vis(f"{ROOT_FIG_DIR}/tsne_borderline.png", title="Borderline")
+        # elif check_emb:
+        #     st.write("embedding vis")
+        #     if option.startswith("Rep"):
+        #         show_tsne_vis(f"{ROOT_FIG_DIR}/tsne_representative.png", title="Representative")
+        #     else:
+        #         show_tsne_vis(f"{ROOT_FIG_DIR}/tsne_borderline.png", title="Borderline")
+        # elif check_samp:
+        #     st.write("rand vis")
+        #     if option.startswith("Rep"):
+        #         filter_lst = list(filter(lambda k: clss in k, representative_id_list))
+        #         show_random_samples(filter_lst,clss)
+        #     else:
+        #         filter_lst = list(filter(lambda k: clss in k, borderline_id_list))
+        #         show_random_samples(filter_lst,clss)
     with row4_2:
         DF_TEST_PROP = load_pd_data_frame(TEST_CSV_FILE)
         IMG_PATH_LISTS = get_path_list_from_df(DF_TEST_PROP)
@@ -348,29 +409,43 @@ def main():
         grad_vis_path_list = None
         row2_col1, row2_col2 = st.columns(2)
         with row2_col1:
-            option = st.selectbox('Please select a sample image, then click Explain Me button', IMG_PATH_LISTS)
+            option = st.selectbox('Please select a sample image👇', IMG_PATH_LISTS)
         with row2_col2:
-            st.info("Press the button")
+            st.write("Click button")
             pressed = st.button('Explain ME')
         
         if pressed:
             st.empty()
-            st.write('Please wait for the magic to happen! This may take up to a minute.')
+            st.write('Please wait for a while! This may take up to a minute.')
             run_instance_exp_keras_model(option, new_model,feature_extractor_model)
-
-            # with st.expander('Correct Decision'):
-            #     st.info("Correct th decision if it is not valid. This sample will be added to next training bucket.")
-            #     tmp_col1, tmp_col2 = st.columns(2)
-            #     with tmp_col1:
-            #         label_correect = st.radio(
-            #         "Choose label visibility 👇",
-            #         ["CNV", "DME", "NORMAL","DRUSEN"],
-            #         key="visibility",
-            #         horizontal=True)
-            #     with tmp_col2:
-            #         tmp_btn = st.button('ADD TO TRAINING BUCKET')
-            #     if tmp_btn:
-            #         st.warning("Sample added to training set..")
+            def form_callback():
+                st.write("Training set updated")
+                # st.write("test2")
+            if user_type!='Manager':
+                with st.expander('Correct the Decision'):
+                        with st.form("my_form"):
+                            st.info("Correct the decision if it is not valid. The sample will be added to next training bucket.")
+                            tmp_col1, tmp_col2 = st.columns(2)
+                            with tmp_col1:
+                                label_correect = st.radio(
+                                "Choose label 👇",
+                                ["NONE","CNV", "DME", "NORMAL","DRUSEN"],
+                                key="visibility",
+                                horizontal=True)
+                                # st.stop()
+                                # Every form must have a submit button.
+                                submit_button = st.form_submit_button(label='ADD TO TRAINING BUCKET', on_click=form_callback)
+
+                            # st.session_state.load_state = False
+                            # if submitted and not st.session_state.load_state:
+                            #     st.warning("Sample added to training set..")
+                    # st.write("Outside the form")
+                            # st.write("slider", slider_val, "checkbox", checkbox_val)
+
+                    # with tmp_col2:
+                    #     tmp_btn = st.button('ADD TO TRAINING BUCKET')
+                    # if tmp_btn:
+                    #     st.warning("Sample added to training set..")
 
 
 
@@ -383,5 +458,11 @@ def main():
 # expander_faq.write("Hi there! If you have any questions about our project, or simply want to check out the source code, please visit our github repo: https://github.com/kaplansinan/MLOPS")
 
 
-def get_product_dev_page_layout():
-    return main()
+def get_product_dev_page_layout(user_type ="Developer"):
+    return main(user_type=user_type)
+
+# def get_product_dev_page_layout():
+#     return main()
+
+
+

utils/eval_users.py

@@ -1,4 +1,5 @@
 import streamlit as st 
+import streamlit.components.v1 as components
 import os  
 ROOT_FIG_DIR = f'{os.getcwd()}/figures/'
 
@@ -10,19 +11,19 @@ def get_product_dev_page_layout():
         # st.write("**Performance Metrics**")
         st.subheader('Performance Metrics')
         st.write('Following metrics are used for evaluation:')
-        st.image(f'{ROOT_FIG_DIR}/evaluation_template.png')
+        st.image(f'{ROOT_FIG_DIR}/eval_metrics.png')
         list_test = """<ul>
-                        <li><strong>Accuracy: </strong>it is a ratio of correctly predicted observation to the total observations..</li>
+                        <li><strong>Accuracy: </strong>is the ratio of correctly predicted observation to the total observations..</li>
                     </ul>"""
         st.markdown(list_test, unsafe_allow_html=True)
         # st.latex(r''' Accuracy=\frac{TP + TN}{TP+TN+FP+FN}''')
         list_test = """<ul>
-                        <li><strong>Precision: </strong>It is the ratio of correctly predicted positive observations to the total predicted positive observations</li>
+                        <li><strong>Precision: </strong> is the ratio of correctly predicted positive observations to the total predicted positive observations</li>
                     </ul>"""
         st.markdown(list_test, unsafe_allow_html=True)
         # st.latex(r''' Precision=\frac{TP}{TP+FP}''')
         list_test = """<ul>
-                        <li><strong>Recall: </strong>It is the ratio of correctly predicted positive observations to the all observations in actual class.</li>
+                        <li><strong>Recall: </strong> is the ratio of correctly predicted positive observations to all observations in the actual class.</li>
                     </ul>"""
         st.markdown(list_test, unsafe_allow_html=True)
         # st.latex(r''' Recall=\frac{TP}{TP+FN}''')
@@ -31,27 +32,20 @@ def get_product_dev_page_layout():
         #     st.image('./figures/test_confmat_20210404.png')
 
     with row6_2:
-        # st.write("**Prediction Samples**")
-        # with st.expander('Test Set Confusion Matrix'):
-        #     # st.caption('Test Set Results:')
         st.subheader('Test Set Confusion Matrix')
         st.image(f'{ROOT_FIG_DIR}/test_confmat_20210404.png')
-        # st.subheader('Prediction Samples')
-        # st.caption('Correctly Classified sample predictions:')
-        # st.image(f'{ROOT_FIG_DIR}/pred_stats.png')
-
-        # st.caption('Miss Classified sample predictions:')
-        # st.image(f'{ROOT_FIG_DIR}/pred_stats.png')
 
-        # st.subheader("Class-wise Prediction Distributions")
-        # st.image(f'{ROOT_FIG_DIR}/training_prob_stats.png')
+        with st.expander('Click to Explore Test Data 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 row6_3:
-        st.write("Weencountered classimbalance issue and here is the miclassified samples...")
+        st.write("After examining the performance of the AI model, it was found that the main misclassifications occur in the CNV and NORMAL classes. One can also see this in the given confusion matrix under the Performance Evaluation tab. In particular, CNV cases are often confused with DME and DRUSEN. This can be attributed to the specific characteristics of CNV images present within the dataset. Therefore, it is recommend to thoroughly review the decisions made for CNV cases.")
 
-        st.caption('Miss Classified CNV Samples:')
+        st.warning('Mis classified CNV Samples')
         st.image(f'{ROOT_FIG_DIR}/cnv_missclass.png')
 
-        st.caption('Miss Classified NORMAL Samples:')
+        st.warning('Mis classified NORMAL Samples')
         st.image(f'{ROOT_FIG_DIR}/normal_missclass.png')
 

utils/model_users.py

@@ -5,7 +5,7 @@ ROOT_FIG_DIR = f'{os.getcwd()}/figures/'
 
 def get_product_dev_page_layout():
     model_details ={
-        "Model Description": "EfficientNet is used for transfer learning.",
+        "Model Description": "[EfficientNet](https://arxiv.org/abs/1905.11946) is used for transfer learning.",
         "Model Type": "Convolutional Neural Nets",
     }
 
@@ -19,7 +19,7 @@ def get_product_dev_page_layout():
         "learning_rate":0.001,
         "early_stopping_epochs":10,
         "reduce_learning_rate_patience":3,
-        "source_code":"https://github.com/kaplansinan/MLOps",
+        "source_code":"https://github.com/kaplansinan/OCTRetImageGen_CLcVAE",
 
     }
 
@@ -44,13 +44,13 @@ def get_product_dev_page_layout():
 
         list_test = """<ul>
                             <li><strong>Model Type: </strong>Convolutional Neural Nets</li>
-                            <li> <strong>Model Description: </strong>An architecture from EfficientNet family is used for transfer learning.</li>
+                            <li> <strong>Model Description: </strong>An architecture from [EfficientNet](https://arxiv.org/abs/1905.11946) family is used for designing the model.</li>
                         </ul>"""
         st.markdown(list_test, unsafe_allow_html=True)
         # st.json(model_details)
 
         st.caption('Architeture Visualization')
-        st.image(f'{ROOT_FIG_DIR}/model_diagram.png')
+        st.image(f'{ROOT_FIG_DIR}/model_architecture_vis.png')
 
         with st.expander('License: CC BY 4.0 license(Click for details)'):
             st.write("""
@@ -99,11 +99,264 @@ def get_product_dev_page_layout():
 
     with row2_3:
         # st.write("**Production Details**")
-        st.subheader('Production Details')
+        st.subheader('How to use the model')
+        st.write("The model is served through gRpc client and one can call the model in the production environment by following a sample code snippet written in python:")
+        with st.expander("Inference Call"):
+            code_txt = '''
+import json,base64
+import requests
+
+# convert image file to base64str
+def img_to_base64(filename):   
+    with open(filename, "rb") as image_file:
+        base64str = base64.b64encode(image_file.read()).decode("utf-8")
+    return base64str
+
+# run prediction
+def predict(image_file:str,url:str):                 
+    base64_img = img_to_base64(image_file)              
+    payload = json.dumps({"base64str": base64_img})
+    result = requests.post(url,data = payload)
+    return result.json()
+
+# Image file
+image_path = "your_image_file_with_path.png"
+
+# Server url (an example -> "http://127.0.0.1:8080/predict")
+serving_server_url = '<model_server_url>/predict'  
+
+# Inference call to serving server
+preds = predict(image_path,url=serving_server_url) '''
+            st.code(code_txt, language='python')
+
+        st.subheader('Served Model details')
+        col1, col2, col3, col4,col5,col6 = st.columns(6)
+        col1.metric("Model Size", "26MB")
+        col2.metric("Model Input Size", "180x180x3")
+        col3.metric("Model Output", "1x4")
+        col6.metric("Model Framework", "ONNX")
+        col5.metric("GPU Inference(fps)", "45 fps")
+        col4.metric("CPU Inference(fps)", "20 fps")
+    
+        # list_test = """<ul>
+        #                     <li><strong>Model Size: </strong>26MB</li>
+        #                     <li> <strong>Model Input: </strong>(180x180x3)</li>
+        #                     <li> <strong>Model Output: </strong>(1x4)</li>
+        #                     <li> <strong>Model Framework: </strong> ONNXRuntime</li>
+        #                 </ul>"""
+        # st.markdown(list_test, unsafe_allow_html=True)
+
+
+
+def get_product_manager_page_layout():
+    model_details ={
+        "Model Description": "[EfficientNet](https://arxiv.org/abs/1905.11946) is used for transfer learning.",
+        "Model Type": "Convolutional Neural Nets",
+    }
+
+    dev_details = {
+        "Training Framework": "Tensorflow Keras",
+        "Backbone Architeture":"EfficientNetB4",
+        "Number of classes":4,
+        "Number of training epochs": 10,
+        "Dropout rate": 0.2,
+        "batch_size": 8,
+        "learning_rate":0.001,
+        "early_stopping_epochs":10,
+        "reduce_learning_rate_patience":3,
+        "source_code":"https://github.com/kaplansinan/MLOps",
+
+    }
+
+    production_details ={
+        "Model size": "26MB",
+        "Model Input": "(N,180,180,3)",
+        "Modeul Output":"(N,4)",
+        "Framework":"ONNXRuntime",
+
+    }
+
+
+    hardware_details ={
+        "Os System": "Ubuntu 20.14",
+        "GPU Card": "NVIDIA GeForce 3060  6GB",
+    }
+    row2_1, row2_3= st.tabs(["General Info", "Production Info"])
+
+    with row2_1:
+        # st.write("**Architectural Details**")
+        st.subheader('Architectural Details')
+
+        list_test = """<ul>
+                            <li><strong>Model Type: </strong>Convolutional Neural Nets</li>
+                            <li> <strong>Model Description: </strong>An architecture from [EfficientNet](https://arxiv.org/abs/1905.11946) family is used for designing the model.</li>
+                        </ul>"""
+        st.markdown(list_test, unsafe_allow_html=True)
+        # st.json(model_details)
+
+        st.caption('Architeture Visualization')
+        st.image(f'{ROOT_FIG_DIR}/model_architecture_vis.png')
+
+        with st.expander('License: CC BY 4.0 license(Click for details)'):
+            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/).
+            """)
+
+        # with st.expander('Click for More Info'):
+    with row2_3:
+        # st.write("**Production Details**")
+        st.subheader('How to use the model')
+        st.write("The model is served through gRpc client and one can call the model in the production environment by following a sample code snippet written in python:")
+        with st.expander("Inference Call"):
+            code_txt = '''
+import json,base64
+import requests
+
+# convert image file to base64str
+def img_to_base64(filename):   
+    with open(filename, "rb") as image_file:
+        base64str = base64.b64encode(image_file.read()).decode("utf-8")
+    return base64str
+
+# run prediction
+def predict(image_file:str,url:str):                 
+    base64_img = img_to_base64(image_file)              
+    payload = json.dumps({"base64str": base64_img})
+    result = requests.post(url,data = payload)
+    return result.json()
+
+# Image file
+image_path = "your_image_file_with_path.png"
+
+# Server url (an example -> "http://127.0.0.1:8080/predict")
+serving_server_url = '<model_server_url>/predict'  
+
+# Inference call to serving server
+preds = predict(image_path,url=serving_server_url) '''
+            st.code(code_txt, language='python')
+
+        st.subheader('Served Model details')
+        col1, col2, col3, col4,col5,col6 = st.columns(6)
+        col1.metric("Model Size", "26MB")
+        col2.metric("Model Input Size", "180x180x3")
+        col3.metric("Model Output", "1x4")
+        col6.metric("Model Framework", "ONNX")
+        col5.metric("GPU Inference(fps)", "45 fps")
+        col4.metric("CPU Inference(fps)", "20 fps")
+
+
+def get_product_practitioner_page_layout():
+    model_details ={
+        "Model Description": "[EfficientNet](https://arxiv.org/abs/1905.11946) is used for transfer learning.",
+        "Model Type": "Convolutional Neural Nets",
+    }
+
+    dev_details = {
+        "Training Framework": "Tensorflow Keras",
+        "Backbone Architeture":"EfficientNetB4",
+        "Number of classes":4,
+        "Number of training epochs": 10,
+        "Dropout rate": 0.2,
+        "batch_size": 8,
+        "learning_rate":0.001,
+        "early_stopping_epochs":10,
+        "reduce_learning_rate_patience":3,
+        "source_code":"https://github.com/kaplansinan/MLOps",
+
+    }
+
+    production_details ={
+        "Model size": "26MB",
+        "Model Input": "(N,180,180,3)",
+        "Modeul Output":"(N,4)",
+        "Framework":"ONNXRuntime",
+
+    }
+
+
+    hardware_details ={
+        "Os System": "Ubuntu 20.14",
+        "GPU Card": "NVIDIA GeForce 3060  6GB",
+    }
+    row2_1, row2_3= st.tabs(["General Info", "Production Info"])
+
+    with row2_1:
+        # st.write("**Architectural Details**")
+        st.subheader('Architectural Details')
+
         list_test = """<ul>
-                            <li><strong>Model Size: </strong>26MB</li>
-                            <li> <strong>Model Input: </strong>(180x180x3)</li>
-                            <li> <strong>Model Output: </strong>(1x4)</li>
-                            <li> <strong>Model Framework: </strong> ONNXRuntime</li>
+                            <li><strong>Model Type: </strong>Convolutional Neural Nets</li>
+                            <li> <strong>Model Description: </strong>An architecture from [EfficientNet](https://arxiv.org/abs/1905.11946) family is used for designing the model.</li>
                         </ul>"""
-        st.markdown(list_test, unsafe_allow_html=True)
+        st.markdown(list_test, unsafe_allow_html=True)
+        # st.json(model_details)
+
+        st.caption('Architeture Visualization')
+        st.image(f'{ROOT_FIG_DIR}/model_architecture_vis.png')
+
+        with st.expander('License: CC BY 4.0 license(Click for details)'):
+            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/).
+            """)
+
+        # with st.expander('Click for More Info'):
+    with row2_3:
+        # st.write("**Production Details**")
+        st.subheader('How to use the model')
+        st.write("The model is served through gRpc client and one can call the model in the production environment by following a sample code snippet written in python:")
+        with st.expander("Inference Call"):
+            code_txt = '''
+import json,base64
+import requests
+
+# convert image file to base64str
+def img_to_base64(filename):   
+    with open(filename, "rb") as image_file:
+        base64str = base64.b64encode(image_file.read()).decode("utf-8")
+    return base64str
+
+# run prediction
+def predict(image_file:str,url:str):                 
+    base64_img = img_to_base64(image_file)              
+    payload = json.dumps({"base64str": base64_img})
+    result = requests.post(url,data = payload)
+    return result.json()
+
+# Image file
+image_path = "your_image_file_with_path.png"
+
+# Server url (an example -> "http://127.0.0.1:8080/predict")
+serving_server_url = '<model_server_url>/predict'  
+
+# Inference call to serving server
+preds = predict(image_path,url=serving_server_url) '''
+            st.code(code_txt, language='python')
+
+        st.subheader('Served Model details')
+        col1, col2, col3, col4,col5,col6 = st.columns(6)
+        col1.metric("Model Size", "26MB")
+        col2.metric("Model Input Size", "180x180x3")
+        col3.metric("Model Output", "1x4")
+        col6.metric("Model Framework", "ONNX")
+        col5.metric("GPU Inference(fps)", "45 fps")
+        col4.metric("CPU Inference(fps)", "20 fps")
+    
+        # list_test = """<ul>
+        #                     <li><strong>Model Size: </strong>26MB</li>
+        #                     <li> <strong>Model Input: </strong>(180x180x3)</li>
+        #                     <li> <strong>Model Output: </strong>(1x4)</li>
+        #                     <li> <strong>Model Framework: </strong> ONNXRuntime</li>
+        #                 </ul>"""
+        # st.markdown(list_test, unsafe_allow_html=True)