Skip to content

Commit 6785fdf

Browse files
author
Dmitrii Tarasov
committed
revert cursor crutches
1 parent 99fa58e commit 6785fdf

2 files changed

Lines changed: 258 additions & 77 deletions

File tree

‎project/index.html‎

Lines changed: 159 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@ <h2 class="title is-3">Abstract</h2>
124124
changes in reconstructed images, revealing that orthogonal rotations — rather than spatial transformations
125125
— control color encoding. Our approach can be applied to any vision encoder, shedding light on the inner
126126
structure of its feature space.
127+
</p>
127128
</div>
128129
</div>
129130
</div>
@@ -139,26 +140,33 @@ <h2 class="title is-3">Abstract</h2>
139140
<!-- Нужно четко подчеркнуть какие различия между модельками -->
140141
<!-- И как это влияет на реконструкцию -->
141142

142-
<div class="columns is-centered has-text-centered">
143-
<div class="column is-four-fifths">
144-
<h2 class="title is-3" style="white-space: nowrap;">Reconstruct images from feature space</h2>
145-
<div class="content has-text-justified">
146-
<div style="text-align: center;">
147-
<img src="./static/images/features_reconstruction.drawio.png" alt="features_reconstruction" width="900">
148-
<p class="caption" style="width: 100%; text-align: center;">
149-
<b>Figure 1. Image reconstructor training.</b> For pretrained model we train a reconstructor model that
150-
restores the image from the feature space.
151-
</p>
152-
<img src="./static/images/reconstruction_metrics.jpg" alt="reconstruction_metrics" width="900">
153-
<p class="caption" style="width: 100%; text-align: center;">
154-
<b>Figure 2. Reconstruction Metrics.</b> We show the results of the reconstruction for SigLip and SigLip2
155-
for different image resultions.
156-
</p>
143+
<section class="section">
144+
<div class="container is-max-desktop">
145+
<div class="columns is-centered">
146+
<div class="column is-four-fifths">
147+
<h2 class="title is-3 has-text-centered">Reconstruct images from feature space</h2>
148+
<div class="content">
149+
<div class="has-text-centered">
150+
<figure class="image is-16by9 mb-6">
151+
<img src="./static/images/features_reconstruction.drawio.png" alt="features_reconstruction" class="is-rounded">
152+
</figure>
153+
<p class="caption has-text-centered mb-6">
154+
<b>Figure 1. Image reconstructor training.</b> For pretrained model we train a reconstructor model that
155+
restores the image from the feature space.
156+
</p>
157+
<figure class="image is-16by9 mb-6">
158+
<img src="./static/images/reconstruction_metrics.jpg" alt="reconstruction_metrics" class="is-rounded">
159+
</figure>
160+
<p class="caption has-text-centered mb-6">
161+
<b>Figure 2. Reconstruction Metrics.</b> We show the results of the reconstruction for SigLip and SigLip2
162+
for different image resultions.
163+
</p>
164+
</div>
165+
</div>
157166
</div>
158167
</div>
159-
<br><br>
160168
</div>
161-
</div>
169+
</section>
162170

163171
<!-- (2) Feature-space transformations -->
164172
<!-- Текстовое объяснение -->
@@ -168,81 +176,115 @@ <h2 class="title is-3" style="white-space: nowrap;">Reconstruct images from feat
168176
<!-- Примеры Спектра такой м-цы, показать, что только небольшое кол-во каналов меняется -->
169177
<!-- -->
170178

