Skip to content

Commit f9f1063

Browse files
author
Dmitrii Tarasov
committed
cursor refactoring
1 parent aeab0ca commit f9f1063

2 files changed

Lines changed: 181 additions & 84 deletions

File tree

‎project/index.html‎

Lines changed: 117 additions & 84 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,90 +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 class="columns is-centered">
176-
<div class="column is-half">
177-
<img src="./static/images/features_reconstruction_manipulation_train_Q.drawio.png" alt="features_reconstruction_manipulation_train_Q" width="100%">
178-
<p class="caption" style="width: 70%; text-align: center;">
179-
<b>Figure 3. Feature-space transformations. Q matrix Calculation.</b> We then calculate Q matrix for feature-space manupulation.
180-
</p>
181-
</div>
182-
<div class="column is-half">
183-
<img src="./static/images/features_reconstruction_manipulation_eval_Q.drawio.png" alt="features_reconstruction_manipulation_eval_Q" width="100%">
184-
<p class="caption" style="width: 70%; text-align: center;">
185-
<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.
186-
</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>
187203
</div>
188204
</div>
189205
</div>
190-
<br><br>
191206
</div>
192-
</div>
207+
</section>
193208

194-
<div class="columns is-centered has-text-centered">
195-
<div class="column is-four-fifths">
196-
<h2 class="title is-3" style="white-space: nowrap;">Feature-space transformations. Color Swap Examples.</h2>
197-
<div class="content has-text-justified">
198-
<div class="columns is-centered">
199-
<div class="column is-half">
200-
<img src="./static/images/rb_swap.png" alt="rb_swap" width="100%">
201-
<p class="caption" style="width: 100%; text-align: center;">
202-
<b>Figure 5. Red-blue channel swap samples.</b>
203-
</p>
204-
</div>
205-
<div class="column is-half">
206-
<img src="./static/images/color_swap_all_eigen_values.png" alt="color_swap_all_eigen_values" width="100%">
207-
<p class="caption" style="width: 100%; text-align: center;">
208-
<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.
209-
</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>
210233
</div>
211234
</div>
212235
</div>
213-
<br><br>
214236
</div>
215-
</div>
237+
</section>
216238

217-
<div class="columns is-centered has-text-centered">
218-
<div class="column is-four-fifths">
219-
<h2 class="title is-3" style="white-space: nowrap;">Feature-space transformations. Blue Channel Suppression.</h2>
220-
<div class="content has-text-justified">
221-
<div class="columns is-centered">
222-
<div class="column is-half">
223-
<img src="./static/images/b_suppression_all_transformations.png" alt="b_suppression_all_transformations" width="100%">
224-
<p class="caption" style="width: 100%; text-align: center;">
225-
<b>Figure 7. Blue channel suppression samples.</b>
226-
</p>
227-
</div>
228-
<div class="column is-half">
229-
<img src="./static/images/b_suppression_all_eigen_values.png" alt="b_suppression_all_eigen_values" width="100%">
230-
<p class="caption" style="width: 100%; text-align: center;">
231-
<b>Figure 8. Eigenvalues for blue channel suppression matrix.</b>
232-
</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>
233263
</div>
234264
</div>
235265
</div>
236-
<br><br>
237266
</div>
238-
</div>
239-
240-
<div class="columns is-centered has-text-centered">
241-
<div class="column is-four-fifths">
242-
<h2 class="title is-3" style="white-space: nowrap;">Feature-space transformations. Colorization.</h2>
243-
<div class="content has-text-justified">
244-
<div style="text-align: center;">
245-
<img src="./static/images/colorized_examples.png" alt="colorization_all_transformations" width="900">
246-
<p class="caption" style="width: 100%; text-align: center;">
247-
<b>Figure 9. Colorization samples.</b>
248-
</p>
267+
</section>
268+
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>
249284
</div>
250285
</div>
251286
</div>
252-
<br><br>
253-
</div>
254-
</div>
287+
</section>
255288

256289

257290

‎project/static/css/index.css‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,5 +133,69 @@ 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+
border-radius: 8px;
165+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
166+
}
167+
168+
.image.is-16by9 img {
169+
position: absolute;
170+
top: 0;
171+
left: 0;
172+
width: 100%;
173+
height: 100%;
174+
object-fit: contain;
175+
}
176+
177+
.mb-6 {
178+
margin-bottom: 3rem !important;
179+
}
180+
181+
.has-text-centered {
182+
text-align: center !important;
183+
}
184+
185+
.content {
186+
max-width: 100%;
187+
}
188+
189+
@media screen and (max-width: 768px) {
190+
.column.is-four-fifths {
191+
width: 100%;
192+
}
193+
194+
.image.is-16by9 {
195+
margin: 0 -1.5rem;
196+
border-radius: 0;
197+
}
198+
}
199+
136200

137201

0 commit comments

Comments
 (0)