mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2025-06-03 08:36:12 +02:00
commit
4dbdb802b6
1
.gitignore
vendored
1
.gitignore
vendored
@ -3,3 +3,4 @@ installer
|
||||
installer.tar
|
||||
dist
|
||||
.idea/*
|
||||
node_modules/*
|
9
.prettierignore
Normal file
9
.prettierignore
Normal file
@ -0,0 +1,9 @@
|
||||
*.min.*
|
||||
*.py
|
||||
*.json
|
||||
*.html
|
||||
/*
|
||||
!/ui
|
||||
/ui/easydiffusion
|
||||
!/ui/plugins
|
||||
!/ui/media
|
7
.prettierrc.json
Normal file
7
.prettierrc.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"printWidth": 120,
|
||||
"tabWidth": 4,
|
||||
"semi": false,
|
||||
"arrowParens": "always",
|
||||
"trailingComma": "es5"
|
||||
}
|
@ -21,6 +21,7 @@
|
||||
Our focus continues to remain on an easy installation experience, and an easy user-interface. While still remaining pretty powerful, in terms of features and speed.
|
||||
|
||||
### Detailed changelog
|
||||
* 2.5.35 - 3 May 2023 - (beta-only) First round of VRAM Optimizations for the "Test Diffusers" version. This change significantly reduces the amount of VRAM used by the diffusers version during image generation. The VRAM usage is still not equal to the "non-diffusers" version, but more optimizations are coming soon.
|
||||
* 2.5.34 - 22 Apr 2023 - Don't start the browser in an incognito new profile (on Windows). Thanks @JeLuf.
|
||||
* 2.5.33 - 21 Apr 2023 - Install PyTorch 2.0 on new installations (on Windows and Linux).
|
||||
* 2.5.32 - 19 Apr 2023 - Automatically check for black images, and set full-precision if necessary (for attn). This means custom models based on Stable Diffusion v2.1 will just work, without needing special command-line arguments or editing of yaml config files.
|
||||
|
9
package.json
Normal file
9
package.json
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"scripts": {
|
||||
"prettier-fix": "npx prettier --write \"./**/*.js\"",
|
||||
"prettier-check": "npx prettier --check \"./**/*.js\""
|
||||
},
|
||||
"devDependencies": {
|
||||
"prettier": "^1.19.1"
|
||||
}
|
||||
}
|
@ -18,7 +18,7 @@ os_name = platform.system()
|
||||
modules_to_check = {
|
||||
"torch": ("1.11.0", "1.13.1", "2.0.0"),
|
||||
"torchvision": ("0.12.0", "0.14.1", "0.15.1"),
|
||||
"sdkit": "1.0.81",
|
||||
"sdkit": "1.0.84",
|
||||
"stable-diffusion-sdkit": "2.1.4",
|
||||
"rich": "12.6.0",
|
||||
"uvicorn": "0.19.0",
|
||||
|
@ -1,17 +1,16 @@
|
||||
import json
|
||||
import logging
|
||||
import os
|
||||
import socket
|
||||
import sys
|
||||
import json
|
||||
import traceback
|
||||
import logging
|
||||
import shlex
|
||||
import urllib
|
||||
from rich.logging import RichHandler
|
||||
|
||||
from sdkit.utils import log as sdkit_log # hack, so we can overwrite the log config
|
||||
import warnings
|
||||
|
||||
from easydiffusion import task_manager
|
||||
from easydiffusion.utils import log
|
||||
from rich.logging import RichHandler
|
||||
from sdkit.utils import log as sdkit_log # hack, so we can overwrite the log config
|
||||
|
||||
# Remove all handlers associated with the root logger object.
|
||||
for handler in logging.root.handlers[:]:
|
||||
@ -55,15 +54,42 @@ APP_CONFIG_DEFAULTS = {
|
||||
},
|
||||
}
|
||||
|
||||
IMAGE_EXTENSIONS = [".png", ".apng", ".jpg", ".jpeg", ".jfif", ".pjpeg", ".pjp", ".jxl", ".gif", ".webp", ".avif", ".svg"]
|
||||
IMAGE_EXTENSIONS = [
|
||||
".png",
|
||||
".apng",
|
||||
".jpg",
|
||||
".jpeg",
|
||||
".jfif",
|
||||
".pjpeg",
|
||||
".pjp",
|
||||
".jxl",
|
||||
".gif",
|
||||
".webp",
|
||||
".avif",
|
||||
".svg",
|
||||
]
|
||||
CUSTOM_MODIFIERS_DIR = os.path.abspath(os.path.join(SD_DIR, "..", "modifiers"))
|
||||
CUSTOM_MODIFIERS_PORTRAIT_EXTENSIONS=[".portrait", "_portrait", " portrait", "-portrait"]
|
||||
CUSTOM_MODIFIERS_LANDSCAPE_EXTENSIONS=[".landscape", "_landscape", " landscape", "-landscape"]
|
||||
CUSTOM_MODIFIERS_PORTRAIT_EXTENSIONS = [
|
||||
".portrait",
|
||||
"_portrait",
|
||||
" portrait",
|
||||
"-portrait",
|
||||
]
|
||||
CUSTOM_MODIFIERS_LANDSCAPE_EXTENSIONS = [
|
||||
".landscape",
|
||||
"_landscape",
|
||||
" landscape",
|
||||
"-landscape",
|
||||
]
|
||||
|
||||
|
||||
def init():
|
||||
os.makedirs(USER_UI_PLUGINS_DIR, exist_ok=True)
|
||||
os.makedirs(USER_SERVER_PLUGINS_DIR, exist_ok=True)
|
||||
|
||||
# https://pytorch.org/docs/stable/storage.html
|
||||
warnings.filterwarnings('ignore', category=UserWarning, message='TypedStorage is deprecated')
|
||||
|
||||
load_server_plugins()
|
||||
|
||||
update_render_threads()
|
||||
@ -84,7 +110,7 @@ def getConfig(default_val=APP_CONFIG_DEFAULTS):
|
||||
if os.getenv("SD_UI_BIND_IP") is not None:
|
||||
config["net"]["listen_to_network"] = os.getenv("SD_UI_BIND_IP") == "0.0.0.0"
|
||||
return config
|
||||
except Exception as e:
|
||||
except Exception:
|
||||
log.warn(traceback.format_exc())
|
||||
return default_val
|
||||
|
||||
@ -97,6 +123,7 @@ def setConfig(config):
|
||||
except:
|
||||
log.error(traceback.format_exc())
|
||||
|
||||
|
||||
def save_to_config(ckpt_model_name, vae_model_name, hypernetwork_model_name, vram_usage_level):
|
||||
config = getConfig()
|
||||
if "model" not in config:
|
||||
@ -191,11 +218,12 @@ def open_browser():
|
||||
|
||||
webbrowser.open(f"http://localhost:{port}")
|
||||
|
||||
|
||||
def get_image_modifiers():
|
||||
modifiers_json_path = os.path.join(SD_UI_DIR, "modifiers.json")
|
||||
|
||||
modifier_categories = {}
|
||||
original_category_order=[]
|
||||
original_category_order = []
|
||||
with open(modifiers_json_path, "r", encoding="utf-8") as f:
|
||||
modifiers_file = json.load(f)
|
||||
|
||||
@ -205,14 +233,14 @@ def get_image_modifiers():
|
||||
|
||||
# convert modifiers from a list of objects to a dict of dicts
|
||||
for category_item in modifiers_file:
|
||||
category_name = category_item['category']
|
||||
category_name = category_item["category"]
|
||||
original_category_order.append(category_name)
|
||||
category = {}
|
||||
for modifier_item in category_item['modifiers']:
|
||||
for modifier_item in category_item["modifiers"]:
|
||||
modifier = {}
|
||||
for preview_item in modifier_item['previews']:
|
||||
modifier[preview_item['name']] = preview_item['path']
|
||||
category[modifier_item['modifier']] = modifier
|
||||
for preview_item in modifier_item["previews"]:
|
||||
modifier[preview_item["name"]] = preview_item["path"]
|
||||
category[modifier_item["modifier"]] = modifier
|
||||
modifier_categories[category_name] = category
|
||||
|
||||
def scan_directory(directory_path: str, category_name="Modifiers"):
|
||||
@ -225,12 +253,27 @@ def get_image_modifiers():
|
||||
modifier_name = entry.name[: -len(file_extension[0])]
|
||||
modifier_path = f"custom/{entry.path[len(CUSTOM_MODIFIERS_DIR) + 1:]}"
|
||||
# URL encode path segments
|
||||
modifier_path = "/".join(map(lambda segment: urllib.parse.quote(segment), modifier_path.split("/")))
|
||||
modifier_path = "/".join(
|
||||
map(
|
||||
lambda segment: urllib.parse.quote(segment),
|
||||
modifier_path.split("/"),
|
||||
)
|
||||
)
|
||||
is_portrait = True
|
||||
is_landscape = True
|
||||
|
||||
portrait_extension = list(filter(lambda e: modifier_name.lower().endswith(e), CUSTOM_MODIFIERS_PORTRAIT_EXTENSIONS))
|
||||
landscape_extension = list(filter(lambda e: modifier_name.lower().endswith(e), CUSTOM_MODIFIERS_LANDSCAPE_EXTENSIONS))
|
||||
portrait_extension = list(
|
||||
filter(
|
||||
lambda e: modifier_name.lower().endswith(e),
|
||||
CUSTOM_MODIFIERS_PORTRAIT_EXTENSIONS,
|
||||
)
|
||||
)
|
||||
landscape_extension = list(
|
||||
filter(
|
||||
lambda e: modifier_name.lower().endswith(e),
|
||||
CUSTOM_MODIFIERS_LANDSCAPE_EXTENSIONS,
|
||||
)
|
||||
)
|
||||
|
||||
if len(portrait_extension) > 0:
|
||||
is_landscape = False
|
||||
@ -238,24 +281,24 @@ def get_image_modifiers():
|
||||
elif len(landscape_extension) > 0:
|
||||
is_portrait = False
|
||||
modifier_name = modifier_name[: -len(landscape_extension[0])]
|
||||
|
||||
if (category_name not in modifier_categories):
|
||||
|
||||
if category_name not in modifier_categories:
|
||||
modifier_categories[category_name] = {}
|
||||
|
||||
|
||||
category = modifier_categories[category_name]
|
||||
|
||||
if (modifier_name not in category):
|
||||
if modifier_name not in category:
|
||||
category[modifier_name] = {}
|
||||
|
||||
if (is_portrait or "portrait" not in category[modifier_name]):
|
||||
if is_portrait or "portrait" not in category[modifier_name]:
|
||||
category[modifier_name]["portrait"] = modifier_path
|
||||
|
||||
if (is_landscape or "landscape" not in category[modifier_name]):
|
||||
|
||||
if is_landscape or "landscape" not in category[modifier_name]:
|
||||
category[modifier_name]["landscape"] = modifier_path
|
||||
elif entry.is_dir():
|
||||
scan_directory(
|
||||
entry.path,
|
||||
entry.name if directory_path==CUSTOM_MODIFIERS_DIR else f"{category_name}/{entry.name}",
|
||||
entry.name if directory_path == CUSTOM_MODIFIERS_DIR else f"{category_name}/{entry.name}",
|
||||
)
|
||||
|
||||
scan_directory(CUSTOM_MODIFIERS_DIR)
|
||||
@ -268,12 +311,12 @@ def get_image_modifiers():
|
||||
# convert the modifiers back into a list of objects
|
||||
modifier_categories_list = []
|
||||
for category_name in [*original_category_order, *custom_categories]:
|
||||
category = { 'category': category_name, 'modifiers': [] }
|
||||
category = {"category": category_name, "modifiers": []}
|
||||
for modifier_name in sorted(modifier_categories[category_name].keys(), key=str.casefold):
|
||||
modifier = { 'modifier': modifier_name, 'previews': [] }
|
||||
modifier = {"modifier": modifier_name, "previews": []}
|
||||
for preview_name, preview_path in modifier_categories[category_name][modifier_name].items():
|
||||
modifier['previews'].append({ 'name': preview_name, 'path': preview_path })
|
||||
category['modifiers'].append(modifier)
|
||||
modifier["previews"].append({"name": preview_name, "path": preview_path})
|
||||
category["modifiers"].append(modifier)
|
||||
modifier_categories_list.append(category)
|
||||
|
||||
return modifier_categories_list
|
||||
|
@ -1,9 +1,9 @@
|
||||
import os
|
||||
import platform
|
||||
import torch
|
||||
import traceback
|
||||
import re
|
||||
import traceback
|
||||
|
||||
import torch
|
||||
from easydiffusion.utils import log
|
||||
|
||||
"""
|
||||
@ -98,8 +98,8 @@ def auto_pick_devices(currently_active_devices):
|
||||
continue
|
||||
|
||||
mem_free, mem_total = torch.cuda.mem_get_info(device)
|
||||
mem_free /= float(10**9)
|
||||
mem_total /= float(10**9)
|
||||
mem_free /= float(10 ** 9)
|
||||
mem_total /= float(10 ** 9)
|
||||
device_name = torch.cuda.get_device_name(device)
|
||||
log.debug(
|
||||
f"{device} detected: {device_name} - Memory (free/total): {round(mem_free, 2)}Gb / {round(mem_total, 2)}Gb"
|
||||
@ -118,7 +118,10 @@ def auto_pick_devices(currently_active_devices):
|
||||
# These already-running devices probably aren't terrible, since they were picked in the past.
|
||||
# Worst case, the user can restart the program and that'll get rid of them.
|
||||
devices = list(
|
||||
filter((lambda x: x["mem_free"] > mem_free_threshold or x["device"] in currently_active_devices), devices)
|
||||
filter(
|
||||
(lambda x: x["mem_free"] > mem_free_threshold or x["device"] in currently_active_devices),
|
||||
devices,
|
||||
)
|
||||
)
|
||||
devices = list(map(lambda x: x["device"], devices))
|
||||
return devices
|
||||
@ -178,7 +181,7 @@ def get_max_vram_usage_level(device):
|
||||
else:
|
||||
return "high"
|
||||
|
||||
mem_total /= float(10**9)
|
||||
mem_total /= float(10 ** 9)
|
||||
if mem_total < 4.5:
|
||||
return "low"
|
||||
elif mem_total < 6.5:
|
||||
@ -220,7 +223,7 @@ def is_device_compatible(device):
|
||||
# Memory check
|
||||
try:
|
||||
_, mem_total = torch.cuda.mem_get_info(device)
|
||||
mem_total /= float(10**9)
|
||||
mem_total /= float(10 ** 9)
|
||||
if mem_total < 3.0:
|
||||
if is_device_compatible.history.get(device) == None:
|
||||
log.warn(f"GPU {device} with less than 3 GB of VRAM is not compatible with Stable Diffusion")
|
||||
|
@ -3,11 +3,17 @@ import os
|
||||
from easydiffusion import app
|
||||
from easydiffusion.types import TaskData
|
||||
from easydiffusion.utils import log
|
||||
|
||||
from sdkit import Context
|
||||
from sdkit.models import load_model, unload_model, scan_model
|
||||
from sdkit.models import load_model, scan_model, unload_model
|
||||
|
||||
KNOWN_MODEL_TYPES = ["stable-diffusion", "vae", "hypernetwork", "gfpgan", "realesrgan", "lora"]
|
||||
KNOWN_MODEL_TYPES = [
|
||||
"stable-diffusion",
|
||||
"vae",
|
||||
"hypernetwork",
|
||||
"gfpgan",
|
||||
"realesrgan",
|
||||
"lora",
|
||||
]
|
||||
MODEL_EXTENSIONS = {
|
||||
"stable-diffusion": [".ckpt", ".safetensors"],
|
||||
"vae": [".vae.pt", ".ckpt", ".safetensors"],
|
||||
@ -44,13 +50,15 @@ def load_default_models(context: Context):
|
||||
load_model(
|
||||
context,
|
||||
model_type,
|
||||
scan_model = context.model_paths[model_type] != None and not context.model_paths[model_type].endswith('.safetensors')
|
||||
scan_model=context.model_paths[model_type] != None
|
||||
and not context.model_paths[model_type].endswith(".safetensors"),
|
||||
)
|
||||
except Exception as e:
|
||||
log.error(f"[red]Error while loading {model_type} model: {context.model_paths[model_type]}[/red]")
|
||||
log.exception(e)
|
||||
del context.model_paths[model_type]
|
||||
|
||||
|
||||
def unload_all(context: Context):
|
||||
for model_type in KNOWN_MODEL_TYPES:
|
||||
unload_model(context, model_type)
|
||||
@ -170,13 +178,23 @@ def is_malicious_model(file_path):
|
||||
if scan_result.issues_count > 0 or scan_result.infected_files > 0:
|
||||
log.warn(
|
||||
":warning: [bold red]Scan %s: %d scanned, %d issue, %d infected.[/bold red]"
|
||||
% (file_path, scan_result.scanned_files, scan_result.issues_count, scan_result.infected_files)
|
||||
% (
|
||||
file_path,
|
||||
scan_result.scanned_files,
|
||||
scan_result.issues_count,
|
||||
scan_result.infected_files,
|
||||
)
|
||||
)
|
||||
return True
|
||||
else:
|
||||
log.debug(
|
||||
"Scan %s: [green]%d scanned, %d issue, %d infected.[/green]"
|
||||
% (file_path, scan_result.scanned_files, scan_result.issues_count, scan_result.infected_files)
|
||||
% (
|
||||
file_path,
|
||||
scan_result.scanned_files,
|
||||
scan_result.issues_count,
|
||||
scan_result.infected_files,
|
||||
)
|
||||
)
|
||||
return False
|
||||
except Exception as e:
|
||||
@ -204,13 +222,13 @@ def getModels():
|
||||
|
||||
class MaliciousModelException(Exception):
|
||||
"Raised when picklescan reports a problem with a model"
|
||||
pass
|
||||
|
||||
def scan_directory(directory, suffixes, directoriesFirst: bool = True):
|
||||
nonlocal models_scanned
|
||||
tree = []
|
||||
for entry in sorted(
|
||||
os.scandir(directory), key=lambda entry: (entry.is_file() == directoriesFirst, entry.name.lower())
|
||||
os.scandir(directory),
|
||||
key=lambda entry: (entry.is_file() == directoriesFirst, entry.name.lower()),
|
||||
):
|
||||
if entry.is_file():
|
||||
matching_suffix = list(filter(lambda s: entry.name.endswith(s), suffixes))
|
||||
|
@ -1,21 +1,23 @@
|
||||
import queue
|
||||
import time
|
||||
import json
|
||||
import pprint
|
||||
import queue
|
||||
import time
|
||||
|
||||
from easydiffusion import device_manager
|
||||
from easydiffusion.types import TaskData, Response, Image as ResponseImage, UserInitiatedStop, GenerateImageRequest
|
||||
from easydiffusion.utils import get_printable_request, save_images_to_disk, log
|
||||
|
||||
from easydiffusion.types import GenerateImageRequest
|
||||
from easydiffusion.types import Image as ResponseImage
|
||||
from easydiffusion.types import Response, TaskData, UserInitiatedStop
|
||||
from easydiffusion.utils import get_printable_request, log, save_images_to_disk
|
||||
from sdkit import Context
|
||||
from sdkit.generate import generate_images
|
||||
from sdkit.filter import apply_filters
|
||||
from sdkit.generate import generate_images
|
||||
from sdkit.utils import (
|
||||
img_to_buffer,
|
||||
img_to_base64_str,
|
||||
latent_samples_to_images,
|
||||
diffusers_latent_samples_to_images,
|
||||
gc,
|
||||
img_to_base64_str,
|
||||
img_to_buffer,
|
||||
latent_samples_to_images,
|
||||
get_device_usage,
|
||||
)
|
||||
|
||||
context = Context() # thread-local
|
||||
@ -39,18 +41,29 @@ def init(device):
|
||||
app_config.get("test_diffusers", False) and app_config.get("update_branch", "main") != "main"
|
||||
)
|
||||
|
||||
log.info("Device usage during initialization:")
|
||||
get_device_usage(device, log_info=True, process_usage_only=False)
|
||||
|
||||
device_manager.device_init(context, device)
|
||||
|
||||
|
||||
def make_images(
|
||||
req: GenerateImageRequest, task_data: TaskData, data_queue: queue.Queue, task_temp_images: list, step_callback
|
||||
req: GenerateImageRequest,
|
||||
task_data: TaskData,
|
||||
data_queue: queue.Queue,
|
||||
task_temp_images: list,
|
||||
step_callback,
|
||||
):
|
||||
context.stop_processing = False
|
||||
print_task_info(req, task_data)
|
||||
|
||||
images, seeds = make_images_internal(req, task_data, data_queue, task_temp_images, step_callback)
|
||||
|
||||
res = Response(req, task_data, images=construct_response(images, seeds, task_data, base_seed=req.seed))
|
||||
res = Response(
|
||||
req,
|
||||
task_data,
|
||||
images=construct_response(images, seeds, task_data, base_seed=req.seed),
|
||||
)
|
||||
res = res.json()
|
||||
data_queue.put(json.dumps(res))
|
||||
log.info("Task completed")
|
||||
@ -66,7 +79,11 @@ def print_task_info(req: GenerateImageRequest, task_data: TaskData):
|
||||
|
||||
|
||||
def make_images_internal(
|
||||
req: GenerateImageRequest, task_data: TaskData, data_queue: queue.Queue, task_temp_images: list, step_callback
|
||||
req: GenerateImageRequest,
|
||||
task_data: TaskData,
|
||||
data_queue: queue.Queue,
|
||||
task_temp_images: list,
|
||||
step_callback,
|
||||
):
|
||||
images, user_stopped = generate_images_internal(
|
||||
req,
|
||||
@ -155,7 +172,12 @@ def filter_images(task_data: TaskData, images: list, user_stopped):
|
||||
def construct_response(images: list, seeds: list, task_data: TaskData, base_seed: int):
|
||||
return [
|
||||
ResponseImage(
|
||||
data=img_to_base64_str(img, task_data.output_format, task_data.output_quality, task_data.output_lossless),
|
||||
data=img_to_base64_str(
|
||||
img,
|
||||
task_data.output_format,
|
||||
task_data.output_quality,
|
||||
task_data.output_lossless,
|
||||
),
|
||||
seed=seed,
|
||||
)
|
||||
for img, seed in zip(images, seeds)
|
||||
|
@ -2,28 +2,30 @@
|
||||
Notes:
|
||||
async endpoints always run on the main thread. Without they run on the thread pool.
|
||||
"""
|
||||
import datetime
|
||||
import mimetypes
|
||||
import os
|
||||
import traceback
|
||||
import datetime
|
||||
from typing import List, Union
|
||||
|
||||
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
|
||||
from fastapi.staticfiles import StaticFiles
|
||||
from starlette.responses import FileResponse, JSONResponse, StreamingResponse
|
||||
from pydantic import BaseModel, Extra
|
||||
|
||||
from easydiffusion import app, model_manager, task_manager
|
||||
from easydiffusion.types import TaskData, GenerateImageRequest, MergeRequest
|
||||
from easydiffusion.utils import log
|
||||
|
||||
import mimetypes
|
||||
from starlette.responses import FileResponse, JSONResponse, StreamingResponse
|
||||
|
||||
log.info(f"started in {app.SD_DIR}")
|
||||
log.info(f"started at {datetime.datetime.now():%x %X}")
|
||||
|
||||
server_api = FastAPI()
|
||||
|
||||
NOCACHE_HEADERS = {"Cache-Control": "no-cache, no-store, must-revalidate", "Pragma": "no-cache", "Expires": "0"}
|
||||
NOCACHE_HEADERS = {
|
||||
"Cache-Control": "no-cache, no-store, must-revalidate",
|
||||
"Pragma": "no-cache",
|
||||
"Expires": "0",
|
||||
}
|
||||
|
||||
|
||||
class NoCacheStaticFiles(StaticFiles):
|
||||
@ -65,11 +67,17 @@ def init():
|
||||
name="custom-thumbnails",
|
||||
)
|
||||
|
||||
server_api.mount("/media", NoCacheStaticFiles(directory=os.path.join(app.SD_UI_DIR, "media")), name="media")
|
||||
server_api.mount(
|
||||
"/media",
|
||||
NoCacheStaticFiles(directory=os.path.join(app.SD_UI_DIR, "media")),
|
||||
name="media",
|
||||
)
|
||||
|
||||
for plugins_dir, dir_prefix in app.UI_PLUGINS_SOURCES:
|
||||
server_api.mount(
|
||||
f"/plugins/{dir_prefix}", NoCacheStaticFiles(directory=plugins_dir), name=f"plugins-{dir_prefix}"
|
||||
f"/plugins/{dir_prefix}",
|
||||
NoCacheStaticFiles(directory=plugins_dir),
|
||||
name=f"plugins-{dir_prefix}",
|
||||
)
|
||||
|
||||
@server_api.post("/app_config")
|
||||
@ -246,8 +254,8 @@ def render_internal(req: dict):
|
||||
|
||||
def model_merge_internal(req: dict):
|
||||
try:
|
||||
from sdkit.train import merge_models
|
||||
from easydiffusion.utils.save_utils import filename_regex
|
||||
from sdkit.train import merge_models
|
||||
|
||||
mergeReq: MergeRequest = MergeRequest.parse_obj(req)
|
||||
|
||||
@ -255,7 +263,11 @@ def model_merge_internal(req: dict):
|
||||
model_manager.resolve_model_to_use(mergeReq.model0, "stable-diffusion"),
|
||||
model_manager.resolve_model_to_use(mergeReq.model1, "stable-diffusion"),
|
||||
mergeReq.ratio,
|
||||
os.path.join(app.MODELS_DIR, "stable-diffusion", filename_regex.sub("_", mergeReq.out_path)),
|
||||
os.path.join(
|
||||
app.MODELS_DIR,
|
||||
"stable-diffusion",
|
||||
filename_regex.sub("_", mergeReq.out_path),
|
||||
),
|
||||
mergeReq.use_fp16,
|
||||
)
|
||||
return JSONResponse({"status": "OK"}, headers=NOCACHE_HEADERS)
|
||||
|
@ -7,16 +7,18 @@ Notes:
|
||||
import json
|
||||
import traceback
|
||||
|
||||
TASK_TTL = 15 * 60 # seconds, Discard last session's task timeout
|
||||
TASK_TTL = 30 * 60 # seconds, Discard last session's task timeout
|
||||
|
||||
import torch
|
||||
import queue, threading, time, weakref
|
||||
import queue
|
||||
import threading
|
||||
import time
|
||||
import weakref
|
||||
from typing import Any, Hashable
|
||||
|
||||
import torch
|
||||
from easydiffusion import device_manager
|
||||
from easydiffusion.types import TaskData, GenerateImageRequest
|
||||
from easydiffusion.types import GenerateImageRequest, TaskData
|
||||
from easydiffusion.utils import log
|
||||
|
||||
from sdkit.utils import gc
|
||||
|
||||
THREAD_NAME_PREFIX = ""
|
||||
@ -167,7 +169,7 @@ class DataCache:
|
||||
raise Exception("DataCache.put" + ERR_LOCK_FAILED)
|
||||
try:
|
||||
self._base[key] = (self._get_ttl_time(ttl), value)
|
||||
except Exception as e:
|
||||
except Exception:
|
||||
log.error(traceback.format_exc())
|
||||
return False
|
||||
else:
|
||||
@ -264,7 +266,7 @@ def thread_get_next_task():
|
||||
def thread_render(device):
|
||||
global current_state, current_state_error
|
||||
|
||||
from easydiffusion import renderer, model_manager
|
||||
from easydiffusion import model_manager, renderer
|
||||
|
||||
try:
|
||||
renderer.init(device)
|
||||
@ -337,7 +339,11 @@ def thread_render(device):
|
||||
|
||||
current_state = ServerStates.Rendering
|
||||
task.response = renderer.make_images(
|
||||
task.render_request, task.task_data, task.buffer_queue, task.temp_images, step_callback
|
||||
task.render_request,
|
||||
task.task_data,
|
||||
task.buffer_queue,
|
||||
task.temp_images,
|
||||
step_callback,
|
||||
)
|
||||
# Before looping back to the generator, mark cache as still alive.
|
||||
task_cache.keep(id(task), TASK_TTL)
|
||||
|
@ -1,6 +1,7 @@
|
||||
from pydantic import BaseModel
|
||||
from typing import Any
|
||||
|
||||
from pydantic import BaseModel
|
||||
|
||||
|
||||
class GenerateImageRequest(BaseModel):
|
||||
prompt: str = ""
|
||||
|
@ -1,14 +1,13 @@
|
||||
import os
|
||||
import time
|
||||
import re
|
||||
import time
|
||||
from datetime import datetime
|
||||
from functools import reduce
|
||||
|
||||
from easydiffusion import app
|
||||
from easydiffusion.types import TaskData, GenerateImageRequest
|
||||
from functools import reduce
|
||||
from datetime import datetime
|
||||
|
||||
from sdkit.utils import save_images, save_dicts
|
||||
from easydiffusion.types import GenerateImageRequest, TaskData
|
||||
from numpy import base_repr
|
||||
from sdkit.utils import save_dicts, save_images
|
||||
|
||||
filename_regex = re.compile("[^a-zA-Z0-9._-]")
|
||||
img_number_regex = re.compile("([0-9]{5,})")
|
||||
@ -50,6 +49,7 @@ other_placeholders = {
|
||||
"$s": lambda req, task_data: str(req.seed),
|
||||
}
|
||||
|
||||
|
||||
class ImageNumber:
|
||||
_factory = None
|
||||
_evaluated = False
|
||||
@ -57,12 +57,14 @@ class ImageNumber:
|
||||
def __init__(self, factory):
|
||||
self._factory = factory
|
||||
self._evaluated = None
|
||||
|
||||
def __call__(self) -> int:
|
||||
if self._evaluated is None:
|
||||
self._evaluated = self._factory()
|
||||
return self._evaluated
|
||||
|
||||
def format_placeholders(format: str, req: GenerateImageRequest, task_data: TaskData, now = None):
|
||||
|
||||
def format_placeholders(format: str, req: GenerateImageRequest, task_data: TaskData, now=None):
|
||||
if now is None:
|
||||
now = time.time()
|
||||
|
||||
@ -75,10 +77,12 @@ def format_placeholders(format: str, req: GenerateImageRequest, task_data: TaskD
|
||||
|
||||
return format
|
||||
|
||||
|
||||
def format_folder_name(format: str, req: GenerateImageRequest, task_data: TaskData):
|
||||
format = format_placeholders(format, req, task_data)
|
||||
return filename_regex.sub("_", format)
|
||||
|
||||
|
||||
def format_file_name(
|
||||
format: str,
|
||||
req: GenerateImageRequest,
|
||||
@ -88,19 +92,22 @@ def format_file_name(
|
||||
folder_img_number: ImageNumber,
|
||||
):
|
||||
format = format_placeholders(format, req, task_data, now)
|
||||
|
||||
|
||||
if "$n" in format:
|
||||
format = format.replace("$n", f"{folder_img_number():05}")
|
||||
|
||||
|
||||
if "$tsb64" in format:
|
||||
img_id = base_repr(int(now * 10000), 36)[-7:] + base_repr(int(batch_file_number), 36) # Base 36 conversion, 0-9, A-Z
|
||||
img_id = base_repr(int(now * 10000), 36)[-7:] + base_repr(
|
||||
int(batch_file_number), 36
|
||||
) # Base 36 conversion, 0-9, A-Z
|
||||
format = format.replace("$tsb64", img_id)
|
||||
|
||||
|
||||
if "$ts" in format:
|
||||
format = format.replace("$ts", str(int(now * 1000) + batch_file_number))
|
||||
|
||||
return filename_regex.sub("_", format)
|
||||
|
||||
|
||||
def save_images_to_disk(images: list, filtered_images: list, req: GenerateImageRequest, task_data: TaskData):
|
||||
now = time.time()
|
||||
app_config = app.getConfig()
|
||||
@ -126,7 +133,7 @@ def save_images_to_disk(images: list, filtered_images: list, req: GenerateImageR
|
||||
output_lossless=task_data.output_lossless,
|
||||
)
|
||||
if task_data.metadata_output_format:
|
||||
for metadata_output_format in task_data.metadata_output_format.split(','):
|
||||
for metadata_output_format in task_data.metadata_output_format.split(","):
|
||||
if metadata_output_format.lower() in ["json", "txt", "embed"]:
|
||||
save_dicts(
|
||||
metadata_entries,
|
||||
@ -142,7 +149,8 @@ def save_images_to_disk(images: list, filtered_images: list, req: GenerateImageR
|
||||
task_data,
|
||||
file_number,
|
||||
now=now,
|
||||
suffix="filtered")
|
||||
suffix="filtered",
|
||||
)
|
||||
|
||||
save_images(
|
||||
images,
|
||||
@ -233,27 +241,28 @@ def make_filename_callback(
|
||||
|
||||
return make_filename
|
||||
|
||||
|
||||
def _calculate_img_number(save_dir_path: str, task_data: TaskData):
|
||||
def get_highest_img_number(accumulator: int, file: os.DirEntry) -> int:
|
||||
if not file.is_file:
|
||||
return accumulator
|
||||
|
||||
|
||||
if len(list(filter(lambda e: file.name.endswith(e), app.IMAGE_EXTENSIONS))) == 0:
|
||||
return accumulator
|
||||
|
||||
|
||||
get_highest_img_number.number_of_images = get_highest_img_number.number_of_images + 1
|
||||
|
||||
|
||||
number_match = img_number_regex.match(file.name)
|
||||
if not number_match:
|
||||
return accumulator
|
||||
|
||||
file_number = number_match.group().lstrip('0')
|
||||
|
||||
|
||||
file_number = number_match.group().lstrip("0")
|
||||
|
||||
# Handle 00000
|
||||
return int(file_number) if file_number else 0
|
||||
|
||||
|
||||
get_highest_img_number.number_of_images = 0
|
||||
|
||||
|
||||
highest_file_number = -1
|
||||
|
||||
if os.path.isdir(save_dir_path):
|
||||
@ -267,13 +276,15 @@ def _calculate_img_number(save_dir_path: str, task_data: TaskData):
|
||||
_calculate_img_number.session_img_numbers[task_data.session_id],
|
||||
calculated_img_number,
|
||||
)
|
||||
|
||||
|
||||
calculated_img_number = calculated_img_number + 1
|
||||
|
||||
|
||||
_calculate_img_number.session_img_numbers[task_data.session_id] = calculated_img_number
|
||||
return calculated_img_number
|
||||
|
||||
|
||||
_calculate_img_number.session_img_numbers = {}
|
||||
|
||||
|
||||
def calculate_img_number(save_dir_path: str, task_data: TaskData):
|
||||
return ImageNumber(lambda: _calculate_img_number(save_dir_path, task_data))
|
||||
|
@ -30,7 +30,7 @@
|
||||
<h1>
|
||||
<img id="logo_img" src="/media/images/icon-512x512.png" >
|
||||
Easy Diffusion
|
||||
<small>v2.5.34 <span id="updateBranchLabel"></span></small>
|
||||
<small>v2.5.35 <span id="updateBranchLabel"></span></small>
|
||||
</h1>
|
||||
</div>
|
||||
<div id="server-status">
|
||||
@ -135,11 +135,11 @@
|
||||
<button id="reload-models" class="secondaryButton reloadModels"><i class='fa-solid fa-rotate'></i></button>
|
||||
<a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Custom-Models" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about custom models</span></i></a>
|
||||
</td></tr>
|
||||
<!-- <tr id="modelConfigSelection" class="pl-5"><td><label for="model_config">Model Config:</i></label></td><td>
|
||||
<!-- <tr id="modelConfigSelection" class="pl-5"><td><label for="model_config">Model Config:</label></td><td>
|
||||
<select id="model_config" name="model_config">
|
||||
</select>
|
||||
</td></tr> -->
|
||||
<tr class="pl-5"><td><label for="vae_model">Custom VAE:</i></label></td><td>
|
||||
<tr class="pl-5"><td><label for="vae_model">Custom VAE:</label></td><td>
|
||||
<input id="vae_model" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" />
|
||||
<a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/VAE-Variational-Auto-Encoder" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about VAEs</span></i></a>
|
||||
</td></tr>
|
||||
@ -217,14 +217,14 @@
|
||||
<tr class="pl-5"><td><label for="num_inference_steps">Inference Steps:</label></td><td> <input id="num_inference_steps" name="num_inference_steps" size="4" value="25" onkeypress="preventNonNumericalInput(event)"></td></tr>
|
||||
<tr class="pl-5"><td><label for="guidance_scale_slider">Guidance Scale:</label></td><td> <input id="guidance_scale_slider" name="guidance_scale_slider" class="editor-slider" value="75" type="range" min="11" max="500"> <input id="guidance_scale" name="guidance_scale" size="4" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)"></td></tr>
|
||||
<tr id="prompt_strength_container" class="pl-5"><td><label for="prompt_strength_slider">Prompt Strength:</label></td><td> <input id="prompt_strength_slider" name="prompt_strength_slider" class="editor-slider" value="80" type="range" min="0" max="99"> <input id="prompt_strength" name="prompt_strength" size="4" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)"><br/></td></tr>
|
||||
<tr id="lora_model_container" class="pl-5"><td><label for="lora_model">LoRA:</i></label></td><td>
|
||||
<tr id="lora_model_container" class="pl-5"><td><label for="lora_model">LoRA:</label></td><td>
|
||||
<input id="lora_model" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" />
|
||||
</td></tr>
|
||||
<tr id="lora_alpha_container" class="pl-5">
|
||||
<td><label for="lora_alpha_slider">LoRA Strength:</label></td>
|
||||
<td> <input id="lora_alpha_slider" name="lora_alpha_slider" class="editor-slider" value="50" type="range" min="0" max="100"> <input id="lora_alpha" name="lora_alpha" size="4" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)"><br/></td>
|
||||
</tr>
|
||||
<tr class="pl-5"><td><label for="hypernetwork_model">Hypernetwork:</i></label></td><td>
|
||||
<tr class="pl-5"><td><label for="hypernetwork_model">Hypernetwork:</label></td><td>
|
||||
<input id="hypernetwork_model" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" />
|
||||
</td></tr>
|
||||
<tr id="hypernetwork_strength_container" class="pl-5">
|
||||
@ -238,7 +238,7 @@
|
||||
<option value="webp">webp</option>
|
||||
</select>
|
||||
<span id="output_lossless_container" class="displayNone">
|
||||
<input id="output_lossless" name="output_lossless" type="checkbox"><label for="output_lossless">Lossless</label></td></tr>
|
||||
<input id="output_lossless" name="output_lossless" type="checkbox"><label for="output_lossless">Lossless</label>
|
||||
</span>
|
||||
</td></tr>
|
||||
<tr class="pl-5" id="output_quality_row"><td><label for="output_quality">Image Quality:</label></td><td>
|
||||
|
@ -1302,3 +1302,54 @@ body.wait-pause {
|
||||
.displayNone {
|
||||
display:none !important;
|
||||
}
|
||||
|
||||
/* TOAST NOTIFICATIONS */
|
||||
.toast-notification {
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: -300px;
|
||||
width: 300px;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999;
|
||||
animation: slideInRight 0.5s ease forwards;
|
||||
transition: bottom 0.5s ease; // Add a transition to smoothly reposition the toasts
|
||||
}
|
||||
|
||||
.toast-notification-error {
|
||||
color: red;
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
right: -300px;
|
||||
}
|
||||
to {
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.toast-notification.hide {
|
||||
animation: slideOutRight 0.5s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes slideOutRight {
|
||||
from {
|
||||
right: 10px;
|
||||
}
|
||||
to {
|
||||
right: -300px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
bottom: 10px;
|
||||
}
|
||||
to {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
@ -58,7 +58,7 @@
|
||||
font-size: 10pt;
|
||||
font-weight: normal;
|
||||
transition: none;
|
||||
transition:property: none;
|
||||
transition-property: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
@ -33,7 +33,7 @@
|
||||
--input-height: 18px;
|
||||
--tertiary-background-color: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (2 * var(--value-step))));
|
||||
--tertiary-border-color: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (3 * var(--value-step))));
|
||||
--tertiary-color: var(--input-text-color)
|
||||
--tertiary-color: var(--input-text-color);
|
||||
|
||||
/* Main theme color, hex color fallback. */
|
||||
--theme-color-fallback: #673AB6;
|
||||
|
@ -52,27 +52,27 @@ const SETTINGS_IDS_LIST = [
|
||||
"auto_scroll",
|
||||
"zip_toggle",
|
||||
"tree_toggle",
|
||||
"json_toggle"
|
||||
"json_toggle",
|
||||
]
|
||||
|
||||
const IGNORE_BY_DEFAULT = [
|
||||
"prompt"
|
||||
]
|
||||
const IGNORE_BY_DEFAULT = ["prompt"]
|
||||
|
||||
const SETTINGS_SECTIONS = [ // gets the "keys" property filled in with an ordered list of settings in this section via initSettings
|
||||
{ id: "editor-inputs", name: "Prompt" },
|
||||
const SETTINGS_SECTIONS = [
|
||||
// gets the "keys" property filled in with an ordered list of settings in this section via initSettings
|
||||
{ id: "editor-inputs", name: "Prompt" },
|
||||
{ id: "editor-settings", name: "Image Settings" },
|
||||
{ id: "system-settings", name: "System Settings" },
|
||||
{ id: "container", name: "Other" }
|
||||
{ id: "container", name: "Other" },
|
||||
]
|
||||
|
||||
async function initSettings() {
|
||||
SETTINGS_IDS_LIST.forEach(id => {
|
||||
SETTINGS_IDS_LIST.forEach((id) => {
|
||||
var element = document.getElementById(id)
|
||||
if (!element) {
|
||||
console.error(`Missing settings element ${id}`)
|
||||
}
|
||||
if (id in SETTINGS) { // don't create it again
|
||||
if (id in SETTINGS) {
|
||||
// don't create it again
|
||||
return
|
||||
}
|
||||
SETTINGS[id] = {
|
||||
@ -81,28 +81,28 @@ async function initSettings() {
|
||||
label: getSettingLabel(element),
|
||||
default: getSetting(element),
|
||||
value: getSetting(element),
|
||||
ignore: IGNORE_BY_DEFAULT.includes(id)
|
||||
ignore: IGNORE_BY_DEFAULT.includes(id),
|
||||
}
|
||||
element.addEventListener("input", settingChangeHandler)
|
||||
element.addEventListener("change", settingChangeHandler)
|
||||
})
|
||||
var unsorted_settings_ids = [...SETTINGS_IDS_LIST]
|
||||
SETTINGS_SECTIONS.forEach(section => {
|
||||
SETTINGS_SECTIONS.forEach((section) => {
|
||||
var name = section.name
|
||||
var element = document.getElementById(section.id)
|
||||
var unsorted_ids = unsorted_settings_ids.map(id => `#${id}`).join(",")
|
||||
var children = unsorted_ids == "" ? [] : Array.from(element.querySelectorAll(unsorted_ids));
|
||||
var unsorted_ids = unsorted_settings_ids.map((id) => `#${id}`).join(",")
|
||||
var children = unsorted_ids == "" ? [] : Array.from(element.querySelectorAll(unsorted_ids))
|
||||
section.keys = []
|
||||
children.forEach(e => {
|
||||
children.forEach((e) => {
|
||||
section.keys.push(e.id)
|
||||
})
|
||||
unsorted_settings_ids = unsorted_settings_ids.filter(id => children.find(e => e.id == id) == undefined)
|
||||
unsorted_settings_ids = unsorted_settings_ids.filter((id) => children.find((e) => e.id == id) == undefined)
|
||||
})
|
||||
loadSettings()
|
||||
}
|
||||
|
||||
function getSetting(element) {
|
||||
if (element.dataset && 'path' in element.dataset) {
|
||||
if (element.dataset && "path" in element.dataset) {
|
||||
return element.dataset.path
|
||||
}
|
||||
if (typeof element === "string" || element instanceof String) {
|
||||
@ -114,7 +114,7 @@ function getSetting(element) {
|
||||
return element.value
|
||||
}
|
||||
function setSetting(element, value) {
|
||||
if (element.dataset && 'path' in element.dataset) {
|
||||
if (element.dataset && "path" in element.dataset) {
|
||||
element.dataset.path = value
|
||||
return // no need to dispatch any event here because the models are not loaded yet
|
||||
}
|
||||
@ -127,8 +127,7 @@ function setSetting(element, value) {
|
||||
}
|
||||
if (element.type == "checkbox") {
|
||||
element.checked = value
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
element.value = value
|
||||
}
|
||||
element.dispatchEvent(new Event("input"))
|
||||
@ -136,11 +135,11 @@ function setSetting(element, value) {
|
||||
}
|
||||
|
||||
function saveSettings() {
|
||||
var saved_settings = Object.values(SETTINGS).map(setting => {
|
||||
var saved_settings = Object.values(SETTINGS).map((setting) => {
|
||||
return {
|
||||
key: setting.key,
|
||||
value: setting.value,
|
||||
ignore: setting.ignore
|
||||
ignore: setting.ignore,
|
||||
}
|
||||
})
|
||||
localStorage.setItem(SETTINGS_KEY, JSON.stringify(saved_settings))
|
||||
@ -151,16 +150,16 @@ function loadSettings() {
|
||||
var saved_settings_text = localStorage.getItem(SETTINGS_KEY)
|
||||
if (saved_settings_text) {
|
||||
var saved_settings = JSON.parse(saved_settings_text)
|
||||
if (saved_settings.find(s => s.key == "auto_save_settings")?.value == false) {
|
||||
if (saved_settings.find((s) => s.key == "auto_save_settings")?.value == false) {
|
||||
setSetting("auto_save_settings", false)
|
||||
return
|
||||
}
|
||||
CURRENTLY_LOADING_SETTINGS = true
|
||||
saved_settings.forEach(saved_setting => {
|
||||
saved_settings.forEach((saved_setting) => {
|
||||
var setting = SETTINGS[saved_setting.key]
|
||||
if (!setting) {
|
||||
console.warn(`Attempted to load setting ${saved_setting.key}, but no setting found`);
|
||||
return null;
|
||||
console.warn(`Attempted to load setting ${saved_setting.key}, but no setting found`)
|
||||
return null
|
||||
}
|
||||
setting.ignore = saved_setting.ignore
|
||||
if (!setting.ignore) {
|
||||
@ -169,10 +168,9 @@ function loadSettings() {
|
||||
}
|
||||
})
|
||||
CURRENTLY_LOADING_SETTINGS = false
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
CURRENTLY_LOADING_SETTINGS = true
|
||||
tryLoadOldSettings();
|
||||
tryLoadOldSettings()
|
||||
CURRENTLY_LOADING_SETTINGS = false
|
||||
saveSettings()
|
||||
}
|
||||
@ -180,9 +178,9 @@ function loadSettings() {
|
||||
|
||||
function loadDefaultSettingsSection(section_id) {
|
||||
CURRENTLY_LOADING_SETTINGS = true
|
||||
var section = SETTINGS_SECTIONS.find(s => s.id == section_id);
|
||||
section.keys.forEach(key => {
|
||||
var setting = SETTINGS[key];
|
||||
var section = SETTINGS_SECTIONS.find((s) => s.id == section_id)
|
||||
section.keys.forEach((key) => {
|
||||
var setting = SETTINGS[key]
|
||||
setting.value = setting.default
|
||||
setSetting(setting.element, setting.value)
|
||||
})
|
||||
@ -218,10 +216,10 @@ function getSettingLabel(element) {
|
||||
|
||||
function fillSaveSettingsConfigTable() {
|
||||
saveSettingsConfigTable.textContent = ""
|
||||
SETTINGS_SECTIONS.forEach(section => {
|
||||
SETTINGS_SECTIONS.forEach((section) => {
|
||||
var section_row = `<tr><th>${section.name}</th><td></td></tr>`
|
||||
saveSettingsConfigTable.insertAdjacentHTML("beforeend", section_row)
|
||||
section.keys.forEach(key => {
|
||||
section.keys.forEach((key) => {
|
||||
var setting = SETTINGS[key]
|
||||
var element = setting.element
|
||||
var checkbox_id = `shouldsave_${element.id}`
|
||||
@ -234,7 +232,7 @@ function fillSaveSettingsConfigTable() {
|
||||
var newrow = `<tr><td><label for="${checkbox_id}">${setting.label}</label></td><td><input id="${checkbox_id}" name="${checkbox_id}" ${is_checked} type="checkbox" ></td><td><small>(${value})</small></td></tr>`
|
||||
saveSettingsConfigTable.insertAdjacentHTML("beforeend", newrow)
|
||||
var checkbox = document.getElementById(checkbox_id)
|
||||
checkbox.addEventListener("input", event => {
|
||||
checkbox.addEventListener("input", (event) => {
|
||||
setting.ignore = !checkbox.checked
|
||||
saveSettings()
|
||||
})
|
||||
@ -245,9 +243,6 @@ function fillSaveSettingsConfigTable() {
|
||||
|
||||
// configureSettingsSaveBtn
|
||||
|
||||
|
||||
|
||||
|
||||
var autoSaveSettings = document.getElementById("auto_save_settings")
|
||||
var configSettingsButton = document.createElement("button")
|
||||
configSettingsButton.textContent = "Configure"
|
||||
@ -256,33 +251,32 @@ autoSaveSettings.insertAdjacentElement("beforebegin", configSettingsButton)
|
||||
autoSaveSettings.addEventListener("change", () => {
|
||||
configSettingsButton.style.display = autoSaveSettings.checked ? "block" : "none"
|
||||
})
|
||||
configSettingsButton.addEventListener('click', () => {
|
||||
configSettingsButton.addEventListener("click", () => {
|
||||
fillSaveSettingsConfigTable()
|
||||
saveSettingsConfigOverlay.classList.add("active")
|
||||
})
|
||||
resetImageSettingsButton.addEventListener('click', event => {
|
||||
loadDefaultSettingsSection("editor-settings");
|
||||
resetImageSettingsButton.addEventListener("click", (event) => {
|
||||
loadDefaultSettingsSection("editor-settings")
|
||||
event.stopPropagation()
|
||||
})
|
||||
|
||||
|
||||
function tryLoadOldSettings() {
|
||||
console.log("Loading old user settings")
|
||||
// load v1 auto-save.js settings
|
||||
var old_map = {
|
||||
"guidance_scale_slider": "guidance_scale",
|
||||
"prompt_strength_slider": "prompt_strength"
|
||||
guidance_scale_slider: "guidance_scale",
|
||||
prompt_strength_slider: "prompt_strength",
|
||||
}
|
||||
var settings_key_v1 = "user_settings"
|
||||
var saved_settings_text = localStorage.getItem(settings_key_v1)
|
||||
if (saved_settings_text) {
|
||||
var saved_settings = JSON.parse(saved_settings_text)
|
||||
Object.keys(saved_settings.should_save).forEach(key => {
|
||||
Object.keys(saved_settings.should_save).forEach((key) => {
|
||||
key = key in old_map ? old_map[key] : key
|
||||
if (!(key in SETTINGS)) return
|
||||
SETTINGS[key].ignore = !saved_settings.should_save[key]
|
||||
});
|
||||
Object.keys(saved_settings.values).forEach(key => {
|
||||
})
|
||||
Object.keys(saved_settings.values).forEach((key) => {
|
||||
key = key in old_map ? old_map[key] : key
|
||||
if (!(key in SETTINGS)) return
|
||||
var setting = SETTINGS[key]
|
||||
@ -290,38 +284,42 @@ function tryLoadOldSettings() {
|
||||
setting.value = saved_settings.values[key]
|
||||
setSetting(setting.element, setting.value)
|
||||
}
|
||||
});
|
||||
})
|
||||
localStorage.removeItem(settings_key_v1)
|
||||
}
|
||||
|
||||
// load old individually stored items
|
||||
var individual_settings_map = { // maps old localStorage-key to new SETTINGS-key
|
||||
"soundEnabled": "sound_toggle",
|
||||
"saveToDisk": "save_to_disk",
|
||||
"useCPU": "use_cpu",
|
||||
"diskPath": "diskPath",
|
||||
"useFaceCorrection": "use_face_correction",
|
||||
"useUpscaling": "use_upscale",
|
||||
"showOnlyFilteredImage": "show_only_filtered_image",
|
||||
"streamImageProgress": "stream_image_progress",
|
||||
"outputFormat": "output_format",
|
||||
"autoSaveSettings": "auto_save_settings",
|
||||
};
|
||||
Object.keys(individual_settings_map).forEach(localStorageKey => {
|
||||
var localStorageValue = localStorage.getItem(localStorageKey);
|
||||
var individual_settings_map = {
|
||||
// maps old localStorage-key to new SETTINGS-key
|
||||
soundEnabled: "sound_toggle",
|
||||
saveToDisk: "save_to_disk",
|
||||
useCPU: "use_cpu",
|
||||
diskPath: "diskPath",
|
||||
useFaceCorrection: "use_face_correction",
|
||||
useUpscaling: "use_upscale",
|
||||
showOnlyFilteredImage: "show_only_filtered_image",
|
||||
streamImageProgress: "stream_image_progress",
|
||||
outputFormat: "output_format",
|
||||
autoSaveSettings: "auto_save_settings",
|
||||
}
|
||||
Object.keys(individual_settings_map).forEach((localStorageKey) => {
|
||||
var localStorageValue = localStorage.getItem(localStorageKey)
|
||||
if (localStorageValue !== null) {
|
||||
let key = individual_settings_map[localStorageKey]
|
||||
var setting = SETTINGS[key]
|
||||
if (!setting) {
|
||||
console.warn(`Attempted to map old setting ${key}, but no setting found`);
|
||||
return null;
|
||||
console.warn(`Attempted to map old setting ${key}, but no setting found`)
|
||||
return null
|
||||
}
|
||||
if (setting.element.type == "checkbox" && (typeof localStorageValue === "string" || localStorageValue instanceof String)) {
|
||||
if (
|
||||
setting.element.type == "checkbox" &&
|
||||
(typeof localStorageValue === "string" || localStorageValue instanceof String)
|
||||
) {
|
||||
localStorageValue = localStorageValue == "true"
|
||||
}
|
||||
setting.value = localStorageValue
|
||||
setSetting(setting.element, setting.value)
|
||||
localStorage.removeItem(localStorageKey);
|
||||
localStorage.removeItem(localStorageKey)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
@ -1,25 +1,25 @@
|
||||
"use strict" // Opt in to a restricted variant of JavaScript
|
||||
|
||||
const EXT_REGEX = /(?:\.([^.]+))?$/
|
||||
const TEXT_EXTENSIONS = ['txt', 'json']
|
||||
const IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'bmp', 'tiff', 'tif', 'tga', 'webp']
|
||||
const TEXT_EXTENSIONS = ["txt", "json"]
|
||||
const IMAGE_EXTENSIONS = ["jpg", "jpeg", "png", "bmp", "tiff", "tif", "tga", "webp"]
|
||||
|
||||
function parseBoolean(stringValue) {
|
||||
if (typeof stringValue === 'boolean') {
|
||||
if (typeof stringValue === "boolean") {
|
||||
return stringValue
|
||||
}
|
||||
if (typeof stringValue === 'number') {
|
||||
if (typeof stringValue === "number") {
|
||||
return stringValue !== 0
|
||||
}
|
||||
if (typeof stringValue !== 'string') {
|
||||
if (typeof stringValue !== "string") {
|
||||
return false
|
||||
}
|
||||
switch(stringValue?.toLowerCase()?.trim()) {
|
||||
switch (stringValue?.toLowerCase()?.trim()) {
|
||||
case "true":
|
||||
case "yes":
|
||||
case "on":
|
||||
case "1":
|
||||
return true;
|
||||
return true
|
||||
|
||||
case "false":
|
||||
case "no":
|
||||
@ -28,45 +28,50 @@ function parseBoolean(stringValue) {
|
||||
case "none":
|
||||
case null:
|
||||
case undefined:
|
||||
return false;
|
||||
return false
|
||||
}
|
||||
try {
|
||||
return Boolean(JSON.parse(stringValue));
|
||||
return Boolean(JSON.parse(stringValue))
|
||||
} catch {
|
||||
return Boolean(stringValue)
|
||||
}
|
||||
}
|
||||
|
||||
const TASK_MAPPING = {
|
||||
prompt: { name: 'Prompt',
|
||||
prompt: {
|
||||
name: "Prompt",
|
||||
setUI: (prompt) => {
|
||||
promptField.value = prompt
|
||||
},
|
||||
readUI: () => promptField.value,
|
||||
parse: (val) => val
|
||||
parse: (val) => val,
|
||||
},
|
||||
negative_prompt: { name: 'Negative Prompt',
|
||||
negative_prompt: {
|
||||
name: "Negative Prompt",
|
||||
setUI: (negative_prompt) => {
|
||||
negativePromptField.value = negative_prompt
|
||||
},
|
||||
readUI: () => negativePromptField.value,
|
||||
parse: (val) => val
|
||||
parse: (val) => val,
|
||||
},
|
||||
active_tags: { name: "Image Modifiers",
|
||||
active_tags: {
|
||||
name: "Image Modifiers",
|
||||
setUI: (active_tags) => {
|
||||
refreshModifiersState(active_tags)
|
||||
},
|
||||
readUI: () => activeTags.map(x => x.name),
|
||||
parse: (val) => val
|
||||
readUI: () => activeTags.map((x) => x.name),
|
||||
parse: (val) => val,
|
||||
},
|
||||
inactive_tags: { name: "Inactive Image Modifiers",
|
||||
inactive_tags: {
|
||||
name: "Inactive Image Modifiers",
|
||||
setUI: (inactive_tags) => {
|
||||
refreshInactiveTags(inactive_tags)
|
||||
},
|
||||
readUI: () => activeTags.filter(tag => tag.inactive === true).map(x => x.name),
|
||||
parse: (val) => val
|
||||
readUI: () => activeTags.filter((tag) => tag.inactive === true).map((x) => x.name),
|
||||
parse: (val) => val,
|
||||
},
|
||||
width: { name: 'Width',
|
||||
width: {
|
||||
name: "Width",
|
||||
setUI: (width) => {
|
||||
const oldVal = widthField.value
|
||||
widthField.value = width
|
||||
@ -75,9 +80,10 @@ const TASK_MAPPING = {
|
||||
}
|
||||
},
|
||||
readUI: () => parseInt(widthField.value),
|
||||
parse: (val) => parseInt(val)
|
||||
parse: (val) => parseInt(val),
|
||||
},
|
||||
height: { name: 'Height',
|
||||
height: {
|
||||
name: "Height",
|
||||
setUI: (height) => {
|
||||
const oldVal = heightField.value
|
||||
heightField.value = height
|
||||
@ -86,9 +92,10 @@ const TASK_MAPPING = {
|
||||
}
|
||||
},
|
||||
readUI: () => parseInt(heightField.value),
|
||||
parse: (val) => parseInt(val)
|
||||
parse: (val) => parseInt(val),
|
||||
},
|
||||
seed: { name: 'Seed',
|
||||
seed: {
|
||||
name: "Seed",
|
||||
setUI: (seed) => {
|
||||
if (!seed) {
|
||||
randomSeedField.checked = true
|
||||
@ -97,70 +104,80 @@ const TASK_MAPPING = {
|
||||
return
|
||||
}
|
||||
randomSeedField.checked = false
|
||||
randomSeedField.dispatchEvent(new Event('change')) // let plugins know that the state of the random seed toggle changed
|
||||
randomSeedField.dispatchEvent(new Event("change")) // let plugins know that the state of the random seed toggle changed
|
||||
seedField.disabled = false
|
||||
seedField.value = seed
|
||||
},
|
||||
readUI: () => parseInt(seedField.value), // just return the value the user is seeing in the UI
|
||||
parse: (val) => parseInt(val)
|
||||
parse: (val) => parseInt(val),
|
||||
},
|
||||
num_inference_steps: { name: 'Steps',
|
||||
num_inference_steps: {
|
||||
name: "Steps",
|
||||
setUI: (num_inference_steps) => {
|
||||
numInferenceStepsField.value = num_inference_steps
|
||||
},
|
||||
readUI: () => parseInt(numInferenceStepsField.value),
|
||||
parse: (val) => parseInt(val)
|
||||
parse: (val) => parseInt(val),
|
||||
},
|
||||
guidance_scale: { name: 'Guidance Scale',
|
||||
guidance_scale: {
|
||||
name: "Guidance Scale",
|
||||
setUI: (guidance_scale) => {
|
||||
guidanceScaleField.value = guidance_scale
|
||||
updateGuidanceScaleSlider()
|
||||
},
|
||||
readUI: () => parseFloat(guidanceScaleField.value),
|
||||
parse: (val) => parseFloat(val)
|
||||
parse: (val) => parseFloat(val),
|
||||
},
|
||||
prompt_strength: { name: 'Prompt Strength',
|
||||
prompt_strength: {
|
||||
name: "Prompt Strength",
|
||||
setUI: (prompt_strength) => {
|
||||
promptStrengthField.value = prompt_strength
|
||||
updatePromptStrengthSlider()
|
||||
},
|
||||
readUI: () => parseFloat(promptStrengthField.value),
|
||||
parse: (val) => parseFloat(val)
|
||||
parse: (val) => parseFloat(val),
|
||||
},
|
||||
|
||||
init_image: { name: 'Initial Image',
|
||||
init_image: {
|
||||
name: "Initial Image",
|
||||
setUI: (init_image) => {
|
||||
initImagePreview.src = init_image
|
||||
},
|
||||
readUI: () => initImagePreview.src,
|
||||
parse: (val) => val
|
||||
parse: (val) => val,
|
||||
},
|
||||
mask: { name: 'Mask',
|
||||
mask: {
|
||||
name: "Mask",
|
||||
setUI: (mask) => {
|
||||
setTimeout(() => { // add a delay to insure this happens AFTER the main image loads (which reloads the inpainter)
|
||||
setTimeout(() => {
|
||||
// add a delay to insure this happens AFTER the main image loads (which reloads the inpainter)
|
||||
imageInpainter.setImg(mask)
|
||||
}, 250)
|
||||
maskSetting.checked = Boolean(mask)
|
||||
},
|
||||
readUI: () => (maskSetting.checked ? imageInpainter.getImg() : undefined),
|
||||
parse: (val) => val
|
||||
parse: (val) => val,
|
||||
},
|
||||
preserve_init_image_color_profile: { name: 'Preserve Color Profile',
|
||||
preserve_init_image_color_profile: {
|
||||
name: "Preserve Color Profile",
|
||||
setUI: (preserve_init_image_color_profile) => {
|
||||
applyColorCorrectionField.checked = parseBoolean(preserve_init_image_color_profile)
|
||||
},
|
||||
readUI: () => applyColorCorrectionField.checked,
|
||||
parse: (val) => parseBoolean(val)
|
||||
parse: (val) => parseBoolean(val),
|
||||
},
|
||||
|
||||
use_face_correction: { name: 'Use Face Correction',
|
||||
|
||||
use_face_correction: {
|
||||
name: "Use Face Correction",
|
||||
setUI: (use_face_correction) => {
|
||||
const oldVal = gfpganModelField.value
|
||||
gfpganModelField.value = getModelPath(use_face_correction, ['.pth'])
|
||||
if (gfpganModelField.value) { // Is a valid value for the field.
|
||||
gfpganModelField.value = getModelPath(use_face_correction, [".pth"])
|
||||
if (gfpganModelField.value) {
|
||||
// Is a valid value for the field.
|
||||
useFaceCorrectionField.checked = true
|
||||
gfpganModelField.disabled = false
|
||||
} else { // Not a valid value, restore the old value and disable the filter.
|
||||
} else {
|
||||
// Not a valid value, restore the old value and disable the filter.
|
||||
gfpganModelField.disabled = true
|
||||
gfpganModelField.value = oldVal
|
||||
useFaceCorrectionField.checked = false
|
||||
@ -169,17 +186,20 @@ const TASK_MAPPING = {
|
||||
//useFaceCorrectionField.checked = parseBoolean(use_face_correction)
|
||||
},
|
||||
readUI: () => (useFaceCorrectionField.checked ? gfpganModelField.value : undefined),
|
||||
parse: (val) => val
|
||||
parse: (val) => val,
|
||||
},
|
||||
use_upscale: { name: 'Use Upscaling',
|
||||
use_upscale: {
|
||||
name: "Use Upscaling",
|
||||
setUI: (use_upscale) => {
|
||||
const oldVal = upscaleModelField.value
|
||||
upscaleModelField.value = getModelPath(use_upscale, ['.pth'])
|
||||
if (upscaleModelField.value) { // Is a valid value for the field.
|
||||
upscaleModelField.value = getModelPath(use_upscale, [".pth"])
|
||||
if (upscaleModelField.value) {
|
||||
// Is a valid value for the field.
|
||||
useUpscalingField.checked = true
|
||||
upscaleModelField.disabled = false
|
||||
upscaleAmountField.disabled = false
|
||||
} else { // Not a valid value, restore the old value and disable the filter.
|
||||
} else {
|
||||
// Not a valid value, restore the old value and disable the filter.
|
||||
upscaleModelField.disabled = true
|
||||
upscaleAmountField.disabled = true
|
||||
upscaleModelField.value = oldVal
|
||||
@ -187,27 +207,30 @@ const TASK_MAPPING = {
|
||||
}
|
||||
},
|
||||
readUI: () => (useUpscalingField.checked ? upscaleModelField.value : undefined),
|
||||
parse: (val) => val
|
||||
parse: (val) => val,
|
||||
},
|
||||
upscale_amount: { name: 'Upscale By',
|
||||
upscale_amount: {
|
||||
name: "Upscale By",
|
||||
setUI: (upscale_amount) => {
|
||||
upscaleAmountField.value = upscale_amount
|
||||
},
|
||||
readUI: () => upscaleAmountField.value,
|
||||
parse: (val) => val
|
||||
parse: (val) => val,
|
||||
},
|
||||
sampler_name: { name: 'Sampler',
|
||||
sampler_name: {
|
||||
name: "Sampler",
|
||||
setUI: (sampler_name) => {
|
||||
samplerField.value = sampler_name
|
||||
},
|
||||
readUI: () => samplerField.value,
|
||||
parse: (val) => val
|
||||
parse: (val) => val,
|
||||
},
|
||||
use_stable_diffusion_model: { name: 'Stable Diffusion model',
|
||||
use_stable_diffusion_model: {
|
||||
name: "Stable Diffusion model",
|
||||
setUI: (use_stable_diffusion_model) => {
|
||||
const oldVal = stableDiffusionModelField.value
|
||||
|
||||
use_stable_diffusion_model = getModelPath(use_stable_diffusion_model, ['.ckpt', '.safetensors'])
|
||||
use_stable_diffusion_model = getModelPath(use_stable_diffusion_model, [".ckpt", ".safetensors"])
|
||||
stableDiffusionModelField.value = use_stable_diffusion_model
|
||||
|
||||
if (!stableDiffusionModelField.value) {
|
||||
@ -215,126 +238,146 @@ const TASK_MAPPING = {
|
||||
}
|
||||
},
|
||||
readUI: () => stableDiffusionModelField.value,
|
||||
parse: (val) => val
|
||||
parse: (val) => val,
|
||||
},
|
||||
use_vae_model: { name: 'VAE model',
|
||||
use_vae_model: {
|
||||
name: "VAE model",
|
||||
setUI: (use_vae_model) => {
|
||||
const oldVal = vaeModelField.value
|
||||
use_vae_model = (use_vae_model === undefined || use_vae_model === null || use_vae_model === 'None' ? '' : use_vae_model)
|
||||
use_vae_model =
|
||||
use_vae_model === undefined || use_vae_model === null || use_vae_model === "None" ? "" : use_vae_model
|
||||
|
||||
if (use_vae_model !== '') {
|
||||
use_vae_model = getModelPath(use_vae_model, ['.vae.pt', '.ckpt'])
|
||||
use_vae_model = use_vae_model !== '' ? use_vae_model : oldVal
|
||||
if (use_vae_model !== "") {
|
||||
use_vae_model = getModelPath(use_vae_model, [".vae.pt", ".ckpt"])
|
||||
use_vae_model = use_vae_model !== "" ? use_vae_model : oldVal
|
||||
}
|
||||
vaeModelField.value = use_vae_model
|
||||
},
|
||||
readUI: () => vaeModelField.value,
|
||||
parse: (val) => val
|
||||
parse: (val) => val,
|
||||
},
|
||||
use_lora_model: { name: 'LoRA model',
|
||||
use_lora_model: {
|
||||
name: "LoRA model",
|
||||
setUI: (use_lora_model) => {
|
||||
const oldVal = loraModelField.value
|
||||
use_lora_model = (use_lora_model === undefined || use_lora_model === null || use_lora_model === 'None' ? '' : use_lora_model)
|
||||
use_lora_model =
|
||||
use_lora_model === undefined || use_lora_model === null || use_lora_model === "None"
|
||||
? ""
|
||||
: use_lora_model
|
||||
|
||||
if (use_lora_model !== '') {
|
||||
use_lora_model = getModelPath(use_lora_model, ['.ckpt', '.safetensors'])
|
||||
use_lora_model = use_lora_model !== '' ? use_lora_model : oldVal
|
||||
if (use_lora_model !== "") {
|
||||
use_lora_model = getModelPath(use_lora_model, [".ckpt", ".safetensors"])
|
||||
use_lora_model = use_lora_model !== "" ? use_lora_model : oldVal
|
||||
}
|
||||
loraModelField.value = use_lora_model
|
||||
},
|
||||
readUI: () => loraModelField.value,
|
||||
parse: (val) => val
|
||||
parse: (val) => val,
|
||||
},
|
||||
lora_alpha: { name: 'LoRA Strength',
|
||||
lora_alpha: {
|
||||
name: "LoRA Strength",
|
||||
setUI: (lora_alpha) => {
|
||||
loraAlphaField.value = lora_alpha
|
||||
updateLoraAlphaSlider()
|
||||
},
|
||||
readUI: () => parseFloat(loraAlphaField.value),
|
||||
parse: (val) => parseFloat(val)
|
||||
parse: (val) => parseFloat(val),
|
||||
},
|
||||
use_hypernetwork_model: { name: 'Hypernetwork model',
|
||||
use_hypernetwork_model: {
|
||||
name: "Hypernetwork model",
|
||||
setUI: (use_hypernetwork_model) => {
|
||||
const oldVal = hypernetworkModelField.value
|
||||
use_hypernetwork_model = (use_hypernetwork_model === undefined || use_hypernetwork_model === null || use_hypernetwork_model === 'None' ? '' : use_hypernetwork_model)
|
||||
use_hypernetwork_model =
|
||||
use_hypernetwork_model === undefined ||
|
||||
use_hypernetwork_model === null ||
|
||||
use_hypernetwork_model === "None"
|
||||
? ""
|
||||
: use_hypernetwork_model
|
||||
|
||||
if (use_hypernetwork_model !== '') {
|
||||
use_hypernetwork_model = getModelPath(use_hypernetwork_model, ['.pt'])
|
||||
use_hypernetwork_model = use_hypernetwork_model !== '' ? use_hypernetwork_model : oldVal
|
||||
if (use_hypernetwork_model !== "") {
|
||||
use_hypernetwork_model = getModelPath(use_hypernetwork_model, [".pt"])
|
||||
use_hypernetwork_model = use_hypernetwork_model !== "" ? use_hypernetwork_model : oldVal
|
||||
}
|
||||
hypernetworkModelField.value = use_hypernetwork_model
|
||||
hypernetworkModelField.dispatchEvent(new Event('change'))
|
||||
hypernetworkModelField.dispatchEvent(new Event("change"))
|
||||
},
|
||||
readUI: () => hypernetworkModelField.value,
|
||||
parse: (val) => val
|
||||
parse: (val) => val,
|
||||
},
|
||||
hypernetwork_strength: { name: 'Hypernetwork Strength',
|
||||
hypernetwork_strength: {
|
||||
name: "Hypernetwork Strength",
|
||||
setUI: (hypernetwork_strength) => {
|
||||
hypernetworkStrengthField.value = hypernetwork_strength
|
||||
updateHypernetworkStrengthSlider()
|
||||
},
|
||||
readUI: () => parseFloat(hypernetworkStrengthField.value),
|
||||
parse: (val) => parseFloat(val)
|
||||
parse: (val) => parseFloat(val),
|
||||
},
|
||||
|
||||
num_outputs: { name: 'Parallel Images',
|
||||
num_outputs: {
|
||||
name: "Parallel Images",
|
||||
setUI: (num_outputs) => {
|
||||
numOutputsParallelField.value = num_outputs
|
||||
},
|
||||
readUI: () => parseInt(numOutputsParallelField.value),
|
||||
parse: (val) => val
|
||||
parse: (val) => val,
|
||||
},
|
||||
|
||||
use_cpu: { name: 'Use CPU',
|
||||
use_cpu: {
|
||||
name: "Use CPU",
|
||||
setUI: (use_cpu) => {
|
||||
useCPUField.checked = use_cpu
|
||||
},
|
||||
readUI: () => useCPUField.checked,
|
||||
parse: (val) => val
|
||||
parse: (val) => val,
|
||||
},
|
||||
|
||||
stream_image_progress: { name: 'Stream Image Progress',
|
||||
stream_image_progress: {
|
||||
name: "Stream Image Progress",
|
||||
setUI: (stream_image_progress) => {
|
||||
streamImageProgressField.checked = (parseInt(numOutputsTotalField.value) > 50 ? false : stream_image_progress)
|
||||
streamImageProgressField.checked = parseInt(numOutputsTotalField.value) > 50 ? false : stream_image_progress
|
||||
},
|
||||
readUI: () => streamImageProgressField.checked,
|
||||
parse: (val) => Boolean(val)
|
||||
parse: (val) => Boolean(val),
|
||||
},
|
||||
show_only_filtered_image: { name: 'Show only the corrected/upscaled image',
|
||||
show_only_filtered_image: {
|
||||
name: "Show only the corrected/upscaled image",
|
||||
setUI: (show_only_filtered_image) => {
|
||||
showOnlyFilteredImageField.checked = show_only_filtered_image
|
||||
},
|
||||
readUI: () => showOnlyFilteredImageField.checked,
|
||||
parse: (val) => Boolean(val)
|
||||
parse: (val) => Boolean(val),
|
||||
},
|
||||
output_format: { name: 'Output Format',
|
||||
output_format: {
|
||||
name: "Output Format",
|
||||
setUI: (output_format) => {
|
||||
outputFormatField.value = output_format
|
||||
},
|
||||
readUI: () => outputFormatField.value,
|
||||
parse: (val) => val
|
||||
parse: (val) => val,
|
||||
},
|
||||
save_to_disk_path: { name: 'Save to disk path',
|
||||
save_to_disk_path: {
|
||||
name: "Save to disk path",
|
||||
setUI: (save_to_disk_path) => {
|
||||
saveToDiskField.checked = Boolean(save_to_disk_path)
|
||||
diskPathField.value = save_to_disk_path
|
||||
},
|
||||
readUI: () => diskPathField.value,
|
||||
parse: (val) => val
|
||||
}
|
||||
parse: (val) => val,
|
||||
},
|
||||
}
|
||||
|
||||
function restoreTaskToUI(task, fieldsToSkip) {
|
||||
fieldsToSkip = fieldsToSkip || []
|
||||
|
||||
if ('numOutputsTotal' in task) {
|
||||
if ("numOutputsTotal" in task) {
|
||||
numOutputsTotalField.value = task.numOutputsTotal
|
||||
}
|
||||
if ('seed' in task) {
|
||||
if ("seed" in task) {
|
||||
randomSeedField.checked = false
|
||||
seedField.value = task.seed
|
||||
}
|
||||
if (!('reqBody' in task)) {
|
||||
if (!("reqBody" in task)) {
|
||||
return
|
||||
}
|
||||
for (const key in TASK_MAPPING) {
|
||||
@ -344,31 +387,31 @@ function restoreTaskToUI(task, fieldsToSkip) {
|
||||
}
|
||||
|
||||
// properly reset fields not present in the task
|
||||
if (!('use_hypernetwork_model' in task.reqBody)) {
|
||||
if (!("use_hypernetwork_model" in task.reqBody)) {
|
||||
hypernetworkModelField.value = ""
|
||||
hypernetworkModelField.dispatchEvent(new Event("change"))
|
||||
}
|
||||
|
||||
if (!('use_lora_model' in task.reqBody)) {
|
||||
|
||||
if (!("use_lora_model" in task.reqBody)) {
|
||||
loraModelField.value = ""
|
||||
loraModelField.dispatchEvent(new Event("change"))
|
||||
}
|
||||
|
||||
|
||||
// restore the original prompt if provided (e.g. use settings), fallback to prompt as needed (e.g. copy/paste or d&d)
|
||||
promptField.value = task.reqBody.original_prompt
|
||||
if (!('original_prompt' in task.reqBody)) {
|
||||
if (!("original_prompt" in task.reqBody)) {
|
||||
promptField.value = task.reqBody.prompt
|
||||
}
|
||||
|
||||
|
||||
// properly reset checkboxes
|
||||
if (!('use_face_correction' in task.reqBody)) {
|
||||
if (!("use_face_correction" in task.reqBody)) {
|
||||
useFaceCorrectionField.checked = false
|
||||
gfpganModelField.disabled = true
|
||||
}
|
||||
if (!('use_upscale' in task.reqBody)) {
|
||||
if (!("use_upscale" in task.reqBody)) {
|
||||
useUpscalingField.checked = false
|
||||
}
|
||||
if (!('mask' in task.reqBody) && maskSetting.checked) {
|
||||
if (!("mask" in task.reqBody) && maskSetting.checked) {
|
||||
maskSetting.checked = false
|
||||
maskSetting.dispatchEvent(new Event("click"))
|
||||
}
|
||||
@ -379,15 +422,18 @@ function restoreTaskToUI(task, fieldsToSkip) {
|
||||
if (IMAGE_REGEX.test(initImagePreview.src) && task.reqBody.init_image == undefined) {
|
||||
// hide source image
|
||||
initImageClearBtn.dispatchEvent(new Event("click"))
|
||||
}
|
||||
else if (task.reqBody.init_image !== undefined) {
|
||||
} else if (task.reqBody.init_image !== undefined) {
|
||||
// listen for inpainter loading event, which happens AFTER the main image loads (which reloads the inpainter)
|
||||
initImagePreview.addEventListener('load', function() {
|
||||
if (Boolean(task.reqBody.mask)) {
|
||||
imageInpainter.setImg(task.reqBody.mask)
|
||||
maskSetting.checked = true
|
||||
}
|
||||
}, { once: true })
|
||||
initImagePreview.addEventListener(
|
||||
"load",
|
||||
function() {
|
||||
if (Boolean(task.reqBody.mask)) {
|
||||
imageInpainter.setImg(task.reqBody.mask)
|
||||
maskSetting.checked = true
|
||||
}
|
||||
},
|
||||
{ once: true }
|
||||
)
|
||||
initImagePreview.src = task.reqBody.init_image
|
||||
}
|
||||
}
|
||||
@ -397,28 +443,26 @@ function readUI() {
|
||||
reqBody[key] = TASK_MAPPING[key].readUI()
|
||||
}
|
||||
return {
|
||||
'numOutputsTotal': parseInt(numOutputsTotalField.value),
|
||||
'seed': TASK_MAPPING['seed'].readUI(),
|
||||
'reqBody': reqBody
|
||||
numOutputsTotal: parseInt(numOutputsTotalField.value),
|
||||
seed: TASK_MAPPING["seed"].readUI(),
|
||||
reqBody: reqBody,
|
||||
}
|
||||
}
|
||||
function getModelPath(filename, extensions)
|
||||
{
|
||||
function getModelPath(filename, extensions) {
|
||||
if (typeof filename !== "string") {
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
let pathIdx
|
||||
if (filename.includes('/models/stable-diffusion/')) {
|
||||
pathIdx = filename.indexOf('/models/stable-diffusion/') + 25 // Linux, Mac paths
|
||||
}
|
||||
else if (filename.includes('\\models\\stable-diffusion\\')) {
|
||||
pathIdx = filename.indexOf('\\models\\stable-diffusion\\') + 25 // Linux, Mac paths
|
||||
if (filename.includes("/models/stable-diffusion/")) {
|
||||
pathIdx = filename.indexOf("/models/stable-diffusion/") + 25 // Linux, Mac paths
|
||||
} else if (filename.includes("\\models\\stable-diffusion\\")) {
|
||||
pathIdx = filename.indexOf("\\models\\stable-diffusion\\") + 25 // Linux, Mac paths
|
||||
}
|
||||
if (pathIdx >= 0) {
|
||||
filename = filename.slice(pathIdx)
|
||||
}
|
||||
extensions.forEach(ext => {
|
||||
extensions.forEach((ext) => {
|
||||
if (filename.endsWith(ext)) {
|
||||
filename = filename.slice(0, filename.length - ext.length)
|
||||
}
|
||||
@ -427,26 +471,26 @@ function getModelPath(filename, extensions)
|
||||
}
|
||||
|
||||
const TASK_TEXT_MAPPING = {
|
||||
prompt: 'Prompt',
|
||||
width: 'Width',
|
||||
height: 'Height',
|
||||
seed: 'Seed',
|
||||
num_inference_steps: 'Steps',
|
||||
guidance_scale: 'Guidance Scale',
|
||||
prompt_strength: 'Prompt Strength',
|
||||
use_face_correction: 'Use Face Correction',
|
||||
use_upscale: 'Use Upscaling',
|
||||
upscale_amount: 'Upscale By',
|
||||
sampler_name: 'Sampler',
|
||||
negative_prompt: 'Negative Prompt',
|
||||
use_stable_diffusion_model: 'Stable Diffusion model',
|
||||
use_hypernetwork_model: 'Hypernetwork model',
|
||||
hypernetwork_strength: 'Hypernetwork Strength'
|
||||
prompt: "Prompt",
|
||||
width: "Width",
|
||||
height: "Height",
|
||||
seed: "Seed",
|
||||
num_inference_steps: "Steps",
|
||||
guidance_scale: "Guidance Scale",
|
||||
prompt_strength: "Prompt Strength",
|
||||
use_face_correction: "Use Face Correction",
|
||||
use_upscale: "Use Upscaling",
|
||||
upscale_amount: "Upscale By",
|
||||
sampler_name: "Sampler",
|
||||
negative_prompt: "Negative Prompt",
|
||||
use_stable_diffusion_model: "Stable Diffusion model",
|
||||
use_hypernetwork_model: "Hypernetwork model",
|
||||
hypernetwork_strength: "Hypernetwork Strength",
|
||||
}
|
||||
function parseTaskFromText(str) {
|
||||
const taskReqBody = {}
|
||||
|
||||
const lines = str.split('\n')
|
||||
const lines = str.split("\n")
|
||||
if (lines.length === 0) {
|
||||
return
|
||||
}
|
||||
@ -454,14 +498,14 @@ function parseTaskFromText(str) {
|
||||
// Prompt
|
||||
let knownKeyOnFirstLine = false
|
||||
for (let key in TASK_TEXT_MAPPING) {
|
||||
if (lines[0].startsWith(TASK_TEXT_MAPPING[key] + ':')) {
|
||||
if (lines[0].startsWith(TASK_TEXT_MAPPING[key] + ":")) {
|
||||
knownKeyOnFirstLine = true
|
||||
break
|
||||
}
|
||||
}
|
||||
if (!knownKeyOnFirstLine) {
|
||||
taskReqBody.prompt = lines[0]
|
||||
console.log('Prompt:', taskReqBody.prompt)
|
||||
console.log("Prompt:", taskReqBody.prompt)
|
||||
}
|
||||
|
||||
for (const key in TASK_TEXT_MAPPING) {
|
||||
@ -469,18 +513,18 @@ function parseTaskFromText(str) {
|
||||
continue
|
||||
}
|
||||
|
||||
const name = TASK_TEXT_MAPPING[key];
|
||||
const name = TASK_TEXT_MAPPING[key]
|
||||
let val = undefined
|
||||
|
||||
const reName = new RegExp(`${name}\\ *:\\ *(.*)(?:\\r\\n|\\r|\\n)*`, 'igm')
|
||||
const match = reName.exec(str);
|
||||
const reName = new RegExp(`${name}\\ *:\\ *(.*)(?:\\r\\n|\\r|\\n)*`, "igm")
|
||||
const match = reName.exec(str)
|
||||
if (match) {
|
||||
str = str.slice(0, match.index) + str.slice(match.index + match[0].length)
|
||||
val = match[1]
|
||||
}
|
||||
if (val !== undefined) {
|
||||
taskReqBody[key] = TASK_MAPPING[key].parse(val.trim())
|
||||
console.log(TASK_MAPPING[key].name + ':', taskReqBody[key])
|
||||
console.log(TASK_MAPPING[key].name + ":", taskReqBody[key])
|
||||
if (!str) {
|
||||
break
|
||||
}
|
||||
@ -490,18 +534,19 @@ function parseTaskFromText(str) {
|
||||
return undefined
|
||||
}
|
||||
const task = { reqBody: taskReqBody }
|
||||
if ('seed' in taskReqBody) {
|
||||
if ("seed" in taskReqBody) {
|
||||
task.seed = taskReqBody.seed
|
||||
}
|
||||
return task
|
||||
}
|
||||
|
||||
async function parseContent(text) {
|
||||
text = text.trim();
|
||||
if (text.startsWith('{') && text.endsWith('}')) {
|
||||
text = text.trim()
|
||||
if (text.startsWith("{") && text.endsWith("}")) {
|
||||
try {
|
||||
const task = JSON.parse(text)
|
||||
if (!('reqBody' in task)) { // support the format saved to the disk, by the UI
|
||||
if (!("reqBody" in task)) {
|
||||
// support the format saved to the disk, by the UI
|
||||
task.reqBody = Object.assign({}, task)
|
||||
}
|
||||
restoreTaskToUI(task)
|
||||
@ -513,7 +558,8 @@ async function parseContent(text) {
|
||||
}
|
||||
// Normal txt file.
|
||||
const task = parseTaskFromText(text)
|
||||
if (text.toLowerCase().includes('seed:') && task) { // only parse valid task content
|
||||
if (text.toLowerCase().includes("seed:") && task) {
|
||||
// only parse valid task content
|
||||
restoreTaskToUI(task)
|
||||
return true
|
||||
} else {
|
||||
@ -530,21 +576,25 @@ async function readFile(file, i) {
|
||||
}
|
||||
|
||||
function dropHandler(ev) {
|
||||
console.log('Content dropped...')
|
||||
console.log("Content dropped...")
|
||||
let items = []
|
||||
|
||||
if (ev?.dataTransfer?.items) { // Use DataTransferItemList interface
|
||||
if (ev?.dataTransfer?.items) {
|
||||
// Use DataTransferItemList interface
|
||||
items = Array.from(ev.dataTransfer.items)
|
||||
items = items.filter(item => item.kind === 'file')
|
||||
items = items.map(item => item.getAsFile())
|
||||
} else if (ev?.dataTransfer?.files) { // Use DataTransfer interface
|
||||
items = items.filter((item) => item.kind === "file")
|
||||
items = items.map((item) => item.getAsFile())
|
||||
} else if (ev?.dataTransfer?.files) {
|
||||
// Use DataTransfer interface
|
||||
items = Array.from(ev.dataTransfer.files)
|
||||
}
|
||||
|
||||
items.forEach(item => {item.file_ext = EXT_REGEX.exec(item.name.toLowerCase())[1]})
|
||||
items.forEach((item) => {
|
||||
item.file_ext = EXT_REGEX.exec(item.name.toLowerCase())[1]
|
||||
})
|
||||
|
||||
let text_items = items.filter(item => TEXT_EXTENSIONS.includes(item.file_ext))
|
||||
let image_items = items.filter(item => IMAGE_EXTENSIONS.includes(item.file_ext))
|
||||
let text_items = items.filter((item) => TEXT_EXTENSIONS.includes(item.file_ext))
|
||||
let image_items = items.filter((item) => IMAGE_EXTENSIONS.includes(item.file_ext))
|
||||
|
||||
if (image_items.length > 0 && ev.target == initImageSelector) {
|
||||
return // let the event bubble up, so that the Init Image filepicker can receive this
|
||||
@ -554,7 +604,7 @@ function dropHandler(ev) {
|
||||
text_items.forEach(readFile)
|
||||
}
|
||||
function dragOverHandler(ev) {
|
||||
console.log('Content in drop zone')
|
||||
console.log("Content in drop zone")
|
||||
|
||||
// Prevent default behavior (Prevent file/content from being opened)
|
||||
ev.preventDefault()
|
||||
@ -562,73 +612,72 @@ function dragOverHandler(ev) {
|
||||
ev.dataTransfer.dropEffect = "copy"
|
||||
|
||||
let img = new Image()
|
||||
img.src = '//' + location.host + '/media/images/favicon-32x32.png'
|
||||
img.src = "//" + location.host + "/media/images/favicon-32x32.png"
|
||||
ev.dataTransfer.setDragImage(img, 16, 16)
|
||||
}
|
||||
|
||||
document.addEventListener("drop", dropHandler)
|
||||
document.addEventListener("dragover", dragOverHandler)
|
||||
|
||||
const TASK_REQ_NO_EXPORT = [
|
||||
"use_cpu",
|
||||
"save_to_disk_path"
|
||||
]
|
||||
const resetSettings = document.getElementById('reset-image-settings')
|
||||
const TASK_REQ_NO_EXPORT = ["use_cpu", "save_to_disk_path"]
|
||||
const resetSettings = document.getElementById("reset-image-settings")
|
||||
|
||||
function checkReadTextClipboardPermission (result) {
|
||||
function checkReadTextClipboardPermission(result) {
|
||||
if (result.state != "granted" && result.state != "prompt") {
|
||||
return
|
||||
}
|
||||
// PASTE ICON
|
||||
const pasteIcon = document.createElement('i')
|
||||
pasteIcon.className = 'fa-solid fa-paste section-button'
|
||||
const pasteIcon = document.createElement("i")
|
||||
pasteIcon.className = "fa-solid fa-paste section-button"
|
||||
pasteIcon.innerHTML = `<span class="simple-tooltip top-left">Paste Image Settings</span>`
|
||||
pasteIcon.addEventListener('click', async (event) => {
|
||||
pasteIcon.addEventListener("click", async (event) => {
|
||||
event.stopPropagation()
|
||||
// Add css class 'active'
|
||||
pasteIcon.classList.add('active')
|
||||
pasteIcon.classList.add("active")
|
||||
// In 350 ms remove the 'active' class
|
||||
asyncDelay(350).then(() => pasteIcon.classList.remove('active'))
|
||||
asyncDelay(350).then(() => pasteIcon.classList.remove("active"))
|
||||
|
||||
// Retrieve clipboard content and try to parse it
|
||||
const text = await navigator.clipboard.readText();
|
||||
const text = await navigator.clipboard.readText()
|
||||
await parseContent(text)
|
||||
})
|
||||
resetSettings.parentNode.insertBefore(pasteIcon, resetSettings)
|
||||
}
|
||||
navigator.permissions.query({ name: "clipboard-read" }).then(checkReadTextClipboardPermission, (reason) => console.log('clipboard-read is not available. %o', reason))
|
||||
navigator.permissions
|
||||
.query({ name: "clipboard-read" })
|
||||
.then(checkReadTextClipboardPermission, (reason) => console.log("clipboard-read is not available. %o", reason))
|
||||
|
||||
document.addEventListener('paste', async (event) => {
|
||||
document.addEventListener("paste", async (event) => {
|
||||
if (event.target) {
|
||||
const targetTag = event.target.tagName.toLowerCase()
|
||||
// Disable when targeting input elements.
|
||||
if (targetTag === 'input' || targetTag === 'textarea') {
|
||||
if (targetTag === "input" || targetTag === "textarea") {
|
||||
return
|
||||
}
|
||||
}
|
||||
const paste = (event.clipboardData || window.clipboardData).getData('text')
|
||||
const paste = (event.clipboardData || window.clipboardData).getData("text")
|
||||
const selection = window.getSelection()
|
||||
if (paste != "" && selection.toString().trim().length <= 0 && await parseContent(paste)) {
|
||||
if (paste != "" && selection.toString().trim().length <= 0 && (await parseContent(paste))) {
|
||||
event.preventDefault()
|
||||
return
|
||||
}
|
||||
})
|
||||
|
||||
// Adds a copy and a paste icon if the browser grants permission to write to clipboard.
|
||||
function checkWriteToClipboardPermission (result) {
|
||||
function checkWriteToClipboardPermission(result) {
|
||||
if (result.state != "granted" && result.state != "prompt") {
|
||||
return
|
||||
}
|
||||
// COPY ICON
|
||||
const copyIcon = document.createElement('i')
|
||||
copyIcon.className = 'fa-solid fa-clipboard section-button'
|
||||
const copyIcon = document.createElement("i")
|
||||
copyIcon.className = "fa-solid fa-clipboard section-button"
|
||||
copyIcon.innerHTML = `<span class="simple-tooltip top-left">Copy Image Settings</span>`
|
||||
copyIcon.addEventListener('click', (event) => {
|
||||
copyIcon.addEventListener("click", (event) => {
|
||||
event.stopPropagation()
|
||||
// Add css class 'active'
|
||||
copyIcon.classList.add('active')
|
||||
copyIcon.classList.add("active")
|
||||
// In 350 ms remove the 'active' class
|
||||
asyncDelay(350).then(() => copyIcon.classList.remove('active'))
|
||||
asyncDelay(350).then(() => copyIcon.classList.remove("active"))
|
||||
const uiState = readUI()
|
||||
TASK_REQ_NO_EXPORT.forEach((key) => delete uiState.reqBody[key])
|
||||
if (uiState.reqBody.init_image && !IMAGE_REGEX.test(uiState.reqBody.init_image)) {
|
||||
@ -641,8 +690,8 @@ function checkWriteToClipboardPermission (result) {
|
||||
}
|
||||
// Determine which access we have to the clipboard. Clipboard access is only available on localhost or via TLS.
|
||||
navigator.permissions.query({ name: "clipboard-write" }).then(checkWriteToClipboardPermission, (e) => {
|
||||
if (e instanceof TypeError && typeof navigator?.clipboard?.writeText === 'function') {
|
||||
if (e instanceof TypeError && typeof navigator?.clipboard?.writeText === "function") {
|
||||
// Fix for firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1560373
|
||||
checkWriteToClipboardPermission({state:"granted"})
|
||||
checkWriteToClipboardPermission({ state: "granted" })
|
||||
}
|
||||
})
|
||||
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -11,56 +11,35 @@
|
||||
* @type {(() => (string | ImageModalRequest) | string | ImageModalRequest) => {}}
|
||||
*/
|
||||
const imageModal = (function() {
|
||||
const backElem = createElement(
|
||||
'i',
|
||||
undefined,
|
||||
['fa-solid', 'fa-arrow-left', 'tertiaryButton'],
|
||||
)
|
||||
const backElem = createElement("i", undefined, ["fa-solid", "fa-arrow-left", "tertiaryButton"])
|
||||
|
||||
const forwardElem = createElement(
|
||||
'i',
|
||||
undefined,
|
||||
['fa-solid', 'fa-arrow-right', 'tertiaryButton'],
|
||||
)
|
||||
const forwardElem = createElement("i", undefined, ["fa-solid", "fa-arrow-right", "tertiaryButton"])
|
||||
|
||||
const zoomElem = createElement(
|
||||
'i',
|
||||
undefined,
|
||||
['fa-solid', 'tertiaryButton'],
|
||||
)
|
||||
const zoomElem = createElement("i", undefined, ["fa-solid", "tertiaryButton"])
|
||||
|
||||
const closeElem = createElement(
|
||||
'i',
|
||||
undefined,
|
||||
['fa-solid', 'fa-xmark', 'tertiaryButton'],
|
||||
)
|
||||
const closeElem = createElement("i", undefined, ["fa-solid", "fa-xmark", "tertiaryButton"])
|
||||
|
||||
const menuBarElem = createElement('div', undefined, 'menu-bar', [backElem, forwardElem, zoomElem, closeElem])
|
||||
const menuBarElem = createElement("div", undefined, "menu-bar", [backElem, forwardElem, zoomElem, closeElem])
|
||||
|
||||
const imageContainer = createElement('div', undefined, 'image-wrapper')
|
||||
const imageContainer = createElement("div", undefined, "image-wrapper")
|
||||
|
||||
const backdrop = createElement('div', undefined, 'backdrop')
|
||||
const backdrop = createElement("div", undefined, "backdrop")
|
||||
|
||||
const modalContainer = createElement('div', undefined, 'content', [menuBarElem, imageContainer])
|
||||
const modalContainer = createElement("div", undefined, "content", [menuBarElem, imageContainer])
|
||||
|
||||
const modalElem = createElement(
|
||||
'div',
|
||||
{ id: 'viewFullSizeImgModal' },
|
||||
['popup'],
|
||||
[backdrop, modalContainer],
|
||||
)
|
||||
const modalElem = createElement("div", { id: "viewFullSizeImgModal" }, ["popup"], [backdrop, modalContainer])
|
||||
document.body.appendChild(modalElem)
|
||||
|
||||
const setZoomLevel = (value) => {
|
||||
const img = imageContainer.querySelector('img')
|
||||
const img = imageContainer.querySelector("img")
|
||||
|
||||
if (value) {
|
||||
zoomElem.classList.remove('fa-magnifying-glass-plus')
|
||||
zoomElem.classList.add('fa-magnifying-glass-minus')
|
||||
zoomElem.classList.remove("fa-magnifying-glass-plus")
|
||||
zoomElem.classList.add("fa-magnifying-glass-minus")
|
||||
if (img) {
|
||||
img.classList.remove('natural-zoom')
|
||||
img.classList.remove("natural-zoom")
|
||||
|
||||
let zoomLevel = typeof value === 'number' ? value : img.dataset.zoomLevel
|
||||
let zoomLevel = typeof value === "number" ? value : img.dataset.zoomLevel
|
||||
if (!zoomLevel) {
|
||||
zoomLevel = 100
|
||||
}
|
||||
@ -70,19 +49,18 @@ const imageModal = (function() {
|
||||
img.height = img.naturalHeight * (+zoomLevel / 100)
|
||||
}
|
||||
} else {
|
||||
zoomElem.classList.remove('fa-magnifying-glass-minus')
|
||||
zoomElem.classList.add('fa-magnifying-glass-plus')
|
||||
zoomElem.classList.remove("fa-magnifying-glass-minus")
|
||||
zoomElem.classList.add("fa-magnifying-glass-plus")
|
||||
if (img) {
|
||||
img.classList.add('natural-zoom')
|
||||
img.removeAttribute('width')
|
||||
img.removeAttribute('height')
|
||||
img.classList.add("natural-zoom")
|
||||
img.removeAttribute("width")
|
||||
img.removeAttribute("height")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
zoomElem.addEventListener(
|
||||
'click',
|
||||
() => setZoomLevel(imageContainer.querySelector('img')?.classList?.contains('natural-zoom')),
|
||||
zoomElem.addEventListener("click", () =>
|
||||
setZoomLevel(imageContainer.querySelector("img")?.classList?.contains("natural-zoom"))
|
||||
)
|
||||
|
||||
const state = {
|
||||
@ -91,15 +69,15 @@ const imageModal = (function() {
|
||||
}
|
||||
|
||||
const clear = () => {
|
||||
imageContainer.innerHTML = ''
|
||||
imageContainer.innerHTML = ""
|
||||
|
||||
Object.keys(state).forEach(key => delete state[key])
|
||||
Object.keys(state).forEach((key) => delete state[key])
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
clear()
|
||||
modalElem.classList.remove('active')
|
||||
document.body.style.overflow = 'initial'
|
||||
modalElem.classList.remove("active")
|
||||
document.body.style.overflow = "initial"
|
||||
}
|
||||
|
||||
/**
|
||||
@ -113,27 +91,27 @@ const imageModal = (function() {
|
||||
|
||||
clear()
|
||||
|
||||
const options = typeof optionsFactory === 'function' ? optionsFactory() : optionsFactory
|
||||
const src = typeof options === 'string' ? options : options.src
|
||||
const options = typeof optionsFactory === "function" ? optionsFactory() : optionsFactory
|
||||
const src = typeof options === "string" ? options : options.src
|
||||
|
||||
const imgElem = createElement('img', { src }, 'natural-zoom')
|
||||
const imgElem = createElement("img", { src }, "natural-zoom")
|
||||
imageContainer.appendChild(imgElem)
|
||||
modalElem.classList.add('active')
|
||||
document.body.style.overflow = 'hidden'
|
||||
modalElem.classList.add("active")
|
||||
document.body.style.overflow = "hidden"
|
||||
setZoomLevel(false)
|
||||
|
||||
if (typeof options === 'object' && options.previous) {
|
||||
if (typeof options === "object" && options.previous) {
|
||||
state.previous = options.previous
|
||||
backElem.style.display = 'unset'
|
||||
backElem.style.display = "unset"
|
||||
} else {
|
||||
backElem.style.display = 'none'
|
||||
backElem.style.display = "none"
|
||||
}
|
||||
|
||||
if (typeof options === 'object' && options.next) {
|
||||
if (typeof options === "object" && options.next) {
|
||||
state.next = options.next
|
||||
forwardElem.style.display = 'unset'
|
||||
forwardElem.style.display = "unset"
|
||||
} else {
|
||||
forwardElem.style.display = 'none'
|
||||
forwardElem.style.display = "none"
|
||||
}
|
||||
}
|
||||
|
||||
@ -141,7 +119,7 @@ const imageModal = (function() {
|
||||
if (state.previous) {
|
||||
init(state.previous)
|
||||
} else {
|
||||
backElem.style.display = 'none'
|
||||
backElem.style.display = "none"
|
||||
}
|
||||
}
|
||||
|
||||
@ -149,27 +127,27 @@ const imageModal = (function() {
|
||||
if (state.next) {
|
||||
init(state.next)
|
||||
} else {
|
||||
forwardElem.style.display = 'none'
|
||||
forwardElem.style.display = "none"
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if (modalElem.classList.contains('active')) {
|
||||
window.addEventListener("keydown", (e) => {
|
||||
if (modalElem.classList.contains("active")) {
|
||||
switch (e.key) {
|
||||
case 'Escape':
|
||||
case "Escape":
|
||||
close()
|
||||
break
|
||||
case 'ArrowLeft':
|
||||
case "ArrowLeft":
|
||||
back()
|
||||
break
|
||||
case 'ArrowRight':
|
||||
case "ArrowRight":
|
||||
forward()
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
window.addEventListener('click', (e) => {
|
||||
if (modalElem.classList.contains('active')) {
|
||||
window.addEventListener("click", (e) => {
|
||||
if (modalElem.classList.contains("active")) {
|
||||
if (e.target === backdrop || e.target === closeElem) {
|
||||
close()
|
||||
}
|
||||
@ -180,9 +158,9 @@ const imageModal = (function() {
|
||||
}
|
||||
})
|
||||
|
||||
backElem.addEventListener('click', back)
|
||||
backElem.addEventListener("click", back)
|
||||
|
||||
forwardElem.addEventListener('click', forward)
|
||||
forwardElem.addEventListener("click", forward)
|
||||
|
||||
/**
|
||||
* @param {() => (string | ImageModalRequest) | string | ImageModalRequest} optionsFactory
|
||||
|
@ -3,26 +3,26 @@ let modifiers = []
|
||||
let customModifiersGroupElement = undefined
|
||||
let customModifiersInitialContent
|
||||
|
||||
let editorModifierEntries = document.querySelector('#editor-modifiers-entries')
|
||||
let editorModifierTagsList = document.querySelector('#editor-inputs-tags-list')
|
||||
let editorTagsContainer = document.querySelector('#editor-inputs-tags-container')
|
||||
let modifierCardSizeSlider = document.querySelector('#modifier-card-size-slider')
|
||||
let previewImageField = document.querySelector('#preview-image')
|
||||
let modifierSettingsBtn = document.querySelector('#modifier-settings-btn')
|
||||
let modifierSettingsOverlay = document.querySelector('#modifier-settings-config')
|
||||
let customModifiersTextBox = document.querySelector('#custom-modifiers-input')
|
||||
let customModifierEntriesToolbar = document.querySelector('#editor-modifiers-entries-toolbar')
|
||||
let editorModifierEntries = document.querySelector("#editor-modifiers-entries")
|
||||
let editorModifierTagsList = document.querySelector("#editor-inputs-tags-list")
|
||||
let editorTagsContainer = document.querySelector("#editor-inputs-tags-container")
|
||||
let modifierCardSizeSlider = document.querySelector("#modifier-card-size-slider")
|
||||
let previewImageField = document.querySelector("#preview-image")
|
||||
let modifierSettingsBtn = document.querySelector("#modifier-settings-btn")
|
||||
let modifierSettingsOverlay = document.querySelector("#modifier-settings-config")
|
||||
let customModifiersTextBox = document.querySelector("#custom-modifiers-input")
|
||||
let customModifierEntriesToolbar = document.querySelector("#editor-modifiers-entries-toolbar")
|
||||
|
||||
const modifierThumbnailPath = 'media/modifier-thumbnails'
|
||||
const activeCardClass = 'modifier-card-active'
|
||||
const modifierThumbnailPath = "media/modifier-thumbnails"
|
||||
const activeCardClass = "modifier-card-active"
|
||||
const CUSTOM_MODIFIERS_KEY = "customModifiers"
|
||||
|
||||
function createModifierCard(name, previews, removeBy) {
|
||||
const modifierCard = document.createElement('div')
|
||||
const modifierCard = document.createElement("div")
|
||||
let style = previewImageField.value
|
||||
let styleIndex = (style=='portrait') ? 0 : 1
|
||||
let styleIndex = style == "portrait" ? 0 : 1
|
||||
|
||||
modifierCard.className = 'modifier-card'
|
||||
modifierCard.className = "modifier-card"
|
||||
modifierCard.innerHTML = `
|
||||
<div class="modifier-card-overlay"></div>
|
||||
<div class="modifier-card-image-container">
|
||||
@ -34,35 +34,35 @@ function createModifierCard(name, previews, removeBy) {
|
||||
<div class="modifier-card-label"><p></p></div>
|
||||
</div>`
|
||||
|
||||
const image = modifierCard.querySelector('.modifier-card-image')
|
||||
const errorText = modifierCard.querySelector('.modifier-card-error-label')
|
||||
const label = modifierCard.querySelector('.modifier-card-label')
|
||||
const image = modifierCard.querySelector(".modifier-card-image")
|
||||
const errorText = modifierCard.querySelector(".modifier-card-error-label")
|
||||
const label = modifierCard.querySelector(".modifier-card-label")
|
||||
|
||||
errorText.innerText = 'No Image'
|
||||
errorText.innerText = "No Image"
|
||||
|
||||
if (typeof previews == 'object') {
|
||||
image.src = previews[styleIndex]; // portrait
|
||||
image.setAttribute('preview-type', style)
|
||||
if (typeof previews == "object") {
|
||||
image.src = previews[styleIndex] // portrait
|
||||
image.setAttribute("preview-type", style)
|
||||
} else {
|
||||
image.remove()
|
||||
}
|
||||
|
||||
const maxLabelLength = 30
|
||||
const cardLabel = removeBy ? name.replace('by ', '') : name
|
||||
const cardLabel = removeBy ? name.replace("by ", "") : name
|
||||
|
||||
if(cardLabel.length <= maxLabelLength) {
|
||||
label.querySelector('p').innerText = cardLabel
|
||||
if (cardLabel.length <= maxLabelLength) {
|
||||
label.querySelector("p").innerText = cardLabel
|
||||
} else {
|
||||
const tooltipText = document.createElement('span')
|
||||
tooltipText.className = 'tooltip-text'
|
||||
const tooltipText = document.createElement("span")
|
||||
tooltipText.className = "tooltip-text"
|
||||
tooltipText.innerText = name
|
||||
|
||||
label.classList.add('tooltip')
|
||||
label.classList.add("tooltip")
|
||||
label.appendChild(tooltipText)
|
||||
|
||||
label.querySelector('p').innerText = cardLabel.substring(0, maxLabelLength) + '...'
|
||||
label.querySelector("p").innerText = cardLabel.substring(0, maxLabelLength) + "..."
|
||||
}
|
||||
label.querySelector('p').dataset.fullName = name // preserve the full name
|
||||
label.querySelector("p").dataset.fullName = name // preserve the full name
|
||||
|
||||
return modifierCard
|
||||
}
|
||||
@ -71,55 +71,58 @@ function createModifierGroup(modifierGroup, initiallyExpanded, removeBy) {
|
||||
const title = modifierGroup.category
|
||||
const modifiers = modifierGroup.modifiers
|
||||
|
||||
const titleEl = document.createElement('h5')
|
||||
titleEl.className = 'collapsible'
|
||||
const titleEl = document.createElement("h5")
|
||||
titleEl.className = "collapsible"
|
||||
titleEl.innerText = title
|
||||
|
||||
const modifiersEl = document.createElement('div')
|
||||
modifiersEl.classList.add('collapsible-content', 'editor-modifiers-leaf')
|
||||
const modifiersEl = document.createElement("div")
|
||||
modifiersEl.classList.add("collapsible-content", "editor-modifiers-leaf")
|
||||
|
||||
if (initiallyExpanded === true) {
|
||||
titleEl.className += ' active'
|
||||
titleEl.className += " active"
|
||||
}
|
||||
|
||||
modifiers.forEach(modObj => {
|
||||
modifiers.forEach((modObj) => {
|
||||
const modifierName = modObj.modifier
|
||||
const modifierPreviews = modObj?.previews?.map(preview => `${IMAGE_REGEX.test(preview.image) ? preview.image : modifierThumbnailPath + '/' + preview.path}`)
|
||||
const modifierPreviews = modObj?.previews?.map(
|
||||
(preview) =>
|
||||
`${IMAGE_REGEX.test(preview.image) ? preview.image : modifierThumbnailPath + "/" + preview.path}`
|
||||
)
|
||||
|
||||
const modifierCard = createModifierCard(modifierName, modifierPreviews, removeBy)
|
||||
|
||||
if(typeof modifierCard == 'object') {
|
||||
if (typeof modifierCard == "object") {
|
||||
modifiersEl.appendChild(modifierCard)
|
||||
const trimmedName = trimModifiers(modifierName)
|
||||
|
||||
modifierCard.addEventListener('click', () => {
|
||||
if (activeTags.map(x => trimModifiers(x.name)).includes(trimmedName)) {
|
||||
modifierCard.addEventListener("click", () => {
|
||||
if (activeTags.map((x) => trimModifiers(x.name)).includes(trimmedName)) {
|
||||
// remove modifier from active array
|
||||
activeTags = activeTags.filter(x => trimModifiers(x.name) != trimmedName)
|
||||
activeTags = activeTags.filter((x) => trimModifiers(x.name) != trimmedName)
|
||||
toggleCardState(trimmedName, false)
|
||||
} else {
|
||||
// add modifier to active array
|
||||
activeTags.push({
|
||||
'name': modifierName,
|
||||
'element': modifierCard.cloneNode(true),
|
||||
'originElement': modifierCard,
|
||||
'previews': modifierPreviews
|
||||
name: modifierName,
|
||||
element: modifierCard.cloneNode(true),
|
||||
originElement: modifierCard,
|
||||
previews: modifierPreviews,
|
||||
})
|
||||
toggleCardState(trimmedName, true)
|
||||
}
|
||||
|
||||
refreshTagsList()
|
||||
document.dispatchEvent(new Event('refreshImageModifiers'))
|
||||
document.dispatchEvent(new Event("refreshImageModifiers"))
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
let brk = document.createElement('br')
|
||||
brk.style.clear = 'both'
|
||||
let brk = document.createElement("br")
|
||||
brk.style.clear = "both"
|
||||
modifiersEl.appendChild(brk)
|
||||
|
||||
let e = document.createElement('div')
|
||||
e.className = 'modifier-category'
|
||||
let e = document.createElement("div")
|
||||
e.className = "modifier-category"
|
||||
e.appendChild(titleEl)
|
||||
e.appendChild(modifiersEl)
|
||||
|
||||
@ -130,87 +133,98 @@ function createModifierGroup(modifierGroup, initiallyExpanded, removeBy) {
|
||||
|
||||
function trimModifiers(tag) {
|
||||
// Remove trailing '-' and/or '+'
|
||||
tag = tag.replace(/[-+]+$/, '');
|
||||
tag = tag.replace(/[-+]+$/, "")
|
||||
// Remove parentheses at beginning and end
|
||||
return tag.replace(/^[(]+|[\s)]+$/g, '');
|
||||
return tag.replace(/^[(]+|[\s)]+$/g, "")
|
||||
}
|
||||
|
||||
async function loadModifiers() {
|
||||
try {
|
||||
let res = await fetch('/get/modifiers')
|
||||
let res = await fetch("/get/modifiers")
|
||||
if (res.status === 200) {
|
||||
res = await res.json()
|
||||
|
||||
modifiers = res; // update global variable
|
||||
modifiers = res // update global variable
|
||||
|
||||
res.reverse()
|
||||
|
||||
res.forEach((modifierGroup, idx) => {
|
||||
createModifierGroup(modifierGroup, idx === res.length - 1, modifierGroup === 'Artist' ? true : false) // only remove "By " for artists
|
||||
createModifierGroup(modifierGroup, idx === res.length - 1, modifierGroup === "Artist" ? true : false) // only remove "By " for artists
|
||||
})
|
||||
|
||||
createCollapsibles(editorModifierEntries)
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('error fetching modifiers', e)
|
||||
console.error("error fetching modifiers", e)
|
||||
}
|
||||
|
||||
loadCustomModifiers()
|
||||
resizeModifierCards(modifierCardSizeSlider.value)
|
||||
document.dispatchEvent(new Event('loadImageModifiers'))
|
||||
document.dispatchEvent(new Event("loadImageModifiers"))
|
||||
}
|
||||
|
||||
function refreshModifiersState(newTags, inactiveTags) {
|
||||
// clear existing modifiers
|
||||
document.querySelector('#editor-modifiers').querySelectorAll('.modifier-card').forEach(modifierCard => {
|
||||
const modifierName = modifierCard.querySelector('.modifier-card-label p').dataset.fullName // pick the full modifier name
|
||||
if (activeTags.map(x => x.name).includes(modifierName)) {
|
||||
modifierCard.classList.remove(activeCardClass)
|
||||
modifierCard.querySelector('.modifier-card-image-overlay').innerText = '+'
|
||||
}
|
||||
})
|
||||
document
|
||||
.querySelector("#editor-modifiers")
|
||||
.querySelectorAll(".modifier-card")
|
||||
.forEach((modifierCard) => {
|
||||
const modifierName = modifierCard.querySelector(".modifier-card-label p").dataset.fullName // pick the full modifier name
|
||||
if (activeTags.map((x) => x.name).includes(modifierName)) {
|
||||
modifierCard.classList.remove(activeCardClass)
|
||||
modifierCard.querySelector(".modifier-card-image-overlay").innerText = "+"
|
||||
}
|
||||
})
|
||||
activeTags = []
|
||||
|
||||
// set new modifiers
|
||||
newTags.forEach(tag => {
|
||||
newTags.forEach((tag) => {
|
||||
let found = false
|
||||
document.querySelector('#editor-modifiers').querySelectorAll('.modifier-card').forEach(modifierCard => {
|
||||
const modifierName = modifierCard.querySelector('.modifier-card-label p').dataset.fullName
|
||||
const shortModifierName = modifierCard.querySelector('.modifier-card-label p').innerText
|
||||
if (trimModifiers(tag) == trimModifiers(modifierName)) {
|
||||
// add modifier to active array
|
||||
if (!activeTags.map(x => x.name).includes(tag)) { // only add each tag once even if several custom modifier cards share the same tag
|
||||
const imageModifierCard = modifierCard.cloneNode(true)
|
||||
imageModifierCard.querySelector('.modifier-card-label p').innerText = tag.replace(modifierName, shortModifierName)
|
||||
activeTags.push({
|
||||
'name': tag,
|
||||
'element': imageModifierCard,
|
||||
'originElement': modifierCard
|
||||
})
|
||||
document
|
||||
.querySelector("#editor-modifiers")
|
||||
.querySelectorAll(".modifier-card")
|
||||
.forEach((modifierCard) => {
|
||||
const modifierName = modifierCard.querySelector(".modifier-card-label p").dataset.fullName
|
||||
const shortModifierName = modifierCard.querySelector(".modifier-card-label p").innerText
|
||||
if (trimModifiers(tag) == trimModifiers(modifierName)) {
|
||||
// add modifier to active array
|
||||
if (!activeTags.map((x) => x.name).includes(tag)) {
|
||||
// only add each tag once even if several custom modifier cards share the same tag
|
||||
const imageModifierCard = modifierCard.cloneNode(true)
|
||||
imageModifierCard.querySelector(".modifier-card-label p").innerText = tag.replace(
|
||||
modifierName,
|
||||
shortModifierName
|
||||
)
|
||||
activeTags.push({
|
||||
name: tag,
|
||||
element: imageModifierCard,
|
||||
originElement: modifierCard,
|
||||
})
|
||||
}
|
||||
modifierCard.classList.add(activeCardClass)
|
||||
modifierCard.querySelector(".modifier-card-image-overlay").innerText = "-"
|
||||
found = true
|
||||
}
|
||||
modifierCard.classList.add(activeCardClass)
|
||||
modifierCard.querySelector('.modifier-card-image-overlay').innerText = '-'
|
||||
found = true
|
||||
}
|
||||
})
|
||||
if (found == false) { // custom tag went missing, create one here
|
||||
})
|
||||
if (found == false) {
|
||||
// custom tag went missing, create one here
|
||||
let modifierCard = createModifierCard(tag, undefined, false) // create a modifier card for the missing tag, no image
|
||||
|
||||
modifierCard.addEventListener('click', () => {
|
||||
if (activeTags.map(x => x.name).includes(tag)) {
|
||||
|
||||
modifierCard.addEventListener("click", () => {
|
||||
if (activeTags.map((x) => x.name).includes(tag)) {
|
||||
// remove modifier from active array
|
||||
activeTags = activeTags.filter(x => x.name != tag)
|
||||
activeTags = activeTags.filter((x) => x.name != tag)
|
||||
modifierCard.classList.remove(activeCardClass)
|
||||
|
||||
modifierCard.querySelector('.modifier-card-image-overlay').innerText = '+'
|
||||
modifierCard.querySelector(".modifier-card-image-overlay").innerText = "+"
|
||||
}
|
||||
refreshTagsList()
|
||||
})
|
||||
|
||||
activeTags.push({
|
||||
'name': tag,
|
||||
'element': modifierCard,
|
||||
'originElement': undefined // no origin element for missing tags
|
||||
name: tag,
|
||||
element: modifierCard,
|
||||
originElement: undefined, // no origin element for missing tags
|
||||
})
|
||||
}
|
||||
})
|
||||
@ -220,41 +234,44 @@ function refreshModifiersState(newTags, inactiveTags) {
|
||||
function refreshInactiveTags(inactiveTags) {
|
||||
// update inactive tags
|
||||
if (inactiveTags !== undefined && inactiveTags.length > 0) {
|
||||
activeTags.forEach (tag => {
|
||||
if (inactiveTags.find(element => element === tag.name) !== undefined) {
|
||||
activeTags.forEach((tag) => {
|
||||
if (inactiveTags.find((element) => element === tag.name) !== undefined) {
|
||||
tag.inactive = true
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// update cards
|
||||
let overlays = document.querySelector('#editor-inputs-tags-list').querySelectorAll('.modifier-card-overlay')
|
||||
overlays.forEach (i => {
|
||||
let modifierName = i.parentElement.getElementsByClassName('modifier-card-label')[0].getElementsByTagName("p")[0].dataset.fullName
|
||||
if (inactiveTags?.find(element => element === modifierName) !== undefined) {
|
||||
i.parentElement.classList.add('modifier-toggle-inactive')
|
||||
let overlays = document.querySelector("#editor-inputs-tags-list").querySelectorAll(".modifier-card-overlay")
|
||||
overlays.forEach((i) => {
|
||||
let modifierName = i.parentElement.getElementsByClassName("modifier-card-label")[0].getElementsByTagName("p")[0]
|
||||
.dataset.fullName
|
||||
if (inactiveTags?.find((element) => element === modifierName) !== undefined) {
|
||||
i.parentElement.classList.add("modifier-toggle-inactive")
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function refreshTagsList(inactiveTags) {
|
||||
editorModifierTagsList.innerHTML = ''
|
||||
editorModifierTagsList.innerHTML = ""
|
||||
|
||||
if (activeTags.length == 0) {
|
||||
editorTagsContainer.style.display = 'none'
|
||||
editorTagsContainer.style.display = "none"
|
||||
return
|
||||
} else {
|
||||
editorTagsContainer.style.display = 'block'
|
||||
editorTagsContainer.style.display = "block"
|
||||
}
|
||||
|
||||
activeTags.forEach((tag, index) => {
|
||||
tag.element.querySelector('.modifier-card-image-overlay').innerText = '-'
|
||||
tag.element.classList.add('modifier-card-tiny')
|
||||
tag.element.querySelector(".modifier-card-image-overlay").innerText = "-"
|
||||
tag.element.classList.add("modifier-card-tiny")
|
||||
|
||||
editorModifierTagsList.appendChild(tag.element)
|
||||
|
||||
tag.element.addEventListener('click', () => {
|
||||
let idx = activeTags.findIndex(o => { return o.name === tag.name })
|
||||
tag.element.addEventListener("click", () => {
|
||||
let idx = activeTags.findIndex((o) => {
|
||||
return o.name === tag.name
|
||||
})
|
||||
|
||||
if (idx !== -1) {
|
||||
toggleCardState(activeTags[idx].name, false)
|
||||
@ -262,88 +279,91 @@ function refreshTagsList(inactiveTags) {
|
||||
activeTags.splice(idx, 1)
|
||||
refreshTagsList()
|
||||
}
|
||||
document.dispatchEvent(new Event('refreshImageModifiers'))
|
||||
document.dispatchEvent(new Event("refreshImageModifiers"))
|
||||
})
|
||||
})
|
||||
|
||||
let brk = document.createElement('br')
|
||||
brk.style.clear = 'both'
|
||||
let brk = document.createElement("br")
|
||||
brk.style.clear = "both"
|
||||
editorModifierTagsList.appendChild(brk)
|
||||
refreshInactiveTags(inactiveTags)
|
||||
document.dispatchEvent(new Event('refreshImageModifiers')) // notify plugins that the image tags have been refreshed
|
||||
document.dispatchEvent(new Event("refreshImageModifiers")) // notify plugins that the image tags have been refreshed
|
||||
}
|
||||
|
||||
function toggleCardState(modifierName, makeActive) {
|
||||
document.querySelector('#editor-modifiers').querySelectorAll('.modifier-card').forEach(card => {
|
||||
const name = card.querySelector('.modifier-card-label').innerText
|
||||
if ( trimModifiers(modifierName) == trimModifiers(name)
|
||||
|| trimModifiers(modifierName) == 'by ' + trimModifiers(name)) {
|
||||
if(makeActive) {
|
||||
card.classList.add(activeCardClass)
|
||||
card.querySelector('.modifier-card-image-overlay').innerText = '-'
|
||||
document
|
||||
.querySelector("#editor-modifiers")
|
||||
.querySelectorAll(".modifier-card")
|
||||
.forEach((card) => {
|
||||
const name = card.querySelector(".modifier-card-label").innerText
|
||||
if (
|
||||
trimModifiers(modifierName) == trimModifiers(name) ||
|
||||
trimModifiers(modifierName) == "by " + trimModifiers(name)
|
||||
) {
|
||||
if (makeActive) {
|
||||
card.classList.add(activeCardClass)
|
||||
card.querySelector(".modifier-card-image-overlay").innerText = "-"
|
||||
} else {
|
||||
card.classList.remove(activeCardClass)
|
||||
card.querySelector(".modifier-card-image-overlay").innerText = "+"
|
||||
}
|
||||
}
|
||||
else{
|
||||
card.classList.remove(activeCardClass)
|
||||
card.querySelector('.modifier-card-image-overlay').innerText = '+'
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function changePreviewImages(val) {
|
||||
const previewImages = document.querySelectorAll('.modifier-card-image-container img')
|
||||
const previewImages = document.querySelectorAll(".modifier-card-image-container img")
|
||||
|
||||
let previewArr = []
|
||||
|
||||
modifiers.map(x => x.modifiers).forEach(x => previewArr.push(...x.map(m => m.previews)))
|
||||
|
||||
previewArr = previewArr.map(x => {
|
||||
modifiers.map((x) => x.modifiers).forEach((x) => previewArr.push(...x.map((m) => m.previews)))
|
||||
|
||||
previewArr = previewArr.map((x) => {
|
||||
let obj = {}
|
||||
|
||||
x.forEach(preview => {
|
||||
x.forEach((preview) => {
|
||||
obj[preview.name] = preview.path
|
||||
})
|
||||
|
||||
|
||||
return obj
|
||||
})
|
||||
|
||||
previewImages.forEach(previewImage => {
|
||||
const currentPreviewType = previewImage.getAttribute('preview-type')
|
||||
const relativePreviewPath = previewImage.src.split(modifierThumbnailPath + '/').pop()
|
||||
previewImages.forEach((previewImage) => {
|
||||
const currentPreviewType = previewImage.getAttribute("preview-type")
|
||||
const relativePreviewPath = previewImage.src.split(modifierThumbnailPath + "/").pop()
|
||||
|
||||
const previews = previewArr.find(preview => relativePreviewPath == preview[currentPreviewType])
|
||||
const previews = previewArr.find((preview) => relativePreviewPath == preview[currentPreviewType])
|
||||
|
||||
if(typeof previews == 'object') {
|
||||
if (typeof previews == "object") {
|
||||
let preview = null
|
||||
|
||||
if (val == 'portrait') {
|
||||
if (val == "portrait") {
|
||||
preview = previews.portrait
|
||||
}
|
||||
else if (val == 'landscape') {
|
||||
} else if (val == "landscape") {
|
||||
preview = previews.landscape
|
||||
}
|
||||
|
||||
if(preview != null) {
|
||||
if (preview != null) {
|
||||
previewImage.src = `${modifierThumbnailPath}/${preview}`
|
||||
previewImage.setAttribute('preview-type', val)
|
||||
previewImage.setAttribute("preview-type", val)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function resizeModifierCards(val) {
|
||||
const cardSizePrefix = 'modifier-card-size_'
|
||||
const modifierCardClass = 'modifier-card'
|
||||
const cardSizePrefix = "modifier-card-size_"
|
||||
const modifierCardClass = "modifier-card"
|
||||
|
||||
const modifierCards = document.querySelectorAll(`.${modifierCardClass}`)
|
||||
const cardSize = n => `${cardSizePrefix}${n}`
|
||||
const cardSize = (n) => `${cardSizePrefix}${n}`
|
||||
|
||||
modifierCards.forEach(card => {
|
||||
modifierCards.forEach((card) => {
|
||||
// remove existing size classes
|
||||
const classes = card.className.split(' ').filter(c => !c.startsWith(cardSizePrefix))
|
||||
card.className = classes.join(' ').trim()
|
||||
const classes = card.className.split(" ").filter((c) => !c.startsWith(cardSizePrefix))
|
||||
card.className = classes.join(" ").trim()
|
||||
|
||||
if(val != 0) {
|
||||
if (val != 0) {
|
||||
card.classList.add(cardSize(val))
|
||||
}
|
||||
})
|
||||
@ -352,7 +372,7 @@ function resizeModifierCards(val) {
|
||||
modifierCardSizeSlider.onchange = () => resizeModifierCards(modifierCardSizeSlider.value)
|
||||
previewImageField.onchange = () => changePreviewImages(previewImageField.value)
|
||||
|
||||
modifierSettingsBtn.addEventListener('click', function(e) {
|
||||
modifierSettingsBtn.addEventListener("click", function(e) {
|
||||
modifierSettingsOverlay.classList.add("active")
|
||||
customModifiersTextBox.setSelectionRange(0, 0)
|
||||
customModifiersTextBox.focus()
|
||||
@ -360,7 +380,7 @@ modifierSettingsBtn.addEventListener('click', function(e) {
|
||||
e.stopPropagation()
|
||||
})
|
||||
|
||||
modifierSettingsOverlay.addEventListener('keydown', function(e) {
|
||||
modifierSettingsOverlay.addEventListener("keydown", function(e) {
|
||||
switch (e.key) {
|
||||
case "Escape": // Escape to cancel
|
||||
customModifiersTextBox.value = customModifiersInitialContent // undo the changes
|
||||
@ -368,7 +388,8 @@ modifierSettingsOverlay.addEventListener('keydown', function(e) {
|
||||
e.stopPropagation()
|
||||
break
|
||||
case "Enter":
|
||||
if (e.ctrlKey) { // Ctrl+Enter to confirm
|
||||
if (e.ctrlKey) {
|
||||
// Ctrl+Enter to confirm
|
||||
modifierSettingsOverlay.classList.remove("active")
|
||||
e.stopPropagation()
|
||||
break
|
||||
@ -383,7 +404,7 @@ function saveCustomModifiers() {
|
||||
}
|
||||
|
||||
function loadCustomModifiers() {
|
||||
PLUGINS['MODIFIERS_LOAD'].forEach(fn=>fn.loader.call())
|
||||
PLUGINS["MODIFIERS_LOAD"].forEach((fn) => fn.loader.call())
|
||||
}
|
||||
|
||||
customModifiersTextBox.addEventListener('change', saveCustomModifiers)
|
||||
customModifiersTextBox.addEventListener("change", saveCustomModifiers)
|
||||
|
1154
ui/media/js/main.js
1154
ui/media/js/main.js
File diff suppressed because it is too large
Load Diff
@ -9,7 +9,7 @@ var ParameterType = {
|
||||
select_multiple: "select_multiple",
|
||||
slider: "slider",
|
||||
custom: "custom",
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* JSDoc style
|
||||
@ -24,7 +24,6 @@ var ParameterType = {
|
||||
* @property {boolean?} saveInAppConfig
|
||||
*/
|
||||
|
||||
|
||||
/** @type {Array.<Parameter>} */
|
||||
var PARAMETERS = [
|
||||
{
|
||||
@ -33,13 +32,14 @@ var PARAMETERS = [
|
||||
label: "Theme",
|
||||
default: "theme-default",
|
||||
note: "customize the look and feel of the ui",
|
||||
options: [ // Note: options expanded dynamically
|
||||
options: [
|
||||
// Note: options expanded dynamically
|
||||
{
|
||||
value: "theme-default",
|
||||
label: "Default"
|
||||
}
|
||||
label: "Default",
|
||||
},
|
||||
],
|
||||
icon: "fa-palette"
|
||||
icon: "fa-palette",
|
||||
},
|
||||
{
|
||||
id: "save_to_disk",
|
||||
@ -55,7 +55,7 @@ var PARAMETERS = [
|
||||
label: "Save Location",
|
||||
render: (parameter) => {
|
||||
return `<input id="${parameter.id}" name="${parameter.id}" size="30" disabled>`
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "metadata_output_format",
|
||||
@ -66,19 +66,19 @@ var PARAMETERS = [
|
||||
options: [
|
||||
{
|
||||
value: "none",
|
||||
label: "none"
|
||||
label: "none",
|
||||
},
|
||||
{
|
||||
value: "txt",
|
||||
label: "txt"
|
||||
label: "txt",
|
||||
},
|
||||
{
|
||||
value: "json",
|
||||
label: "json"
|
||||
label: "json",
|
||||
},
|
||||
{
|
||||
value: "embed",
|
||||
label: "embed"
|
||||
label: "embed",
|
||||
},
|
||||
{
|
||||
value: "embed,txt",
|
||||
@ -127,16 +127,17 @@ var PARAMETERS = [
|
||||
id: "vram_usage_level",
|
||||
type: ParameterType.select,
|
||||
label: "GPU Memory Usage",
|
||||
note: "Faster performance requires more GPU memory (VRAM)<br/><br/>" +
|
||||
"<b>Balanced:</b> nearly as fast as High, much lower VRAM usage<br/>" +
|
||||
"<b>High:</b> fastest, maximum GPU memory usage</br>" +
|
||||
"<b>Low:</b> slowest, recommended for GPUs with 3 to 4 GB memory",
|
||||
note:
|
||||
"Faster performance requires more GPU memory (VRAM)<br/><br/>" +
|
||||
"<b>Balanced:</b> nearly as fast as High, much lower VRAM usage<br/>" +
|
||||
"<b>High:</b> fastest, maximum GPU memory usage</br>" +
|
||||
"<b>Low:</b> slowest, recommended for GPUs with 3 to 4 GB memory",
|
||||
icon: "fa-forward",
|
||||
default: "balanced",
|
||||
options: [
|
||||
{value: "balanced", label: "Balanced"},
|
||||
{value: "high", label: "High"},
|
||||
{value: "low", label: "Low"}
|
||||
{ value: "balanced", label: "Balanced" },
|
||||
{ value: "high", label: "High" },
|
||||
{ value: "low", label: "Low" },
|
||||
],
|
||||
},
|
||||
{
|
||||
@ -172,14 +173,15 @@ var PARAMETERS = [
|
||||
id: "confirm_dangerous_actions",
|
||||
type: ParameterType.checkbox,
|
||||
label: "Confirm dangerous actions",
|
||||
note: "Actions that might lead to data loss must either be clicked with the shift key pressed, or confirmed in an 'Are you sure?' dialog",
|
||||
note:
|
||||
"Actions that might lead to data loss must either be clicked with the shift key pressed, or confirmed in an 'Are you sure?' dialog",
|
||||
icon: "fa-check-double",
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
id: "listen_to_network",
|
||||
type: ParameterType.checkbox,
|
||||
label: "Make Stable Diffusion available on your network",
|
||||
label: "Make Stable Diffusion available on your network. Please restart the program after changing this.",
|
||||
note: "Other devices on your network can access this web page",
|
||||
icon: "fa-network-wired",
|
||||
default: true,
|
||||
@ -189,7 +191,7 @@ var PARAMETERS = [
|
||||
id: "listen_port",
|
||||
type: ParameterType.custom,
|
||||
label: "Network port",
|
||||
note: "Port that this server listens to. The '9000' part in 'http://localhost:9000'",
|
||||
note: "Port that this server listens to. The '9000' part in 'http://localhost:9000'. Please restart the program after changing this.",
|
||||
icon: "fa-anchor",
|
||||
render: (parameter) => {
|
||||
return `<input id="${parameter.id}" name="${parameter.id}" size="6" value="9000" onkeypress="preventNonNumericalInput(event)">`
|
||||
@ -200,7 +202,8 @@ var PARAMETERS = [
|
||||
id: "use_beta_channel",
|
||||
type: ParameterType.checkbox,
|
||||
label: "Beta channel",
|
||||
note: "Get the latest features immediately (but could be less stable). Please restart the program after changing this.",
|
||||
note:
|
||||
"Get the latest features immediately (but could be less stable). Please restart the program after changing this.",
|
||||
icon: "fa-fire",
|
||||
default: false,
|
||||
},
|
||||
@ -208,15 +211,16 @@ var PARAMETERS = [
|
||||
id: "test_diffusers",
|
||||
type: ParameterType.checkbox,
|
||||
label: "Test Diffusers",
|
||||
note: "<b>Experimental! Can have bugs!</b> Use upcoming features (like LoRA) in our new engine. Please press Save, then restart the program after changing this.",
|
||||
note:
|
||||
"<b>Experimental! Can have bugs!</b> Use upcoming features (like LoRA) in our new engine. Please press Save, then restart the program after changing this.",
|
||||
icon: "fa-bolt",
|
||||
default: false,
|
||||
saveInAppConfig: true,
|
||||
},
|
||||
];
|
||||
]
|
||||
|
||||
function getParameterSettingsEntry(id) {
|
||||
let parameter = PARAMETERS.filter(p => p.id === id)
|
||||
let parameter = PARAMETERS.filter((p) => p.id === id)
|
||||
if (parameter.length === 0) {
|
||||
return
|
||||
}
|
||||
@ -224,37 +228,39 @@ function getParameterSettingsEntry(id) {
|
||||
}
|
||||
|
||||
function sliderUpdate(event) {
|
||||
if (event.srcElement.id.endsWith('-input')) {
|
||||
let slider = document.getElementById(event.srcElement.id.slice(0,-6))
|
||||
if (event.srcElement.id.endsWith("-input")) {
|
||||
let slider = document.getElementById(event.srcElement.id.slice(0, -6))
|
||||
slider.value = event.srcElement.value
|
||||
slider.dispatchEvent(new Event("change"))
|
||||
} else {
|
||||
let field = document.getElementById(event.srcElement.id+'-input')
|
||||
let field = document.getElementById(event.srcElement.id + "-input")
|
||||
field.value = event.srcElement.value
|
||||
field.dispatchEvent(new Event("change"))
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Parameter} parameter
|
||||
* @param {Parameter} parameter
|
||||
* @returns {string | HTMLElement}
|
||||
*/
|
||||
function getParameterElement(parameter) {
|
||||
switch (parameter.type) {
|
||||
case ParameterType.checkbox:
|
||||
var is_checked = parameter.default ? " checked" : "";
|
||||
var is_checked = parameter.default ? " checked" : ""
|
||||
return `<input id="${parameter.id}" name="${parameter.id}"${is_checked} type="checkbox">`
|
||||
case ParameterType.select:
|
||||
case ParameterType.select_multiple:
|
||||
var options = (parameter.options || []).map(option => `<option value="${option.value}">${option.label}</option>`).join("")
|
||||
var multiple = (parameter.type == ParameterType.select_multiple ? 'multiple' : '')
|
||||
var options = (parameter.options || [])
|
||||
.map((option) => `<option value="${option.value}">${option.label}</option>`)
|
||||
.join("")
|
||||
var multiple = parameter.type == ParameterType.select_multiple ? "multiple" : ""
|
||||
return `<select id="${parameter.id}" name="${parameter.id}" ${multiple}>${options}</select>`
|
||||
case ParameterType.slider:
|
||||
return `<input id="${parameter.id}" name="${parameter.id}" class="editor-slider" type="range" value="${parameter.default}" min="${parameter.slider_min}" max="${parameter.slider_max}" oninput="sliderUpdate(event)"> <input id="${parameter.id}-input" name="${parameter.id}-input" size="4" value="${parameter.default}" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)" oninput="sliderUpdate(event)"> ${parameter.slider_unit}`
|
||||
case ParameterType.custom:
|
||||
return parameter.render(parameter)
|
||||
default:
|
||||
console.error(`Invalid type ${parameter.type} for parameter ${parameter.id}`);
|
||||
console.error(`Invalid type ${parameter.type} for parameter ${parameter.id}`)
|
||||
return "ERROR: Invalid Type"
|
||||
}
|
||||
}
|
||||
@ -265,31 +271,31 @@ let parametersTable = document.querySelector("#system-settings .parameters-table
|
||||
* @param {Array<Parameter> | undefined} parameters
|
||||
* */
|
||||
function initParameters(parameters) {
|
||||
parameters.forEach(parameter => {
|
||||
parameters.forEach((parameter) => {
|
||||
const element = getParameterElement(parameter)
|
||||
const elementWrapper = createElement('div')
|
||||
const elementWrapper = createElement("div")
|
||||
if (element instanceof Node) {
|
||||
elementWrapper.appendChild(element)
|
||||
} else {
|
||||
elementWrapper.innerHTML = element
|
||||
}
|
||||
|
||||
const note = typeof parameter.note === 'function' ? parameter.note(parameter) : parameter.note
|
||||
const note = typeof parameter.note === "function" ? parameter.note(parameter) : parameter.note
|
||||
const noteElements = []
|
||||
if (note) {
|
||||
const noteElement = createElement('small')
|
||||
const noteElement = createElement("small")
|
||||
if (note instanceof Node) {
|
||||
noteElement.appendChild(note)
|
||||
} else {
|
||||
noteElement.innerHTML = note || ''
|
||||
noteElement.innerHTML = note || ""
|
||||
}
|
||||
noteElements.push(noteElement)
|
||||
}
|
||||
|
||||
const icon = parameter.icon ? [createElement('i', undefined, ['fa', parameter.icon])] : []
|
||||
const icon = parameter.icon ? [createElement("i", undefined, ["fa", parameter.icon])] : []
|
||||
|
||||
const label = typeof parameter.label === 'function' ? parameter.label(parameter) : parameter.label
|
||||
const labelElement = createElement('label', { for: parameter.id })
|
||||
const label = typeof parameter.label === "function" ? parameter.label(parameter) : parameter.label
|
||||
const labelElement = createElement("label", { for: parameter.id })
|
||||
if (label instanceof Node) {
|
||||
labelElement.appendChild(label)
|
||||
} else {
|
||||
@ -297,12 +303,12 @@ function initParameters(parameters) {
|
||||
}
|
||||
|
||||
const newrow = createElement(
|
||||
'div',
|
||||
{ 'data-setting-id': parameter.id, 'data-save-in-app-config': parameter.saveInAppConfig },
|
||||
"div",
|
||||
{ "data-setting-id": parameter.id, "data-save-in-app-config": parameter.saveInAppConfig },
|
||||
undefined,
|
||||
[
|
||||
createElement('div', undefined, undefined, icon),
|
||||
createElement('div', undefined, undefined, [labelElement, ...noteElements]),
|
||||
createElement("div", undefined, undefined, icon),
|
||||
createElement("div", undefined, undefined, [labelElement, ...noteElements]),
|
||||
elementWrapper,
|
||||
]
|
||||
)
|
||||
@ -314,22 +320,25 @@ function initParameters(parameters) {
|
||||
initParameters(PARAMETERS)
|
||||
|
||||
// listen to parameters from plugins
|
||||
PARAMETERS.addEventListener('push', (...items) => {
|
||||
PARAMETERS.addEventListener("push", (...items) => {
|
||||
initParameters(items)
|
||||
|
||||
if (items.find(item => item.saveInAppConfig)) {
|
||||
console.log('Reloading app config for new parameters', items.map(p => p.id))
|
||||
|
||||
if (items.find((item) => item.saveInAppConfig)) {
|
||||
console.log(
|
||||
"Reloading app config for new parameters",
|
||||
items.map((p) => p.id)
|
||||
)
|
||||
getAppConfig()
|
||||
}
|
||||
})
|
||||
|
||||
let vramUsageLevelField = document.querySelector('#vram_usage_level')
|
||||
let useCPUField = document.querySelector('#use_cpu')
|
||||
let autoPickGPUsField = document.querySelector('#auto_pick_gpus')
|
||||
let useGPUsField = document.querySelector('#use_gpus')
|
||||
let saveToDiskField = document.querySelector('#save_to_disk')
|
||||
let diskPathField = document.querySelector('#diskPath')
|
||||
let metadataOutputFormatField = document.querySelector('#metadata_output_format')
|
||||
let vramUsageLevelField = document.querySelector("#vram_usage_level")
|
||||
let useCPUField = document.querySelector("#use_cpu")
|
||||
let autoPickGPUsField = document.querySelector("#auto_pick_gpus")
|
||||
let useGPUsField = document.querySelector("#use_gpus")
|
||||
let saveToDiskField = document.querySelector("#save_to_disk")
|
||||
let diskPathField = document.querySelector("#diskPath")
|
||||
let metadataOutputFormatField = document.querySelector("#metadata_output_format")
|
||||
let listenToNetworkField = document.querySelector("#listen_to_network")
|
||||
let listenPortField = document.querySelector("#listen_port")
|
||||
let useBetaChannelField = document.querySelector("#use_beta_channel")
|
||||
@ -337,35 +346,34 @@ let uiOpenBrowserOnStartField = document.querySelector("#ui_open_browser_on_star
|
||||
let confirmDangerousActionsField = document.querySelector("#confirm_dangerous_actions")
|
||||
let testDiffusers = document.querySelector("#test_diffusers")
|
||||
|
||||
let saveSettingsBtn = document.querySelector('#save-system-settings-btn')
|
||||
|
||||
let saveSettingsBtn = document.querySelector("#save-system-settings-btn")
|
||||
|
||||
async function changeAppConfig(configDelta) {
|
||||
try {
|
||||
let res = await fetch('/app_config', {
|
||||
method: 'POST',
|
||||
let res = await fetch("/app_config", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(configDelta)
|
||||
body: JSON.stringify(configDelta),
|
||||
})
|
||||
res = await res.json()
|
||||
|
||||
console.log('set config status response', res)
|
||||
console.log("set config status response", res)
|
||||
} catch (e) {
|
||||
console.log('set config status error', e)
|
||||
console.log("set config status error", e)
|
||||
}
|
||||
}
|
||||
|
||||
async function getAppConfig() {
|
||||
try {
|
||||
let res = await fetch('/get/app_config')
|
||||
let res = await fetch("/get/app_config")
|
||||
const config = await res.json()
|
||||
|
||||
applySettingsFromConfig(config)
|
||||
|
||||
// custom overrides
|
||||
if (config.update_branch === 'beta') {
|
||||
if (config.update_branch === "beta") {
|
||||
useBetaChannelField.checked = true
|
||||
document.querySelector("#updateBranchLabel").innerText = "(beta)"
|
||||
} else {
|
||||
@ -380,45 +388,48 @@ async function getAppConfig() {
|
||||
if (config.net && config.net.listen_port !== undefined) {
|
||||
listenPortField.value = config.net.listen_port
|
||||
}
|
||||
if (config.test_diffusers === undefined || config.update_branch === 'main') {
|
||||
if (config.test_diffusers === undefined || config.update_branch === "main") {
|
||||
testDiffusers.checked = false
|
||||
document.querySelector("#lora_model_container").style.display = 'none'
|
||||
document.querySelector("#lora_alpha_container").style.display = 'none'
|
||||
document.querySelector("#lora_model_container").style.display = "none"
|
||||
document.querySelector("#lora_alpha_container").style.display = "none"
|
||||
} else {
|
||||
testDiffusers.checked = config.test_diffusers && config.update_branch !== 'main'
|
||||
document.querySelector("#lora_model_container").style.display = (testDiffusers.checked ? '' : 'none')
|
||||
document.querySelector("#lora_alpha_container").style.display = (testDiffusers.checked && loraModelField.value !== "" ? '' : 'none')
|
||||
testDiffusers.checked = config.test_diffusers && config.update_branch !== "main"
|
||||
document.querySelector("#lora_model_container").style.display = testDiffusers.checked ? "" : "none"
|
||||
document.querySelector("#lora_alpha_container").style.display =
|
||||
testDiffusers.checked && loraModelField.value !== "" ? "" : "none"
|
||||
}
|
||||
|
||||
console.log('get config status response', config)
|
||||
console.log("get config status response", config)
|
||||
|
||||
return config
|
||||
} catch (e) {
|
||||
console.log('get config status error', e)
|
||||
console.log("get config status error", e)
|
||||
|
||||
return {}
|
||||
}
|
||||
}
|
||||
|
||||
function applySettingsFromConfig(config) {
|
||||
Array.from(parametersTable.children).forEach(parameterRow => {
|
||||
if (parameterRow.dataset.settingId in config && parameterRow.dataset.saveInAppConfig === 'true') {
|
||||
Array.from(parametersTable.children).forEach((parameterRow) => {
|
||||
if (parameterRow.dataset.settingId in config && parameterRow.dataset.saveInAppConfig === "true") {
|
||||
const configValue = config[parameterRow.dataset.settingId]
|
||||
const parameterElement = document.getElementById(parameterRow.dataset.settingId) ||
|
||||
parameterRow.querySelector('input') || parameterRow.querySelector('select')
|
||||
const parameterElement =
|
||||
document.getElementById(parameterRow.dataset.settingId) ||
|
||||
parameterRow.querySelector("input") ||
|
||||
parameterRow.querySelector("select")
|
||||
|
||||
switch (parameterElement?.tagName) {
|
||||
case 'INPUT':
|
||||
if (parameterElement.type === 'checkbox') {
|
||||
case "INPUT":
|
||||
if (parameterElement.type === "checkbox") {
|
||||
parameterElement.checked = configValue
|
||||
} else {
|
||||
parameterElement.value = configValue
|
||||
}
|
||||
parameterElement.dispatchEvent(new Event('change'))
|
||||
parameterElement.dispatchEvent(new Event("change"))
|
||||
break
|
||||
case 'SELECT':
|
||||
case "SELECT":
|
||||
if (Array.isArray(configValue)) {
|
||||
Array.from(parameterElement.options).forEach(option => {
|
||||
Array.from(parameterElement.options).forEach((option) => {
|
||||
if (configValue.includes(option.value || option.text)) {
|
||||
option.selected = true
|
||||
}
|
||||
@ -426,82 +437,85 @@ function applySettingsFromConfig(config) {
|
||||
} else {
|
||||
parameterElement.value = configValue
|
||||
}
|
||||
parameterElement.dispatchEvent(new Event('change'))
|
||||
parameterElement.dispatchEvent(new Event("change"))
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
saveToDiskField.addEventListener('change', function(e) {
|
||||
saveToDiskField.addEventListener("change", function(e) {
|
||||
diskPathField.disabled = !this.checked
|
||||
metadataOutputFormatField.disabled = !this.checked
|
||||
})
|
||||
|
||||
function getCurrentRenderDeviceSelection() {
|
||||
let selectedGPUs = $('#use_gpus').val()
|
||||
let selectedGPUs = $("#use_gpus").val()
|
||||
|
||||
if (useCPUField.checked && !autoPickGPUsField.checked) {
|
||||
return 'cpu'
|
||||
return "cpu"
|
||||
}
|
||||
if (autoPickGPUsField.checked || selectedGPUs.length == 0) {
|
||||
return 'auto'
|
||||
return "auto"
|
||||
}
|
||||
|
||||
return selectedGPUs.join(',')
|
||||
return selectedGPUs.join(",")
|
||||
}
|
||||
|
||||
useCPUField.addEventListener('click', function() {
|
||||
let gpuSettingEntry = getParameterSettingsEntry('use_gpus')
|
||||
let autoPickGPUSettingEntry = getParameterSettingsEntry('auto_pick_gpus')
|
||||
useCPUField.addEventListener("click", function() {
|
||||
let gpuSettingEntry = getParameterSettingsEntry("use_gpus")
|
||||
let autoPickGPUSettingEntry = getParameterSettingsEntry("auto_pick_gpus")
|
||||
if (this.checked) {
|
||||
gpuSettingEntry.style.display = 'none'
|
||||
autoPickGPUSettingEntry.style.display = 'none'
|
||||
autoPickGPUsField.setAttribute('data-old-value', autoPickGPUsField.checked)
|
||||
gpuSettingEntry.style.display = "none"
|
||||
autoPickGPUSettingEntry.style.display = "none"
|
||||
autoPickGPUsField.setAttribute("data-old-value", autoPickGPUsField.checked)
|
||||
autoPickGPUsField.checked = false
|
||||
} else if (useGPUsField.options.length >= MIN_GPUS_TO_SHOW_SELECTION) {
|
||||
gpuSettingEntry.style.display = ''
|
||||
autoPickGPUSettingEntry.style.display = ''
|
||||
let oldVal = autoPickGPUsField.getAttribute('data-old-value')
|
||||
if (oldVal === null || oldVal === undefined) { // the UI started with CPU selected by default
|
||||
gpuSettingEntry.style.display = ""
|
||||
autoPickGPUSettingEntry.style.display = ""
|
||||
let oldVal = autoPickGPUsField.getAttribute("data-old-value")
|
||||
if (oldVal === null || oldVal === undefined) {
|
||||
// the UI started with CPU selected by default
|
||||
autoPickGPUsField.checked = true
|
||||
} else {
|
||||
autoPickGPUsField.checked = (oldVal === 'true')
|
||||
autoPickGPUsField.checked = oldVal === "true"
|
||||
}
|
||||
gpuSettingEntry.style.display = (autoPickGPUsField.checked ? 'none' : '')
|
||||
gpuSettingEntry.style.display = autoPickGPUsField.checked ? "none" : ""
|
||||
}
|
||||
})
|
||||
|
||||
useGPUsField.addEventListener('click', function() {
|
||||
let selectedGPUs = $('#use_gpus').val()
|
||||
autoPickGPUsField.checked = (selectedGPUs.length === 0)
|
||||
useGPUsField.addEventListener("click", function() {
|
||||
let selectedGPUs = $("#use_gpus").val()
|
||||
autoPickGPUsField.checked = selectedGPUs.length === 0
|
||||
})
|
||||
|
||||
autoPickGPUsField.addEventListener('click', function() {
|
||||
autoPickGPUsField.addEventListener("click", function() {
|
||||
if (this.checked) {
|
||||
$('#use_gpus').val([])
|
||||
$("#use_gpus").val([])
|
||||
}
|
||||
|
||||
let gpuSettingEntry = getParameterSettingsEntry('use_gpus')
|
||||
gpuSettingEntry.style.display = (this.checked ? 'none' : '')
|
||||
let gpuSettingEntry = getParameterSettingsEntry("use_gpus")
|
||||
gpuSettingEntry.style.display = this.checked ? "none" : ""
|
||||
})
|
||||
|
||||
async function setDiskPath(defaultDiskPath, force=false) {
|
||||
async function setDiskPath(defaultDiskPath, force = false) {
|
||||
var diskPath = getSetting("diskPath")
|
||||
if (force || diskPath == '' || diskPath == undefined || diskPath == "undefined") {
|
||||
if (force || diskPath == "" || diskPath == undefined || diskPath == "undefined") {
|
||||
setSetting("diskPath", defaultDiskPath)
|
||||
}
|
||||
}
|
||||
|
||||
function setDeviceInfo(devices) {
|
||||
let cpu = devices.all.cpu.name
|
||||
let allGPUs = Object.keys(devices.all).filter(d => d != 'cpu')
|
||||
let allGPUs = Object.keys(devices.all).filter((d) => d != "cpu")
|
||||
let activeGPUs = Object.keys(devices.active)
|
||||
|
||||
function ID_TO_TEXT(d) {
|
||||
let info = devices.all[d]
|
||||
if ("mem_free" in info && "mem_total" in info) {
|
||||
return `${info.name} <small>(${d}) (${info.mem_free.toFixed(1)}Gb free / ${info.mem_total.toFixed(1)} Gb total)</small>`
|
||||
return `${info.name} <small>(${d}) (${info.mem_free.toFixed(1)}Gb free / ${info.mem_total.toFixed(
|
||||
1
|
||||
)} Gb total)</small>`
|
||||
} else {
|
||||
return `${info.name} <small>(${d}) (no memory info)</small>`
|
||||
}
|
||||
@ -510,35 +524,35 @@ function setDeviceInfo(devices) {
|
||||
allGPUs = allGPUs.map(ID_TO_TEXT)
|
||||
activeGPUs = activeGPUs.map(ID_TO_TEXT)
|
||||
|
||||
let systemInfoEl = document.querySelector('#system-info')
|
||||
systemInfoEl.querySelector('#system-info-cpu').innerText = cpu
|
||||
systemInfoEl.querySelector('#system-info-gpus-all').innerHTML = allGPUs.join('</br>')
|
||||
systemInfoEl.querySelector('#system-info-rendering-devices').innerHTML = activeGPUs.join('</br>')
|
||||
let systemInfoEl = document.querySelector("#system-info")
|
||||
systemInfoEl.querySelector("#system-info-cpu").innerText = cpu
|
||||
systemInfoEl.querySelector("#system-info-gpus-all").innerHTML = allGPUs.join("</br>")
|
||||
systemInfoEl.querySelector("#system-info-rendering-devices").innerHTML = activeGPUs.join("</br>")
|
||||
}
|
||||
|
||||
function setHostInfo(hosts) {
|
||||
let port = listenPortField.value
|
||||
hosts = hosts.map(addr => `http://${addr}:${port}/`).map(url => `<div><a href="${url}">${url}</a></div>`)
|
||||
document.querySelector('#system-info-server-hosts').innerHTML = hosts.join('')
|
||||
hosts = hosts.map((addr) => `http://${addr}:${port}/`).map((url) => `<div><a href="${url}">${url}</a></div>`)
|
||||
document.querySelector("#system-info-server-hosts").innerHTML = hosts.join("")
|
||||
}
|
||||
|
||||
async function getSystemInfo() {
|
||||
try {
|
||||
const res = await SD.getSystemInfo()
|
||||
let devices = res['devices']
|
||||
let devices = res["devices"]
|
||||
|
||||
let allDeviceIds = Object.keys(devices['all']).filter(d => d !== 'cpu')
|
||||
let activeDeviceIds = Object.keys(devices['active']).filter(d => d !== 'cpu')
|
||||
let allDeviceIds = Object.keys(devices["all"]).filter((d) => d !== "cpu")
|
||||
let activeDeviceIds = Object.keys(devices["active"]).filter((d) => d !== "cpu")
|
||||
|
||||
if (activeDeviceIds.length === 0) {
|
||||
useCPUField.checked = true
|
||||
}
|
||||
|
||||
if (allDeviceIds.length < MIN_GPUS_TO_SHOW_SELECTION || useCPUField.checked) {
|
||||
let gpuSettingEntry = getParameterSettingsEntry('use_gpus')
|
||||
gpuSettingEntry.style.display = 'none'
|
||||
let autoPickGPUSettingEntry = getParameterSettingsEntry('auto_pick_gpus')
|
||||
autoPickGPUSettingEntry.style.display = 'none'
|
||||
let gpuSettingEntry = getParameterSettingsEntry("use_gpus")
|
||||
gpuSettingEntry.style.display = "none"
|
||||
let autoPickGPUSettingEntry = getParameterSettingsEntry("auto_pick_gpus")
|
||||
autoPickGPUSettingEntry.style.display = "none"
|
||||
}
|
||||
|
||||
if (allDeviceIds.length === 0) {
|
||||
@ -546,86 +560,90 @@ async function getSystemInfo() {
|
||||
useCPUField.disabled = true // no compatible GPUs, so make the CPU mandatory
|
||||
}
|
||||
|
||||
autoPickGPUsField.checked = (devices['config'] === 'auto')
|
||||
autoPickGPUsField.checked = devices["config"] === "auto"
|
||||
|
||||
useGPUsField.innerHTML = ''
|
||||
allDeviceIds.forEach(device => {
|
||||
let deviceName = devices['all'][device]['name']
|
||||
useGPUsField.innerHTML = ""
|
||||
allDeviceIds.forEach((device) => {
|
||||
let deviceName = devices["all"][device]["name"]
|
||||
let deviceOption = `<option value="${device}">${deviceName} (${device})</option>`
|
||||
useGPUsField.insertAdjacentHTML('beforeend', deviceOption)
|
||||
useGPUsField.insertAdjacentHTML("beforeend", deviceOption)
|
||||
})
|
||||
|
||||
if (autoPickGPUsField.checked) {
|
||||
let gpuSettingEntry = getParameterSettingsEntry('use_gpus')
|
||||
gpuSettingEntry.style.display = 'none'
|
||||
let gpuSettingEntry = getParameterSettingsEntry("use_gpus")
|
||||
gpuSettingEntry.style.display = "none"
|
||||
} else {
|
||||
$('#use_gpus').val(activeDeviceIds)
|
||||
$("#use_gpus").val(activeDeviceIds)
|
||||
}
|
||||
|
||||
setDeviceInfo(devices)
|
||||
setHostInfo(res['hosts'])
|
||||
setHostInfo(res["hosts"])
|
||||
let force = false
|
||||
if (res['enforce_output_dir'] !== undefined) {
|
||||
force = res['enforce_output_dir']
|
||||
if (res["enforce_output_dir"] !== undefined) {
|
||||
force = res["enforce_output_dir"]
|
||||
if (force == true) {
|
||||
saveToDiskField.checked = true
|
||||
metadataOutputFormatField.disabled = false
|
||||
saveToDiskField.checked = true
|
||||
metadataOutputFormatField.disabled = false
|
||||
}
|
||||
saveToDiskField.disabled = force
|
||||
diskPathField.disabled = force
|
||||
}
|
||||
setDiskPath(res['default_output_dir'], force)
|
||||
setDiskPath(res["default_output_dir"], force)
|
||||
} catch (e) {
|
||||
console.log('error fetching devices', e)
|
||||
console.log("error fetching devices", e)
|
||||
}
|
||||
}
|
||||
|
||||
saveSettingsBtn.addEventListener('click', function() {
|
||||
if (listenPortField.value == '') {
|
||||
alert('The network port field must not be empty.')
|
||||
saveSettingsBtn.addEventListener("click", function() {
|
||||
if (listenPortField.value == "") {
|
||||
alert("The network port field must not be empty.")
|
||||
return
|
||||
}
|
||||
if (listenPortField.value < 1 || listenPortField.value > 65535) {
|
||||
alert('The network port must be a number from 1 to 65535')
|
||||
alert("The network port must be a number from 1 to 65535")
|
||||
return
|
||||
}
|
||||
const updateBranch = (useBetaChannelField.checked ? 'beta' : 'main')
|
||||
const updateBranch = useBetaChannelField.checked ? "beta" : "main"
|
||||
|
||||
const updateAppConfigRequest = {
|
||||
'render_devices': getCurrentRenderDeviceSelection(),
|
||||
'update_branch': updateBranch,
|
||||
render_devices: getCurrentRenderDeviceSelection(),
|
||||
update_branch: updateBranch,
|
||||
}
|
||||
|
||||
Array.from(parametersTable.children).forEach(parameterRow => {
|
||||
if (parameterRow.dataset.saveInAppConfig === 'true') {
|
||||
const parameterElement = document.getElementById(parameterRow.dataset.settingId) ||
|
||||
parameterRow.querySelector('input') || parameterRow.querySelector('select')
|
||||
Array.from(parametersTable.children).forEach((parameterRow) => {
|
||||
if (parameterRow.dataset.saveInAppConfig === "true") {
|
||||
const parameterElement =
|
||||
document.getElementById(parameterRow.dataset.settingId) ||
|
||||
parameterRow.querySelector("input") ||
|
||||
parameterRow.querySelector("select")
|
||||
|
||||
switch (parameterElement?.tagName) {
|
||||
case 'INPUT':
|
||||
if (parameterElement.type === 'checkbox') {
|
||||
case "INPUT":
|
||||
if (parameterElement.type === "checkbox") {
|
||||
updateAppConfigRequest[parameterRow.dataset.settingId] = parameterElement.checked
|
||||
} else {
|
||||
updateAppConfigRequest[parameterRow.dataset.settingId] = parameterElement.value
|
||||
}
|
||||
break
|
||||
case 'SELECT':
|
||||
case "SELECT":
|
||||
if (parameterElement.multiple) {
|
||||
updateAppConfigRequest[parameterRow.dataset.settingId] = Array.from(parameterElement.options)
|
||||
.filter(option => option.selected)
|
||||
.map(option => option.value || option.text)
|
||||
.filter((option) => option.selected)
|
||||
.map((option) => option.value || option.text)
|
||||
} else {
|
||||
updateAppConfigRequest[parameterRow.dataset.settingId] = parameterElement.value
|
||||
}
|
||||
break
|
||||
default:
|
||||
console.error(`Setting parameter ${parameterRow.dataset.settingId} couldn't be saved to app.config - element #${parameter.id} is a <${parameterElement?.tagName} /> instead of a <input /> or a <select />!`)
|
||||
console.error(
|
||||
`Setting parameter ${parameterRow.dataset.settingId} couldn't be saved to app.config - element #${parameter.id} is a <${parameterElement?.tagName} /> instead of a <input /> or a <select />!`
|
||||
)
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const savePromise = changeAppConfig(updateAppConfigRequest)
|
||||
saveSettingsBtn.classList.add('active')
|
||||
Promise.all([savePromise, asyncDelay(300)]).then(() => saveSettingsBtn.classList.remove('active'))
|
||||
saveSettingsBtn.classList.add("active")
|
||||
Promise.all([savePromise, asyncDelay(300)]).then(() => saveSettingsBtn.classList.remove("active"))
|
||||
})
|
||||
|
@ -3,7 +3,7 @@ const PLUGIN_API_VERSION = "1.0"
|
||||
const PLUGINS = {
|
||||
/**
|
||||
* Register new buttons to show on each output image.
|
||||
*
|
||||
*
|
||||
* Example:
|
||||
* PLUGINS['IMAGE_INFO_BUTTONS'].push({
|
||||
* text: 'Make a Similar Image',
|
||||
@ -29,14 +29,20 @@ const PLUGINS = {
|
||||
MODIFIERS_LOAD: [],
|
||||
TASK_CREATE: [],
|
||||
OUTPUTS_FORMATS: new ServiceContainer(
|
||||
function png() { return (reqBody) => new SD.RenderTask(reqBody) }
|
||||
, function jpeg() { return (reqBody) => new SD.RenderTask(reqBody) }
|
||||
, function webp() { return (reqBody) => new SD.RenderTask(reqBody) }
|
||||
function png() {
|
||||
return (reqBody) => new SD.RenderTask(reqBody)
|
||||
},
|
||||
function jpeg() {
|
||||
return (reqBody) => new SD.RenderTask(reqBody)
|
||||
},
|
||||
function webp() {
|
||||
return (reqBody) => new SD.RenderTask(reqBody)
|
||||
}
|
||||
),
|
||||
}
|
||||
PLUGINS.OUTPUTS_FORMATS.register = function(...args) {
|
||||
const service = ServiceContainer.prototype.register.apply(this, args)
|
||||
if (typeof outputFormatField !== 'undefined') {
|
||||
if (typeof outputFormatField !== "undefined") {
|
||||
const newOption = document.createElement("option")
|
||||
newOption.setAttribute("value", service.name)
|
||||
newOption.innerText = service.name
|
||||
@ -46,13 +52,13 @@ PLUGINS.OUTPUTS_FORMATS.register = function(...args) {
|
||||
}
|
||||
|
||||
function loadScript(url) {
|
||||
const script = document.createElement('script')
|
||||
const script = document.createElement("script")
|
||||
const promiseSrc = new PromiseSource()
|
||||
script.addEventListener('error', () => promiseSrc.reject(new Error(`Script "${url}" couldn't be loaded.`)))
|
||||
script.addEventListener('load', () => promiseSrc.resolve(url))
|
||||
script.src = url + '?t=' + Date.now()
|
||||
script.addEventListener("error", () => promiseSrc.reject(new Error(`Script "${url}" couldn't be loaded.`)))
|
||||
script.addEventListener("load", () => promiseSrc.resolve(url))
|
||||
script.src = url + "?t=" + Date.now()
|
||||
|
||||
console.log('loading script', url)
|
||||
console.log("loading script", url)
|
||||
document.head.appendChild(script)
|
||||
|
||||
return promiseSrc.promise
|
||||
@ -60,7 +66,7 @@ function loadScript(url) {
|
||||
|
||||
async function loadUIPlugins() {
|
||||
try {
|
||||
const res = await fetch('/get/ui_plugins')
|
||||
const res = await fetch("/get/ui_plugins")
|
||||
if (!res.ok) {
|
||||
console.error(`Error HTTP${res.status} while loading plugins list. - ${res.statusText}`)
|
||||
return
|
||||
@ -69,6 +75,6 @@ async function loadUIPlugins() {
|
||||
const loadingPromises = plugins.map(loadScript)
|
||||
return await Promise.allSettled(loadingPromises)
|
||||
} catch (e) {
|
||||
console.log('error fetching plugin paths', e)
|
||||
console.log("error fetching plugin paths", e)
|
||||
}
|
||||
}
|
||||
|
@ -21,14 +21,13 @@ let hypernetworkModelField = new ModelDropdown(document.querySelector('#hypernet
|
||||
|
||||
3) Model dropdowns will be refreshed automatically when the reload models button is invoked.
|
||||
*/
|
||||
class ModelDropdown
|
||||
{
|
||||
class ModelDropdown {
|
||||
modelFilter //= document.querySelector("#model-filter")
|
||||
modelFilterArrow //= document.querySelector("#model-filter-arrow")
|
||||
modelList //= document.querySelector("#model-list")
|
||||
modelResult //= document.querySelector("#model-result")
|
||||
modelNoResult //= document.querySelector("#model-no-result")
|
||||
|
||||
|
||||
currentSelection //= { elem: undefined, value: '', path: ''}
|
||||
highlightedModelEntry //= undefined
|
||||
activeModel //= undefined
|
||||
@ -59,11 +58,11 @@ class ModelDropdown
|
||||
set disabled(state) {
|
||||
this.modelFilter.disabled = state
|
||||
if (this.modelFilterArrow) {
|
||||
this.modelFilterArrow.style.color = state ? 'dimgray' : ''
|
||||
this.modelFilterArrow.style.color = state ? "dimgray" : ""
|
||||
}
|
||||
}
|
||||
get modelElements() {
|
||||
return this.modelList.querySelectorAll('.model-file')
|
||||
return this.modelList.querySelectorAll(".model-file")
|
||||
}
|
||||
addEventListener(type, listener, options) {
|
||||
return this.modelFilter.addEventListener(type, listener, options)
|
||||
@ -82,21 +81,26 @@ class ModelDropdown
|
||||
}
|
||||
}
|
||||
|
||||
/* SEARCHABLE INPUT */
|
||||
constructor (input, modelKey, noneEntry = '') {
|
||||
/* SEARCHABLE INPUT */
|
||||
|
||||
constructor(input, modelKey, noneEntry = "") {
|
||||
this.modelFilter = input
|
||||
this.noneEntry = noneEntry
|
||||
this.modelKey = modelKey
|
||||
|
||||
if (modelsOptions !== undefined) { // reuse models from cache (only useful for plugins, which are loaded after models)
|
||||
if (modelsOptions !== undefined) {
|
||||
// reuse models from cache (only useful for plugins, which are loaded after models)
|
||||
this.inputModels = modelsOptions[this.modelKey]
|
||||
this.populateModels()
|
||||
}
|
||||
document.addEventListener("refreshModels", this.bind(function(e) {
|
||||
// reload the models
|
||||
this.inputModels = modelsOptions[this.modelKey]
|
||||
this.populateModels()
|
||||
}, this))
|
||||
document.addEventListener(
|
||||
"refreshModels",
|
||||
this.bind(function(e) {
|
||||
// reload the models
|
||||
this.inputModels = modelsOptions[this.modelKey]
|
||||
this.populateModels()
|
||||
}, this)
|
||||
)
|
||||
}
|
||||
|
||||
saveCurrentSelection(elem, value, path) {
|
||||
@ -105,13 +109,13 @@ class ModelDropdown
|
||||
this.currentSelection.path = path
|
||||
this.modelFilter.dataset.path = path
|
||||
this.modelFilter.value = value
|
||||
this.modelFilter.dispatchEvent(new Event('change'))
|
||||
this.modelFilter.dispatchEvent(new Event("change"))
|
||||
}
|
||||
|
||||
|
||||
processClick(e) {
|
||||
e.preventDefault()
|
||||
if (e.srcElement.classList.contains('model-file') || e.srcElement.classList.contains('fa-file')) {
|
||||
const elem = e.srcElement.classList.contains('model-file') ? e.srcElement : e.srcElement.parentElement
|
||||
if (e.srcElement.classList.contains("model-file") || e.srcElement.classList.contains("fa-file")) {
|
||||
const elem = e.srcElement.classList.contains("model-file") ? e.srcElement : e.srcElement.parentElement
|
||||
this.saveCurrentSelection(elem, elem.innerText, elem.dataset.path)
|
||||
this.hideModelList()
|
||||
this.modelFilter.focus()
|
||||
@ -126,66 +130,67 @@ class ModelDropdown
|
||||
return undefined
|
||||
}
|
||||
|
||||
return modelElements.slice(0, index).reverse().find(e => e.style.display === 'list-item')
|
||||
return modelElements
|
||||
.slice(0, index)
|
||||
.reverse()
|
||||
.find((e) => e.style.display === "list-item")
|
||||
}
|
||||
|
||||
getLastVisibleChild(elem) {
|
||||
let lastElementChild = elem.lastElementChild
|
||||
if (lastElementChild.style.display == 'list-item') return lastElementChild
|
||||
if (lastElementChild.style.display == "list-item") return lastElementChild
|
||||
return this.getPreviousVisibleSibling(lastElementChild)
|
||||
}
|
||||
|
||||
|
||||
getNextVisibleSibling(elem) {
|
||||
const modelElements = Array.from(this.modelElements)
|
||||
const index = modelElements.indexOf(elem)
|
||||
return modelElements.slice(index + 1).find(e => e.style.display === 'list-item')
|
||||
return modelElements.slice(index + 1).find((e) => e.style.display === "list-item")
|
||||
}
|
||||
|
||||
|
||||
getFirstVisibleChild(elem) {
|
||||
let firstElementChild = elem.firstElementChild
|
||||
if (firstElementChild.style.display == 'list-item') return firstElementChild
|
||||
if (firstElementChild.style.display == "list-item") return firstElementChild
|
||||
return this.getNextVisibleSibling(firstElementChild)
|
||||
}
|
||||
|
||||
|
||||
selectModelEntry(elem) {
|
||||
if (elem) {
|
||||
if (this.highlightedModelEntry !== undefined) {
|
||||
this.highlightedModelEntry.classList.remove('selected')
|
||||
this.highlightedModelEntry.classList.remove("selected")
|
||||
}
|
||||
this.saveCurrentSelection(elem, elem.innerText, elem.dataset.path)
|
||||
elem.classList.add('selected')
|
||||
elem.scrollIntoView({block: 'nearest'})
|
||||
elem.classList.add("selected")
|
||||
elem.scrollIntoView({ block: "nearest" })
|
||||
this.highlightedModelEntry = elem
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
selectPreviousFile() {
|
||||
const elem = this.getPreviousVisibleSibling(this.highlightedModelEntry)
|
||||
if (elem) {
|
||||
this.selectModelEntry(elem)
|
||||
}
|
||||
else
|
||||
{
|
||||
} else {
|
||||
//this.highlightedModelEntry.parentElement.parentElement.scrollIntoView({block: 'nearest'})
|
||||
this.highlightedModelEntry.closest('.model-list').scrollTop = 0
|
||||
this.highlightedModelEntry.closest(".model-list").scrollTop = 0
|
||||
}
|
||||
this.modelFilter.select()
|
||||
}
|
||||
|
||||
|
||||
selectNextFile() {
|
||||
this.selectModelEntry(this.getNextVisibleSibling(this.highlightedModelEntry))
|
||||
this.modelFilter.select()
|
||||
}
|
||||
|
||||
|
||||
selectFirstFile() {
|
||||
this.selectModelEntry(this.modelList.querySelector('.model-file'))
|
||||
this.highlightedModelEntry.scrollIntoView({block: 'nearest'})
|
||||
this.selectModelEntry(this.modelList.querySelector(".model-file"))
|
||||
this.highlightedModelEntry.scrollIntoView({ block: "nearest" })
|
||||
this.modelFilter.select()
|
||||
}
|
||||
|
||||
|
||||
selectLastFile() {
|
||||
const elems = this.modelList.querySelectorAll('.model-file:last-child')
|
||||
this.selectModelEntry(elems[elems.length -1])
|
||||
const elems = this.modelList.querySelectorAll(".model-file:last-child")
|
||||
this.selectModelEntry(elems[elems.length - 1])
|
||||
this.modelFilter.select()
|
||||
}
|
||||
|
||||
@ -198,57 +203,57 @@ class ModelDropdown
|
||||
}
|
||||
|
||||
validEntrySelected() {
|
||||
return (this.modelNoResult.style.display === 'none')
|
||||
return this.modelNoResult.style.display === "none"
|
||||
}
|
||||
|
||||
|
||||
processKey(e) {
|
||||
switch (e.key) {
|
||||
case 'Escape':
|
||||
case "Escape":
|
||||
e.preventDefault()
|
||||
this.resetSelection()
|
||||
break
|
||||
case 'Enter':
|
||||
case "Enter":
|
||||
e.preventDefault()
|
||||
if (this.validEntrySelected()) {
|
||||
if (this.modelList.style.display != 'block') {
|
||||
if (this.modelList.style.display != "block") {
|
||||
this.showModelList()
|
||||
}
|
||||
else
|
||||
{
|
||||
this.saveCurrentSelection(this.highlightedModelEntry, this.highlightedModelEntry.innerText, this.highlightedModelEntry.dataset.path)
|
||||
} else {
|
||||
this.saveCurrentSelection(
|
||||
this.highlightedModelEntry,
|
||||
this.highlightedModelEntry.innerText,
|
||||
this.highlightedModelEntry.dataset.path
|
||||
)
|
||||
this.hideModelList()
|
||||
this.showAllEntries()
|
||||
}
|
||||
this.modelFilter.focus()
|
||||
}
|
||||
else
|
||||
{
|
||||
} else {
|
||||
this.resetSelection()
|
||||
}
|
||||
break
|
||||
case 'ArrowUp':
|
||||
case "ArrowUp":
|
||||
e.preventDefault()
|
||||
if (this.validEntrySelected()) {
|
||||
this.selectPreviousFile()
|
||||
}
|
||||
break
|
||||
case 'ArrowDown':
|
||||
case "ArrowDown":
|
||||
e.preventDefault()
|
||||
if (this.validEntrySelected()) {
|
||||
this.selectNextFile()
|
||||
}
|
||||
break
|
||||
case 'ArrowLeft':
|
||||
if (this.modelList.style.display != 'block') {
|
||||
case "ArrowLeft":
|
||||
if (this.modelList.style.display != "block") {
|
||||
e.preventDefault()
|
||||
}
|
||||
break
|
||||
case 'ArrowRight':
|
||||
if (this.modelList.style.display != 'block') {
|
||||
case "ArrowRight":
|
||||
if (this.modelList.style.display != "block") {
|
||||
e.preventDefault()
|
||||
}
|
||||
break
|
||||
case 'PageUp':
|
||||
case "PageUp":
|
||||
e.preventDefault()
|
||||
if (this.validEntrySelected()) {
|
||||
this.selectPreviousFile()
|
||||
@ -261,7 +266,7 @@ class ModelDropdown
|
||||
this.selectPreviousFile()
|
||||
}
|
||||
break
|
||||
case 'PageDown':
|
||||
case "PageDown":
|
||||
e.preventDefault()
|
||||
if (this.validEntrySelected()) {
|
||||
this.selectNextFile()
|
||||
@ -274,201 +279,195 @@ class ModelDropdown
|
||||
this.selectNextFile()
|
||||
}
|
||||
break
|
||||
case 'Home':
|
||||
case "Home":
|
||||
//if (this.modelList.style.display != 'block') {
|
||||
e.preventDefault()
|
||||
if (this.validEntrySelected()) {
|
||||
this.selectFirstFile()
|
||||
}
|
||||
e.preventDefault()
|
||||
if (this.validEntrySelected()) {
|
||||
this.selectFirstFile()
|
||||
}
|
||||
//}
|
||||
break
|
||||
case 'End':
|
||||
case "End":
|
||||
//if (this.modelList.style.display != 'block') {
|
||||
e.preventDefault()
|
||||
if (this.validEntrySelected()) {
|
||||
this.selectLastFile()
|
||||
}
|
||||
e.preventDefault()
|
||||
if (this.validEntrySelected()) {
|
||||
this.selectLastFile()
|
||||
}
|
||||
//}
|
||||
break
|
||||
default:
|
||||
//console.log(e.key)
|
||||
//console.log(e.key)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
modelListFocus() {
|
||||
this.selectEntry()
|
||||
this.showAllEntries()
|
||||
}
|
||||
|
||||
|
||||
showModelList() {
|
||||
this.modelList.style.display = 'block'
|
||||
this.modelList.style.display = "block"
|
||||
this.selectEntry()
|
||||
this.showAllEntries()
|
||||
//this.modelFilter.value = ''
|
||||
this.modelFilter.select() // preselect the entire string so user can just start typing.
|
||||
this.modelFilter.focus()
|
||||
this.modelFilter.style.cursor = 'auto'
|
||||
this.modelFilter.style.cursor = "auto"
|
||||
}
|
||||
|
||||
|
||||
hideModelList() {
|
||||
this.modelList.style.display = 'none'
|
||||
this.modelList.style.display = "none"
|
||||
this.modelFilter.value = this.currentSelection.value
|
||||
this.modelFilter.style.cursor = ''
|
||||
this.modelFilter.style.cursor = ""
|
||||
}
|
||||
|
||||
|
||||
toggleModelList(e) {
|
||||
e.preventDefault()
|
||||
if (!this.modelFilter.disabled) {
|
||||
if (this.modelList.style.display != 'block') {
|
||||
if (this.modelList.style.display != "block") {
|
||||
this.showModelList()
|
||||
}
|
||||
else
|
||||
{
|
||||
} else {
|
||||
this.hideModelList()
|
||||
this.modelFilter.select()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
selectEntry(path) {
|
||||
if (path !== undefined) {
|
||||
const entries = this.modelElements;
|
||||
const entries = this.modelElements
|
||||
|
||||
for (const elem of entries) {
|
||||
if (elem.dataset.path == path) {
|
||||
this.saveCurrentSelection(elem, elem.innerText, elem.dataset.path)
|
||||
this.highlightedModelEntry = elem
|
||||
elem.scrollIntoView({block: 'nearest'})
|
||||
elem.scrollIntoView({ block: "nearest" })
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (this.currentSelection.elem !== undefined) {
|
||||
// select the previous element
|
||||
if (this.highlightedModelEntry !== undefined && this.highlightedModelEntry != this.currentSelection.elem) {
|
||||
this.highlightedModelEntry.classList.remove('selected')
|
||||
this.highlightedModelEntry.classList.remove("selected")
|
||||
}
|
||||
this.currentSelection.elem.classList.add('selected')
|
||||
this.currentSelection.elem.classList.add("selected")
|
||||
this.highlightedModelEntry = this.currentSelection.elem
|
||||
this.currentSelection.elem.scrollIntoView({block: 'nearest'})
|
||||
}
|
||||
else
|
||||
{
|
||||
this.currentSelection.elem.scrollIntoView({ block: "nearest" })
|
||||
} else {
|
||||
this.selectFirstFile()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
highlightModelAtPosition(e) {
|
||||
let elem = document.elementFromPoint(e.clientX, e.clientY)
|
||||
|
||||
if (elem.classList.contains('model-file')) {
|
||||
|
||||
if (elem.classList.contains("model-file")) {
|
||||
this.highlightModel(elem)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
highlightModel(elem) {
|
||||
if (elem.classList.contains('model-file')) {
|
||||
if (elem.classList.contains("model-file")) {
|
||||
if (this.highlightedModelEntry !== undefined && this.highlightedModelEntry != elem) {
|
||||
this.highlightedModelEntry.classList.remove('selected')
|
||||
this.highlightedModelEntry.classList.remove("selected")
|
||||
}
|
||||
elem.classList.add('selected')
|
||||
elem.classList.add("selected")
|
||||
this.highlightedModelEntry = elem
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
showAllEntries() {
|
||||
this.modelList.querySelectorAll('li').forEach(function(li) {
|
||||
if (li.id !== 'model-no-result') {
|
||||
li.style.display = 'list-item'
|
||||
this.modelList.querySelectorAll("li").forEach(function(li) {
|
||||
if (li.id !== "model-no-result") {
|
||||
li.style.display = "list-item"
|
||||
}
|
||||
})
|
||||
this.modelNoResult.style.display = 'none'
|
||||
this.modelNoResult.style.display = "none"
|
||||
}
|
||||
|
||||
|
||||
filterList(e) {
|
||||
const filter = this.modelFilter.value.toLowerCase()
|
||||
let found = false
|
||||
let showAllChildren = false
|
||||
|
||||
this.modelList.querySelectorAll('li').forEach(function(li) {
|
||||
if (li.classList.contains('model-folder')) {
|
||||
|
||||
this.modelList.querySelectorAll("li").forEach(function(li) {
|
||||
if (li.classList.contains("model-folder")) {
|
||||
showAllChildren = false
|
||||
}
|
||||
if (filter == '') {
|
||||
li.style.display = 'list-item'
|
||||
if (filter == "") {
|
||||
li.style.display = "list-item"
|
||||
found = true
|
||||
} else if (showAllChildren || li.textContent.toLowerCase().match(filter)) {
|
||||
li.style.display = 'list-item'
|
||||
if (li.classList.contains('model-folder') && li.firstChild.textContent.toLowerCase().match(filter)) {
|
||||
li.style.display = "list-item"
|
||||
if (li.classList.contains("model-folder") && li.firstChild.textContent.toLowerCase().match(filter)) {
|
||||
showAllChildren = true
|
||||
}
|
||||
found = true
|
||||
} else {
|
||||
li.style.display = 'none'
|
||||
li.style.display = "none"
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
if (found) {
|
||||
this.modelResult.style.display = 'list-item'
|
||||
this.modelNoResult.style.display = 'none'
|
||||
const elem = this.getNextVisibleSibling(this.modelList.querySelector('.model-file'))
|
||||
this.modelResult.style.display = "list-item"
|
||||
this.modelNoResult.style.display = "none"
|
||||
const elem = this.getNextVisibleSibling(this.modelList.querySelector(".model-file"))
|
||||
this.highlightModel(elem)
|
||||
elem.scrollIntoView({block: 'nearest'})
|
||||
elem.scrollIntoView({ block: "nearest" })
|
||||
} else {
|
||||
this.modelResult.style.display = "none"
|
||||
this.modelNoResult.style.display = "list-item"
|
||||
}
|
||||
else
|
||||
{
|
||||
this.modelResult.style.display = 'none'
|
||||
this.modelNoResult.style.display = 'list-item'
|
||||
}
|
||||
this.modelList.style.display = 'block'
|
||||
this.modelList.style.display = "block"
|
||||
}
|
||||
|
||||
/* MODEL LOADER */
|
||||
getElementDimensions(element) {
|
||||
// Clone the element
|
||||
const clone = element.cloneNode(true)
|
||||
|
||||
|
||||
// Copy the styles of the original element to the cloned element
|
||||
const originalStyles = window.getComputedStyle(element)
|
||||
for (let i = 0; i < originalStyles.length; i++) {
|
||||
const property = originalStyles[i]
|
||||
clone.style[property] = originalStyles.getPropertyValue(property)
|
||||
}
|
||||
|
||||
|
||||
// Set its visibility to hidden and display to inline-block
|
||||
clone.style.visibility = "hidden"
|
||||
clone.style.display = "inline-block"
|
||||
|
||||
|
||||
// Put the cloned element next to the original element
|
||||
element.parentNode.insertBefore(clone, element.nextSibling)
|
||||
|
||||
|
||||
// Get its width and height
|
||||
const width = clone.offsetWidth
|
||||
const height = clone.offsetHeight
|
||||
|
||||
|
||||
// Remove it from the DOM
|
||||
clone.remove()
|
||||
|
||||
|
||||
// Return its width and height
|
||||
return { width, height }
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @param {Array<string>} models
|
||||
* @param {Array<string>} models
|
||||
*/
|
||||
sortStringArray(models) {
|
||||
models.sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' }))
|
||||
models.sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }))
|
||||
}
|
||||
|
||||
populateModels() {
|
||||
this.activeModel = this.modelFilter.dataset.path
|
||||
|
||||
this.currentSelection = { elem: undefined, value: '', path: ''}
|
||||
|
||||
this.currentSelection = { elem: undefined, value: "", path: "" }
|
||||
this.highlightedModelEntry = undefined
|
||||
this.flatModelList = []
|
||||
|
||||
if(this.modelList !== undefined) {
|
||||
if (this.modelList !== undefined) {
|
||||
this.modelList.remove()
|
||||
this.modelFilterArrow.remove()
|
||||
}
|
||||
@ -478,39 +477,39 @@ class ModelDropdown
|
||||
createDropdown() {
|
||||
// create dropdown entries
|
||||
let rootModelList = this.createRootModelList(this.inputModels)
|
||||
this.modelFilter.insertAdjacentElement('afterend', rootModelList)
|
||||
this.modelFilter.insertAdjacentElement("afterend", rootModelList)
|
||||
this.modelFilter.insertAdjacentElement(
|
||||
'afterend',
|
||||
createElement(
|
||||
'i',
|
||||
{ id: `${this.modelFilter.id}-model-filter-arrow` },
|
||||
['model-selector-arrow', 'fa-solid', 'fa-angle-down'],
|
||||
),
|
||||
"afterend",
|
||||
createElement("i", { id: `${this.modelFilter.id}-model-filter-arrow` }, [
|
||||
"model-selector-arrow",
|
||||
"fa-solid",
|
||||
"fa-angle-down",
|
||||
])
|
||||
)
|
||||
this.modelFilter.classList.add('model-selector')
|
||||
this.modelFilter.classList.add("model-selector")
|
||||
this.modelFilterArrow = document.querySelector(`#${this.modelFilter.id}-model-filter-arrow`)
|
||||
if (this.modelFilterArrow) {
|
||||
this.modelFilterArrow.style.color = this.modelFilter.disabled ? 'dimgray' : ''
|
||||
this.modelFilterArrow.style.color = this.modelFilter.disabled ? "dimgray" : ""
|
||||
}
|
||||
this.modelList = document.querySelector(`#${this.modelFilter.id}-model-list`)
|
||||
this.modelResult = document.querySelector(`#${this.modelFilter.id}-model-result`)
|
||||
this.modelNoResult = document.querySelector(`#${this.modelFilter.id}-model-no-result`)
|
||||
|
||||
|
||||
if (this.modelFilterInitialized !== true) {
|
||||
this.modelFilter.addEventListener('input', this.bind(this.filterList, this))
|
||||
this.modelFilter.addEventListener('focus', this.bind(this.modelListFocus, this))
|
||||
this.modelFilter.addEventListener('blur', this.bind(this.hideModelList, this))
|
||||
this.modelFilter.addEventListener('click', this.bind(this.showModelList, this))
|
||||
this.modelFilter.addEventListener('keydown', this.bind(this.processKey, this))
|
||||
this.modelFilter.addEventListener("input", this.bind(this.filterList, this))
|
||||
this.modelFilter.addEventListener("focus", this.bind(this.modelListFocus, this))
|
||||
this.modelFilter.addEventListener("blur", this.bind(this.hideModelList, this))
|
||||
this.modelFilter.addEventListener("click", this.bind(this.showModelList, this))
|
||||
this.modelFilter.addEventListener("keydown", this.bind(this.processKey, this))
|
||||
|
||||
this.modelFilterInitialized = true
|
||||
}
|
||||
this.modelFilterArrow.addEventListener('mousedown', this.bind(this.toggleModelList, this))
|
||||
this.modelList.addEventListener('mousemove', this.bind(this.highlightModelAtPosition, this))
|
||||
this.modelList.addEventListener('mousedown', this.bind(this.processClick, this))
|
||||
this.modelFilterArrow.addEventListener("mousedown", this.bind(this.toggleModelList, this))
|
||||
this.modelList.addEventListener("mousemove", this.bind(this.highlightModelAtPosition, this))
|
||||
this.modelList.addEventListener("mousedown", this.bind(this.processClick, this))
|
||||
|
||||
let mf = this.modelFilter
|
||||
this.modelFilter.addEventListener('focus', function() {
|
||||
this.modelFilter.addEventListener("focus", function() {
|
||||
let modelFilterStyle = window.getComputedStyle(mf)
|
||||
rootModelList.style.minWidth = modelFilterStyle.width
|
||||
})
|
||||
@ -520,74 +519,62 @@ class ModelDropdown
|
||||
|
||||
/**
|
||||
* @param {Array<string | object} modelTree
|
||||
* @param {string} folderName
|
||||
* @param {boolean} isRootFolder
|
||||
* @param {string} folderName
|
||||
* @param {boolean} isRootFolder
|
||||
* @returns {HTMLElement}
|
||||
*/
|
||||
createModelNodeList(folderName, modelTree, isRootFolder) {
|
||||
const listElement = createElement('ul')
|
||||
const listElement = createElement("ul")
|
||||
|
||||
const foldersMap = new Map()
|
||||
const modelsMap = new Map()
|
||||
|
||||
modelTree.forEach(model => {
|
||||
modelTree.forEach((model) => {
|
||||
if (Array.isArray(model)) {
|
||||
const [childFolderName, childModels] = model
|
||||
foldersMap.set(
|
||||
childFolderName,
|
||||
this.createModelNodeList(
|
||||
`${folderName || ''}/${childFolderName}`,
|
||||
childModels,
|
||||
false,
|
||||
),
|
||||
this.createModelNodeList(`${folderName || ""}/${childFolderName}`, childModels, false)
|
||||
)
|
||||
} else {
|
||||
const classes = ['model-file']
|
||||
const classes = ["model-file"]
|
||||
if (isRootFolder) {
|
||||
classes.push('in-root-folder')
|
||||
classes.push("in-root-folder")
|
||||
}
|
||||
// Remove the leading slash from the model path
|
||||
const fullPath = folderName ? `${folderName.substring(1)}/${model}` : model
|
||||
modelsMap.set(
|
||||
model,
|
||||
createElement(
|
||||
'li',
|
||||
{ 'data-path': fullPath },
|
||||
classes,
|
||||
[
|
||||
createElement('i', undefined, ['fa-regular', 'fa-file', 'icon']),
|
||||
model,
|
||||
],
|
||||
),
|
||||
createElement("li", { "data-path": fullPath }, classes, [
|
||||
createElement("i", undefined, ["fa-regular", "fa-file", "icon"]),
|
||||
model,
|
||||
])
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
const childFolderNames = Array.from(foldersMap.keys())
|
||||
this.sortStringArray(childFolderNames)
|
||||
const folderElements = childFolderNames.map(name => foldersMap.get(name))
|
||||
const folderElements = childFolderNames.map((name) => foldersMap.get(name))
|
||||
|
||||
const modelNames = Array.from(modelsMap.keys())
|
||||
this.sortStringArray(modelNames)
|
||||
const modelElements = modelNames.map(name => modelsMap.get(name))
|
||||
const modelElements = modelNames.map((name) => modelsMap.get(name))
|
||||
|
||||
if (modelElements.length && folderName) {
|
||||
listElement.appendChild(
|
||||
createElement(
|
||||
'li',
|
||||
"li",
|
||||
undefined,
|
||||
['model-folder'],
|
||||
[
|
||||
createElement('i', undefined, ['fa-regular', 'fa-folder-open', 'icon']),
|
||||
folderName.substring(1),
|
||||
],
|
||||
["model-folder"],
|
||||
[createElement("i", undefined, ["fa-regular", "fa-folder-open", "icon"]), folderName.substring(1)]
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
// const allModelElements = isRootFolder ? [...folderElements, ...modelElements] : [...modelElements, ...folderElements]
|
||||
const allModelElements = [...modelElements, ...folderElements]
|
||||
allModelElements.forEach(e => listElement.appendChild(e))
|
||||
allModelElements.forEach((e) => listElement.appendChild(e))
|
||||
return listElement
|
||||
}
|
||||
|
||||
@ -596,37 +583,21 @@ class ModelDropdown
|
||||
* @returns {HTMLElement}
|
||||
*/
|
||||
createRootModelList(modelTree) {
|
||||
const rootList = createElement(
|
||||
'ul',
|
||||
{ id: `${this.modelFilter.id}-model-list` },
|
||||
['model-list'],
|
||||
)
|
||||
const rootList = createElement("ul", { id: `${this.modelFilter.id}-model-list` }, ["model-list"])
|
||||
rootList.appendChild(
|
||||
createElement(
|
||||
'li',
|
||||
{ id: `${this.modelFilter.id}-model-no-result` },
|
||||
['model-no-result'],
|
||||
'No result'
|
||||
),
|
||||
createElement("li", { id: `${this.modelFilter.id}-model-no-result` }, ["model-no-result"], "No result")
|
||||
)
|
||||
|
||||
if (this.noneEntry) {
|
||||
rootList.appendChild(
|
||||
createElement(
|
||||
'li',
|
||||
{ 'data-path': '' },
|
||||
['model-file', 'in-root-folder'],
|
||||
this.noneEntry,
|
||||
),
|
||||
createElement("li", { "data-path": "" }, ["model-file", "in-root-folder"], this.noneEntry)
|
||||
)
|
||||
}
|
||||
|
||||
if (modelTree.length > 0) {
|
||||
const containerListItem = createElement(
|
||||
'li',
|
||||
{ id: `${this.modelFilter.id}-model-result` },
|
||||
['model-result'],
|
||||
)
|
||||
const containerListItem = createElement("li", { id: `${this.modelFilter.id}-model-result` }, [
|
||||
"model-result",
|
||||
])
|
||||
//console.log(containerListItem)
|
||||
containerListItem.appendChild(this.createModelNodeList(undefined, modelTree, true))
|
||||
rootList.appendChild(containerListItem)
|
||||
@ -640,13 +611,16 @@ class ModelDropdown
|
||||
async function getModels() {
|
||||
try {
|
||||
modelsCache = await SD.getModels()
|
||||
modelsOptions = modelsCache['options']
|
||||
modelsOptions = modelsCache["options"]
|
||||
if ("scan-error" in modelsCache) {
|
||||
// let previewPane = document.getElementById('tab-content-wrapper')
|
||||
let previewPane = document.getElementById('preview')
|
||||
previewPane.style.background="red"
|
||||
previewPane.style.textAlign="center"
|
||||
previewPane.innerHTML = '<H1>🔥Malware alert!🔥</H1><h2>The file <i>' + modelsCache['scan-error'] + '</i> in your <tt>models/stable-diffusion</tt> folder is probably malware infected.</h2><h2>Please delete this file from the folder before proceeding!</h2>After deleting the file, reload this page.<br><br><button onClick="window.location.reload();">Reload Page</button>'
|
||||
let previewPane = document.getElementById("preview")
|
||||
previewPane.style.background = "red"
|
||||
previewPane.style.textAlign = "center"
|
||||
previewPane.innerHTML =
|
||||
"<H1>🔥Malware alert!🔥</H1><h2>The file <i>" +
|
||||
modelsCache["scan-error"] +
|
||||
'</i> in your <tt>models/stable-diffusion</tt> folder is probably malware infected.</h2><h2>Please delete this file from the folder before proceeding!</h2>After deleting the file, reload this page.<br><br><button onClick="window.location.reload();">Reload Page</button>'
|
||||
makeImageBtn.disabled = true
|
||||
}
|
||||
|
||||
@ -667,11 +641,11 @@ async function getModels() {
|
||||
*/
|
||||
|
||||
// notify ModelDropdown objects to refresh
|
||||
document.dispatchEvent(new Event('refreshModels'))
|
||||
document.dispatchEvent(new Event("refreshModels"))
|
||||
} catch (e) {
|
||||
console.log('get models error', e)
|
||||
console.log("get models error", e)
|
||||
}
|
||||
}
|
||||
|
||||
// reload models button
|
||||
document.querySelector('#reload-models').addEventListener('click', getModels)
|
||||
document.querySelector("#reload-models").addEventListener("click", getModels)
|
||||
|
@ -1,82 +1,85 @@
|
||||
const themeField = document.getElementById("theme");
|
||||
var DEFAULT_THEME = {};
|
||||
var THEMES = []; // initialized in initTheme from data in css
|
||||
const themeField = document.getElementById("theme")
|
||||
var DEFAULT_THEME = {}
|
||||
var THEMES = [] // initialized in initTheme from data in css
|
||||
|
||||
function getThemeName(theme) {
|
||||
theme = theme.replace("theme-", "");
|
||||
theme = theme.split("-").map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
|
||||
return theme;
|
||||
theme = theme.replace("theme-", "")
|
||||
theme = theme
|
||||
.split("-")
|
||||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
||||
.join(" ")
|
||||
return theme
|
||||
}
|
||||
// init themefield
|
||||
function initTheme() {
|
||||
Array.from(document.styleSheets)
|
||||
.filter(sheet => sheet.href?.startsWith(window.location.origin))
|
||||
.flatMap(sheet => Array.from(sheet.cssRules))
|
||||
.forEach(rule => {
|
||||
var selector = rule.selectorText;
|
||||
.filter((sheet) => sheet.href?.startsWith(window.location.origin))
|
||||
.flatMap((sheet) => Array.from(sheet.cssRules))
|
||||
.forEach((rule) => {
|
||||
var selector = rule.selectorText
|
||||
if (selector && selector.startsWith(".theme-") && !selector.includes(" ")) {
|
||||
if (DEFAULT_THEME) { // re-add props that dont change (css needs this so they update correctly)
|
||||
if (DEFAULT_THEME) {
|
||||
// re-add props that dont change (css needs this so they update correctly)
|
||||
Array.from(DEFAULT_THEME.rule.style)
|
||||
.filter(cssVariable => !Array.from(rule.style).includes(cssVariable))
|
||||
.forEach(cssVariable => {
|
||||
rule.style.setProperty(cssVariable, DEFAULT_THEME.rule.style.getPropertyValue(cssVariable));
|
||||
});
|
||||
.filter((cssVariable) => !Array.from(rule.style).includes(cssVariable))
|
||||
.forEach((cssVariable) => {
|
||||
rule.style.setProperty(cssVariable, DEFAULT_THEME.rule.style.getPropertyValue(cssVariable))
|
||||
})
|
||||
}
|
||||
var theme_key = selector.substring(1);
|
||||
var theme_key = selector.substring(1)
|
||||
THEMES.push({
|
||||
key: theme_key,
|
||||
name: getThemeName(theme_key),
|
||||
rule: rule
|
||||
rule: rule,
|
||||
})
|
||||
}
|
||||
if (selector && selector == ":root") {
|
||||
DEFAULT_THEME = {
|
||||
key: "theme-default",
|
||||
name: "Default",
|
||||
rule: rule
|
||||
};
|
||||
rule: rule,
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
THEMES.forEach(theme => {
|
||||
var new_option = document.createElement("option");
|
||||
new_option.setAttribute("value", theme.key);
|
||||
new_option.innerText = theme.name;
|
||||
themeField.appendChild(new_option);
|
||||
});
|
||||
})
|
||||
|
||||
THEMES.forEach((theme) => {
|
||||
var new_option = document.createElement("option")
|
||||
new_option.setAttribute("value", theme.key)
|
||||
new_option.innerText = theme.name
|
||||
themeField.appendChild(new_option)
|
||||
})
|
||||
|
||||
|
||||
// setup the style transitions a second after app initializes, so initial style is instant
|
||||
setTimeout(() => {
|
||||
var body = document.querySelector("body");
|
||||
var style = document.createElement('style');
|
||||
style.innerHTML = "* { transition: background 0.5s, color 0.5s, background-color 0.5s; }";
|
||||
body.appendChild(style);
|
||||
}, 1000);
|
||||
var body = document.querySelector("body")
|
||||
var style = document.createElement("style")
|
||||
style.innerHTML = "* { transition: background 0.5s, color 0.5s, background-color 0.5s; }"
|
||||
body.appendChild(style)
|
||||
}, 1000)
|
||||
}
|
||||
initTheme();
|
||||
initTheme()
|
||||
|
||||
function themeFieldChanged() {
|
||||
var theme_key = themeField.value;
|
||||
var theme_key = themeField.value
|
||||
|
||||
var body = document.querySelector("body");
|
||||
body.classList.remove(...THEMES.map(theme => theme.key));
|
||||
body.classList.add(theme_key);
|
||||
|
||||
//
|
||||
var body = document.querySelector("body")
|
||||
body.classList.remove(...THEMES.map((theme) => theme.key))
|
||||
body.classList.add(theme_key)
|
||||
|
||||
body.style = "";
|
||||
var theme = THEMES.find(t => t.key == theme_key);
|
||||
//
|
||||
|
||||
body.style = ""
|
||||
var theme = THEMES.find((t) => t.key == theme_key)
|
||||
let borderColor = undefined
|
||||
if (theme) {
|
||||
borderColor = theme.rule.style.getPropertyValue('--input-border-color').trim()
|
||||
if (!borderColor.startsWith('#')) {
|
||||
borderColor = theme.rule.style.getPropertyValue('--theme-color-fallback')
|
||||
borderColor = theme.rule.style.getPropertyValue("--input-border-color").trim()
|
||||
if (!borderColor.startsWith("#")) {
|
||||
borderColor = theme.rule.style.getPropertyValue("--theme-color-fallback")
|
||||
}
|
||||
} else {
|
||||
borderColor = DEFAULT_THEME.rule.style.getPropertyValue('--theme-color-fallback')
|
||||
borderColor = DEFAULT_THEME.rule.style.getPropertyValue("--theme-color-fallback")
|
||||
}
|
||||
document.querySelector('meta[name="theme-color"]').setAttribute("content", borderColor)
|
||||
}
|
||||
|
||||
themeField.addEventListener('change', themeFieldChanged);
|
||||
themeField.addEventListener("change", themeFieldChanged)
|
||||
|
@ -1,4 +1,4 @@
|
||||
"use strict";
|
||||
"use strict"
|
||||
|
||||
// https://gomakethings.com/finding-the-next-and-previous-sibling-elements-that-match-a-selector-with-vanilla-js/
|
||||
function getNextSibling(elem, selector) {
|
||||
@ -20,33 +20,34 @@ function getNextSibling(elem, selector) {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Panel Stuff */
|
||||
|
||||
// true = open
|
||||
let COLLAPSIBLES_INITIALIZED = false;
|
||||
const COLLAPSIBLES_KEY = "collapsibles";
|
||||
const COLLAPSIBLE_PANELS = []; // filled in by createCollapsibles with all the elements matching .collapsible
|
||||
let COLLAPSIBLES_INITIALIZED = false
|
||||
const COLLAPSIBLES_KEY = "collapsibles"
|
||||
const COLLAPSIBLE_PANELS = [] // filled in by createCollapsibles with all the elements matching .collapsible
|
||||
|
||||
// on-init call this for any panels that are marked open
|
||||
function toggleCollapsible(element) {
|
||||
const collapsibleHeader = element.querySelector(".collapsible");
|
||||
const handle = element.querySelector(".collapsible-handle");
|
||||
const collapsibleHeader = element.querySelector(".collapsible")
|
||||
const handle = element.querySelector(".collapsible-handle")
|
||||
collapsibleHeader.classList.toggle("active")
|
||||
let content = getNextSibling(collapsibleHeader, '.collapsible-content')
|
||||
let content = getNextSibling(collapsibleHeader, ".collapsible-content")
|
||||
if (!collapsibleHeader.classList.contains("active")) {
|
||||
content.style.display = "none"
|
||||
if (handle != null) { // render results don't have a handle
|
||||
handle.innerHTML = '➕' // plus
|
||||
if (handle != null) {
|
||||
// render results don't have a handle
|
||||
handle.innerHTML = "➕" // plus
|
||||
}
|
||||
} else {
|
||||
content.style.display = "block"
|
||||
if (handle != null) { // render results don't have a handle
|
||||
handle.innerHTML = '➖' // minus
|
||||
if (handle != null) {
|
||||
// render results don't have a handle
|
||||
handle.innerHTML = "➖" // minus
|
||||
}
|
||||
}
|
||||
document.dispatchEvent(new CustomEvent('collapsibleClick', { detail: collapsibleHeader }))
|
||||
|
||||
document.dispatchEvent(new CustomEvent("collapsibleClick", { detail: collapsibleHeader }))
|
||||
|
||||
if (COLLAPSIBLES_INITIALIZED && COLLAPSIBLE_PANELS.includes(element)) {
|
||||
saveCollapsibles()
|
||||
}
|
||||
@ -54,7 +55,7 @@ function toggleCollapsible(element) {
|
||||
|
||||
function saveCollapsibles() {
|
||||
let values = {}
|
||||
COLLAPSIBLE_PANELS.forEach(element => {
|
||||
COLLAPSIBLE_PANELS.forEach((element) => {
|
||||
let value = element.querySelector(".collapsible").className.indexOf("active") !== -1
|
||||
values[element.id] = value
|
||||
})
|
||||
@ -72,31 +73,31 @@ function createCollapsibles(node) {
|
||||
if (save && c.parentElement.id) {
|
||||
COLLAPSIBLE_PANELS.push(c.parentElement)
|
||||
}
|
||||
let handle = document.createElement('span')
|
||||
handle.className = 'collapsible-handle'
|
||||
let handle = document.createElement("span")
|
||||
handle.className = "collapsible-handle"
|
||||
|
||||
if (c.classList.contains("active")) {
|
||||
handle.innerHTML = '➖' // minus
|
||||
handle.innerHTML = "➖" // minus
|
||||
} else {
|
||||
handle.innerHTML = '➕' // plus
|
||||
handle.innerHTML = "➕" // plus
|
||||
}
|
||||
c.insertBefore(handle, c.firstChild)
|
||||
|
||||
c.addEventListener('click', function() {
|
||||
c.addEventListener("click", function() {
|
||||
toggleCollapsible(c.parentElement)
|
||||
})
|
||||
})
|
||||
if (save) {
|
||||
let saved = localStorage.getItem(COLLAPSIBLES_KEY)
|
||||
if (!saved) {
|
||||
saved = tryLoadOldCollapsibles();
|
||||
if (!saved) {
|
||||
saved = tryLoadOldCollapsibles()
|
||||
}
|
||||
if (!saved) {
|
||||
saveCollapsibles()
|
||||
saved = localStorage.getItem(COLLAPSIBLES_KEY)
|
||||
}
|
||||
let values = JSON.parse(saved)
|
||||
COLLAPSIBLE_PANELS.forEach(element => {
|
||||
COLLAPSIBLE_PANELS.forEach((element) => {
|
||||
let value = element.querySelector(".collapsible").className.indexOf("active") !== -1
|
||||
if (values[element.id] != value) {
|
||||
toggleCollapsible(element)
|
||||
@ -108,24 +109,24 @@ function createCollapsibles(node) {
|
||||
|
||||
function tryLoadOldCollapsibles() {
|
||||
const old_map = {
|
||||
"advancedPanelOpen": "editor-settings",
|
||||
"modifiersPanelOpen": "editor-modifiers",
|
||||
"negativePromptPanelOpen": "editor-inputs-prompt"
|
||||
};
|
||||
advancedPanelOpen: "editor-settings",
|
||||
modifiersPanelOpen: "editor-modifiers",
|
||||
negativePromptPanelOpen: "editor-inputs-prompt",
|
||||
}
|
||||
if (localStorage.getItem(Object.keys(old_map)[0])) {
|
||||
let result = {};
|
||||
Object.keys(old_map).forEach(key => {
|
||||
const value = localStorage.getItem(key);
|
||||
let result = {}
|
||||
Object.keys(old_map).forEach((key) => {
|
||||
const value = localStorage.getItem(key)
|
||||
if (value !== null) {
|
||||
result[old_map[key]] = (value == true || value == "true")
|
||||
result[old_map[key]] = value == true || value == "true"
|
||||
localStorage.removeItem(key)
|
||||
}
|
||||
});
|
||||
})
|
||||
result = JSON.stringify(result)
|
||||
localStorage.setItem(COLLAPSIBLES_KEY, result)
|
||||
return result
|
||||
}
|
||||
return null;
|
||||
return null
|
||||
}
|
||||
|
||||
function permute(arr) {
|
||||
@ -134,10 +135,12 @@ function permute(arr) {
|
||||
let n_permutations = Math.pow(2, n)
|
||||
for (let i = 0; i < n_permutations; i++) {
|
||||
let perm = []
|
||||
let mask = Number(i).toString(2).padStart(n, '0')
|
||||
let mask = Number(i)
|
||||
.toString(2)
|
||||
.padStart(n, "0")
|
||||
|
||||
for (let idx = 0; idx < mask.length; idx++) {
|
||||
if (mask[idx] === '1' && arr[idx].trim() !== '') {
|
||||
if (mask[idx] === "1" && arr[idx].trim() !== "") {
|
||||
perm.push(arr[idx])
|
||||
}
|
||||
}
|
||||
@ -152,23 +155,23 @@ function permute(arr) {
|
||||
|
||||
// https://stackoverflow.com/a/8212878
|
||||
function millisecondsToStr(milliseconds) {
|
||||
function numberEnding (number) {
|
||||
return (number > 1) ? 's' : ''
|
||||
function numberEnding(number) {
|
||||
return number > 1 ? "s" : ""
|
||||
}
|
||||
|
||||
let temp = Math.floor(milliseconds / 1000)
|
||||
let hours = Math.floor((temp %= 86400) / 3600)
|
||||
let s = ''
|
||||
let s = ""
|
||||
if (hours) {
|
||||
s += hours + ' hour' + numberEnding(hours) + ' '
|
||||
s += hours + " hour" + numberEnding(hours) + " "
|
||||
}
|
||||
let minutes = Math.floor((temp %= 3600) / 60)
|
||||
if (minutes) {
|
||||
s += minutes + ' minute' + numberEnding(minutes) + ' '
|
||||
s += minutes + " minute" + numberEnding(minutes) + " "
|
||||
}
|
||||
let seconds = temp % 60
|
||||
if (!hours && minutes < 4 && seconds) {
|
||||
s += seconds + ' second' + numberEnding(seconds)
|
||||
s += seconds + " second" + numberEnding(seconds)
|
||||
}
|
||||
|
||||
return s
|
||||
@ -176,101 +179,82 @@ function millisecondsToStr(milliseconds) {
|
||||
|
||||
// https://rosettacode.org/wiki/Brace_expansion#JavaScript
|
||||
function BraceExpander() {
|
||||
'use strict'
|
||||
"use strict"
|
||||
|
||||
// Index of any closing brace matching the opening
|
||||
// brace at iPosn,
|
||||
// with the indices of any immediately-enclosed commas.
|
||||
function bracePair(tkns, iPosn, iNest, lstCommas) {
|
||||
if (iPosn >= tkns.length || iPosn < 0) return null;
|
||||
if (iPosn >= tkns.length || iPosn < 0) return null
|
||||
|
||||
let t = tkns[iPosn],
|
||||
n = (t === '{') ? (
|
||||
iNest + 1
|
||||
) : (t === '}' ? (
|
||||
iNest - 1
|
||||
) : iNest),
|
||||
lst = (t === ',' && iNest === 1) ? (
|
||||
lstCommas.concat(iPosn)
|
||||
) : lstCommas;
|
||||
n = t === "{" ? iNest + 1 : t === "}" ? iNest - 1 : iNest,
|
||||
lst = t === "," && iNest === 1 ? lstCommas.concat(iPosn) : lstCommas
|
||||
|
||||
return n ? bracePair(tkns, iPosn + 1, n, lst) : {
|
||||
close: iPosn,
|
||||
commas: lst
|
||||
};
|
||||
return n
|
||||
? bracePair(tkns, iPosn + 1, n, lst)
|
||||
: {
|
||||
close: iPosn,
|
||||
commas: lst,
|
||||
}
|
||||
}
|
||||
|
||||
// Parse of a SYNTAGM subtree
|
||||
function andTree(dctSofar, tkns) {
|
||||
if (!tkns.length) return [dctSofar, []];
|
||||
|
||||
let dctParse = dctSofar ? dctSofar : {
|
||||
fn: and,
|
||||
args: []
|
||||
},
|
||||
if (!tkns.length) return [dctSofar, []]
|
||||
|
||||
let dctParse = dctSofar
|
||||
? dctSofar
|
||||
: {
|
||||
fn: and,
|
||||
args: [],
|
||||
},
|
||||
head = tkns[0],
|
||||
tail = head ? tkns.slice(1) : [],
|
||||
dctBrace = head === "{" ? bracePair(tkns, 0, 0, []) : null,
|
||||
lstOR = dctBrace && dctBrace.close && dctBrace.commas.length ? splitAt(dctBrace.close + 1, tkns) : null
|
||||
|
||||
dctBrace = head === '{' ? bracePair(
|
||||
tkns, 0, 0, []
|
||||
) : null,
|
||||
|
||||
lstOR = dctBrace && (
|
||||
dctBrace.close
|
||||
) && dctBrace.commas.length ? (
|
||||
splitAt(dctBrace.close + 1, tkns)
|
||||
) : null;
|
||||
|
||||
return andTree({
|
||||
fn: and,
|
||||
args: dctParse.args.concat(
|
||||
lstOR ? (
|
||||
orTree(dctParse, lstOR[0], dctBrace.commas)
|
||||
) : head
|
||||
)
|
||||
}, lstOR ? (
|
||||
lstOR[1]
|
||||
) : tail);
|
||||
return andTree(
|
||||
{
|
||||
fn: and,
|
||||
args: dctParse.args.concat(lstOR ? orTree(dctParse, lstOR[0], dctBrace.commas) : head),
|
||||
},
|
||||
lstOR ? lstOR[1] : tail
|
||||
)
|
||||
}
|
||||
|
||||
// Parse of a PARADIGM subtree
|
||||
function orTree(dctSofar, tkns, lstCommas) {
|
||||
if (!tkns.length) return [dctSofar, []];
|
||||
let iLast = lstCommas.length;
|
||||
if (!tkns.length) return [dctSofar, []]
|
||||
let iLast = lstCommas.length
|
||||
|
||||
return {
|
||||
fn: or,
|
||||
args: splitsAt(
|
||||
lstCommas, tkns
|
||||
).map(function (x, i) {
|
||||
let ts = x.slice(
|
||||
1, i === iLast ? (
|
||||
-1
|
||||
) : void 0
|
||||
);
|
||||
args: splitsAt(lstCommas, tkns)
|
||||
.map(function(x, i) {
|
||||
let ts = x.slice(1, i === iLast ? -1 : void 0)
|
||||
|
||||
return ts.length ? ts : [''];
|
||||
}).map(function (ts) {
|
||||
return ts.length > 1 ? (
|
||||
andTree(null, ts)[0]
|
||||
) : ts[0];
|
||||
})
|
||||
};
|
||||
return ts.length ? ts : [""]
|
||||
})
|
||||
.map(function(ts) {
|
||||
return ts.length > 1 ? andTree(null, ts)[0] : ts[0]
|
||||
}),
|
||||
}
|
||||
}
|
||||
|
||||
// List of unescaped braces and commas, and remaining strings
|
||||
function tokens(str) {
|
||||
// Filter function excludes empty splitting artefacts
|
||||
let toS = function (x) {
|
||||
return x.toString();
|
||||
};
|
||||
let toS = function(x) {
|
||||
return x.toString()
|
||||
}
|
||||
|
||||
return str.split(/(\\\\)/).filter(toS).reduce(function (a, s) {
|
||||
return a.concat(s.charAt(0) === '\\' ? s : s.split(
|
||||
/(\\*[{,}])/
|
||||
).filter(toS));
|
||||
}, []);
|
||||
return str
|
||||
.split(/(\\\\)/)
|
||||
.filter(toS)
|
||||
.reduce(function(a, s) {
|
||||
return a.concat(s.charAt(0) === "\\" ? s : s.split(/(\\*[{,}])/).filter(toS))
|
||||
}, [])
|
||||
}
|
||||
|
||||
// PARSE TREE OPERATOR (1 of 2)
|
||||
@ -278,76 +262,75 @@ function BraceExpander() {
|
||||
function and(args) {
|
||||
let lng = args.length,
|
||||
head = lng ? args[0] : null,
|
||||
lstHead = "string" === typeof head ? (
|
||||
[head]
|
||||
) : head;
|
||||
lstHead = "string" === typeof head ? [head] : head
|
||||
|
||||
return lng ? (
|
||||
1 < lng ? lstHead.reduce(function (a, h) {
|
||||
return a.concat(
|
||||
and(args.slice(1)).map(function (t) {
|
||||
return h + t;
|
||||
})
|
||||
);
|
||||
}, []) : lstHead
|
||||
) : [];
|
||||
return lng
|
||||
? 1 < lng
|
||||
? lstHead.reduce(function(a, h) {
|
||||
return a.concat(
|
||||
and(args.slice(1)).map(function(t) {
|
||||
return h + t
|
||||
})
|
||||
)
|
||||
}, [])
|
||||
: lstHead
|
||||
: []
|
||||
}
|
||||
|
||||
// PARSE TREE OPERATOR (2 of 2)
|
||||
// Each option flattened
|
||||
function or(args) {
|
||||
return args.reduce(function (a, b) {
|
||||
return a.concat(b);
|
||||
}, []);
|
||||
return args.reduce(function(a, b) {
|
||||
return a.concat(b)
|
||||
}, [])
|
||||
}
|
||||
|
||||
// One list split into two (first sublist length n)
|
||||
function splitAt(n, lst) {
|
||||
return n < lst.length + 1 ? [
|
||||
lst.slice(0, n), lst.slice(n)
|
||||
] : [lst, []];
|
||||
return n < lst.length + 1 ? [lst.slice(0, n), lst.slice(n)] : [lst, []]
|
||||
}
|
||||
|
||||
// One list split into several (sublist lengths [n])
|
||||
function splitsAt(lstN, lst) {
|
||||
return lstN.reduceRight(function (a, x) {
|
||||
return splitAt(x, a[0]).concat(a.slice(1));
|
||||
}, [lst]);
|
||||
return lstN.reduceRight(
|
||||
function(a, x) {
|
||||
return splitAt(x, a[0]).concat(a.slice(1))
|
||||
},
|
||||
[lst]
|
||||
)
|
||||
}
|
||||
|
||||
// Value of the parse tree
|
||||
function evaluated(e) {
|
||||
return typeof e === 'string' ? e :
|
||||
e.fn(e.args.map(evaluated));
|
||||
return typeof e === "string" ? e : e.fn(e.args.map(evaluated))
|
||||
}
|
||||
|
||||
// JSON prettyprint (for parse tree, token list etc)
|
||||
function pp(e) {
|
||||
return JSON.stringify(e, function (k, v) {
|
||||
return typeof v === 'function' ? (
|
||||
'[function ' + v.name + ']'
|
||||
) : v;
|
||||
}, 2)
|
||||
return JSON.stringify(
|
||||
e,
|
||||
function(k, v) {
|
||||
return typeof v === "function" ? "[function " + v.name + "]" : v
|
||||
},
|
||||
2
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
// ----------------------- MAIN ------------------------
|
||||
|
||||
// s -> [s]
|
||||
this.expand = function(s) {
|
||||
// BRACE EXPRESSION PARSED
|
||||
let dctParse = andTree(null, tokens(s))[0];
|
||||
let dctParse = andTree(null, tokens(s))[0]
|
||||
|
||||
// ABSTRACT SYNTAX TREE LOGGED
|
||||
// console.log(pp(dctParse));
|
||||
|
||||
// AST EVALUATED TO LIST OF STRINGS
|
||||
return evaluated(dctParse);
|
||||
return evaluated(dctParse)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/** Pause the execution of an async function until timer elapse.
|
||||
* @Returns a promise that will resolve after the specified timeout.
|
||||
*/
|
||||
@ -360,12 +343,12 @@ function asyncDelay(timeout) {
|
||||
function PromiseSource() {
|
||||
const srcPromise = new Promise((resolve, reject) => {
|
||||
Object.defineProperties(this, {
|
||||
resolve: { value: resolve, writable: false }
|
||||
, reject: { value: reject, writable: false }
|
||||
resolve: { value: resolve, writable: false },
|
||||
reject: { value: reject, writable: false },
|
||||
})
|
||||
})
|
||||
Object.defineProperties(this, {
|
||||
promise: {value: makeQuerablePromise(srcPromise), writable: false}
|
||||
promise: { value: makeQuerablePromise(srcPromise), writable: false },
|
||||
})
|
||||
}
|
||||
|
||||
@ -375,7 +358,7 @@ function PromiseSource() {
|
||||
* If `immediate` is passed, trigger the function on the leading edge, instead of the trailing.
|
||||
* @Returns a promise that will resolve to func return value.
|
||||
*/
|
||||
function debounce (func, wait, immediate) {
|
||||
function debounce(func, wait, immediate) {
|
||||
if (typeof wait === "undefined") {
|
||||
wait = 40
|
||||
}
|
||||
@ -399,11 +382,11 @@ function debounce (func, wait, immediate) {
|
||||
}
|
||||
return function(...args) {
|
||||
const callNow = Boolean(immediate && !timeout)
|
||||
const context = this;
|
||||
const context = this
|
||||
if (timeout) {
|
||||
clearTimeout(timeout)
|
||||
}
|
||||
timeout = setTimeout(function () {
|
||||
timeout = setTimeout(function() {
|
||||
if (!immediate) {
|
||||
applyFn(context, args)
|
||||
}
|
||||
@ -418,14 +401,14 @@ function debounce (func, wait, immediate) {
|
||||
}
|
||||
|
||||
function preventNonNumericalInput(e) {
|
||||
e = e || window.event;
|
||||
let charCode = (typeof e.which == "undefined") ? e.keyCode : e.which;
|
||||
let charStr = String.fromCharCode(charCode);
|
||||
let re = e.target.getAttribute('pattern') || '^[0-9]+$'
|
||||
e = e || window.event
|
||||
let charCode = typeof e.which == "undefined" ? e.keyCode : e.which
|
||||
let charStr = String.fromCharCode(charCode)
|
||||
let re = e.target.getAttribute("pattern") || "^[0-9]+$"
|
||||
re = new RegExp(re)
|
||||
|
||||
if (!charStr.match(re)) {
|
||||
e.preventDefault();
|
||||
e.preventDefault()
|
||||
}
|
||||
}
|
||||
|
||||
@ -434,15 +417,15 @@ function preventNonNumericalInput(e) {
|
||||
* @Notes Allows unit testing and use of the engine outside of a browser.
|
||||
*/
|
||||
function getGlobal() {
|
||||
if (typeof globalThis === 'object') {
|
||||
if (typeof globalThis === "object") {
|
||||
return globalThis
|
||||
} else if (typeof global === 'object') {
|
||||
} else if (typeof global === "object") {
|
||||
return global
|
||||
} else if (typeof self === 'object') {
|
||||
} else if (typeof self === "object") {
|
||||
return self
|
||||
}
|
||||
try {
|
||||
return Function('return this')()
|
||||
return Function("return this")()
|
||||
} catch {
|
||||
// If the Function constructor fails, we're in a browser with eval disabled by CSP headers.
|
||||
return window
|
||||
@ -453,18 +436,18 @@ function getGlobal() {
|
||||
* @Returns true if x is an Array or a TypedArray, false otherwise.
|
||||
*/
|
||||
function isArrayOrTypedArray(x) {
|
||||
return Boolean(typeof x === 'object' && (Array.isArray(x) || (ArrayBuffer.isView(x) && !(x instanceof DataView))))
|
||||
return Boolean(typeof x === "object" && (Array.isArray(x) || (ArrayBuffer.isView(x) && !(x instanceof DataView))))
|
||||
}
|
||||
|
||||
function makeQuerablePromise(promise) {
|
||||
if (typeof promise !== 'object') {
|
||||
throw new Error('promise is not an object.')
|
||||
if (typeof promise !== "object") {
|
||||
throw new Error("promise is not an object.")
|
||||
}
|
||||
if (!(promise instanceof Promise)) {
|
||||
throw new Error('Argument is not a promise.')
|
||||
throw new Error("Argument is not a promise.")
|
||||
}
|
||||
// Don't modify a promise that's been already modified.
|
||||
if ('isResolved' in promise || 'isRejected' in promise || 'isPending' in promise) {
|
||||
if ("isResolved" in promise || "isRejected" in promise || "isPending" in promise) {
|
||||
return promise
|
||||
}
|
||||
let isPending = true
|
||||
@ -473,13 +456,13 @@ function makeQuerablePromise(promise) {
|
||||
let isResolved = false
|
||||
let resolvedValue = undefined
|
||||
const qurPro = promise.then(
|
||||
function(val){
|
||||
function(val) {
|
||||
isResolved = true
|
||||
isPending = false
|
||||
resolvedValue = val
|
||||
return val
|
||||
}
|
||||
, function(reason) {
|
||||
},
|
||||
function(reason) {
|
||||
rejectReason = reason
|
||||
isRejected = true
|
||||
isPending = false
|
||||
@ -487,46 +470,46 @@ function makeQuerablePromise(promise) {
|
||||
}
|
||||
)
|
||||
Object.defineProperties(qurPro, {
|
||||
'isResolved': {
|
||||
get: () => isResolved
|
||||
}
|
||||
, 'resolvedValue': {
|
||||
get: () => resolvedValue
|
||||
}
|
||||
, 'isPending': {
|
||||
get: () => isPending
|
||||
}
|
||||
, 'isRejected': {
|
||||
get: () => isRejected
|
||||
}
|
||||
, 'rejectReason': {
|
||||
get: () => rejectReason
|
||||
}
|
||||
isResolved: {
|
||||
get: () => isResolved,
|
||||
},
|
||||
resolvedValue: {
|
||||
get: () => resolvedValue,
|
||||
},
|
||||
isPending: {
|
||||
get: () => isPending,
|
||||
},
|
||||
isRejected: {
|
||||
get: () => isRejected,
|
||||
},
|
||||
rejectReason: {
|
||||
get: () => rejectReason,
|
||||
},
|
||||
})
|
||||
return qurPro
|
||||
}
|
||||
|
||||
/* inserts custom html to allow prettifying of inputs */
|
||||
function prettifyInputs(root_element) {
|
||||
root_element.querySelectorAll(`input[type="checkbox"]`).forEach(element => {
|
||||
root_element.querySelectorAll(`input[type="checkbox"]`).forEach((element) => {
|
||||
if (element.style.display === "none") {
|
||||
return
|
||||
}
|
||||
var parent = element.parentNode;
|
||||
var parent = element.parentNode
|
||||
if (!parent.classList.contains("input-toggle")) {
|
||||
var wrapper = document.createElement("div");
|
||||
wrapper.classList.add("input-toggle");
|
||||
parent.replaceChild(wrapper, element);
|
||||
wrapper.appendChild(element);
|
||||
var label = document.createElement("label");
|
||||
label.htmlFor = element.id;
|
||||
wrapper.appendChild(label);
|
||||
var wrapper = document.createElement("div")
|
||||
wrapper.classList.add("input-toggle")
|
||||
parent.replaceChild(wrapper, element)
|
||||
wrapper.appendChild(element)
|
||||
var label = document.createElement("label")
|
||||
label.htmlFor = element.id
|
||||
wrapper.appendChild(label)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
class GenericEventSource {
|
||||
#events = {};
|
||||
#events = {}
|
||||
#types = []
|
||||
constructor(...eventsTypes) {
|
||||
if (Array.isArray(eventsTypes) && eventsTypes.length === 1 && Array.isArray(eventsTypes[0])) {
|
||||
@ -541,7 +524,7 @@ class GenericEventSource {
|
||||
*/
|
||||
addEventListener(name, handler) {
|
||||
if (!this.#types.includes(name)) {
|
||||
throw new Error('Invalid event name.')
|
||||
throw new Error("Invalid event name.")
|
||||
}
|
||||
if (this.#events.hasOwnProperty(name)) {
|
||||
this.#events[name].push(handler)
|
||||
@ -574,13 +557,15 @@ class GenericEventSource {
|
||||
if (evs.length <= 0) {
|
||||
return Promise.resolve()
|
||||
}
|
||||
return Promise.allSettled(evs.map((callback) => {
|
||||
try {
|
||||
return Promise.resolve(callback.apply(SD, args))
|
||||
} catch (ex) {
|
||||
return Promise.reject(ex)
|
||||
}
|
||||
}))
|
||||
return Promise.allSettled(
|
||||
evs.map((callback) => {
|
||||
try {
|
||||
return Promise.resolve(callback.apply(SD, args))
|
||||
} catch (ex) {
|
||||
return Promise.reject(ex)
|
||||
}
|
||||
})
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@ -590,7 +575,7 @@ class ServiceContainer {
|
||||
constructor(...servicesParams) {
|
||||
servicesParams.forEach(this.register.bind(this))
|
||||
}
|
||||
get services () {
|
||||
get services() {
|
||||
return this.#services
|
||||
}
|
||||
get singletons() {
|
||||
@ -598,54 +583,52 @@ class ServiceContainer {
|
||||
}
|
||||
register(params) {
|
||||
if (ServiceContainer.isConstructor(params)) {
|
||||
if (typeof params.name !== 'string') {
|
||||
throw new Error('params.name is not a string.')
|
||||
if (typeof params.name !== "string") {
|
||||
throw new Error("params.name is not a string.")
|
||||
}
|
||||
params = {name:params.name, definition:params}
|
||||
params = { name: params.name, definition: params }
|
||||
}
|
||||
if (typeof params !== 'object') {
|
||||
throw new Error('params is not an object.')
|
||||
if (typeof params !== "object") {
|
||||
throw new Error("params is not an object.")
|
||||
}
|
||||
[ 'name',
|
||||
'definition',
|
||||
].forEach((key) => {
|
||||
;["name", "definition"].forEach((key) => {
|
||||
if (!(key in params)) {
|
||||
console.error('Invalid service %o registration.', params)
|
||||
console.error("Invalid service %o registration.", params)
|
||||
throw new Error(`params.${key} is not defined.`)
|
||||
}
|
||||
})
|
||||
const opts = {definition: params.definition}
|
||||
if ('dependencies' in params) {
|
||||
const opts = { definition: params.definition }
|
||||
if ("dependencies" in params) {
|
||||
if (Array.isArray(params.dependencies)) {
|
||||
params.dependencies.forEach((dep) => {
|
||||
if (typeof dep !== 'string') {
|
||||
throw new Error('dependency name is not a string.')
|
||||
if (typeof dep !== "string") {
|
||||
throw new Error("dependency name is not a string.")
|
||||
}
|
||||
})
|
||||
opts.dependencies = params.dependencies
|
||||
} else {
|
||||
throw new Error('params.dependencies is not an array.')
|
||||
throw new Error("params.dependencies is not an array.")
|
||||
}
|
||||
}
|
||||
if (params.singleton) {
|
||||
opts.singleton = true
|
||||
}
|
||||
this.#services.set(params.name, opts)
|
||||
return Object.assign({name: params.name}, opts)
|
||||
return Object.assign({ name: params.name }, opts)
|
||||
}
|
||||
get(name) {
|
||||
const ctorInfos = this.#services.get(name)
|
||||
if (!ctorInfos) {
|
||||
return
|
||||
}
|
||||
if(!ServiceContainer.isConstructor(ctorInfos.definition)) {
|
||||
if (!ServiceContainer.isConstructor(ctorInfos.definition)) {
|
||||
return ctorInfos.definition
|
||||
}
|
||||
if(!ctorInfos.singleton) {
|
||||
if (!ctorInfos.singleton) {
|
||||
return this._createInstance(ctorInfos)
|
||||
}
|
||||
const singletonInstance = this.#singletons.get(name)
|
||||
if(singletonInstance) {
|
||||
if (singletonInstance) {
|
||||
return singletonInstance
|
||||
}
|
||||
const newSingletonInstance = this._createInstance(ctorInfos)
|
||||
@ -655,7 +638,7 @@ class ServiceContainer {
|
||||
|
||||
_getResolvedDependencies(service) {
|
||||
let classDependencies = []
|
||||
if(service.dependencies) {
|
||||
if (service.dependencies) {
|
||||
classDependencies = service.dependencies.map(this.get.bind(this))
|
||||
}
|
||||
return classDependencies
|
||||
@ -671,10 +654,14 @@ class ServiceContainer {
|
||||
}
|
||||
|
||||
static isClass(definition) {
|
||||
return typeof definition === 'function' && Boolean(definition.prototype) && definition.prototype.constructor === definition
|
||||
return (
|
||||
typeof definition === "function" &&
|
||||
Boolean(definition.prototype) &&
|
||||
definition.prototype.constructor === definition
|
||||
)
|
||||
}
|
||||
static isConstructor(definition) {
|
||||
return typeof definition === 'function'
|
||||
return typeof definition === "function"
|
||||
}
|
||||
}
|
||||
|
||||
@ -693,14 +680,14 @@ function createElement(tagName, attributes, classes, textOrElements) {
|
||||
if (value !== undefined && value !== null) {
|
||||
element.setAttribute(key, value)
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
if (classes) {
|
||||
(Array.isArray(classes) ? classes : [classes]).forEach(className => element.classList.add(className))
|
||||
;(Array.isArray(classes) ? classes : [classes]).forEach((className) => element.classList.add(className))
|
||||
}
|
||||
if (textOrElements) {
|
||||
const children = Array.isArray(textOrElements) ? textOrElements : [textOrElements]
|
||||
children.forEach(textOrElem => {
|
||||
children.forEach((textOrElem) => {
|
||||
if (textOrElem instanceof Node) {
|
||||
element.appendChild(textOrElem)
|
||||
} else {
|
||||
@ -750,33 +737,33 @@ Array.prototype.addEventListener = function(method, callback) {
|
||||
/**
|
||||
* @param {CreateTabRequest} request
|
||||
*/
|
||||
function createTab(request) {
|
||||
function createTab(request) {
|
||||
if (!request?.id) {
|
||||
console.error('createTab() error - id is required', Error().stack)
|
||||
console.error("createTab() error - id is required", Error().stack)
|
||||
return
|
||||
}
|
||||
|
||||
if (!request.label) {
|
||||
console.error('createTab() error - label is required', Error().stack)
|
||||
console.error("createTab() error - label is required", Error().stack)
|
||||
return
|
||||
}
|
||||
|
||||
if (!request.icon) {
|
||||
console.error('createTab() error - icon is required', Error().stack)
|
||||
console.error("createTab() error - icon is required", Error().stack)
|
||||
return
|
||||
}
|
||||
|
||||
if (!request.content && !request.onOpen) {
|
||||
console.error('createTab() error - content or onOpen required', Error().stack)
|
||||
console.error("createTab() error - content or onOpen required", Error().stack)
|
||||
return
|
||||
}
|
||||
|
||||
const tabsContainer = document.querySelector('.tab-container')
|
||||
const tabsContainer = document.querySelector(".tab-container")
|
||||
if (!tabsContainer) {
|
||||
return
|
||||
}
|
||||
|
||||
const tabsContentWrapper = document.querySelector('#tab-content-wrapper')
|
||||
const tabsContentWrapper = document.querySelector("#tab-content-wrapper")
|
||||
if (!tabsContentWrapper) {
|
||||
return
|
||||
}
|
||||
@ -784,41 +771,37 @@ Array.prototype.addEventListener = function(method, callback) {
|
||||
// console.debug('creating tab: ', request)
|
||||
|
||||
if (request.css) {
|
||||
document.querySelector('body').insertAdjacentElement(
|
||||
'beforeend',
|
||||
createElement('style', { id: `tab-${request.id}-css` }, undefined, request.css),
|
||||
)
|
||||
document
|
||||
.querySelector("body")
|
||||
.insertAdjacentElement(
|
||||
"beforeend",
|
||||
createElement("style", { id: `tab-${request.id}-css` }, undefined, request.css)
|
||||
)
|
||||
}
|
||||
|
||||
const label = typeof request.label === 'function' ? request.label() : request.label
|
||||
const labelElement = label instanceof Node ? label : createElement('span', undefined, undefined, label)
|
||||
const label = typeof request.label === "function" ? request.label() : request.label
|
||||
const labelElement = label instanceof Node ? label : createElement("span", undefined, undefined, label)
|
||||
|
||||
const tab = createElement(
|
||||
'span',
|
||||
{ id: `tab-${request.id}`, 'data-times-opened': 0 },
|
||||
['tab'],
|
||||
createElement(
|
||||
'span',
|
||||
undefined,
|
||||
undefined,
|
||||
[
|
||||
createElement(
|
||||
'i',
|
||||
{ style: 'margin-right: 0.25em' },
|
||||
['fa-solid', `${request.icon.startsWith('fa-') ? '' : 'fa-'}${request.icon}`, 'icon'],
|
||||
),
|
||||
labelElement,
|
||||
],
|
||||
)
|
||||
"span",
|
||||
{ id: `tab-${request.id}`, "data-times-opened": 0 },
|
||||
["tab"],
|
||||
createElement("span", undefined, undefined, [
|
||||
createElement("i", { style: "margin-right: 0.25em" }, [
|
||||
"fa-solid",
|
||||
`${request.icon.startsWith("fa-") ? "" : "fa-"}${request.icon}`,
|
||||
"icon",
|
||||
]),
|
||||
labelElement,
|
||||
])
|
||||
)
|
||||
|
||||
tabsContainer.insertAdjacentElement("beforeend", tab)
|
||||
|
||||
tabsContainer.insertAdjacentElement('beforeend', tab)
|
||||
const wrapper = createElement("div", { id: request.id }, ["tab-content-inner"], "Loading..")
|
||||
|
||||
const wrapper = createElement('div', { id: request.id }, ['tab-content-inner'], 'Loading..')
|
||||
|
||||
const tabContent = createElement('div', { id: `tab-content-${request.id}` }, ['tab-content'], wrapper)
|
||||
tabsContentWrapper.insertAdjacentElement('beforeend', tabContent)
|
||||
const tabContent = createElement("div", { id: `tab-content-${request.id}` }, ["tab-content"], wrapper)
|
||||
tabsContentWrapper.insertAdjacentElement("beforeend", tabContent)
|
||||
|
||||
linkTabContents(tab)
|
||||
|
||||
@ -826,7 +809,7 @@ Array.prototype.addEventListener = function(method, callback) {
|
||||
if (resultFactory === undefined || resultFactory === null) {
|
||||
return
|
||||
}
|
||||
const result = typeof resultFactory === 'function' ? resultFactory() : resultFactory
|
||||
const result = typeof resultFactory === "function" ? resultFactory() : resultFactory
|
||||
if (result instanceof Promise) {
|
||||
result.then(replaceContent)
|
||||
} else if (result instanceof Node) {
|
||||
@ -838,7 +821,7 @@ Array.prototype.addEventListener = function(method, callback) {
|
||||
|
||||
replaceContent(request.content)
|
||||
|
||||
tab.addEventListener('click', (e) => {
|
||||
tab.addEventListener("click", (e) => {
|
||||
const timesOpened = +(tab.dataset.timesOpened || 0) + 1
|
||||
tab.dataset.timesOpened = timesOpened
|
||||
|
||||
@ -850,10 +833,67 @@ Array.prototype.addEventListener = function(method, callback) {
|
||||
timesOpened,
|
||||
firstOpen: timesOpened === 1,
|
||||
},
|
||||
e,
|
||||
e
|
||||
)
|
||||
|
||||
replaceContent(result)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/* TOAST NOTIFICATIONS */
|
||||
function showToast(message, duration = 5000, error = false) {
|
||||
const toast = document.createElement("div");
|
||||
toast.classList.add("toast-notification");
|
||||
if (error === true) {
|
||||
toast.classList.add("toast-notification-error");
|
||||
}
|
||||
toast.innerHTML = message;
|
||||
document.body.appendChild(toast);
|
||||
|
||||
// Set the position of the toast on the screen
|
||||
const toastCount = document.querySelectorAll(".toast-notification").length;
|
||||
const toastHeight = toast.offsetHeight;
|
||||
const previousToastsHeight = Array.from(document.querySelectorAll(".toast-notification"))
|
||||
.slice(0, -1) // exclude current toast
|
||||
.reduce((totalHeight, toast) => totalHeight + toast.offsetHeight + 10, 0); // add 10 pixels for spacing
|
||||
toast.style.bottom = `${10 + previousToastsHeight}px`;
|
||||
toast.style.right = "10px";
|
||||
|
||||
// Delay the removal of the toast until animation has completed
|
||||
const removeToast = () => {
|
||||
toast.classList.add("hide");
|
||||
const removeTimeoutId = setTimeout(() => {
|
||||
toast.remove();
|
||||
// Adjust the position of remaining toasts
|
||||
const remainingToasts = document.querySelectorAll(".toast-notification");
|
||||
const removedToastBottom = toast.getBoundingClientRect().bottom;
|
||||
|
||||
remainingToasts.forEach((toast) => {
|
||||
if (toast.getBoundingClientRect().bottom < removedToastBottom) {
|
||||
toast.classList.add("slide-down");
|
||||
}
|
||||
});
|
||||
|
||||
// Wait for the slide-down animation to complete
|
||||
setTimeout(() => {
|
||||
// Remove the slide-down class after the animation has completed
|
||||
const slidingToasts = document.querySelectorAll(".slide-down");
|
||||
slidingToasts.forEach((toast) => {
|
||||
toast.classList.remove("slide-down");
|
||||
});
|
||||
|
||||
// Adjust the position of remaining toasts again, in case there are multiple toasts being removed at once
|
||||
const remainingToastsDown = document.querySelectorAll(".toast-notification");
|
||||
let heightSoFar = 0;
|
||||
remainingToastsDown.forEach((toast) => {
|
||||
toast.style.bottom = `${10 + heightSoFar}px`;
|
||||
heightSoFar += toast.offsetHeight + 10; // add 10 pixels for spacing
|
||||
});
|
||||
}, 0); // The duration of the slide-down animation (in milliseconds)
|
||||
}, 500);
|
||||
};
|
||||
|
||||
// Remove the toast after specified duration
|
||||
setTimeout(removeToast, duration);
|
||||
}
|
||||
|
@ -1,28 +1,32 @@
|
||||
(function () {
|
||||
;(function() {
|
||||
"use strict"
|
||||
|
||||
let autoScroll = document.querySelector("#auto_scroll")
|
||||
|
||||
// observe for changes in the preview pane
|
||||
var observer = new MutationObserver(function (mutations) {
|
||||
mutations.forEach(function (mutation) {
|
||||
if (mutation.target.className == 'img-batch') {
|
||||
var observer = new MutationObserver(function(mutations) {
|
||||
mutations.forEach(function(mutation) {
|
||||
if (mutation.target.className == "img-batch") {
|
||||
Autoscroll(mutation.target)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
observer.observe(document.getElementById('preview'), {
|
||||
childList: true,
|
||||
subtree: true
|
||||
|
||||
observer.observe(document.getElementById("preview"), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
})
|
||||
|
||||
function Autoscroll(target) {
|
||||
if (autoScroll.checked && target !== null) {
|
||||
const img = target.querySelector('img')
|
||||
img.addEventListener('load', function() {
|
||||
img.closest('.imageTaskContainer').scrollIntoView()
|
||||
}, { once: true })
|
||||
const img = target.querySelector("img")
|
||||
img.addEventListener(
|
||||
"load",
|
||||
function() {
|
||||
img.closest(".imageTaskContainer").scrollIntoView()
|
||||
},
|
||||
{ once: true }
|
||||
)
|
||||
}
|
||||
}
|
||||
})()
|
||||
|
@ -1,93 +1,116 @@
|
||||
(function () { "use strict"
|
||||
if (typeof editorModifierTagsList !== 'object') {
|
||||
console.error('editorModifierTagsList missing...')
|
||||
;(function() {
|
||||
"use strict"
|
||||
if (typeof editorModifierTagsList !== "object") {
|
||||
console.error("editorModifierTagsList missing...")
|
||||
return
|
||||
}
|
||||
|
||||
const styleSheet = document.createElement("style");
|
||||
const styleSheet = document.createElement("style")
|
||||
styleSheet.textContent = `
|
||||
.modifier-card-tiny.drag-sort-active {
|
||||
background: transparent;
|
||||
border: 2px dashed white;
|
||||
opacity:0.2;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(styleSheet);
|
||||
`
|
||||
document.head.appendChild(styleSheet)
|
||||
|
||||
// observe for changes in tag list
|
||||
const observer = new MutationObserver(function (mutations) {
|
||||
// mutations.forEach(function (mutation) {
|
||||
if (editorModifierTagsList.childNodes.length > 0) {
|
||||
ModifierDragAndDrop(editorModifierTagsList)
|
||||
}
|
||||
// })
|
||||
const observer = new MutationObserver(function(mutations) {
|
||||
// mutations.forEach(function (mutation) {
|
||||
if (editorModifierTagsList.childNodes.length > 0) {
|
||||
ModifierDragAndDrop(editorModifierTagsList)
|
||||
}
|
||||
// })
|
||||
})
|
||||
|
||||
|
||||
observer.observe(editorModifierTagsList, {
|
||||
childList: true
|
||||
childList: true,
|
||||
})
|
||||
|
||||
let current
|
||||
function ModifierDragAndDrop(target) {
|
||||
let overlays = document.querySelector('#editor-inputs-tags-list').querySelectorAll('.modifier-card-overlay')
|
||||
overlays.forEach (i => {
|
||||
i.parentElement.draggable = true;
|
||||
|
||||
let overlays = document.querySelector("#editor-inputs-tags-list").querySelectorAll(".modifier-card-overlay")
|
||||
overlays.forEach((i) => {
|
||||
i.parentElement.draggable = true
|
||||
|
||||
i.parentElement.ondragstart = (e) => {
|
||||
current = i
|
||||
i.parentElement.getElementsByClassName('modifier-card-image-overlay')[0].innerText = ''
|
||||
i.parentElement.getElementsByClassName("modifier-card-image-overlay")[0].innerText = ""
|
||||
i.parentElement.draggable = true
|
||||
i.parentElement.classList.add('drag-sort-active')
|
||||
for(let item of document.querySelector('#editor-inputs-tags-list').getElementsByClassName('modifier-card-image-overlay')) {
|
||||
if (item.parentElement.parentElement.getElementsByClassName('modifier-card-overlay')[0] != current) {
|
||||
item.parentElement.parentElement.getElementsByClassName('modifier-card-image-overlay')[0].style.opacity = 0
|
||||
if(item.parentElement.getElementsByClassName('modifier-card-image').length > 0) {
|
||||
item.parentElement.getElementsByClassName('modifier-card-image')[0].style.filter = 'none'
|
||||
i.parentElement.classList.add("drag-sort-active")
|
||||
for (let item of document
|
||||
.querySelector("#editor-inputs-tags-list")
|
||||
.getElementsByClassName("modifier-card-image-overlay")) {
|
||||
if (
|
||||
item.parentElement.parentElement.getElementsByClassName("modifier-card-overlay")[0] != current
|
||||
) {
|
||||
item.parentElement.parentElement.getElementsByClassName(
|
||||
"modifier-card-image-overlay"
|
||||
)[0].style.opacity = 0
|
||||
if (item.parentElement.getElementsByClassName("modifier-card-image").length > 0) {
|
||||
item.parentElement.getElementsByClassName("modifier-card-image")[0].style.filter = "none"
|
||||
}
|
||||
item.parentElement.parentElement.style.transform = 'none'
|
||||
item.parentElement.parentElement.style.boxShadow = 'none'
|
||||
item.parentElement.parentElement.style.transform = "none"
|
||||
item.parentElement.parentElement.style.boxShadow = "none"
|
||||
}
|
||||
item.innerText = ''
|
||||
item.innerText = ""
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
i.ondragenter = (e) => {
|
||||
e.preventDefault()
|
||||
if (i != current) {
|
||||
let currentPos = 0, droppedPos = 0;
|
||||
let currentPos = 0,
|
||||
droppedPos = 0
|
||||
for (let it = 0; it < overlays.length; it++) {
|
||||
if (current == overlays[it]) { currentPos = it; }
|
||||
if (i == overlays[it]) { droppedPos = it; }
|
||||
if (current == overlays[it]) {
|
||||
currentPos = it
|
||||
}
|
||||
if (i == overlays[it]) {
|
||||
droppedPos = it
|
||||
}
|
||||
}
|
||||
|
||||
if (i.parentElement != current.parentElement) {
|
||||
let currentPos = 0, droppedPos = 0
|
||||
let currentPos = 0,
|
||||
droppedPos = 0
|
||||
for (let it = 0; it < overlays.length; it++) {
|
||||
if (current == overlays[it]) { currentPos = it }
|
||||
if (i == overlays[it]) { droppedPos = it }
|
||||
if (current == overlays[it]) {
|
||||
currentPos = it
|
||||
}
|
||||
if (i == overlays[it]) {
|
||||
droppedPos = it
|
||||
}
|
||||
}
|
||||
if (currentPos < droppedPos) {
|
||||
current = i.parentElement.parentNode.insertBefore(current.parentElement, i.parentElement.nextSibling).getElementsByClassName('modifier-card-overlay')[0]
|
||||
current = i.parentElement.parentNode
|
||||
.insertBefore(current.parentElement, i.parentElement.nextSibling)
|
||||
.getElementsByClassName("modifier-card-overlay")[0]
|
||||
} else {
|
||||
current = i.parentElement.parentNode.insertBefore(current.parentElement, i.parentElement).getElementsByClassName('modifier-card-overlay')[0]
|
||||
current = i.parentElement.parentNode
|
||||
.insertBefore(current.parentElement, i.parentElement)
|
||||
.getElementsByClassName("modifier-card-overlay")[0]
|
||||
}
|
||||
// update activeTags
|
||||
const tag = activeTags.splice(currentPos, 1)
|
||||
activeTags.splice(droppedPos, 0, tag[0])
|
||||
document.dispatchEvent(new Event('refreshImageModifiers'))
|
||||
document.dispatchEvent(new Event("refreshImageModifiers"))
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
i.ondragover = (e) => {
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
|
||||
i.parentElement.ondragend = (e) => {
|
||||
i.parentElement.classList.remove('drag-sort-active')
|
||||
for(let item of document.querySelector('#editor-inputs-tags-list').getElementsByClassName('modifier-card-image-overlay')) {
|
||||
item.style.opacity = ''
|
||||
item.innerText = '-'
|
||||
i.parentElement.classList.remove("drag-sort-active")
|
||||
for (let item of document
|
||||
.querySelector("#editor-inputs-tags-list")
|
||||
.getElementsByClassName("modifier-card-image-overlay")) {
|
||||
item.style.opacity = ""
|
||||
item.innerText = "-"
|
||||
}
|
||||
}
|
||||
})
|
||||
|
@ -1,35 +1,37 @@
|
||||
(function () {
|
||||
;(function() {
|
||||
"use strict"
|
||||
|
||||
const MAX_WEIGHT = 5
|
||||
|
||||
if (typeof editorModifierTagsList !== 'object') {
|
||||
console.error('editorModifierTagsList missing...')
|
||||
|
||||
if (typeof editorModifierTagsList !== "object") {
|
||||
console.error("editorModifierTagsList missing...")
|
||||
return
|
||||
}
|
||||
|
||||
// observe for changes in tag list
|
||||
const observer = new MutationObserver(function (mutations) {
|
||||
// mutations.forEach(function (mutation) {
|
||||
if (editorModifierTagsList.childNodes.length > 0) {
|
||||
ModifierMouseWheel(editorModifierTagsList)
|
||||
}
|
||||
// })
|
||||
const observer = new MutationObserver(function(mutations) {
|
||||
// mutations.forEach(function (mutation) {
|
||||
if (editorModifierTagsList.childNodes.length > 0) {
|
||||
ModifierMouseWheel(editorModifierTagsList)
|
||||
}
|
||||
// })
|
||||
})
|
||||
|
||||
|
||||
observer.observe(editorModifierTagsList, {
|
||||
childList: true
|
||||
childList: true,
|
||||
})
|
||||
|
||||
function ModifierMouseWheel(target) {
|
||||
let overlays = document.querySelector('#editor-inputs-tags-list').querySelectorAll('.modifier-card-overlay')
|
||||
overlays.forEach (i => {
|
||||
let overlays = document.querySelector("#editor-inputs-tags-list").querySelectorAll(".modifier-card-overlay")
|
||||
overlays.forEach((i) => {
|
||||
i.onwheel = (e) => {
|
||||
if (e.ctrlKey == true) {
|
||||
e.preventDefault()
|
||||
|
||||
|
||||
const delta = Math.sign(event.deltaY)
|
||||
let s = i.parentElement.getElementsByClassName('modifier-card-label')[0].getElementsByTagName("p")[0].innerText
|
||||
let s = i.parentElement
|
||||
.getElementsByClassName("modifier-card-label")[0]
|
||||
.getElementsByTagName("p")[0].innerText
|
||||
let t
|
||||
// find the corresponding tag
|
||||
for (let it = 0; it < overlays.length; it++) {
|
||||
@ -38,43 +40,40 @@
|
||||
break
|
||||
}
|
||||
}
|
||||
if (s.charAt(0) !== '(' && s.charAt(s.length - 1) !== ')' && s.trim().includes(' ')) {
|
||||
s = '(' + s + ')'
|
||||
t = '(' + t + ')'
|
||||
if (s.charAt(0) !== "(" && s.charAt(s.length - 1) !== ")" && s.trim().includes(" ")) {
|
||||
s = "(" + s + ")"
|
||||
t = "(" + t + ")"
|
||||
}
|
||||
if (delta < 0) {
|
||||
// wheel scrolling up
|
||||
if (s.substring(s.length - 1) == '-') {
|
||||
if (s.substring(s.length - 1) == "-") {
|
||||
s = s.substring(0, s.length - 1)
|
||||
t = t.substring(0, t.length - 1)
|
||||
}
|
||||
else
|
||||
{
|
||||
if (s.substring(s.length - MAX_WEIGHT) !== '+'.repeat(MAX_WEIGHT)) {
|
||||
s = s + '+'
|
||||
t = t + '+'
|
||||
} else {
|
||||
if (s.substring(s.length - MAX_WEIGHT) !== "+".repeat(MAX_WEIGHT)) {
|
||||
s = s + "+"
|
||||
t = t + "+"
|
||||
}
|
||||
}
|
||||
}
|
||||
else{
|
||||
} else {
|
||||
// wheel scrolling down
|
||||
if (s.substring(s.length - 1) == '+') {
|
||||
if (s.substring(s.length - 1) == "+") {
|
||||
s = s.substring(0, s.length - 1)
|
||||
t = t.substring(0, t.length - 1)
|
||||
}
|
||||
else
|
||||
{
|
||||
if (s.substring(s.length - MAX_WEIGHT) !== '-'.repeat(MAX_WEIGHT)) {
|
||||
s = s + '-'
|
||||
t = t + '-'
|
||||
} else {
|
||||
if (s.substring(s.length - MAX_WEIGHT) !== "-".repeat(MAX_WEIGHT)) {
|
||||
s = s + "-"
|
||||
t = t + "-"
|
||||
}
|
||||
}
|
||||
}
|
||||
if (s.charAt(0) === '(' && s.charAt(s.length - 1) === ')') {
|
||||
if (s.charAt(0) === "(" && s.charAt(s.length - 1) === ")") {
|
||||
s = s.substring(1, s.length - 1)
|
||||
t = t.substring(1, t.length - 1)
|
||||
}
|
||||
i.parentElement.getElementsByClassName('modifier-card-label')[0].getElementsByTagName("p")[0].innerText = s
|
||||
i.parentElement
|
||||
.getElementsByClassName("modifier-card-label")[0]
|
||||
.getElementsByTagName("p")[0].innerText = s
|
||||
// update activeTags
|
||||
for (let it = 0; it < overlays.length; it++) {
|
||||
if (i == overlays[it]) {
|
||||
@ -82,7 +81,7 @@
|
||||
break
|
||||
}
|
||||
}
|
||||
document.dispatchEvent(new Event('refreshImageModifiers'))
|
||||
document.dispatchEvent(new Event("refreshImageModifiers"))
|
||||
}
|
||||
}
|
||||
})
|
||||
|
@ -1,31 +1,31 @@
|
||||
(function() {
|
||||
PLUGINS['MODIFIERS_LOAD'].push({
|
||||
;(function() {
|
||||
PLUGINS["MODIFIERS_LOAD"].push({
|
||||
loader: function() {
|
||||
let customModifiers = localStorage.getItem(CUSTOM_MODIFIERS_KEY, '')
|
||||
let customModifiers = localStorage.getItem(CUSTOM_MODIFIERS_KEY, "")
|
||||
customModifiersTextBox.value = customModifiers
|
||||
|
||||
if (customModifiersGroupElement !== undefined) {
|
||||
customModifiersGroupElement.remove()
|
||||
}
|
||||
|
||||
if (customModifiers && customModifiers.trim() !== '') {
|
||||
customModifiers = customModifiers.split('\n')
|
||||
customModifiers = customModifiers.filter(m => m.trim() !== '')
|
||||
if (customModifiers && customModifiers.trim() !== "") {
|
||||
customModifiers = customModifiers.split("\n")
|
||||
customModifiers = customModifiers.filter((m) => m.trim() !== "")
|
||||
customModifiers = customModifiers.map(function(m) {
|
||||
return {
|
||||
"modifier": m
|
||||
modifier: m,
|
||||
}
|
||||
})
|
||||
|
||||
let customGroup = {
|
||||
'category': 'Custom Modifiers',
|
||||
'modifiers': customModifiers
|
||||
category: "Custom Modifiers",
|
||||
modifiers: customModifiers,
|
||||
}
|
||||
|
||||
customModifiersGroupElement = createModifierGroup(customGroup, true)
|
||||
|
||||
createCollapsibles(customModifiersGroupElement)
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
})()
|
||||
|
@ -26,39 +26,39 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
after `jasmine.js` and `jasmine_html.js`, but before `boot1.js` or any project
|
||||
source files or spec files are loaded.
|
||||
*/
|
||||
(function() {
|
||||
const jasmineRequire = window.jasmineRequire || require('./jasmine.js');
|
||||
;(function() {
|
||||
const jasmineRequire = window.jasmineRequire || require("./jasmine.js")
|
||||
|
||||
/**
|
||||
* ## Require & Instantiate
|
||||
*
|
||||
* Require Jasmine's core files. Specifically, this requires and attaches all of Jasmine's code to the `jasmine` reference.
|
||||
*/
|
||||
const jasmine = jasmineRequire.core(jasmineRequire),
|
||||
global = jasmine.getGlobal();
|
||||
global.jasmine = jasmine;
|
||||
/**
|
||||
* ## Require & Instantiate
|
||||
*
|
||||
* Require Jasmine's core files. Specifically, this requires and attaches all of Jasmine's code to the `jasmine` reference.
|
||||
*/
|
||||
const jasmine = jasmineRequire.core(jasmineRequire),
|
||||
global = jasmine.getGlobal()
|
||||
global.jasmine = jasmine
|
||||
|
||||
/**
|
||||
* Since this is being run in a browser and the results should populate to an HTML page, require the HTML-specific Jasmine code, injecting the same reference.
|
||||
*/
|
||||
jasmineRequire.html(jasmine);
|
||||
/**
|
||||
* Since this is being run in a browser and the results should populate to an HTML page, require the HTML-specific Jasmine code, injecting the same reference.
|
||||
*/
|
||||
jasmineRequire.html(jasmine)
|
||||
|
||||
/**
|
||||
* Create the Jasmine environment. This is used to run all specs in a project.
|
||||
*/
|
||||
const env = jasmine.getEnv();
|
||||
/**
|
||||
* Create the Jasmine environment. This is used to run all specs in a project.
|
||||
*/
|
||||
const env = jasmine.getEnv()
|
||||
|
||||
/**
|
||||
* ## The Global Interface
|
||||
*
|
||||
* Build up the functions that will be exposed as the Jasmine public interface. A project can customize, rename or alias any of these functions as desired, provided the implementation remains unchanged.
|
||||
*/
|
||||
const jasmineInterface = jasmineRequire.interface(jasmine, env);
|
||||
/**
|
||||
* ## The Global Interface
|
||||
*
|
||||
* Build up the functions that will be exposed as the Jasmine public interface. A project can customize, rename or alias any of these functions as desired, provided the implementation remains unchanged.
|
||||
*/
|
||||
const jasmineInterface = jasmineRequire.interface(jasmine, env)
|
||||
|
||||
/**
|
||||
* Add all of the Jasmine global/public interface to the global scope, so a project can use the public interface directly. For example, calling `describe` in specs instead of `jasmine.getEnv().describe`.
|
||||
*/
|
||||
for (const property in jasmineInterface) {
|
||||
global[property] = jasmineInterface[property];
|
||||
}
|
||||
})();
|
||||
/**
|
||||
* Add all of the Jasmine global/public interface to the global scope, so a project can use the public interface directly. For example, calling `describe` in specs instead of `jasmine.getEnv().describe`.
|
||||
*/
|
||||
for (const property in jasmineInterface) {
|
||||
global[property] = jasmineInterface[property]
|
||||
}
|
||||
})()
|
||||
|
@ -33,100 +33,98 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
after `boot0.js` is loaded and before this file is loaded.
|
||||
*/
|
||||
|
||||
(function() {
|
||||
const env = jasmine.getEnv();
|
||||
;(function() {
|
||||
const env = jasmine.getEnv()
|
||||
|
||||
/**
|
||||
* ## Runner Parameters
|
||||
*
|
||||
* More browser specific code - wrap the query string in an object and to allow for getting/setting parameters from the runner user interface.
|
||||
*/
|
||||
/**
|
||||
* ## Runner Parameters
|
||||
*
|
||||
* More browser specific code - wrap the query string in an object and to allow for getting/setting parameters from the runner user interface.
|
||||
*/
|
||||
|
||||
const queryString = new jasmine.QueryString({
|
||||
getWindowLocation: function() {
|
||||
return window.location;
|
||||
const queryString = new jasmine.QueryString({
|
||||
getWindowLocation: function() {
|
||||
return window.location
|
||||
},
|
||||
})
|
||||
|
||||
const filterSpecs = !!queryString.getParam("spec")
|
||||
|
||||
const config = {
|
||||
stopOnSpecFailure: queryString.getParam("stopOnSpecFailure"),
|
||||
stopSpecOnExpectationFailure: queryString.getParam("stopSpecOnExpectationFailure"),
|
||||
hideDisabled: queryString.getParam("hideDisabled"),
|
||||
}
|
||||
});
|
||||
|
||||
const filterSpecs = !!queryString.getParam('spec');
|
||||
const random = queryString.getParam("random")
|
||||
|
||||
const config = {
|
||||
stopOnSpecFailure: queryString.getParam('stopOnSpecFailure'),
|
||||
stopSpecOnExpectationFailure: queryString.getParam(
|
||||
'stopSpecOnExpectationFailure'
|
||||
),
|
||||
hideDisabled: queryString.getParam('hideDisabled')
|
||||
};
|
||||
|
||||
const random = queryString.getParam('random');
|
||||
|
||||
if (random !== undefined && random !== '') {
|
||||
config.random = random;
|
||||
}
|
||||
|
||||
const seed = queryString.getParam('seed');
|
||||
if (seed) {
|
||||
config.seed = seed;
|
||||
}
|
||||
|
||||
/**
|
||||
* ## Reporters
|
||||
* The `HtmlReporter` builds all of the HTML UI for the runner page. This reporter paints the dots, stars, and x's for specs, as well as all spec names and all failures (if any).
|
||||
*/
|
||||
const htmlReporter = new jasmine.HtmlReporter({
|
||||
env: env,
|
||||
navigateWithNewParam: function(key, value) {
|
||||
return queryString.navigateWithNewParam(key, value);
|
||||
},
|
||||
addToExistingQueryString: function(key, value) {
|
||||
return queryString.fullStringWithNewParam(key, value);
|
||||
},
|
||||
getContainer: function() {
|
||||
return document.body;
|
||||
},
|
||||
createElement: function() {
|
||||
return document.createElement.apply(document, arguments);
|
||||
},
|
||||
createTextNode: function() {
|
||||
return document.createTextNode.apply(document, arguments);
|
||||
},
|
||||
timer: new jasmine.Timer(),
|
||||
filterSpecs: filterSpecs
|
||||
});
|
||||
|
||||
/**
|
||||
* The `jsApiReporter` also receives spec results, and is used by any environment that needs to extract the results from JavaScript.
|
||||
*/
|
||||
env.addReporter(jsApiReporter);
|
||||
env.addReporter(htmlReporter);
|
||||
|
||||
/**
|
||||
* Filter which specs will be run by matching the start of the full name against the `spec` query param.
|
||||
*/
|
||||
const specFilter = new jasmine.HtmlSpecFilter({
|
||||
filterString: function() {
|
||||
return queryString.getParam('spec');
|
||||
if (random !== undefined && random !== "") {
|
||||
config.random = random
|
||||
}
|
||||
});
|
||||
|
||||
config.specFilter = function(spec) {
|
||||
return specFilter.matches(spec.getFullName());
|
||||
};
|
||||
|
||||
env.configure(config);
|
||||
|
||||
/**
|
||||
* ## Execution
|
||||
*
|
||||
* Replace the browser window's `onload`, ensure it's called, and then run all of the loaded specs. This includes initializing the `HtmlReporter` instance and then executing the loaded Jasmine environment. All of this will happen after all of the specs are loaded.
|
||||
*/
|
||||
const currentWindowOnload = window.onload;
|
||||
|
||||
window.onload = function() {
|
||||
if (currentWindowOnload) {
|
||||
currentWindowOnload();
|
||||
const seed = queryString.getParam("seed")
|
||||
if (seed) {
|
||||
config.seed = seed
|
||||
}
|
||||
htmlReporter.initialize();
|
||||
env.execute();
|
||||
};
|
||||
})();
|
||||
|
||||
/**
|
||||
* ## Reporters
|
||||
* The `HtmlReporter` builds all of the HTML UI for the runner page. This reporter paints the dots, stars, and x's for specs, as well as all spec names and all failures (if any).
|
||||
*/
|
||||
const htmlReporter = new jasmine.HtmlReporter({
|
||||
env: env,
|
||||
navigateWithNewParam: function(key, value) {
|
||||
return queryString.navigateWithNewParam(key, value)
|
||||
},
|
||||
addToExistingQueryString: function(key, value) {
|
||||
return queryString.fullStringWithNewParam(key, value)
|
||||
},
|
||||
getContainer: function() {
|
||||
return document.body
|
||||
},
|
||||
createElement: function() {
|
||||
return document.createElement.apply(document, arguments)
|
||||
},
|
||||
createTextNode: function() {
|
||||
return document.createTextNode.apply(document, arguments)
|
||||
},
|
||||
timer: new jasmine.Timer(),
|
||||
filterSpecs: filterSpecs,
|
||||
})
|
||||
|
||||
/**
|
||||
* The `jsApiReporter` also receives spec results, and is used by any environment that needs to extract the results from JavaScript.
|
||||
*/
|
||||
env.addReporter(jsApiReporter)
|
||||
env.addReporter(htmlReporter)
|
||||
|
||||
/**
|
||||
* Filter which specs will be run by matching the start of the full name against the `spec` query param.
|
||||
*/
|
||||
const specFilter = new jasmine.HtmlSpecFilter({
|
||||
filterString: function() {
|
||||
return queryString.getParam("spec")
|
||||
},
|
||||
})
|
||||
|
||||
config.specFilter = function(spec) {
|
||||
return specFilter.matches(spec.getFullName())
|
||||
}
|
||||
|
||||
env.configure(config)
|
||||
|
||||
/**
|
||||
* ## Execution
|
||||
*
|
||||
* Replace the browser window's `onload`, ensure it's called, and then run all of the loaded specs. This includes initializing the `HtmlReporter` instance and then executing the loaded Jasmine environment. All of this will happen after all of the specs are loaded.
|
||||
*/
|
||||
const currentWindowOnload = window.onload
|
||||
|
||||
window.onload = function() {
|
||||
if (currentWindowOnload) {
|
||||
currentWindowOnload()
|
||||
}
|
||||
htmlReporter.initialize()
|
||||
env.execute()
|
||||
}
|
||||
})()
|
||||
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -2,34 +2,34 @@
|
||||
|
||||
const JASMINE_SESSION_ID = `jasmine-${String(Date.now()).slice(8)}`
|
||||
|
||||
beforeEach(function () {
|
||||
beforeEach(function() {
|
||||
jasmine.DEFAULT_TIMEOUT_INTERVAL = 15 * 60 * 1000 // Test timeout after 15 minutes
|
||||
jasmine.addMatchers({
|
||||
toBeOneOf: function () {
|
||||
toBeOneOf: function() {
|
||||
return {
|
||||
compare: function (actual, expected) {
|
||||
compare: function(actual, expected) {
|
||||
return {
|
||||
pass: expected.includes(actual)
|
||||
pass: expected.includes(actual),
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
})
|
||||
describe('stable-diffusion-ui', function() {
|
||||
describe("stable-diffusion-ui", function() {
|
||||
beforeEach(function() {
|
||||
expect(typeof SD).toBe('object')
|
||||
expect(typeof SD.serverState).toBe('object')
|
||||
expect(typeof SD.serverState.status).toBe('string')
|
||||
expect(typeof SD).toBe("object")
|
||||
expect(typeof SD.serverState).toBe("object")
|
||||
expect(typeof SD.serverState.status).toBe("string")
|
||||
})
|
||||
it('should be able to reach the backend', async function() {
|
||||
it("should be able to reach the backend", async function() {
|
||||
expect(SD.serverState.status).toBe(SD.ServerStates.unavailable)
|
||||
SD.sessionId = JASMINE_SESSION_ID
|
||||
await SD.init()
|
||||
expect(SD.isServerAvailable()).toBeTrue()
|
||||
})
|
||||
|
||||
it('enfore the current task state', function() {
|
||||
it("enfore the current task state", function() {
|
||||
const task = new SD.Task()
|
||||
expect(task.status).toBe(SD.TaskStatus.init)
|
||||
expect(task.isPending).toBeTrue()
|
||||
@ -65,149 +65,161 @@ describe('stable-diffusion-ui', function() {
|
||||
task._setStatus(SD.TaskStatus.completed)
|
||||
}).toThrowError()
|
||||
})
|
||||
it('should be able to run tasks', async function() {
|
||||
expect(typeof SD.Task.run).toBe('function')
|
||||
it("should be able to run tasks", async function() {
|
||||
expect(typeof SD.Task.run).toBe("function")
|
||||
const promiseGenerator = (function*(val) {
|
||||
expect(val).toBe('start')
|
||||
expect(val).toBe("start")
|
||||
expect(yield 1 + 1).toBe(4)
|
||||
expect(yield 2 + 2).toBe(8)
|
||||
yield asyncDelay(500)
|
||||
expect(yield 3 + 3).toBe(12)
|
||||
expect(yield 4 + 4).toBe(16)
|
||||
return 8 + 8
|
||||
})('start')
|
||||
const callback = function({value, done}) {
|
||||
return {value: 2 * value, done}
|
||||
})("start")
|
||||
const callback = function({ value, done }) {
|
||||
return { value: 2 * value, done }
|
||||
}
|
||||
expect(await SD.Task.run(promiseGenerator, {callback})).toBe(32)
|
||||
expect(await SD.Task.run(promiseGenerator, { callback })).toBe(32)
|
||||
})
|
||||
it('should be able to queue tasks', async function() {
|
||||
expect(typeof SD.Task.enqueue).toBe('function')
|
||||
it("should be able to queue tasks", async function() {
|
||||
expect(typeof SD.Task.enqueue).toBe("function")
|
||||
const promiseGenerator = (function*(val) {
|
||||
expect(val).toBe('start')
|
||||
expect(val).toBe("start")
|
||||
expect(yield 1 + 1).toBe(4)
|
||||
expect(yield 2 + 2).toBe(8)
|
||||
yield asyncDelay(500)
|
||||
expect(yield 3 + 3).toBe(12)
|
||||
expect(yield 4 + 4).toBe(16)
|
||||
return 8 + 8
|
||||
})('start')
|
||||
const callback = function({value, done}) {
|
||||
return {value: 2 * value, done}
|
||||
})("start")
|
||||
const callback = function({ value, done }) {
|
||||
return { value: 2 * value, done }
|
||||
}
|
||||
const gen = SD.Task.asGenerator({generator: promiseGenerator, callback})
|
||||
const gen = SD.Task.asGenerator({ generator: promiseGenerator, callback })
|
||||
expect(await SD.Task.enqueue(gen)).toBe(32)
|
||||
})
|
||||
it('should be able to chain handlers', async function() {
|
||||
expect(typeof SD.Task.enqueue).toBe('function')
|
||||
it("should be able to chain handlers", async function() {
|
||||
expect(typeof SD.Task.enqueue).toBe("function")
|
||||
const promiseGenerator = (function*(val) {
|
||||
expect(val).toBe('start')
|
||||
expect(yield {test: '1'}).toEqual({test: '1', foo: 'bar'})
|
||||
expect(val).toBe("start")
|
||||
expect(yield { test: "1" }).toEqual({ test: "1", foo: "bar" })
|
||||
expect(yield 2 + 2).toEqual(8)
|
||||
yield asyncDelay(500)
|
||||
expect(yield 3 + 3).toEqual(12)
|
||||
expect(yield {test: 4}).toEqual({test: 8, foo: 'bar'})
|
||||
return {test: 8}
|
||||
})('start')
|
||||
const gen1 = SD.Task.asGenerator({generator: promiseGenerator, callback: function({value, done}) {
|
||||
if (typeof value === "object") {
|
||||
value['foo'] = 'bar'
|
||||
}
|
||||
return {value, done}
|
||||
}})
|
||||
const gen2 = SD.Task.asGenerator({generator: gen1, callback: function({value, done}) {
|
||||
if (typeof value === 'number') {
|
||||
value = 2 * value
|
||||
}
|
||||
if (typeof value === 'object' && typeof value.test === 'number') {
|
||||
value.test = 2 * value.test
|
||||
}
|
||||
return {value, done}
|
||||
}})
|
||||
expect(await SD.Task.enqueue(gen2)).toEqual({test:32, foo: 'bar'})
|
||||
expect(yield { test: 4 }).toEqual({ test: 8, foo: "bar" })
|
||||
return { test: 8 }
|
||||
})("start")
|
||||
const gen1 = SD.Task.asGenerator({
|
||||
generator: promiseGenerator,
|
||||
callback: function({ value, done }) {
|
||||
if (typeof value === "object") {
|
||||
value["foo"] = "bar"
|
||||
}
|
||||
return { value, done }
|
||||
},
|
||||
})
|
||||
const gen2 = SD.Task.asGenerator({
|
||||
generator: gen1,
|
||||
callback: function({ value, done }) {
|
||||
if (typeof value === "number") {
|
||||
value = 2 * value
|
||||
}
|
||||
if (typeof value === "object" && typeof value.test === "number") {
|
||||
value.test = 2 * value.test
|
||||
}
|
||||
return { value, done }
|
||||
},
|
||||
})
|
||||
expect(await SD.Task.enqueue(gen2)).toEqual({ test: 32, foo: "bar" })
|
||||
})
|
||||
describe('ServiceContainer', function() {
|
||||
it('should be able to register providers', function() {
|
||||
describe("ServiceContainer", function() {
|
||||
it("should be able to register providers", function() {
|
||||
const cont = new ServiceContainer(
|
||||
function foo() {
|
||||
this.bar = ''
|
||||
this.bar = ""
|
||||
},
|
||||
function bar() {
|
||||
return () => 0
|
||||
},
|
||||
{ name: 'zero', definition: 0 },
|
||||
{ name: 'ctx', definition: () => Object.create(null), singleton: true },
|
||||
{ name: 'test',
|
||||
{ name: "zero", definition: 0 },
|
||||
{ name: "ctx", definition: () => Object.create(null), singleton: true },
|
||||
{
|
||||
name: "test",
|
||||
definition: (ctx, missing, one, foo) => {
|
||||
expect(ctx).toEqual({ran: true})
|
||||
expect(ctx).toEqual({ ran: true })
|
||||
expect(one).toBe(1)
|
||||
expect(typeof foo).toBe('object')
|
||||
expect(typeof foo).toBe("object")
|
||||
expect(foo.bar).toBeDefined()
|
||||
expect(typeof missing).toBe('undefined')
|
||||
return {foo: 'bar'}
|
||||
}, dependencies: ['ctx', 'missing', 'one', 'foo']
|
||||
expect(typeof missing).toBe("undefined")
|
||||
return { foo: "bar" }
|
||||
},
|
||||
dependencies: ["ctx", "missing", "one", "foo"],
|
||||
}
|
||||
)
|
||||
const fooObj = cont.get('foo')
|
||||
expect(typeof fooObj).toBe('object')
|
||||
const fooObj = cont.get("foo")
|
||||
expect(typeof fooObj).toBe("object")
|
||||
fooObj.ran = true
|
||||
|
||||
const ctx = cont.get('ctx')
|
||||
const ctx = cont.get("ctx")
|
||||
expect(ctx).toEqual({})
|
||||
ctx.ran = true
|
||||
|
||||
const bar = cont.get('bar')
|
||||
expect(typeof bar).toBe('function')
|
||||
const bar = cont.get("bar")
|
||||
expect(typeof bar).toBe("function")
|
||||
expect(bar()).toBe(0)
|
||||
|
||||
cont.register({name: 'one', definition: 1})
|
||||
const test = cont.get('test')
|
||||
expect(typeof test).toBe('object')
|
||||
expect(test.foo).toBe('bar')
|
||||
cont.register({ name: "one", definition: 1 })
|
||||
const test = cont.get("test")
|
||||
expect(typeof test).toBe("object")
|
||||
expect(test.foo).toBe("bar")
|
||||
})
|
||||
})
|
||||
it('should be able to stream data in chunks', async function() {
|
||||
it("should be able to stream data in chunks", async function() {
|
||||
expect(SD.isServerAvailable()).toBeTrue()
|
||||
const nbr_steps = 15
|
||||
let res = await fetch('/render', {
|
||||
method: 'POST',
|
||||
let res = await fetch("/render", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
"prompt": "a photograph of an astronaut riding a horse",
|
||||
"negative_prompt": "",
|
||||
"width": 128,
|
||||
"height": 128,
|
||||
"seed": Math.floor(Math.random() * 10000000),
|
||||
prompt: "a photograph of an astronaut riding a horse",
|
||||
negative_prompt: "",
|
||||
width: 128,
|
||||
height: 128,
|
||||
seed: Math.floor(Math.random() * 10000000),
|
||||
|
||||
"sampler": "plms",
|
||||
"use_stable_diffusion_model": "sd-v1-4",
|
||||
"num_inference_steps": nbr_steps,
|
||||
"guidance_scale": 7.5,
|
||||
sampler: "plms",
|
||||
use_stable_diffusion_model: "sd-v1-4",
|
||||
num_inference_steps: nbr_steps,
|
||||
guidance_scale: 7.5,
|
||||
|
||||
"numOutputsParallel": 1,
|
||||
"stream_image_progress": true,
|
||||
"show_only_filtered_image": true,
|
||||
"output_format": "jpeg",
|
||||
numOutputsParallel: 1,
|
||||
stream_image_progress: true,
|
||||
show_only_filtered_image: true,
|
||||
output_format: "jpeg",
|
||||
|
||||
"session_id": JASMINE_SESSION_ID,
|
||||
session_id: JASMINE_SESSION_ID,
|
||||
}),
|
||||
})
|
||||
expect(res.ok).toBeTruthy()
|
||||
const renderRequest = await res.json()
|
||||
expect(typeof renderRequest.stream).toBe('string')
|
||||
expect(typeof renderRequest.stream).toBe("string")
|
||||
expect(renderRequest.task).toBeDefined()
|
||||
|
||||
// Wait for server status to update.
|
||||
await SD.waitUntil(() => {
|
||||
console.log('Waiting for %s to be received...', renderRequest.task)
|
||||
return (!SD.serverState.tasks || SD.serverState.tasks[String(renderRequest.task)])
|
||||
}, 250, 10 * 60 * 1000)
|
||||
await SD.waitUntil(
|
||||
() => {
|
||||
console.log("Waiting for %s to be received...", renderRequest.task)
|
||||
return !SD.serverState.tasks || SD.serverState.tasks[String(renderRequest.task)]
|
||||
},
|
||||
250,
|
||||
10 * 60 * 1000
|
||||
)
|
||||
// Wait for task to start on server.
|
||||
await SD.waitUntil(() => {
|
||||
console.log('Waiting for %s to start...', renderRequest.task)
|
||||
return !SD.serverState.tasks || SD.serverState.tasks[String(renderRequest.task)] !== 'pending'
|
||||
console.log("Waiting for %s to start...", renderRequest.task)
|
||||
return !SD.serverState.tasks || SD.serverState.tasks[String(renderRequest.task)] !== "pending"
|
||||
}, 250)
|
||||
|
||||
const reader = new SD.ChunkedStreamReader(renderRequest.stream)
|
||||
@ -217,24 +229,24 @@ describe('stable-diffusion-ui', function() {
|
||||
if (!value || value.length <= 0) {
|
||||
return
|
||||
}
|
||||
return reader.readStreamAsJSON(value.join(''))
|
||||
return reader.readStreamAsJSON(value.join(""))
|
||||
}
|
||||
reader.onNext = function({done, value}) {
|
||||
reader.onNext = function({ done, value }) {
|
||||
console.log(value)
|
||||
if (typeof value === 'object' && 'status' in value) {
|
||||
if (typeof value === "object" && "status" in value) {
|
||||
done = true
|
||||
}
|
||||
return {done, value}
|
||||
return { done, value }
|
||||
}
|
||||
let lastUpdate = undefined
|
||||
let stepCount = 0
|
||||
let complete = false
|
||||
//for await (const stepUpdate of reader) {
|
||||
for await (const stepUpdate of reader.open()) {
|
||||
console.log('ChunkedStreamReader received ', stepUpdate)
|
||||
console.log("ChunkedStreamReader received ", stepUpdate)
|
||||
lastUpdate = stepUpdate
|
||||
if (complete) {
|
||||
expect(stepUpdate.status).toBe('succeeded')
|
||||
expect(stepUpdate.status).toBe("succeeded")
|
||||
expect(stepUpdate.output).toHaveSize(1)
|
||||
} else {
|
||||
expect(stepUpdate.total_steps).toBe(nbr_steps)
|
||||
@ -246,70 +258,76 @@ describe('stable-diffusion-ui', function() {
|
||||
}
|
||||
}
|
||||
}
|
||||
for(let i=1; i <= 5; ++i) {
|
||||
for (let i = 1; i <= 5; ++i) {
|
||||
res = await fetch(renderRequest.stream)
|
||||
expect(res.ok).toBeTruthy()
|
||||
const cachedResponse = await res.json()
|
||||
console.log('Cache test %s received %o', i, cachedResponse)
|
||||
console.log("Cache test %s received %o", i, cachedResponse)
|
||||
expect(lastUpdate).toEqual(cachedResponse)
|
||||
}
|
||||
})
|
||||
|
||||
describe('should be able to make renders', function() {
|
||||
describe("should be able to make renders", function() {
|
||||
beforeEach(function() {
|
||||
expect(SD.isServerAvailable()).toBeTrue()
|
||||
})
|
||||
it('basic inline request', async function() {
|
||||
it("basic inline request", async function() {
|
||||
let stepCount = 0
|
||||
let complete = false
|
||||
const result = await SD.render({
|
||||
"prompt": "a photograph of an astronaut riding a horse",
|
||||
"width": 128,
|
||||
"height": 128,
|
||||
"num_inference_steps": 10,
|
||||
"show_only_filtered_image": false,
|
||||
//"use_face_correction": 'GFPGANv1.3',
|
||||
"use_upscale": "RealESRGAN_x4plus",
|
||||
"session_id": JASMINE_SESSION_ID,
|
||||
}, function(event) {
|
||||
console.log(this, event)
|
||||
if ('update' in event) {
|
||||
const stepUpdate = event.update
|
||||
if (complete || (stepUpdate.status && stepUpdate.step === stepUpdate.total_steps)) {
|
||||
expect(stepUpdate.status).toBe('succeeded')
|
||||
expect(stepUpdate.output).toHaveSize(2)
|
||||
} else {
|
||||
expect(stepUpdate.step).toBe(stepCount)
|
||||
if (stepUpdate.step === stepUpdate.total_steps) {
|
||||
complete = true
|
||||
const result = await SD.render(
|
||||
{
|
||||
prompt: "a photograph of an astronaut riding a horse",
|
||||
width: 128,
|
||||
height: 128,
|
||||
num_inference_steps: 10,
|
||||
show_only_filtered_image: false,
|
||||
//"use_face_correction": 'GFPGANv1.3',
|
||||
use_upscale: "RealESRGAN_x4plus",
|
||||
session_id: JASMINE_SESSION_ID,
|
||||
},
|
||||
function(event) {
|
||||
console.log(this, event)
|
||||
if ("update" in event) {
|
||||
const stepUpdate = event.update
|
||||
if (complete || (stepUpdate.status && stepUpdate.step === stepUpdate.total_steps)) {
|
||||
expect(stepUpdate.status).toBe("succeeded")
|
||||
expect(stepUpdate.output).toHaveSize(2)
|
||||
} else {
|
||||
stepCount++
|
||||
expect(stepUpdate.step).toBe(stepCount)
|
||||
if (stepUpdate.step === stepUpdate.total_steps) {
|
||||
complete = true
|
||||
} else {
|
||||
stepCount++
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
)
|
||||
console.log(result)
|
||||
expect(result.status).toBe('succeeded')
|
||||
expect(result.status).toBe("succeeded")
|
||||
expect(result.output).toHaveSize(2)
|
||||
})
|
||||
it('post and reader request', async function() {
|
||||
it("post and reader request", async function() {
|
||||
const renderTask = new SD.RenderTask({
|
||||
"prompt": "a photograph of an astronaut riding a horse",
|
||||
"width": 128,
|
||||
"height": 128,
|
||||
"seed": SD.MAX_SEED_VALUE,
|
||||
"num_inference_steps": 10,
|
||||
"session_id": JASMINE_SESSION_ID,
|
||||
prompt: "a photograph of an astronaut riding a horse",
|
||||
width: 128,
|
||||
height: 128,
|
||||
seed: SD.MAX_SEED_VALUE,
|
||||
num_inference_steps: 10,
|
||||
session_id: JASMINE_SESSION_ID,
|
||||
})
|
||||
expect(renderTask.status).toBe(SD.TaskStatus.init)
|
||||
|
||||
const timeout = -1
|
||||
const renderRequest = await renderTask.post(timeout)
|
||||
expect(typeof renderRequest.stream).toBe('string')
|
||||
expect(typeof renderRequest.stream).toBe("string")
|
||||
expect(renderTask.status).toBe(SD.TaskStatus.waiting)
|
||||
expect(renderTask.streamUrl).toBe(renderRequest.stream)
|
||||
|
||||
await renderTask.waitUntil({state: SD.TaskStatus.processing, callback: () => console.log('Waiting for render task to start...') })
|
||||
await renderTask.waitUntil({
|
||||
state: SD.TaskStatus.processing,
|
||||
callback: () => console.log("Waiting for render task to start..."),
|
||||
})
|
||||
expect(renderTask.status).toBe(SD.TaskStatus.processing)
|
||||
|
||||
let stepCount = 0
|
||||
@ -318,7 +336,7 @@ describe('stable-diffusion-ui', function() {
|
||||
for await (const stepUpdate of renderTask.reader.open()) {
|
||||
console.log(stepUpdate)
|
||||
if (complete || (stepUpdate.status && stepUpdate.step === stepUpdate.total_steps)) {
|
||||
expect(stepUpdate.status).toBe('succeeded')
|
||||
expect(stepUpdate.status).toBe("succeeded")
|
||||
expect(stepUpdate.output).toHaveSize(1)
|
||||
} else {
|
||||
expect(stepUpdate.step).toBe(stepCount)
|
||||
@ -330,28 +348,28 @@ describe('stable-diffusion-ui', function() {
|
||||
}
|
||||
}
|
||||
expect(renderTask.status).toBe(SD.TaskStatus.completed)
|
||||
expect(renderTask.result.status).toBe('succeeded')
|
||||
expect(renderTask.result.status).toBe("succeeded")
|
||||
expect(renderTask.result.output).toHaveSize(1)
|
||||
})
|
||||
it('queued request', async function() {
|
||||
it("queued request", async function() {
|
||||
let stepCount = 0
|
||||
let complete = false
|
||||
const renderTask = new SD.RenderTask({
|
||||
"prompt": "a photograph of an astronaut riding a horse",
|
||||
"width": 128,
|
||||
"height": 128,
|
||||
"num_inference_steps": 10,
|
||||
"show_only_filtered_image": false,
|
||||
prompt: "a photograph of an astronaut riding a horse",
|
||||
width: 128,
|
||||
height: 128,
|
||||
num_inference_steps: 10,
|
||||
show_only_filtered_image: false,
|
||||
//"use_face_correction": 'GFPGANv1.3',
|
||||
"use_upscale": "RealESRGAN_x4plus",
|
||||
"session_id": JASMINE_SESSION_ID,
|
||||
use_upscale: "RealESRGAN_x4plus",
|
||||
session_id: JASMINE_SESSION_ID,
|
||||
})
|
||||
await renderTask.enqueue(function(event) {
|
||||
console.log(this, event)
|
||||
if ('update' in event) {
|
||||
if ("update" in event) {
|
||||
const stepUpdate = event.update
|
||||
if (complete || (stepUpdate.status && stepUpdate.step === stepUpdate.total_steps)) {
|
||||
expect(stepUpdate.status).toBe('succeeded')
|
||||
expect(stepUpdate.status).toBe("succeeded")
|
||||
expect(stepUpdate.output).toHaveSize(2)
|
||||
} else {
|
||||
expect(stepUpdate.step).toBe(stepCount)
|
||||
@ -364,12 +382,12 @@ describe('stable-diffusion-ui', function() {
|
||||
}
|
||||
})
|
||||
console.log(renderTask.result)
|
||||
expect(renderTask.result.status).toBe('succeeded')
|
||||
expect(renderTask.result.status).toBe("succeeded")
|
||||
expect(renderTask.result.output).toHaveSize(2)
|
||||
})
|
||||
})
|
||||
describe('# Special cases', function() {
|
||||
it('should throw an exception on set for invalid sessionId', function() {
|
||||
describe("# Special cases", function() {
|
||||
it("should throw an exception on set for invalid sessionId", function() {
|
||||
expect(function() {
|
||||
SD.sessionId = undefined
|
||||
}).toThrowError("Can't set sessionId to undefined.")
|
||||
@ -386,16 +404,17 @@ if (!PLUGINS.SELFTEST) {
|
||||
PLUGINS.SELFTEST = {}
|
||||
}
|
||||
loadUIPlugins().then(function() {
|
||||
console.log('loadCompleted', loadEvent)
|
||||
describe('@Plugins', function() {
|
||||
it('exposes hooks to overide', function() {
|
||||
expect(typeof PLUGINS.IMAGE_INFO_BUTTONS).toBe('object')
|
||||
expect(typeof PLUGINS.TASK_CREATE).toBe('object')
|
||||
console.log("loadCompleted", loadEvent)
|
||||
describe("@Plugins", function() {
|
||||
it("exposes hooks to overide", function() {
|
||||
expect(typeof PLUGINS.IMAGE_INFO_BUTTONS).toBe("object")
|
||||
expect(typeof PLUGINS.TASK_CREATE).toBe("object")
|
||||
})
|
||||
describe('supports selftests', function() { // Hook to allow plugins to define tests.
|
||||
describe("supports selftests", function() {
|
||||
// Hook to allow plugins to define tests.
|
||||
const pluginsTests = Object.keys(PLUGINS.SELFTEST).filter((key) => PLUGINS.SELFTEST.hasOwnProperty(key))
|
||||
if (!pluginsTests || pluginsTests.length <= 0) {
|
||||
it('but nothing loaded...', function() {
|
||||
it("but nothing loaded...", function() {
|
||||
expect(true).toBeTruthy()
|
||||
})
|
||||
return
|
||||
|
@ -1,4 +1,4 @@
|
||||
(function() {
|
||||
;(function() {
|
||||
"use strict"
|
||||
|
||||
///////////////////// Function section
|
||||
@ -18,122 +18,132 @@
|
||||
return y
|
||||
}
|
||||
function getCurrentTime() {
|
||||
const now = new Date();
|
||||
let hours = now.getHours();
|
||||
let minutes = now.getMinutes();
|
||||
let seconds = now.getSeconds();
|
||||
const now = new Date()
|
||||
let hours = now.getHours()
|
||||
let minutes = now.getMinutes()
|
||||
let seconds = now.getSeconds()
|
||||
|
||||
hours = hours < 10 ? `0${hours}` : hours;
|
||||
minutes = minutes < 10 ? `0${minutes}` : minutes;
|
||||
seconds = seconds < 10 ? `0${seconds}` : seconds;
|
||||
hours = hours < 10 ? `0${hours}` : hours
|
||||
minutes = minutes < 10 ? `0${minutes}` : minutes
|
||||
seconds = seconds < 10 ? `0${seconds}` : seconds
|
||||
|
||||
return `${hours}:${minutes}:${seconds}`;
|
||||
return `${hours}:${minutes}:${seconds}`
|
||||
}
|
||||
|
||||
function addLogMessage(message) {
|
||||
const logContainer = document.getElementById('merge-log');
|
||||
logContainer.innerHTML += `<i>${getCurrentTime()}</i> ${message}<br>`;
|
||||
const logContainer = document.getElementById("merge-log")
|
||||
logContainer.innerHTML += `<i>${getCurrentTime()}</i> ${message}<br>`
|
||||
|
||||
// Scroll to the bottom of the log
|
||||
logContainer.scrollTop = logContainer.scrollHeight;
|
||||
logContainer.scrollTop = logContainer.scrollHeight
|
||||
|
||||
document.querySelector('#merge-log-container').style.display = 'block'
|
||||
}
|
||||
document.querySelector("#merge-log-container").style.display = "block"
|
||||
}
|
||||
|
||||
function addLogSeparator() {
|
||||
const logContainer = document.getElementById('merge-log');
|
||||
logContainer.innerHTML += '<hr>'
|
||||
const logContainer = document.getElementById("merge-log")
|
||||
logContainer.innerHTML += "<hr>"
|
||||
|
||||
logContainer.scrollTop = logContainer.scrollHeight;
|
||||
logContainer.scrollTop = logContainer.scrollHeight
|
||||
}
|
||||
|
||||
function drawDiagram(fn) {
|
||||
const SIZE = 300
|
||||
const canvas = document.getElementById('merge-canvas');
|
||||
const canvas = document.getElementById("merge-canvas")
|
||||
canvas.height = canvas.width = SIZE
|
||||
const ctx = canvas.getContext('2d');
|
||||
const ctx = canvas.getContext("2d")
|
||||
|
||||
// Draw coordinate system
|
||||
ctx.scale(1, -1);
|
||||
ctx.translate(0, -canvas.height);
|
||||
ctx.lineWidth = 1;
|
||||
ctx.beginPath();
|
||||
ctx.scale(1, -1)
|
||||
ctx.translate(0, -canvas.height)
|
||||
ctx.lineWidth = 1
|
||||
ctx.beginPath()
|
||||
|
||||
ctx.strokeStyle = 'white'
|
||||
ctx.moveTo(0,0); ctx.lineTo(0,SIZE); ctx.lineTo(SIZE,SIZE); ctx.lineTo(SIZE,0); ctx.lineTo(0,0); ctx.lineTo(SIZE,SIZE);
|
||||
ctx.strokeStyle = "white"
|
||||
ctx.moveTo(0, 0)
|
||||
ctx.lineTo(0, SIZE)
|
||||
ctx.lineTo(SIZE, SIZE)
|
||||
ctx.lineTo(SIZE, 0)
|
||||
ctx.lineTo(0, 0)
|
||||
ctx.lineTo(SIZE, SIZE)
|
||||
ctx.stroke()
|
||||
ctx.beginPath()
|
||||
ctx.setLineDash([1,2])
|
||||
ctx.setLineDash([1, 2])
|
||||
const n = SIZE / 10
|
||||
for (let i=n; i<SIZE; i+=n) {
|
||||
ctx.moveTo(0,i)
|
||||
ctx.lineTo(SIZE,i)
|
||||
ctx.moveTo(i,0)
|
||||
ctx.lineTo(i,SIZE)
|
||||
for (let i = n; i < SIZE; i += n) {
|
||||
ctx.moveTo(0, i)
|
||||
ctx.lineTo(SIZE, i)
|
||||
ctx.moveTo(i, 0)
|
||||
ctx.lineTo(i, SIZE)
|
||||
}
|
||||
ctx.stroke()
|
||||
ctx.beginPath()
|
||||
ctx.setLineDash([])
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = 'black'
|
||||
ctx.lineWidth = 3;
|
||||
ctx.beginPath()
|
||||
ctx.strokeStyle = "black"
|
||||
ctx.lineWidth = 3
|
||||
// Plot function
|
||||
const numSamples = 20;
|
||||
const numSamples = 20
|
||||
for (let i = 0; i <= numSamples; i++) {
|
||||
const x = i / numSamples;
|
||||
const y = fn(x);
|
||||
|
||||
const canvasX = x * SIZE;
|
||||
const canvasY = y * SIZE;
|
||||
const x = i / numSamples
|
||||
const y = fn(x)
|
||||
|
||||
const canvasX = x * SIZE
|
||||
const canvasY = y * SIZE
|
||||
|
||||
if (i === 0) {
|
||||
ctx.moveTo(canvasX, canvasY);
|
||||
ctx.moveTo(canvasX, canvasY)
|
||||
} else {
|
||||
ctx.lineTo(canvasX, canvasY);
|
||||
ctx.lineTo(canvasX, canvasY)
|
||||
}
|
||||
}
|
||||
ctx.stroke()
|
||||
// Plot alpha values (yellow boxes)
|
||||
let start = parseFloat( document.querySelector('#merge-start').value )
|
||||
let step = parseFloat( document.querySelector('#merge-step').value )
|
||||
let iterations = document.querySelector('#merge-count').value>>0
|
||||
let start = parseFloat(document.querySelector("#merge-start").value)
|
||||
let step = parseFloat(document.querySelector("#merge-step").value)
|
||||
let iterations = document.querySelector("#merge-count").value >> 0
|
||||
ctx.beginPath()
|
||||
ctx.fillStyle = "yellow"
|
||||
for (let i=0; i< iterations; i++) {
|
||||
const alpha = ( start + i * step ) / 100
|
||||
const x = alpha*SIZE
|
||||
for (let i = 0; i < iterations; i++) {
|
||||
const alpha = (start + i * step) / 100
|
||||
const x = alpha * SIZE
|
||||
const y = fn(alpha) * SIZE
|
||||
if (x <= SIZE) {
|
||||
ctx.rect(x-3,y-3,6,6)
|
||||
ctx.rect(x - 3, y - 3, 6, 6)
|
||||
ctx.fill()
|
||||
} else {
|
||||
ctx.strokeStyle = 'red'
|
||||
ctx.moveTo(0,0); ctx.lineTo(0,SIZE); ctx.lineTo(SIZE,SIZE); ctx.lineTo(SIZE,0); ctx.lineTo(0,0); ctx.lineTo(SIZE,SIZE);
|
||||
ctx.strokeStyle = "red"
|
||||
ctx.moveTo(0, 0)
|
||||
ctx.lineTo(0, SIZE)
|
||||
ctx.lineTo(SIZE, SIZE)
|
||||
ctx.lineTo(SIZE, 0)
|
||||
ctx.lineTo(0, 0)
|
||||
ctx.lineTo(SIZE, SIZE)
|
||||
ctx.stroke()
|
||||
addLogMessage('<i>Warning: maximum ratio is ≥ 100%</i>')
|
||||
addLogMessage("<i>Warning: maximum ratio is ≥ 100%</i>")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateChart() {
|
||||
let fn = (x) => x
|
||||
switch (document.querySelector('#merge-interpolation').value) {
|
||||
case 'SmoothStep':
|
||||
switch (document.querySelector("#merge-interpolation").value) {
|
||||
case "SmoothStep":
|
||||
fn = smoothstep
|
||||
break
|
||||
case 'SmootherStep':
|
||||
case "SmootherStep":
|
||||
fn = smootherstep
|
||||
break
|
||||
case 'SmoothestStep':
|
||||
case "SmoothestStep":
|
||||
fn = smootheststep
|
||||
break
|
||||
}
|
||||
drawDiagram(fn)
|
||||
}
|
||||
createTab({
|
||||
id: 'merge',
|
||||
icon: 'fa-code-merge',
|
||||
label: 'Merge models',
|
||||
id: "merge",
|
||||
icon: "fa-code-merge",
|
||||
label: "Merge models",
|
||||
css: `
|
||||
#tab-content-merge .tab-content-inner {
|
||||
max-width: 100%;
|
||||
@ -307,19 +317,19 @@
|
||||
return
|
||||
}
|
||||
|
||||
const tabSettingsSingle = document.querySelector('#tab-merge-opts-single')
|
||||
const tabSettingsBatch = document.querySelector('#tab-merge-opts-batch')
|
||||
const tabSettingsSingle = document.querySelector("#tab-merge-opts-single")
|
||||
const tabSettingsBatch = document.querySelector("#tab-merge-opts-batch")
|
||||
linkTabContents(tabSettingsSingle)
|
||||
linkTabContents(tabSettingsBatch)
|
||||
|
||||
console.log('Activate')
|
||||
let mergeModelAField = new ModelDropdown(document.querySelector('#mergeModelA'), 'stable-diffusion')
|
||||
let mergeModelBField = new ModelDropdown(document.querySelector('#mergeModelB'), 'stable-diffusion')
|
||||
console.log("Activate")
|
||||
let mergeModelAField = new ModelDropdown(document.querySelector("#mergeModelA"), "stable-diffusion")
|
||||
let mergeModelBField = new ModelDropdown(document.querySelector("#mergeModelB"), "stable-diffusion")
|
||||
updateChart()
|
||||
|
||||
// slider
|
||||
const singleMergeRatioField = document.querySelector('#single-merge-ratio')
|
||||
const singleMergeRatioSlider = document.querySelector('#single-merge-ratio-slider')
|
||||
const singleMergeRatioField = document.querySelector("#single-merge-ratio")
|
||||
const singleMergeRatioSlider = document.querySelector("#single-merge-ratio-slider")
|
||||
|
||||
function updateSingleMergeRatio() {
|
||||
singleMergeRatioField.value = singleMergeRatioSlider.value / 10
|
||||
@ -337,21 +347,21 @@
|
||||
singleMergeRatioSlider.dispatchEvent(new Event("change"))
|
||||
}
|
||||
|
||||
singleMergeRatioSlider.addEventListener('input', updateSingleMergeRatio)
|
||||
singleMergeRatioField.addEventListener('input', updateSingleMergeRatioSlider)
|
||||
singleMergeRatioSlider.addEventListener("input", updateSingleMergeRatio)
|
||||
singleMergeRatioField.addEventListener("input", updateSingleMergeRatioSlider)
|
||||
updateSingleMergeRatio()
|
||||
|
||||
document.querySelector('.merge-config').addEventListener('change', updateChart)
|
||||
document.querySelector(".merge-config").addEventListener("change", updateChart)
|
||||
|
||||
document.querySelector('#merge-button').addEventListener('click', async function(e) {
|
||||
document.querySelector("#merge-button").addEventListener("click", async function(e) {
|
||||
// Build request template
|
||||
let model0 = mergeModelAField.value
|
||||
let model1 = mergeModelBField.value
|
||||
let request = { model0: model0, model1: model1 }
|
||||
request['use_fp16'] = document.querySelector('#merge-fp').value == 'fp16'
|
||||
let iterations = document.querySelector('#merge-count').value>>0
|
||||
let start = parseFloat( document.querySelector('#merge-start').value )
|
||||
let step = parseFloat( document.querySelector('#merge-step').value )
|
||||
request["use_fp16"] = document.querySelector("#merge-fp").value == "fp16"
|
||||
let iterations = document.querySelector("#merge-count").value >> 0
|
||||
let start = parseFloat(document.querySelector("#merge-start").value)
|
||||
let step = parseFloat(document.querySelector("#merge-step").value)
|
||||
|
||||
if (isTabActive(tabSettingsSingle)) {
|
||||
start = parseFloat(singleMergeRatioField.value)
|
||||
@ -363,76 +373,78 @@
|
||||
addLogMessage(`step = ${step}%`)
|
||||
}
|
||||
|
||||
if (start + (iterations-1) * step >= 100) {
|
||||
addLogMessage('<i>Aborting: maximum ratio is ≥ 100%</i>')
|
||||
addLogMessage('Reduce the number of variations or the step size')
|
||||
if (start + (iterations - 1) * step >= 100) {
|
||||
addLogMessage("<i>Aborting: maximum ratio is ≥ 100%</i>")
|
||||
addLogMessage("Reduce the number of variations or the step size")
|
||||
addLogSeparator()
|
||||
document.querySelector('#merge-count').focus()
|
||||
document.querySelector("#merge-count").focus()
|
||||
return
|
||||
}
|
||||
|
||||
if (document.querySelector('#merge-filename').value == "") {
|
||||
addLogMessage('<i>Aborting: No output file name specified</i>')
|
||||
if (document.querySelector("#merge-filename").value == "") {
|
||||
addLogMessage("<i>Aborting: No output file name specified</i>")
|
||||
addLogSeparator()
|
||||
document.querySelector('#merge-filename').focus()
|
||||
document.querySelector("#merge-filename").focus()
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
// Disable merge button
|
||||
e.target.disabled=true
|
||||
e.target.classList.add('disabled')
|
||||
let cursor = $("body").css("cursor");
|
||||
let label = document.querySelector('#merge-button').innerHTML
|
||||
$("body").css("cursor", "progress");
|
||||
document.querySelector('#merge-button').innerHTML = 'Merging models ...'
|
||||
e.target.disabled = true
|
||||
e.target.classList.add("disabled")
|
||||
let cursor = $("body").css("cursor")
|
||||
let label = document.querySelector("#merge-button").innerHTML
|
||||
$("body").css("cursor", "progress")
|
||||
document.querySelector("#merge-button").innerHTML = "Merging models ..."
|
||||
|
||||
addLogMessage("Merging models")
|
||||
addLogMessage("Model A: "+model0)
|
||||
addLogMessage("Model B: "+model1)
|
||||
addLogMessage("Model A: " + model0)
|
||||
addLogMessage("Model B: " + model1)
|
||||
|
||||
// Batch main loop
|
||||
for (let i=0; i<iterations; i++) {
|
||||
let alpha = ( start + i * step ) / 100
|
||||
switch (document.querySelector('#merge-interpolation').value) {
|
||||
case 'SmoothStep':
|
||||
for (let i = 0; i < iterations; i++) {
|
||||
let alpha = (start + i * step) / 100
|
||||
switch (document.querySelector("#merge-interpolation").value) {
|
||||
case "SmoothStep":
|
||||
alpha = smoothstep(alpha)
|
||||
break
|
||||
case 'SmootherStep':
|
||||
case "SmootherStep":
|
||||
alpha = smootherstep(alpha)
|
||||
break
|
||||
case 'SmoothestStep':
|
||||
case "SmoothestStep":
|
||||
alpha = smootheststep(alpha)
|
||||
break
|
||||
}
|
||||
addLogMessage(`merging batch job ${i+1}/${iterations}, alpha = ${alpha.toFixed(5)}...`)
|
||||
addLogMessage(`merging batch job ${i + 1}/${iterations}, alpha = ${alpha.toFixed(5)}...`)
|
||||
|
||||
request['out_path'] = document.querySelector('#merge-filename').value
|
||||
request['out_path'] += '-' + alpha.toFixed(5) + '.' + document.querySelector('#merge-format').value
|
||||
addLogMessage(` filename: ${request['out_path']}`)
|
||||
request["out_path"] = document.querySelector("#merge-filename").value
|
||||
request["out_path"] += "-" + alpha.toFixed(5) + "." + document.querySelector("#merge-format").value
|
||||
addLogMessage(` filename: ${request["out_path"]}`)
|
||||
|
||||
request['ratio'] = alpha
|
||||
let res = await fetch('/model/merge', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(request) })
|
||||
const data = await res.json();
|
||||
request["ratio"] = alpha
|
||||
let res = await fetch("/model/merge", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(request),
|
||||
})
|
||||
const data = await res.json()
|
||||
addLogMessage(JSON.stringify(data))
|
||||
}
|
||||
addLogMessage("<b>Done.</b> The models have been saved to your <tt>models/stable-diffusion</tt> folder.")
|
||||
addLogMessage(
|
||||
"<b>Done.</b> The models have been saved to your <tt>models/stable-diffusion</tt> folder."
|
||||
)
|
||||
addLogSeparator()
|
||||
// Re-enable merge button
|
||||
$("body").css("cursor", cursor);
|
||||
document.querySelector('#merge-button').innerHTML = label
|
||||
e.target.disabled=false
|
||||
e.target.classList.remove('disabled')
|
||||
$("body").css("cursor", cursor)
|
||||
document.querySelector("#merge-button").innerHTML = label
|
||||
e.target.disabled = false
|
||||
e.target.classList.remove("disabled")
|
||||
|
||||
// Update model list
|
||||
stableDiffusionModelField.innerHTML = ''
|
||||
vaeModelField.innerHTML = ''
|
||||
hypernetworkModelField.innerHTML = ''
|
||||
stableDiffusionModelField.innerHTML = ""
|
||||
vaeModelField.innerHTML = ""
|
||||
hypernetworkModelField.innerHTML = ""
|
||||
await getModels()
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
})()
|
||||
|
@ -1,52 +1,52 @@
|
||||
(function () {
|
||||
;(function() {
|
||||
"use strict"
|
||||
|
||||
var styleSheet = document.createElement("style");
|
||||
var styleSheet = document.createElement("style")
|
||||
styleSheet.textContent = `
|
||||
.modifier-card-tiny.modifier-toggle-inactive {
|
||||
background: transparent;
|
||||
border: 2px dashed red;
|
||||
opacity:0.2;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(styleSheet);
|
||||
`
|
||||
document.head.appendChild(styleSheet)
|
||||
|
||||
// observe for changes in tag list
|
||||
var observer = new MutationObserver(function (mutations) {
|
||||
// mutations.forEach(function (mutation) {
|
||||
if (editorModifierTagsList.childNodes.length > 0) {
|
||||
ModifierToggle()
|
||||
}
|
||||
// })
|
||||
var observer = new MutationObserver(function(mutations) {
|
||||
// mutations.forEach(function (mutation) {
|
||||
if (editorModifierTagsList.childNodes.length > 0) {
|
||||
ModifierToggle()
|
||||
}
|
||||
// })
|
||||
})
|
||||
|
||||
observer.observe(editorModifierTagsList, {
|
||||
childList: true
|
||||
childList: true,
|
||||
})
|
||||
|
||||
function ModifierToggle() {
|
||||
let overlays = document.querySelector('#editor-inputs-tags-list').querySelectorAll('.modifier-card-overlay')
|
||||
overlays.forEach (i => {
|
||||
let overlays = document.querySelector("#editor-inputs-tags-list").querySelectorAll(".modifier-card-overlay")
|
||||
overlays.forEach((i) => {
|
||||
i.oncontextmenu = (e) => {
|
||||
e.preventDefault()
|
||||
|
||||
if (i.parentElement.classList.contains('modifier-toggle-inactive')) {
|
||||
i.parentElement.classList.remove('modifier-toggle-inactive')
|
||||
}
|
||||
else
|
||||
{
|
||||
i.parentElement.classList.add('modifier-toggle-inactive')
|
||||
if (i.parentElement.classList.contains("modifier-toggle-inactive")) {
|
||||
i.parentElement.classList.remove("modifier-toggle-inactive")
|
||||
} else {
|
||||
i.parentElement.classList.add("modifier-toggle-inactive")
|
||||
}
|
||||
// refresh activeTags
|
||||
let modifierName = i.parentElement.getElementsByClassName('modifier-card-label')[0].getElementsByTagName("p")[0].dataset.fullName
|
||||
activeTags = activeTags.map(obj => {
|
||||
let modifierName = i.parentElement
|
||||
.getElementsByClassName("modifier-card-label")[0]
|
||||
.getElementsByTagName("p")[0].dataset.fullName
|
||||
activeTags = activeTags.map((obj) => {
|
||||
if (trimModifiers(obj.name) === trimModifiers(modifierName)) {
|
||||
return {...obj, inactive: (obj.element.classList.contains('modifier-toggle-inactive'))};
|
||||
return { ...obj, inactive: obj.element.classList.contains("modifier-toggle-inactive") }
|
||||
}
|
||||
|
||||
return obj;
|
||||
});
|
||||
document.dispatchEvent(new Event('refreshImageModifiers'))
|
||||
|
||||
return obj
|
||||
})
|
||||
document.dispatchEvent(new Event("refreshImageModifiers"))
|
||||
}
|
||||
})
|
||||
}
|
||||
|
@ -1,17 +1,19 @@
|
||||
(function() {
|
||||
;(function() {
|
||||
// Register selftests when loaded by jasmine.
|
||||
if (typeof PLUGINS?.SELFTEST === 'object') {
|
||||
if (typeof PLUGINS?.SELFTEST === "object") {
|
||||
PLUGINS.SELFTEST["release-notes"] = function() {
|
||||
it('should be able to fetch CHANGES.md', async function() {
|
||||
let releaseNotes = await fetch(`https://raw.githubusercontent.com/cmdr2/stable-diffusion-ui/main/CHANGES.md`)
|
||||
it("should be able to fetch CHANGES.md", async function() {
|
||||
let releaseNotes = await fetch(
|
||||
`https://raw.githubusercontent.com/cmdr2/stable-diffusion-ui/main/CHANGES.md`
|
||||
)
|
||||
expect(releaseNotes.status).toBe(200)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
createTab({
|
||||
id: 'news',
|
||||
icon: 'fa-bolt',
|
||||
id: "news",
|
||||
icon: "fa-bolt",
|
||||
label: "What's new",
|
||||
css: `
|
||||
#tab-content-news .tab-content-inner {
|
||||
@ -22,20 +24,22 @@
|
||||
`,
|
||||
onOpen: async ({ firstOpen }) => {
|
||||
if (firstOpen) {
|
||||
const loadMarkedScriptPromise = loadScript('/media/js/marked.min.js')
|
||||
const loadMarkedScriptPromise = loadScript("/media/js/marked.min.js")
|
||||
|
||||
let appConfig = await fetch('/get/app_config')
|
||||
let appConfig = await fetch("/get/app_config")
|
||||
if (!appConfig.ok) {
|
||||
console.error('[release-notes] Failed to get app_config.')
|
||||
console.error("[release-notes] Failed to get app_config.")
|
||||
return
|
||||
}
|
||||
appConfig = await appConfig.json()
|
||||
|
||||
const updateBranch = appConfig.update_branch || 'main'
|
||||
|
||||
let releaseNotes = await fetch(`https://raw.githubusercontent.com/cmdr2/stable-diffusion-ui/${updateBranch}/CHANGES.md`)
|
||||
|
||||
const updateBranch = appConfig.update_branch || "main"
|
||||
|
||||
let releaseNotes = await fetch(
|
||||
`https://raw.githubusercontent.com/cmdr2/stable-diffusion-ui/${updateBranch}/CHANGES.md`
|
||||
)
|
||||
if (!releaseNotes.ok) {
|
||||
console.error('[release-notes] Failed to get CHANGES.md.')
|
||||
console.error("[release-notes] Failed to get CHANGES.md.")
|
||||
return
|
||||
}
|
||||
releaseNotes = await releaseNotes.text()
|
||||
@ -46,4 +50,4 @@
|
||||
}
|
||||
},
|
||||
})
|
||||
})()
|
||||
})()
|
||||
|
@ -1,6 +1,7 @@
|
||||
/* SD-UI Selftest Plugin.js
|
||||
*/
|
||||
(function() { "use strict"
|
||||
;(function() {
|
||||
"use strict"
|
||||
const ID_PREFIX = "selftest-plugin"
|
||||
|
||||
const links = document.getElementById("community-links")
|
||||
@ -10,16 +11,18 @@
|
||||
}
|
||||
|
||||
// Add link to Jasmine SpecRunner
|
||||
const pluginLink = document.createElement('li')
|
||||
const pluginLink = document.createElement("li")
|
||||
const options = {
|
||||
'stopSpecOnExpectationFailure': "true",
|
||||
'stopOnSpecFailure': 'false',
|
||||
'random': 'false',
|
||||
'hideDisabled': 'false'
|
||||
stopSpecOnExpectationFailure: "true",
|
||||
stopOnSpecFailure: "false",
|
||||
random: "false",
|
||||
hideDisabled: "false",
|
||||
}
|
||||
const optStr = Object.entries(options).map(([key, val]) => `${key}=${val}`).join('&')
|
||||
const optStr = Object.entries(options)
|
||||
.map(([key, val]) => `${key}=${val}`)
|
||||
.join("&")
|
||||
pluginLink.innerHTML = `<a id="${ID_PREFIX}-starttest" href="${location.protocol}/plugins/core/SpecRunner.html?${optStr}" target="_blank"><i class="fa-solid fa-vial-circle-check"></i> Start SelfTest</a>`
|
||||
links.appendChild(pluginLink)
|
||||
|
||||
console.log('%s loaded!', ID_PREFIX)
|
||||
console.log("%s loaded!", ID_PREFIX)
|
||||
})()
|
Loading…
x
Reference in New Issue
Block a user