diff --git a/public/scripts/extensions/stable-diffusion/index.js b/public/scripts/extensions/stable-diffusion/index.js index c69ae9a43..fbeffa212 100644 --- a/public/scripts/extensions/stable-diffusion/index.js +++ b/public/scripts/extensions/stable-diffusion/index.js @@ -7,6 +7,7 @@ import { } from "../../../script.js"; import { getApiUrl, getContext, extension_settings, defaultRequestArgs } from "../../extensions.js"; import { stringFormat, initScrollHeight, resetScrollHeight } from "../../utils.js"; +export { MODULE_NAME }; // Wraps a string into monospace font-face span const m = x => `${x}`; @@ -15,6 +16,9 @@ const j = a => a.join(' / '); // Wraps a string into paragraph block const p = a => `

${a}

` +const MODULE_NAME = 'sd'; +const UPDATE_INTERVAL = 1000; + const postHeaders = { 'Content-Type': 'application/json', 'Bypass-Tunnel-Reminder': 'bypass', @@ -315,6 +319,104 @@ async function sendMessage(prompt, image) { context.saveChat(); } +function addSDGenButtons() { + const buttonHtml = ` +
+ `; + + const waitButtonHtml = ` +
+ ` + const dropdownHtml = ` +
+ Send me a picture of: + +
`; + + $('#send_but_sheld').prepend(buttonHtml); + $('#send_but_sheld').prepend(waitButtonHtml); + $(document.body).append(dropdownHtml) + + const button = $('#sd_gen'); + const waitButton = $("#sd_gen_wait"); + const dropdown = $('#sd_dropdown'); + waitButton.hide(); + dropdown.hide(); + button.hide(); + + let popper = Popper.createPopper(button.get(0), dropdown.get(0), { + placement: 'top-start', + }); + + $(document).on('click touchend', function (e) { + const target = $(e.target); + if (target.is(dropdown)) return; + if (target.is(button) && !dropdown.is(":visible") && $("#send_but").css('display') === 'flex') { + e.preventDefault(); + + dropdown.show(200); + popper.update(); + } else { + dropdown.hide(200); + } + }); +} + +async function moduleWorker() { + const context = getContext(); + + /* if (context.onlineStatus === 'no_connection') { + $('#sd_gen').hide(200); + } else if ($("#send_but").css('display') === 'flex') { + $('#sd_gen').show(200); + $("#sd_gen_wait").hide(200); + } else { + $('#sd_gen').hide(200); + $("#sd_gen_wait").show(200); + } */ + + context.onlineStatus === 'no_connection' + ? $('#sd_gen').hide(200) + : $('#sd_gen').show(200) +} + +addSDGenButtons(); +setInterval(moduleWorker, UPDATE_INTERVAL); + +$("#sd_dropdown [id]").on("click", function () { + var id = $(this).attr("id"); + if (id == "sd_you") { + console.log("doing /sd you"); + generatePicture('sd', 'you'); + } + + else if (id == "sd_face") { + console.log("doing /sd face"); + generatePicture('sd', 'face'); + } + + else if (id == "sd_me") { + console.log("doing /sd me"); + generatePicture('sd', 'me'); + } + + else if (id == "sd_world") { + console.log("doing /sd world"); + generatePicture('sd', 'world'); + } + + else if (id == "sd_last") { + console.log("doing /sd last"); + generatePicture('sd', 'last'); + } +}); + jQuery(async () => { getContext().registerSlashCommand('sd', generatePicture, ['picture', 'image'], helpString, true, true); diff --git a/public/scripts/extensions/stable-diffusion/style.css b/public/scripts/extensions/stable-diffusion/style.css index 0fe6446f8..07712cde8 100644 --- a/public/scripts/extensions/stable-diffusion/style.css +++ b/public/scripts/extensions/stable-diffusion/style.css @@ -1,3 +1,30 @@ .sd_settings label { display: block; +} + +#sd_gen { + order: 100; + width: 40px; + height: 40px; + margin: 0; + padding: 1px; + outline: none; + border: none; + cursor: pointer; + transition: 0.3s; + opacity: 0.7; + display: flex; + align-items: center; + justify-content: center; + +} + +#sd_gen:hover { + opacity: 1; + filter: brightness(1.2); +} + +#sd_dropdown { + z-index: 100; + backdrop-filter: blur(--SmartThemeBlurStrength); } \ No newline at end of file