extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-03-30 18:26:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

Support for longer labels

Browse Source 
Additional changes,
- Updated some modifier portraits
- Updated some modifier names
- Removed one useless modifier
This commit is contained in:
Haka 2022-09-23 00:05:05 +03:00
parent 7ee00230fd
commit 5ddfe7a184
10 changed files with 75 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
ui/index.html
View File

@ -258,7 +258,7 @@
gap: 0px 0px; gap: 0px 0px;
grid-auto-flow: row; grid-auto-flow: row;
grid-template-areas: grid-template-areas:
"modifier-card-image" "modifier-card-image-container"
"modifier-card-container"; "modifier-card-container";
border: 2px solid rgba(255, 255, 255, .05); border: 2px solid rgba(255, 255, 255, .05);
cursor: pointer; cursor: pointer;
@ -274,24 +274,24 @@
.modifier-card:hover { .modifier-card:hover {
box-shadow: 0 5px 16px 5px rgba(0, 0, 0, 0.25); box-shadow: 0 5px 16px 5px rgba(0, 0, 0, 0.25);
} }
.modifier-card-image { .modifier-card-image-container {
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
width: inherit; width: inherit;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, .2); background-color: rgba(0, 0, 0, .2);
grid-area: modifier-card-image; grid-area: modifier-card-image-container;
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: rgb(255 255 255 / 8%); color: rgb(255 255 255 / 8%);
} }
.modifier-card-image img { .modifier-card-image-container img {
width: inherit; width: inherit;
height: 100%; height: 100%;
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
} }
.modifier-card-image * { .modifier-card-image-container * {
position: absolute; position: absolute;
} }
.modifier-card-container { .modifier-card-container {
@ -304,7 +304,11 @@
grid-area: modifier-card-container; grid-area: modifier-card-container;
font-weight: 100; font-weight: 100;
font-size: .9em; font-size: .9em;
width: inherit;
}
.modifier-card-label {
padding: 4px; padding: 4px;
word-break: break-word;
} }
.modifier-card-overlay { .modifier-card-overlay {
width: inherit; width: inherit;
@ -321,10 +325,10 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.modifier-card:hover > .modifier-card-image .modifier-card-overlay { .modifier-card:hover > .modifier-card-image-container .modifier-card-overlay {
opacity: 1; opacity: 1;
} }
.modifier-card:hover > .modifier-card-image img { .modifier-card:hover > .modifier-card-image-container img {
filter: blur(.1em); filter: blur(.1em);
} }
.modifier-card:active { .modifier-card:active {
@ -339,6 +343,44 @@
border: 2px solid rgb(179 82 255 / 94%); border: 2px solid rgb(179 82 255 / 94%);
box-shadow: 0 0px 10px 0 rgb(170 0 229 / 58%); box-shadow: 0 0px 10px 0 rgb(170 0 229 / 58%);
} }
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltip-text {
visibility: hidden;
width: 120px;
background: rgb(101,97,181);
background: linear-gradient(180deg, rgba(101,97,181,1) 0%, rgba(47,45,85,1) 100%);
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
top: 105%;
left: 39%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
border: 2px solid rgb(90 100 177 / 94%);
box-shadow: 0px 10px 20px 5px rgb(11 0 58 / 55%);
width: 10em;
}
.tooltip .tooltip-text::after {
content: "";
position: absolute;
top: -0.9em;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent rgb(90 100 177 / 94%) transparent;
}
.tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
</style> </style>
</html> </html>
<body> <body>
@ -1337,17 +1379,18 @@ function createModifierCard(name, previews) {
const modifierCard = document.createElement('div'); const modifierCard = document.createElement('div');
modifierCard.className = 'modifier-card'; modifierCard.className = 'modifier-card';
modifierCard.innerHTML = ` modifierCard.innerHTML = `
<div class="modifier-card-image"> <div class="modifier-card-image-container">
<div class="modifier-card-overlay">+</div> <div class="modifier-card-overlay">+</div>
<p></p> <p class="modifier-card-error-label"></p>
<img onerror="this.remove()" alt="Modifier Image"> <img onerror="this.remove()" alt="Modifier Image" class="modifier-card-image">
</div> </div>
<div class="modifier-card-container"> <div class="modifier-card-container">
<span></span> <div class="modifier-card-label"><p></p></div>
</div>`; </div>`;
const image = modifierCard.querySelector('img'); const image = modifierCard.querySelector('.modifier-card-image');
const errorText = modifierCard.querySelector('p'); const errorText = modifierCard.querySelector('.modifier-card-error-label');
const label = modifierCard.querySelector('.modifier-card-label');
errorText.innerText = 'No Image'; errorText.innerText = 'No Image';
@ -1358,13 +1401,27 @@ function createModifierCard(name, previews) {
image.remove(); image.remove();
} }
modifierCard.querySelector('span').innerText = name.replace('by ', ''); const maxLabelLength = 30;
const nameWithoutBy = name.replace('by ', '');
if(nameWithoutBy.length <= maxLabelLength) {
label.querySelector('p').innerText = nameWithoutBy;
} else {
const tooltipText = document.createElement('span');
tooltipText.className = 'tooltip-text';
tooltipText.innerText = name;
label.classList.add('tooltip');
label.appendChild(tooltipText);
label.querySelector('p').innerText = nameWithoutBy.substring(0, maxLabelLength) + '...';
}
return modifierCard; return modifierCard;
} }
function changePreviewImages(val) { function changePreviewImages(val) {
const previewImages = document.querySelectorAll('.modifier-card-image img'); const previewImages = document.querySelectorAll('.modifier-card-image-container img');
let previewArr = []; let previewArr = [];

19
ui/modifiers.json
View File

@ -112,7 +112,7 @@
"category": "Visual Style", "category": "Visual Style",
"modifiers": [ "modifiers": [
{ {
"modifier": "2d", "modifier": "2D",
"previews": [ "previews": [
{ {
"name": "portrait", "name": "portrait",
@ -125,7 +125,7 @@
] ]
}, },
{ {
"modifier": "8-bit", "modifier": "8-Bit",
"previews": [ "previews": [
{ {
"name": "portrait", "name": "portrait",
@ -138,7 +138,7 @@
] ]
}, },
{ {
"modifier": "16-bit", "modifier": "16-Bit",
"previews": [ "previews": [
{ {
"name": "portrait", "name": "portrait",
@ -1493,19 +1493,6 @@
} }
] ]
}, },
{
"modifier": "Trending on Artstation",
"previews": [
{
"name": "portrait",
"path": "artist/trending_on_artstation/portrait-0.jpg"
},
{
"name": "landscape",
"path": "artist/trending_on_artstation/landscape-0.jpg"
}
]
},
{ {
"modifier": "by Agnes Lawrence Pelton", "modifier": "by Agnes Lawrence Pelton",
"previews": [ "previews": [

BIN
ui/static/modifier-thumbnails/artist/by_alphonse_mucha/portrait-0.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 65 KiB

After

Width:  |  Height:  |  Size: 45 KiB

BIN
ui/static/modifier-thumbnails/artist/by_gustave_klimt/portrait-0.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 578 KiB

After

Width:  |  Height:  |  Size: 57 KiB

BIN
ui/static/modifier-thumbnails/artist/by_johannes_vermeer/portrait-0.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 480 KiB

After

Width:  |  Height:  |  Size: 420 KiB

BIN
ui/static/modifier-thumbnails/artist/by_makoto_shinkai/portrait-0.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 316 KiB

After

Width:  |  Height:  |  Size: 23 KiB

BIN
ui/static/modifier-thumbnails/artist/trending_on_artstation/landscape-0.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 34 KiB

BIN
ui/static/modifier-thumbnails/artist/trending_on_artstation/portrait-0.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 28 KiB

BIN
ui/static/modifier-thumbnails/visual_style/anime/portrait-0.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 34 KiB

BIN
ui/static/modifier-thumbnails/visual_style/manga/portrait-0.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 478 KiB