Skip to content

Commit

Permalink
update slider
Browse files Browse the repository at this point in the history
  • Loading branch information
@hao-pt
hao-pt committed Oct 20, 2024
1 parent 93885b3 commit 39d8338
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 44 deletions.
62 changes: 40 additions & 22 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -306,14 +306,16 @@ <h1 class="title is-1 publication-title">DiMSUM <img src="./static/images/dimsum
</div> -->
<div id="results-carousel" class="carousel slide teaser-carousel" data-ride="carousel" data-interval="5000" >
<div class="carousel-inner">
<ol class="carousel-indicators"></ol>
<!-- <ol class="carousel-indicators"></ol>
<li data-target="#results-carousel" data-slide-to="0" class="active"></li>
<li data-target="#results-carousel" data-slide-to="1"></li>
<li data-target="#results-carousel" data-slide-to="2"></li>
</ol>
</ol> -->
<div class="carousel-item">
<img src="static/images/sit_207_sample_cfg4.0.png"
class="interpolation-image" />
<div>
<img src="static/images/sit_207_sample_cfg4.0.png"
class="teaser-img" />
</div>
<div class="card-content slider-text" style="background-color: rgba(0,0,0,0.1);">
<div class="is-size-5 has-text-centered">
Class: 'Golden retriever' (207)
Expand All @@ -322,8 +324,10 @@ <h1 class="title is-1 publication-title">DiMSUM <img src="./static/images/dimsum
</div>

<div class="carousel-item active">
<div>
<img src="static/images/sit_88_sample_cfg4.0.png"
class="interpolation-image" />
class="teaser-img" />
</div>
<div class="card-content slider-text d-block w-80" style="background-color: rgba(0,0,0,0.1)">
<div class="is-size-5 has-text-centered">
Class: 'Macaw' (88)
Expand All @@ -332,8 +336,8 @@ <h1 class="title is-1 publication-title">DiMSUM <img src="./static/images/dimsum
</div>

<div class="carousel-item">
<img src="static/images/sit_279_sample_cfg4.0.png"
class="interpolation-image" />
<div><img src="static/images/sit_279_sample_cfg4.0.png"
class="teaser-img" /></div>
<div class="card-content slider-text" style="background-color: rgba(0,0,0,0.1)">
<div class="is-size-5 has-text-centered">
Class: 'Arctic fox' (279)
Expand All @@ -342,8 +346,8 @@ <h1 class="title is-1 publication-title">DiMSUM <img src="./static/images/dimsum
</div>

<div class="carousel-item">
<img src="static/images/sit_360_sample_cfg4.0.png"
class="interpolation-image" />
<div><img src="static/images/sit_360_sample_cfg4.0.png"
class="teaser-img" /></div>
<div class="card-content slider-text" style="background-color: rgba(0,0,0,0.1)">
<div class="is-size-5 has-text-centered">
Class: 'Otter' (360)
Expand All @@ -352,8 +356,8 @@ <h1 class="title is-1 publication-title">DiMSUM <img src="./static/images/dimsum
</div>

<div class="carousel-item">
<img src="static/images/sit_387_sample_cfg4.0.png"
class="interpolation-image" />
<div><img src="static/images/sit_387_sample_cfg4.0.png"
class="teaser-img" /></div>
<div class="card-content slider-text" style="background-color: rgba(0,0,0,0.1)">
<div class="is-size-5 has-text-centered">
Class: 'Red Panda' (387)
Expand All @@ -362,8 +366,8 @@ <h1 class="title is-1 publication-title">DiMSUM <img src="./static/images/dimsum
</div>

<div class="carousel-item">
<img src="static/images/sit_972_sample_cfg4.0.png"
class="interpolation-image" />
<div><img src="static/images/sit_972_sample_cfg4.0.png"
class="teaser-img" /></div>
<div class="card-content slider-text" style="background-color: rgba(0,0,0,0.1)">
<div class="is-size-5 has-text-centered">
Class: 'Cliff' (972)
Expand All @@ -372,8 +376,8 @@ <h1 class="title is-1 publication-title">DiMSUM <img src="./static/images/dimsum
</div>

<div class="carousel-item">
<img src="static/images/sit_980_sample_cfg4.0.png"
class="interpolation-image" />
<div><img src="static/images/sit_980_sample_cfg4.0.png"
class="teaser-img" /> </div>
<div class="card-content slider-text" style="background-color: rgba(0,0,0,0.1)">
<div class="is-size-5 has-text-centered">
Class: 'Volcano' (980)
Expand All @@ -383,7 +387,7 @@ <h1 class="title is-1 publication-title">DiMSUM <img src="./static/images/dimsum

