From 8014ed2055eac792a8ec738ceaa2e07f8cafe9ee Mon Sep 17 00:00:00 2001 From: ManInDark <61268856+ManInDark@users.noreply.github.com> Date: Wed, 9 Aug 2023 23:56:06 +0200 Subject: [PATCH 1/7] Added single-image-site --- ui/easydiffusion/bucket_manager.py | 13 +++++++++++++ ui/easydiffusion/easydb/mappings.py | 21 +++++++++++++++++++++ ui/media/css/single-gallery.css | 9 +++++++++ 3 files changed, 43 insertions(+) create mode 100644 ui/media/css/single-gallery.css diff --git a/ui/easydiffusion/bucket_manager.py b/ui/easydiffusion/bucket_manager.py index 43b5f147..9b7aeae1 100644 --- a/ui/easydiffusion/bucket_manager.py +++ b/ui/easydiffusion/bucket_manager.py @@ -108,6 +108,19 @@ def init(): if model != "": images = images.filter(GalleryImage.use_stable_diffusion_model.like("%"+model+"%")) return images.all() + + @server_api.get("/single_image") + def get_single_image(image_path: str, db: Session = Depends(get_db)): + from easydiffusion.easydb.mappings import GalleryImage + image_path = str(abspath(image_path)) + try: + image: GalleryImage = db.query(GalleryImage).filter(GalleryImage.path == image_path).first() + head = "" + body = "" + image.htmlForm() + "" + return Response(content="" + head + body + "", media_type="text/html") + except Exception as e: + print(e) + raise HTTPException(status_code=404, detail="Image not found") def get_filename_from_url(url): path = urlparse(url).path diff --git a/ui/easydiffusion/easydb/mappings.py b/ui/easydiffusion/easydb/mappings.py index 035f2ee8..653539ad 100644 --- a/ui/easydiffusion/easydb/mappings.py +++ b/ui/easydiffusion/easydb/mappings.py @@ -31,5 +31,26 @@ class GalleryImage(Base): return "" % ( self.path, self.seed, self.use_stable_diffusion_model, self.clip_skip, self.use_vae_model, self.sampler_name, self.width, self.height, self.num_inference_steps, self.guidance_scale, self.lora, self.use_hypernetwork_model, self.tiling, self.use_face_correction, self.use_upscale, self.prompt, self.negative_prompt) + def htmlForm(self) -> str: + return "

Path: " + str(self.path) + "

" + \ + "Seed: " + str(self.seed) + "

" + \ + "Stable Diffusion Model: " + str(self.use_stable_diffusion_model) + "

" + \ + "Prompt: " + str(self.prompt) + "

" + \ + "Negative Prompt: " + str(self.negative_prompt) + "

" + \ + "Clip Skip: " + str(self.clip_skip) + "

" + \ + "VAE Model: " + str(self.use_vae_model) + "

" + \ + "Sampler: " + str(self.sampler_name) + "

" + \ + "Size: " + str(self.height) + "x" + str(self.width) + "

" + \ + "Inference Steps: " + str(self.num_inference_steps) + "

" + \ + "Guidance Scale: " + str(self.guidance_scale) + "

" + \ + "LoRA: " + str(self.lora) + "

" + \ + "Hypernetwork: " + str(self.use_hypernetwork_model) + "

" + \ + "Tiling: " + str(self.tiling) + "

" + \ + "Face Correction: " + str(self.use_face_correction) + "

" + \ + "Upscale: " + str(self.use_upscale) + "

" + \ + "Time Created: " + str(self.time_created) + "

" + \ + "NSFW: " + str(self.nsfw) + "