171-
<div class="columns is-centered has-text-centered">
172-
<div class="column is-four-fifths">
173-
<h2 class="title is-3" style="white-space: nowrap;">Feature-space transformations. Q matrix Calculation and Application.</h2>
174-
<div class="content has-text-justified">
175-
<div style="text-align: center;">
176-
<img src="./static/images/features_reconstruction_manipulation_train_Q.drawio.png" alt="features_reconstruction_manipulation_train_Q" width="70%">
177-
<p class="caption" style="width: 70%; text-align: center;">
178-
<b>Figure 3. Feature-space transformations. Q matrix Calculation.</b> We then calculate Q matrix for feature-space manupulation.
179-
</p>
180-
<br><br>
181-
<img src="./static/images/features_reconstruction_manipulation_eval_Q.drawio.png" alt="features_reconstruction_manipulation_eval_Q" width="70%">
182-
<p class="caption" style="width: 70%; text-align: center;">
183-
<b>Figure 4. Feature-space transformations. Q matrix Application.</b> After Q matrix is calculated, we apply it to the feature space. For each patch embedding.
184-
</p>
179+
<section class="section">
180+
<div class="container is-max-desktop">
181+
<div class="columns is-centered">
182+
<div class="column is-four-fifths">
183+
<h2 class="title is-3 has-text-centered">Feature-space transformations. Q matrix Calculation and Application.</h2>
184+
<div class="content">
185+
<div class="columns is-centered">
186+
<div class="column is-half">
187+
<figure class="image is-16by9 mb-6">
188+
<img src="./static/images/features_reconstruction_manipulation_train_Q.drawio.png" alt="features_reconstruction_manipulation_train_Q" class="is-rounded">
189+
</figure>
190+
<p class="caption has-text-centered mb-6">
191+
<b>Figure 3. Feature-space transformations. Q matrix Calculation.</b> We then calculate Q matrix for feature-space manupulation.
192+
</p>
193+
</div>
194+
<div class="column is-half">
195+
<figure class="image is-16by9 mb-6">
196+
<img src="./static/images/features_reconstruction_manipulation_eval_Q.drawio.png" alt="features_reconstruction_manipulation_eval_Q" class="is-rounded">
197+
</figure>
198+
<p class="caption has-text-centered mb-6">
199+
<b>Figure 4. Feature-space transformations. Q matrix Application.</b> After Q matrix is calculated, we apply it to the feature space. For each patch embedding.
200+
</p>
201+
</div>
202+
</div>
203+
</div>
185204
</div>
186205
</div>
187-
<br><br>
188206
</div>
189-
</div>
207+
</section>
190208

191-
<div class="columns is-centered has-text-centered">
192-
<div class="column is-four-fifths">
193-
<h2 class="title is-3" style="white-space: nowrap;">Feature-space transformations. Color Swap Examples.</h2>
194-
<div class="content has-text-justified">
195-
<div style="text-align: center;">
196-
<img src="./static/images/rb_swap.png" alt="rb_swap" width="70%">
197-
<p class="caption" style="width: 70%; text-align: center;">
198-
<b>Figure 5. Red-blue channel swap samples.</b>
199-
</p>
200-
<br><br>
201-
<img src="./static/images/color_swap_all_eigen_values.png" alt="color_swap_all_eigen_values" width="70%">
202-
<p class="caption" style="width: 70%; text-align: center;">
203-
<b>Figure 6. Eigenvalues for red-blue channel swap matrix.</b> Majority of eigenvalues are close to 1, which means that the transformation is close to an identity matrix. While the other cluster of eigenvalues are close to -1, which means that for these channels direction is changed to the opposite.
204-
</p>
209+
<section class="section">
210+
<div class="container is-max-desktop">
211+
<div class="columns is-centered">
212+
<div class="column is-four-fifths">
213+
<h2 class="title is-3 has-text-centered">Feature-space transformations. Color Swap Examples.</h2>
214+
<div class="content">
215+
<div class="columns is-centered">
216+
<div class="column is-half">
217+
<figure class="image is-16by9 mb-6">
218+
<img src="./static/images/rb_swap.png" alt="rb_swap" class="is-rounded">
219+
</figure>
220+
<p class="caption has-text-centered mb-6">
221+
<b>Figure 5. Red-blue channel swap samples.</b>
222+
</p>
223+
</div>
224+
<div class="column is-half">
225+
<figure class="image is-16by9 mb-6">
226+
<img src="./static/images/color_swap_all_eigen_values.png" alt="color_swap_all_eigen_values" class="is-rounded">
227+
</figure>
228+
<p class="caption has-text-centered mb-6">
229+
<b>Figure 6. Eigenvalues for red-blue channel swap matrix.</b> Majority of eigenvalues are close to 1, which means that the transformation is close to an identity matrix. While the other cluster of eigenvalues are close to -1, which means that for these channels direction is changed to the opposite.
230+
</p>
231+
</div>
232+
</div>
233+
</div>
205234
</div>
206235
</div>
207-
<br><br>
208236
</div>
209-
</div>
237+
</section>
210238