<div class="carousel-item">
<img src="static/images/sit_992_sample_cfg4.0.png"
class="interpolation-image" />
class="teaser-img" />
<div class="card-content slider-text" style="background-color: rgba(0,0,0,0.1)">
<div class="is-size-5 has-text-centered">
Class: 'Agaric' (992)
Expand All @@ -393,7 +397,7 @@ <h1 class="title is-1 publication-title">DiMSUM <img src="./static/images/dimsum

<div class="carousel-item">
<img src="static/images/sit_417_sample_cfg4.0.png"
class="interpolation-image" />
class="teaser-img" />
<div class="card-content slider-text" style="background-color: rgba(0,0,0,0.1)">
<div class="is-size-5 has-text-centered">
Class: 'Ballon' (417)
Expand All @@ -403,7 +407,7 @@ <h1 class="title is-1 publication-title">DiMSUM <img src="./static/images/dimsum

<div class="carousel-item">
<img src="static/images/sit_393_sample_cfg4.0.png"
class="interpolation-image" />
class="teaser-img" />
<div class="card-content slider-text" style="background-color: rgba(0,0,0,0.1)">
<div class="is-size-5 has-text-centered">
Class: 'Anemone fish' (393)
Expand All @@ -413,17 +417,31 @@ <h1 class="title is-1 publication-title">DiMSUM <img src="./static/images/dimsum

</div>

<a class="carousel-control-prev" href="#results-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<a class="carousel-control-prev" href="#results-carousel" role="button" data-slide="prev"></a>
<div class="slider-navigation-previous">
<svg viewBox="0 0 50 80" xml:space="preserve">
<polyline fill="white" stroke-width=".5em" stroke-linecap="round"
stroke-linejoin="round" points="45.63,75.8 0.375,38.087 45.63,0.375 ">
</polyline>
</svg>
</div>
<span class="sr-only">Previous</span>
</a>

<a class="carousel-control-next" href="#results-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
<div class="slider-navigation-next">
<svg viewBox="0 0 50 80" xml:space="preserve">
<polyline fill="white" stroke-width=".5em" stroke-linecap="round"
stroke-linejoin="round" points="0.375,0.375 45.63,38.087 0.375,75.8 ">
</polyline>
</svg>
</div>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>

<!-- <div class="column is-centered ">
<div class="content has-text-centered">
TL;DR: We propose DiMSUM, a hybrid Mamba-Transformer diffusion model that synergistically leverages both spatial and frequency information for high-quality image synthesis.</td>
Expand Down
63 changes: 41 additions & 22 deletions static/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,24 +166,11 @@ body {
text-align: center;
}
.carousel-item img {
/* width: 80%; */
/* width: 100%; */
}

.carousel {
/* max-height: 80%; */
max-width: 80%;
overflow: hidden;
}

.carousel .carousel-control-next-icon,
.carousel-control-prev-icon {
filter: invert(1);
}

.carousel-inner .item img {
margin:auto;
}

.carousel-control-next,.carousel-control-prev{
opacity:1
}
Expand Down Expand Up @@ -218,18 +205,50 @@ body {
background:gray center center no-repeat;
background-size:20px 20px
}

.teaser-carousel {
width: 60%;
width: 80%;
margin: auto;
height: 80%;
/* max-height: 540px; */
max-height: 540px;
}

.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='red' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
/* .carousel-control.left, .carousel-control.right {
left: 0;
z-index: 1;
} */

.caption {
font-family: Chalkduster;
color: gray;
width: auto;
display: inline-block;
padding: 11px 15px 11px 15px;
border-radius: 10px;
}

.caption:hover {
cursor: pointer;
color: black;
}

.caption-active {
color: black;
background-color: #F2E34C;
}

#videoCarousel{
margin-top:5px;
}


.teaser-img {
width: 90% !important;
}

.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='red' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
.hr-twill-colorful {
border: 0;
padding: 3px;
background: linear-gradient(135deg, red, orange,green, blue, purple);
--mask-image: repeating-linear-gradient(135deg, #000 0px, #000 1px, transparent 1px, transparent 6px);
-webkit-mask-image: var(--mask-image);
mask-image: var(--mask-image);
}

0 comments on commit 39d8338

Please sign in to comment.