update thumb mode

pull/63/head
butaixianran 2023-03-11 20:06:27 +08:00
parent 44fa7017d7
commit a5b8f18892
5 changed files with 163 additions and 36 deletions

View File

@ -1,6 +1,9 @@
### Language
[中文](README.cn.md)
# Notice
After updating to new version, you need to shutdown SD webui and re-launch. Just Reload UI won't work!
# Stable-Diffusion-Webui-Civitai-Helper
Stable Diffusion Webui Extension for Civitai, to handle your models much more easily.
@ -125,6 +128,12 @@ Enjoy!
# Change Log
## v1.5
* Addtional button now works on thumbnail mode
* Add option to always show addtion button, for touch screen.
* Download a model by model page's url into SD webui's model folder
* Display checking new version's result as gallery and download new version into SD Webui's model folder
## v1.4.2
* ignore .vae file in model folder when scanning

View File

@ -245,11 +245,34 @@ onUiLoaded(() => {
// then, python side gonna open url and update prompt text box, without telling js side.
function update_card_for_civitai(){
//css
let btn_margin = "0px 5px";
let btn_fontSize = "200%";
let btn_thumb_fontSize = "100%";
let btn_thumb_display = "inline";
let btn_thumb_pos = "static";
let btn_thumb_backgroundImage = "none";
let btn_thumb_background = "rgba(0, 0, 0, 0.8)";
let ch_btn_txts = ['🌐', '💡', '🏷'];
// get component
let ch_always_display_ckb = gradioApp().querySelector("#ch_always_display_ckb input");
let ch_show_btn_on_thumb_ckb = gradioApp().querySelector("#ch_show_btn_on_thumb_ckb input");
let ch_always_display = false;
let ch_show_btn_on_thumb = false;
if (ch_always_display_ckb) {
ch_always_display = ch_always_display_ckb.checked;
}
if (ch_show_btn_on_thumb_ckb) {
ch_show_btn_on_thumb = ch_show_btn_on_thumb_ckb.checked;
}
//change all "replace preview" into an icon
let extra_network_id = "";
let extra_network_node = null;
let addtional_nodes = null;
let additional_node = null;
let replace_preview_btn = null;
let ul_node = null;
let search_term_node = null;
@ -290,8 +313,7 @@ onUiLoaded(() => {
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;
// if (!ch_show_btn_on_thumb) {continue;}
}
} else {
console.log("can not find extra_network_node: " + extra_network_id);
@ -302,15 +324,72 @@ onUiLoaded(() => {
// get all card nodes
cards = extra_network_node.querySelectorAll(".card");
for (let card of cards) {
// replace preview text button into icon
//additional node
additional_node = card.querySelector(".actions .additional");
//get ul node, which is the parent of all buttons
ul_node = card.querySelector(".actions .additional ul");
// replace preview text button
replace_preview_btn = card.querySelector(".actions .additional a");
// check thumb mode
if (is_thumb_mode) {
additional_node.style.display = null;
if (ch_show_btn_on_thumb) {
ul_node.style.background = btn_thumb_background;
} else {
//reset
ul_node.style.background = null;
// console.log("remove existed buttons");
// remove existed buttons
if (ul_node) {
// find all .a child nodes
let atags = ul_node.querySelectorAll("a");
for (let atag of atags) {
//reset display
atag.style.display = null;
//remove extension's button
if (ch_btn_txts.indexOf(atag.innerHTML)>=0) {
//need to remove
ul_node.removeChild(atag);
} else {
//do not remove, just reset
atag.innerHTML = "replace preview";
atag.style.display = null;
atag.style.fontSize = null;
atag.style.position = null;
atag.style.backgroundImage = null;
}
}
}
//just reset and remove nodes, do nothing else
continue;
}
} else {
// full preview mode
if (ch_always_display) {
additional_node.style.display = "block";
} else {
additional_node.style.display = null;
}
}
// change replace preview text button into icon
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%";
replace_preview_btn.style.fontSize = btn_fontSize;
replace_preview_btn.style.margin = btn_margin;
} else {
replace_preview_btn.style.display = btn_thumb_display;
replace_preview_btn.style.fontSize = btn_thumb_fontSize;
replace_preview_btn.style.position = btn_thumb_pos;
replace_preview_btn.style.backgroundImage = btn_thumb_backgroundImage;
}
}
@ -337,36 +416,54 @@ onUiLoaded(() => {
}
//get ul node, which is the parent of all buttons
ul_node = card.querySelector(".actions .additional ul");
// if (is_thumb_mode) {
// ul_node.style.background = btn_thumb_background;
// }
// then we need to add 3 buttons to each ul node:
let open_url_node = document.createElement("button");
// open_url_node.href = "#";
let open_url_node = document.createElement("a");
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.style.fontSize = btn_fontSize;
open_url_node.style.margin = btn_margin;
} else {
open_url_node.style.display = btn_thumb_display;
open_url_node.style.fontSize = btn_thumb_fontSize;
open_url_node.style.position = btn_thumb_pos;
open_url_node.style.backgroundImage = btn_thumb_backgroundImage;
}
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 = "#";
let add_trigger_words_node = document.createElement("a");
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.style.fontSize = btn_fontSize;
add_trigger_words_node.style.margin = btn_margin;
} else {
add_trigger_words_node.style.display = btn_thumb_display;
add_trigger_words_node.style.fontSize = btn_thumb_fontSize;
add_trigger_words_node.style.position = btn_thumb_pos;
add_trigger_words_node.style.backgroundImage = btn_thumb_backgroundImage;
}
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 = "#";
let use_preview_prompt_node = document.createElement("a");
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.style.fontSize = btn_fontSize;
use_preview_prompt_node.style.margin = btn_margin;
} else {
use_preview_prompt_node.style.display = btn_thumb_display;
use_preview_prompt_node.style.fontSize = btn_thumb_fontSize;
use_preview_prompt_node.style.position = btn_thumb_pos;
use_preview_prompt_node.style.backgroundImage = btn_thumb_backgroundImage;
}
use_preview_prompt_node.title = "Use prompt from preview image";
use_preview_prompt_node.setAttribute("onclick","use_preview_prompt(event, '"+model_type+"', '"+search_term+"')");

View File

@ -22,9 +22,10 @@ from scripts.lib import js_action_civitai
from scripts.lib import model_action_civitai
from scripts.lib import setting
from scripts.lib import civitai
from scripts.lib import util
# init
version = "1.4.2"
model.get_custom_model_folder()
setting.load()
@ -57,6 +58,8 @@ def on_ui_tabs():
max_size_preview = setting.data["model"]["max_size_preview"]
skip_nsfw_preview = setting.data["model"]["skip_nsfw_preview"]
open_url_with_js = setting.data["general"]["open_url_with_js"]
always_display = setting.data["general"]["always_display"]
show_btn_on_thumb = setting.data["general"]["show_btn_on_thumb"]
model_types = list(model.folders.keys())
no_info_model_names = civitai.get_model_names_by_input("ckp", False)
@ -78,14 +81,14 @@ def on_ui_tabs():
with gr.Box():
with gr.Column():
gr.Markdown("### Get Civitai Model Info by Model ID")
gr.Markdown("### Get Civitai Model Info by Model Page URL")
with gr.Row():
model_type_drop = gr.Dropdown(choices=model_types, label="Model Type", value="ckp", multiselect=False)
empty_info_only_ckb = gr.Checkbox(label="Only Show Models have no Info file", value=False, elem_id="cn_empty_info_only_ckb")
model_name_drop = gr.Dropdown(choices=no_info_model_names, label="Model", value="ckp", multiselect=False)
model_url_or_id = gr.Textbox(label="Civitai URL or Model ID", lines=1, value="")
get_civitai_model_info_by_id_btn = gr.Button(value="Get 1 Model Info from Civitai", variant="primary")
get_civitai_model_info_by_id_btn = gr.Button(value="Get Model Info from Civitai", variant="primary")
get_model_by_id_log_md = gr.Markdown("")
with gr.Box():
@ -100,15 +103,29 @@ def on_ui_tabs():
with gr.Box():
with gr.Column():
gr.Markdown("### Download Model")
with gr.Row():
dl_model_type_drop = gr.Dropdown(choices=model_types, label="Model Type", value="ckp", multiselect=False)
dl_subfolder_drop = gr.Dropdown(choices=model_types, label="Sub-folder", value="", multiselect=False)
dl_model_url_or_id = gr.Textbox(label="Civitai URL or Model ID", lines=1, value="")
dl_civitai_model_by_id_btn = gr.Button(value="Download Model from Civitai", variant="primary")
with gr.Box():
with gr.Column():
gr.Markdown("### Other Setting")
with gr.Row():
open_url_with_js_ckb = gr.Checkbox(label="Open Url At Client Side", value=open_url_with_js, elem_id="ch_open_url_with_js_ckb")
always_display_ckb = gr.Checkbox(label="Always Display Buttons", value=always_display, elem_id="ch_always_display_ckb")
show_btn_on_thumb_ckb = gr.Checkbox(label="Show Button On Thumb Mode", value=show_btn_on_thumb, elem_id="ch_show_btn_on_thumb_ckb")
save_setting_btn = gr.Button(value="Save Setting", elem_id="ch_save_setting_btn")
general_log_md = gr.Markdown(value="", elem_id="ch_general_log_md")
# ====Footer====
gr.Markdown(f"<center>version:{version}</center>")
gr.Markdown(f"<center>version:{util.version}</center>")
# ====hidden component for js, not in any tab====
js_msg_txtbox = gr.Textbox(label="Request Msg From Js", visible=False, lines=1, value="", elem_id="ch_js_msg_txtbox")
@ -130,7 +147,7 @@ def on_ui_tabs():
# General
save_setting_btn.click(setting.save_from_input, inputs=[max_size_preview_ckb, skip_nsfw_preview_ckb, open_url_with_js_ckb], outputs=general_log_md)
save_setting_btn.click(setting.save_from_input, inputs=[max_size_preview_ckb, skip_nsfw_preview_ckb, open_url_with_js_ckb, always_display_ckb, show_btn_on_thumb_ckb], outputs=general_log_md)
# js action
js_open_url_btn.click(js_action_civitai.open_model_url, inputs=[js_msg_txtbox, open_url_with_js_ckb], outputs=py_msg_txtbox)

View File

@ -16,6 +16,8 @@ data = {
},
"general":{
"open_url_with_js": True,
"always_display": False,
"show_btn_on_thumb": True,
},
"tool":{
}
@ -70,10 +72,18 @@ def load():
data = json_data
# check for new key
if "always_display" not in data["general"].keys():
data["general"]["always_display"] = False
if "show_btn_on_thumb" not in data["general"].keys():
data["general"]["show_btn_on_thumb"] = True
return
# save setting from parameter
def save_from_input(max_size_preview, skip_nsfw_preview, open_url_with_js):
def save_from_input(max_size_preview, skip_nsfw_preview, open_url_with_js, always_display, show_btn_on_thumb):
global data
data = {
"model":{
@ -82,6 +92,8 @@ def save_from_input(max_size_preview, skip_nsfw_preview, open_url_with_js):
},
"general":{
"open_url_with_js": open_url_with_js,
"always_display": always_display,
"show_btn_on_thumb": show_btn_on_thumb,
},
"tool":{
}
@ -94,13 +106,3 @@ def save_from_input(max_size_preview, skip_nsfw_preview, open_url_with_js):
return output
# load to output
def load_to_output():
load()
max_size_preview = data["model"]["max_size_preview"]
skip_nsfw_preview = data["model"]["skip_nsfw_preview"]
open_url_with_js = data["general"]["open_url_with_js"]
return [max_size_preview, skip_nsfw_preview, open_url_with_js]

View File

@ -3,6 +3,8 @@ import hashlib
import requests
import shutil
version = "1.4.3"
# print for debugging
def printD(msg):
print(f"Civitai Helper: {msg}")