見出し画像

【無料】dynamic-prompts改良し、ワイルドカードファイルを簡単にコピーするボタン追加する方法

nobin

ワイルドカードにお世話になっております。
Stable Diffusionのワイルドカードは、下記拡張機能としてインストール可能です。

ワイルドカードは、ながら生成に大いに役立つので、外出・仕事中にランダムで生成することできるので、機能としては必須機能です。
私の場合は、ちょこちょこワイルドカードを作成しては、生成結果を試したりするので、よくコピペします。

ワイルドカードを使用する流れ

現状ワイルドカードをtxt2imgに貼り付ける流れは下記になります。

  1. ワイルドカード管理-Widlcards Managerをクリック

  2. 左側にあるwildcarsをクリックして対象のワイルドカードをクリック

  3. 2でクリックしたものがワイルドカードファイル-wildcards fileにて__wildcards__と表記されるのを範囲指定でコピーしたものを張り付ける

  4. txt2imgにてコピーしたものを張り付ける

この一連の流れで唯一失敗する部分が４の範囲指定のコピーです。
外出などで残り時間が限られている場合にコピーをミスり、帰宅後に生成結果を見ると凄いランダム性のものが生成され、200枚の不要な生成と1枚の神ガチャが登場というのがあります。
この状態が一番嫌なのと普通の時でもミスったりします。

範囲指定せずにワイルドカードファイル-wildcards file内のinput部分をクリックしてCtrl+Aで全部選択できます。
範囲指定より確実にコピーできますが、理想は全てマウスで完了させたい！！という小さいな要望が出てきたので、自分でdynamic-promptsのファイルを記載してボタンを追加し、ボタンをクリックすることでワイルドカードファイルをコピーできるものを作成しました。

実施した内容と完成内容

ワイルドカードファイル-wildcards fileの横にコピーボタンを押して、そのファイル内の情報をクリップボードにコピーするというカンタンな機能です。

ワイルドカードを選択するとワイルドカードファイルにコードが表示されるのでそれをボタンクリックでコピーする内容となります。

gifの画像張るとアップロードが失敗するのでgifで見たい方はX（旧Twitter）で確認してください。

下記から紹介しますが、自己責任でお願いします。
WEBUIのフレームワークを理解していないので、CSSとJavaScriptでなんとか頑張って実施しました。

変更するファイル

下記のdynamic-prompts内にあるファイルを修正します。

C:\stable-diffusion-webui\extensions\sd-dynamic-prompts

変更するファイルは、２つです。

  • dynamic_prompting.js

  • style.css

dynamic_prompting.jsの追記内容

普通にコードを書いても反映されないので、ログ出力させ、確認するとボタンが追加されているので画面上ではボタンがなかったりと悪戦苦闘しました。
ボタンの表示は、読み込み遅延設定で表示できましたが、環境によって読み込む時間が違うため、5秒後に表示するようにしています。
dynamic_prmpting.jsは使用しているWEBUIで異なりますが、下記のような場所に格納されています。

C:\stable-diffusion-webui\extensions\sd-dynamic-prompts\javascript\dynamic_prompting.js

dynamic_prompting.js内の一番下に下記コードを追加します。

addCopyButtonToLabel(
  '#sddp-wildcard-file-name label.svelte-1f354aw', 
  '#sddp-wildcard-file-name textarea.svelte-1f354aw'
);

function addCopyButtonToLabel(targetLabelSelector, targetTextareaSelector, delay = 5000) {
  setTimeout(() => {
    const targetElement = document.querySelector(targetLabelSelector);
    if (targetElement) {
      // ボタンを作成
      const button = document.createElement("button");
      button.textContent = "Copy"; // ボタンのテキスト
      button.style.marginLeft = "10px"; // 横に並べるためのマージンを追加
      button.style.width = "20%"; 
      button.style.border = "1px solid #374151"; 
      button.style.borderRadius = "8px";
      button.style.transition = "color 1s ease, text-shadow 1s ease"; // 色と文字装飾の遷移効果

      // ボタンクリック時の処理
      button.addEventListener("click", () => {
        const textarea = document.querySelector(targetTextareaSelector);
        if (textarea && textarea.value.trim()) { // 値が空でないかチェック
          // クリップボードにコピー
          navigator.clipboard.writeText(textarea.value).then(() => {
            // ボタンのスタイルを変更
            button.textContent = "Copied!";
            button.style.color = "red";
            button.style.textShadow = "0px 0px 4px rgba(255, 0, 0, 0.8)";

            // 3秒後にゆっくり元に戻す
            setTimeout(() => {
              button.textContent = "Copy";
              button.style.color = ""; // デフォルト色に戻す
              button.style.textShadow = ""; // 影を削除
            }, 3000);
          });
        }
      });

      // 親ノードに追加
      if (targetElement.parentNode) {
        targetElement.parentNode.insertBefore(button, targetElement.nextSibling);
      }
    }
  }, delay); // 指定された遅延時間後に実行
}

jsの設定内容は、ワイルドカードファイル-wildcards-fileの横にボタンを入れ、ボタンをクリックするとコピーするようにしています。
一応ファイルも置いておきます。

style.cssの追記内容

style.cssはdynamic-promptsの直下にあります。

C:\stable-diffusion-webui\extensions\sd-dynamic-prompts\style.css

上記のCSSの一番下に下記コードを追加します。

/* ワイルドカードファイル部分CSS調整 */
#sddp-wildcard-file-name{
    display: flex;
}

#sddp-wildcard-file-name label.svelte-1f354aw.svelte-1f354aw{
    width: 75% !important;
}

CSSは、追加したボタンを横並びにするのと ワイルドカードファイル-wildcards fileの幅を75%に設定し、見た目を整えています。

ちょっとした失敗

最初にclassで指定しましたが、classは共通のものがあるため、コピーボタンを追加のjsを入れるとワイルドカード部分に適用されなかったり、CSSもclassで指定すると学習タブの部分まで反映されたりでした。
IDは、ユニークで重複なしなのでIDをベースに設定して完了しました。

コーヒー代

良かったら、コーヒー代よろしくお願いします。
タリーズの缶コーヒーが好きです。
次回は、何とか気合をいれてワイルドカードをさらに有効活用する拡張機能を作りたいと思います。
サポートよろしくです('ω')v

ここから先は

0字

¥ 150

よろしければ応援よろしくお願いします('ω')b