Update web.py

web.py

@@ -366,13 +366,13 @@ def web_data():
     
        
         Details(
-            Summary("Non-English Documents"),
+            Summary("Non-English Document Examples"),
             Div(
                 DV("data/sample_non_en.json", 3, "Sample documents that are classified as non-English"),
                 style="background-color: white; padding: 15px; margin-top: 10px; margin-bottom: 10px; border-radius: 8px; border: none; "  # Styling for the DV2 part
             ),
             style="""
-            background-color: #FAEAEA; /* Light pink background */
+            background-color: #F0F8FF; /* Light pink background */
             padding: 15px;
             border-radius: 12px;
             margin-bottom: 15px
@@ -382,13 +382,13 @@ def web_data():
         #DV("data/sample_non_en.json", 3, "Sample documents that are classified as non-English"),
 
         Details(
-            Summary("English Documents Scoring Lower than 0.65"),
+            Summary("English Documents Scoring Lower than 0.65 Examples"),
             Div(
                 DV("data/sample_en_low.json", 3, "Sample documents that are classified as English but with score less than 0.65"),
                 style="background-color: white; padding: 15px; margin-top: 10px; margin-bottom: 10px; border-radius: 8px; border: none; "  # Styling for the DV2 part
             ),
             style="""
-            background-color: #FAEAEA; /* Light green background */
+            background-color: #F0F8FF; /* Light green background */
             padding: 15px;
             border-radius: 12px;
             margin-bottom: 15px
@@ -483,7 +483,7 @@ def web_data():
                 style="background-color: white; padding: 15px; margin-top: 10px; margin-bottom: 10px; border-radius: 8px; border: none; "  # Styling for the DV2 part
             ),
             style="""
-            background-color: #EAFFF1; /* Light green background */
+            background-color: #F0F8FF; /* Light green background */
             padding: 15px;
             border-radius: 12px;
             margin-bottom: 15px
@@ -510,7 +510,7 @@ def web_data():
         """),
 
         Details(
-            Summary("Sample documents with lines that are removed by the rule of terminal punctuation"),
+            Summary("Terminal Punctuation Filtering Examples"),
             Div (
                 DV(
                 "data/sample_terminal_punc.json",
@@ -520,7 +520,7 @@ def web_data():
                 style="background-color: white; padding: 15px; margin-top: 10px; margin-bottom: 10px; border-radius: 8px; border: none; "  # Styling for the DV2 part
             ),
             style="""
-            background-color: #FAEAEA; /* Light pink background */
+            background-color: #F0F8FF; /* Light pink background */
             padding: 15px;
             border-radius: 12px;
             margin-bottom: 15px
@@ -539,7 +539,7 @@ def web_data():
         The additional keyword could be any one of “enable” / “disable” / “require” / “activate” / “browser”.
         """),
         Details(
-            Summary("Sample documents that are removed by original C4 javascript rule but are kept after our refinement"),
+            Summary("Javascript Examples Filtered by C4 but Kept in TxT360"),
             Div (
                 DV(
                 "data/sample_java.jsonl",
@@ -549,7 +549,7 @@ def web_data():
                 style="background-color: white; padding: 15px; margin-top: 10px; margin-bottom: 10px; border-radius: 8px; border: none; "  # Styling for the DV2 part
             ),
             style="""
-            background-color: #FAEAEA; /* Light pink background */
+            background-color: #F0F8FF; /* Light pink background */
             padding: 15px;
             border-radius: 12px;
             margin-bottom: 15px
@@ -565,7 +565,7 @@ def web_data():
             Li("the line only contains one word.", style = "margin-bottom: 5px"),
         ),
         Details(
-            Summary("Sample documents with lines that are removed by the RefinedWeb rules"),
+            Summary("Documents Filtered using RefinedWeb Rules."),
             Div (
                 DV(
                 "data/sample_refinedweb_line.json",
@@ -575,7 +575,7 @@ def web_data():
                 style="background-color: white; padding: 15px; margin-top: 10px; margin-bottom: 10px; border-radius: 8px; border: none; "  # Styling for the DV2 part
             ),
             style="""
-            background-color: #FAEAEA; /* Light pink background */
+            background-color: #F0F8FF; /* Light pink background */
             padding: 15px;
             border-radius: 12px;
             margin-bottom: 15px
@@ -665,7 +665,7 @@ def web_data():
                 style="background-color: white; padding: 15px; margin-top: 10px; margin-bottom: 10px; border-radius: 8px; border: none; "  # Styling for the DV2 part
             ),
             style="""
-            background-color: #FFFAEA; /* Light yellow background */
+            background-color: #EAFFF1; /* Light yellow background */
             padding: 15px;
             border-radius: 12px;
             margin-bottom: 15px
@@ -708,7 +708,7 @@ def web_data():
                 style="background-color: white; padding: 15px; margin-top: 10px; margin-bottom: 10px; border-radius: 8px; border: none; "  # Styling for the DV2 part
             ),
             style="""
-            background-color: #FFFAEA; /* Light yellow background */
+            background-color: #EAFFF1; /* Light yellow background */
             padding: 15px;
             border-radius: 12px;
             margin-bottom: 15px
@@ -762,7 +762,7 @@ def web_data():
             """, 
         ),        
         Details(
-            Summary("Sample documents filtered by excessive line repetitions / characters in repeated lines"),
+            Summary("Excessive Line and Character Repetition Filtered Examples"),
             Div(
                 DV(
                 "data/repeat_line_frac.jsonl",
@@ -772,7 +772,7 @@ def web_data():
                 style="background-color: white; padding: 15px; margin-top: 10px; margin-bottom: 10px; border-radius: 8px; border: none; "  # Styling for the DV2 part
             ),
             style="""
-            background-color: #FAEAEA; /* Light pink background */
+            background-color: #F0F8FF; /* Light pink background */
             padding: 15px;
             border-radius: 12px;
             margin-bottom: 15px
@@ -803,7 +803,7 @@ def web_data():
                 style="background-color: white; padding: 15px; margin-top: 10px; margin-bottom: 10px; border-radius: 8px; border: none; "  # Styling for the DV2 part
             ),
             style="""
-            background-color: #FFFAEA; /* Light yellow background */
+            background-color: #EAFFF1; /* Light yellow background */
             padding: 15px;
             border-radius: 12px;
             margin-bottom: 15px
@@ -850,7 +850,7 @@ def web_data():
                 style="background-color: white; padding: 15px; margin-top: 10px; margin-bottom: 10px; border-radius: 8px; border: none; "  # Styling for the DV2 part
             ),
             style="""
-            background-color: #FFFAEA; /* Light yellow background */
+            background-color: #EAFFF1; /* Light yellow background */
             padding: 15px;
             border-radius: 12px;
             margin-bottom: 15px
@@ -882,7 +882,7 @@ def web_data():
                 style="background-color: white; padding: 15px; margin-top: 10px; margin-bottom: 10px; border-radius: 8px; border: none; "  # Styling for the DV2 part
             ),
             style="""
-            background-color: #FFFAEA; /* Light yellow background */
+            background-color: #EAFFF1; /* Light yellow background */
             padding: 15px;
             border-radius: 12px;
             margin-bottom: 15px
@@ -925,7 +925,7 @@ def web_data():
             """, 
         ),
         Details(
-            Summary("Sample documents filtered by the fraction of characters in the most common n-grams (n=2,3,4)"),
+            Summary("Documents Filtered Using Most Common n-Grams (n=2,3,4)"),
             Div(
                 DV(
                 "data/sample_top_ngram.json",
@@ -935,7 +935,7 @@ def web_data():
                 style="background-color: white; padding: 15px; margin-top: 10px; margin-bottom: 10px; border-radius: 8px; border: none; "  # Styling for the DV2 part
             ),
             style="""
-            background-color: #FAEAEA; /* Light pink background */
+            background-color: #F0F8FF; /* Light pink background */
             padding: 15px;
             border-radius: 12px;
             margin-bottom: 15px
@@ -969,7 +969,7 @@ def web_data():
                 style="background-color: white; padding: 15px; margin-top: 10px; margin-bottom: 10px; border-radius: 8px; border: none; "  # Styling for the DV2 part
             ),
             style="""
-            background-color: #FFFAEA; /* Light yellow background */
+            background-color: #EAFFF1; /* Light yellow background */
             padding: 15px;
             border-radius: 12px;
             margin-bottom: 15px
@@ -1031,7 +1031,7 @@ def web_data():
                 style="background-color: white; padding: 15px; margin-top: 10px; margin-bottom: 10px; border-radius: 8px; border: none; "  # Styling for the DV2 part
             ),
             style="""
-            background-color: #FFFAEA; /* Light yellow background */
+            background-color: #EAFFF1; /* Light yellow background */
             padding: 15px;
             border-radius: 12px;
             margin-bottom: 15px
@@ -1065,7 +1065,7 @@ def web_data():
                 style="background-color: white; padding: 15px; margin-top: 10px; margin-bottom: 10px; border-radius: 8px; border: none; "  # Styling for the DV2 part
             ),
             style="""
-            background-color: #FFFAEA; /* Light yellow background */
+            background-color: #EAFFF1; /* Light yellow background */
             padding: 15px;
             border-radius: 12px;
             margin-bottom: 15px
@@ -1134,7 +1134,7 @@ def web_data():
             """, 
         ),
         Details(
-            Summary("An example to show the difference between above implementations"),
+            Summary("Comparison of Coding Implementations"),
             P("""
             Considering n = 5 and the sample sentence:
 
@@ -1157,7 +1157,7 @@ def web_data():
             "Sample Documents Filtered by the Fraction of Characters in Duplicated N-grams (n=5,...,10)"
         ),
         Details(
-            Summary("Sample documents filtered by the fraction of characters in duplicated n-grams (n=5,...,10)"),
+            Summary("Documents Filtered by Duplicated n-Grams (n=5,...,10)"),
             Div(
                 DV(
                 "data/sample_dup_ngram.json",
@@ -1167,7 +1167,7 @@ def web_data():
                 style="background-color: white; padding: 15px; margin-top: 10px; margin-bottom: 10px; border-radius: 8px; border: none; "  # Styling for the DV2 part
             ),
             style="""
-            background-color: #FAEAEA; /* Light pink background */
+            background-color: #F0F8FF; /* Light pink background */
             padding: 15px;
             border-radius: 12px;
             margin-bottom: 15px
@@ -1201,7 +1201,7 @@ def web_data():
                 style="background-color: white; padding: 15px; margin-top: 10px; margin-bottom: 10px; border-radius: 8px; border: none; "  # Styling for the DV2 part
             ),
             style="""
-            background-color: #FFFAEA; /* Light yellow background */
+            background-color: #EAFFF1; /* Light yellow background */
             padding: 15px;
             border-radius: 12px;
             margin-bottom: 15px
@@ -1254,7 +1254,7 @@ def web_data():
                 style="background-color: white; padding: 15px; margin-top: 10px; margin-bottom: 10px; border-radius: 8px; border: none; "  # Styling for the DV2 part
             ),
             style="""
-            background-color: #FFFAEA; /* Light yellow background */
+            background-color: #EAFFF1; /* Light yellow background */  #light yellow FFFAEA
             padding: 15px;
             border-radius: 12px;
             margin-bottom: 15px
@@ -1263,7 +1263,7 @@ def web_data():
         
         
         Details(
-            Summary("Sample documents that are filtered out by line-wise heuristics"),
+            Summary("Documents Filtered by Line-Wise Heuristics"),
             Div(
                 DV(
                 "data/line_info.json",
@@ -1273,7 +1273,7 @@ def web_data():
                 style="background-color: white; padding: 15px; margin-top: 10px; margin-bottom: 10px; border-radius: 8px; border: none; "  # Styling for the DV2 part
             ),
             style="""
-            background-color: #FAEAEA; /* Light pink background */
+            background-color: #F0F8FF; /* Light pink background */
             padding: 15px;
             border-radius: 12px;
             margin-bottom: 15px
@@ -1343,7 +1343,7 @@ def web_data():
                 style="background-color: white; padding: 15px; margin-top: 10px; margin-bottom: 10px; border-radius: 8px; border: none; "  # Styling for the DV2 part
             ),
             style="""
-            background-color: #FFFAEA; /* Light yellow background */
+            background-color: #EAFFF1; /* Light yellow background */
             padding: 15px;
             border-radius: 12px;
             margin-bottom: 15px
@@ -1363,7 +1363,7 @@ def web_data():
                 style="background-color: white; padding: 15px; margin-top: 10px; margin-bottom: 10px; border-radius: 8px; border: none; "  # Styling for the DV2 part
             ),
             style="""
