Closed Emasoft closed 10 months ago
skofkyo
commented
10 months ago My English is very poor, so I can only reply briefly through Google Translate.
Since I am not using these websites, please list all PAGE TYPES URLs like CivitAI.
I will try to write code when I have time, but please don’t expect too much. I learned the code by myself online and will only use some basic codes.
Do you need just lazy load replaced by full resolution images and single column?
Emasoft
commented
10 months ago Since I am not using these websites, please list all PAGE TYPES URLs like CivitAI.
Ok, I will compile a list of URL and post it here.
Do you need just lazy load replaced by full resolution images and single column?
Yes.👍
Emasoft
commented
10 months ago Here is the list of the pages with stream of images loading:
MODELS: https://civitai.com/models
IMAGES: https://civitai.com/images
VIDEOS: https://civitai.com/videos
POSTS: https://civitai.com/posts
ARTICLES: https://civitai.com/articles
TAGS: https://civitai.com/images?tags=114500&view=feed https://civitai.com/articles?tags=117884 https://civitai.com/images?tags=4 https://civitai.com/models?tag=poses https://civitai.com/videos?tags=5241 https://civitai.com/images?tags=5169&view=feed
SEARCH RESULTS (many tabs): https://civitai.com/search/images?sortBy=images_v3%3Astats.reactionCountAllTime%3Adesc&query=beauty
USER IMAGES (many tabs):
https://civitai.com/user/Cisney_Gassai/images
USER POSTS:
https://civitai.com/user/pAInCREAT0R/posts
MODELS GALLERY (many tabs):
https://civitai.com/models/47130/realisian
COLLECTIONS:
https://civitai.com/collections/95413
MAIN PAGE (many tabs & filters): https://www.liblib.art/
SEARCH (both tabs 'Model' and 'Works'): https://www.liblib.art/search?keyword=girl
MODEL (the gallery below): https://www.liblib.art/modelinfo/4a877a10741f4647b527c69dc6e5b74b
USER GALLERY (both tabs): https://www.liblib.art/userpage/ed8ab52a533b3d8ef56af77251907421/publish
INSPIRATION GALLERY: https://www.liblib.art/inspiration
HOME PAGE (many tabs & filters): https://www.seaart.ai/home
SEARCH (5 modes): https://www.seaart.ai/searchView
TAG SEARCH: https://www.seaart.ai/tagInfo/anime%20babe?id=anime%20babe
IMAGE DETAIL (gallery below): https://www.seaart.ai/explore/detail/citovbp4msbctpumhdm0
MODEL DETAIL (gallery below): https://www.seaart.ai/models/detail/333234ad4c0745be8f5b61f19309f9de
USER WORKS (5 tabs): https://www.seaart.ai/user/110da28068efa51c5eb3b9706ab4a964
https://www.seaart.ai/user/cometshooting
PERSONAL (many sections): https://www.seaart.ai/personal
RECOMMENDED WORKS (gallery below): https://www.seaart.ai/studio
HOME PAGE (4 tabs): https://tensor.art/
MODELS CHANNEL (3 tabs + tags): https://tensor.art/models/channel?tag=recommend
SEARCH RESULTS: https://tensor.art/search?q=beautiful
TAG GALLERY (4 tabs): https://tensor.art/tag/606333199311751695
MODEL DETAILS (gallery below): https://tensor.art/models/665229158122680230
https://tensor.art/models/674399072213463310
USER DETAILS (4 tabs): https://tensor.art/u/625253535268793777 https://tensor.art/u/647876472341600294
POST DETAILS: https://tensor.art/posts/676310624722015663
HOME PAGE (many tabs): https://pixai.art/
EXPLORE (many tabs & tags): https://pixai.art/artwork/tags/original%20character?sort=most-liked
SEARCH RESULTS (many tabs): https://pixai.art/search?q=beautiful&sort=trending
MARKET (many tabs): https://pixai.art/market?order=most-liked
MARKET SEARCH (many tabs): https://pixai.art/market/?keyword=photorealistic
DAILY BEST: https://pixai.art/ranking/artwork/today
IMAGE DETAILS https://pixai.art/artwork/1689860632697958447/relevant
https://pixai.art/artwork/1616938057692005741/relevant
https://pixai.art/artwork/1698436917755243915/relevant
MODEL DETAILS: https://pixai.art/model/1610580276403220034
https://pixai.art/model/1636599396530105765
MODEL TAG SEARCH: https://pixai.art/model/tags/female
CONTEST (many tabs): https://pixai.art/contest/1690855409990229673?sort=daily-ranking
COMIC RANKING: https://pixai.art/ranking/comic/today
ANIMATED RANKING: https://pixai.art/ranking/animated/today
EXPLORE: https://yodayo.com/explore/?key=&type=posts&sort=trending&top_time=
HOME PAGE (gallery below): https://creator.nightcafe.studio/
EXPLORE (many tabs): https://creator.nightcafe.studio/explore
USER GALLERY (many tabs) https://creator.nightcafe.studio/u/somniamea
DAILY CHALLENGES GALLERY: https://creator.nightcafe.studio/game/fu67RSLWUYyuZMZIHUW5/results
SHOWCASE: https://legacy.midjourney.com/showcase/top/
https://legacy.midjourney.com/showcase/recent/
SEARCH (many tabs): https://neural.love/search
https://neural.love/search?query=beautiful
https://neural.love/search?style=anime
https://neural.love/search?isHd=true&style=photo
IMAGE DETAIL: https://neural.love/ai-art-generator/1eea9369-d75f-6608-b75f-c57974a296fa/step-sis-in-a
GENERATOR GALLERY: https://neural.love/ai-art-generator
EXPLORE: https://animegenius.live3d.io/explore
TAG SEARCH: https://animegenius.live3d.io/tag/kimono
ARTWORK DETAILS (2 galleries below): https://animegenius.live3d.io/artwork/NDM3ODU=
HOME FEED (many tabs & tags): https://playgroundai.com/feed
POST DETAIL (gallery below): https://playgroundai.com/post/car-race-track-with-walls-futuristici-highly-detailed-oct-clqvvf3af0z06s6015xt2nmv8
USER DETAIL: https://playgroundai.com/profile/clq0exvym0bwes601ddfe32bq
HOME (many tabs): https://pornderful.ai/
FEED (many tabs): https://pornx.ai/search?feed=trending
skofkyo
commented
10 months ago Sorry, it's not possible to do single column easily.
You can use Picviewer CE+ or ComicRead to view pictures https://greasyfork.org/scripts/24204 https://greasyfork.org/scripts/374903
=======
lazy load full resolution images
civitai.com
thumbnail 450 x 675 39.1kb https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/ab5b700f-1cc6-408a-bac2-1d3cc38be280/width=450/00001-20230712095453.jpeg
original compression 960 x 1440 129kb https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/ab5b700f-1cc6-408a-bac2-1d3cc38be280/00001-20230712095453.jpeg
original 960 x 1440 1.7MB https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/ab5b700f-1cc6-408a-bac2-1d3cc38be280/original=true/00001-20230712095453.png
which one do you need?
Emasoft
commented
10 months ago Sorry, it's not possible to do single column easily.
which one do you need?
The last one in PNG of course.
skofkyo
commented
10 months ago Please use version 1.8.6 Turn on the Lazy Load Full Resolution function through the Tampermonkey menu
Is the effect of testing civitai.com OK?
If OK I will continue to add websites
Emasoft
commented
10 months ago Please use version 1.8.6 Turn on the Lazy Load Full Resolution function through the Tampermonkey menu
Is the effect of testing civitai.com OK?
If OK I will continue to add websites
Yes, it works! Great job! But in the image details page, the image is still jpeg though. Can you add a floating button to download the png version?
UPDATE: Wait, there is an issue. IT DOESN’T WORK ON ALL IMAGES. Only on some.
For example, when in “lazy loading” mode, the following image is shown in low resolution:
But in the IMAGE DETAIL page, the same image is shown in high resolution:
This is the url: https://civitai.com/images/1598691
To find it in the search stream, just search for “Girl”: https://civitai.com/search/images?query=Girl
I think this may be caused by a ‘crop’ function by CivitAI. Can you remove any ‘crop’ from the images, and just apply ‘fit-to-width’ to them?
skofkyo
commented
10 months ago Please modify the code
======
15382 line
item.dataset.url = thumbnail.replace(/width=\d+\//, "");
to
item.dataset.url = thumbnail.replace(/width=[\d+\.]\//, ""); //Original Image URL to replace when an error occurs
======
15383 line
let original = thumbnail.replace(/width=\d+\//, "original=true/");
to
let original = thumbnail.replace(/width=[\d\.]+\//, "original=true/");
======Can you add a floating button
Sorry no.
If you have any other questions, please report back
Emasoft
commented
10 months ago Ok, I made those changes, and now the resolution is improved. But the image is still cropped. We can only see half the image. Please remove the cropping and display the full image. Thanks!
skofkyo
commented
10 months ago Ok, I made those changes, and now the resolution is improved. But the image is still cropped. We can only see half the image. Please remove the cropping and display the full image. Thanks!
Please add after line 12892
css: "img[src*=original]:not(.mantine-Avatar-image,.mantine-cdh9bk,.mantine-d881q8,.mantine-qh395j,.mantine-2wuhuu,.mantine-lrbwmi){width:unset !important;height:unset !important;max-width:100% !important;max-height:100% !important;min-width: unset !important;}",
Only a simple test has been done, there may be bugs, and unnecessary elements need to be eliminated.
Emasoft
commented
10 months ago Only a simple test has been done, there may be bugs, and unnecessary elements need to be eliminated.
I tested it, and it only works on heights. Widths are still cropped.
It still crops Images like this one: https://civitai.com/images/1601470 Or this one: https://civitai.com/images/323556
But strangely, even if it is wide, it doesn’t crop images like this one: https://civitai.com/images/269667
You can test the above images using this search link: https://civitai.com/search/images?query=Girl
Emasoft
commented
10 months ago I was wrong. Even the heights are cropped sometimes.
Like in this case: https://civitai.com/images/5125243
You can see the lazy stream down here: https://civitai.com/models/62778/majicmix-sombre?modelVersionId=75209
One of the first images of the gallery. And it is cropped (no head).
skofkyo
commented
10 months ago Only a simple test has been done, there may be bugs, and unnecessary elements need to be eliminated.
I tested it, and it only works on heights. Widths are still cropped.
It still crops Images like this one: https://civitai.com/images/1601470 Or this one: https://civitai.com/images/323556
But strangely, even if it is wide, it doesn’t crop images like this one: https://civitai.com/images/269667
You can test the above images using this search link: https://civitai.com/search/images?query=Girl
As shown in the picture, the width and height of the image do not exceed the element frame, right?
skofkyo
commented
10 months ago I was wrong. Even the heights are cropped sometimes.
Like in this case: https://civitai.com/images/5125243
You can see the lazy stream down here: https://civitai.com/models/62778/majicmix-sombre?modelVersionId=75209
One of the first images of the gallery. And it is cropped (no head).
It seems that the image element is covered, not cropped. I will try again to see if I can solve it. If I hide it directly with CSS, I will not know the author.
Emasoft
commented
10 months ago As shown in the picture, the width and height of the image do not exceed the element frame, right?
On my screen this is what I see:
They are cropped horizontally.
skofkyo
commented
10 months ago As shown in the picture, the width and height of the image do not exceed the element frame, right?
On my screen this is what I see:
They are cropped horizontally.
On my Android Kiwi.
Wait for me to update the script.
skofkyo
commented
10 months ago Please try 1.8.7
I can't solve the problem of blocking the lower area when there is a Carousel slide in touch device mode. PC does not have this problem. I tried my best.
Emasoft
commented
10 months ago 1.8.7 works fine! You did it! No more headless figures! 👍 You literally vastly improved their website! Great job! 😄 Now the only remaining issue is to add to the GM menu the option to set the number of columns to 1. So that the images displayed are truly full screen and fit-to-browser-width. Can you do it?
skofkyo
commented
10 months ago 1.8.7 works fine! You did it! No more headless figures! 👍 You literally vastly improved their website! Great job! 😄 Now the only remaining issue is to add to the GM menu the option to set the number of columns to 1. So that the images displayed are truly full screen and fit-to-browser-width. Can you do it?
Maybe it can be done.
Test Page. https://civitai.com/collections/95413
Before.
After.
skofkyo
commented
10 months ago 1.8.7 works fine! You did it! No more headless figures! 👍 You literally vastly improved their website! Great job! 😄 Now the only remaining issue is to add to the GM menu the option to set the number of columns to 1. So that the images displayed are truly full screen and fit-to-browser-width. Can you do it?
Please try 1.8.8
Civitai Single Column Layout Mode
Emasoft
commented
10 months ago Please try 1.8.8
Civitai Single Column Layout Mode
Looks that you won again!👍👏🏻🫡 That is absolutely spectacular! Civitai finally in all its glory! They should hire you!!! (And I'm happy to see that you like my Cuteness Rules collection, BTW😁)
Emasoft
commented
10 months ago I noticed that there is a 'jump' while scrolling, because the images are loaded again later while they are already shown, maybe because being larger they take longer to load. Is there a way to make the preload buffer time longer, preloading and scaling them offscreen before entering into the view? I think preloading 3 images should be enough to hide the load/resize process for an average scroll speed, at least on my iPad Pro. It would be better if that number would be configurable from the menu (i.e. rows to preload before and after the current view: 3). Do you think is feasible? If not, never mind. It is already great as it is now! 🤩
P.S. There is also a bigger jump every 10-15 images that push the scroll back to 10-15 images before. It looks like the scroll position is calculated on the base of the original images/rows height, instead of using the new scaled height of the full size images.
skofkyo
commented
10 months ago I noticed that there is a 'jump' while scrolling, because the images are loaded again later while they are already shown, maybe because being larger they take longer to load. Is there a way to make the preload buffer time longer, preloading and scaling them offscreen before entering into the view? I think preloading 3 images should be enough to hide the load/resize process for an average scroll speed, at least on my iPad Pro. It would be better if that number would be configurable from the menu (i.e. rows to preload before and after the current view: 3). Do you think is feasible? If not, never mind. It is already great as it is now! 🤩
Update 1.8.10 Continuous preloading 1 images
P.S. There is also a bigger jump every 10-15 images that push the scroll back to 10-15 images before. It looks like the scroll position is calculated on the base of the original images/rows height, instead of using the new scaled height of the full size images.
The single-column layout mode will conflict with the element layout code of the website and cannot be resolved.
Emasoft
commented
10 months ago My report on version 1.8.10:
skofkyo
commented
10 months ago My report on version 1.8.10:
- I found out that the one column mode only shows 'half' the number of images! It skips 1 image every time another one is shown, so it only shows the odd numbered images! You can verify this if you go to the image detail page and use the side arrows buttons on the image to manualy show the next/prev picture in the stream.
- It's a pity for the scroll to get back each 10-15 images. It's like Sisyphus curse! It makes very hard to go on scrolling! It is like swimming against the current!
- The prefetch works, but the new image still resizes on screen and not off-screen. After a while it gets you an headache!
- Also: the three points button on the top-right ad the info button on the bottom-right of each picture are broken when using the one column mode. They both stop working.
I can't solve this. The single-column mode only adjusts the width and height of the elements, which is inherently contrary to the design of the website.
Emasoft
commented
10 months ago I love challenges! 😎 So I investigated a little, even if this is not my field.
The library they use to create the grid of images is Mantine.
They use the API to define the grid parameters in CSS, like in this example:
.root {
display: grid;
grid-template-columns: repeat(var(--sg-cols), minmax(0, 1fr));
gap: var(--sg-spacing-y) var(--sg-spacing-x);
}source: Mantine Github Repo
To be exact: when displaying search results they use the SimpleGrid component (a simplified Grid with all elements of the same size), while in the home page and in other places they use the Grid component. You can find both here:
Docs: https://mantine.dev/core/simple-grid/ Code Source On GitHub
Docs: https://mantine.dev/core/grid/ Code: Source On GitHub
If we inspect the CSS of CivitAI we found Grid and SimpleGrid mentioned in many places in the CSS. The key parameter to search is grid-template-columns (and also grid-auto-columns).
After each container width case there is usually a css snippet with the grid-template-columns setting, accepting 2 values:
@container (width < 991px) {
.mantine-sdohoh {
grid-auto-flow: column;
grid-template-columns: repeat(0, minmax(280px, 1fr));
grid-template-rows: repeat(2, auto);
scroll-snap-type: x mandatory;
overflow-x: auto;
}
}There are many places where grid-template-columns is defined, for example:
.mantine-sdohoh {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-webkit-column-gap: 16px;
column-gap: 16px;
grid-template-rows: repeat(2, auto);
grid-auto-rows: 0;
overflow: hidden;
margin-top: -16px;
padding-bottom: 16px;
}and:
@container (width < 767px) {
.mantine-sdohoh {
grid-auto-flow: column;
grid-template-columns: repeat(0, 280px);
grid-template-rows: auto;
scroll-snap-type: x mandatory;
overflow-x: auto;
margin-right: -16px;
margin-left: -16px;
padding-left: 16px;
}
.mantine-sdohoh>* {
scroll-snap-align: center;
}
}
.mantine-y7yj5k {
margin-bottom: 16px;
}and:
.mantine-16y2pql {
display: grid;
grid-auto-flow: column;
-webkit-column-gap: 16px;
column-gap: 16px;
grid-auto-columns: 320px;
grid-template-rows: auto;
grid-auto-rows: 0;
overflow-x: visible;
padding-bottom: 4px;
}
@container (width < 767px) {
.mantine-16y2pql {
margin-right: -16px;
margin-left: -16px;
padding-left: 16px;
}
}
.mantine-1azkwc2 {
position: relative;
}
.mantine-1azkwc2:hover .__mantine-ref-scrollArea::-webkit-scrollbar {
opacity: 1;
}Question: does changing the first parameter of the grid-template-column or the grid-auto-columns width in pixel to the screen width, does anything to solve the issue?
I'm not a web developer, so I'm out of my comfort zone here. 😵💫🥵
skofkyo
commented
10 months ago liblib.art load full resolution
seaart.ai No original image Link
Tensor.art Unable to display full resolution images directly
pixai.art It is not an IMG element but a DIV element. Add Background Image Auto show NSFW
yodayo.com Cannot use Loading Image
nightcafe.studio Image Link will be fixed
midjourney.com Can't find original image Link
neural.love The download page is an IMG element, and the others are A elements with Background Image added.
animegenius.live3d.io Can't find original image Link
playgroundai.com There is no visual change, and the background XHR capture continues. The order of capture is the arrangement order of the elements, not the order from left to right as seen in the window.
pornderful.ai Can't find original image Link
pornx.ai I couldn't find any higher resolution image
skofkyo
commented
10 months ago I love challenges! 😎 So I investigated a little, even if this is not my field. The library they use to create the
gridof images is Mantine. They use the API to define thegridparameters in CSS, like in this example:.root { display: grid; grid-template-columns: repeat(var(--sg-cols), minmax(0, 1fr)); gap: var(--sg-spacing-y) var(--sg-spacing-x); }source: Mantine Github Repo
To be exact: when displaying search results they use the
SimpleGridcomponent (a simplified Grid with all elements of the same size), while in the home page and in other places they use theGridcomponent. You can find both here:Docs: https://mantine.dev/core/simple-grid/ Code Source On GitHub
Docs: https://mantine.dev/core/grid/ Code: Source On GitHub
If we inspect the CSS of CivitAI we found Grid and SimpleGrid mentioned in many places in the CSS. The key parameter to search is
grid-template-columns(and alsogrid-auto-columns). After each container width case there is usually a css snippet with thegrid-template-columnssetting, accepting 2 values:@container (width < 991px) { .mantine-sdohoh { grid-auto-flow: column; grid-template-columns: repeat(0, minmax(280px, 1fr)); grid-template-rows: repeat(2, auto); scroll-snap-type: x mandatory; overflow-x: auto; } }There are many places where
grid-template-columnsis defined, for example:.mantine-sdohoh { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); -webkit-column-gap: 16px; column-gap: 16px; grid-template-rows: repeat(2, auto); grid-auto-rows: 0; overflow: hidden; margin-top: -16px; padding-bottom: 16px; }and:
@container (width < 767px) { .mantine-sdohoh { grid-auto-flow: column; grid-template-columns: repeat(0, 280px); grid-template-rows: auto; scroll-snap-type: x mandatory; overflow-x: auto; margin-right: -16px; margin-left: -16px; padding-left: 16px; } .mantine-sdohoh>* { scroll-snap-align: center; } } .mantine-y7yj5k { margin-bottom: 16px; }and:
.mantine-16y2pql { display: grid; grid-auto-flow: column; -webkit-column-gap: 16px; column-gap: 16px; grid-auto-columns: 320px; grid-template-rows: auto; grid-auto-rows: 0; overflow-x: visible; padding-bottom: 4px; } @container (width < 767px) { .mantine-16y2pql { margin-right: -16px; margin-left: -16px; padding-left: 16px; } } .mantine-1azkwc2 { position: relative; } .mantine-1azkwc2:hover .__mantine-ref-scrollArea::-webkit-scrollbar { opacity: 1; }Question: does changing the first parameter of the
grid-template-columnor thegrid-auto-columnswidth in pixel to the screen width, does anything to solve the issue? I'm not a web developer, so I'm out of my comfort zone here. 😵💫🥵
This is your personal preference, this problem is not as simple as just modifying the CSS, and this script is not written by me to do this kind of thing, I refuse to continue to try this request.
Emasoft
commented
10 months ago Ok, no prob. You did a lot already. Thank you very much!! 🫡
Please add support for the following Generative AI (Standard Diffusion, etc.) websites:
https://www.liblib.art/ https://civitai.com/ https://seaart.ai/ https://tensor.art/ https://pixai.art/ https://yodayo.com/explore/?key=naked&type=posts&sort=trending https://creator.nightcafe.studio/explore https://neural.love/search?isHd=true&style=photo https://animegenius.live3d.io/explore https://www.mage.space/explore https://playgroundai.com/feed https://prompthero.com/nsfw-prompts https://ai-porn.art/tag/beauty/ https://pornderful.ai/search https://pornx.ai/search?feed=best https://promptchan.ai/
Also: the images on those websites are too small, and only the low res version is shown in search results or galleries.
It would be great if the search results thumbs could be replaced by full resolution images and resized to fit to width in a single column. Infinite scrolling should still lazy load all images in full resolution.
I'm referring to those kind of pages (for example on CivitAI):
PAGE TYPES:
SEARCH RESULTS: https://civitai.com/search/images?sortBy=images_v3%3Astats.reactionCountAllTime%3Adesc&query=beauty
USER IMAGES: https://civitai.com/user/Cisney_Gassai/images
USER POSTS: https://civitai.com/user/pAInCREAT0R/posts
MODELS GALLERY: https://civitai.com/models/47130/realisian
COLLECTIONS: https://civitai.com/collections/95413
The same for the other websites.