diff --git a/web/js/common/modelInfoDialog.js b/web/js/common/modelInfoDialog.js index 1722273..0252b6f 100644 --- a/web/js/common/modelInfoDialog.js +++ b/web/js/common/modelInfoDialog.js @@ -194,6 +194,10 @@ export class ModelInfoDialog extends ComfyDialog { } addInfo() { + const usageHint = this.metadata["modelspec.usage_hint"]; + if (usageHint) { + this.addInfoEntry("Usage Hint", usageHint); + } this.addInfoEntry("Notes", this.getNoteInfo()); } diff --git a/web/js/modelInfo.js b/web/js/modelInfo.js index 085f877..ca8ae0c 100644 --- a/web/js/modelInfo.js +++ b/web/js/modelInfo.js @@ -79,6 +79,9 @@ export class LoraInfoDialog extends ModelInfoDialog { addTags() { let tags = this.getTagFrequency(); + if(!tags?.length) { + tags = this.metadata["modelspec.tags"]?.split(" ").map(t => [t, 1]); + } let hasMore; if (tags?.length) { const c = tags.length; @@ -110,6 +113,45 @@ export class LoraInfoDialog extends ModelInfoDialog { } } + addExample(title, value, name) { + const textArea = $el("textarea", { + textContent: value, + style: { + whiteSpace: "pre-wrap", + margin: "10px 0", + color: "#fff", + background: "#222", + padding: "5px", + borderRadius: "5px", + maxHeight: "250px", + overflow: "auto", + display: "block", + border: "none", + width: "calc(100% - 10px)", + }, + }); + $el( + "p", + { + parent: this.content, + textContent: `${title}: `, + }, + [ + textArea, + $el("button", { + onclick: async () => { + await this.saveAsExample(textArea.value, `${name}.txt`); + }, + textContent: "Save as Example", + style: { + fontSize: "14px", + }, + }), + $el("hr"), + ] + ); + } + async addInfo() { this.addInfoEntry("Name", this.metadata.ss_output_name || "⚠️ Unknown"); this.addInfoEntry("Base Model", this.metadata.ss_sd_model_name || "⚠️ Unknown"); @@ -128,52 +170,21 @@ export class LoraInfoDialog extends ModelInfoDialog { this.addTags(); const info = await p; - if (info) { - const textArea = $el("textarea", { - textContent: info.trainedWords.join(", "), - style: { - whiteSpace: "pre-wrap", - margin: "10px 0", - color: "#fff", - background: "#222", - padding: "5px", - borderRadius: "5px", - maxHeight: "250px", - overflow: "auto", - display: "block", - border: "none", - width: "calc(100% - 10px)", - }, - }); - $el( - "p", - { - parent: this.content, - textContent: "Trained Words: ", - }, - [ - textArea, - $el("button", { - onclick: async () => { - await this.saveAsExample(textArea.value, "trainedwords.txt"); - }, - textContent: "Save as Example", - style: { - fontSize: "14px", - }, - }), - $el("hr"), - ] - ); - $el("div", { - parent: this.content, - innerHTML: info.description, - style: { - maxHeight: "250px", - overflow: "auto", - }, - }); + this.addExample("Trigger Words", info?.trainedWords?.join(", ") ?? "", "trainedwords"); + + const triggerPhrase = this.metadata["modelspec.trigger_phrase"]; + if (triggerPhrase) { + this.addExample("Trigger Phrase", triggerPhrase, "triggerphrase"); } + + $el("div", { + parent: this.content, + innerHTML: info.description ?? this.metadata["modelspec.description"], + style: { + maxHeight: "250px", + overflow: "auto", + }, + }); } async saveAsExample(example, name = "example.txt") {