diff --git a/docs/images/Fig1a.png b/docs/assets/Fig1a.png similarity index 100% rename from docs/images/Fig1a.png rename to docs/assets/Fig1a.png diff --git a/docs/assets/Fig1c.png b/docs/assets/Fig1c.png new file mode 100644 index 0000000..3cbeabc Binary files /dev/null and b/docs/assets/Fig1c.png differ diff --git a/docs/assets/Fig2b.png b/docs/assets/Fig2b.png new file mode 100644 index 0000000..f6e79a1 Binary files /dev/null and b/docs/assets/Fig2b.png differ diff --git a/docs/assets/Patch_Encoder.png b/docs/assets/Patch_Encoder.png new file mode 100644 index 0000000..ea912e7 Binary files /dev/null and b/docs/assets/Patch_Encoder.png differ diff --git a/docs/assets/Patch_Writting.png b/docs/assets/Patch_Writting.png new file mode 100644 index 0000000..5fa2a7b Binary files /dev/null and b/docs/assets/Patch_Writting.png differ diff --git a/docs/assets/Tissue.png b/docs/assets/Tissue.png new file mode 100644 index 0000000..188ae6d Binary files /dev/null and b/docs/assets/Tissue.png differ diff --git a/docs/assets/Tissue_Grid.png b/docs/assets/Tissue_Grid.png new file mode 100644 index 0000000..0a12c2b Binary files /dev/null and b/docs/assets/Tissue_Grid.png differ diff --git a/docs/assets/Tissue_Mask.png b/docs/assets/Tissue_Mask.png new file mode 100644 index 0000000..740ad0b Binary files /dev/null and b/docs/assets/Tissue_Mask.png differ diff --git a/docs/index.html b/docs/index.html index 855b33b..03f7a5b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -9,13 +9,19 @@ + +

AtlasPatch

@@ -25,31 +31,242 @@

AtlasPatch

*Project Lead, †Equal Contributer

+
-

Abstract

-

Patch extraction from gigapixel whole-slide images, typically guided by tissue detection methods, forms the backbone of computational pathology workflows, - and remains a major computational bottleneck. Here we present AtlasPatch, an efficient and scalable slide preprocessing framework designed to enable accurate tissue - detection and high-throughput patch extraction with minimal computational overhead. To ensure robust and generalizable slide processing, we curated and - semi-manually annotated a diverse dataset of approximately 35,000 whole-slide image thumbnails spanning multiple cohorts, tissue types, and organ systems. Using this - corpus, we implement selective finetuning of the normalization layers of the Segment-Anything2 model for efficient thumbnail-level segmentation. This strategy ensures - fast processing while achieving segmentation accuracy comparable to—or exceeding—that of existing methods. From the thumbnail masks, tissue coordinates are efficiently - extrapolated to full-resolution slides for precise patch extraction. The entire pipeline is parallelized for both CPU and GPU execution to maximize throughput. We assess - AtlasPatch across segmentation accuracy, computational complexity, and downstream multiple-instance learning performance, showing consistent predictive power with - state-of-the-art methods while operating at a fraction of their computational cost.

- - +

Abstract

+

Whole-slide image (WSI) preprocessing, typically comprising tissue detection followed by patch extraction, is foundational to AI-driven + and image-based computational pathology workflows. This remains a major computational bottleneck as existing tools either rely on inacurate + heuristic thresholding for tissue detection, or adopt AI-based approaches trained on limited-diversity data that operate at the patch level, + incurring substantial computational complexity. We present AtlasPatch, an efficient and scalable slide preprocessing framework for accurate + tissue detection and high-throughput patch extraction with minimal computational overhead. AtlasPatch’s tissue detection module is trained + on a heterogeneous and semi-manually annotated dataset of $\sim$35,000 WSI thumbnails, using efficient fine-tuning of the Segment Anything2 + model. The tool extrapolates tissue masks from thumbnails to full-resolution slides to extract patch coordinates at user-specified magnifications, + with options to stream patches directly into commonly used image encoders for embedding generation or export patch images for storage, all efficiently + parallelized across CPUs and GPUs to maximize throughput. We assess AtlasPatch across segmentation accuracy, computational complexity, and downstream + multiple-instance learning, matching state-of-the-art performance while operating at a fraction of their computational cost.

+ + +
+ + +
+

Features

+ + + +
+ + +
+

Segmenter

+

Our high quality tissue detector generates masks using Segment Anything Model 2 (SAM2), finetuned using a large + and diverse annotated dataset. This dataset, comprised of over 35,000 whole-slide image (WSI) thumbnails, was curated + to cover several organs and tissue types, institutions, scanner vendors, acquisition protocols, and covering variations + in illumination, tissue fragment number and size, tissue boundary definition, and histologic heterogeneity. We finetuned + the SAM2 model by freezing the backbone and training only the normalization layers for the tissue-versus-background task.

