extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-02-22 21:32:03 +01:00
Code Issues Packages Projects Releases Wiki Activity

UI-side plugin system; Use PLUGINS['IMAGE_INFO_BUTTONS'] to add additional buttons on the generated images

Browse Source
This commit is contained in:
cmdr2 2022-10-19 19:50:05 +05:30
parent 9609350789
commit 5fa3a7ca44
3 changed files with 42 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/index.html
View File

@ -252,6 +252,7 @@
</div>
</body>
<script src="media/js/plugins.js?v=1"></script>
<script src="media/js/utils.js?v=2"></script>
<script src="media/js/inpainting-editor.js?v=1"></script>
<script src="media/js/image-modifiers.js"></script>

37
ui/media/js/main.js
View File

@ -376,6 +376,10 @@ function showImages(reqBody, res, outputContainer, livePreview) {
if (!req.use_upscale) {
buttons.upscaleBtn = { text: 'Upscale', on_click: getStartNewTaskHandler('upscale') }
}
// include the plugins
Object.assign(buttons, PLUGINS['IMAGE_INFO_BUTTONS'])
const imgItemInfo = imageItemElem.querySelector('.imgItemInfo')
const createButton = function(name, btnInfo) {
const newButton = document.createElement('button')
@ -383,7 +387,8 @@ function showImages(reqBody, res, outputContainer, livePreview) {
newButton.classList.add('tasksBtns')
newButton.innerText = btnInfo.text
newButton.addEventListener('click', function() {
btnInfo.on_click(req, imageItemElem)
let img = imageItemElem.querySelector('img')
btnInfo.on_click(req, img)
})
imgItemInfo.appendChild(newButton)
}
@ -392,9 +397,8 @@ function showImages(reqBody, res, outputContainer, livePreview) {
})
}
function onUseAsInputClick(req, imageItemElem) {
const imageElem = imageItemElem.querySelector('img')
const imgData = imageElem.src
function onUseAsInputClick(req, img) {
const imgData = img.src
initImageSelector.value = null
initImagePreview.src = imgData
@ -406,13 +410,12 @@ function onUseAsInputClick(req, imageItemElem) {
samplerSelectionContainer.style.display = 'none'
}
function onDownloadImageClick(req, imageItemElem) {
const imageElem = imageItemElem.querySelector('img')
const imgData = imageElem.src
const imageSeed = imageElem.getAttribute('data-seed')
const imagePrompt = imageElem.getAttribute('data-prompt')
const imageInferenceSteps = imageElem.getAttribute('data-steps')
const imageGuidanceScale = imageElem.getAttribute('data-guidance')
function onDownloadImageClick(req, img) {
const imgData = img.src
const imageSeed = img.getAttribute('data-seed')
const imagePrompt = img.getAttribute('data-prompt')
const imageInferenceSteps = img.getAttribute('data-steps')
const imageGuidanceScale = img.getAttribute('data-guidance')
const imgDownload = document.createElement('a')
imgDownload.download = createFileName(imagePrompt, imageSeed, imageInferenceSteps, imageGuidanceScale, req['output_format'])
@ -421,12 +424,11 @@ function onDownloadImageClick(req, imageItemElem) {
}
function getStartNewTaskHandler(mode) {
return function(reqBody, imageItemElem) {
return function(reqBody, img) {
if (!isServerAvailable()) {
alert('The server is not available.')
return
}
const imageElem = imageItemElem.querySelector('img')
const newTaskRequest = getCurrentUserRequest()
switch (mode) {
case 'img2img':
@ -438,7 +440,7 @@ function getStartNewTaskHandler(mode) {
if (!newTaskRequest.reqBody.init_image || mode === 'img2img_X2') {
newTaskRequest.reqBody.sampler = 'ddim'
newTaskRequest.reqBody.prompt_strength = '0.5'
newTaskRequest.reqBody.init_image = imageElem.src
newTaskRequest.reqBody.init_image = img.src
delete newTaskRequest.reqBody.mask
} else {
newTaskRequest.reqBody.seed = 1 + newTaskRequest.reqBody.seed
@ -471,10 +473,7 @@ function getStartNewTaskHandler(mode) {
}
}
function onMakeSimilarClick(req, imageItemElem) {
const similarImagesCount = 5
const imageElem = imageItemElem.querySelector('img')
function onMakeSimilarClick(req, img) {
let newTaskRequest = getCurrentUserRequest()
newTaskRequest.reqBody = Object.assign({}, req, {
@ -483,7 +482,7 @@ function onMakeSimilarClick(req, imageItemElem) {
num_inference_steps: 50,
guidance_scale: 7.5,
prompt_strength: 0.7,
init_image: imageElem.src,
init_image: img.src,
seed: Math.floor(Math.random() * 10000000)
})

23
ui/media/js/plugins.js Normal file
View File

@ -0,0 +1,23 @@
const PLUGIN_API_VERSION = "1.0"
const PLUGINS = {
/**
* Register new buttons to show on each output image.
*
* Example:
* PLUGINS['IMAGE_INFO_BUTTONS']['myCustomVariationButton'] = {
* text: 'Make a Similar Image',
* on_click: function(origRequest, image) {
* let newTaskRequest = getCurrentUserRequest()
* newTaskRequest.reqBody = Object.assign({}, origRequest, {
* init_image: image.src,
* prompt_strength: 0.7,
* seed: Math.floor(Math.random() * 10000000)
* })
* newTaskRequest.seed = newTaskRequest.reqBody.seed
* createTask(newTaskRequest)
* }
* }
*/
IMAGE_INFO_BUTTONS: {}
}