Skip to content

Commit

Permalink
scroll buttons size increased
Browse files Browse the repository at this point in the history
  • Loading branch information
@ligi214
ligi214 committed Sep 30, 2023
1 parent 30e6f22 commit 91bb273
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 33 deletions.
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/e57175cfbc.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&family=Roboto:wght@100;200;300;400;500;600;700;900&display=swap" rel="stylesheet">
<title>Diffusion Explainer</title>
<title>Diffusion Explainer: Stable Diffusion Explained with Visualization</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
Expand Down
5 changes: 2 additions & 3 deletions js/function.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1223,7 +1223,6 @@ function expandLatentDenoiserL2(e) {
// d3.select("#main").style("top", `${-mainHeight}px`)
// }, animationDuration)
// }
console.log("image")
window.showVisualization = true
d3.select("#main").style("top", "0px")
// if (window.showVisualization)
Expand Down Expand Up @@ -1652,7 +1651,7 @@ function onCompare () {
.duration(animationDuration)
.style("height", `430px`)
// .style("padding", `15px 40px 75px`)
.style("padding", `5px 40px 10px 40px`)
.style("padding", `5px 0px 10px 40px`)
d3.select("#your-text-prompt")
.transition()
.duration(animationDuration)
Expand Down Expand Up @@ -1971,7 +1970,7 @@ function offCompare () {
.style("height", `270px`)
// .style("padding", `55px 40px 85px 40px`)
// .style("padding", `15px 40px 0px 40px`)
.style("padding", `5px 40px 10px 40px`)
.style("padding", `5px 0px 10px 40px`)
d3.select("#your-text-prompt")
.transition()
.duration(animationDuration)
Expand Down
72 changes: 43 additions & 29 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,7 @@ svg {

#architecture-wrapper {
height: 270px;
padding: 5px 40px 10px 40px;
padding: 5px 0px 10px 40px;
/* padding: 15px 40px 0px 40px; */
width: 1008px;
position: relative;
Expand Down Expand Up @@ -711,7 +711,8 @@ input:checked + .slider:before {
opacity: 1;
}

#improved-latent-generated-image-container, #improved-latent-generated-image-container-2 {
#improved-latent-generated-image-container,
#improved-latent-generated-image-container-2 {
left: 751px;
width: 56px;
}
Expand All @@ -720,6 +721,11 @@ input:checked + .slider:before {
display: none;
}

#improved-latent-generated-image-svg {
width: 1px;
height: 150px;
}

#improved-latent-generated-image-text {
/* font-family: "Roboto Condensed", sans-serif; */
color: #c51b7d;
Expand Down Expand Up @@ -970,41 +976,45 @@ input:checked + .slider:before {

#text-vector-generator-l2-expl-reduce-button-container {
background-color: #c8c8c8;
border: #b0b0b0 1px solid;
border: #b0b0b0 0px solid;
border-radius: 50%;
height: 13px;
width: 13px;
height: 16px;
width: 16px;
position: absolute;
top: -75px;
top: -72px;
right: 10px;
cursor: pointer;
overflow: hidden;
}

#text-vector-generator-l2-expl-reduce-button {
height: 13px;
height: 16px;
filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(1deg) brightness(103%) contrast(107%);;
}

#text-vector-generator-l2-expl-reduce-button-container:hover,
#text-vector-generator-l2-expl-info-button:hover {
background-color: #afafaf;
border: #9a9a9a 1px solid;
border: #9a9a9a 0px solid;
}

#text-vector-generator-l2-expl-info-button {
background-color: #c8c8c8;
border: #b0b0b0 1px solid;
width: 13px;
height: 13px;
font-size: 12px;
border: #b0b0b0 0px solid;
width: 16px;
height: 16px;
/* font-size: 12px; */
line-height: 16px;
vertical-align: middle;
border-radius: 50%;
text-align: center;
color: white;
position: absolute;
top: -75px;
right: 30px;
top: -72px;
right: 32px;
cursor: pointer;
padding-top: 0.5px;
box-sizing: border-box;
}

/* #text-vector-generator-l2-expl-reduce-button:hover {
Expand Down Expand Up @@ -1225,19 +1235,19 @@ input:checked + .slider:before {

#latent-denoiser-l2-expl-reduce-button-container {
background-color: #c8c8c8;
border: #b0b0b0 1px solid;
border: #b0b0b0 0px solid;
border-radius: 50%;
height: 13px;
width: 13px;
height: 16px;
width: 16px;
position: absolute;
top: 37px;
left: 440px;
top: 38px;
left: 438px;
cursor: pointer;
overflow: hidden;
}

#denoise-latent-l2-expl-reduce-button {
height: 13px;
height: 16px;
filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(1deg) brightness(103%) contrast(107%);;
/* opacity: 0.3;
filter: invert(17%) sepia(71%) saturate(3596%) hue-rotate(309deg) brightness(98%) contrast(95%);
Expand All @@ -1251,22 +1261,25 @@ input:checked + .slider:before {
#latent-denoiser-l2-expl-reduce-button-container:hover,
#latent-denoiser-l2-expl-info-button:hover {
background-color: #afafaf;
border: #9a9a9a 1px solid;
/* border: #9a9a9a 1px solid; */
}

#latent-denoiser-l2-expl-info-button {
background-color: #c8c8c8;
border: #b0b0b0 1px solid;
width: 13px;
height: 13px;
border: #b0b0b0 0px solid;
width: 16px;
height: 16px;
line-height: 16px;
vertical-align: middle;
border-radius: 50%;
text-align: center;
color: white;
position: absolute;
top: 37px;
left: 421px;
top: 38px;
left: 416px;
cursor: pointer;

padding-top: 0.5px;
box-sizing: border-box;
}

#denoise-latent-l2-expl-reduce-button:hover {
Expand All @@ -1279,8 +1292,9 @@ input:checked + .slider:before {
font-weight: 500;
width: max-content;
position: relative;
left: 163px;
top: 34px;
left: 162px;
top: 35px;
letter-spacing: -0.3px;
}

#denoise-latent-l2-expl-prev-latent-container {
Expand Down

0 comments on commit 91bb273

Please sign in to comment.