Update app.py

app.py

@@ -150,13 +150,13 @@ STYLE = """
 }
 /*Hover-Section*/
 .tree li a:hover, .tree li a:hover+ul li a {
-	background: var(--primary-700);
+	background: var(--primary-600);
 }
 .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-200);
+	border-color: var(--primary-400);
 }
 .end-of-text, .chosen-token {
-    background-color: var(--primary-600);
+    background-color: var(--primary-500);
 }
 .end-of-text {
     width:auto!important;
@@ -166,7 +166,7 @@ STYLE = """
     min-width: 280px;
 }
 .selected-sequence {
-    background-color: var(--secondary-600)!important;
+    background-color: var(--secondary-500)!important;
 }
 """
 
@@ -399,8 +399,8 @@ def get_beam_search_html(input_text, number_steps, number_beams, length_penalty)
     )
     markdown = "The conclusive sequences are the ones that end in an `<|endoftext|>` token or at the end of generation."
     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-600)!important'>blue</span>**."
-    markdown += " The non-selected sequences are also shown in the tree, highlighted in **<span style='color:var(--primary-600)!important'>yellow</span>**."
+    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>"
     # Sequences are padded anyway so you can batch decode them
     decoded_sequences = tokenizer.batch_decode(outputs.sequences)
@@ -425,11 +425,11 @@ with gr.Blocks(
     css=STYLE,
 ) as demo:
     gr.Markdown(
-        """# <span style='color:var(--primary-600)!important'>Beam Search Visualizer</span>
+        """# <span style='color:var(--primary-500)!important'>Beam Search Visualizer</span>
                 
 Play with the parameters below to understand how beam search decoding works!
                 
-#### <span style='color:var(--primary-600)!important'>Parameters:</span>
+#### <span style='color:var(--primary-500)!important'>Parameters:</span>
 - **Sentence to decode from** (`inputs`): the input sequence to your decoder.
 - **Number of steps** (`max_new_tokens`): the number of tokens to generate
 - **Number of beams** (`num_beams`): the number of beams to use