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 >
0 commit comments