" + + from easydiffusion.easydb.database import engine GalleryImage.metadata.create_all(engine) diff --git a/ui/media/css/single-gallery.css b/ui/media/css/single-gallery.css new file mode 100644 index 00000000..dbaedfa1 --- /dev/null +++ b/ui/media/css/single-gallery.css @@ -0,0 +1,9 @@ +body { + display: flex; + flex-direction: column; + align-items: center; +} + +p { + margin: 0px; +} \ No newline at end of file From 39459f14c5ad4f052b53bba78fc2c1e24c22f0bc Mon Sep 17 00:00:00 2001 From: ManInDark <61268856+ManInDark@users.noreply.github.com> Date: Thu, 10 Aug 2023 00:05:07 +0200 Subject: [PATCH 2/7] Mockup Page communication --- ui/easydiffusion/bucket_manager.py | 2 +- ui/media/js/main.js | 9 +++++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/ui/easydiffusion/bucket_manager.py b/ui/easydiffusion/bucket_manager.py index 9b7aeae1..e17a1c2a 100644 --- a/ui/easydiffusion/bucket_manager.py +++ b/ui/easydiffusion/bucket_manager.py @@ -116,7 +116,7 @@ def init(): try: image: GalleryImage = db.query(GalleryImage).filter(GalleryImage.path == image_path).first() head = "" - body = "" + image.htmlForm() + "" + body = "
" + image.htmlForm() + "" return Response(content="" + head + body + "", media_type="text/html") except Exception as e: print(e) diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 5beb094d..72cd72e8 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -3088,6 +3088,15 @@ let recentResolutionsValues = [] function galleryImage(item) { let div = document.createElement("div") let img = document.createElement("img") + img.addEventListener("click", (event) => { + let w; + w = window.open("/single_image?image_path=" + item.path, "_blank") + w.addEventListener("DOMContentLoaded", () => { + w.document.getElementById("button").addEventListener("click", () => { + document.title = "hi" + }) + }) + }) img.src = "/image/" + item.path img.dataset["request"] = JSON.stringify(item) From 4faa334bf601dbbb11b0cfc39431dc89af9289f9 Mon Sep 17 00:00:00 2001 From: ManInDark <61268856+ManInDark@users.noreply.github.com> Date: Thu, 10 Aug 2023 23:27:35 +0200 Subject: [PATCH 3/7] Styled up the opened tab --- ui/easydiffusion/bucket_manager.py | 2 +- ui/easydiffusion/easydb/mappings.py | 38 ++++++++++++++--------------- ui/media/css/single-gallery.css | 33 +++++++++++++++++++++++-- ui/media/js/main.js | 8 ++++-- 4 files changed, 57 insertions(+), 24 deletions(-) diff --git a/ui/easydiffusion/bucket_manager.py b/ui/easydiffusion/bucket_manager.py index e17a1c2a..34b8bd2f 100644 --- a/ui/easydiffusion/bucket_manager.py +++ b/ui/easydiffusion/bucket_manager.py @@ -116,7 +116,7 @@ def init(): try: image: GalleryImage = db.query(GalleryImage).filter(GalleryImage.path == image_path).first() head = "" - body = "
" + image.htmlForm() + "" + body = "
" + image.htmlForm() + "" return Response(content="" + head + body + "", media_type="text/html") except Exception as e: print(e) diff --git a/ui/easydiffusion/easydb/mappings.py b/ui/easydiffusion/easydb/mappings.py index 653539ad..a01b50de 100644 --- a/ui/easydiffusion/easydb/mappings.py +++ b/ui/easydiffusion/easydb/mappings.py @@ -25,31 +25,31 @@ class GalleryImage(Base): prompt = Column(String) negative_prompt = Column(String) time_created = Column(DateTime(timezone=True), server_default=func.now()) - nsfw = Column(String, server_default='unknown') + nsfw = Column(Boolean, server_default=None) def __repr__(self): return "" % ( self.path, self.seed, self.use_stable_diffusion_model, self.clip_skip, self.use_vae_model, self.sampler_name, self.width, self.height, self.num_inference_steps, self.guidance_scale, self.lora, self.use_hypernetwork_model, self.tiling, self.use_face_correction, self.use_upscale, self.prompt, self.negative_prompt) def htmlForm(self) -> str: - return "

Path: " + str(self.path) + "

" + \ - "Seed: " + str(self.seed) + "

" + \ - "Stable Diffusion Model: " + str(self.use_stable_diffusion_model) + "

" + \ - "Prompt: " + str(self.prompt) + "

" + \ - "Negative Prompt: " + str(self.negative_prompt) + "

" + \ - "Clip Skip: " + str(self.clip_skip) + "

" + \ - "VAE Model: " + str(self.use_vae_model) + "

" + \ - "Sampler: " + str(self.sampler_name) + "

" + \ - "Size: " + str(self.height) + "x" + str(self.width) + "

" + \ - "Inference Steps: " + str(self.num_inference_steps) + "

" + \ - "Guidance Scale: " + str(self.guidance_scale) + "

" + \ - "LoRA: " + str(self.lora) + "

" + \ - "Hypernetwork: " + str(self.use_hypernetwork_model) + "

