diff --git a/CHANGES.md b/CHANGES.md index 6fb7d025..aa7947a5 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -27,6 +27,7 @@ - Support loading models in the safetensor format, for improved safety ### Detailed changelog +* 2.4.19 - 10 Dec 2022 - Show init img in task list * 2.4.19 - 7 Dec 2022 - Use pre-trained hypernetworks while generating images. Thanks @C0bra5 * 2.4.19 - 6 Dec 2022 - Allow processing new tasks first. Thanks @madrang * 2.4.19 - 6 Dec 2022 - Allow reordering the task queue (by dragging tasks). Thanks @madrang diff --git a/ui/media/css/main.css b/ui/media/css/main.css index 6390a229..2c9d0054 100644 --- a/ui/media/css/main.css +++ b/ui/media/css/main.css @@ -945,6 +945,7 @@ input::file-selector-button { height: 16px; position: relative; transition: 0.25s 1s border, 0.25s 1s height; + clear: both; } .progress-bar > div { background: var(--accent-color); @@ -1096,6 +1097,15 @@ button:active { left: 1px; } +div.task-initimg > img { + margin-right: 6px; + display: block; +} +div.task-fs-initimage { + display: none; + position: absolute; +} + button#save-system-settings-btn { padding: 4pt 8pt; } diff --git a/ui/media/js/main.js b/ui/media/js/main.js index d16b8b88..325d035a 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -757,8 +757,37 @@ function onTaskStart(task) { previewTools.style.display = 'block' } +/* Hover effect for the init image in the task list */ +function createInitImageHover(taskEntry) { + var $tooltip = $( taskEntry.querySelector('.task-fs-initimage') ) + $( taskEntry.querySelector('div.task-initimg > img') ).on('mouseenter', function() { + var img = this, + $img = $(img), + offset = $img.offset(); + + $tooltip + .css({ + 'top': offset.top, + 'left': offset.left, + 'z-index': 99999, + 'display': 'block' + }) + .append($img.clone().css({width:"", height:""})); + }) + $tooltip.on('mouseleave', function() { + $tooltip.empty().addClass('hidden'); + }); +} + function createTask(task) { - let taskConfig = `Seed: ${task.seed}, Sampler: ${task.reqBody.sampler}, Inference Steps: ${task.reqBody.num_inference_steps}, Guidance Scale: ${task.reqBody.guidance_scale}, Model: ${task.reqBody.use_stable_diffusion_model}` + let taskConfig = '' + + if (task.reqBody.init_image !== undefined) { + let h = 80 + let w = task.reqBody.width * h / task.reqBody.height >>0 + taskConfig += `
` + } + taskConfig += `Seed: ${task.seed}, Sampler: ${task.reqBody.sampler}, Inference Steps: ${task.reqBody.num_inference_steps}, Guidance Scale: ${task.reqBody.guidance_scale}, Model: ${task.reqBody.use_stable_diffusion_model}` if (task.reqBody.use_vae_model.trim() !== '') { taskConfig += `, VAE: ${task.reqBody.use_vae_model}` } @@ -797,6 +826,11 @@ function createTask(task) { createCollapsibles(taskEntry) + + if (task.reqBody.init_image !== undefined) { + createInitImageHover(taskEntry) + } + task['taskStatusLabel'] = taskEntry.querySelector('.taskStatusLabel') task['outputContainer'] = taskEntry.querySelector('.img-preview') task['outputMsg'] = taskEntry.querySelector('.outputMsg')