-            background-color: #FFFAEA; /* Light yellow background */
+            background-color: #EAFFF1; /* Light yellow background */
             padding: 15px;
             border-radius: 12px;
             margin-bottom: 15px
@@ -1414,7 +1414,7 @@ def web_data():
                 style="background-color: white; padding: 15px; margin-top: 10px; margin-bottom: 10px; border-radius: 8px; border: none; "  # Styling for the DV2 part
             ),
             style="""
-            background-color: #FFFAEA; /* Light yellow background */
+            background-color: #EAFFF1; /* Light yellow background */
             padding: 15px;
             border-radius: 12px;
             margin-bottom: 15px
@@ -1463,7 +1463,7 @@ def web_data():
                 style="background-color: white; padding: 15px; margin-top: 10px; margin-bottom: 10px; border-radius: 8px; border: none; "  # Styling for the DV2 part
             ),
              style="""
-            background-color: #FFFAEA; /* Light yellow background */
+            background-color: #EAFFF1; /* Light yellow background */
             padding: 15px;
             border-radius: 12px;
             margin-bottom: 15px
@@ -1498,7 +1498,7 @@ def web_data():
                 style="background-color: white; padding: 15px; margin-top: 10px; margin-bottom: 10px; border-radius: 8px; border: none; "  # Styling for the DV2 part
             ),
             style="""
-            background-color: #FFFAEA; /* Light yellow background */
+            background-color: #EAFFF1; /* Light yellow background */
             padding: 15px;
             border-radius: 12px;
             margin-bottom: 15px
@@ -1517,7 +1517,7 @@ def web_data():
                 style="background-color: white; padding: 15px; margin-top: 10px; margin-bottom: 10px; border-radius: 8px; border: none; "  # Styling for the DV2 part
             ),
             style="""
