油猴脚本添加按钮并设置点击事件 - 自动化 Stable Diffusion 生成

油猴脚本添加按钮并设置点击事件 - 自动化 Stable Diffusion 生成

本文介绍如何使用油猴脚本在 Stable Diffusion 网站添加自定义按钮，并为按钮设置点击事件，实现自动生成图片的功能。

1. 添加按钮

首先，需要在脚本中添加两个按钮：'txt2img' 和 'img2img'。可以使用以下代码：

// Define the function to add the txt2img and img2img buttons
function addButtons() {
    // Get the prompt textarea and the generate button
    const promptTextarea = document.querySelector('#txt2img_prompt > label > textarea');
    const generateButton = document.querySelector('#txt2img_generate');

    // Check if the prompt textarea and the generate button exist
    if (!promptTextarea || !generateButton) {
        return;
    }

    // Create the txt2img button
    const txtToImgButton = document.createElement('button');
    txtToImgButton.innerText = 'txt2img';
    txtToImgButton.className = 'animate-flicker'; // Add a CSS class to the button
    txtToImgButton.style.marginTop = '280px';
    txtToImgButton.style.marginRight = '30px';

    // Create the img2img button
    const imgToImgButton = document.createElement('button');
    imgToImgButton.innerText = 'img2img';
    imgToImgButton.className = 'animate-flicker'; // Add a CSS class to the button
    imgToImgButton.style.marginTop = '280px';

    // Add the txt2img and img2img buttons to the page
    generateButton.insertAdjacentElement('afterend', imgToImgButton);
    generateButton.insertAdjacentElement('afterend', txtToImgButton);

    // ...
}

// Call the addButtons function to add the buttons to the page
addButtons();

2. 设置点击事件

接下来，需要为按钮添加点击事件监听器。以下代码展示了如何设置 'txt2img' 和 'img2img' 按钮的点击事件：

// Add event listeners to the txt2img and img2img buttons
txtToImgButton.addEventListener('click', function() {
    promptTextarea.value = '[img]' + promptTextarea.value.trim().replace(/\n/g, '[/img]\n[img]') + '[/img]';
    generateButton.click();
});

imgToImgButton.addEventListener('click', function() {
    promptTextarea.value = promptTextarea.value.trim().replace(/\n/g, '\n\n');
    generateButton.click();
});

3. 代码解析

1. promptTextarea.value = '[img]' + promptTextarea.value.trim().replace(/\n/g, '[/img]\n[img]') + '[/img]';：这段代码将文本框中的内容用 [img] 和 [/img] 包裹起来，以便 Stable Diffusion 识别。
2. generateButton.click();：这段代码模拟点击 'Generate' 按钮，触发图片生成。

4. 总结

通过上述步骤，您就可以使用油猴脚本添加自定义按钮，并为按钮设置点击事件，实现自动化生成图片的功能。您可以根据自己的需求调整代码，以实现更复杂的自动化功能。

旧的脚本里用的是：

function clicktxt2img(){

 var b1skip=gradioApp().querySelector('#txt2img_skip');
 if (isHide(b1skip)){
    console.log(lines[i]);
    if(lines[i]!=''){
      var txt2img_textarea = gradioApp().querySelector('#txt2img_prompt > label > textarea');
      txt2img_textarea.focus();
      txt2img_textarea.value=lines[i];

      txt2img_textarea.dispatchEvent(new Event('input', { bubbles: true }));

      var b1=gradioApp().querySelector('#txt2img_generate');
      b1.click();
    }
    i+=1;

    console.log('finish' + i);
 }

 if(i>=lines.length){
    toggleButton1.disabled=false;
    clearInterval(tida);
 }

}


  function clickimg2img(){

  var b2skip=gradioApp().querySelector('#img2img_skip');
  if (isHide(b2skip)){
     console.log(lines[i]);
     if(lines[i]!=''){
       var img2img_textarea = gradioApp().querySelector('#img2img_prompt > label > textarea');
       img2img_textarea.focus();
       img2img_textarea.value=lines[i];

       img2img_textarea.dispatchEvent(new Event('input', { bubbles: true }));

       var b2=gradioApp().querySelector('#img2img_generate');
       b2.click();
     }
     i+=1;

     console.log('finish' + i);
  }

  if(i>=lines.length){
     toggleButton2.disabled=false;
     clearInterval(tidb);
  }

}

这段代码实现的功能与上述代码类似，但使用方式有所不同。

1. clicktxt2img() 和 clickimg2img() 函数分别负责 'txt2img' 和 'img2img' 按钮的点击事件。
2. 代码中使用了 lines 数组存储要生成的图片的提示词。
3. 代码中使用了 i 变量来记录当前正在处理的提示词的索引。
4. 代码中使用了 gradioApp() 函数获取页面的元素。
5. 代码中使用了 isHide() 函数判断元素是否被隐藏。

这两种方法各有优劣，您可以根据自己的需求选择合适的方法。

注意：

1. 为了使脚本正常工作，您需要确保 Stable Diffusion 网站的页面结构没有发生变化。
2. 您可以根据自己的需求修改代码，以实现更复杂的功能。

希望本文对您有所帮助。