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

ui/index.html

@@ -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>

ui/media/js/main.js

@@ -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) {
+function onUseAsInputClick(req, img) {
-    const imageElem = imageItemElem.querySelector('img')
+    const imgData = img.src
-    const imgData = imageElem.src
 
     initImageSelector.value = null
     initImagePreview.src = imgData
@@ -406,13 +410,12 @@ function onUseAsInputClick(req, imageItemElem) {
     samplerSelectionContainer.style.display = 'none'
 }
 
-function onDownloadImageClick(req, imageItemElem) {
+function onDownloadImageClick(req, img) {
-    const imageElem = imageItemElem.querySelector('img')
+    const imgData = img.src
-    const imgData = imageElem.src
+    const imageSeed = img.getAttribute('data-seed')
-    const imageSeed = imageElem.getAttribute('data-seed')
+    const imagePrompt = img.getAttribute('data-prompt')
-    const imagePrompt = imageElem.getAttribute('data-prompt')
+    const imageInferenceSteps = img.getAttribute('data-steps')
-    const imageInferenceSteps = imageElem.getAttribute('data-steps')
+    const imageGuidanceScale = img.getAttribute('data-guidance')
-    const imageGuidanceScale = imageElem.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) {
+function onMakeSimilarClick(req, img) {
-    const similarImagesCount = 5
-    const imageElem = imageItemElem.querySelector('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)
     })
 

ui/media/js/plugins.js

@@ -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: {}
+}