Skip to content

Commit

Permalink
alt direct prompt textbox mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@mcmonkey4eva
mcmonkey4eva committed Aug 20, 2023
1 parent a514b4f commit 2cba688
Show file tree
Hide file tree
Showing 5 changed files with 80 additions and 3 deletions.
5 changes: 5 additions & 0 deletions src/Pages/Text2Image.cshtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,11 @@
<div class="t2i-top-split-bar splitter-bar" id="t2i-top-split-bar"><div class="t2i-split-quickbutton t2i-top-split-quickbutton" id="t2i-top-split-quickbutton">&#x21DA;</div></div>
<div class="main-image-area" id="main_image_area">
<div class="current_image" id="current_image"></div><div class="t2i-top-split-bar splitter-bar" id="t2i-top-2nd-split-bar"></div><div class="current_image_batch" id="current_image_batch"></div>
<div class="alt_prompt_region" id="alt_prompt_region" style="display:none;">
<textarea id="alt_prompt_textbox" class="alt_prompt_textbox" rows="1" placeholder="Type your prompt here..."></textarea>
<button class="alt-prompt-button basic-button" id="alt_generate_button" onclick="javascript:doGenerate()">Generate</button>
<button class="interrupt-button interrupt-button-none alt-interrupt" id="alt_interrupt_button" onclick="javascript:doInterrupt()">Interrupt</button>
</div>
</div>
<div class="model-block-menu-button t2i-area-quicktools" onclick="javascript:show_t2i_quicktools()">Quick Tools</div>
<div class="sui-popover sui_popover_model" id="popover_quicktools">
Expand Down
17 changes: 16 additions & 1 deletion src/wwwroot/css/genpage.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ body {
}
.current_image img {
max-width: 100%;
max-height: calc(100% - 5rem);
max-height: calc(max(15rem, 100% - 5rem));
}
.current_image_batch {
display: inline-block;
Expand Down Expand Up @@ -581,3 +581,18 @@ body {
height: calc(100% - 7rem);
overflow: auto;
}
.alt-interrupt {
margin-left: 5px;
}
.alt_prompt_region {
position: relative;
top: -3.5rem;
border-top: 1px solid var(--light-border);
width: fit-content;
padding-top: 0.5rem;
}
.alt_prompt_textbox {
margin-left: 1rem;
width: 100vw - 12rem;
border-radius: 0.2rem;
}
52 changes: 50 additions & 2 deletions src/wwwroot/js/genpage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,7 @@ function updateCurrentStatusDirect(data) {
}
let total = num_current_gens + num_models_loading + num_live_gens + num_backends_waiting;
getRequiredElementById('interrupt_button').classList.toggle('interrupt-button-none', total == 0);
getRequiredElementById('alt_interrupt_button').classList.toggle('interrupt-button-none', total == 0);
let elem = getRequiredElementById('num_jobs_span');
function autoBlock(num, text) {
if (num == 0) {
Expand Down Expand Up @@ -443,6 +444,9 @@ function genToolsList() {
let generateButton = getRequiredElementById('generate_button');
let generateButtonRawText = generateButton.innerText;
let generateButtonRawOnClick = generateButton.onclick;
let altGenerateButton = getRequiredElementById('alt_generate_button');
let altGenerateButtonRawText = generateButton.innerText;
let altGenerateButtonRawOnClick = generateButton.onclick;
toolSelector.value = '';
// TODO: Dynamic-from-server option list generation
toolSelector.addEventListener('change', () => {
Expand All @@ -451,6 +455,8 @@ function genToolsList() {
}
generateButton.innerText = generateButtonRawText;
generateButton.onclick = generateButtonRawOnClick;
altGenerateButton.innerText = altGenerateButtonRawText;
altGenerateButton.onclick = altGenerateButtonRawOnClick;
let tool = toolSelector.value;
if (tool == '') {
return;
Expand All @@ -461,6 +467,8 @@ function genToolsList() {
if (override) {
generateButton.innerText = override.text;
generateButton.onclick = override.run;
altGenerateButton.innerText = override.text;
altGenerateButton.onclick = override.run;
}
});
}
Expand Down Expand Up @@ -520,6 +528,8 @@ function pageSizer() {
let currentImageBatch = getRequiredElementById('current_image_batch');
let midSplitButton = getRequiredElementById('t2i-mid-split-quickbutton');
let topSplitButton = getRequiredElementById('t2i-top-split-quickbutton');
let altRegion = getRequiredElementById('alt_prompt_region');
let altText = getRequiredElementById('alt_prompt_textbox');
let topDrag = false;
let topDrag2 = false;
let midDrag = false;
Expand All @@ -532,19 +542,23 @@ function pageSizer() {
inputSidebar.style.width = `${barTopLeft}`;
mainInputsAreaWrapper.style.width = `${barTopLeft}`;
inputSidebar.style.display = leftShut ? 'none' : '';
altRegion.style.display = leftShut ? 'block' : 'none';
altRegion.style.width = `calc(100vw - ${barTopLeft} - ${barTopRight} - 10px)`;
mainImageArea.style.width = `calc(100vw - ${barTopLeft})`;
altText.style.width = `calc(100vw - ${barTopLeft} - ${barTopRight} - 15rem)`;
currentImage.style.width = `calc(100vw - ${barTopLeft} - ${barTopRight} - 10px)`;
currentImageBatch.style.width = `${barTopRight}`;
topSplitButton.innerHTML = leftShut ? '&#x21DB;' : '&#x21DA;';
midSplitButton.innerHTML = midForceToBottom ? '&#x290A;' : '&#x290B;';
let altHeight = leftShut ? `(${altText.offsetHeight}px + 2rem)` :'0px';
if (pageBarMid != -1 || midForceToBottom) {
let fixed = midForceToBottom ? `9rem` : `${pageBarMid}px`;
topSplit.style.height = `calc(100vh - ${fixed})`;
topSplit2.style.height = `calc(100vh - ${fixed})`;
inputSidebar.style.height = `calc(100vh - ${fixed})`;
mainInputsAreaWrapper.style.height = `calc(100vh - ${fixed} - 7rem)`;
mainImageArea.style.height = `calc(100vh - ${fixed})`;
currentImage.style.height = `calc(100vh - ${fixed})`;
currentImage.style.height = `calc(100vh - ${fixed} - ${altHeight})`;
currentImageBatch.style.height = `calc(100vh - ${fixed} - 2rem)`;
topBar.style.height = `calc(100vh - ${fixed})`;
bottomBarContent.style.height = `calc(${fixed} - 2rem)`;
Expand All @@ -555,7 +569,7 @@ function pageSizer() {
inputSidebar.style.height = '';
mainInputsAreaWrapper.style.height = '';
mainImageArea.style.height = '';
currentImage.style.height = '';
currentImage.style.height = `calc(49vh - ${altHeight})`;
currentImageBatch.style.height = '';
topBar.style.height = '';
bottomBarContent.style.height = '';
Expand Down Expand Up @@ -606,6 +620,7 @@ function pageSizer() {
pageBarTop = Math.max(pageBarTop, 400);
setPageBars();
e.preventDefault();
altText.dispatchEvent(new Event('input'));
}, true);
document.addEventListener('mousemove', (e) => {
let offX = e.pageX;
Expand Down Expand Up @@ -637,6 +652,39 @@ function pageSizer() {
setPageBars();
});
}
altText.addEventListener('keydown', (e) => {
if (e.key == 'Enter' && !e.shiftKey) {
altText.dispatchEvent(new Event('change'));
getRequiredElementById('alt_generate_button').click();
e.preventDefault();
e.stopPropagation();
return false;
}
});
altText.addEventListener('change', (e) => {
let inputPrompt = document.getElementById('input_prompt');
if (inputPrompt) {
inputPrompt.value = altText.value;
}
setCookie(`lastparam_input_prompt`, altText.value, 0.25);
});
function altTextSize() {
altText.style.height = 'auto';
altText.style.height = `${altText.scrollHeight + 5}px`;
altRegion.style.top = `calc(-${altText.offsetHeight}px - 2rem)`;
}
altText.addEventListener('input', () => {
altTextSize();
setCookie(`lastparam_input_prompt`, altText.value, 0.25);
setPageBars();
});
altTextSize();
function altPromptSizeHandle() {
altRegion.style.top = `calc(-${altText.offsetHeight}px - 2rem)`;
setPageBars();
}
altPromptSizeHandle();
new ResizeObserver(altPromptSizeHandle).observe(altText);
}

function show_t2i_quicktools() {
Expand Down
8 changes: 8 additions & 0 deletions src/wwwroot/js/genpage_params.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,6 +243,14 @@ function genInputs(delay_final = false) {
});
resTrick();
}
let inputPrompt = document.getElementById('input_prompt');
if (inputPrompt) {
let altText = getRequiredElementById('alt_prompt_textbox');
inputPrompt.addEventListener('change', () => {
altText.value = inputPrompt.value;
altText.dispatchEvent(new Event('input'));
});
}
let inputLoras = document.getElementById('input_loras');
if (inputLoras) {
inputLoras.addEventListener('change', () => {
Expand Down
1 change: 1 addition & 0 deletions src/wwwroot/js/util.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -293,6 +293,7 @@ function autoS(num) {
* Sets a cookie with the given name and value, which will expire after the given number of days.
*/
function setCookie(name, value, expirationDays, sameSite = 'Lax') {
value = encodeURIComponent(value);
const d = new Date();
d.setTime(d.getTime() + (expirationDays * 24 * 60 * 60 * 1000));
document.cookie = `${name}=${value};expires=${d.toUTCString()};path=/;SameSite=${sameSite}`;
Expand Down

0 comments on commit 2cba688

Please sign in to comment.