Task-314 Fix UI ghosting bug

app.py

@@ -1,10 +1,12 @@
 import streamlit as st
+import nest_asyncio
 import pandas as pd
-from annotated_text import annotated_text
-import time
+from annotated_text import annotation
 from scripts.predict import InferenceHandler
+from htbuilder import span, div
+
+nest_asyncio.apply()
 
-history_df = pd.DataFrame(data=[], columns=['Text', 'Classification', 'Gender', 'Race', 'Sexuality', 'Disability', 'Religion', 'Unspecified'])
 rc = None
 
 @st.cache_data
@@ -14,10 +16,11 @@ def load_inference_handler(api_token):
     except:
         return None
 
+@st.cache_data
 def extract_data(json_obj):
     row_data = []
 
-    row_data.append(json_obj['raw_text'])
+    row_data.append(json_obj['text_input'])
     row_data.append(json_obj['text_sentiment'])
     cat_dict = json_obj['category_sentiments']
     for cat in cat_dict.keys():
@@ -27,11 +30,44 @@ def extract_data(json_obj):
     
     return row_data
 
-def load_history():
-    for result in st.session_state.results:
-        history_df.loc[len(history_df)] = extract_data(result)
-
-def output_results(res):
+def load_history(parent_elem):
+    with parent_elem:
+        for idx, result in enumerate(st.session_state.results):
+            text = result['text_input']
+            discriminatory = False
+
+            data = []
+            for sent_item in result['results']:
+                sentence = sent_item['sentence']
+                bin_class = sent_item['binary_classification']['classification']
+                pred_class = sent_item['binary_classification']['prediction_class']
+                ml_regr = sent_item['multilabel_regression']
+
+                row_data = [sentence, bin_class]
+                if pred_class == 1:
+                    discriminatory = True
+                    for cat in ml_regr.keys():
+                        perc = ml_regr[cat] * 100
+                        row_data.append(f'{perc:.2f}%')
+                else:
+                    for i in range(6):
+                        row_data.append(None)
+
+                data.append(row_data)
+            df = pd.DataFrame(data=data, columns=['Sentence', 'Binary Classification', 'Gender', 'Race', 'Sexuality', 'Disability', 'Religion', 'Unspecified'])
+
+            with st.expander(label=f'Entry #{idx+1}', icon='🔴' if discriminatory else '🟢'):
+                st.markdown('<hr style="margin: 0.5em 0 0 0;">', unsafe_allow_html=True)
+                st.markdown(
+                    f"<p style='text-align: center; font-weight: bold; font-style: italic; font-size: medium;'>\"{text}\"</p>", 
+                    unsafe_allow_html=True
+                )
+                st.markdown('<hr style="margin: 0 0 0.5em 0;">', unsafe_allow_html=True)
+                st.markdown('##### Sentence Breakdown:')
+                st.dataframe(df)
+
+
+def build_result_tree(parent_elem, results):
     label_dict = {
         'Gender': '#4A90E2',
         'Race': '#E67E22',
@@ -41,38 +77,91 @@ def output_results(res):
         'Unspecified': '#A0A0A0'
     }
 
-    with rc:
-        st.markdown('### Results')
-        with st.container(border=True):
-            at_list = []
-            if res['numerical_sentiment'] == 1:
-                for entry in res['category_sentiments'].keys():
-                    val = res['category_sentiments'][entry]
-                    if val > 0.0:
-                        perc = val * 100
-                        at_list.append((entry, f'{perc:.2f}%', label_dict[entry]))
+    discriminatory_sentiment = False
+
+    sent_details = []
+    for result in results['results']:
+        sentence = result['sentence']
+        bin_class = result['binary_classification']['classification']
+        pred_class = result['binary_classification']['prediction_class']
+        ml_regr = result['multilabel_regression']
 
-            st.markdown(f"#### Text - *\"{res['raw_text']}\"*")
-            st.markdown(f"#### Classification - {':red' if res['numerical_sentiment'] == 1 else ':green'}[{res['text_sentiment']}]")
+        sent_res = {
+            'sentence': sentence,
+            'classification': f'{':red' if pred_class else ':green'}[{bin_class}]',
+            'annotated_categories': []
+        }
 