" + \ - "Tiling: " + str(self.tiling) + "

" + \ - "Face Correction: " + str(self.use_face_correction) + "

" + \ - "Upscale: " + str(self.use_upscale) + "

" + \ - "Time Created: " + str(self.time_created) + "

" + \ - "NSFW: " + str(self.nsfw) + "

" + return "

Path: " + str(self.path) + "

" + \ + "

Seed: " + str(self.seed) + "

" + \ + "

Stable Diffusion Model: " + str(self.use_stable_diffusion_model) + "

" + \ + "

Prompt: " + str(self.prompt) + "

" + \ + "

Negative Prompt: " + str(self.negative_prompt) + "

" + \ + "

Clip Skip: " + str(self.clip_skip) + "

" + \ + "

VAE Model: " + str(self.use_vae_model) + "

" + \ + "

Sampler: " + str(self.sampler_name) + "

" + \ + "

Size: " + str(self.height) + "x" + str(self.width) + "

" + \ + "

Inference Steps: " + str(self.num_inference_steps) + "

" + \ + "

Guidance Scale: " + str(self.guidance_scale) + "

" + \ + "

LoRA: " + str(self.lora) + "

" + \ + "

Hypernetwork: " + str(self.use_hypernetwork_model) + "

" + \ + "

Tiling: " + str(self.tiling) + "

" + \ + "

Face Correction: " + str(self.use_face_correction) + "

" + \ + "

Upscale: " + str(self.use_upscale) + "

" + \ + "

Time Created: " + str(self.time_created) + "

" + \ + "

NSFW: " + str(self.nsfw) + "

" from easydiffusion.easydb.database import engine diff --git a/ui/media/css/single-gallery.css b/ui/media/css/single-gallery.css index dbaedfa1..24f22e47 100644 --- a/ui/media/css/single-gallery.css +++ b/ui/media/css/single-gallery.css @@ -1,9 +1,38 @@ +@import url("/media/css/themes.css"); +@import url("/media/css/main.css"); + body { display: flex; flex-direction: column; align-items: center; + background-color: var(--background-color1); } -p { - margin: 0px; +img { + border-radius: 5px; +} + +p, h1, h2, h3, h4, h5, h6 { + color: var(--text-color); + cursor: default; + margin: 6px; +} + +::-moz-selection { + /* Code for Firefox */ + color: none; + background: none; +} + +::selection { + color: none; + background: none; +} + +button { + margin: 8px; +} + +div { + margin: 16px; } \ No newline at end of file diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 72cd72e8..11011a20 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -3092,8 +3092,12 @@ function galleryImage(item) { let w; w = window.open("/single_image?image_path=" + item.path, "_blank") w.addEventListener("DOMContentLoaded", () => { - w.document.getElementById("button").addEventListener("click", () => { - document.title = "hi" + w.document.getElementsByTagName("body")[0].classList.add(themeField.value) + w.document.getElementById("use_these_settings").addEventListener("click", () => { + alert("use these settings") + }) + w.document.getElementById("use_as_input").addEventListener("click", () => { + alert("use as input") }) }) }) From 20792837130f693566971e0eae6d93e4cca03872 Mon Sep 17 00:00:00 2001 From: ManInDark <61268856+ManInDark@users.noreply.github.com> Date: Fri, 11 Aug 2023 21:32:20 +0200 Subject: [PATCH 4/7] Added cross page use these settings --- ui/easydiffusion/bucket_manager.py | 2 +- ui/easydiffusion/easydb/mappings.py | 25 +++++++++++++++++++++++++ ui/media/js/main.js | 2 +- 3 files changed, 27 insertions(+), 2 deletions(-) diff --git a/ui/easydiffusion/bucket_manager.py b/ui/easydiffusion/bucket_manager.py index 34b8bd2f..925ced27 100644 --- a/ui/easydiffusion/bucket_manager.py +++ b/ui/easydiffusion/bucket_manager.py @@ -116,7 +116,7 @@ def init(): try: image: GalleryImage = db.query(GalleryImage).filter(GalleryImage.path == image_path).first() head = "" - body = "
" + image.htmlForm() + "" + body = f"
" + image.htmlForm() + "" return Response(content="" + head + body + "", media_type="text/html") except Exception as e: print(e) diff --git a/ui/easydiffusion/easydb/mappings.py b/ui/easydiffusion/easydb/mappings.py index a01b50de..214a4c68 100644 --- a/ui/easydiffusion/easydb/mappings.py +++ b/ui/easydiffusion/easydb/mappings.py @@ -50,6 +50,31 @@ class GalleryImage(Base): "