211-
<div class="columns is-centered has-text-centered">
212-
<div class="column is-four-fifths">
213-
<h2 class="title is-3" style="white-space: nowrap;">Feature-space transformations. Blue Channel Suppression.</h2>
214-
<div class="content has-text-justified">
215-
<div style="text-align: center;">
216-
<img src="./static/images/b_suppression_all_transformations.png" alt="b_suppression_all_transformations" width="70%">
217-
<p class="caption" style="width: 70%; text-align: center;">
218-
<b>Figure 7. Blue channel suppression samples.</b>
219-
</p>
220-
<br><br>
221-
<img src="./static/images/b_suppression_all_eigen_values.png" alt="b_suppression_all_eigen_values" width="70%">
222-
<p class="caption" style="width: 70%; text-align: center;">
223-
<b>Figure 8. Eigenvalues for blue channel suppression matrix.</b>
224-
</p>
239+
<section class="section">
240+
<div class="container is-max-desktop">
241+
<div class="columns is-centered">
242+
<div class="column is-four-fifths">
243+
<h2 class="title is-3 has-text-centered">Feature-space transformations. Blue Channel Suppression.</h2>
244+
<div class="content">
245+
<div class="columns is-centered">
246+
<div class="column is-half">
247+
<figure class="image is-16by9 mb-6">
248+
<img src="./static/images/b_suppression_all_transformations.png" alt="b_suppression_all_transformations" class="is-rounded">
249+
</figure>
250+
<p class="caption has-text-centered mb-6">
251+
<b>Figure 7. Blue channel suppression samples.</b>
252+
</p>
253+
</div>
254+
<div class="column is-half">
255+
<figure class="image is-16by9 mb-6">
256+
<img src="./static/images/b_suppression_all_eigen_values.png" alt="b_suppression_all_eigen_values" class="is-rounded">
257+
</figure>
258+
<p class="caption has-text-centered mb-6">
259+
<b>Figure 8. Eigenvalues for blue channel suppression matrix.</b>
260+
</p>
261+
</div>
262+
</div>
263+
</div>
225264
</div>
226265
</div>
227-
<br><br>
228266
</div>
229-
</div>
267+
</section>
230268

231-
<div class="columns is-centered has-text-centered">
232-
<div class="column is-four-fifths">
233-
<h2 class="title is-3" style="white-space: nowrap;">Feature-space transformations. Colorization.</h2>
234-
<div class="content has-text-justified">
235-
<div style="text-align: center;">
236-
<img src="./static/images/colorized_examples.png" alt="colorization_all_transformations" width="900">
237-
<p class="caption" style="width: 100%; text-align: center;">
238-
<b>Figure 9. Colorization samples.</b>
239-
</p>
269+
<section class="section">
270+
<div class="container is-max-desktop">
271+
<div class="columns is-centered">
272+
<div class="column is-four-fifths">
273+
<h2 class="title is-3 has-text-centered">Feature-space transformations. Colorization.</h2>
274+
<div class="content">
275+
<div class="has-text-centered">
276+
<figure class="image is-16by9 mb-6">
277+
<img src="./static/images/colorized_examples.png" alt="colorization_all_transformations" class="is-rounded">
278+
</figure>
279+
<p class="caption has-text-centered mb-6">
280+
<b>Figure 9. Colorization samples.</b>
281+
</p>
282+
</div>
283+
</div>
240284
</div>
241285
</div>
242286
</div>
243-
<br><br>
244-
</div>
245-
</div>
287+
</section>
246288

