update app

app.py

@@ -31,12 +31,6 @@ st.markdown(
             margin-bottom: 13px;
             border-bottom: 2px solid #333;
         }
-        #logo {
-            width: auto;
-            height: 75px;
-            margin-top: -15px;
-            margin-bottom: 15px;
-        }
         .container {
             background-color: #fff;
             padding: 30px;
@@ -66,12 +60,6 @@ st.markdown(
             font-size: 24px;
             margin-bottom: 20px;
         }
-        h4 {
-            font-weight: 500;
-            font-size: 15px;
-            margin-top: 15px;
-            margin-bottom: 15px;
-        }
         label {
             font-weight: 500;
         }
@@ -89,22 +77,38 @@ st.markdown(
             border-radius: 5px;
             display: inline-block;
             margin-top: 15px;
+            margin-bottom: 15px;
+        }
+        .tooltip {
+            position: relative;
+            display: inline-block;
+            cursor: pointer;
+        }
+        .tooltip .tooltiptext {
+            visibility: hidden;
+            width: 120px;
+            background-color: #6c757d;
+            color: #fff;
+            text-align: center;
+            border-radius: 3px;
+            padding: 3px;
+            position: absolute;
+            z-index: 1;
+            bottom: 125%; 
+            left: 50%; 
+            margin-left: -60px;
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        .tooltip:hover .tooltiptext {
+            visibility: visible;
+            opacity: 1;
         }
     </style>
 """,
     unsafe_allow_html=True,
 )
 
-st.markdown(
-    """
-    <div class="header">
-        <img src="https://raw.githubusercontent.com/ca-roll/ca-roll.github.io/release/images/logopic/caroll.png" alt="Research Group Logo" id="logo">
-        <h4>Demonstrating <a href="https://ca-roll.github.io/" target="_blank">CAROLL Research Group</a>'s Language Models</h4>
-    </div>
-""",
-    unsafe_allow_html=True,
-)
-
 # Initialization for Legal NER
 tokenizer_legal = AutoTokenizer.from_pretrained("PaDaS-Lab/gbert-legal-ner")
 model_legal = AutoModelForTokenClassification.from_pretrained(
@@ -203,7 +207,7 @@ def color_substrings(input_string, model_output, ner_labels, current_classes):
         start, end, label = entity["start"], entity["end"], entity["label"]
         html_output += input_string[last_end:start]
         tooltip = current_classes.get(label, "")
-        html_output += f'<span style="color: {label_to_color.get(label)}; font-weight: bold;" title="{tooltip}">{input_string[start:end]}</span>'
+        html_output += f'<span class="tooltip" style="color: {label_to_color.get(label)}; font-weight: bold;">{input_string[start:end]}<span class="tooltiptext">{tooltip}</span></span>'
         last_end = end
 
     html_output += input_string[last_end:]
@@ -214,7 +218,7 @@ def color_substrings(input_string, model_output, ner_labels, current_classes):
 st.title("CAROLL Language Models - Demo")
 st.markdown("<hr>", unsafe_allow_html=True)
 
-test_sentence = st.text_area("Enter Text:", height=200)
+test_sentence = st.text_area("Enter Text:", height=150)
 model_choice = st.selectbox(
     "Choose a model:", ["Legal NER", "GDPR Privacy Policy NER"], index=0
 )
@@ -244,7 +248,7 @@ if st.button("Analyze"):
     )
 
     st.markdown(
-        '<div class="sec"><strong>Analyzed text</strong></div><br><br>{}<br><br>'.format(
+        '<div class="sec"><strong>Analyzed text</strong></div><br>{}<br><br>'.format(
             colored_html
         ),
         unsafe_allow_html=True,