Upscale: " + str(self.use_upscale) + "

" + \ "

Time Created: " + str(self.time_created) + "

" + \ "

NSFW: " + str(self.nsfw) + "

" + + def settingsJSON(self) -> str: + # some are still missing: prompt strength, lora + json = { + "numOutputsTotal": 1, + "seed": self.seed, + "reqBody": { + "prompt": self.prompt, + "negative_prompt": self.negative_prompt, + "width": self.width, + "height": self.height, + "seed": self.seed, + "num_inference_steps": self.num_inference_steps, + "guidance_scale": self.guidance_scale, + "use_face_correction": self.use_face_correction, + "use_upscale": self.use_upscale, + "sampler_name": self.sampler_name, + "use_stable_diffusion_model": self.use_stable_diffusion_model, + "clip_skip": self.clip_skip, + "tiling": self.tiling, + "use_vae_model": self.use_vae_model, + "use_hypernetwork_model": self.use_hypernetwork_model + }} + from json import dumps + return dumps(json) from easydiffusion.easydb.database import engine diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 11011a20..d54913fa 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -3094,7 +3094,7 @@ function galleryImage(item) { w.addEventListener("DOMContentLoaded", () => { w.document.getElementsByTagName("body")[0].classList.add(themeField.value) w.document.getElementById("use_these_settings").addEventListener("click", () => { - alert("use these settings") + restoreTaskToUI(JSON.parse(w.document.getElementById("use_these_settings").getAttribute("json"))) }) w.document.getElementById("use_as_input").addEventListener("click", () => { alert("use as input") From 216ecce506994c76c100d4e27fe57e5121c6e8ec Mon Sep 17 00:00:00 2001 From: ManInDark <61268856+ManInDark@users.noreply.github.com> Date: Fri, 11 Aug 2023 21:40:49 +0200 Subject: [PATCH 5/7] The use as Input button confuses me, that's why it is now disabled --- ui/easydiffusion/bucket_manager.py | 2 +- ui/media/css/single-gallery.css | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/ui/easydiffusion/bucket_manager.py b/ui/easydiffusion/bucket_manager.py index 925ced27..f14c7bc0 100644 --- a/ui/easydiffusion/bucket_manager.py +++ b/ui/easydiffusion/bucket_manager.py @@ -116,7 +116,7 @@ def init(): try: image: GalleryImage = db.query(GalleryImage).filter(GalleryImage.path == image_path).first() head = "" - body = f"
" + image.htmlForm() + "" + body = f"
" + image.htmlForm() + "" return Response(content="" + head + body + "", media_type="text/html") except Exception as e: print(e) diff --git a/ui/media/css/single-gallery.css b/ui/media/css/single-gallery.css index 24f22e47..2427bf0b 100644 --- a/ui/media/css/single-gallery.css +++ b/ui/media/css/single-gallery.css @@ -35,4 +35,8 @@ button { div { margin: 16px; +} + +:disabled { + color: gray; } \ No newline at end of file From ff75adab7f3f5e36fd3775a58eadaef2421a1c55 Mon Sep 17 00:00:00 2001 From: ManInDark <61268856+ManInDark@users.noreply.github.com> Date: Sat, 12 Aug 2023 16:23:36 +0200 Subject: [PATCH 6/7] Implemented JeLuF's suggestion & added pagination basics --- ui/easydiffusion/bucket_manager.py | 3 ++- ui/index.html | 1 + ui/media/js/main.js | 11 ++++++----- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/ui/easydiffusion/bucket_manager.py b/ui/easydiffusion/bucket_manager.py index f14c7bc0..e8d65a48 100644 --- a/ui/easydiffusion/bucket_manager.py +++ b/ui/easydiffusion/bucket_manager.py @@ -100,13 +100,14 @@ def init(): raise HTTPException(status_code=404, detail="Image not found") @server_api.get("/all_images") - def get_all_images(prompt: str = "", model: str = "", db: Session = Depends(get_db)): + def get_all_images(prompt: str = "", model: str = "", page = 0, db: Session = Depends(get_db)): from easydiffusion.easydb.mappings import GalleryImage images = db.query(GalleryImage) if prompt != "": images = images.filter(GalleryImage.path.like("%"+prompt+"%")) if model != "": images = images.filter(GalleryImage.use_stable_diffusion_model.like("%"+model+"%")) + images = images.offset(page*50).limit(50) return images.all() @server_api.get("/single_image") diff --git a/ui/index.html b/ui/index.html index 9aeb7ab2..5676ab5c 100644 --- a/ui/index.html +++ b/ui/index.html @@ -520,6 +520,7 @@
diff --git a/ui/media/js/main.js b/ui/media/js/main.js index d54913fa..34f84399 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -3110,12 +3110,13 @@ function galleryImage(item) { function refreshGallery() { let container = document.getElementById("imagecontainer") - let promptsearchfield = document.getElementById("gallery-prompt-search").value - let promptsearch = promptsearchfield.length > 0 ? "prompt=" + promptsearchfield + "&" : "" - let modelsearchfield = document.getElementById("gallery-model-search").value - let modelsearch = modelsearchfield.length > 0 ? "model=" + modelsearchfield + "&" : "" + params = new URLSearchParams({ + prompt: document.getElementById("gallery-prompt-search").value, + model: document.getElementById("gallery-model-search").value, + page: document.getElementById("gallery-page").value + }) container.innerHTML="" - fetch('/all_images?' + promptsearch + modelsearch) + fetch('/all_images?' + params) .then(response => response.json()) .then(json => { console.log(json) From 680b290ae7011eb559fd34cceceb6e5707af8b4b Mon Sep 17 00:00:00 2001 From: ManInDark <61268856+ManInDark@users.noreply.github.com> Date: Sat, 12 Aug 2023 17:08:33 +0200 Subject: [PATCH 7/7] Improved pagination --- ui/easydiffusion/bucket_manager.py | 6 +++--- ui/index.html | 7 +++++-- ui/media/js/main.js | 26 +++++++++++++++++++++----- 3 files changed, 29 insertions(+), 10 deletions(-) diff --git a/ui/easydiffusion/bucket_manager.py b/ui/easydiffusion/bucket_manager.py index e8d65a48..41bf09b6 100644 --- a/ui/easydiffusion/bucket_manager.py +++ b/ui/easydiffusion/bucket_manager.py @@ -100,14 +100,14 @@ def init(): raise HTTPException(status_code=404, detail="Image not found") @server_api.get("/all_images") - def get_all_images(prompt: str = "", model: str = "", page = 0, db: Session = Depends(get_db)): + def get_all_images(prompt: str = "", model: str = "", page: int = 0, images_per_page: int = 50, db: Session = Depends(get_db)): from easydiffusion.easydb.mappings import GalleryImage - images = db.query(GalleryImage) + images = db.query(GalleryImage).order_by(GalleryImage.time_created.desc()) if prompt != "": images = images.filter(GalleryImage.path.like("%"+prompt+"%")) if model != "": images = images.filter(GalleryImage.use_stable_diffusion_model.like("%"+model+"%")) - images = images.offset(page*50).limit(50) + images = images.offset(page*images_per_page).limit(images_per_page) return images.all() @server_api.get("/single_image") diff --git a/ui/index.html b/ui/index.html index 5676ab5c..40beed92 100644 --- a/ui/index.html +++ b/ui/index.html @@ -518,10 +518,13 @@
diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 34f84399..edacd977 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -3110,20 +3110,36 @@ function galleryImage(item) { function refreshGallery() { let container = document.getElementById("imagecontainer") - params = new URLSearchParams({ + let params = new URLSearchParams({ prompt: document.getElementById("gallery-prompt-search").value, model: document.getElementById("gallery-model-search").value, page: document.getElementById("gallery-page").value }) - container.innerHTML="" + container.innerHTML = "" fetch('/all_images?' + params) .then(response => response.json()) .then(json => { - console.log(json) - json.forEach( item => { + if (document.getElementById("gallery-page").value > 0 && json.length == 0) { + decrementGalleryPage() + alert("No more images") + return + } + json.forEach(item => { container.appendChild(galleryImage(item)) }) - }) + }) + document.getElementById("gallery-refresh").innerText = "Refresh" +} + +function decrementGalleryPage() { + let page = Math.max(document.getElementById("gallery-page").value - 1, 0) + document.getElementById("gallery-page").value = page + refreshGallery() +} + +function incrementGalleryPage() { + document.getElementById("gallery-page").value++ + refreshGallery() } function gallery_keyDown_handler(event) {