rixty/KoboldAI-Client
1
1
Fork 0
mirror of https://github.com/KoboldAI/KoboldAI-Client.git synced 2025-06-05 21:59:24 +02:00
Code Issues Projects Releases Wiki Activity

Add loading thing for image gen

Browse Source
This commit is contained in:
somebody
2022-11-24 23:36:04 -06:00
parent ec20b31931
commit 9ca741b09a
3 changed files with 49 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
static/koboldai.css
View File

@@ -2988,8 +2988,39 @@ input[type='range'] {
pointer-events:none; pointer-events:none;
} }
#action\ image {
width: 100%;
aspect-ratio: 1/1;
position: relative;
}
#image-loading {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100% !important;
aspect-ratio: 1/1;
background-color: rgba(0, 0, 0, 0.6);
/* Defer pointer events to the image in case a user wants to quickly
save / view an image after asking for a new image */
pointer-events: none;
}
.spinner {
animation: spin 1s linear infinite;
opacity: 0.7;
}
@keyframes spin { 100% { transform: rotate(360deg) } }
.action_image { .action_image {
width: var(--flyout_menu_width); width: 100%;
} }
/*Tooltip based on attribute /*Tooltip based on attribute

14
static/koboldai.js
View File

@@ -790,9 +790,12 @@ function var_changed(data) {
//Special Case for story picture //Special Case for story picture
} else if (data.classname == "story" && data.name == "picture") { } else if (data.classname == "story" && data.name == "picture") {
image_area = document.getElementById("action image"); image_area = document.getElementById("action image");
while (image_area.firstChild) {
image_area.removeChild(image_area.firstChild); let maybeImage = image_area.getElementsByClassName("action_image")[0];
} if (maybeImage) maybeImage.remove();
$el("#image-loading").classList.add("hidden");
if (data.value != "") { if (data.value != "") {
var image = new Image(); var image = new Image();
image.src = 'data:image/png;base64,'+data.value; image.src = 'data:image/png;base64,'+data.value;
@@ -5991,6 +5994,11 @@ $el("#aidgpromptnum").addEventListener("keydown", function(event) {
event.preventDefault(); event.preventDefault();
}); });
$el("#generate-image-button").addEventListener("click", function() {
$el("#image-loading").classList.remove("hidden");
socket.emit("generate_image", {});
});
/* -- Shiny New Chat -- */ /* -- Shiny New Chat -- */
function addMessage(author, content, actionId, afterMsgEl=null, time=null) { function addMessage(author, content, actionId, afterMsgEl=null, time=null) {
if (!time) time = Number(new Date()); if (!time) time = Number(new Date());

8
templates/settings flyout.html
View File

@@ -112,8 +112,12 @@
</div> </div>
<span id="debug-dump" class="cursor" onclick="openPopup('debug-file-prompt');">Download debug dump</span> <span id="debug-dump" class="cursor" onclick="openPopup('debug-file-prompt');">Download debug dump</span>
<div id="Images"> <div id="Images">
<button class="settings_button var_sync_alt_system_generating_image" onclick="socket.emit('generate_image', {})">Generate Image</button> <button id="generate-image-button" class="settings_button var_sync_alt_system_generating_image" onclick="socket.emit('generate_image', {})">Generate Image</button>
<div id="action image"></div> <div id="action image">
<div id="image-loading" class="hidden">
<div class="spinner material-icons-outlined">autorenew</div>
</div>
</div>
</div> </div>
</div> </div>
<div id="setting_menu_settings" class="hidden settings_category_area tab-target tab-target-settings"> <div id="setting_menu_settings" class="hidden settings_category_area tab-target tab-target-settings">