Skip to content

Commit 2cba688

Browse files
mcmonkey4evamcmonkey4eva
committed
alt direct prompt textbox mode
1 parent a514b4f commit 2cba688

File tree

5 files changed

+80
-3
lines changed

5 files changed

+80
-3
lines changed

‎src/Pages/Text2Image.cshtml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,11 @@
4747
<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>
4848
<div class="main-image-area" id="main_image_area">
4949
<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>
50+
<div class="alt_prompt_region" id="alt_prompt_region" style="display:none;">
51+
<textarea id="alt_prompt_textbox" class="alt_prompt_textbox" rows="1" placeholder="Type your prompt here..."></textarea>
52+
<button class="alt-prompt-button basic-button" id="alt_generate_button" onclick="javascript:doGenerate()">Generate</button>
53+
<button class="interrupt-button interrupt-button-none alt-interrupt" id="alt_interrupt_button" onclick="javascript:doInterrupt()">Interrupt</button>
54+
</div>
5055
</div>
5156
<div class="model-block-menu-button t2i-area-quicktools" onclick="javascript:show_t2i_quicktools()">Quick Tools</div>
5257
<div class="sui-popover sui_popover_model" id="popover_quicktools">

‎src/wwwroot/css/genpage.css‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ body {
150150
}
151151
.current_image img {
152152
max-width: 100%;
153-
max-height: calc(100% - 5rem);
153+
max-height: calc(max(15rem, 100% - 5rem));
154154
}
155155
.current_image_batch {
156156
display: inline-block;
@@ -581,3 +581,18 @@ body {
581581
height: calc(100% - 7rem);
582582
overflow: auto;
583583
}
584+
.alt-interrupt {
585+
margin-left: 5px;
586+
}
587+
.alt_prompt_region {
588+
position: relative;
589+
top: -3.5rem;
590+
border-top: 1px solid var(--light-border);
591+
width: fit-content;
592+
padding-top: 0.5rem;
593+
}
594+
.alt_prompt_textbox {
595+
margin-left: 1rem;
596+
width: 100vw - 12rem;
597+
border-radius: 0.2rem;
598+
}

‎src/wwwroot/js/genpage.js‎

Lines changed: 50 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -203,6 +203,7 @@ function updateCurrentStatusDirect(data) {
203203
}
204204
let total = num_current_gens + num_models_loading + num_live_gens + num_backends_waiting;
205205
getRequiredElementById('interrupt_button').classList.toggle('interrupt-button-none', total == 0);
206+
getRequiredElementById('alt_interrupt_button').classList.toggle('interrupt-button-none', total == 0);
206207
let elem = getRequiredElementById('num_jobs_span');
207208
function autoBlock(num, text) {
208209
if (num == 0) {
@@ -443,6 +444,9 @@ function genToolsList() {
443444
let generateButton = getRequiredElementById('generate_button');
444445
let generateButtonRawText = generateButton.innerText;
445446
let generateButtonRawOnClick = generateButton.onclick;
447+
let altGenerateButton = getRequiredElementById('alt_generate_button');
448+
let altGenerateButtonRawText = generateButton.innerText;
449+
let altGenerateButtonRawOnClick = generateButton.onclick;
446450
toolSelector.value = '';
447451
// TODO: Dynamic-from-server option list generation
448452
toolSelector.addEventListener('change', () => {
@@ -451,6 +455,8 @@ function genToolsList() {
451455
}
452456
generateButton.innerText = generateButtonRawText;
453457
generateButton.onclick = generateButtonRawOnClick;
458+
altGenerateButton.innerText = altGenerateButtonRawText;
459+
altGenerateButton.onclick = altGenerateButtonRawOnClick;
454460
let tool = toolSelector.value;
455461
if (tool == '') {
456462
return;
@@ -461,6 +467,8 @@ function genToolsList() {
461467
if (override) {
462468
generateButton.innerText = override.text;
463469
generateButton.onclick = override.run;
470+
altGenerateButton.innerText = override.text;
471+
altGenerateButton.onclick = override.run;
464472
}
465473
});
466474
}
@@ -520,6 +528,8 @@ function pageSizer() {
520528
let currentImageBatch = getRequiredElementById('current_image_batch');
521529
let midSplitButton = getRequiredElementById('t2i-mid-split-quickbutton');
522530
let topSplitButton = getRequiredElementById('t2i-top-split-quickbutton');
531+
let altRegion = getRequiredElementById('alt_prompt_region');
532+
let altText = getRequiredElementById('alt_prompt_textbox');
523533
let topDrag = false;
524534
let topDrag2 = false;
525535
let midDrag = false;
@@ -532,19 +542,23 @@ function pageSizer() {
532542
inputSidebar.style.width = `${barTopLeft}`;
533543
mainInputsAreaWrapper.style.width = `${barTopLeft}`;
534544
inputSidebar.style.display = leftShut ? 'none' : '';
545+
altRegion.style.display = leftShut ? 'block' : 'none';
546+
altRegion.style.width = `calc(100vw - ${barTopLeft} - ${barTopRight} - 10px)`;
535547
mainImageArea.style.width = `calc(100vw - ${barTopLeft})`;
548+
altText.style.width = `calc(100vw - ${barTopLeft} - ${barTopRight} - 15rem)`;
536549
currentImage.style.width = `calc(100vw - ${barTopLeft} - ${barTopRight} - 10px)`;
537550
currentImageBatch.style.width = `${barTopRight}`;
538551
topSplitButton.innerHTML = leftShut ? '&#x21DB;' : '&#x21DA;';
539552
midSplitButton.innerHTML = midForceToBottom ? '&#x290A;' : '&#x290B;';
553+
let altHeight = leftShut ? `(${altText.offsetHeight}px + 2rem)` :'0px';
540554
if (pageBarMid != -1 || midForceToBottom) {
541555
let fixed = midForceToBottom ? `9rem` : `${pageBarMid}px`;
542556
topSplit.style.height = `calc(100vh - ${fixed})`;
543557
topSplit2.style.height = `calc(100vh - ${fixed})`;
544558
inputSidebar.style.height = `calc(100vh - ${fixed})`;
545559
mainInputsAreaWrapper.style.height = `calc(100vh - ${fixed} - 7rem)`;
546560
mainImageArea.style.height = `calc(100vh - ${fixed})`;
547-
currentImage.style.height = `calc(100vh - ${fixed})`;
561+
currentImage.style.height = `calc(100vh - ${fixed} - ${altHeight})`;
548562
currentImageBatch.style.height = `calc(100vh - ${fixed} - 2rem)`;
549563
topBar.style.height = `calc(100vh - ${fixed})`;
550564
bottomBarContent.style.height = `calc(${fixed} - 2rem)`;
@@ -555,7 +569,7 @@ function pageSizer() {
555569
inputSidebar.style.height = '';
556570
mainInputsAreaWrapper.style.height = '';
557571
mainImageArea.style.height = '';
558-
currentImage.style.height = '';
572+
currentImage.style.height = `calc(49vh - ${altHeight})`;
559573
currentImageBatch.style.height = '';
560574
topBar.style.height = '';
561575
bottomBarContent.style.height = '';
@@ -606,6 +620,7 @@ function pageSizer() {
606620
pageBarTop = Math.max(pageBarTop, 400);
607621
setPageBars();
608622
e.preventDefault();
623+
altText.dispatchEvent(new Event('input'));
609624
}, true);
610625
document.addEventListener('mousemove', (e) => {
611626
let offX = e.pageX;
@@ -637,6 +652,39 @@ function pageSizer() {
637652
setPageBars();
638653
});
639654
}
655+
altText.addEventListener('keydown', (e) => {
656+
if (e.key == 'Enter' && !e.shiftKey) {
657+
altText.dispatchEvent(new Event('change'));
658+
getRequiredElementById('alt_generate_button').click();
659+
e.preventDefault();
660+
e.stopPropagation();
661+
return false;
662+
}
663+
});
664+
altText.addEventListener('change', (e) => {
665+
let inputPrompt = document.getElementById('input_prompt');
666+
if (inputPrompt) {
667+
inputPrompt.value = altText.value;
668+
}
669+
setCookie(`lastparam_input_prompt`, altText.value, 0.25);
670+
});
671+
function altTextSize() {
672+
altText.style.height = 'auto';
673+
altText.style.height = `${altText.scrollHeight + 5}px`;
674+
altRegion.style.top = `calc(-${altText.offsetHeight}px - 2rem)`;
675+
}
676+
altText.addEventListener('input', () => {
677+
altTextSize();
678+
setCookie(`lastparam_input_prompt`, altText.value, 0.25);
679+
setPageBars();
680+
});
681+
altTextSize();
682+
function altPromptSizeHandle() {
683+
altRegion.style.top = `calc(-${altText.offsetHeight}px - 2rem)`;
684+
setPageBars();
685+
}
686+
altPromptSizeHandle();
687+
new ResizeObserver(altPromptSizeHandle).observe(altText);
640688
}
641689

642690
function show_t2i_quicktools() {

‎src/wwwroot/js/genpage_params.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -243,6 +243,14 @@ function genInputs(delay_final = false) {
243243
});
244244
resTrick();
245245
}
246+
let inputPrompt = document.getElementById('input_prompt');
247+
if (inputPrompt) {
248+
let altText = getRequiredElementById('alt_prompt_textbox');
249+
inputPrompt.addEventListener('change', () => {
250+
altText.value = inputPrompt.value;
251+
altText.dispatchEvent(new Event('input'));
252+
});
253+
}
246254
let inputLoras = document.getElementById('input_loras');
247255
if (inputLoras) {
248256
inputLoras.addEventListener('change', () => {

‎src/wwwroot/js/util.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -293,6 +293,7 @@ function autoS(num) {
293293
* Sets a cookie with the given name and value, which will expire after the given number of days.
294294
*/
295295
function setCookie(name, value, expirationDays, sameSite = 'Lax') {
296+
value = encodeURIComponent(value);
296297
const d = new Date();
297298
d.setTime(d.getTime() + (expirationDays * 24 * 60 * 60 * 1000));
298299
document.cookie = `${name}=${value};expires=${d.toUTCString()};path=/;SameSite=${sameSite}`;

0 commit comments

Comments
 (0)