-            if len(at_list) > 0:
-                annotated_text(at_list)
+        if pred_class == 1:
+            discriminatory_sentiment = True
+            at_list = []
+            for entry in ml_regr.keys():
+                val = ml_regr[entry]
+                if val > 0.0:
+                    perc = val * 100
+                    at_list.append(annotation(body=entry, label=f'{perc:.2f}%', background=label_dict[entry]))
+            sent_res['annotated_categories'] = at_list
+        sent_details.append(sent_res)
+
+    with parent_elem:
+        st.markdown(f'### Results - {':red[Detected Discriminatory Sentiment]' if discriminatory_sentiment else ':green[No Discriminatory Sentiment Detected]'}')
+        with st.container(border=True):
+            st.markdown('<hr style="margin: 0.5em 0 0 0;">', unsafe_allow_html=True)
+            st.markdown(
+                f"<p style='text-align: center; font-weight: bold; font-style: italic; font-size: large;'>\"{results['text_input']}\"</p>", 
+                unsafe_allow_html=True
+            )
+            st.markdown('<hr style="margin: 0 0 0.5em 0;">', unsafe_allow_html=True)
+
+            if discriminatory_sentiment:
+                if (len(results['results']) > 1):
+                    st.markdown('##### Sentence Breakdown:')
+                    for idx, sent in enumerate(sent_details):
+                        with st.expander(label=f'Sentence #{idx+1}', icon='🔴' if len(sent['annotated_categories']) > 0 else '🟢', expanded=True):
+                            st.markdown('<hr style="margin: 0.5em 0 0 0;">', unsafe_allow_html=True)
+                            st.markdown(
+                                f"<p style='text-align: center; font-weight: bold; font-style: italic; font-size: large;'>\"{sent['sentence']}\"</p>", 
+                                unsafe_allow_html=True
+                            )
+                            st.markdown('<hr style="margin: 0 0 0.5em 0;">', unsafe_allow_html=True)
+                            st.markdown(f'##### Classification - {sent['classification']}')
+
+                            if len(sent['annotated_categories']) > 0:
+                                st.markdown(
+                                    div(    
+                                        span(' ' if idx != 0 else '')[
+                                            item
+                                        ] for idx, item in enumerate(sent['annotated_categories'])
+                                    ),
+                                    unsafe_allow_html=True
+                                )
+                                st.markdown('\n')
+                else:
+                    st.markdown(f"#### Classification - {sent['classification']}")
+                    if len(sent['annotated_categories']) > 0:
+                        st.markdown(
+                            div(    
+                                span(' ' if idx != 0 else '')[
+                                    item
+                                ] for idx, item in enumerate(sent['annotated_categories'])
+                            ),
+                            unsafe_allow_html=True
+                        )
+                        st.markdown('\n')
 
 @st.cache_data
 def analyze_text(text):
-    st.write(f'Text: {text}')
     if ih:
         res = None
         with rc:
             with st.spinner("Processing...", show_time=True) as spnr:
-                time.sleep(5)
+                # time.sleep(5)
                 res = ih.classify_text(text)
                 del spnr
 
         if res is not None:
             st.session_state.results.append(res)
-            history_df.loc[-1] = extract_data(res)
-            output_results(res)
+            build_result_tree(rc, res)
 
 st.title('NLPinitiative Text Classifier')
 
@@ -84,19 +173,18 @@ API_KEY = st.sidebar.text_input(
 )
 ih = load_inference_handler(API_KEY)
 
-tab1, tab2 = st.tabs(['Classifier', 'About This App'])
+tab1 = st.empty()
+tab2 = st.empty()
+tab3 = st.empty()
+
+tab1, tab2, tab3 = st.tabs(['Classifier', 'Input History', 'About This App'])
 
 if "results" not in st.session_state:
     st.session_state.results = []
-    
-load_history()
 
 with tab1:
     "Text Classifier for determining if entered text is discriminatory (and the categories of discrimination) or Non-Discriminatory."
 
-    hist_container = st.container()
-    hist_expander = hist_container.expander('History')
-
     rc = st.container()
     text_form = st.form(key='classifier', clear_on_submit=True, enter_to_submit=True)
     with text_form:
@@ -106,11 +194,10 @@ with tab1:
         if form_btn and text_area is not None and len(text_area) > 0:
             analyze_text(text_area)
 
-    with hist_expander:
-        st.dataframe(history_df, hide_index=True)
-    
-
 with tab2:
+    load_history(tab2)
+
+with tab3:
     st.markdown(
     """The NLPinitiative Discriminatory Text Classifier is an advanced 
     natural language processing tool designed to detect and flag potentially