Update app.py

app.py

@@ -150,13 +150,16 @@ STYLE = """
 }
 /*Hover-Section*/
 .tree li a:hover, .tree li a:hover+ul li a {
-	background: var(--primary-600);
+	background: var(--primary-500);
 }
 .tree li a:hover+ul li::after, .tree li a:hover+ul li::before, .tree li a:hover+ul::before, .tree li a:hover+ul ul::before, .tree li a:hover+ul a::before {
-	border-color: var(--primary-400);
+	border-color: var(--primary-300);
 }
-.end-of-text, .chosen-token {
-    background-color: var(--primary-500);
+.chosen-token {
+    background-color: var(--primary-400);
+}
+.chosen-token td, .chosen-token tr {
+    color: black!important;
 }
 .end-of-text {
     width:auto!important;
@@ -168,6 +171,9 @@ STYLE = """
 .selected-sequence {
     background-color: var(--secondary-500)!important;
 }
+.nonselected-sequence {
+    background-color: var(--primary-500)!important;
+}
 """
 
 
@@ -205,12 +211,14 @@ def generate_nodes(node, step):
     """Recursively generate HTML for the tree nodes."""
     token = tokenizer.decode([node.current_token_ix])
 
-    selected_class = "selected-sequence" if node.is_selected_sequence else ""
-
     if node.is_final:
+        if node.is_selected_sequence:
+            selected_class = "selected-sequence"
+        else:
+            selected_class = "nonselected-sequence"
         return f"<li> <a href='#' class='end-of-text child {selected_class}'> <span> <b>{clean(token)}</b> <br>Total score: {node.total_score:.2f}</span> </a> </li>"
 
-    html_content = f"<li> <a href='#' class='nonfinal child {selected_class}'> <span> <b>{clean(token)}</b> </span>"
+    html_content = f"<li> <a href='#' class='nonfinal child'> <span> <b>{clean(token)}</b> </span>"
     if node.table is not None:
         html_content += node.table
     html_content += "</a>"
@@ -401,7 +409,7 @@ def get_beam_search_html(input_text, number_steps, number_beams, length_penalty)
     markdown += "\n\nThey are ranked by their scores, as given by the formula `score = cumulative_score / (output_length ** length_penalty)`.\n\n"
     markdown += "Only the top `num_beams` scoring sequences are returned: in the tree they are highlighted in **<span style='color:var(--secondary-500)!important'>blue</span>**."
     markdown += " The non-selected sequences are also shown in the tree, highlighted in **<span style='color:var(--primary-500)!important'>yellow</span>**."
-    markdown += "\n#### <span style='color:var(--secondary-600)!important'>Output sequences:</span>"
+    markdown += "\n#### <span style='color:var(--secondary-500)!important'>Output sequences:</span>"
     # Sequences are padded anyway so you can batch decode them
     decoded_sequences = tokenizer.batch_decode(outputs.sequences)
     for i, sequence in enumerate(decoded_sequences):