fix images

common.py

@@ -298,7 +298,8 @@ global_div = Div(
             "To illustrate the need for deduplication, below is the distribution of near-duplicate clusters, organized into buckets of 100. The first bucket contains clusters with sizes ranging from 2 to 100, as found in the Common Crawl dataset. Some clusters even reach up to a million documents."
         ),
         plotly2fasthtml(dup_cluster_graph()),
-        Img(src="images/100k.png", height="300", width="600"),
+        P("The example below is from one such cluster. Here most of the text is repeated with just specifics changed."),
+        Img(src="images/100k.png", style="max-width: 100%;"),
         P(
             "We started deduplication with 61.8 TB of filtered and compressed documents. The initial dataset had roughly 48.83 billion documents. First, we performed exact deduplication using a Bloom filter with a capacity of 1 billion and a false positive rate of 0.001. This reduced the documents from 48.83 billion to 40.21 billion, removing about 17% as exact duplicates. This step used constant memory for the Bloom filter and lessened the workload for subsequent near-deduplication."
         ),
@@ -351,7 +352,7 @@ global_div = Div(
     ),
     Section(
         H3("Stage 4: Finding Connected Components using MapReduce"),
-        Img(src="images/cc.png", height="300", width="600"),
+        Img(src="images/cc.png", style="max-width: 100%;"),
         P(
             "The purpose of this step is to create a set of clusters of matching pairs. For example, a list of pairs (A, B), (B, C), (D, E) is merged into a list of components (A, B, C) and (D, E). Using a third-party library like NetworkX to find connected components would require all pairs to fit into the memory of a single machine, which is not feasible. Instead, we implemented a distributed connected component finder [4] using the Dask framework, which can scale across multiple machines. The algorithm works by mapping edges by both the source and destination of pairs and reducing only edges where the source is greater than the destination. It performs successive iterations of this MapReduce computation until convergence, meaning the number of new edges produced becomes zero. In the end, every document in a cluster points to the smallest document within the cluster. Later, we compile a list of duplicate documents that need deletion and gather statistics about each component."
         ),
@@ -368,15 +369,15 @@ global_div = Div(
         P(
             "Smaller components tend to have more overlap in their MinHash bands. The smallest components are almost exact pairs but due to small differences, were not included in the local exact deduplication."
         ),
-        Img(src="images/image3.png", height="300", width="600"),
+        Img(src="images/image3.png", style="max-width: 100%;"),
         P(
             "Changes in text are incremental from buckets of 3 or more documents onwards. The example below shows a personnel list that has grown over the years."
         ),
-        Img(src="images/image7.png", height="300", width="600"),
+        Img(src="images/image7.png", style="max-width: 100%;"),
         P(
             "In sizable clusters comprising 1000 or more documents, we observe a trend towards templatization. This involves the recurrent use of standardized language to convey general topics such as terms and conditions, warnings, and disclaimers. Such language is prevalent on commercial websites, offering a consistent and efficient way to communicate commonly encountered information."
         ),
-        Img(src="images/image9.png", height="300", width="600"),
+        Img(src="images/image9.png", style="max-width: 100%;"),
     ),
     Section(
         H2("Personally Identifable Information Removal"),