Update app.py

app.py

@@ -272,7 +272,7 @@ def retrieveSentences(gr1, gr2, att1, att2, progress=gr.Progress()):
             gr.update(value=', '.join(a2))  # att2_fixed
         )
 
-def bloombergViz(att, val, numblocks, score_templates_df, flip=False):
+def bloombergViz(att, val, numblocks, score_templates_df, onRight=False, flip=False):
     # percent = round(val * 100)
     # percentStr = f"{percent}"
     # filled = "<div style='height:20px;width:20px;background-color:#555;display:inline-block'><span class='tooltiptext' style='color:#FFF'>{}</span></div> "
@@ -280,15 +280,23 @@ def bloombergViz(att, val, numblocks, score_templates_df, flip=False):
     # numFilled = round((percent/100) * numblocks)
     # numUnFilled = numblocks - numFilled
 
+    leftColor = "#555"
+    rightColor = "#999"
+    if flip:
+        leftColor = "#999"
+        rightColor = "#555"
     res = ""
+    spanClass = "tooltiptext_left"
+    if onRight:
+        spanClass = "tooltiptext_right"
     dfy = score_templates_df.loc[(score_templates_df['Attribute'] == att) & (score_templates_df['Stereotyped'] == 'yes')]
     dfn = score_templates_df.loc[(score_templates_df['Attribute'] == att) & (score_templates_df['Stereotyped'] == 'no')] 
     print("dfy", dfy)
     print("dfn", dfn)
     for i in range(len(dfy.index)):
-        res += f"<div style='height:20px;width:20px;background-color:#555;display:inline-block;position:relative' id='filled'><span class='tooltiptext' style='color:#FFF'>{dfy.iloc[i, 3]}</span></div> "
+        res += f"<div style='height:20px;width:20px;background-color:{leftColor};display:inline-block;position:relative' id='filled'><span class='{spanClass}' style='color:#FFF'>{dfy.iloc[i, 3]}</span></div> "
     for i in range(len(dfn.index)):
-        res += f"<div style='height:20px;width:20px;background-color:#999;display:inline-block;position:relative' id='empty'><span class='tooltiptext' style='color:#FFF'>{dfn.iloc[i, 3]}</span></div> "
+        res += f"<div style='height:20px;width:20px;background-color:{rightColor};display:inline-block;position:relative' id='empty'><span class='{spanClass}' style='color:#FFF'>{dfn.iloc[i, 3]}</span></div> "
     return res
     # if flip:
     #     return numFilled * unfilled + numUnFilled * filled; 
@@ -394,7 +402,7 @@ def startBiasTest(test_sentences_df, gr1, gr2, att1, att2, model_name, progress=
     num_atts = 0
     for att, score in attrib_by_score.items():
         if att in attributes_g1:
-            per_attrib_bias_HTML_stereo += att_bloombergViz(att, score, att_freqs[att], score_templates_df, False)
+            per_attrib_bias_HTML_stereo += att_bloombergViz(att, score, att_freqs[att], score_templates_df, False, False)
             num_atts += 1
             if num_atts >= 8:
                 break
@@ -403,7 +411,7 @@ def startBiasTest(test_sentences_df, gr1, gr2, att1, att2, model_name, progress=
     num_atts = 0
     for att, score in attrib_by_score.items():
         if att in attributes_g2:
-            per_attrib_bias_HTML_antistereo += att_bloombergViz(att, score, att_freqs[att], score_templates_df, True)
+            per_attrib_bias_HTML_antistereo += att_bloombergViz(att, score, att_freqs[att], score_templates_df, True, True)
             num_atts += 1
             if num_atts >= 8:
                 break
@@ -472,7 +480,8 @@ css_adds = "#group_row {background: white; border-color: white;} \
                #per_attrib_label_elem {background-color: #F8FAFC;} \
                #accordion {border-color: #E5E7EB} \
                #err_msg_elem p {color: #FF0000; cursor: pointer} \
-               .tooltiptext {visibility: hidden;width:50ch;margin-left:-25ch;top: 100%;left: 50%;background-color: #222;text-align: center;border-radius: 6px;padding: 5px 0;position: absolute;z-index: 1;} \
+               .tooltiptext_left {visibility: hidden;width:50ch;top: 100%;left: 105%;background-color: #222;text-align: center;border-radius: 6px;padding: 5px 0;position: absolute;z-index: 1;} \
+               .tooltiptext_right {visibility: hidden;width:50ch;top: 100%;left: 105%;background-color: #222;text-align: center;border-radius: 6px;padding: 5px 0;position: absolute;z-index: 1;} \
                #filled:hover .tooltiptext {visibility: visible;} \
                #empty:hover .tooltiptext {visibility: visible;}"