354 lines
12 KiB
JavaScript
354 lines
12 KiB
JavaScript
"use strict";
|
|
|
|
|
|
function getActivePrompt() {
|
|
const currentTab = get_uiCurrentTabContent();
|
|
switch (currentTab.id) {
|
|
case "tab_txt2img":
|
|
return currentTab.querySelector("#txt2img_prompt textarea");
|
|
case "tab_img2img":
|
|
return currentTab.querySelector("#img2img_prompt textarea");
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function getActiveNegativePrompt() {
|
|
const currentTab = get_uiCurrentTabContent();
|
|
switch (currentTab.id) {
|
|
case "tab_txt2img":
|
|
return currentTab.querySelector("#txt2img_neg_prompt textarea");
|
|
case "tab_img2img":
|
|
return currentTab.querySelector("#img2img_neg_prompt textarea");
|
|
}
|
|
return null;
|
|
}
|
|
|
|
|
|
//button's click function
|
|
function open_model_url(event, model_type, search_term){
|
|
console.log("start open_model_url");
|
|
|
|
//get hidden components of extension
|
|
let js_msg_txtbox = gradioApp().querySelector("#ch_js_msg_txtbox textarea");
|
|
let js_open_url_btn = gradioApp().getElementById("ch_js_open_url_btn");
|
|
|
|
|
|
//msg to python side
|
|
let msg = {
|
|
"action": "",
|
|
"model_type": "",
|
|
"search_term": "",
|
|
"prompt": "",
|
|
"neg_prompt": "",
|
|
}
|
|
|
|
|
|
msg["action"] = "open_url";
|
|
msg["model_type"] = model_type;
|
|
msg["search_term"] = search_term;
|
|
msg["prompt"] = "";
|
|
msg["neg_prompt"] = "";
|
|
|
|
// fill to msg box
|
|
js_msg_txtbox.value = JSON.stringify(msg);
|
|
js_msg_txtbox.dispatchEvent(new Event("input"));
|
|
|
|
//click hidden button
|
|
js_open_url_btn.click();
|
|
|
|
console.log("end open_model_url");
|
|
|
|
|
|
event.stopPropagation()
|
|
event.preventDefault()
|
|
|
|
}
|
|
|
|
function add_trigger_words(event, model_type, search_term){
|
|
console.log("start add_trigger_words");
|
|
|
|
//get hidden components of extension
|
|
let js_msg_txtbox = gradioApp().querySelector("#ch_js_msg_txtbox textarea");
|
|
let js_add_trigger_words_btn = gradioApp().getElementById("ch_js_add_trigger_words_btn");
|
|
|
|
|
|
|
|
//msg to python side
|
|
let msg = {
|
|
"action": "",
|
|
"model_type": "",
|
|
"search_term": "",
|
|
"prompt": "",
|
|
"neg_prompt": "",
|
|
}
|
|
|
|
msg["action"] = "add_trigger_words";
|
|
msg["model_type"] = model_type;
|
|
msg["search_term"] = search_term;
|
|
msg["neg_prompt"] = "";
|
|
|
|
// get active prompt
|
|
let prompt = getActivePrompt();
|
|
msg["prompt"] = prompt.value;
|
|
|
|
// fill to msg box
|
|
js_msg_txtbox.value = JSON.stringify(msg);
|
|
js_msg_txtbox.dispatchEvent(new Event("input"));
|
|
|
|
//click hidden button
|
|
js_add_trigger_words_btn.click();
|
|
|
|
console.log("end add_trigger_words");
|
|
|
|
event.stopPropagation()
|
|
event.preventDefault()
|
|
|
|
|
|
}
|
|
|
|
function use_preview_prompt(event, model_type, search_term){
|
|
console.log("start use_preview_prompt");
|
|
|
|
//get hidden components of extension
|
|
let js_msg_txtbox = gradioApp().querySelector("#ch_js_msg_txtbox textarea");
|
|
let js_use_preview_prompt_btn = gradioApp().getElementById("ch_js_use_preview_prompt_btn");
|
|
|
|
|
|
|
|
//msg to python side
|
|
let msg = {
|
|
"action": "",
|
|
"model_type": "",
|
|
"search_term": "",
|
|
"prompt": "",
|
|
"neg_prompt": "",
|
|
}
|
|
|
|
msg["action"] = "use_preview_prompt";
|
|
msg["model_type"] = model_type;
|
|
msg["search_term"] = search_term;
|
|
|
|
// get active prompt
|
|
prompt = getActivePrompt();
|
|
msg["prompt"] = prompt.value;
|
|
|
|
// get active neg prompt
|
|
let neg_prompt = getActiveNegativePrompt();
|
|
msg["neg_prompt"] = neg_prompt.value;
|
|
|
|
// fill to msg box
|
|
js_msg_txtbox.value = JSON.stringify(msg);
|
|
js_msg_txtbox.dispatchEvent(new Event("input"));
|
|
|
|
//click hidden button
|
|
js_use_preview_prompt_btn.click();
|
|
|
|
console.log("end use_preview_prompt");
|
|
|
|
event.stopPropagation()
|
|
event.preventDefault()
|
|
|
|
}
|
|
|
|
|
|
onUiLoaded(() => {
|
|
|
|
|
|
|
|
// get all extra network tabs
|
|
let tab_prefix_list = ["txt2img", "img2img"];
|
|
let model_type_list = ["textual_inversion", "hypernetworks", "checkpoints", "lora"];
|
|
let cardid_suffix = "cards";
|
|
|
|
// update extra network tab pages' cards
|
|
// * replace "replace preview" text button into an icon
|
|
// * add 3 button to each card:
|
|
// - open model url 🌐
|
|
// - add trigger words 💡
|
|
// - use preview image's prompt 🏷
|
|
// notice: javascript can not get response from python side
|
|
// so, these buttons just sent request to python
|
|
// then, python side gonna open url and update prompt text box, without telling js side.
|
|
function update_card_for_civitai(){
|
|
|
|
|
|
//change all "replace preview" into an icon
|
|
let extra_network_id = "";
|
|
let extra_network_node = null;
|
|
let addtional_nodes = null;
|
|
let replace_preview_btn = null;
|
|
let ul_node = null;
|
|
let search_term_node = null;
|
|
let search_term = "";
|
|
let model_type = "";
|
|
let cards = null;
|
|
let need_to_add_buttons = false;
|
|
let is_thumb_mode = false;
|
|
for (const tab_prefix of tab_prefix_list) {
|
|
for (const js_model_type of model_type_list) {
|
|
//get model_type for python side
|
|
switch (js_model_type) {
|
|
case "textual_inversion":
|
|
model_type = "ti";
|
|
break;
|
|
case "hypernetworks":
|
|
model_type = "hyper";
|
|
break;
|
|
case "checkpoints":
|
|
model_type = "ckp";
|
|
break;
|
|
case "lora":
|
|
model_type = "lora";
|
|
break;
|
|
}
|
|
|
|
if (!model_type) {
|
|
console.log("can not get model_type from: " + js_model_type);
|
|
continue;
|
|
}
|
|
|
|
extra_network_id = tab_prefix+"_"+js_model_type+"_"+cardid_suffix;
|
|
// console.log("searching extra_network_node: " + extra_network_id);
|
|
extra_network_node = gradioApp().getElementById(extra_network_id);
|
|
// check if extr network is under thumbnail mode
|
|
is_thumb_mode = false
|
|
if (extra_network_node) {
|
|
if (extra_network_node.className == "extra-network-thumbs") {
|
|
console.log(extra_network_id + " is in thumbnail mode");
|
|
is_thumb_mode = true;
|
|
// won't work good in thumb mode, skip it for now
|
|
continue;
|
|
}
|
|
} else {
|
|
console.log("can not find extra_network_node: " + extra_network_id);
|
|
continue;
|
|
}
|
|
// console.log("find extra_network_node: " + extra_network_id);
|
|
|
|
// get all card nodes
|
|
cards = extra_network_node.querySelectorAll(".card");
|
|
for (let card of cards) {
|
|
// replace preview text button into icon
|
|
replace_preview_btn = card.querySelector(".actions .additional a");
|
|
if (replace_preview_btn) {
|
|
if (replace_preview_btn.innerHTML == "replace preview") {
|
|
need_to_add_buttons = true;
|
|
replace_preview_btn.innerHTML = "🖼";
|
|
if (!is_thumb_mode) {
|
|
replace_preview_btn.style.margin = "0px 5px";
|
|
replace_preview_btn.style.fontSize = "200%";
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
if (!need_to_add_buttons) {
|
|
continue;
|
|
}
|
|
|
|
|
|
// search_term node
|
|
// search_term = subfolder path + model name + ext
|
|
search_term_node = card.querySelector(".actions .additional .search_term");
|
|
if (!search_term_node){
|
|
console.log("can not find search_term node for cards in " + extra_network_id);
|
|
continue;
|
|
}
|
|
|
|
// get search_term
|
|
search_term = search_term_node.innerHTML;
|
|
if (!search_term) {
|
|
console.log("search_term is empty for cards in " + extra_network_id);
|
|
continue;
|
|
}
|
|
|
|
|
|
//get ul node, which is the parent of all buttons
|
|
ul_node = card.querySelector(".actions .additional ul");
|
|
|
|
// then we need to add 3 buttons to each ul node:
|
|
let open_url_node = document.createElement("button");
|
|
// open_url_node.href = "#";
|
|
open_url_node.innerHTML = "🌐";
|
|
if (!is_thumb_mode) {
|
|
open_url_node.style.fontSize = "200%";
|
|
open_url_node.style.margin = "0px 5px";
|
|
}
|
|
open_url_node.title = "Open this model's civitai url";
|
|
open_url_node.setAttribute("onclick","open_model_url(event, '"+model_type+"', '"+search_term+"')");
|
|
|
|
let add_trigger_words_node = document.createElement("button");
|
|
// add_trigger_words_node.href = "#";
|
|
add_trigger_words_node.innerHTML = "💡";
|
|
if (!is_thumb_mode) {
|
|
add_trigger_words_node.style.fontSize = "200%";
|
|
add_trigger_words_node.style.margin = "0px 5px";
|
|
}
|
|
add_trigger_words_node.title = "Add trigger words to prompt";
|
|
add_trigger_words_node.setAttribute("onclick","add_trigger_words(event, '"+model_type+"', '"+search_term+"')");
|
|
|
|
let use_preview_prompt_node = document.createElement("button");
|
|
// use_preview_prompt_node.href = "#";
|
|
use_preview_prompt_node.innerHTML = "🏷";
|
|
if (!is_thumb_mode) {
|
|
use_preview_prompt_node.style.fontSize = "200%";
|
|
use_preview_prompt_node.style.margin = "0px 5px";
|
|
}
|
|
use_preview_prompt_node.title = "Use prompt from preview image";
|
|
use_preview_prompt_node.setAttribute("onclick","use_preview_prompt(event, '"+model_type+"', '"+search_term+"')");
|
|
|
|
//add to card
|
|
ul_node.appendChild(open_url_node);
|
|
ul_node.appendChild(add_trigger_words_node);
|
|
ul_node.appendChild(use_preview_prompt_node);
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
let tab_id = ""
|
|
let extra_tab = null;
|
|
let extra_toolbar = null;
|
|
//add refresh button to extra network's toolbar
|
|
for (let prefix of tab_prefix_list) {
|
|
tab_id = prefix + "_extra_tabs";
|
|
extra_tab = gradioApp().getElementById(tab_id);
|
|
|
|
//get toolbar
|
|
extra_toolbar = extra_tab.querySelector("div.flex.border-b-2.flex-wrap");
|
|
|
|
if (!extra_toolbar){
|
|
console.log("can not get extra network toolbar for " + tab_id);
|
|
continue;
|
|
}
|
|
|
|
// add refresh button to toolbar
|
|
let ch_refresh = document.createElement("button");
|
|
ch_refresh.innerHTML = "Refresh Civitai Helper";
|
|
ch_refresh.title = "Refresh Civitai Helper's model card buttons";
|
|
ch_refresh.className = "gr-button gr-button-lg gr-button-secondary";
|
|
ch_refresh.onclick = update_card_for_civitai;
|
|
|
|
extra_toolbar.appendChild(ch_refresh);
|
|
|
|
}
|
|
|
|
|
|
//run it once
|
|
update_card_for_civitai();
|
|
|
|
|
|
});
|
|
|
|
|
|
|