Skip to content

Commit 2ed696e

Browse files
ChrisLeclercChrisLeclerc
authored
Updates to webpage (#22)
1 parent 0a5d778 commit 2ed696e

10 files changed

Lines changed: 630 additions & 20 deletions

File tree

docs/images/Fig1a.png renamed to docs/assets/Fig1a.png

File renamed without changes.

‎docs/assets/Fig1c.png‎

229 KB
Loading

‎docs/assets/Fig2b.png‎

371 KB
Loading

‎docs/assets/Patch_Encoder.png‎

147 KB
Loading

‎docs/assets/Patch_Writting.png‎

131 KB
Loading

‎docs/assets/Tissue.png‎

9.24 MB
Loading

‎docs/assets/Tissue_Grid.png‎

7.35 MB
Loading

‎docs/assets/Tissue_Mask.png‎

24.1 KB
Loading

‎docs/index.html‎

Lines changed: 234 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,19 @@
99
</head>
1010

1111
<body>
12+
<!-- Global Navbar -->
1213
<nav class="navbar">
1314
<div class="logo">AtlasPatch</div>
1415
<ul class="nav-links">
15-
<li><a href="#abstract">Abstract</a></li>
16+
<li><a href="#abstract">Overview</a></li>
17+
<li><a href="#features">Features</a></li>
18+
<li><a href="#segmenter">Segmenter</a></li>
19+
<li><a href="#comparison">Comparison</a></li>
20+
<li><a href="#citation">Citation</a></li>
1621
</ul>
1722
</nav>
1823

24+
<!-- Hero Header Section -->
1925
<header class="hero">
2026
<div class="hero-content">
2127
<h1 class="hero-title">AtlasPatch</h1>
@@ -25,31 +31,242 @@ <h1 class="hero-title">AtlasPatch</h1>
2531
<p class="hero-notes">*Project Lead, †Equal Contributer</p>
2632

2733
<div class="links">
28-
<a href="#"><i class="fas fa-file-alt"></i> Paper</a>
29-
<a href="#"><i class="fas fa-code"></i> Code</a>
30-
<a href="#"><i class="fas fa-image"></i> Gallery</a>
34+
<a href="#"><i class="fas fa-graduation-cap"></i> Paper</a>
35+
<a href="https://github.com/AtlasAnalyticsLab/AtlasPatch"><i class="fab fa-github"></i> Code</a>
3136
</div>
3237
</div>
3338
</header>
3439

40+
<!-- Abstract Section -->
3541
<section id="abstract" class="abstract container">
36-
<h2>Abstract</h2>
37-
<p>Patch extraction from gigapixel whole-slide images, typically guided by tissue detection methods, forms the backbone of computational pathology workflows,
38-
and remains a major computational bottleneck. Here we present AtlasPatch, an efficient and scalable slide preprocessing framework designed to enable accurate tissue
39-
detection and high-throughput patch extraction with minimal computational overhead. To ensure robust and generalizable slide processing, we curated and
40-
semi-manually annotated a diverse dataset of approximately 35,000 whole-slide image thumbnails spanning multiple cohorts, tissue types, and organ systems. Using this
41-
corpus, we implement selective finetuning of the normalization layers of the Segment-Anything2 model for efficient thumbnail-level segmentation. This strategy ensures
42-
fast processing while achieving segmentation accuracy comparable to—or exceeding—that of existing methods. From the thumbnail masks, tissue coordinates are efficiently
43-
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
44-
AtlasPatch across segmentation accuracy, computational complexity, and downstream multiple-instance learning performance, showing consistent predictive power with
45-
state-of-the-art methods while operating at a fraction of their computational cost.</p>
46-
47-
<img src="images/Fig1a.png" alt=""/>
42+
<h2 class="abstract-title">Abstract</h2>
43+
<p>Whole-slide image (WSI) preprocessing, typically comprising tissue detection followed by patch extraction, is foundational to AI-driven
44+
and image-based computational pathology workflows. This remains a major computational bottleneck as existing tools either rely on inacurate
45+
heuristic thresholding for tissue detection, or adopt AI-based approaches trained on limited-diversity data that operate at the patch level,
46+
incurring substantial computational complexity. We present AtlasPatch, an efficient and scalable slide preprocessing framework for accurate
47+
tissue detection and high-throughput patch extraction with minimal computational overhead. AtlasPatch’s tissue detection module is trained
48+
on a heterogeneous and semi-manually annotated dataset of $\sim$35,000 WSI thumbnails, using efficient fine-tuning of the Segment Anything2
49+
model. The tool extrapolates tissue masks from thumbnails to full-resolution slides to extract patch coordinates at user-specified magnifications,
50+
with options to stream patches directly into commonly used image encoders for embedding generation or export patch images for storage, all efficiently
51+
parallelized across CPUs and GPUs to maximize throughput. We assess AtlasPatch across segmentation accuracy, computational complexity, and downstream
52+
multiple-instance learning, matching state-of-the-art performance while operating at a fraction of their computational cost.</p>
53+
54+
<img src="assets/Fig1a.png" alt=""/>
55+
</section>
56+
57+
<!-- Features Section -->
58+
<section id="features" class="features">
59+
<h2 class="features-title">Features</h2>
60+
<div class="features-carousel">
61+
<button class="carousel-btn prev" aria-label="Previous feature"></button>
62+
63+
<div class="features-track">
64+
<div class="feature-card active">
65+
<h3>Fast Tissue Segmentation</h3>
66+
<p>AtlasPatch efficiently segments tissue regions from whole-slide images using a fine-tuned Segment-Anything2 (SAM2) model.</p>
67+
<div class="image-hover-container">
68+
<img src="assets/Tissue.png" alt="" class="base-img"/>
69+
<img src="assets/Tissue_Mask.png" alt="" class="hover-img"/>
70+
</div>
71+
</div>
72+
73+
<div class="feature-card">
74+
<h3>Patch Coordinate Extraction</h3>
75+
<p>AtlasPatch efficiently extracts patch coordinates from the generated SAM2 tissue masks.</p>
76+
<div class="image-hover-container">
77+
<img src="assets/Tissue.png" alt="" class="base-img"/>
78+
<img src="assets/Tissue_Grid.png" alt="" class="hover-img"/>
79+
</div>
80+
</div>
81+
82+
<div class="feature-card">
83+
<h3>Patch Embedding</h3>
84+
<p>Can perform feature embedding with numerous feature encoders available, with the use of custom encoders also possible.</p>
85+
<img src="assets/Patch_Encoder.png" alt=""/>
86+
</div>
87+
88+
<div class="feature-card">
89+
<h3>Patch Writing</h3>
90+
<p>Can save and export tissue patch images for patch visualization or for downstream task use.</p>
91+
<img src="assets/Patch_Writting.png" alt=""/>
92+
</div>
93+
</div>
94+
95+
<button class="carousel-btn next" aria-label="Next feature"></button>
96+
</div>
97+
98+
<div class="carousel-dots">
99+
<span class="dot active"></span>
100+
<span class="dot"></span>
101+
<span class="dot"></span>
102+
<span class="dot"></span>
103+
</div>
104+
</section>
105+
106+
<!-- Segmenter Section -->
107+
<section id="segmenter" class="segmenter container">
108+
<h2 class="segmenter-title">Segmenter</h2>
109+
<p>Our high quality tissue detector generates masks using Segment Anything Model 2 (SAM2), finetuned using a large
110+
and diverse annotated dataset. This dataset, comprised of over 35,000 whole-slide image (WSI) thumbnails, was curated
111+
to cover several organs and tissue types, institutions, scanner vendors, acquisition protocols, and covering variations
112+
in illumination, tissue fragment number and size, tissue boundary definition, and histologic heterogeneity. We finetuned
113+
the SAM2 model by freezing the backbone and training only the normalization layers for the tissue-versus-background task.</p>
114+
115+
<img src="assets/Fig1c.png" alt="">
116+
</section>
117+
118+
<!-- Comparison Section -->
119+
<section id="comparison" class="comparison">
120+
<h2 class="comparison-title">Speed Comparison</h2>
121+
122+
<button id="replay-btn">Replay</button>
123+
124+
<div class="comparison-examples">
125+
<div class="comparison-example">
126+
<p class="example-label">AtlasPatch</p>
127+
<div class="timeline">
128+
<div class="progress" data-speed="19"></div>
129+
</div>
130+
</div>
131+
132+
<div class="comparison-example">
133+
<p class="example-label">CLAM</p>
134+
<div class="timeline">
135+
<div class="progress" data-speed="42"></div>
136+
</div>
137+
</div>
138+
139+
<div class="comparison-example">
140+
<p class="example-label">Trident-GrandQC</p>
141+
<div class="timeline">
142+
<div class="progress" data-speed="47"></div>
143+
</div>
144+
</div>
145+
146+
<div class="comparison-example">
147+
<p class="example-label">Trident-Hest</p>
148+
<div class="timeline">
149+
<div class="progress" data-speed="328"></div>
150+
</div>
151+
</div>
152+
</div>
153+
154+
<p>All runs shown compare the speed of image segmentation and patch extraction of 100 whole-slide images run on the
155+
same computer hardware (time sped up 10x).</p>
156+
</section>
157+
158+
<!-- Citation Section -->
159+
<section class="citation" id="citation">
160+
<h2 class="citation-title">Citation</h2>
161+
162+
<div class="citation-box">
163+
<button class="copy-btn" onclick="copyCitation()" aria-label="Copy citation">
164+
<span class="copy-icon"></span>
165+
</button>
166+
167+
<pre id="citation-text"><code>
168+
@software{atlaspatch,
169+
title = {AtlasPatch},
170+
author = {Ahmed Alagha, Christopher Leclerc, Yousef Hassan, Omar Abdelwahed, Calvin Moras, Peter Rentopoulos, Rose Rostami,
171+
Bich Ngoc Nguyen, Jumanah Baig, Abdelhakim Khellaf, Vincent Quoc-Huy Trinh, Rabeb Mizouni, Hadi Otrok, Jamal Bentahar,
172+
Mahdi S. Hosseini},
173+
year = {2025},
174+
url = {https://github.com/AtlasAnalyticsLab/AtlasPatch},
175+
}
176+
</code></pre>
177+
</div>
48178
</section>
49179

50180
<footer>
51181
<p>© 2026 AtlasPatch. All rights reserved.</p>
52182
</footer>
53183

184+
<script>
185+
// Feature carousel
186+
const cards = document.querySelectorAll(".feature-card");
187+
const prevBtn = document.querySelector(".carousel-btn.prev");
188+
const nextBtn = document.querySelector(".carousel-btn.next");
189+
const dots = document.querySelectorAll(".carousel-dots .dot");
190+
191+
let currentIndex = 0;
192+
193+
function showCard(index) {
194+
cards.forEach(card => card.classList.remove("active"));
195+
cards[index].classList.add("active");
196+
197+
dots.forEach((dot, i) => dot.classList.toggle("active", i === index));
198+
199+
currentIndex = index;
200+
}
201+
202+
prevBtn.addEventListener("click", () => {
203+
let prevIndex = (currentIndex - 1 + cards.length) % cards.length;
204+
showCard(prevIndex);
205+
});
206+
207+
nextBtn.addEventListener("click", () => {
208+
let nextIndex = (currentIndex + 1) % cards.length;
209+
showCard(nextIndex);
210+
});
211+
212+
dots.forEach((dot, i) => {
213+
dot.addEventListener("click", () => showCard(i));
214+
});
215+
216+
showCard(0);
217+
</script>
218+
219+
<script>
220+
// Progress bars
221+
document.addEventListener('DOMContentLoaded', () => {
222+
const bars = document.querySelectorAll('.progress');
223+
const replayBtn = document.getElementById('replay-btn');
224+
const comparisonSection = document.getElementById('comparison');
225+
226+
function animateBars() {
227+
bars.forEach(bar => {
228+
const seconds = parseFloat(bar.dataset.speed) || 2;
229+
bar.style.transition = `width ${seconds}s linear`;
230+
bar.style.width = '100%';
231+
});
232+
}
233+
234+
const observer = new IntersectionObserver(entries => {
235+
entries.forEach(entry => {
236+
if (entry.isIntersecting) {
237+
animateBars();
238+
observer.unobserve(comparisonSection);
239+
}
240+
});
241+
}, { threshold: 0.7 });
242+
243+
observer.observe(comparisonSection);
244+
245+
// Replay button
246+
replayBtn.addEventListener('click', () => {
247+
bars.forEach(bar => {
248+
bar.style.transition = 'none';
249+
bar.style.width = '0';
250+
});
251+
void bars[0].offsetWidth;
252+
animateBars();
253+
});
254+
});
255+
</script>
256+
257+
<script>
258+
// Copy button
259+
function copyCitation() {
260+
const text = document.getElementById("citation-text").innerText;
261+
const btn = document.querySelector(".copy-btn");
262+
263+
navigator.clipboard.writeText(text).then(() => {
264+
btn.classList.add("copied");
265+
setTimeout(() => {
266+
btn.classList.remove("copied");
267+
}, 1500);
268+
});
269+
}
270+
</script>
54271
</body>
55-
</html>
272+
</html>

0 commit comments

Comments
 (0)