+ + +
+ + +
+

Speed Comparison

+ + + +
+
+

AtlasPatch

+
+
+
+
+ +
+

CLAM

+
+
+
+
+ +
+

Trident-GrandQC

+
+
+
+
+ +
+

Trident-Hest

+
+
+
+
+
+ +

All runs shown compare the speed of image segmentation and patch extraction of 100 whole-slide images run on the + same computer hardware (time sped up 10x).

+
+ + +
+

Citation

+ +
+ + +

+      @software{atlaspatch,
+        title = {AtlasPatch},
+        author = {Ahmed Alagha, Christopher Leclerc, Yousef Hassan, Omar Abdelwahed, Calvin Moras, Peter Rentopoulos, Rose Rostami,
+        Bich Ngoc Nguyen, Jumanah Baig, Abdelhakim Khellaf, Vincent Quoc-Huy Trinh, Rabeb Mizouni, Hadi Otrok, Jamal Bentahar, 
+        Mahdi S. Hosseini},
+        year = {2025},
+        url = {https://github.com/AtlasAnalyticsLab/AtlasPatch},
+      }
+      
+
+ + + + + - \ No newline at end of file + diff --git a/docs/style.css b/docs/style.css index 8cf25d2..e537f80 100644 --- a/docs/style.css +++ b/docs/style.css @@ -1,3 +1,9 @@ +*, +*::before, +*::after { + box-sizing: border-box; +} + body { font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif; margin: 0; @@ -63,8 +69,7 @@ body { } section { - padding: 4rem 2rem; - scroll-margin-top: 30px; + scroll-margin-top: 50px; } html { @@ -86,7 +91,7 @@ html { text-align: center; background: #5b5bff; color: white; - padding: 0.2rem 1rem; + padding: 1rem 0; } .hero-content { @@ -140,6 +145,13 @@ html { /* Abstract Section */ .abstract { text-align: center; + padding-top: 0.5rem; + padding-bottom: 5rem; +} + +.abstract-title { + font-size: 2.5rem; + color: #5b5bff; } .abstract p { @@ -154,6 +166,387 @@ html { display: block; } +/* Features Section */ +.features { + text-align: center; + background-color: #f5f6fa; + width: 100%; + padding: 1rem 0 5rem; +} + +.features-title { + font-size: 2.5rem; + color: #5b5bff; + margin-bottom: 2rem; +} + +.features-carousel { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + gap: 1.5rem; + padding: 0 5rem; + max-width: 1100px; + margin: 0 auto; + box-sizing: border-box; +} + +.features-track { + display: flex; + justify-content: center; + gap: 1.5rem; + overflow: hidden; +} + +.feature-card { + width: 100%; + height: 400px; + background: white; + border-radius: 24px; + border: 1px solid rgba(0,0,0,0.04); + padding: 0; + display: none; + flex-direction: column; + align-items: center; + justify-content: flex-start; + text-align: center; +} + +.feature-card.active { + display: flex; +} + +.feature-card h3 { + font-size: 1.5rem; + line-height: 1.1; + margin-bottom: 0.5rem; +} + +.feature-card p { + font-size: 1rem; + color: #555; + line-height: 1.5; + margin-top: 5px; + padding: 0 150px; + padding-bottom: 0.5rem; +} + +.image-hover-container { + position: relative; + width: fit-content; + margin: 0 auto 1.5rem auto; + height: 220px; + display: block; + cursor: pointer; +} + +.image-hover-container img { + position: relative; + display: block; + max-width: 100%; + max-height: 220px; + object-fit: contain; + transition: opacity 0.3s ease-in-out; + margin: 0; +} + +.image-hover-container .hover-img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + z-index: 2; +} + +.image-hover-container:hover .hover-img { + opacity: 1; +} + +.image-hover-container:hover .base-img { + opacity: 0; +} + +.feature-card > img { + width: 100%; + max-height: 220px; + object-fit: contain; + margin-bottom: 1rem; +} + +.carousel-btn { + position: relative; + width: 44px; + height: 44px; + border-radius: 50%; + background-color: #5b5bff; + color: white; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + border: 1.5px solid black; + box-shadow: 0 4px 12px rgba(0,0,0,0.1); + transition: background-color 0.2s ease, transform 0.15s ease; + flex-shrink: 0; +} + +.carousel-btn:hover { + background-color: #4444dd; + transform: scale(1.05); +} + +.carousel-btn::before { + content: ""; + position: absolute; + width: 10px; + height: 10px; + border-top: 3px solid white; + border-right: 3px solid white; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) rotate(45deg); +} + +.carousel-btn.next::before { + transform: translate(-50%, -50%) rotate(45deg); +} + +.carousel-btn.prev::before { + transform: translate(-50%, -50%) rotate(-135deg); +} + +.carousel-dots { + display: flex; + justify-content: center; + gap: 10px; + margin-top: 1.5rem; +} + +.dot { + width: 8px; + height: 8px; + background-color: #cfcfcf; + border-radius: 50%; + cursor: pointer; + transition: background-color 0.2s ease, transform 0.2s ease; +} + +.dot.active { + background-color: #5b5bff; + transform: scale(1.2); +} + +/* Segmenter Section */ +.segmenter { + text-align: center; + padding-top: 0.5rem; + padding-bottom: 5rem; +} + +.segmenter-title { + font-size: 2.5rem; + color: #5b5bff; + text-align: center; +} + +.segmenter p { + max-width: 750px; + margin: 0 auto 2rem; +} + +.segmenter img { + max-width: 100%; + height: auto; + margin: 0 auto; + display: block; +} + +/* Comparison Section */ +.comparison { + text-align: center; + padding: 2rem 1rem; + background-color: #f5f6fa; +} + +.comparison-title { + font-size: 2.5rem; + color: #5b5bff; +} + +#replay-btn { + margin-bottom: 1.2rem; + padding: 0.5rem 1rem; + border-radius: 6px; + border: none; + background-color: #5b5bff; + color: white; + font-weight: 600; + cursor: pointer; + transition: background-color 0.2s ease; +} + +#replay-btn:hover { + background-color: #4444dd; +} + +.comparison-examples { + display: flex; + flex-direction: column; + gap: 1.5rem; + align-items: stretch; + padding-bottom: 1.5rem; +} + +.comparison-example { + display: flex; + align-items: center; + gap: 1rem; + width: 100%; + max-width: 900px; + margin: 0 auto; +} + +.example-label { + font-weight: 600; + color: #333; + width: 120px; + text-align: left; + margin: 0; + line-height: 12px; + display: flex; + position: relative; + align-items: center; + top: 15px; +} + +.timeline { + flex-grow: 1; + height: 12px; + min-width: 400px; + max-width: 100%; + background-color: #ddd; + border-radius: 6px; + overflow: hidden; + display: flex; + align-items: center; +} + +.progress { + height: 100%; + background-color: #5b5bff; + width: 0; + border-radius: 6px 0 0 6px; +} + +.comparison p { + max-width: 750px; + margin: 0 auto 2rem; +} + +/* Citation Section */ +.citation { + background-color: #ffff; + padding-top: 0.5rem; + padding-bottom: 5rem; + text-align: center; +} + +.citation-title { + font-size: 2.5rem; + color: #5b5bff; + margin-bottom: 2rem; +} + +.citation-box { + position: relative; + max-width: 900px; + margin: 0 auto; + background: #ffffff; + border-radius: 16px; + padding: 2rem; + box-shadow: 0 10px 30px rgba(0,0,0,0.08); + text-align: left; +} + +.citation-box pre { + margin: 0; + white-space: pre; + overflow-x: auto; + font-family: "JetBrains Mono", "Fira Code", Consolas, monospace; + font-size: 0.95rem; + line-height: 1.5; + color: #333; +} + +.copy-btn { + position: absolute; + top: 14px; + right: 14px; + width: 36px; + height: 36px; + background-color: #f0f0f0; + border: 1px solid #ddd; + border-radius: 8px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: background-color 0.2s ease, transform 0.15s ease; +} + +.copy-btn:hover { + background-color: #e6e6e6; + transform: scale(1.05); +} + +.copy-icon { + position: relative; + width: 14px; + height: 14px; +} + +.copy-icon::before, +.copy-icon::after { + content: ""; + position: absolute; + width: 12px; + height: 12px; + border: 1px solid #666; + border-radius: 3px; + background: transparent; +} + +.copy-icon::before { + top: -1px; + left: 3px; +} + +.copy-icon::after { + top: 3px; + left: -1px; + background-color: #f0f0f0; +} + +.copy-btn.copied .copy-icon { + display: flex; + align-items: center; + justify-content: center; +} + +.copy-btn.copied .copy-icon::before, +.copy-btn.copied .copy-icon::after { + all: unset; +} +.copy-btn.copied .copy-icon::after { + content: "✔"; + color: #666; + font-size: 16px; +} + +/* Footer Section */ footer { text-align: center; color: #666;