247289

248290

@@ -290,6 +332,46 @@ <h2 class="title">BibTeX</h2>
290332

291333
<!-- End of Statcounter Code -->
292334

335+
<!-- Add modal HTML structure -->
336+
<div id="imageModal" class="modal">
337+
<span class="modal-close">&times;</span>
338+
<img class="modal-content" id="modalImage">
339+
</div>
340+
341+
<script>
342+
// Get the modal
343+
const modal = document.getElementById("imageModal");
344+
const modalImg = document.getElementById("modalImage");
345+
const closeBtn = document.getElementsByClassName("modal-close")[0];
346+
347+
// Add click event to all images
348+
document.querySelectorAll('.image.is-16by9 img').forEach(img => {
349+
img.onclick = function() {
350+
modal.style.display = "block";
351+
modalImg.src = this.src;
352+
}
353+
});
354+
355+
// Close modal when clicking the close button
356+
closeBtn.onclick = function() {
357+
modal.style.display = "none";
358+
}
359+
360+
// Close modal when clicking outside the image
361+
window.onclick = function(event) {
362+
if (event.target == modal) {
363+
modal.style.display = "none";
364+
}
365+
}
366+
367+
// Close modal with Escape key
368+
document.addEventListener('keydown', function(event) {
369+
if (event.key === "Escape") {
370+
modal.style.display = "none";
371+
}
372+
});
373+
</script>
374+
293375
</body>
294376

295377
</html>

‎project/static/css/index.css‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,5 +133,104 @@ body {
133133
font-size: smaller;
134134
}
135135

136+
/* New styles for better layout */
137+
.section {
138+
padding: 3rem 1.5rem;
139+
}
140+
141+
.container.is-max-desktop {
142+
max-width: 1200px;
143+
}
144+
145+
.title.is-3 {
146+
margin-bottom: 2rem !important;
147+
}
148+
149+
.figure {
150+
margin: 2rem 0;
151+
}
152+
153+
.caption {
154+
margin-top: 1rem;
155+
margin-bottom: 2rem;
156+
font-size: 1rem;
157+
line-height: 1.5;
158+
}
159+
160+
.image.is-16by9 {
161+
padding-top: 56.25%;
162+
position: relative;
163+
overflow: hidden;
164+
}
165+
166+
.image.is-16by9 img {
167+
position: absolute;
168+
top: 0;
169+
left: 0;
170+
width: 100%;
171+
height: 100%;
172+
object-fit: contain;
173+
cursor: pointer;
174+
transition: opacity 0.3s ease;
175+
}
176+
177+
.image.is-16by9 img:hover {
178+
opacity: 0.9;
179+
}
180+
181+
.mb-6 {
182+
margin-bottom: 3rem !important;
183+
}
184+
185+
.has-text-centered {
186+
text-align: center !important;
187+
}
188+
189+
.content {
190+
max-width: 100%;
191+
}
192+
193+
@media screen and (max-width: 768px) {
194+
.column.is-four-fifths {
195+
width: 100%;
196+
}
197+
198+
.image.is-16by9 {
199+
margin: 0 -1.5rem;
200+
border-radius: 0;
201+
}
202+
}
203+
204+
/* Modal styles */
205+
.modal {
206+
display: none;
207+
position: fixed;
208+
z-index: 1000;
209+
left: 0;
210+
top: 0;
211+
width: 100%;
212+
height: 100%;
213+
background-color: rgba(0, 0, 0, 0.9);
214+
overflow: auto;
215+
}
216+
217+
.modal-content {
218+
margin: auto;
219+
display: block;
220+
max-width: 90%;
221+
max-height: 90vh;
222+
object-fit: contain;
223+
}
224+
225+
.modal-close {
226+
position: absolute;
227+
top: 15px;
228+
right: 35px;
229+
color: #f1f1f1;
230+
font-size: 40px;
231+
font-weight: bold;
232+
cursor: pointer;
233+
}
234+
136235

137236

0 commit comments

Comments
 (0)