Skip to content

Commit 528e22f

Browse files
set project page
1 parent be5d60c commit 528e22f

2 files changed

Lines changed: 50 additions & 25 deletions

File tree

index.html

Lines changed: 50 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,18 @@
1010
font-weight: 700;
1111
color: #333;
1212
}
13+
14+
/* Style for inactive buttons */
15+
.button.is-dark:not(.is-active) {
16+
background-color: #4a4a4a; /* Lighter gray */
17+
border-color: transparent;
18+
color: #fff;
19+
}
20+
21+
/* Optional: Add hover effect */
22+
.button.is-dark:not(.is-active):hover {
23+
background-color: #393939;
24+
}
1325
</style>
1426

1527
<html>
@@ -117,11 +129,12 @@ <h2 class="title is-2 publication-title">
117129
<div class="container is-max-desktop">
118130
<div class="hero-body">
119131
<!-- Image with zero margin at the bottom -->
120-
<h2 class="title" style="text-align: center;">Motivation</h2>
121132
<img src="static/images/results.png"
122-
class="interpolation-image"
123-
alt="Interpolate start reference image."/>
124-
<!-- Combined classes in the <h2> tag -->
133+
class="interpolation-image"
134+
alt="Interpolate start reference image."
135+
style="width: 100%; max-width: 100%; height: auto;"/>
136+
<!-- You can also use a fixed size like width: 800px if needed -->
137+
<!-- Combined classes in the <h2> tag -->
125138
</div>
126139
</div>
127140
<div class="container is-max-desktop">
@@ -145,7 +158,7 @@ <h2 class="title is-4" style="margin-bottom: 5px; text-align: center;">Pipeline
145158
class="interpolation-image"
146159
alt="Interpolate start reference image."/>
147160
<h2 class="subtitle has-text-justified is-size-6" style=" font-size: 20px;">
148-
<b>Pipeline overview. We schematically illustrate the main idea of our <strong>InnerControl</strong> framework, highlighting the integration of the alignment loss. The main difference from ControlNet++ is <strong>InnerControl</strong>, which processes intermediate features extracted from the UNet decoder. These features are passed through an aggregation network to predict spatial control signals (e.g., depth or edge maps), which are then compared to the input control $c_{spatial}$ to enforce consistency at every denoising step.
161+
<b>Pipeline overview. We schematically illustrate the main idea of our <strong>InnerControl</strong> framework, highlighting the integration of the alignment loss. The main difference from ControlNet++ is <strong>InnerControl</strong>, which processes intermediate features extracted from the UNet decoder. These features are passed through an aggregation network to predict spatial control signals (e.g., depth or edge maps), which are then compared to the input control \( c_{\text{spatial}} \) to enforce consistency at every denoising step.
149162
</div>
150163
<div style="margin: 2em;"></div>
151164
<div style="margin: 2em;"></div>
@@ -158,7 +171,6 @@ <h2 class="title is-3">Quantitative Results</h2> <!-- Results title, assuming it
158171
<div class="container is-max-desktop">
159172
<div class="hero-body" style="padding: 10px 0;">
160173
<!-- Center-aligned title for better controllability and generation quality -->
161-
<h4 class="title is-4" style="margin-bottom: 5px; text-align: center;">Controllability and Generation Quality.</h4>
162174
<img src="./static/images/metrics.png"
163175
class="interpolation-image"
164176
alt="Interpolate start reference image."/>
@@ -180,37 +192,35 @@ <h2 class="title is-3">Qualitative Results</h2> <!-- Results title, assuming it
180192
<div class="container is-max-desktop">
181193
<div class="hero-body" style="padding: 10px 0;">
182194
<!-- Center-aligned title for better controllability and generation quality -->
183-
<h4 class="title is-4" style="margin-bottom: 5px; text-align: center;">Qualitative Comparison with other methods</h4>
184-
<img src="./static/images/images.pdf"
195+
<img src="./static/images/images.png"
185196
class="interpolation-image"
186197
alt="Interpolate start reference image."/>
187-
<h4 class="subtitle has-text-justified is-size-6" style="margin-top: 0; font-size: 21px;">
198+
<h4 class="subtitle has-text-centered is-size-6">
188199
<b>Visualization of difference between extracted signal from intermediate features and input control after our training applied (<i>top</i>) and for standard ControlNet (<i>bottom</i>)
189200
</h4>
190201

191202
</div>
192203
</div>
193204

194-
<div style="margin: 2em;"></div>
195-
<!-- More Visualization Results -->
196205
<h2 class="title is-3">More Visualization Results</h2>
197206
<div style="margin: 3.5em;"></div>
198207
<div class="container is-max-desktop">
199208
<div class="hero-body">
200-
<!-- Add buttons above the images -->
201-
<div class="buttons are-medium is-centered" style="margin-bottom: 20px;">
202-
<button class="button is-dark" onclick="showImage('depth')">Depth</button>
209+
<!-- Title above buttons -->
210+
<h4 class="title is-4 has-text-centered" style="width: 100%; margin-bottom: 1em;">Selected Control Type</h4>
211+
212+
<!-- Buttons -->
213+
<div class="buttons are-medium is-centered" style="margin-bottom: 20px; width: 100%;">
214+
<button class="button is-dark is-selected" onclick="showImage('depth')">Depth</button>
203215
<button class="button is-dark" onclick="showImage('lineart')">LineArt</button>
204216
<button class="button is-dark" onclick="showImage('hed')">HED</button>
205217
</div>
206218

207-
<!-- Dynamic image container -->
208-
<figure>
209-
<img id="dynamic-image" src="./static/images/depth.pdf" class="interpolation-image" alt="Interpolate start reference image."/>
210-
<h4 class="title is-4" style="text-align: center;">Selected Control Type</h4>
219+
<!-- Image below buttons -->
220+
<figure class="has-text-centered">
221+
<img id="dynamic-image" src="./static/images/appendix_depth.png" class="interpolation-image" style="max-width: 100%; height: auto;" alt="Selected Control Type Image"/>
211222
</figure>
212223
</div>
213-
</div>
214224
</div>
215225

216226
<div class="container is-max-desktop content" style="font-size: 16px;">
@@ -268,12 +278,27 @@ <h2 class="title is-3">BibTeX</h2>
268278
new BeerSlider(document.getElementById('slider10'), { start: '40' });
269279
</script>
270280

271-
<script>
272-
function showImage(type) {
273-
const img = document.getElementById('dynamic-image');
274-
img.src = `./static/images/appendix_${type}.pdf`;
275-
}
276-
</script>
281+
<script>
282+
function showImage(type) {
283+
const img = document.getElementById('dynamic-image');
284+
img.src = `./static/images/appendix_${type}.png`;
285+
286+
// Optional: Highlight active button
287+
document.querySelectorAll('.button').forEach(btn => {
288+
btn.classList.remove('is-active');
289+
});
290+
291+
event.target.classList.add('is-active');
292+
}
293+
</script>
294+
<script>
295+
MathJax = {
296+
tex: {
297+
inlineMath: [['$', '$'], ['\\(', '\\)']]
298+
},
299+
processEscapes: true
300+
};
301+
</script>
277302
</body>
278303

279304
</html>

static/images/metrics.png

-601 Bytes
Loading

0 commit comments

Comments
 (0)