-            background-color: #FFFAEA; /* Light yellow background */
+            background-color: #EAFFF1; /* Light yellow background */
             padding: 15px;
             border-radius: 12px;
             margin-bottom: 15px
@@ -1555,7 +1555,7 @@ def web_data():
                 style="background-color: white; padding: 15px; margin-top: 10px; margin-bottom: 10px; border-radius: 8px; border: none; "  # Styling for the DV2 part
             ),
             style="""
-            background-color: #FFFAEA; /* Light yellow background */
+            background-color: #EAFFF1; /* Light yellow background */
             padding: 15px;
             border-radius: 12px;
             margin-bottom: 15px
@@ -1588,7 +1588,7 @@ def web_data():
                 style="background-color: white; padding: 15px; margin-top: 10px; margin-bottom: 10px; border-radius: 8px; border: none; "  # Styling for the DV2 part
             ),
             style="""
-            background-color: #FFFAEA; /* Light yellow background */
+            background-color: #EAFFF1; /* Light yellow background */
             padding: 15px;
             border-radius: 12px;
             margin-bottom: 15px
@@ -1608,7 +1608,7 @@ def web_data():
                 style="background-color: white; padding: 15px; margin-top: 10px; margin-bottom: 10px; border-radius: 8px; border: none; "  # Styling for the DV2 part
             ),
             style="""
-            background-color: #FFFAEA; /* Light yellow background */
+            background-color: #EAFFF1; /* Light yellow background */
             padding: 15px;
             border-radius: 12px;
             margin-bottom: 15px
@@ -1632,7 +1632,7 @@ def web_data():
         """, block="block", language="python"),
         H3("TxT360 Implementation"),
         Details(
-            Summary("Sample documents that are filtered out by statistics-based heuristics"),
+            Summary("Documents Filtered by Statistics-Based Heuristics"),
             Div(
                 DV(
                 "data/sample_doc_stat.json",
@@ -1642,7 +1642,7 @@ def web_data():
                 style="background-color: white; padding: 15px; margin-top: 10px; margin-bottom: 10px; border-radius: 8px; border: none; "  # Styling for the DV2 part
             ),
             style="""
-            background-color: #FAEAEA; /* Light pink background */
+            background-color: #F0F8FF; /* Light pink background */
             padding: 15px;
             border-radius: 12px;
             margin-bottom: 15px
@@ -1654,13 +1654,13 @@ def web_data():
         """),
         
         Details(
-            Summary("Sample documents containing 'lorem ipsum'"),
+            Summary("Documents Containing 'lorem ipsum'"),
             Div(
                 DV("data/lorem_ipsum.json", 0, "Sample documents containing 'lorem ipsum'"),
                 style="background-color: white; padding: 15px; margin-top: 10px; margin-bottom: 10px; border-radius: 8px; border: none; "  # Styling for the DV2 part
             ),
             style="""
-            background-color: #FAEAEA; /* Light pink background */
+            background-color: #F0F8FF; /* Light pink background */
             padding: 15px;
             border-radius: 12px;
             margin-bottom: 15px