From eb58bf0a4d9b662027aa0463c9a3902de41d0a5b Mon Sep 17 00:00:00 2001 From: JeLuF Date: Tue, 25 Jul 2023 20:30:23 +0200 Subject: [PATCH 01/61] sqlalchemy --- ui/easydiffusion/app.py | 1 + ui/easydiffusion/server.py | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/ui/easydiffusion/app.py b/ui/easydiffusion/app.py index e3de614d..923c0f35 100644 --- a/ui/easydiffusion/app.py +++ b/ui/easydiffusion/app.py @@ -36,6 +36,7 @@ SD_UI_DIR = os.getenv("SD_UI_PATH", None) CONFIG_DIR = os.path.abspath(os.path.join(SD_UI_DIR, "..", "scripts")) MODELS_DIR = os.path.abspath(os.path.join(SD_DIR, "..", "models")) +BUCKET_DIR = os.path.abspath(os.path.join(SD_DIR, "..", "bucket")) USER_PLUGINS_DIR = os.path.abspath(os.path.join(SD_DIR, "..", "plugins")) CORE_PLUGINS_DIR = os.path.abspath(os.path.join(SD_UI_DIR, "plugins")) diff --git a/ui/easydiffusion/server.py b/ui/easydiffusion/server.py index df788b0c..4705d112 100644 --- a/ui/easydiffusion/server.py +++ b/ui/easydiffusion/server.py @@ -8,7 +8,7 @@ import os import traceback from typing import List, Union -from easydiffusion import app, model_manager, task_manager +from easydiffusion import app, model_manager, task_manager, bucket_manager from easydiffusion.types import GenerateImageRequest, MergeRequest, TaskData from easydiffusion.utils import log from fastapi import FastAPI, HTTPException From 4b27b45e4ca5c0ffabe292c9cbffc18bbb393672 Mon Sep 17 00:00:00 2001 From: JeLuF Date: Tue, 25 Jul 2023 20:30:35 +0200 Subject: [PATCH 02/61] sqlalchemy --- ui/easydiffusion/bucket_manager.py | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 ui/easydiffusion/bucket_manager.py diff --git a/ui/easydiffusion/bucket_manager.py b/ui/easydiffusion/bucket_manager.py new file mode 100644 index 00000000..e24b0cc0 --- /dev/null +++ b/ui/easydiffusion/bucket_manager.py @@ -0,0 +1,14 @@ +import os +from easydiffusion import app + +from sqlalchemy import create_engine +from sqlalchemy.ext.declarative import declarative_base +from sqlalchemy.orm import sessionmaker + +SQLALCHEMY_DATABASE_URL = "sqlite:///"+os.path.join(app.BUCKET_DIR, "bucket.db") +print("## SQLALCHEMY_DATABASE_URL = ", SQLALCHEMY_DATABASE_URL) + +engine = create_engine(SQLALCHEMY_DATABASE_URL, connect_args={"check_same_thread": False}) +SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine) + +Base = declarative_base() From 646aeac85839dbffdec2b5922a0770408ef734ab Mon Sep 17 00:00:00 2001 From: JeLuF Date: Wed, 26 Jul 2023 01:16:27 +0200 Subject: [PATCH 03/61] sqlalchemy bucket v1 --- scripts/check_modules.py | 1 + ui/easydiffusion/bucket_crud.py | 36 +++++++++++++++++ ui/easydiffusion/bucket_database.py | 15 +++++++ ui/easydiffusion/bucket_manager.py | 63 ++++++++++++++++++++++++----- ui/easydiffusion/bucket_models.py | 25 ++++++++++++ ui/easydiffusion/bucket_schemas.py | 37 +++++++++++++++++ ui/easydiffusion/server.py | 2 +- ui/main.py | 3 +- 8 files changed, 170 insertions(+), 12 deletions(-) create mode 100644 ui/easydiffusion/bucket_crud.py create mode 100644 ui/easydiffusion/bucket_database.py create mode 100644 ui/easydiffusion/bucket_models.py create mode 100644 ui/easydiffusion/bucket_schemas.py diff --git a/scripts/check_modules.py b/scripts/check_modules.py index 03e50db0..0f50e842 100644 --- a/scripts/check_modules.py +++ b/scripts/check_modules.py @@ -25,6 +25,7 @@ modules_to_check = { "fastapi": "0.85.1", "pycloudflared": "0.2.0", "ruamel.yaml": "0.17.21", + "sqlalchemy": "2.0.19", # "xformers": "0.0.16", } modules_to_log = ["torch", "torchvision", "sdkit", "stable-diffusion-sdkit"] diff --git a/ui/easydiffusion/bucket_crud.py b/ui/easydiffusion/bucket_crud.py new file mode 100644 index 00000000..ece14fcc --- /dev/null +++ b/ui/easydiffusion/bucket_crud.py @@ -0,0 +1,36 @@ +from sqlalchemy.orm import Session + +from easydiffusion import bucket_models, bucket_schemas + + +def get_bucket(db: Session, bucket_id: int): + return db.query(bucket_models.Bucket).filter(bucket_models.Bucket.id == bucket_id).first() + + +def get_bucket_by_path(db: Session, path: str): + return db.query(bucket_models.Bucket).filter(bucket_models.Bucket.path == path).first() + + +def get_buckets(db: Session, skip: int = 0, limit: int = 100): + return db.query(bucket_models.Bucket).offset(skip).limit(limit).all() + + +def create_bucket(db: Session, bucket: bucket_schemas.BucketCreate): + db_bucket = bucket_models.Bucket(path=bucket.path) + db.add(db_bucket) + db.commit() + db.refresh(db_bucket) + return db_bucket + + +def get_bucketfiles(db: Session, skip: int = 0, limit: int = 100): + return db.query(bucket_models.BucketFile).offset(skip).limit(limit).all() + + +def create_bucketfile(db: Session, bucketfile: bucket_schemas.BucketFileCreate, bucket_id: int): + db_bucketfile = bucket_models.BucketFile(**bucketfile.dict(), bucket_id=bucket_id) + db.add(db_bucketfile) + db.commit() + db.refresh(db_bucketfile) + return db_bucketfile + diff --git a/ui/easydiffusion/bucket_database.py b/ui/easydiffusion/bucket_database.py new file mode 100644 index 00000000..e3c92845 --- /dev/null +++ b/ui/easydiffusion/bucket_database.py @@ -0,0 +1,15 @@ +import os +from easydiffusion import app + +from sqlalchemy import create_engine +from sqlalchemy.ext.declarative import declarative_base +from sqlalchemy.orm import sessionmaker + +os.makedirs(app.BUCKET_DIR, exist_ok=True) +SQLALCHEMY_DATABASE_URL = "sqlite:///"+os.path.join(app.BUCKET_DIR, "bucket.db") +print("## SQLALCHEMY_DATABASE_URL = ", SQLALCHEMY_DATABASE_URL) + +engine = create_engine(SQLALCHEMY_DATABASE_URL, connect_args={"check_same_thread": False}) +SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine) + +BucketBase = declarative_base() diff --git a/ui/easydiffusion/bucket_manager.py b/ui/easydiffusion/bucket_manager.py index e24b0cc0..0985573f 100644 --- a/ui/easydiffusion/bucket_manager.py +++ b/ui/easydiffusion/bucket_manager.py @@ -1,14 +1,57 @@ -import os -from easydiffusion import app +from typing import List -from sqlalchemy import create_engine -from sqlalchemy.ext.declarative import declarative_base -from sqlalchemy.orm import sessionmaker +from fastapi import Depends, FastAPI, HTTPException +from sqlalchemy.orm import Session -SQLALCHEMY_DATABASE_URL = "sqlite:///"+os.path.join(app.BUCKET_DIR, "bucket.db") -print("## SQLALCHEMY_DATABASE_URL = ", SQLALCHEMY_DATABASE_URL) +from easydiffusion import bucket_crud, bucket_models, bucket_schemas +from easydiffusion.bucket_database import SessionLocal, engine -engine = create_engine(SQLALCHEMY_DATABASE_URL, connect_args={"check_same_thread": False}) -SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine) -Base = declarative_base() +def init(): + from easydiffusion.server import server_api + + bucket_models.BucketBase.metadata.create_all(bind=engine) + + + # Dependency + def get_db(): + db = SessionLocal() + try: + yield db + finally: + db.close() + + + @server_api.post("/buckets/", response_model=bucket_schemas.Bucket) + def create_bucket(bucket: bucket_schemas.BucketCreate, db: Session = Depends(get_db)): + db_bucket = bucket_crud.get_bucket_by_path(db, path=bucket.path) + if db_bucket: + raise HTTPException(status_code=400, detail="Bucket already exists") + return bucket_crud.create_bucket(db=db, bucket=bucket) + + @server_api.get("/buckets/", response_model=List[bucket_schemas.Bucket]) + def read_bucket(skip: int = 0, limit: int = 100, db: Session = Depends(get_db)): + buckets = bucket_crud.get_buckets(db, skip=skip, limit=limit) + return buckets + + + @server_api.get("/buckets/{bucket_id}", response_model=bucket_schemas.Bucket) + def read_bucket(bucket_id: int, db: Session = Depends(get_db)): + db_bucket = bucket_crud.get_bucket(db, bucket_id=bucket_id) + if db_bucket is None: + raise HTTPException(status_code=404, detail="Bucket not found") + return db_bucket + + + @server_api.post("/buckets/{bucket_id}/items/", response_model=bucket_schemas.BucketFile) + def create_bucketfile_in_bucket( + bucket_id: int, bucketfile: bucket_schemas.BucketFileCreate, db: Session = Depends(get_db) + ): + return bucket_crud.create_bucketfile(db=db, bucketfile=bucketfile, bucket_id=bucket_id) + + + @server_api.get("/bucketfiles/", response_model=List[bucket_schemas.BucketFile]) + def read_bucketfiles(skip: int = 0, limit: int = 100, db: Session = Depends(get_db)): + bucketfiles = bucket_crud.get_bucketfiles(db, skip=skip, limit=limit) + return bucketfiles + diff --git a/ui/easydiffusion/bucket_models.py b/ui/easydiffusion/bucket_models.py new file mode 100644 index 00000000..3ede1a36 --- /dev/null +++ b/ui/easydiffusion/bucket_models.py @@ -0,0 +1,25 @@ +from sqlalchemy import Boolean, Column, ForeignKey, Integer, String, BLOB +from sqlalchemy.orm import relationship + +from easydiffusion.bucket_database import BucketBase + + +class Bucket(BucketBase): + __tablename__ = "bucket" + + id = Column(Integer, primary_key=True, index=True) + path = Column(String, unique=True, index=True) + + bucketfiles = relationship("BucketFile", back_populates="bucket") + + +class BucketFile(BucketBase): + __tablename__ = "bucketfile" + + id = Column(Integer, primary_key=True, index=True) + filename = Column(String, index=True) + data = Column(BLOB, index=False) + bucket_id = Column(Integer, ForeignKey("bucket.id")) + + bucket = relationship("Bucket", back_populates="bucketfiles") + diff --git a/ui/easydiffusion/bucket_schemas.py b/ui/easydiffusion/bucket_schemas.py new file mode 100644 index 00000000..9f7e2377 --- /dev/null +++ b/ui/easydiffusion/bucket_schemas.py @@ -0,0 +1,37 @@ +from typing import List, Union + +from pydantic import BaseModel + + +class BucketFileBase(BaseModel): + filename: str + data: bytes + + +class BucketFileCreate(BucketFileBase): + pass + + +class BucketFile(BucketFileBase): + id: int + bucket_id: int + + class Config: + orm_mode = True + + +class BucketBase(BaseModel): + path: str + + +class BucketCreate(BucketBase): + pass + + +class Bucket(BucketBase): + id: int + bucketfiles: List[BucketFile] = [] + + class Config: + orm_mode = True + diff --git a/ui/easydiffusion/server.py b/ui/easydiffusion/server.py index 4705d112..df788b0c 100644 --- a/ui/easydiffusion/server.py +++ b/ui/easydiffusion/server.py @@ -8,7 +8,7 @@ import os import traceback from typing import List, Union -from easydiffusion import app, model_manager, task_manager, bucket_manager +from easydiffusion import app, model_manager, task_manager from easydiffusion.types import GenerateImageRequest, MergeRequest, TaskData from easydiffusion.utils import log from fastapi import FastAPI, HTTPException diff --git a/ui/main.py b/ui/main.py index f5998622..a7568ba6 100644 --- a/ui/main.py +++ b/ui/main.py @@ -1,4 +1,4 @@ -from easydiffusion import model_manager, app, server +from easydiffusion import model_manager, app, server, bucket_manager from easydiffusion.server import server_api # required for uvicorn server.init() @@ -7,6 +7,7 @@ server.init() model_manager.init() app.init() app.init_render_threads() +bucket_manager.init() # start the browser ui app.open_browser() From 97035a54edccf28c5a8fb026c93e5ea4b3da7cf3 Mon Sep 17 00:00:00 2001 From: JeLuF Date: Thu, 27 Jul 2023 21:56:36 +0200 Subject: [PATCH 04/61] Bucket API --- scripts/check_modules.py | 1 + ui/easydiffusion/bucket_crud.py | 5 +- ui/easydiffusion/bucket_manager.py | 76 +++++++++++++++++++++++++++++- ui/easydiffusion/bucket_models.py | 6 +-- ui/easydiffusion/bucket_schemas.py | 1 - 5 files changed, 81 insertions(+), 8 deletions(-) diff --git a/scripts/check_modules.py b/scripts/check_modules.py index 0f50e842..c2713c64 100644 --- a/scripts/check_modules.py +++ b/scripts/check_modules.py @@ -26,6 +26,7 @@ modules_to_check = { "pycloudflared": "0.2.0", "ruamel.yaml": "0.17.21", "sqlalchemy": "2.0.19", + "python-multipart": "0.0.6", # "xformers": "0.0.16", } modules_to_log = ["torch", "torchvision", "sdkit", "stable-diffusion-sdkit"] diff --git a/ui/easydiffusion/bucket_crud.py b/ui/easydiffusion/bucket_crud.py index ece14fcc..5dada176 100644 --- a/ui/easydiffusion/bucket_crud.py +++ b/ui/easydiffusion/bucket_crud.py @@ -29,8 +29,9 @@ def get_bucketfiles(db: Session, skip: int = 0, limit: int = 100): def create_bucketfile(db: Session, bucketfile: bucket_schemas.BucketFileCreate, bucket_id: int): db_bucketfile = bucket_models.BucketFile(**bucketfile.dict(), bucket_id=bucket_id) - db.add(db_bucketfile) + db.merge(db_bucketfile) db.commit() - db.refresh(db_bucketfile) + from pprint import pprint + db_bucketfile = db.query(bucket_models.BucketFile).filter(bucket_models.BucketFile.bucket_id==bucket_id, bucket_models.BucketFile.filename==bucketfile.filename).first() return db_bucketfile diff --git a/ui/easydiffusion/bucket_manager.py b/ui/easydiffusion/bucket_manager.py index 0985573f..58d0e30c 100644 --- a/ui/easydiffusion/bucket_manager.py +++ b/ui/easydiffusion/bucket_manager.py @@ -1,11 +1,31 @@ from typing import List -from fastapi import Depends, FastAPI, HTTPException +from fastapi import Depends, FastAPI, HTTPException, Response, File from sqlalchemy.orm import Session from easydiffusion import bucket_crud, bucket_models, bucket_schemas from easydiffusion.bucket_database import SessionLocal, engine +from requests.compat import urlparse + +import base64, json + +MIME_TYPES = { + "jpg": "image/jpeg", + "jpeg": "image/jpeg", + "gif": "image/gif", + "png": "image/png", + "webp": "image/webp", + "js": "text/javascript", + "htm": "text/html", + "html": "text/html", + "css": "text/css", + "json": "application/json", + "mjs": "application/json", + "yaml": "application/yaml", + "svg": "image/svg+xml", + "txt": "text/plain", +} def init(): from easydiffusion.server import server_api @@ -21,6 +41,42 @@ def init(): finally: db.close() + @server_api.get("/bucket/{obj_path:path}") + def bucket_get_object(obj_path: str, db: Session = Depends(get_db)): + filename = get_filename_from_url(obj_path) + path = get_path_from_url(obj_path) + + if filename==None: + bucket = bucket_crud.get_bucket_by_path(db, path=path) + if bucket == None: + raise HTTPException(status_code=404, detail="Bucket not found") + bucketfiles = db.query(bucket_models.BucketFile).with_entities(bucket_models.BucketFile.filename).filter(bucket_models.BucketFile.bucket_id == bucket.id).all() + bucketfiles = [ x.filename for x in bucketfiles ] + return bucketfiles + + else: + bucket_id = bucket_crud.get_bucket_by_path(db, path).id + bucketfile = db.query(bucket_models.BucketFile).filter(bucket_models.BucketFile.bucket_id == bucket_id, bucket_models.BucketFile.filename == filename).first() + + suffix = get_suffix_from_filename(filename) + + return Response(content=bucketfile.data, media_type=MIME_TYPES.get(suffix, "application/octet-stream")) + + @server_api.post("/bucket/{obj_path:path}") + def bucket_post_object(obj_path: str, file: bytes = File(), db: Session = Depends(get_db)): + filename = get_filename_from_url(obj_path) + path = get_path_from_url(obj_path) + bucket = bucket_crud.get_bucket_by_path(db, path) + + if bucket == None: + bucket_id = bucket_crud.create_bucket(db=db, bucket=bucket_schemas.BucketCreate(path=path)) + else: + bucket_id = bucket.id + + bucketfile = bucket_schemas.BucketFileCreate(filename=filename, data=file) + result = bucket_crud.create_bucketfile(db=db, bucketfile=bucketfile, bucket_id=bucket_id) + result.data = base64.encodestring(result.data) + return result @server_api.post("/buckets/", response_model=bucket_schemas.Bucket) def create_bucket(bucket: bucket_schemas.BucketCreate, db: Session = Depends(get_db)): @@ -47,7 +103,10 @@ def init(): def create_bucketfile_in_bucket( bucket_id: int, bucketfile: bucket_schemas.BucketFileCreate, db: Session = Depends(get_db) ): - return bucket_crud.create_bucketfile(db=db, bucketfile=bucketfile, bucket_id=bucket_id) + bucketfile.data = base64.decodestring(bucketfile.data) + result = bucket_crud.create_bucketfile(db=db, bucketfile=bucketfile, bucket_id=bucket_id) + result.data = base64.encodestring(result.data) + return result @server_api.get("/bucketfiles/", response_model=List[bucket_schemas.BucketFile]) @@ -55,3 +114,16 @@ def init(): bucketfiles = bucket_crud.get_bucketfiles(db, skip=skip, limit=limit) return bucketfiles + +def get_filename_from_url(url): + path = urlparse(url).path + name = path[path.rfind('/')+1:] + return name or None + +def get_path_from_url(url): + path = urlparse(url).path + path = path[0:path.rfind('/')] + return path or None + +def get_suffix_from_filename(filename): + return filename[filename.rfind('.')+1:] diff --git a/ui/easydiffusion/bucket_models.py b/ui/easydiffusion/bucket_models.py index 3ede1a36..933f8140 100644 --- a/ui/easydiffusion/bucket_models.py +++ b/ui/easydiffusion/bucket_models.py @@ -16,10 +16,10 @@ class Bucket(BucketBase): class BucketFile(BucketBase): __tablename__ = "bucketfile" - id = Column(Integer, primary_key=True, index=True) - filename = Column(String, index=True) + filename = Column(String, index=True, primary_key=True) + bucket_id = Column(Integer, ForeignKey("bucket.id"), primary_key=True) + data = Column(BLOB, index=False) - bucket_id = Column(Integer, ForeignKey("bucket.id")) bucket = relationship("Bucket", back_populates="bucketfiles") diff --git a/ui/easydiffusion/bucket_schemas.py b/ui/easydiffusion/bucket_schemas.py index 9f7e2377..68bc04e2 100644 --- a/ui/easydiffusion/bucket_schemas.py +++ b/ui/easydiffusion/bucket_schemas.py @@ -13,7 +13,6 @@ class BucketFileCreate(BucketFileBase): class BucketFile(BucketFileBase): - id: int bucket_id: int class Config: From 5f736368c8ce2d685a2ed94201adb9f0e54ad752 Mon Sep 17 00:00:00 2001 From: JeLuF Date: Thu, 27 Jul 2023 22:44:30 +0200 Subject: [PATCH 05/61] Move easydb files to its own folders --- ui/easydiffusion/bucket_crud.py | 37 ------------- ui/easydiffusion/bucket_manager.py | 54 +++++-------------- ui/easydiffusion/easydb/crud.py | 25 +++++++++ .../database.py} | 0 .../{bucket_models.py => easydb/models.py} | 2 +- .../{bucket_schemas.py => easydb/schemas.py} | 0 6 files changed, 40 insertions(+), 78 deletions(-) delete mode 100644 ui/easydiffusion/bucket_crud.py create mode 100644 ui/easydiffusion/easydb/crud.py rename ui/easydiffusion/{bucket_database.py => easydb/database.py} (100%) rename ui/easydiffusion/{bucket_models.py => easydb/models.py} (92%) rename ui/easydiffusion/{bucket_schemas.py => easydb/schemas.py} (100%) diff --git a/ui/easydiffusion/bucket_crud.py b/ui/easydiffusion/bucket_crud.py deleted file mode 100644 index 5dada176..00000000 --- a/ui/easydiffusion/bucket_crud.py +++ /dev/null @@ -1,37 +0,0 @@ -from sqlalchemy.orm import Session - -from easydiffusion import bucket_models, bucket_schemas - - -def get_bucket(db: Session, bucket_id: int): - return db.query(bucket_models.Bucket).filter(bucket_models.Bucket.id == bucket_id).first() - - -def get_bucket_by_path(db: Session, path: str): - return db.query(bucket_models.Bucket).filter(bucket_models.Bucket.path == path).first() - - -def get_buckets(db: Session, skip: int = 0, limit: int = 100): - return db.query(bucket_models.Bucket).offset(skip).limit(limit).all() - - -def create_bucket(db: Session, bucket: bucket_schemas.BucketCreate): - db_bucket = bucket_models.Bucket(path=bucket.path) - db.add(db_bucket) - db.commit() - db.refresh(db_bucket) - return db_bucket - - -def get_bucketfiles(db: Session, skip: int = 0, limit: int = 100): - return db.query(bucket_models.BucketFile).offset(skip).limit(limit).all() - - -def create_bucketfile(db: Session, bucketfile: bucket_schemas.BucketFileCreate, bucket_id: int): - db_bucketfile = bucket_models.BucketFile(**bucketfile.dict(), bucket_id=bucket_id) - db.merge(db_bucketfile) - db.commit() - from pprint import pprint - db_bucketfile = db.query(bucket_models.BucketFile).filter(bucket_models.BucketFile.bucket_id==bucket_id, bucket_models.BucketFile.filename==bucketfile.filename).first() - return db_bucketfile - diff --git a/ui/easydiffusion/bucket_manager.py b/ui/easydiffusion/bucket_manager.py index 58d0e30c..f587bc7f 100644 --- a/ui/easydiffusion/bucket_manager.py +++ b/ui/easydiffusion/bucket_manager.py @@ -3,8 +3,8 @@ from typing import List from fastapi import Depends, FastAPI, HTTPException, Response, File from sqlalchemy.orm import Session -from easydiffusion import bucket_crud, bucket_models, bucket_schemas -from easydiffusion.bucket_database import SessionLocal, engine +from easydiffusion.easydb import crud, models, schemas +from easydiffusion.easydb.database import SessionLocal, engine from requests.compat import urlparse @@ -30,7 +30,7 @@ MIME_TYPES = { def init(): from easydiffusion.server import server_api - bucket_models.BucketBase.metadata.create_all(bind=engine) + models.BucketBase.metadata.create_all(bind=engine) # Dependency @@ -47,16 +47,16 @@ def init(): path = get_path_from_url(obj_path) if filename==None: - bucket = bucket_crud.get_bucket_by_path(db, path=path) + bucket = crud.get_bucket_by_path(db, path=path) if bucket == None: raise HTTPException(status_code=404, detail="Bucket not found") - bucketfiles = db.query(bucket_models.BucketFile).with_entities(bucket_models.BucketFile.filename).filter(bucket_models.BucketFile.bucket_id == bucket.id).all() + bucketfiles = db.query(models.BucketFile).with_entities(models.BucketFile.filename).filter(models.BucketFile.bucket_id == bucket.id).all() bucketfiles = [ x.filename for x in bucketfiles ] return bucketfiles else: - bucket_id = bucket_crud.get_bucket_by_path(db, path).id - bucketfile = db.query(bucket_models.BucketFile).filter(bucket_models.BucketFile.bucket_id == bucket_id, bucket_models.BucketFile.filename == filename).first() + bucket_id = crud.get_bucket_by_path(db, path).id + bucketfile = db.query(models.BucketFile).filter(models.BucketFile.bucket_id == bucket_id, models.BucketFile.filename == filename).first() suffix = get_suffix_from_filename(filename) @@ -66,55 +66,29 @@ def init(): def bucket_post_object(obj_path: str, file: bytes = File(), db: Session = Depends(get_db)): filename = get_filename_from_url(obj_path) path = get_path_from_url(obj_path) - bucket = bucket_crud.get_bucket_by_path(db, path) + bucket = crud.get_bucket_by_path(db, path) if bucket == None: - bucket_id = bucket_crud.create_bucket(db=db, bucket=bucket_schemas.BucketCreate(path=path)) + bucket_id = crud.create_bucket(db=db, bucket=schemas.BucketCreate(path=path)) else: bucket_id = bucket.id - bucketfile = bucket_schemas.BucketFileCreate(filename=filename, data=file) - result = bucket_crud.create_bucketfile(db=db, bucketfile=bucketfile, bucket_id=bucket_id) + bucketfile = schemas.BucketFileCreate(filename=filename, data=file) + result = crud.create_bucketfile(db=db, bucketfile=bucketfile, bucket_id=bucket_id) result.data = base64.encodestring(result.data) return result - @server_api.post("/buckets/", response_model=bucket_schemas.Bucket) - def create_bucket(bucket: bucket_schemas.BucketCreate, db: Session = Depends(get_db)): - db_bucket = bucket_crud.get_bucket_by_path(db, path=bucket.path) - if db_bucket: - raise HTTPException(status_code=400, detail="Bucket already exists") - return bucket_crud.create_bucket(db=db, bucket=bucket) - @server_api.get("/buckets/", response_model=List[bucket_schemas.Bucket]) - def read_bucket(skip: int = 0, limit: int = 100, db: Session = Depends(get_db)): - buckets = bucket_crud.get_buckets(db, skip=skip, limit=limit) - return buckets - - - @server_api.get("/buckets/{bucket_id}", response_model=bucket_schemas.Bucket) - def read_bucket(bucket_id: int, db: Session = Depends(get_db)): - db_bucket = bucket_crud.get_bucket(db, bucket_id=bucket_id) - if db_bucket is None: - raise HTTPException(status_code=404, detail="Bucket not found") - return db_bucket - - - @server_api.post("/buckets/{bucket_id}/items/", response_model=bucket_schemas.BucketFile) + @server_api.post("/buckets/{bucket_id}/items/", response_model=schemas.BucketFile) def create_bucketfile_in_bucket( - bucket_id: int, bucketfile: bucket_schemas.BucketFileCreate, db: Session = Depends(get_db) + bucket_id: int, bucketfile: schemas.BucketFileCreate, db: Session = Depends(get_db) ): bucketfile.data = base64.decodestring(bucketfile.data) - result = bucket_crud.create_bucketfile(db=db, bucketfile=bucketfile, bucket_id=bucket_id) + result = crud.create_bucketfile(db=db, bucketfile=bucketfile, bucket_id=bucket_id) result.data = base64.encodestring(result.data) return result - @server_api.get("/bucketfiles/", response_model=List[bucket_schemas.BucketFile]) - def read_bucketfiles(skip: int = 0, limit: int = 100, db: Session = Depends(get_db)): - bucketfiles = bucket_crud.get_bucketfiles(db, skip=skip, limit=limit) - return bucketfiles - - def get_filename_from_url(url): path = urlparse(url).path name = path[path.rfind('/')+1:] diff --git a/ui/easydiffusion/easydb/crud.py b/ui/easydiffusion/easydb/crud.py new file mode 100644 index 00000000..7550a52a --- /dev/null +++ b/ui/easydiffusion/easydb/crud.py @@ -0,0 +1,25 @@ +from sqlalchemy.orm import Session + +from easydiffusion.easydb import models, schemas + + +def get_bucket_by_path(db: Session, path: str): + return db.query(models.Bucket).filter(models.Bucket.path == path).first() + + +def create_bucket(db: Session, bucket: schemas.BucketCreate): + db_bucket = models.Bucket(path=bucket.path) + db.add(db_bucket) + db.commit() + db.refresh(db_bucket) + return db_bucket + + +def create_bucketfile(db: Session, bucketfile: schemas.BucketFileCreate, bucket_id: int): + db_bucketfile = models.BucketFile(**bucketfile.dict(), bucket_id=bucket_id) + db.merge(db_bucketfile) + db.commit() + from pprint import pprint + db_bucketfile = db.query(models.BucketFile).filter(models.BucketFile.bucket_id==bucket_id, models.BucketFile.filename==bucketfile.filename).first() + return db_bucketfile + diff --git a/ui/easydiffusion/bucket_database.py b/ui/easydiffusion/easydb/database.py similarity index 100% rename from ui/easydiffusion/bucket_database.py rename to ui/easydiffusion/easydb/database.py diff --git a/ui/easydiffusion/bucket_models.py b/ui/easydiffusion/easydb/models.py similarity index 92% rename from ui/easydiffusion/bucket_models.py rename to ui/easydiffusion/easydb/models.py index 933f8140..04834951 100644 --- a/ui/easydiffusion/bucket_models.py +++ b/ui/easydiffusion/easydb/models.py @@ -1,7 +1,7 @@ from sqlalchemy import Boolean, Column, ForeignKey, Integer, String, BLOB from sqlalchemy.orm import relationship -from easydiffusion.bucket_database import BucketBase +from easydiffusion.easydb.database import BucketBase class Bucket(BucketBase): diff --git a/ui/easydiffusion/bucket_schemas.py b/ui/easydiffusion/easydb/schemas.py similarity index 100% rename from ui/easydiffusion/bucket_schemas.py rename to ui/easydiffusion/easydb/schemas.py From ab37dbf98f0b176751ba66a866e23ae5a45594ef Mon Sep 17 00:00:00 2001 From: JeLuF Date: Sun, 30 Jul 2023 12:59:40 +0200 Subject: [PATCH 06/61] show images --- ui/media/images/noimg.png | Bin 0 -> 1338 bytes ui/media/js/main.js | 53 ++++++++++++++++++++++++++++---------- 2 files changed, 40 insertions(+), 13 deletions(-) create mode 100644 ui/media/images/noimg.png diff --git a/ui/media/images/noimg.png b/ui/media/images/noimg.png new file mode 100644 index 0000000000000000000000000000000000000000..33d7332fcbf24582eed6cdb2248bd4ee09c5ec80 GIT binary patch literal 1338 zcma)+c~}y57{`BT2AZI=W2I>xROVdz7`k#MN?zzB&$M(3J}MrC+M^Dd2W#Ht+491L z6^5G2N0$1Z>WcB3it9q2~GhpD+ zbZpUmt$`%zbws?^8aJvh7!KOzUQW)huZVb_7TRYOh;3h2iYbl0ikvz6;i7}a!|odK zRS-SMKVsVeFjcFmCl~-O>Q1e#{~xPm?ogvDa=ogyYdg!3PX;I!Rs63E;l2oJ)Wi|{1DRNF+EDDbUurnehGfal z7Ub!ilY_^o(g$++gTd&r8O+m^7X!+*oz6KSAr^u_funIQaweT)jNl>lW)y77n2U4Q z#A3Qn|CswKhPGOQYH4X%&v1Szv9Jq!ipW2;iLE!G7RM+hEusZQYoxuC%*MusNF*}v zFipIy_rQV5BF{$L6D_badV~qSNNP!?X^GS>V1UGupf|Yp^xzDhbV58?J5HpQ0I~b+ z{k)S|T#V)Fj@6muy+C^5ahpq7FFHE*DT%cMNQ((Kx;z>BMTHI!d{>&Is867=xR400 zvIK&_2Bt1cmOeZ@3~a^T4NL9T=qxn0O!ykh4&VNWoY-+rZGrL!QW@Je7HE~9&*5;M z7c}|*az?4-S0x{Rv!*z2{RRJGLqL--VMOIx86%RW{&;-AfDuuFWKX|UZvHBa9rCKVY2*m59(2_=FHhb=;Ch#AdQMPh zB*a67c-w042DP`i+F?@C6!A?d+HGIc{A8_UN%PTOA7o#Df4?e>xj7LUW?o(&ZwRF4 zHnd!A{kUIeF?$teG_6OWm8xn}r!5N)WZV5Nr263_vSo7=)j|4syBdRA^DAVqoKW~O zPaw-kkR5o4#TDEl<^SNHL|lucqrdMKN3@0$5dV(7)23O1^@z0hdktqS}7wc$JkSUSf{Pd|P?ScMV%9PP`ZvOYWeX z3R$M{y^Rw2UNv6G{lz^-@v;Msx^+0FB?;i~^Sy7(eV3kYT^T|?3yooHbA{z%!1~Ca znGb3{j@KljdM1U2y|&u^<0H1Cd-3??=A9#}gV6?{7uu?GB&U5BOgCKG!!E8K>_fWw z->tgp?~!2N-fa2%loo7#^EF+mDGEtS)PBh6Ha-rOcOHH%zjRGEIW5h-+3A9(Z1zL! zd}*#P!bScUL$El%r(T#4Y;_&G-Ex->j~ATjtnK(St|@eE_M*#BWbkMlYIb%u_73rV z$NGyG8OlyBmy1?_Y0}#Ae8HV~&a|qCHie$}3`HC2?(U9iYZRK5)qbSEL-|5AAXWUB zvA5!ApUTtC!T|-lbB^i&ygp}{s~G}-lbSC72Pgpi8-_fV4p)oNFTLMT=06?8y5rpL IVeps#2IeDOrvLx| literal 0 HcmV?d00001 diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 0b936066..4b2b5dfd 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -508,6 +508,7 @@ function showImages(reqBody, res, outputContainer, livePreview) { { text: "Upscale", on_click: onUpscaleClick, filter: (req, img) => !req.use_upscale }, { text: "Fix Faces", on_click: onFixFacesClick, filter: (req, img) => !req.use_face_correction }, ], + { text: "Use as Thumbnail", on_click: onUseAsThumbnailClick }, ] // include the plugins @@ -632,6 +633,20 @@ function onMakeSimilarClick(req, img) { createTask(newTaskRequest) } +function onUseAsThumbnailClick(req, img) { + console.log(req) + console.log(img) + let embedding = prompt("Embedding name") + fetch(img.src) + .then(response => response.blob()) + .then(async function(blob) { + const formData = new FormData() + formData.append("file", blob) + const response = await fetch(`bucket/embeddings/${embedding}.jpg`, { method: 'POST', body: formData }); + console.log(response) + }) +} + function enqueueImageVariationTask(req, img, reqDiff) { const imageSeed = img.getAttribute("data-seed") @@ -2157,19 +2172,27 @@ document.getElementById("toggle-cloudflare-tunnel").addEventListener("click", as /* Embeddings */ +let icl = [] function updateEmbeddingsList(filter = "") { - function html(model, prefix = "", filter = "") { + function html(model, iconlist = [], prefix = "", filter = "") { filter = filter.toLowerCase() let toplevel = "" let folders = "" + console.log(iconlist) + let embIcon = Object.assign({}, ...iconlist.map( x=> ({[x.toLowerCase().split('.').slice(0,-1).join('.')]:x}))) model?.forEach((m) => { if (typeof m == "string") { - if (m.toLowerCase().search(filter) != -1) { - toplevel += ` ` + let token=m.toLowerCase() + if (token.search(filter) != -1) { + let img = '/media/images/noimg.png' + if (token in embIcon) { + img = `/bucket/embeddings/${embIcon[token]}` + } + toplevel += ` ` } } else { - let subdir = html(m[1], prefix + m[0] + "/", filter) + let subdir = html(m[1], iconlist, prefix + m[0] + "/", filter) if (subdir != "") { folders += `

${prefix}${m[0]}

` + subdir + '
' } @@ -2179,7 +2202,7 @@ function updateEmbeddingsList(filter = "") { } function onButtonClick(e) { - let text = e.target.dataset["embedding"] + let text = e.target.closest("button").dataset["embedding"] const insertIntoNegative = e.shiftKey || positiveEmbeddingText.classList.contains("displayNone") if (embeddingsModeField.value == "insert") { @@ -2214,14 +2237,18 @@ function updateEmbeddingsList(filter = "") { } // END of remove block - embeddingsList.innerHTML = warning + html(modelsOptions.embeddings, "", filter) - embeddingsList.querySelectorAll("button").forEach((b) => { - b.addEventListener("click", onButtonClick) - }) - createCollapsibles(embeddingsList) - if (filter != "") { - embeddingsExpandAll() - } + fetch("/bucket/embeddings/") + .then(response => response.json()) + .then(iconlist => { + embeddingsList.innerHTML = warning + html(modelsOptions.embeddings, iconlist, "", filter) + embeddingsList.querySelectorAll("button").forEach((b) => { + b.addEventListener("click", onButtonClick) + }) + createCollapsibles(embeddingsList) + if (filter != "") { + embeddingsExpandAll() + } + }) } function showEmbeddingDialog() { From 92009cff2400255a7b5e0d47553c8fbafe621b3c Mon Sep 17 00:00:00 2001 From: ManInDark <61268856+ManInDark@users.noreply.github.com> Date: Sun, 30 Jul 2023 22:45:52 +0200 Subject: [PATCH 07/61] Yanked files from https://github.com/JeLuF/stable-diffusion-ui/tree/bucketlite/ui/easydiffusion/easydb to develop --- ui/easydiffusion/easydb/crud.py | 25 ++++++++++++++++++++ ui/easydiffusion/easydb/database.py | 15 ++++++++++++ ui/easydiffusion/easydb/models.py | 25 ++++++++++++++++++++ ui/easydiffusion/easydb/schemas.py | 36 +++++++++++++++++++++++++++++ 4 files changed, 101 insertions(+) create mode 100644 ui/easydiffusion/easydb/crud.py create mode 100644 ui/easydiffusion/easydb/database.py create mode 100644 ui/easydiffusion/easydb/models.py create mode 100644 ui/easydiffusion/easydb/schemas.py diff --git a/ui/easydiffusion/easydb/crud.py b/ui/easydiffusion/easydb/crud.py new file mode 100644 index 00000000..7550a52a --- /dev/null +++ b/ui/easydiffusion/easydb/crud.py @@ -0,0 +1,25 @@ +from sqlalchemy.orm import Session + +from easydiffusion.easydb import models, schemas + + +def get_bucket_by_path(db: Session, path: str): + return db.query(models.Bucket).filter(models.Bucket.path == path).first() + + +def create_bucket(db: Session, bucket: schemas.BucketCreate): + db_bucket = models.Bucket(path=bucket.path) + db.add(db_bucket) + db.commit() + db.refresh(db_bucket) + return db_bucket + + +def create_bucketfile(db: Session, bucketfile: schemas.BucketFileCreate, bucket_id: int): + db_bucketfile = models.BucketFile(**bucketfile.dict(), bucket_id=bucket_id) + db.merge(db_bucketfile) + db.commit() + from pprint import pprint + db_bucketfile = db.query(models.BucketFile).filter(models.BucketFile.bucket_id==bucket_id, models.BucketFile.filename==bucketfile.filename).first() + return db_bucketfile + diff --git a/ui/easydiffusion/easydb/database.py b/ui/easydiffusion/easydb/database.py new file mode 100644 index 00000000..e3c92845 --- /dev/null +++ b/ui/easydiffusion/easydb/database.py @@ -0,0 +1,15 @@ +import os +from easydiffusion import app + +from sqlalchemy import create_engine +from sqlalchemy.ext.declarative import declarative_base +from sqlalchemy.orm import sessionmaker + +os.makedirs(app.BUCKET_DIR, exist_ok=True) +SQLALCHEMY_DATABASE_URL = "sqlite:///"+os.path.join(app.BUCKET_DIR, "bucket.db") +print("## SQLALCHEMY_DATABASE_URL = ", SQLALCHEMY_DATABASE_URL) + +engine = create_engine(SQLALCHEMY_DATABASE_URL, connect_args={"check_same_thread": False}) +SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine) + +BucketBase = declarative_base() diff --git a/ui/easydiffusion/easydb/models.py b/ui/easydiffusion/easydb/models.py new file mode 100644 index 00000000..04834951 --- /dev/null +++ b/ui/easydiffusion/easydb/models.py @@ -0,0 +1,25 @@ +from sqlalchemy import Boolean, Column, ForeignKey, Integer, String, BLOB +from sqlalchemy.orm import relationship + +from easydiffusion.easydb.database import BucketBase + + +class Bucket(BucketBase): + __tablename__ = "bucket" + + id = Column(Integer, primary_key=True, index=True) + path = Column(String, unique=True, index=True) + + bucketfiles = relationship("BucketFile", back_populates="bucket") + + +class BucketFile(BucketBase): + __tablename__ = "bucketfile" + + filename = Column(String, index=True, primary_key=True) + bucket_id = Column(Integer, ForeignKey("bucket.id"), primary_key=True) + + data = Column(BLOB, index=False) + + bucket = relationship("Bucket", back_populates="bucketfiles") + diff --git a/ui/easydiffusion/easydb/schemas.py b/ui/easydiffusion/easydb/schemas.py new file mode 100644 index 00000000..68bc04e2 --- /dev/null +++ b/ui/easydiffusion/easydb/schemas.py @@ -0,0 +1,36 @@ +from typing import List, Union + +from pydantic import BaseModel + + +class BucketFileBase(BaseModel): + filename: str + data: bytes + + +class BucketFileCreate(BucketFileBase): + pass + + +class BucketFile(BucketFileBase): + bucket_id: int + + class Config: + orm_mode = True + + +class BucketBase(BaseModel): + path: str + + +class BucketCreate(BucketBase): + pass + + +class Bucket(BucketBase): + id: int + bucketfiles: List[BucketFile] = [] + + class Config: + orm_mode = True + From a70a795662c8aa9a9f7de4439fa3dfcfc48fcb4a Mon Sep 17 00:00:00 2001 From: JeLuF Date: Mon, 31 Jul 2023 23:35:49 +0200 Subject: [PATCH 08/61] add croppr --- 3rd-PARTY-LICENSES | 28 ++++++++++++++++++++++++++++ ui/index.html | 31 +++++++++++++++++++++++++++++++ ui/media/css/croppr.css | 1 + ui/media/css/main.css | 26 ++++++++++++++++++++++++++ ui/media/js/croppr.js | 1 + ui/media/js/main.js | 35 ++++++++++++++++++++++++----------- 6 files changed, 111 insertions(+), 11 deletions(-) create mode 100644 ui/media/css/croppr.css create mode 100755 ui/media/js/croppr.js diff --git a/3rd-PARTY-LICENSES b/3rd-PARTY-LICENSES index bd29393a..78bfe3bb 100644 --- a/3rd-PARTY-LICENSES +++ b/3rd-PARTY-LICENSES @@ -712,3 +712,31 @@ FileSaver.js is licensed under the MIT license: SOFTWARE. [1]: http://eligrey.com + +croppr.js +========= +https://github.com/jamesssooi/Croppr.js + +croppr.js is licensed under the MIT license: + + MIT License + + Copyright (c) 2017 James Ooi + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. diff --git a/ui/index.html b/ui/index.html index 0fcb807d..de4273aa 100644 --- a/ui/index.html +++ b/ui/index.html @@ -18,12 +18,14 @@ + +
@@ -630,6 +632,35 @@
+ +
+
+

Use as thumbnail

+ Use a pictures as thumbnail for embeddings, LORAs, etc. +
+
+ +
+
+
+
+
+ +
+
+

Use the thumbnail for …

+ +
+
+ + +
+
+
+ + @@ -455,6 +458,40 @@ + +
+ + +
+
diff --git a/ui/media/js/auto-save.js b/ui/media/js/auto-save.js index 5ada13d5..bcfd4bc6 100644 --- a/ui/media/js/auto-save.js +++ b/ui/media/js/auto-save.js @@ -56,6 +56,7 @@ const SETTINGS_IDS_LIST = [ "tree_toggle", "json_toggle", "extract_lora_from_prompt", + "embedding-card-size-selector", ] const IGNORE_BY_DEFAULT = ["prompt"] diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 30ed6012..b440e794 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -141,6 +141,7 @@ let embeddingsDialogCloseBtn = embeddingsDialog.querySelector("#embeddings-dialo let embeddingsSearchBox = document.querySelector("#embeddings-search-box") let embeddingsList = document.querySelector("#embeddings-list") let embeddingsModeField = document.querySelector("#embeddings-mode") +let embeddingsCardSizeSelector = document.querySelector("#embedding-card-size-selector") let positiveEmbeddingText = document.querySelector("#positive-embedding-text") let negativeEmbeddingText = document.querySelector("#negative-embedding-text") @@ -684,6 +685,7 @@ function onMakeSimilarClick(req, img) { createTask(newTaskRequest) } +// gets a flat list of all models of a certain type, ignoring directories function getAllModelNames(type) { function f(tree) { if (tree == undefined) { @@ -808,7 +810,6 @@ useAsThumbSaveBtn.addEventListener("click", (e) => { }) }) - function enqueueImageVariationTask(req, img, reqDiff) { const imageSeed = img.getAttribute("data-seed") @@ -2645,43 +2646,50 @@ let icl = [] function updateEmbeddingsList(filter = "") { function html(model, iconlist = [], prefix = "", filter = "") { filter = filter.toLowerCase() - let toplevel = "" - let folders = "" - console.log(iconlist) + let toplevel = document.createElement("div") + let folders = document.createElement("div") let embIcon = Object.assign({}, ...iconlist.map( x=> ({[x.toLowerCase().split('.').slice(0,-1).join('.')]:x}))) - console.log(embIcon) let profileName = profileNameField.value model?.forEach((m) => { if (typeof m == "string") { let token=m.toLowerCase() if (token.search(filter) != -1) { - let img = '/media/images/noimg.png' - if (token in embIcon) { - img = `/bucket/${profileName}/embeddings/${embIcon[token]}` - } + let button if (iconlist.length==0) { - img="" + button = document.createElement("button") + button.innerText="m" } else { - img=`
` + let img = '/media/images/noimg.png' + if (token in embIcon) { + img = `/bucket/${profileName}/embeddings/${embIcon[token]}` + } + button = createModifierCard(m, [img,img], true) } - toplevel += ` ` + button.dataset["embedding"] = m + button.addEventListener("click", onButtonClick) + toplevel.appendChild(button) } } else { let subdir = html(m[1], iconlist, prefix + m[0] + "/", filter) - if (subdir != "") { - folders += - `

${prefix}${m[0]}

` + - subdir + - "
" + if (typeof(subdir) == "object") { + let div1 = document.createElement("div") + let div2 = document.createElement("div") + div1.classList.add("collapsible-content") + div1.classList.add("embedding-category") + div1.appendChild(subdir) + div2.replaceChildren(htmlToElement(`

${prefix}${m[0]}

`), div1) + folders.appendChild(div2) } } }) - return toplevel + folders + let result = document.createElement("div") + result.replaceChildren(toplevel, htmlToElement('
'), folders) + return result } function onButtonClick(e) { - let text = e.target.closest("button").dataset["embedding"] + let text = e.target.closest("[data-embedding]").dataset["embedding"] const insertIntoNegative = e.shiftKey || positiveEmbeddingText.classList.contains("displayNone") if (embeddingsModeField.value == "insert") { @@ -2717,7 +2725,7 @@ function updateEmbeddingsList(filter = "") { ` // Remove after fixing https://github.com/huggingface/diffusers/issues/3922 - let warning = "" + let warning = "
" if (vramUsageLevelField.value == "low") { warning = `
@@ -2731,14 +2739,12 @@ function updateEmbeddingsList(filter = "") { .then(response => response.status==200 ? response.json(): []) .then(async function(iconlist) { - embeddingsList.innerHTML = warning + html(modelsOptions.embeddings, iconlist, "", filter) - embeddingsList.querySelectorAll("button").forEach((b) => { - b.addEventListener("click", onButtonClick) - }) + embeddingsList.replaceChildren(htmlToElement(warning), html(modelsOptions.embeddings, iconlist, "", filter)) createCollapsibles(embeddingsList) if (filter != "") { embeddingsExpandAll() } + resizeModifierCards(embeddingsCardSizeSelector.value) }) } @@ -2747,23 +2753,33 @@ function showEmbeddingDialog() { embeddingsSearchBox.value = "" embeddingsDialog.showModal() } + embeddingsButton.addEventListener("click", () => { positiveEmbeddingText.classList.remove("displayNone") negativeEmbeddingText.classList.add("displayNone") showEmbeddingDialog() }) + negativeEmbeddingsButton.addEventListener("click", () => { positiveEmbeddingText.classList.add("displayNone") negativeEmbeddingText.classList.remove("displayNone") showEmbeddingDialog() }) + embeddingsDialogCloseBtn.addEventListener("click", (e) => { embeddingsDialog.close() }) + embeddingsSearchBox.addEventListener("input", (e) => { updateEmbeddingsList(embeddingsSearchBox.value) }) +embeddingsCardSizeSelector.addEventListener("change", (e) => { + resizeModifierCards(embeddingsCardSizeSelector.value) +}) + + + modalDialogCloseOnBackdropClick(embeddingsDialog) makeDialogDraggable(embeddingsDialog) diff --git a/ui/media/js/utils.js b/ui/media/js/utils.js index 673ba3dd..8fef9450 100644 --- a/ui/media/js/utils.js +++ b/ui/media/js/utils.js @@ -1097,6 +1097,14 @@ async function deleteKeys(keyToDelete) { } } +/** + * @param {String} Data URL of the image + * @param {Integer} Top left X-coordinate of the crop area + * @param {Integer} Top left Y-coordinate of the crop area + * @param {Integer} Width of the crop area + * @param {Integer} Height of the crop area + * @return {String} + */ function cropImageDataUrl(dataUrl, x, y, width, height) { return new Promise((resolve, reject) => { const image = new Image() @@ -1120,6 +1128,16 @@ function cropImageDataUrl(dataUrl, x, y, width, height) { }) } +/** + * @param {String} HTML representing a single element + * @return {Element} + */ +function htmlToElement(html) { + var template = document.createElement('template'); + html = html.trim(); // Never return a text node of whitespace as the result + template.innerHTML = html; + return template.content.firstChild; +} function modalDialogCloseOnBackdropClick(dialog) { dialog.addEventListener('mousedown', function (event) { From 3cc951cdaaa616d294f54fd208e704ac23542ed3 Mon Sep 17 00:00:00 2001 From: ManInDark <61268856+ManInDark@users.noreply.github.com> Date: Sun, 6 Aug 2023 21:52:01 +0200 Subject: [PATCH 20/61] Resolved issue mentioned by @JeLuF concerning paths --- ui/easydiffusion/bucket_manager.py | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ui/easydiffusion/bucket_manager.py b/ui/easydiffusion/bucket_manager.py index 5c30dc77..4400fd17 100644 --- a/ui/easydiffusion/bucket_manager.py +++ b/ui/easydiffusion/bucket_manager.py @@ -8,6 +8,7 @@ from easydiffusion.easydb import crud, models, schemas from easydiffusion.easydb.database import SessionLocal, engine from requests.compat import urlparse +from os.path import abspath import base64, json @@ -92,7 +93,7 @@ def init(): @server_api.get("/image/{image_path:path}") def get_image(image_path: str, db: Session = Depends(get_db)): from easydiffusion.easydb.mappings import Image - image_path = image_path.replace("/", "\\") + image_path = str(abspath(image_path)) amount = len(db.query(Image).filter(Image.path == image_path).all()) if amount > 0: image = db.query(Image).filter(Image.path == image_path).first() From 73a6e6c7371304d129553f31cc8c10f3b4d6a39d Mon Sep 17 00:00:00 2001 From: ManInDark <61268856+ManInDark@users.noreply.github.com> Date: Sun, 6 Aug 2023 22:06:16 +0200 Subject: [PATCH 21/61] Moved JS&CSS into appropriate files and changed observer to refresh button --- ui/index.html | 32 +------------------------------- ui/media/css/main.css | 17 +++++++++++++++++ ui/media/js/main.js | 12 ++++++++++++ 3 files changed, 30 insertions(+), 31 deletions(-) diff --git a/ui/index.html b/ui/index.html index 9f5547e2..25c78fd4 100644 --- a/ui/index.html +++ b/ui/index.html @@ -458,38 +458,8 @@
-
- - +
diff --git a/ui/media/css/main.css b/ui/media/css/main.css index 5e1cee43..826ff168 100644 --- a/ui/media/css/main.css +++ b/ui/media/css/main.css @@ -1817,3 +1817,20 @@ div#enlarge-buttons { .imgContainer .spinnerStatus { font-size: 10pt; } + +/* Gallery CSS */ +#imagecontainer { + display: flex; + justify-content: space-around; + flex-flow: row wrap; + align-items: center; +} + +#imagecontainer>img { + width: 30vw; + min-width: 256px; + max-width: 1024px; + height: auto; + margin-block: 1vh; + border: 4px white solid; +} \ No newline at end of file diff --git a/ui/media/js/main.js b/ui/media/js/main.js index d8c1b614..c0ed9112 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -2787,3 +2787,15 @@ let recentResolutionsValues = [] heightField.value = temp }) })() + +/* Gallery JS */ + +function refreshGallery() { + let container = document.getElementById("imagecontainer") + container.remove() + fetch('/all_images') + .then(response => response.text()) + .then(text => new DOMParser().parseFromString(text, 'text/html')) + .then(html_like => html_like.getElementsByTagName('div')[0]) + .then(div => document.getElementById("tab-content-gallery").appendChild(div)) +} \ No newline at end of file From 042773030880e158df9e9dd51be628720b8ddddb Mon Sep 17 00:00:00 2001 From: ManInDark <61268856+ManInDark@users.noreply.github.com> Date: Sun, 6 Aug 2023 22:13:27 +0200 Subject: [PATCH 22/61] Aesthetic changes --- ui/index.html | 2 +- ui/media/css/main.css | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/ui/index.html b/ui/index.html index 25c78fd4..15385bda 100644 --- a/ui/index.html +++ b/ui/index.html @@ -50,7 +50,7 @@ Help & Community - Gallery + Gallery diff --git a/ui/media/css/main.css b/ui/media/css/main.css index 826ff168..f04da78f 100644 --- a/ui/media/css/main.css +++ b/ui/media/css/main.css @@ -1833,4 +1833,8 @@ div#enlarge-buttons { height: auto; margin-block: 1vh; border: 4px white solid; +} + +#tab-content-gallery>button { + margin: 8px; } \ No newline at end of file From 9b40d6c733b327d854bc84570472c0ab886148f1 Mon Sep 17 00:00:00 2001 From: JeLuF Date: Sun, 6 Aug 2023 23:02:18 +0200 Subject: [PATCH 23/61] Remove debugging code --- ui/easydiffusion/easydb/crud.py | 1 - ui/easydiffusion/easydb/database.py | 1 - ui/media/js/main.js | 4 ---- 3 files changed, 6 deletions(-) diff --git a/ui/easydiffusion/easydb/crud.py b/ui/easydiffusion/easydb/crud.py index 7550a52a..65bea255 100644 --- a/ui/easydiffusion/easydb/crud.py +++ b/ui/easydiffusion/easydb/crud.py @@ -19,7 +19,6 @@ def create_bucketfile(db: Session, bucketfile: schemas.BucketFileCreate, bucket_ db_bucketfile = models.BucketFile(**bucketfile.dict(), bucket_id=bucket_id) db.merge(db_bucketfile) db.commit() - from pprint import pprint db_bucketfile = db.query(models.BucketFile).filter(models.BucketFile.bucket_id==bucket_id, models.BucketFile.filename==bucketfile.filename).first() return db_bucketfile diff --git a/ui/easydiffusion/easydb/database.py b/ui/easydiffusion/easydb/database.py index e3c92845..6cb43ecb 100644 --- a/ui/easydiffusion/easydb/database.py +++ b/ui/easydiffusion/easydb/database.py @@ -7,7 +7,6 @@ from sqlalchemy.orm import sessionmaker os.makedirs(app.BUCKET_DIR, exist_ok=True) SQLALCHEMY_DATABASE_URL = "sqlite:///"+os.path.join(app.BUCKET_DIR, "bucket.db") -print("## SQLALCHEMY_DATABASE_URL = ", SQLALCHEMY_DATABASE_URL) engine = create_engine(SQLALCHEMY_DATABASE_URL, connect_args={"check_same_thread": False}) SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine) diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 4b2fe0d8..dfc3c04a 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -763,10 +763,8 @@ function onUseAsThumbnailClick(req, img) { })) useAsThumbSelect.replaceChildren(optgroup) - useAsThumbDialog.showModal() onUseAsThumbnailClick.scale = scale - } modalDialogCloseOnBackdropClick(useAsThumbDialog) @@ -795,9 +793,7 @@ useAsThumbSaveBtn.addEventListener("click", (e) => { formData.append("file", blob) let options = useAsThumbSelect.selectedOptions let promises = [] - console.log(options) for (let embedding of options) { - console.log(`bucket/${profileName}/${embedding.dataset["type"]}/${embedding.value}.png`) promises.push(fetch(`bucket/${profileName}/${embedding.dataset["type"]}/${embedding.value}.png`, { method: 'POST', body: formData })) } return Promise.all(promises) From 00c55444a95cd525621bffc0267a9918f339d9f9 Mon Sep 17 00:00:00 2001 From: JeLuF Date: Mon, 7 Aug 2023 00:02:02 +0200 Subject: [PATCH 24/61] remove unused variable --- ui/media/js/main.js | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/media/js/main.js b/ui/media/js/main.js index dfc3c04a..c3a42b8a 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -2638,7 +2638,6 @@ document.getElementById("toggle-tensorrt-install").addEventListener("click", fun /* Embeddings */ -let icl = [] function updateEmbeddingsList(filter = "") { function html(model, iconlist = [], prefix = "", filter = "") { filter = filter.toLowerCase() From e828a72b084cae7d721be9388ee0f6f83abc77ba Mon Sep 17 00:00:00 2001 From: JeLuF Date: Tue, 8 Aug 2023 18:48:08 +0200 Subject: [PATCH 25/61] simplify DB query --- ui/easydiffusion/bucket_manager.py | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/ui/easydiffusion/bucket_manager.py b/ui/easydiffusion/bucket_manager.py index 4400fd17..023ec192 100644 --- a/ui/easydiffusion/bucket_manager.py +++ b/ui/easydiffusion/bucket_manager.py @@ -94,11 +94,10 @@ def init(): def get_image(image_path: str, db: Session = Depends(get_db)): from easydiffusion.easydb.mappings import Image image_path = str(abspath(image_path)) - amount = len(db.query(Image).filter(Image.path == image_path).all()) - if amount > 0: + try: image = db.query(Image).filter(Image.path == image_path).first() return FileResponse(image.path) - else: + except Exception as e: raise HTTPException(status_code=404, detail="Image not found") @server_api.get("/all_images") From e3026967ab84f8954c41c7ec8df76bc529ecd232 Mon Sep 17 00:00:00 2001 From: JeLuF Date: Wed, 9 Aug 2023 16:56:10 +0200 Subject: [PATCH 26/61] Return json --- ui/easydiffusion/bucket_manager.py | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/ui/easydiffusion/bucket_manager.py b/ui/easydiffusion/bucket_manager.py index 4400fd17..8cd946e1 100644 --- a/ui/easydiffusion/bucket_manager.py +++ b/ui/easydiffusion/bucket_manager.py @@ -105,12 +105,13 @@ def init(): def get_all_images(db: Session = Depends(get_db)): from easydiffusion.easydb.mappings import Image images = db.query(Image).all() - sum_string = "
" - for img in images: - options = f"Path: {img.path}\nPrompt: {img.prompt}\nNegative Prompt: {img.negative_prompt}\nSeed: {img.seed}\nModel: {img.use_stable_diffusion_model}\nSize: {img.height}x{img.width}\nSampler: {img.sampler_name}\nSteps: {img.num_inference_steps}\nGuidance Scale: {img.guidance_scale}\nLoRA: {img.lora}\nUpscaling: {img.use_upscale}\nFace Correction: {img.use_face_correction}\n" - sum_string += f"" - sum_string += "
" - return Response(content=sum_string, media_type="text/html") + # sum_string = "
" + # for img in images: + # options = f"Path: {img.path}\nPrompt: {img.prompt}\nNegative Prompt: {img.negative_prompt}\nSeed: {img.seed}\nModel: {img.use_stable_diffusion_model}\nSize: {img.height}x{img.width}\nSampler: {img.sampler_name}\nSteps: {img.num_inference_steps}\nGuidance Scale: {img.guidance_scale}\nLoRA: {img.lora}\nUpscaling: {img.use_upscale}\nFace Correction: {img.use_face_correction}\n" + # sum_string += f"" + # sum_string += "
" + # return Response(content=sum_string, media_type="text/html") + return images def get_filename_from_url(url): From 87d3e4430ee31557e70c1108e7d7a67b35221dec Mon Sep 17 00:00:00 2001 From: JeLuF Date: Wed, 9 Aug 2023 20:02:52 +0200 Subject: [PATCH 27/61] Masonry gallery, add timestamp --- ui/easydiffusion/bucket_manager.py | 14 +++------ ui/easydiffusion/easydb/mappings.py | 10 ++++--- ui/easydiffusion/utils/save_utils.py | 4 +-- ui/index.html | 4 ++- ui/media/css/main.css | 43 ++++++++++++++++++++-------- ui/media/js/main.js | 24 ++++++++++++---- 6 files changed, 64 insertions(+), 35 deletions(-) diff --git a/ui/easydiffusion/bucket_manager.py b/ui/easydiffusion/bucket_manager.py index cf09c581..0d72ed06 100644 --- a/ui/easydiffusion/bucket_manager.py +++ b/ui/easydiffusion/bucket_manager.py @@ -91,24 +91,18 @@ def init(): @server_api.get("/image/{image_path:path}") def get_image(image_path: str, db: Session = Depends(get_db)): - from easydiffusion.easydb.mappings import Image + from easydiffusion.easydb.mappings import GalleryImage image_path = str(abspath(image_path)) try: - image = db.query(Image).filter(Image.path == image_path).first() + image = db.query(GalleryImage).filter(GalleryImage.path == image_path).first() return FileResponse(image.path) except Exception as e: raise HTTPException(status_code=404, detail="Image not found") @server_api.get("/all_images") def get_all_images(db: Session = Depends(get_db)): - from easydiffusion.easydb.mappings import Image - images = db.query(Image).all() - # sum_string = "
" - # for img in images: - # options = f"Path: {img.path}\nPrompt: {img.prompt}\nNegative Prompt: {img.negative_prompt}\nSeed: {img.seed}\nModel: {img.use_stable_diffusion_model}\nSize: {img.height}x{img.width}\nSampler: {img.sampler_name}\nSteps: {img.num_inference_steps}\nGuidance Scale: {img.guidance_scale}\nLoRA: {img.lora}\nUpscaling: {img.use_upscale}\nFace Correction: {img.use_face_correction}\n" - # sum_string += f"" - # sum_string += "
" - # return Response(content=sum_string, media_type="text/html") + from easydiffusion.easydb.mappings import GalleryImage + images = db.query(GalleryImage).all() return images diff --git a/ui/easydiffusion/easydb/mappings.py b/ui/easydiffusion/easydb/mappings.py index ad68ecab..31549709 100644 --- a/ui/easydiffusion/easydb/mappings.py +++ b/ui/easydiffusion/easydb/mappings.py @@ -1,9 +1,10 @@ -from sqlalchemy import Column, Integer, String, Float, Boolean +from sqlalchemy import Column, Integer, String, Float, Boolean, DateTime from sqlalchemy.ext.declarative import declarative_base +from sqlalchemy.sql import func Base = declarative_base() -class Image(Base): +class GalleryImage(Base): __tablename__ = 'images' path = Column(String, primary_key=True) @@ -23,10 +24,11 @@ class Image(Base): use_upscale = Column(String) prompt = Column(String) negative_prompt = Column(String) + time_created = Column(DateTime(timezone=True), server_default=func.now()) def __repr__(self): - return "" % ( + 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) from easydiffusion.easydb.database import engine -Image.metadata.create_all(engine) \ No newline at end of file +GalleryImage.metadata.create_all(engine) diff --git a/ui/easydiffusion/utils/save_utils.py b/ui/easydiffusion/utils/save_utils.py index a21e32b8..7f668280 100644 --- a/ui/easydiffusion/utils/save_utils.py +++ b/ui/easydiffusion/utils/save_utils.py @@ -157,11 +157,11 @@ def save_images_to_disk( else: return metadata_entries[i]["use_lora_model"] + ":" + str(metadata_entries[i]["lora_alpha"]) - from easydiffusion.easydb.mappings import Image + from easydiffusion.easydb.mappings import GalleryImage from easydiffusion.easydb.database import SessionLocal session = SessionLocal() - session.add(Image( + session.add(GalleryImage( path = path_i, seed = metadata_entries[i]["seed"], use_stable_diffusion_model = metadata_entries[i]["use_stable_diffusion_model"], diff --git a/ui/index.html b/ui/index.html index 65be9480..d5803fcc 100644 --- a/ui/index.html +++ b/ui/index.html @@ -518,7 +518,9 @@
-
+
+ +
diff --git a/ui/media/css/main.css b/ui/media/css/main.css index dfd12c32..e0d1d02d 100644 --- a/ui/media/css/main.css +++ b/ui/media/css/main.css @@ -1889,21 +1889,40 @@ div#enlarge-buttons { } /* Gallery CSS */ -#imagecontainer { - display: flex; - justify-content: space-around; - flex-flow: row wrap; - align-items: center; +.gallery { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + font-family: sans-serif; } -#imagecontainer>img { - width: 30vw; - min-width: 256px; - max-width: 1024px; - height: auto; - margin-block: 1vh; - border: 4px white solid; +.gallery-container { + columns: 5 ; + column-gap: 1.5rem; + width: 95%; + margin: 0 0 ; } +.gallery-container div { + margin: 0 1.5rem 1.5rem 0; + display: inline-block; + width: 100%; + padding: 5px; + + transition: all .75s ease-in-out; +} + +.gallery-container div img { + width: 100%; + border-radius: 5px; + transition: all .25s ease-in-out; + box-shadow: 5px 5px 5px rgba(0,0,0,0.4); +} + +.gallery-container div img:hover { + box-shadow: 1px 1px 15px rgba(32,0,128,0.8); +} + #tab-content-gallery>button { margin: 8px; diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 6799a648..a4476252 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -3085,13 +3085,25 @@ let recentResolutionsValues = [] })() /* Gallery JS */ +function galleryImage(item) { + let div = document.createElement("div") + let img = document.createElement("img") + + img.src = "/image/" + item.path + img.dataset["request"] = JSON.stringify(item) + div.appendChild(img) + return div +} function refreshGallery() { let container = document.getElementById("imagecontainer") - container.remove() + container.innerHTML="" fetch('/all_images') - .then(response => response.text()) - .then(text => new DOMParser().parseFromString(text, 'text/html')) - .then(html_like => html_like.getElementsByTagName('div')[0]) - .then(div => document.getElementById("tab-content-gallery").appendChild(div)) -} \ No newline at end of file + .then(response => response.json()) + .then(json => { + console.log(json) + json.forEach( item => { + container.appendChild(galleryImage(item)) + }) + }) +} From fbc816d004f0e23b8c7cccea53e926e67fceae8a Mon Sep 17 00:00:00 2001 From: ManInDark <61268856+ManInDark@users.noreply.github.com> Date: Wed, 9 Aug 2023 21:10:38 +0200 Subject: [PATCH 28/61] Changed link back --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 8acafd76..c7848a7c 100644 --- a/README.md +++ b/README.md @@ -11,9 +11,9 @@ Does not require technical knowledge, does not require pre-installed software. 1 Click the download button for your operating system:

- - - + + +

**Hardware requirements:** From 64fc777a2be8ee456c9119d34e1eae75b3bbb175 Mon Sep 17 00:00:00 2001 From: ManInDark <61268856+ManInDark@users.noreply.github.com> Date: Wed, 9 Aug 2023 22:21:36 +0200 Subject: [PATCH 29/61] Added nsfw flag, that way there won't be issues later on if it was to be implemented --- ui/easydiffusion/easydb/mappings.py | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/easydiffusion/easydb/mappings.py b/ui/easydiffusion/easydb/mappings.py index 31549709..035f2ee8 100644 --- a/ui/easydiffusion/easydb/mappings.py +++ b/ui/easydiffusion/easydb/mappings.py @@ -25,6 +25,7 @@ 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') def __repr__(self): return "" % ( From 2bf7116f011868ab8675aa6fa94e215f1b813d77 Mon Sep 17 00:00:00 2001 From: ManInDark <61268856+ManInDark@users.noreply.github.com> Date: Wed, 9 Aug 2023 22:50:03 +0200 Subject: [PATCH 30/61] Added Gallery search for prompt & model --- ui/easydiffusion/bucket_manager.py | 11 +++++++---- ui/index.html | 6 +++++- ui/media/css/main.css | 13 ++++++++++++- ui/media/js/main.js | 13 ++++++++++++- 4 files changed, 36 insertions(+), 7 deletions(-) diff --git a/ui/easydiffusion/bucket_manager.py b/ui/easydiffusion/bucket_manager.py index 0d72ed06..43b5f147 100644 --- a/ui/easydiffusion/bucket_manager.py +++ b/ui/easydiffusion/bucket_manager.py @@ -100,11 +100,14 @@ def init(): raise HTTPException(status_code=404, detail="Image not found") @server_api.get("/all_images") - def get_all_images(db: Session = Depends(get_db)): + def get_all_images(prompt: str = "", model: str = "", db: Session = Depends(get_db)): from easydiffusion.easydb.mappings import GalleryImage - images = db.query(GalleryImage).all() - return images - + 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+"%")) + return images.all() def get_filename_from_url(url): path = urlparse(url).path diff --git a/ui/index.html b/ui/index.html index d5803fcc..9aeb7ab2 100644 --- a/ui/index.html +++ b/ui/index.html @@ -517,7 +517,11 @@
- +
diff --git a/ui/media/css/main.css b/ui/media/css/main.css index e0d1d02d..d41d6f17 100644 --- a/ui/media/css/main.css +++ b/ui/media/css/main.css @@ -1897,6 +1897,17 @@ div#enlarge-buttons { font-family: sans-serif; } +#gallery-search { + display: flex; + justify-content: center; + align-items: center; + flex-direction: row; +} + +#gallery-search>* { + margin: 0.5em; +} + .gallery-container { columns: 5 ; column-gap: 1.5rem; @@ -1924,6 +1935,6 @@ div#enlarge-buttons { } -#tab-content-gallery>button { +#tab-content-gallery>* { margin: 8px; } diff --git a/ui/media/js/main.js b/ui/media/js/main.js index a4476252..5beb094d 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -3097,8 +3097,12 @@ 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 + "&" : "" container.innerHTML="" - fetch('/all_images') + fetch('/all_images?' + promptsearch + modelsearch) .then(response => response.json()) .then(json => { console.log(json) @@ -3107,3 +3111,10 @@ function refreshGallery() { }) }) } + +function gallery_keyDown_handler(event) { + if (event.key === 'Enter') { + event.preventDefault() + refreshGallery() + } +} \ No newline at end of file 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 31/61] 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 32/61] 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 3bd6773e4954231e8899dc7a3bd3947d0d747cc0 Mon Sep 17 00:00:00 2001 From: JeLuF Date: Thu, 10 Aug 2023 01:03:08 +0200 Subject: [PATCH 33/61] zoom and input buttons --- ui/media/css/main.css | 32 +++++++++++++++++++++-------- ui/media/js/main.js | 48 +++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 69 insertions(+), 11 deletions(-) diff --git a/ui/media/css/main.css b/ui/media/css/main.css index e0d1d02d..270f2763 100644 --- a/ui/media/css/main.css +++ b/ui/media/css/main.css @@ -1898,12 +1898,21 @@ div#enlarge-buttons { } .gallery-container { - columns: 5 ; + columns: 6 380px ; column-gap: 1.5rem; width: 95%; margin: 0 0 ; } -.gallery-container div { + +.gallery-image img { + width: 100%; + border-radius: 5px; + transition: all .25s ease-in-out; + box-shadow: 5px 5px 5px rgba(0,0,0,0.4); +} + +.gallery-image { + position: relative; margin: 0 1.5rem 1.5rem 0; display: inline-block; width: 100%; @@ -1912,15 +1921,20 @@ div#enlarge-buttons { transition: all .75s ease-in-out; } -.gallery-container div img { - width: 100%; - border-radius: 5px; - transition: all .25s ease-in-out; - box-shadow: 5px 5px 5px rgba(0,0,0,0.4); +.gallery-image-hover { + position: absolute; + right: 15px; + top: 15px; + opacity: 0; + text-align: right; } -.gallery-container div img:hover { - box-shadow: 1px 1px 15px rgba(32,0,128,0.8); +.gallery-image-hover button { + margin-bottom: 5px; +} + +.gallery-image:hover .gallery-image-hover { + opacity: 1; } diff --git a/ui/media/js/main.js b/ui/media/js/main.js index a4476252..5e03cbb9 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -3087,11 +3087,55 @@ let recentResolutionsValues = [] /* Gallery JS */ function galleryImage(item) { let div = document.createElement("div") - let img = document.createElement("img") + div.classList.add("gallery-image") + let img = document.createElement("img") img.src = "/image/" + item.path img.dataset["request"] = JSON.stringify(item) - div.appendChild(img) + + let hover = document.createElement("div") + hover.classList.add("gallery-image-hover") + + let imageExpandBtn=document.createElement("button") + imageExpandBtn.classList.add("tertiaryButton") + imageExpandBtn.innerHTML = '' + imageExpandBtn.addEventListener("click", function() { + function previousImage(img) { + const allImages = Array.from(document.getElementById("imagecontainer").querySelectorAll(".gallery-image img")) + const index = allImages.indexOf(img) + return allImages.slice(0, index).reverse()[0] + } + + function nextImage(img) { + const allImages = Array.from(document.getElementById("imagecontainer").querySelectorAll(".gallery-image img")) + const index = allImages.indexOf(img) + return allImages.slice(index + 1)[0] + } + + function imageModalParameter(img) { + const previousImg = previousImage(img) + const nextImg = nextImage(img) + + return { + src: img.src, + previous: previousImg ? () => imageModalParameter(previousImg) : undefined, + next: nextImg ? () => imageModalParameter(nextImg) : undefined, + } + } + imageModal(imageModalParameter(img)) + }) + + hover.appendChild(imageExpandBtn) + hover.appendChild(document.createElement("br")) + + let useAsInputBtn = document.createElement("button") + useAsInputBtn.classList.add("tertiaryButton") + useAsInputBtn.innerHTML = "Use as Input" + useAsInputBtn.addEventListener("click", (e) => onUseAsInputClick(null, img)) + + hover.appendChild(useAsInputBtn) + + div.replaceChildren(img, hover) return div } 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 34/61] 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 6d51f334b1b91319a4baff4376de5503c35ffcdc Mon Sep 17 00:00:00 2001 From: JeLuF Date: Fri, 11 Aug 2023 01:02:59 +0200 Subject: [PATCH 35/61] More hover buttons --- ui/index.html | 13 +++++++++ ui/media/js/main.js | 68 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 81 insertions(+) diff --git a/ui/index.html b/ui/index.html index d5803fcc..e4b7a589 100644 --- a/ui/index.html +++ b/ui/index.html @@ -521,6 +521,19 @@
+ + +
+
+
diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 5e03cbb9..0c314284 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -142,6 +142,8 @@ let embeddingsSearchBox = document.querySelector("#embeddings-search-box") let embeddingsList = document.querySelector("#embeddings-list") let embeddingsModeField = document.querySelector("#embeddings-mode") let embeddingsCardSizeSelector = document.querySelector("#embedding-card-size-selector") +let galleryImginfoDialog = document.querySelector("#gallery-imginfo") +let galleryImginfoDialogContent = document.querySelector("#gallery-imginfo-content") let positiveEmbeddingText = document.querySelector("#positive-embedding-text") let negativeEmbeddingText = document.querySelector("#negative-embedding-text") @@ -3085,6 +3087,30 @@ let recentResolutionsValues = [] })() /* Gallery JS */ + +const IMAGE_INFO = { + "Prompt": "prompt", + "Negative Prompt": "negative_prompt", + "Seed": "seed", + "Time": "time_created", + "Model": "use_stable_diffusion_model", + "VAE Model": "use_vae_model", + "Hypernetwork": "use_hypernetwork_model", + "LORA": "lora", + "Path": "path", + "Width": "width", + "Height": "height", + "Steps": "num_inference_steps", + "Sampler": "sampler_name", + "Guidance Scale": "guidance_scale", + "Tiling": "tiling", + "Upscaler": "use_upscale", + "Face Correction": "use_face_correction", + "Clip Skip": "clip_skip", +} + +const IGNORE_TOKENS = ["None", "none", "Null", "null", "false", "False"] + function galleryImage(item) { let div = document.createElement("div") div.classList.add("gallery-image") @@ -3096,9 +3122,34 @@ function galleryImage(item) { let hover = document.createElement("div") hover.classList.add("gallery-image-hover") + let infoBtn = document.createElement("button") + infoBtn.classList.add("tertiaryButton") + infoBtn.innerHTML = '' + infoBtn.addEventListener("click", function() { + let table = document.createElement("table") + console.log(item) + + for (const [label, key] of Object.entries(IMAGE_INFO)) { + console.log(label, key, item[key]) + console.log(IGNORE_TOKENS.findIndex( k => (k == item[key]))) + if (IGNORE_TOKENS.findIndex( k => (k == item[key])) == -1) { + let data = item[key] + if (key == "path") { + data = "…/"+data.split(/[\/\\]/).pop() + } + table.appendChild(htmlToElement(`${label}:${data}`)) + } + } + galleryImginfoDialogContent.replaceChildren(table) + galleryImginfoDialog.showModal() + }) + hover.appendChild(infoBtn) + + let imageExpandBtn=document.createElement("button") imageExpandBtn.classList.add("tertiaryButton") imageExpandBtn.innerHTML = '' + imageExpandBtn.style["margin-left"] = "0.2em" imageExpandBtn.addEventListener("click", function() { function previousImage(img) { const allImages = Array.from(document.getElementById("imagecontainer").querySelectorAll(".gallery-image img")) @@ -3126,6 +3177,16 @@ function galleryImage(item) { }) hover.appendChild(imageExpandBtn) + + let openInNewTabBtn = document.createElement("button") + openInNewTabBtn.classList.add("tertiaryButton") + openInNewTabBtn.innerHTML = '' + openInNewTabBtn.style["margin-left"] = "0.2em" + openInNewTabBtn.addEventListener("click", (e) => { + window.open(img.src) + }) + hover.appendChild(openInNewTabBtn) + hover.appendChild(document.createElement("br")) let useAsInputBtn = document.createElement("button") @@ -3139,6 +3200,13 @@ function galleryImage(item) { return div } +modalDialogCloseOnBackdropClick(galleryImginfoDialog) +makeDialogDraggable(galleryImginfoDialog) + +galleryImginfoDialog.querySelector("#gallery-imginfo-close-button").addEventListener("click", () => { + galleryImginfoDialog.close() +}) + function refreshGallery() { let container = document.getElementById("imagecontainer") container.innerHTML="" 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 36/61] 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 37/61] 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 f3367a67732a57c9a91fc24f411fe2ac0afb4d3d 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 38/61] Implemented JeLuF's suggestion --- ui/media/js/main.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 5beb094d..0628b015 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -3097,12 +3097,12 @@ 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: promptsearchfield, + model: modelsearchfield + }) container.innerHTML="" - fetch('/all_images?' + promptsearch + modelsearch) + fetch('/all_images?' + params) .then(response => response.json()) .then(json => { console.log(json) 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 39/61] 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 40/61] 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) { From 79f58881f140f4a50186cdd8dc0cd9651ccbf472 Mon Sep 17 00:00:00 2001 From: ManInDark <61268856+ManInDark@users.noreply.github.com> Date: Sun, 13 Aug 2023 22:03:57 +0200 Subject: [PATCH 41/61] Changed textarea to input as @JeLuF suggested, implemented System that should reduce the amount of times the error screen would be shown --- ui/index.html | 6 +++--- ui/media/js/main.js | 11 +++++++---- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/ui/index.html b/ui/index.html index 40beed92..eef2dab5 100644 --- a/ui/index.html +++ b/ui/index.html @@ -519,11 +519,11 @@
diff --git a/ui/media/js/main.js b/ui/media/js/main.js index edacd977..2323cb4a 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -3108,7 +3108,10 @@ function galleryImage(item) { return div } -function refreshGallery() { +function refreshGallery(newsearch = false) { + if (newsearch) { + document.getElementById("gallery-page").value = 0 + } let container = document.getElementById("imagecontainer") let params = new URLSearchParams({ prompt: document.getElementById("gallery-prompt-search").value, @@ -3134,17 +3137,17 @@ function refreshGallery() { function decrementGalleryPage() { let page = Math.max(document.getElementById("gallery-page").value - 1, 0) document.getElementById("gallery-page").value = page - refreshGallery() + refreshGallery(false) } function incrementGalleryPage() { document.getElementById("gallery-page").value++ - refreshGallery() + refreshGallery(false) } function gallery_keyDown_handler(event) { if (event.key === 'Enter') { event.preventDefault() - refreshGallery() + refreshGallery(true) } } \ No newline at end of file From 33f4f63068bb20416d699372f3fdc50419c524e1 Mon Sep 17 00:00:00 2001 From: JeLuF Date: Mon, 14 Aug 2023 01:47:24 +0200 Subject: [PATCH 42/61] nonlinear slider --- ui/index.html | 2 +- ui/media/js/main.js | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/ui/index.html b/ui/index.html index ef16ec38..f3f0574d 100644 --- a/ui/index.html +++ b/ui/index.html @@ -524,7 +524,7 @@ - +
diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 9259e6c8..3bba6a31 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -3244,13 +3244,15 @@ window.addEventListener("resize", layoutGallery) function layoutGallery() { let container = document.getElementById("imagecontainer") - let thumbSize = parseInt(galleryThumbnailSize.value) + let thumbSize = parseFloat(galleryThumbnailSize.value) + thumbSize = (10*thumbSize*thumbSize)>>>0 let root = document.querySelector(':root') root.style.setProperty('--gallery-width', thumbSize + "px") let msnry = new Masonry( container, { gutter: 10, itemSelector: '.gallery-image', - columnWidth: thumbSize + columnWidth: thumbSize, + fitWidth: true, }) } From 2dc8d8dd35911f62a83fc6bee1399acf854e617f Mon Sep 17 00:00:00 2001 From: ManInDark <61268856+ManInDark@users.noreply.github.com> Date: Mon, 14 Aug 2023 18:13:00 +0200 Subject: [PATCH 43/61] Centered Gallery --- ui/media/css/main.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/ui/media/css/main.css b/ui/media/css/main.css index 97adeee8..44e238f6 100644 --- a/ui/media/css/main.css +++ b/ui/media/css/main.css @@ -1911,6 +1911,10 @@ div#enlarge-buttons { margin: 0.5em; } +#imagecontainer { + margin: auto; +} + .gallery-container { } From a3b97c2b475b9cd085478a3b97075ee2a906d708 Mon Sep 17 00:00:00 2001 From: ManInDark <61268856+ManInDark@users.noreply.github.com> Date: Mon, 14 Aug 2023 18:47:53 +0200 Subject: [PATCH 44/61] Gallery Page Buttons now get disabled (and look different) when you can't go any further --- ui/media/css/main.css | 3 +++ ui/media/js/main.js | 15 +++++++++++++++ 2 files changed, 18 insertions(+) diff --git a/ui/media/css/main.css b/ui/media/css/main.css index 44e238f6..e7f1f6e1 100644 --- a/ui/media/css/main.css +++ b/ui/media/css/main.css @@ -1899,6 +1899,9 @@ div#enlarge-buttons { font-family: sans-serif; } */ +button:disabled { + background-color: var(--secondary-button-background); +} #gallery-search { display: flex; diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 3bba6a31..beb9a122 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -3257,6 +3257,7 @@ function layoutGallery() { } function refreshGallery(newsearch = false) { + let BUTTONS = [...document.getElementById("gallery-search").children].filter(x => x.tagName === "BUTTON") if (newsearch) { document.getElementById("gallery-page").value = 0 } @@ -3294,6 +3295,20 @@ function refreshGallery(newsearch = false) { layoutGallery() }) }) + fetch('/all_images?images_per_page=1&page=' + (parseInt(document.getElementById("gallery-page").value) + 1) * 50) // 50 has to be replaced if custom images per page is implemented + .then(response => response.json()) + .then(json => { + if (json.length == 0) { + BUTTONS[2].disabled = true + } else { + BUTTONS[2].disabled = false + } + }) + if (document.getElementById("gallery-page").value == 0) { + BUTTONS[0].disabled = true + } else { + BUTTONS[0].disabled = false + } document.getElementById("gallery-refresh").innerText = "Refresh" } From 76604d22de96f790619294152c129684ee035b93 Mon Sep 17 00:00:00 2001 From: ManInDark <61268856+ManInDark@users.noreply.github.com> Date: Mon, 14 Aug 2023 19:04:00 +0200 Subject: [PATCH 45/61] Implemented suggestions by @JeLuF --- ui/media/js/main.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/ui/media/js/main.js b/ui/media/js/main.js index beb9a122..5323f427 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -3257,7 +3257,7 @@ function layoutGallery() { } function refreshGallery(newsearch = false) { - let BUTTONS = [...document.getElementById("gallery-search").children].filter(x => x.tagName === "BUTTON") + let buttons = document.querySelectorAll("#gallery-search button") if (newsearch) { document.getElementById("gallery-page").value = 0 } @@ -3299,15 +3299,15 @@ function refreshGallery(newsearch = false) { .then(response => response.json()) .then(json => { if (json.length == 0) { - BUTTONS[2].disabled = true + buttons[2].disabled = true } else { - BUTTONS[2].disabled = false + buttons[2].disabled = false } }) if (document.getElementById("gallery-page").value == 0) { - BUTTONS[0].disabled = true + buttons[0].disabled = true } else { - BUTTONS[0].disabled = false + buttons[0].disabled = false } document.getElementById("gallery-refresh").innerText = "Refresh" } From 786a96ecd97fcac283fa6af705f0d4341e48d011 Mon Sep 17 00:00:00 2001 From: JeLuF Date: Mon, 14 Aug 2023 21:27:22 +0200 Subject: [PATCH 46/61] type ahead search - use search prompt also for canary request - name prev/next button so that they can be directly accessed - search prompt, not path --- ui/easydiffusion/bucket_manager.py | 2 +- ui/index.html | 8 +++--- ui/media/js/main.js | 43 +++++++++++++++++++++--------- 3 files changed, 35 insertions(+), 18 deletions(-) diff --git a/ui/easydiffusion/bucket_manager.py b/ui/easydiffusion/bucket_manager.py index c168f91a..93bbbcd6 100644 --- a/ui/easydiffusion/bucket_manager.py +++ b/ui/easydiffusion/bucket_manager.py @@ -104,7 +104,7 @@ def init(): from easydiffusion.easydb.mappings import GalleryImage images = db.query(GalleryImage).order_by(GalleryImage.time_created.desc()) if prompt != "": - images = images.filter(GalleryImage.path.like("%"+prompt+"%")) + images = images.filter(GalleryImage.prompt.like("%"+prompt+"%")) if model != "": images = images.filter(GalleryImage.use_stable_diffusion_model.like("%"+model+"%")) images = images.offset(page*images_per_page).limit(images_per_page) diff --git a/ui/index.html b/ui/index.html index f3f0574d..1819366e 100644 --- a/ui/index.html +++ b/ui/index.html @@ -519,14 +519,14 @@
diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 5323f427..24fe92a7 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -145,6 +145,12 @@ let embeddingsCardSizeSelector = document.querySelector("#embedding-card-size-se let galleryImginfoDialog = document.querySelector("#gallery-imginfo") let galleryThumbnailSize = document.querySelector("#gallery-thumbnail-size") let galleryImginfoDialogContent = document.querySelector("#gallery-imginfo-content") +let galleryPageField = document.querySelector("#gallery-page") +let galleryPrevBtn = document.querySelector("#gallery-prev") +let galleryNextBtn = document.querySelector("#gallery-next") +let galleryPromptSearchField = document.querySelector("#gallery-prompt-search") +let galleryModelSearchField = document.querySelector("#gallery-model-search") + let positiveEmbeddingText = document.querySelector("#positive-embedding-text") let negativeEmbeddingText = document.querySelector("#negative-embedding-text") @@ -3256,23 +3262,25 @@ function layoutGallery() { }) } +galleryModelSearchField.addEventListener("keyup", debounce(e => refreshGallery(true), 500)) +galleryPromptSearchField.addEventListener("keyup", debounce(e => refreshGallery(true), 500)) + function refreshGallery(newsearch = false) { - let buttons = document.querySelectorAll("#gallery-search button") if (newsearch) { - document.getElementById("gallery-page").value = 0 + galleryPageField.value = 0 } let container = document.getElementById("imagecontainer") container.innerHTML = "" let params = new URLSearchParams({ prompt: document.getElementById("gallery-prompt-search").value, model: document.getElementById("gallery-model-search").value, - page: document.getElementById("gallery-page").value + page: galleryPageField.value }) fetch('/all_images?' + params) .then(response => response.json()) .then(json => { - if (document.getElementById("gallery-page").value > 0 && json.length == 0) { + if (galleryPageField.value > 0 && json.length == 0) { decrementGalleryPage() alert("No more images") return @@ -3295,23 +3303,32 @@ function refreshGallery(newsearch = false) { layoutGallery() }) }) - fetch('/all_images?images_per_page=1&page=' + (parseInt(document.getElementById("gallery-page").value) + 1) * 50) // 50 has to be replaced if custom images per page is implemented + + params.set("images_per_page", 1) + // 50 has to be replaced if custom images per page is implemented + params.set("page", (parseInt(galleryPageField.value) + 1) * 50) + + fetch("/all_images?" + params) .then(response => response.json()) .then(json => { if (json.length == 0) { - buttons[2].disabled = true + galleryNextBtn.disabled = true } else { - buttons[2].disabled = false + galleryNextBtn.disabled = false } }) - if (document.getElementById("gallery-page").value == 0) { - buttons[0].disabled = true + if (galleryPageField.value == 0) { + galleryPrevBtn.disabled = true } else { - buttons[0].disabled = false + galleryPrevBtn.disabled = false } document.getElementById("gallery-refresh").innerText = "Refresh" } +galleryPrevBtn.addEventListener("click", decrementGalleryPage) +galleryNextBtn.addEventListener("click", incrementGalleryPage) + + document.addEventListener("tabClick", (e) => { if (e.detail.name == 'gallery') { refreshGallery() @@ -3320,13 +3337,13 @@ document.addEventListener("tabClick", (e) => { function decrementGalleryPage() { - let page = Math.max(document.getElementById("gallery-page").value - 1, 0) - document.getElementById("gallery-page").value = page + let page = Math.max(galleryPageField.value - 1, 0) + galleryPageField.value = page refreshGallery(false) } function incrementGalleryPage() { - document.getElementById("gallery-page").value++ + galleryPageField.value++ refreshGallery(false) } From dae64637e9e97f28675e0b51c79dfaef25b6a634 Mon Sep 17 00:00:00 2001 From: ManInDark <61268856+ManInDark@users.noreply.github.com> Date: Mon, 14 Aug 2023 21:55:05 +0200 Subject: [PATCH 47/61] Changed some document.get ... to variables --- ui/media/js/main.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 24fe92a7..8ef6c644 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -150,6 +150,7 @@ let galleryPrevBtn = document.querySelector("#gallery-prev") let galleryNextBtn = document.querySelector("#gallery-next") let galleryPromptSearchField = document.querySelector("#gallery-prompt-search") let galleryModelSearchField = document.querySelector("#gallery-model-search") +let galleryImageContainer = document.querySelector("#imagecontainer") let positiveEmbeddingText = document.querySelector("#positive-embedding-text") @@ -3183,13 +3184,13 @@ function galleryImage(item) { imageExpandBtn.innerHTML = '' imageExpandBtn.addEventListener("click", function() { function previousImage(img) { - const allImages = Array.from(document.getElementById("imagecontainer").querySelectorAll(".gallery-image img")) + const allImages = Array.from(galleryImageContainer.querySelectorAll(".gallery-image img")) const index = allImages.indexOf(img) return allImages.slice(0, index).reverse()[0] } function nextImage(img) { - const allImages = Array.from(document.getElementById("imagecontainer").querySelectorAll(".gallery-image img")) + const allImages = Array.from(galleryImageContainer.querySelectorAll(".gallery-image img")) const index = allImages.indexOf(img) return allImages.slice(index + 1)[0] } @@ -3249,12 +3250,11 @@ galleryThumbnailSize.addEventListener("input", layoutGallery) window.addEventListener("resize", layoutGallery) function layoutGallery() { - let container = document.getElementById("imagecontainer") let thumbSize = parseFloat(galleryThumbnailSize.value) thumbSize = (10*thumbSize*thumbSize)>>>0 let root = document.querySelector(':root') root.style.setProperty('--gallery-width', thumbSize + "px") - let msnry = new Masonry( container, { + let msnry = new Masonry(galleryImageContainer, { gutter: 10, itemSelector: '.gallery-image', columnWidth: thumbSize, @@ -3269,11 +3269,10 @@ function refreshGallery(newsearch = false) { if (newsearch) { galleryPageField.value = 0 } - let container = document.getElementById("imagecontainer") - container.innerHTML = "" + galleryImageContainer.innerHTML = "" let params = new URLSearchParams({ - prompt: document.getElementById("gallery-prompt-search").value, - model: document.getElementById("gallery-model-search").value, + prompt: galleryPromptSearchField.value, + model: galleryModelSearchField.value, page: galleryPageField.value }) From e46028d4dab072fa1165933f1a6f33618d1999b8 Mon Sep 17 00:00:00 2001 From: JeLuF Date: Mon, 14 Aug 2023 23:41:55 +0200 Subject: [PATCH 48/61] img click opens the image within the main panel, arrow-up-right-from-square opens the single image view --- ui/media/js/main.js | 143 +++++++++++++++++++++++--------------------- 1 file changed, 74 insertions(+), 69 deletions(-) diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 24fe92a7..d97223cd 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -3118,70 +3118,52 @@ const IMAGE_INFO = { const IGNORE_TOKENS = ["None", "none", "Null", "null", "false", "False", null] -function galleryImage(item) { - function galleryDetailTable(table) { - for (const [label, key] of Object.entries(IMAGE_INFO)) { - if (IGNORE_TOKENS.findIndex( k => (k == item[key])) == -1) { - let data = item[key] - if (key == "path") { - data = "…/"+data.split(/[\/\\]/).pop() - } - table.appendChild(htmlToElement(`${label}:${data}`)) +function openImageInNewTab(img, reqData) { + let w = window.open("/gallery-image.html") + w.addEventListener("DOMContentLoaded", () => { + let fimg = w.document.getElementById("focusimg") + fimg.src = img.src + + w.document.body.classList.add(themeField.value) + w.document.getElementById("use_these_settings").addEventListener("click", () => { + restoreTaskToUI({ + batchCount: 1, + numOutputsTotal: 1, + reqBody: reqData + }) + }) + w.document.getElementById("use_as_input").addEventListener("click", () => { + onUseURLasInput(img.src) + showToast("Loaded image as EasyDiffusion input image", 5000, false, w.document) + }) + let table = w.document.createElement("table") + galleryDetailTable(table, reqData) + w.document.getElementById("focusbox").replaceChildren(table) + document.dispatchEvent(new CustomEvent("newGalleryWindow", { detail: w })) + }) +} + +function galleryDetailTable(table, reqData) { + for (const [label, key] of Object.entries(IMAGE_INFO)) { + if (IGNORE_TOKENS.findIndex( k => (k == reqData[key])) == -1) { + let data = reqData[key] + if (key == "path") { + data = "…/"+data.split(/[\/\\]/).pop() } + table.appendChild(htmlToElement(`${label}:${data}`)) } } +} + +function galleryImage(reqData) { let div = document.createElement("div") div.classList.add("gallery-image") - let img = createElement("img", { style: "cursor: zoom-in;", src: "/image/" + item.path}, undefined, undefined) - img.dataset["request"] = JSON.stringify(item) + let img = createElement("img", { style: "cursor: zoom-in;", src: "/image/" + reqData.path}, undefined, undefined) + img.dataset["request"] = JSON.stringify(reqData) - img.addEventListener("click", (event) => { - let w = window.open("/gallery-image.html") - w.addEventListener("DOMContentLoaded", () => { - let fimg = w.document.getElementById("focusimg") - fimg.src = img.src - - w.document.body.classList.add(themeField.value) - w.document.getElementById("use_these_settings").addEventListener("click", () => { - restoreTaskToUI({ - batchCount: 1, - numOutputsTotal: 1, - reqBody: item - }) - }) - w.document.getElementById("use_as_input").addEventListener("click", () => { - onUseURLasInput(img.src) - showToast("Loaded image as EasyDiffusion input image", 5000, false, w.document) - }) - let table = w.document.createElement("table") - galleryDetailTable(table) - w.document.getElementById("focusbox").replaceChildren(table) - document.dispatchEvent(new CustomEvent("newGalleryWindow", { detail: w })) - }) - }) - - let hover = document.createElement("div") - hover.classList.add("gallery-image-hover") - - let infoBtn = document.createElement("button") - infoBtn.classList.add("tertiaryButton") - infoBtn.innerHTML = '' - infoBtn.addEventListener("click", function() { - let table = document.createElement("table") - - galleryDetailTable(table) - - galleryImginfoDialogContent.replaceChildren(table) - galleryImginfoDialog.showModal() - }) - hover.appendChild(infoBtn) - - - let imageExpandBtn=createElement("button", { style: "margin-left: 0.2em;"}, ["tertiaryButton"], undefined) - imageExpandBtn.innerHTML = '' - imageExpandBtn.addEventListener("click", function() { + img.addEventListener("click", function() { function previousImage(img) { const allImages = Array.from(document.getElementById("imagecontainer").querySelectorAll(".gallery-image img")) const index = allImages.indexOf(img) @@ -3207,14 +3189,26 @@ function galleryImage(item) { imageModal(imageModalParameter(img)) }) - hover.appendChild(imageExpandBtn) + let hover = document.createElement("div") + hover.classList.add("gallery-image-hover") + + let infoBtn = document.createElement("button") + infoBtn.classList.add("tertiaryButton") + infoBtn.innerHTML = '' + infoBtn.addEventListener("click", function() { + let table = document.createElement("table") + + galleryDetailTable(table, reqData) + + galleryImginfoDialogContent.replaceChildren(table) + galleryImginfoDialog.showModal() + }) + hover.appendChild(infoBtn) - let openInNewTabBtn = document.createElement("button") - openInNewTabBtn.classList.add("tertiaryButton") - openInNewTabBtn.innerHTML = '' - openInNewTabBtn.style["margin-left"] = "0.2em" + let openInNewTabBtn = createElement("button", {style: "margin-left: 0.2em;"}, ["tertiaryButton"], + htmlToElement('')) openInNewTabBtn.addEventListener("click", (e) => { - window.open(img.src) + openImageInNewTab(img, reqData) }) hover.appendChild(openInNewTabBtn) @@ -3226,7 +3220,19 @@ function galleryImage(item) { showToast("Loaded image as input image") }) + let useSettingsBtn = createElement("button", {}, ["tertiaryButton"], "Use Settings") + useSettingsBtn.addEventListener("click", (e) => { + restoreTaskToUI({ + batchCount: 1, + numOutputsTotal: 1, + reqBody: reqData + }) + showToast("Loaded settings") + }) + hover.appendChild(useAsInputBtn) + hover.appendChild(document.createElement("br")) + hover.appendChild(useSettingsBtn) div.replaceChildren(img, hover) return div @@ -3245,9 +3251,11 @@ galleryImginfoDialog.querySelector("#gallery-imginfo-close-button").addEventList galleryImginfoDialog.close() }) + galleryThumbnailSize.addEventListener("input", layoutGallery) window.addEventListener("resize", layoutGallery) + function layoutGallery() { let container = document.getElementById("imagecontainer") let thumbSize = parseFloat(galleryThumbnailSize.value) @@ -3262,9 +3270,11 @@ function layoutGallery() { }) } + galleryModelSearchField.addEventListener("keyup", debounce(e => refreshGallery(true), 500)) galleryPromptSearchField.addEventListener("keyup", debounce(e => refreshGallery(true), 500)) + function refreshGallery(newsearch = false) { if (newsearch) { galleryPageField.value = 0 @@ -3325,6 +3335,7 @@ function refreshGallery(newsearch = false) { document.getElementById("gallery-refresh").innerText = "Refresh" } + galleryPrevBtn.addEventListener("click", decrementGalleryPage) galleryNextBtn.addEventListener("click", incrementGalleryPage) @@ -3342,14 +3353,8 @@ function decrementGalleryPage() { refreshGallery(false) } + function incrementGalleryPage() { galleryPageField.value++ refreshGallery(false) } - -function gallery_keyDown_handler(event) { - if (event.key === 'Enter') { - event.preventDefault() - refreshGallery(true) - } -} From b4574646fdaa9695b53c036e14961fcd84995180 Mon Sep 17 00:00:00 2001 From: JeLuF Date: Tue, 15 Aug 2023 01:42:53 +0200 Subject: [PATCH 49/61] Fix masonry layout --- ui/media/js/main.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 3ea05ba4..2a394de4 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -3295,10 +3295,10 @@ function refreshGallery(newsearch = false) { return } json.forEach(item => { - container.appendChild(galleryImage(item)) + galleryImageContainer.appendChild(galleryImage(item)) }) // Wait for all images to be loaded - Promise.all(Array.from(container.querySelectorAll("img")).map(img => { + Promise.all(Array.from(galleryImageContainer.querySelectorAll("img")).map(img => { if (img.complete) { return Promise.resolve(img.naturalHeight !== 0) From bd980c0b5e4d3cd51729c78e79a76135d4166979 Mon Sep 17 00:00:00 2001 From: ManInDark <61268856+ManInDark@users.noreply.github.com> Date: Wed, 16 Aug 2023 20:48:40 +0200 Subject: [PATCH 50/61] Added column: workspace --- ui/easydiffusion/easydb/mappings.py | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/easydiffusion/easydb/mappings.py b/ui/easydiffusion/easydb/mappings.py index 214a4c68..9a01f0c9 100644 --- a/ui/easydiffusion/easydb/mappings.py +++ b/ui/easydiffusion/easydb/mappings.py @@ -24,6 +24,7 @@ class GalleryImage(Base): use_upscale = Column(String) prompt = Column(String) negative_prompt = Column(String) + workspace = Column(String, server_default="default") time_created = Column(DateTime(timezone=True), server_default=func.now()) nsfw = Column(Boolean, server_default=None) From 4dc93186dad67c72112084e9f6410f9a486006fa Mon Sep 17 00:00:00 2001 From: JeLuF Date: Thu, 17 Aug 2023 23:28:32 +0200 Subject: [PATCH 51/61] Switch to disable gallery --- ui/easydiffusion/bucket_manager.py | 4 +-- ui/easydiffusion/types.py | 1 + ui/easydiffusion/utils/save_utils.py | 46 +++++++++++++++------------- ui/media/css/main.css | 3 ++ ui/media/js/auto-save.js | 1 + ui/media/js/main.js | 11 ++++++- ui/media/js/parameters.js | 9 ++++++ 7 files changed, 50 insertions(+), 25 deletions(-) diff --git a/ui/easydiffusion/bucket_manager.py b/ui/easydiffusion/bucket_manager.py index 93bbbcd6..6bf3b7e1 100644 --- a/ui/easydiffusion/bucket_manager.py +++ b/ui/easydiffusion/bucket_manager.py @@ -100,9 +100,9 @@ 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: int = 0, images_per_page: int = 50, db: Session = Depends(get_db)): + def get_all_images(prompt: str = "", model: str = "", page: int = 0, images_per_page: int = 50, workspace : str = "default", db: Session = Depends(get_db)): from easydiffusion.easydb.mappings import GalleryImage - images = db.query(GalleryImage).order_by(GalleryImage.time_created.desc()) + images = db.query(GalleryImage).filter(GalleryImage.workspace == workspace).order_by(GalleryImage.time_created.desc()) if prompt != "": images = images.filter(GalleryImage.prompt.like("%"+prompt+"%")) if model != "": diff --git a/ui/easydiffusion/types.py b/ui/easydiffusion/types.py index fe936ca2..9835d71b 100644 --- a/ui/easydiffusion/types.py +++ b/ui/easydiffusion/types.py @@ -85,6 +85,7 @@ class TaskData(BaseModel): clip_skip: bool = False codeformer_upscale_faces: bool = False codeformer_fidelity: float = 0.5 + use_gallery: str = None class MergeRequest(BaseModel): diff --git a/ui/easydiffusion/utils/save_utils.py b/ui/easydiffusion/utils/save_utils.py index 7f668280..84a6c800 100644 --- a/ui/easydiffusion/utils/save_utils.py +++ b/ui/easydiffusion/utils/save_utils.py @@ -160,28 +160,30 @@ def save_images_to_disk( from easydiffusion.easydb.mappings import GalleryImage from easydiffusion.easydb.database import SessionLocal - session = SessionLocal() - session.add(GalleryImage( - path = path_i, - seed = metadata_entries[i]["seed"], - use_stable_diffusion_model = metadata_entries[i]["use_stable_diffusion_model"], - clip_skip = metadata_entries[i]["clip_skip"], - use_vae_model = metadata_entries[i]["use_vae_model"], - sampler_name = metadata_entries[i]["sampler_name"], - width = metadata_entries[i]["width"], - height = metadata_entries[i]["height"], - num_inference_steps = metadata_entries[i]["num_inference_steps"], - guidance_scale = metadata_entries[i]["guidance_scale"], - lora = createLoraString(metadata_entries, i), - use_hypernetwork_model = metadata_entries[i]["use_hypernetwork_model"], - tiling = metadata_entries[i]["tiling"], - use_face_correction = metadata_entries[i]["use_face_correction"], - use_upscale = metadata_entries[i]["use_upscale"], - prompt = metadata_entries[i]["prompt"], - negative_prompt = metadata_entries[i]["negative_prompt"] - )) - session.commit() - session.close() + if task_data.use_gallery != None: + session = SessionLocal() + session.add(GalleryImage( + path = path_i, + seed = metadata_entries[i]["seed"], + use_stable_diffusion_model = metadata_entries[i]["use_stable_diffusion_model"], + clip_skip = metadata_entries[i]["clip_skip"], + use_vae_model = metadata_entries[i]["use_vae_model"], + sampler_name = metadata_entries[i]["sampler_name"], + width = metadata_entries[i]["width"], + height = metadata_entries[i]["height"], + num_inference_steps = metadata_entries[i]["num_inference_steps"], + guidance_scale = metadata_entries[i]["guidance_scale"], + lora = createLoraString(metadata_entries, i), + use_hypernetwork_model = metadata_entries[i]["use_hypernetwork_model"], + tiling = metadata_entries[i]["tiling"], + use_face_correction = metadata_entries[i]["use_face_correction"], + use_upscale = metadata_entries[i]["use_upscale"], + prompt = metadata_entries[i]["prompt"], + negative_prompt = metadata_entries[i]["negative_prompt"], + workspace = task_data.use_gallery + )) + session.commit() + session.close() if task_data.metadata_output_format: for metadata_output_format in task_data.metadata_output_format.split(","): diff --git a/ui/media/css/main.css b/ui/media/css/main.css index e7f1f6e1..2ef9b9ac 100644 --- a/ui/media/css/main.css +++ b/ui/media/css/main.css @@ -1031,6 +1031,9 @@ input::file-selector-button { .input-toggle > input:checked + label { background: var(--accent-color); } +.input-toggle > input:disabled + label { + background: var(--background-color1); +} .input-toggle > input:checked + label:before { right: calc(var(--input-border-size) + var(--input-switch-padding)); opacity: 1; diff --git a/ui/media/js/auto-save.js b/ui/media/js/auto-save.js index 56364a3d..2631d4c4 100644 --- a/ui/media/js/auto-save.js +++ b/ui/media/js/auto-save.js @@ -14,6 +14,7 @@ const SETTINGS_IDS_LIST = [ "num_outputs_parallel", "stable_diffusion_model", "clip_skip", + "use_gallery", "vae_model", "hypernetwork_model", "sampler_name", diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 2a394de4..84462da3 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -199,6 +199,7 @@ let undoButton = document.querySelector("#undo") let undoBuffer = [] const UNDO_LIMIT = 20 const MAX_IMG_UNDO_ENTRIES = 5 +var GALLERY_NAME="default" let IMAGE_STEP_SIZE = 64 @@ -1542,6 +1543,7 @@ function getCurrentUserRequest() { output_quality: parseInt(outputQualityField.value), output_lossless: outputLosslessField.checked, metadata_output_format: metadataOutputFormatField.value, + use_gallery: useGalleryField.checked?GALLERY_NAME:null, original_prompt: promptField.value, active_tags: activeTags.map((x) => x.name), inactive_tags: activeTags.filter((tag) => tag.inactive === true).map((x) => x.name), @@ -2008,6 +2010,7 @@ function onDimensionChange() { diskPathField.disabled = !saveToDiskField.checked metadataOutputFormatField.disabled = !saveToDiskField.checked +useGalleryField.disabled = !saveToDiskField.checked gfpganModelField.disabled = !useFaceCorrectionField.checked useFaceCorrectionField.addEventListener("change", function(e) { @@ -3273,7 +3276,12 @@ function layoutGallery() { galleryModelSearchField.addEventListener("keyup", debounce(e => refreshGallery(true), 500)) galleryPromptSearchField.addEventListener("keyup", debounce(e => refreshGallery(true), 500)) - +galleryPageField.addEventListener("keyup", e => { + if (e.code === "Enter") { + e.preventDefault() + refreshGallery(false) + } +}) function refreshGallery(newsearch = false) { if (newsearch) { @@ -3281,6 +3289,7 @@ function refreshGallery(newsearch = false) { } galleryImageContainer.innerHTML = "" let params = new URLSearchParams({ + workspace: GALLERY_NAME, prompt: galleryPromptSearchField.value, model: galleryModelSearchField.value, page: galleryPageField.value diff --git a/ui/media/js/parameters.js b/ui/media/js/parameters.js index 7fdf8632..ce91c045 100644 --- a/ui/media/js/parameters.js +++ b/ui/media/js/parameters.js @@ -97,6 +97,13 @@ var PARAMETERS = [ }, ], }, + { + id: "use_gallery", + type: ParameterType.checkbox, + label: "Save images to the gallery", + note: "Stores metadata of all images into a database so that they show up on the gallery tab.", + default: false, + }, { id: "block_nsfw", type: ParameterType.checkbox, @@ -421,6 +428,7 @@ let uiOpenBrowserOnStartField = document.querySelector("#ui_open_browser_on_star let confirmDangerousActionsField = document.querySelector("#confirm_dangerous_actions") let testDiffusers = document.querySelector("#test_diffusers") let profileNameField = document.querySelector("#profileName") +let useGalleryField = document.querySelector("#use_gallery") let saveSettingsBtn = document.querySelector("#save-system-settings-btn") @@ -560,6 +568,7 @@ function applySettingsFromConfig(config) { saveToDiskField.addEventListener("change", function(e) { diskPathField.disabled = !this.checked metadataOutputFormatField.disabled = !this.checked + useGalleryField.disabled = !this.checked }) function getCurrentRenderDeviceSelection() { From 49445d6473270624367cfa341c2b99c67d273cd4 Mon Sep 17 00:00:00 2001 From: ManInDark <61268856+ManInDark@users.noreply.github.com> Date: Mon, 26 Jun 2023 19:36:26 +0200 Subject: [PATCH 52/61] Added Progess to Page Title as mentioned in #307 --- ui/media/js/main.js | 339 +++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 336 insertions(+), 3 deletions(-) diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 101a88e7..9bfb8ef3 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -62,6 +62,7 @@ const taskConfigSetup = { let imageCounter = 0 let imageRequest = [] +let SHOW_PROGRESS = true let promptField = document.querySelector("#prompt") let promptsFromFileSelector = document.querySelector("#prompt_from_file") @@ -1044,13 +1045,345 @@ function makeImage() { newTaskRequests.forEach(createTask) updateInitialText() +} - const countBeforeBanner = localStorage.getItem("countBeforeBanner") || 1 - if (countBeforeBanner <= 0) { - // supportBanner.classList.remove("displayNone") +async function onIdle() { + const serverCapacity = SD.serverCapacity + if (pauseClient === true) { + await resumeClient() + } + + for (const taskEntry of getUncompletedTaskEntries()) { + if (SD.activeTasks.size >= serverCapacity) { + break + } + const task = htmlTaskMap.get(taskEntry) + if (!task) { + const taskStatusLabel = taskEntry.querySelector(".taskStatusLabel") + taskStatusLabel.style.display = "none" + continue + } + await onTaskStart(task) + } +} + +function getTaskUpdater(task, reqBody, outputContainer) { + const outputMsg = task["outputMsg"] + const progressBar = task["progressBar"] + const progressBarInner = progressBar.querySelector("div") + + const batchCount = task.batchCount + let lastStatus = undefined + return async function(event) { + if (this.status !== lastStatus) { + lastStatus = this.status + switch (this.status) { + case SD.TaskStatus.pending: + task["taskStatusLabel"].innerText = "Pending" + task["taskStatusLabel"].classList.add("waitingTaskLabel") + break + case SD.TaskStatus.waiting: + task["taskStatusLabel"].innerText = "Waiting" + task["taskStatusLabel"].classList.add("waitingTaskLabel") + task["taskStatusLabel"].classList.remove("activeTaskLabel") + break + case SD.TaskStatus.processing: + case SD.TaskStatus.completed: + task["taskStatusLabel"].innerText = "Processing" + task["taskStatusLabel"].classList.add("activeTaskLabel") + task["taskStatusLabel"].classList.remove("waitingTaskLabel") + break + case SD.TaskStatus.stopped: + break + case SD.TaskStatus.failed: + if (!SD.isServerAvailable()) { + logError( + "Stable Diffusion is still starting up, please wait. If this goes on beyond a few minutes, Stable Diffusion has probably crashed. Please check the error message in the command-line window.", + event, + outputMsg + ) + } else if (typeof event?.response === "object") { + let msg = "Stable Diffusion had an error reading the response:
"
+                        if (this.exception) {
+                            msg += `Error: ${this.exception.message}
`
+                        }
+                        try {
+                            // 'Response': body stream already read
+                            msg += "Read: " + (await event.response.text())
+                        } catch (e) {
+                            msg += "Unexpected end of stream. "
+                        }
+                        const bufferString = event.reader.bufferedString
+                        if (bufferString) {
+                            msg += "Buffered data: " + bufferString
+                        }
+                        msg += "
" + logError(msg, event, outputMsg) + } + break + } + } + if ("update" in event) { + const stepUpdate = event.update + if (!("step" in stepUpdate)) { + return + } + // task.instances can be a mix of different tasks with uneven number of steps (Render Vs Filter Tasks) + const overallStepCount = + task.instances.reduce( + (sum, instance) => + sum + + (instance.isPending + ? Math.max(0, instance.step || stepUpdate.step) / + (instance.total_steps || stepUpdate.total_steps) + : 1), + 0 // Initial value + ) * stepUpdate.total_steps // Scale to current number of steps. + const totalSteps = task.instances.reduce( + (sum, instance) => sum + (instance.total_steps || stepUpdate.total_steps), + stepUpdate.total_steps * (batchCount - task.batchesDone) // Initial value at (unstarted task count * Nbr of steps) + ) + const percent = Math.min(100, 100 * (overallStepCount / totalSteps)).toFixed(0) + if (SHOW_PROGRESS) { + document.title = `${percent}% - Easy Diffusion` + } + + const timeTaken = stepUpdate.step_time // sec + const stepsRemaining = Math.max(0, totalSteps - overallStepCount) + const timeRemaining = timeTaken < 0 ? "" : millisecondsToStr(stepsRemaining * timeTaken * 1000) + outputMsg.innerHTML = `Batch ${task.batchesDone} of ${batchCount}. Generating image(s): ${percent}%. Time remaining (approx): ${timeRemaining}` + outputMsg.style.display = "block" + progressBarInner.style.width = `${percent}%` + + if (stepUpdate.output) { + showImages(reqBody, stepUpdate, outputContainer, true) + } + } + } +} + +function abortTask(task) { + if (!task.isProcessing) { + return false + } + task.isProcessing = false + task.progressBar.classList.remove("active") + task["taskStatusLabel"].style.display = "none" + task["stopTask"].innerHTML = ' Remove' + if (!task.instances?.some((r) => r.isPending)) { + return + } + task.instances.forEach((instance) => { + try { + instance.abort() + } catch (e) { + console.error(e) + } + }) + if (SHOW_PROGRESS) { + document.title = "Stopped - Easy Diffusion" + } +} + +function onTaskErrorHandler(task, reqBody, instance, reason) { + if (!task.isProcessing) { + return + } + console.log("Render request %o, Instance: %o, Error: %s", reqBody, instance, reason) + abortTask(task) + const outputMsg = task["outputMsg"] + logError( + "Stable Diffusion had an error. Please check the logs in the command-line window.

" + + reason + + "
" +
+            reason.stack +
+            "
", + task, + outputMsg + ) + setStatus("request", "error", "error") +} + +function onTaskCompleted(task, reqBody, instance, outputContainer, stepUpdate) { + if (typeof stepUpdate === "object") { + if (stepUpdate.status === "succeeded") { + showImages(reqBody, stepUpdate, outputContainer, false) + } else { + task.isProcessing = false + const outputMsg = task["outputMsg"] + let msg = "" + if ("detail" in stepUpdate && typeof stepUpdate.detail === "string" && stepUpdate.detail.length > 0) { + msg = stepUpdate.detail + if (msg.toLowerCase().includes("out of memory")) { + msg += `

+ Suggestions: +
+ 1. If you have set an initial image, please try reducing its dimension to ${MAX_INIT_IMAGE_DIMENSION}x${MAX_INIT_IMAGE_DIMENSION} or smaller.
+ 2. Try picking a lower level in the 'GPU Memory Usage' setting (in the 'Settings' tab).
+ 3. Try generating a smaller image.
` + } else if (msg.includes("DefaultCPUAllocator: not enough memory")) { + msg += `

+ Reason: Your computer is running out of system RAM! +

+ Suggestions: +
+ 1. Try closing unnecessary programs and browser tabs.
+ 2. If that doesn't help, please increase your computer's virtual memory by following these steps for + Windows or + Linux.
+ 3. Try restarting your computer.
` + } + } else { + msg = `Unexpected Read Error:
StepUpdate: ${JSON.stringify(stepUpdate, undefined, 4)}
` + } + logError(msg, stepUpdate, outputMsg) + } + } + if (task.isProcessing && task.batchesDone < task.batchCount) { + task["taskStatusLabel"].innerText = "Pending" + task["taskStatusLabel"].classList.add("waitingTaskLabel") + task["taskStatusLabel"].classList.remove("activeTaskLabel") + return + } + if ("instances" in task && task.instances.some((ins) => ins != instance && ins.isPending)) { + return + } + + task.isProcessing = false + task["stopTask"].innerHTML = ' Remove' + task["taskStatusLabel"].style.display = "none" + + let time = millisecondsToStr(Date.now() - task.startTime) + + if (task.batchesDone == task.batchCount) { + if (!task.outputMsg.innerText.toLowerCase().includes("error")) { + task.outputMsg.innerText = `Processed ${task.numOutputsTotal} images in ${time}` + } + task.progressBar.style.height = "0px" + task.progressBar.style.border = "0px solid var(--background-color3)" + task.progressBar.classList.remove("active") + setStatus("request", "done", "success") } else { localStorage.setItem("countBeforeBanner", countBeforeBanner - 1) } + + if (randomSeedField.checked) { + seedField.value = task.seed + } + + if (SD.activeTasks.size > 0) { + return + } + const uncompletedTasks = getUncompletedTaskEntries() + if (uncompletedTasks && uncompletedTasks.length > 0) { + return + } + + if (pauseClient) { + resumeBtn.click() + } + renderButtons.style.display = "none" + renameMakeImageButton() + + if (isSoundEnabled()) { + playSound() + } + if (SHOW_PROGRESS) { + document.title = "Completed - Easy Diffusion" + } +} + +async function onTaskStart(task) { + if (!task.isProcessing || task.batchesDone >= task.batchCount) { + return + } + + if (typeof task.startTime !== "number") { + task.startTime = Date.now() + } + if (!("instances" in task)) { + task["instances"] = [] + } + + task["stopTask"].innerHTML = ' Stop' + task["taskStatusLabel"].innerText = "Starting" + task["taskStatusLabel"].classList.add("waitingTaskLabel") + + let newTaskReqBody = task.reqBody + if (task.batchCount > 1) { + // Each output render batch needs it's own task reqBody instance to avoid altering the other runs after they are completed. + newTaskReqBody = Object.assign({}, task.reqBody) + if (task.batchesDone == task.batchCount - 1) { + // Last batch of the task + // If the number of parallel jobs is no factor of the total number of images, the last batch must create less than "parallel jobs count" images + // E.g. with numOutputsTotal = 6 and num_outputs = 5, the last batch shall only generate 1 image. + newTaskReqBody.num_outputs = task.numOutputsTotal - task.reqBody.num_outputs * (task.batchCount - 1) + } + } + + const startSeed = task.seed || newTaskReqBody.seed + const genSeeds = Boolean( + typeof newTaskReqBody.seed !== "number" || (newTaskReqBody.seed === task.seed && task.numOutputsTotal > 1) + ) + if (genSeeds) { + newTaskReqBody.seed = parseInt(startSeed) + task.batchesDone * task.reqBody.num_outputs + } + + // Update the seed *before* starting the processing so it's retained if user stops the task + if (randomSeedField.checked) { + seedField.value = task.seed + } + + const outputContainer = document.createElement("div") + outputContainer.className = "img-batch" + task.outputContainer.insertBefore(outputContainer, task.outputContainer.firstChild) + + const eventInfo = { reqBody: newTaskReqBody } + const callbacksPromises = PLUGINS["TASK_CREATE"].map((hook) => { + if (typeof hook !== "function") { + console.error("The provided TASK_CREATE hook is not a function. Hook: %o", hook) + return Promise.reject(new Error("hook is not a function.")) + } + try { + return Promise.resolve(hook.call(task, eventInfo)) + } catch (err) { + console.error(err) + return Promise.reject(err) + } + }) + await Promise.allSettled(callbacksPromises) + let instance = eventInfo.instance + if (!instance) { + const factory = PLUGINS.OUTPUTS_FORMATS.get(eventInfo.reqBody?.output_format || newTaskReqBody.output_format) + if (factory) { + instance = await Promise.resolve(factory(eventInfo.reqBody || newTaskReqBody)) + } + if (!instance) { + console.error( + `${factory ? "Factory " + String(factory) : "No factory defined"} for output format ${eventInfo.reqBody + ?.output_format || newTaskReqBody.output_format}. Instance is ${instance || + "undefined"}. Using default renderer.` + ) + instance = new SD.RenderTask(eventInfo.reqBody || newTaskReqBody) + } + } + + task["instances"].push(instance) + task.batchesDone++ + + instance.enqueue(getTaskUpdater(task, newTaskReqBody, outputContainer)).then( + (renderResult) => { + onTaskCompleted(task, newTaskReqBody, instance, outputContainer, renderResult) + }, + (reason) => { + onTaskErrorHandler(task, newTaskReqBody, instance, reason) + } + ) + + setStatus("request", "fetching..") + renderButtons.style.display = "flex" + renameMakeImageButton() + updateInitialText() } /* Hover effect for the init image in the task list */ From 19405ee960339bde924ff6137d87d95968f6b579 Mon Sep 17 00:00:00 2001 From: ManInDark <61268856+ManInDark@users.noreply.github.com> Date: Thu, 29 Jun 2023 00:28:17 +0200 Subject: [PATCH 53/61] Changed from showing percentage to how many images are left to create --- ui/media/js/main.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 9bfb8ef3..6c138061 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -1144,10 +1144,7 @@ function getTaskUpdater(task, reqBody, outputContainer) { stepUpdate.total_steps * (batchCount - task.batchesDone) // Initial value at (unstarted task count * Nbr of steps) ) const percent = Math.min(100, 100 * (overallStepCount / totalSteps)).toFixed(0) - if (SHOW_PROGRESS) { - document.title = `${percent}% - Easy Diffusion` - } - + const timeTaken = stepUpdate.step_time // sec const stepsRemaining = Math.max(0, totalSteps - overallStepCount) const timeRemaining = timeTaken < 0 ? "" : millisecondsToStr(stepsRemaining * timeTaken * 1000) @@ -1289,6 +1286,15 @@ function onTaskCompleted(task, reqBody, instance, outputContainer, stepUpdate) { playSound() } if (SHOW_PROGRESS) { + updateTitle() + } +} + +function updateTitle() { + let img_remaining = [...document.querySelectorAll("div .imageTaskContainer").entries()].map(c => htmlTaskMap.get(c[1])).filter(task => task.isProcessing).map(task => task.numOutputsTotal - Math.max(0, (task.batchesDone - 1) * task.reqBody.num_outputs)).reduce((total, value) => total + value, 0); + if (img_remaining > 0) { + document.title = `${img_remaining} - Easy Diffusion`; + } else { document.title = "Completed - Easy Diffusion" } } @@ -1384,6 +1390,9 @@ async function onTaskStart(task) { renderButtons.style.display = "flex" renameMakeImageButton() updateInitialText() + if (SHOW_PROGRESS) { + updateTitle(); + } } /* Hover effect for the init image in the task list */ From d90a7de8ba4507f047997e154f4e39d4c7953a01 Mon Sep 17 00:00:00 2001 From: ManInDark <61268856+ManInDark@users.noreply.github.com> Date: Thu, 29 Jun 2023 12:00:59 +0200 Subject: [PATCH 54/61] Removed the option to disable it --- ui/media/js/main.js | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 6c138061..2beef40e 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -62,7 +62,6 @@ const taskConfigSetup = { let imageCounter = 0 let imageRequest = [] -let SHOW_PROGRESS = true let promptField = document.querySelector("#prompt") let promptsFromFileSelector = document.querySelector("#prompt_from_file") @@ -1177,9 +1176,7 @@ function abortTask(task) { console.error(e) } }) - if (SHOW_PROGRESS) { - document.title = "Stopped - Easy Diffusion" - } + document.title = "Stopped - Easy Diffusion" } function onTaskErrorHandler(task, reqBody, instance, reason) { @@ -1285,9 +1282,7 @@ function onTaskCompleted(task, reqBody, instance, outputContainer, stepUpdate) { if (isSoundEnabled()) { playSound() } - if (SHOW_PROGRESS) { - updateTitle() - } + updateTitle() } function updateTitle() { @@ -1390,9 +1385,7 @@ async function onTaskStart(task) { renderButtons.style.display = "flex" renameMakeImageButton() updateInitialText() - if (SHOW_PROGRESS) { - updateTitle(); - } + updateTitle(); } /* Hover effect for the init image in the task list */ From fea8500d401563b55dd5a875b601de840766ea9a Mon Sep 17 00:00:00 2001 From: ManInDark <61268856+ManInDark@users.noreply.github.com> Date: Thu, 29 Jun 2023 14:31:28 +0200 Subject: [PATCH 55/61] Fixed some remaining issues --- ui/media/js/main.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 2beef40e..4cced947 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -1043,6 +1043,7 @@ function makeImage() { newTaskRequests.forEach(setEmbeddings) newTaskRequests.forEach(createTask) + updateTitle() updateInitialText() } @@ -1143,7 +1144,7 @@ function getTaskUpdater(task, reqBody, outputContainer) { stepUpdate.total_steps * (batchCount - task.batchesDone) // Initial value at (unstarted task count * Nbr of steps) ) const percent = Math.min(100, 100 * (overallStepCount / totalSteps)).toFixed(0) - + const timeTaken = stepUpdate.step_time // sec const stepsRemaining = Math.max(0, totalSteps - overallStepCount) const timeRemaining = timeTaken < 0 ? "" : millisecondsToStr(stepsRemaining * timeTaken * 1000) @@ -1151,6 +1152,7 @@ function getTaskUpdater(task, reqBody, outputContainer) { outputMsg.style.display = "block" progressBarInner.style.width = `${percent}%` + updateTitle() if (stepUpdate.output) { showImages(reqBody, stepUpdate, outputContainer, true) } @@ -1176,7 +1178,9 @@ function abortTask(task) { console.error(e) } }) - document.title = "Stopped - Easy Diffusion" + if (task.batchesDone > 0) { + document.title = "Stopped - Easy Diffusion" + } } function onTaskErrorHandler(task, reqBody, instance, reason) { @@ -1385,7 +1389,6 @@ async function onTaskStart(task) { renderButtons.style.display = "flex" renameMakeImageButton() updateInitialText() - updateTitle(); } /* Hover effect for the init image in the task list */ From f18d4413e8ad0c2eb7cad4e97c860520266a5542 Mon Sep 17 00:00:00 2001 From: ManInDark <61268856+ManInDark@users.noreply.github.com> Date: Fri, 30 Jun 2023 23:21:07 +0200 Subject: [PATCH 56/61] Applied changes proposed by @cmdr2 --- ui/media/js/main.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 4cced947..7bef003f 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -1179,7 +1179,7 @@ function abortTask(task) { } }) if (task.batchesDone > 0) { - document.title = "Stopped - Easy Diffusion" + document.title = "Easy Diffusion" } } @@ -1290,7 +1290,10 @@ function onTaskCompleted(task, reqBody, instance, outputContainer, stepUpdate) { } function updateTitle() { - let img_remaining = [...document.querySelectorAll("div .imageTaskContainer").entries()].map(c => htmlTaskMap.get(c[1])).filter(task => task.isProcessing).map(task => task.numOutputsTotal - Math.max(0, (task.batchesDone - 1) * task.reqBody.num_outputs)).reduce((total, value) => total + value, 0); + let all_tasks = [...document.querySelectorAll("div .imageTaskContainer").entries()].map(c => htmlTaskMap.get(c[1])) + let tasks_to_be_run = all_tasks.filter(task => task.isProcessing) + let img_remaining_per_task = tasks_to_be_run.map(task => task.numOutputsTotal - Math.max(0, (task.batchesDone - 1) * task.reqBody.num_outputs)) + let img_remaining = img_remaining_per_task.reduce((total, value) => total + value, 0); if (img_remaining > 0) { document.title = `${img_remaining} - Easy Diffusion`; } else { From aa3347ad13e4fc29273f94dbb55685c9eb28b736 Mon Sep 17 00:00:00 2001 From: ManInDark <61268856+ManInDark@users.noreply.github.com> Date: Mon, 10 Jul 2023 00:55:21 +0200 Subject: [PATCH 57/61] Fixed miscounting problem by implementing suggestion by @madrang --- ui/media/js/main.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 7bef003f..31ad30f5 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -1292,7 +1292,13 @@ function onTaskCompleted(task, reqBody, instance, outputContainer, stepUpdate) { function updateTitle() { let all_tasks = [...document.querySelectorAll("div .imageTaskContainer").entries()].map(c => htmlTaskMap.get(c[1])) let tasks_to_be_run = all_tasks.filter(task => task.isProcessing) - let img_remaining_per_task = tasks_to_be_run.map(task => task.numOutputsTotal - Math.max(0, (task.batchesDone - 1) * task.reqBody.num_outputs)) + let img_remaining_per_task = tasks_to_be_run.map(task => { return task.numOutputsTotal - Math.max(0, (task.instances || []).reduce((total, value) => { + if (value.status === 'completed') { + return total + 1 + } else { + return total + } + }, 0) * task.reqBody.num_outputs) } ) let img_remaining = img_remaining_per_task.reduce((total, value) => total + value, 0); if (img_remaining > 0) { document.title = `${img_remaining} - Easy Diffusion`; From 2dbd68e08c77d937f04f6ef3c668d09e3a20bae7 Mon Sep 17 00:00:00 2001 From: ManInDark <61268856+ManInDark@users.noreply.github.com> Date: Thu, 23 Nov 2023 23:02:42 +0100 Subject: [PATCH 58/61] Fix Save Data --- ui/easydiffusion/utils/save_utils.py | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/easydiffusion/utils/save_utils.py b/ui/easydiffusion/utils/save_utils.py index 4a5ac733..15d8f8b9 100644 --- a/ui/easydiffusion/utils/save_utils.py +++ b/ui/easydiffusion/utils/save_utils.py @@ -199,8 +199,8 @@ def save_images_to_disk( session.commit() session.close() - if task_data.metadata_output_format: - for metadata_output_format in task_data.metadata_output_format.split(","): + if save_data.metadata_output_format: + for metadata_output_format in save_data.metadata_output_format.split(","): if metadata_output_format.lower() in ["json", "txt", "embed"]: save_dicts( metadata_entries, From 62f562f630ab33287caec12149f37d1afd401f56 Mon Sep 17 00:00:00 2001 From: ManInDark <61268856+ManInDark@users.noreply.github.com> Date: Thu, 23 Nov 2023 23:09:55 +0100 Subject: [PATCH 59/61] Fix hypernetwork_model --- ui/easydiffusion/utils/save_utils.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/easydiffusion/utils/save_utils.py b/ui/easydiffusion/utils/save_utils.py index 15d8f8b9..d5e59d29 100644 --- a/ui/easydiffusion/utils/save_utils.py +++ b/ui/easydiffusion/utils/save_utils.py @@ -188,7 +188,7 @@ def save_images_to_disk( num_inference_steps = metadata_entries[i]["num_inference_steps"], guidance_scale = metadata_entries[i]["guidance_scale"], lora = createLoraString(metadata_entries, i), - use_hypernetwork_model = metadata_entries[i]["use_hypernetwork_model"], + use_hypernetwork_model = metadata_entries[i]["use_hypernetwork_model"] if "use_hypernetwork_model" in metadata_entries[i] else None, tiling = metadata_entries[i]["tiling"], use_face_correction = metadata_entries[i]["use_face_correction"], use_upscale = metadata_entries[i]["use_upscale"], From 377e9f86b82332ce4a488fad6720bd08ad13f119 Mon Sep 17 00:00:00 2001 From: ManInDark <61268856+ManInDark@users.noreply.github.com> Date: Thu, 23 Nov 2023 23:13:46 +0100 Subject: [PATCH 60/61] Fixed main.css --- ui/media/css/main.css | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/media/css/main.css b/ui/media/css/main.css index f192cab8..3b59798d 100644 --- a/ui/media/css/main.css +++ b/ui/media/css/main.css @@ -2042,6 +2042,7 @@ div#enlarge-buttons { border-radius: 4pt; padding-top: 6pt; color: var(--small-label-color); +} /* Gallery CSS */ button:disabled { From c304791d1c79a6e6cb97738b77b157aadae01be5 Mon Sep 17 00:00:00 2001 From: ManInDark <61268856+ManInDark@users.noreply.github.com> Date: Tue, 13 Feb 2024 21:37:12 +0100 Subject: [PATCH 61/61] =?UTF-8?q?Fixed=20trim=20=E2=86=92=20strip?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/easydiffusion/utils/save_utils.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/easydiffusion/utils/save_utils.py b/ui/easydiffusion/utils/save_utils.py index d5e59d29..4bf66261 100644 --- a/ui/easydiffusion/utils/save_utils.py +++ b/ui/easydiffusion/utils/save_utils.py @@ -167,7 +167,7 @@ def save_images_to_disk( loraString = "" for j in range(len(metadata_entries[i]["use_lora_model"])): loraString += metadata_entries[i]["use_lora_model"][j] + ":" + str(metadata_entries[i]["lora_alpha"][j]) + " " - return loraString.trim() + return loraString.strip() else: return metadata_entries[i]["use_lora_model"] + ":" + str(metadata_entries[i]["lora_alpha"])