Spaces:
Configuration error
Configuration error
| import { $el, ComfyDialog } from "../../../../scripts/ui.js"; | |
| import { api } from "../../../../scripts/api.js"; | |
| import {formatTime} from './utils.js'; | |
| import {$t} from "./i18n.js"; | |
| import {toast} from "./toast.js"; | |
| class MetadataDialog extends ComfyDialog { | |
| constructor() { | |
| super(); | |
| this.element.classList.add("easyuse-model-metadata"); | |
| } | |
| show(metadata) { | |
| super.show( | |
| $el( | |
| "div", | |
| Object.keys(metadata).map((k) => | |
| $el("div", [$el("label", { textContent: k }), $el("span", { textContent: metadata[k] })]) | |
| ) | |
| ) | |
| ); | |
| } | |
| } | |
| export class ModelInfoDialog extends ComfyDialog { | |
| constructor(name) { | |
| super(); | |
| this.name = name; | |
| this.element.classList.add("easyuse-model-info"); | |
| } | |
| get customNotes() { | |
| return this.metadata["easyuse.notes"]; | |
| } | |
| set customNotes(v) { | |
| this.metadata["easyuse.notes"] = v; | |
| } | |
| get hash() { | |
| return this.metadata["easyuse.sha256"]; | |
| } | |
| async show(type, value) { | |
| this.type = type; | |
| const req = api.fetchApi("/easyuse/metadata/" + encodeURIComponent(`${type}/${value}`)); | |
| this.info = $el("div", { style: { flex: "auto" } }); | |
| // this.img = $el("img", { style: { display: "none" } }); | |
| this.imgCurrent = 0 | |
| this.imgList = $el("div.easyuse-preview-list",{ | |
| style: { display: "none" } | |
| }) | |
| this.imgWrapper = $el("div.easyuse-preview", [ | |
| $el("div.easyuse-preview-group",[ | |
| this.imgList | |
| ]), | |
| ]); | |
| this.main = $el("main", { style: { display: "flex" } }, [this.imgWrapper, this.info]); | |
| this.content = $el("div.easyuse-model-content", [ | |
| $el("div.easyuse-model-header",[$el("h2", { textContent: this.name })]) | |
| , this.main]); | |
| const loading = $el("div", { textContent: "ℹ️ Loading...", parent: this.content }); | |
| super.show(this.content); | |
| this.metadata = await (await req).json(); | |
| this.viewMetadata.style.cursor = this.viewMetadata.style.opacity = ""; | |
| this.viewMetadata.removeAttribute("disabled"); | |
| loading.remove(); | |
| this.addInfo(); | |
| } | |
| createButtons() { | |
| const btns = super.createButtons(); | |
| this.viewMetadata = $el("button", { | |
| type: "button", | |
| textContent: "View raw metadata", | |
| disabled: "disabled", | |
| style: { | |
| opacity: 0.5, | |
| cursor: "not-allowed", | |
| }, | |
| onclick: (e) => { | |
| if (this.metadata) { | |
| new MetadataDialog().show(this.metadata); | |
| } | |
| }, | |
| }); | |
| btns.unshift(this.viewMetadata); | |
| return btns; | |
| } | |
| parseNote() { | |
| if (!this.customNotes) return []; | |
| let notes = []; | |
| // Extract links from notes | |
| const r = new RegExp("(\\bhttps?:\\/\\/[^\\s]+)", "g"); | |
| let end = 0; | |
| let m; | |
| do { | |
| m = r.exec(this.customNotes); | |
| let pos; | |
| let fin = 0; | |
| if (m) { | |
| pos = m.index; | |
| fin = m.index + m[0].length; | |
| } else { | |
| pos = this.customNotes.length; | |
| } | |
| let pre = this.customNotes.substring(end, pos); | |
| if (pre) { | |
| pre = pre.replaceAll("\n", "<br>"); | |
| notes.push( | |
| $el("span", { | |
| innerHTML: pre, | |
| }) | |
| ); | |
| } | |
| if (m) { | |
| notes.push( | |
| $el("a", { | |
| href: m[0], | |
| textContent: m[0], | |
| target: "_blank", | |
| }) | |
| ); | |
| } | |
| end = fin; | |
| } while (m); | |
| return notes; | |
| } | |
| addInfoEntry(name, value) { | |
| return $el( | |
| "p", | |
| { | |
| parent: this.info, | |
| }, | |
| [ | |
| typeof name === "string" ? $el("label", { textContent: name + ": " }) : name, | |
| typeof value === "string" ? $el("span", { textContent: value }) : value, | |
| ] | |
| ); | |
| } | |
| async getCivitaiDetails() { | |
| const req = await fetch("https://civitai.com/api/v1/model-versions/by-hash/" + this.hash); | |
| if (req.status === 200) { | |
| return await req.json(); | |
| } else if (req.status === 404) { | |
| throw new Error("Model not found"); | |
| } else { | |
| throw new Error(`Error loading info (${req.status}) ${req.statusText}`); | |
| } | |
| } | |
| addCivitaiInfo() { | |
| const promise = this.getCivitaiDetails(); | |
| const content = $el("span", { textContent: "ℹ️ Loading..." }); | |
| this.addInfoEntry( | |
| $el("label", [ | |
| $el("img", { | |
| style: { | |
| width: "18px", | |
| position: "relative", | |
| top: "3px", | |
| margin: "0 5px 0 0", | |
| }, | |
| src: "https://civitai.com/favicon.ico", | |
| }), | |
| $el("span", { textContent: "Civitai: " }), | |
| ]), | |
| content | |
| ); | |
| return promise | |
| .then((info) => { | |
| this.imgWrapper.style.display = 'block' | |
| // 变更标题信息 | |
| let header = this.element.querySelector('.easyuse-model-header') | |
| if(header){ | |
| header.replaceChildren( | |
| $el("h2", { textContent: this.name }), | |
| $el("div.easyuse-model-header-remark",[ | |
| $el("h5", { textContent: $t("Updated At:") + formatTime(new Date(info.updatedAt),'yyyy/MM/dd')}), | |
| $el("h5", { textContent: $t("Created At:") + formatTime(new Date(info.updatedAt),'yyyy/MM/dd')}), | |
| ]) | |
| ) | |
| } | |
| // 替换内容 | |
| let textarea = null | |
| let notes = this.parseNote.call(this) | |
| let editText = $t("✏️ Edit") | |
| console.log(notes) | |
| let textarea_div = $el("div.easyuse-model-detail-textarea",[ | |
| $el("p",notes?.length>0 ? notes : {textContent:$t('No notes')}), | |
| ]) | |
| if(!notes || notes.length == 0) textarea_div.classList.add('empty') | |
| else textarea_div.classList.remove('empty') | |
| this.info.replaceChildren( | |
| $el("div.easyuse-model-detail",[ | |
| $el("div.easyuse-model-detail-head.flex-b",[ | |
| $el('span',$t("Notes")), | |
| $el("a", { | |
| textContent: editText, | |
| href: "#", | |
| style: { | |
| fontSize: "12px", | |
| float: "right", | |
| color: "var(--warning-color)", | |
| textDecoration: "none", | |
| }, | |
| onclick: async (e) => { | |
| e.preventDefault(); | |
| if (textarea) { | |
| if(textarea.value != this.customNotes){ | |
| toast.showLoading($t('Saving Notes...')) | |
| this.customNotes = textarea.value; | |
| const resp = await api.fetchApi( | |
| "/easyuse/metadata/notes/" + encodeURIComponent(`${this.type}/${this.name}`), | |
| { | |
| method: "POST", | |
| body: this.customNotes, | |
| } | |
| ); | |
| toast.hideLoading() | |
| if (resp.status !== 200) { | |
| toast.error($t('Saving Failed')) | |
| console.error(resp); | |
| alert(`Error saving notes (${resp.status}) ${resp.statusText}`); | |
| return; | |
| } | |
| toast.success($t('Saving Succeed')) | |
| notes = this.parseNote.call(this) | |
| console.log(notes) | |
| textarea_div.replaceChildren($el("p",notes?.length>0 ? notes : {textContent:$t('No notes')})); | |
| if(textarea.value) textarea_div.classList.remove('empty') | |
| else textarea_div.classList.add('empty') | |
| }else { | |
| textarea_div.replaceChildren($el("p",{textContent:$t('No notes')})); | |
| textarea_div.classList.add('empty') | |
| } | |
| e.target.textContent = editText; | |
| textarea.remove(); | |
| textarea = null; | |
| } else { | |
| e.target.textContent = "💾 Save"; | |
| textarea = $el("textarea", { | |
| placeholder: $t("Type your notes here"), | |
| style: { | |
| width: "100%", | |
| minWidth: "200px", | |
| minHeight: "50px", | |
| height:"100px" | |
| }, | |
| textContent: this.customNotes, | |
| }); | |
| textarea_div.replaceChildren(textarea); | |
| textarea.focus() | |
| } | |
| } | |
| }) | |
| ]), | |
| textarea_div | |
| ]), | |
| $el("div.easyuse-model-detail",[ | |
| $el("div.easyuse-model-detail-head",{textContent:$t("Details")}), | |
| $el("div.easyuse-model-detail-body",[ | |
| $el("div.easyuse-model-detail-item",[ | |
| $el("div.easyuse-model-detail-item-label",{textContent:$t("Type")}), | |
| $el("div.easyuse-model-detail-item-value",{textContent:info.model.type}), | |
| ]), | |
| $el("div.easyuse-model-detail-item",[ | |
| $el("div.easyuse-model-detail-item-label",{textContent:$t("BaseModel")}), | |
| $el("div.easyuse-model-detail-item-value",{textContent:info.baseModel}), | |
| ]), | |
| $el("div.easyuse-model-detail-item",[ | |
| $el("div.easyuse-model-detail-item-label",{textContent:$t("Download")}), | |
| $el("div.easyuse-model-detail-item-value",{textContent:info.stats?.downloadCount || 0}), | |
| ]), | |
| $el("div.easyuse-model-detail-item",[ | |
| $el("div.easyuse-model-detail-item-label",{textContent:$t("Trained Words")}), | |
| $el("div.easyuse-model-detail-item-value",{textContent:info?.trainedWords.join(',') || '-'}), | |
| ]), | |
| $el("div.easyuse-model-detail-item",[ | |
| $el("div.easyuse-model-detail-item-label",{textContent:$t("Source")}), | |
| $el("div.easyuse-model-detail-item-value",[ | |
| $el("label", [ | |
| $el("img", { | |
| style: { | |
| width: "14px", | |
| position: "relative", | |
| top: "3px", | |
| margin: "0 5px 0 0", | |
| }, | |
| src: "https://civitai.com/favicon.ico", | |
| }), | |
| $el("a", { | |
| href: "https://civitai.com/models/" + info.modelId, | |
| textContent: "View " + info.model.name, | |
| target: "_blank", | |
| }) | |
| ]) | |
| ]), | |
| ]) | |
| ]), | |
| ]) | |
| ); | |
| if (info.images?.length) { | |
| this.imgCurrent = 0 | |
| this.isSaving = false | |
| info.images.map(cate=> | |
| cate.url && | |
| this.imgList.appendChild( | |
| $el('div.easyuse-preview-slide',[ | |
| $el('div.easyuse-preview-slide-content',[ | |
| $el('img',{src:(cate.url)}), | |
| $el("div.save", { | |
| textContent: "Save as preview", | |
| onclick: async () => { | |
| if(this.isSaving) return | |
| this.isSaving = true | |
| toast.showLoading($t('Saving Preview...')) | |
| // Convert the preview to a blob | |
| const blob = await (await fetch(cate.url)).blob(); | |
| // Store it in temp | |
| const name = "temp_preview." + new URL(cate.url).pathname.split(".")[1]; | |
| const body = new FormData(); | |
| body.append("image", new File([blob], name)); | |
| body.append("overwrite", "true"); | |
| body.append("type", "temp"); | |
| const resp = await api.fetchApi("/upload/image", { | |
| method: "POST", | |
| body, | |
| }); | |
| if (resp.status !== 200) { | |
| this.isSaving = false | |
| toast.error($t('Saving Failed')) | |
| toast.hideLoading() | |
| console.error(resp); | |
| alert(`Error saving preview (${req.status}) ${req.statusText}`); | |
| return; | |
| } | |
| // Use as preview | |
| await api.fetchApi("/easyuse/save/" + encodeURIComponent(`${this.type}/${this.name}`), { | |
| method: "POST", | |
| body: JSON.stringify({ | |
| filename: name, | |
| type: "temp", | |
| }), | |
| headers: { | |
| "content-type": "application/json", | |
| }, | |
| }).then(_=>{ | |
| toast.success($t('Saving Succeed')) | |
| toast.hideLoading() | |
| }); | |
| this.isSaving = false | |
| app.refreshComboInNodes(); | |
| }, | |
| }) | |
| ]) | |
| ]) | |
| ) | |
| ) | |
| let _this = this | |
| this.imgDistance = (-660 * this.imgCurrent).toString() | |
| this.imgList.style.display = '' | |
| this.imgList.style.transform = 'translate3d(' + this.imgDistance +'px, 0px, 0px)' | |
| this.slides = this.imgList.querySelectorAll('.easyuse-preview-slide') | |
| // 添加按钮 | |
| this.slideLeftButton = $el("button.left",{ | |
| parent: this.imgWrapper, | |
| style:{ | |
| display:info.images.length <= 2 ? 'none' : 'block' | |
| }, | |
| innerHTML:`<svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="16" height="16" style="transform: rotate(90deg);"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`, | |
| onclick: ()=>{ | |
| if(info.images.length <= 2) return | |
| _this.imgList.classList.remove("no-transition") | |
| if(_this.imgCurrent == 0){ | |
| _this.imgCurrent = (info.images.length/2)-1 | |
| this.slides[this.slides.length-1].style.transform = 'translate3d(' + (-660 * (this.imgCurrent+1)).toString()+'px, 0px, 0px)' | |
| this.slides[this.slides.length-2].style.transform = 'translate3d(' + (-660 * (this.imgCurrent+1)).toString()+'px, 0px, 0px)' | |
| _this.imgList.style.transform = 'translate3d(660px, 0px, 0px)' | |
| setTimeout(_=>{ | |
| this.slides[this.slides.length-1].style.transform = 'translate3d(0px, 0px, 0px)' | |
| this.slides[this.slides.length-2].style.transform = 'translate3d(0px, 0px, 0px)' | |
| _this.imgDistance = (-660 * this.imgCurrent).toString() | |
| _this.imgList.style.transform = 'translate3d(' + _this.imgDistance +'px, 0px, 0px)' | |
| _this.imgList.classList.add("no-transition") | |
| },500) | |
| } | |
| else { | |
| _this.imgCurrent = _this.imgCurrent-1 | |
| _this.imgDistance = (-660 * this.imgCurrent).toString() | |
| _this.imgList.style.transform = 'translate3d(' + _this.imgDistance +'px, 0px, 0px)' | |
| } | |
| } | |
| }) | |
| this.slideRightButton = $el("button.right",{ | |
| parent: this.imgWrapper, | |
| style:{ | |
| display:info.images.length <= 2 ? 'none' : 'block' | |
| }, | |
| innerHTML:`<svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="16" height="16" style="transform: rotate(-90deg);"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`, | |
| onclick: ()=>{ | |
| if(info.images.length <= 2) return | |
| _this.imgList.classList.remove("no-transition") | |
| if( _this.imgCurrent >= (info.images.length/2)-1){ | |
| _this.imgCurrent = 0 | |
| const max = info.images.length/2 | |
| this.slides[0].style.transform = 'translate3d(' + (660 * max).toString()+'px, 0px, 0px)' | |
| this.slides[1].style.transform = 'translate3d(' + (660 * max).toString()+'px, 0px, 0px)' | |
| _this.imgList.style.transform = 'translate3d(' + (-660 * max).toString()+'px, 0px, 0px)' | |
| setTimeout(_=>{ | |
| this.slides[0].style.transform = 'translate3d(0px, 0px, 0px)' | |
| this.slides[1].style.transform = 'translate3d(0px, 0px, 0px)' | |
| _this.imgDistance = (-660 * this.imgCurrent).toString() | |
| _this.imgList.style.transform = 'translate3d(' + _this.imgDistance +'px, 0px, 0px)' | |
| _this.imgList.classList.add("no-transition") | |
| },500) | |
| } | |
| else { | |
| _this.imgCurrent = _this.imgCurrent+1 | |
| _this.imgDistance = (-660 * this.imgCurrent).toString() | |
| _this.imgList.style.transform = 'translate3d(' + _this.imgDistance +'px, 0px, 0px)' | |
| } | |
| } | |
| }) | |
| } | |
| if(info.description){ | |
| $el("div", { | |
| parent: this.content, | |
| innerHTML: info.description, | |
| style: { | |
| marginTop: "10px", | |
| }, | |
| }); | |
| } | |
| return info; | |
| }) | |
| .catch((err) => { | |
| this.imgWrapper.style.display = 'none' | |
| content.textContent = "⚠️ " + err.message; | |
| }) | |
| .finally(_=>{ | |
| }) | |
| } | |
| } | |
| export class CheckpointInfoDialog extends ModelInfoDialog { | |
| async addInfo() { | |
| // super.addInfo(); | |
| await this.addCivitaiInfo(); | |
| } | |
| } | |
| const MAX_TAGS = 500 | |
| export class LoraInfoDialog extends ModelInfoDialog { | |
| getTagFrequency() { | |
| if (!this.metadata.ss_tag_frequency) return []; | |
| const datasets = JSON.parse(this.metadata.ss_tag_frequency); | |
| const tags = {}; | |
| for (const setName in datasets) { | |
| const set = datasets[setName]; | |
| for (const t in set) { | |
| if (t in tags) { | |
| tags[t] += set[t]; | |
| } else { | |
| tags[t] = set[t]; | |
| } | |
| } | |
| } | |
| return Object.entries(tags).sort((a, b) => b[1] - a[1]); | |
| } | |
| getResolutions() { | |
| let res = []; | |
| if (this.metadata.ss_bucket_info) { | |
| const parsed = JSON.parse(this.metadata.ss_bucket_info); | |
| if (parsed?.buckets) { | |
| for (const { resolution, count } of Object.values(parsed.buckets)) { | |
| res.push([count, `${resolution.join("x")} * ${count}`]); | |
| } | |
| } | |
| } | |
| res = res.sort((a, b) => b[0] - a[0]).map((a) => a[1]); | |
| let r = this.metadata.ss_resolution; | |
| if (r) { | |
| const s = r.split(","); | |
| const w = s[0].replace("(", ""); | |
| const h = s[1].replace(")", ""); | |
| res.push(`${w.trim()}x${h.trim()} (Base res)`); | |
| } else if ((r = this.metadata["modelspec.resolution"])) { | |
| res.push(r + " (Base res"); | |
| } | |
| if (!res.length) { | |
| res.push("⚠️ Unknown"); | |
| } | |
| return res; | |
| } | |
| getTagList(tags) { | |
| return tags.map((t) => | |
| $el( | |
| "li.easyuse-model-tag", | |
| { | |
| dataset: { | |
| tag: t[0], | |
| }, | |
| $: (el) => { | |
| el.onclick = () => { | |
| el.classList.toggle("easyuse-model-tag--selected"); | |
| }; | |
| }, | |
| }, | |
| [ | |
| $el("p", { | |
| textContent: t[0], | |
| }), | |
| $el("span", { | |
| textContent: t[1], | |
| }), | |
| ] | |
| ) | |
| ); | |
| } | |
| addTags() { | |
| let tags = this.getTagFrequency(); | |
| let hasMore; | |
| if (tags?.length) { | |
| const c = tags.length; | |
| let list; | |
| if (c > MAX_TAGS) { | |
| tags = tags.slice(0, MAX_TAGS); | |
| hasMore = $el("p", [ | |
| $el("span", { textContent: `⚠️ Only showing first ${MAX_TAGS} tags ` }), | |
| $el("a", { | |
| href: "#", | |
| textContent: `Show all ${c}`, | |
| onclick: () => { | |
| list.replaceChildren(...this.getTagList(this.getTagFrequency())); | |
| hasMore.remove(); | |
| }, | |
| }), | |
| ]); | |
| } | |
| list = $el("ol.easyuse-model-tags-list", this.getTagList(tags)); | |
| this.tags = $el("div", [list]); | |
| } else { | |
| this.tags = $el("p", { textContent: "⚠️ No tag frequency metadata found" }); | |
| } | |
| this.content.append(this.tags); | |
| if (hasMore) { | |
| this.content.append(hasMore); | |
| } | |
| } | |
| async addInfo() { | |
| // this.addInfoEntry("Name", this.metadata.ss_output_name || "⚠️ Unknown"); | |
| // this.addInfoEntry("Base Model", this.metadata.ss_sd_model_name || "⚠️ Unknown"); | |
| // this.addInfoEntry("Clip Skip", this.metadata.ss_clip_skip || "⚠️ Unknown"); | |
| // | |
| // this.addInfoEntry( | |
| // "Resolution", | |
| // $el( | |
| // "select", | |
| // this.getResolutions().map((r) => $el("option", { textContent: r })) | |
| // ) | |
| // ); | |
| // super.addInfo(); | |
| const p = this.addCivitaiInfo(); | |
| this.addTags(); | |
| const info = await p; | |
| if (info) { | |
| // $el( | |
| // "p", | |
| // { | |
| // parent: this.content, | |
| // textContent: "Trained Words: ", | |
| // }, | |
| // [ | |
| // $el("pre", { | |
| // textContent: info.trainedWords.join(", "), | |
| // style: { | |
| // whiteSpace: "pre-wrap", | |
| // margin: "10px 0", | |
| // background: "#222", | |
| // padding: "5px", | |
| // borderRadius: "5px", | |
| // maxHeight: "250px", | |
| // overflow: "auto", | |
| // }, | |
| // }), | |
| // ] | |
| // ); | |
| $el("div", { | |
| parent: this.content, | |
| innerHTML: info.description, | |
| style: { | |
| maxHeight: "250px", | |
| overflow: "auto", | |
| }, | |
| }); | |
| } | |
| } | |
| createButtons() { | |
| const btns = super.createButtons(); | |
| function copyTags(e, tags) { | |
| const textarea = $el("textarea", { | |
| parent: document.body, | |
| style: { | |
| position: "fixed", | |
| }, | |
| textContent: tags.map((el) => el.dataset.tag).join(", "), | |
| }); | |
| textarea.select(); | |
| try { | |
| document.execCommand("copy"); | |
| if (!e.target.dataset.text) { | |
| e.target.dataset.text = e.target.textContent; | |
| } | |
| e.target.textContent = "Copied " + tags.length + " tags"; | |
| setTimeout(() => { | |
| e.target.textContent = e.target.dataset.text; | |
| }, 1000); | |
| } catch (ex) { | |
| prompt("Copy to clipboard: Ctrl+C, Enter", text); | |
| } finally { | |
| document.body.removeChild(textarea); | |
| } | |
| } | |
| btns.unshift( | |
| $el("button", { | |
| type: "button", | |
| textContent: "Copy Selected", | |
| onclick: (e) => { | |
| copyTags(e, [...this.tags.querySelectorAll(".easyuse-model-tag--selected")]); | |
| }, | |
| }), | |
| $el("button", { | |
| type: "button", | |
| textContent: "Copy All", | |
| onclick: (e) => { | |
| copyTags(e, [...this.tags.querySelectorAll(".easyuse-model-tag")]); | |
| }, | |
| }) | |
| ); | |
| return btns; | |
| } | |
| } |