From 6a3eed6157f3066415d3ff5d738ecbb6278879c3 Mon Sep 17 00:00:00 2001
From: korutech-ai <davo@korutech.com>
Date: Wed, 28 Aug 2024 11:52:04 +1200
Subject: [PATCH] BUGFIX: Modified layout of tags tab so elements don't
 overlap.

---
 web/model-manager.js | 83 +++++++++++++++++++++++++-------------------
 1 file changed, 47 insertions(+), 36 deletions(-)

diff --git a/web/model-manager.js b/web/model-manager.js
index bc7b4dd..40a66bc 100644
--- a/web/model-manager.js
+++ b/web/model-manager.js
@@ -2635,46 +2635,57 @@ class ModelInfo {
                 break;
             }
         }
+        const tagGenerator = $el(
+            "div", [
+                $el("h1", ["Tags"]),
+                $el("h2", { style: { margin: "0px 0px 16px 0px" } }, ["Random Tag Generator"]),
+                $el("div", [
+                    $el("details.tag-generator-settings", {
+                        style: { margin: "10px 0", display: "none" },
+                        open: false,
+                    }, [
+                        $el("summary", ["Settings"]),
+                        $el("div", [
+                            "Sampling Method",
+                            samplerRadioGroup,
+                        ]),
+                        $el("label", [
+                            "Count",
+                            tagGenerationCount,
+                        ]),
+                        $el("label", [
+                            "Threshold",
+                            tagGenerationThreshold,
+                        ]),
+                    ]),
+                    tagGeneratorRandomizedOutput,
+                    new ComfyButton({
+                        content: "Randomize",
+                        tooltip: "Randomly generate subset of tags",
+                        action: () => {
+                            const samplerName = document.querySelector(`input[name="${TAG_GENERATOR_SAMPLER_NAME}"]:checked`).value;
+                            const sampler = samplerName === "Frequency" ? ModelInfo.ProbabilisticTagSampling : ModelInfo.UniformTagSampling;
+                            const sampleCount = tagGenerationCount.value;
+                            const frequencyThreshold = tagGenerationThreshold.value;
+                            const tags = ParseTagParagraph(tagsParagraph.innerText);
+                            const sampledTags = sampler(tags, sampleCount, frequencyThreshold);
+                            tagGeneratorRandomizedOutput.value = sampledTags.join(", ");
+                        },
+                    }).element,
+                ]),
+            ]
+        )
         tagsElement.innerHTML = "";
         tagsElement.append.apply(tagsElement, [
-            $el("h1", ["Tags"]),
-            $el("h2", { style: { margin: "0px 0px 16px 0px" } }, ["Random Tag Generator"]),
+            tagGenerator,
             $el("div", [
-                $el("details.tag-generator-settings", {
-                    style: { margin: "10px 0", display: "none" },
-                    open: false,
-                }, [
-                    $el("summary", ["Settings"]),
-                    $el("div", [
-                        "Sampling Method",
-                        samplerRadioGroup,
-                    ]),
-                    $el("label", [
-                        "Count",
-                        tagGenerationCount,
-                    ]),
-                    $el("label", [
-                        "Threshold",
-                        tagGenerationThreshold,
-                    ]),
-                ]),
-                tagGeneratorRandomizedOutput,
-                new ComfyButton({
-                    content: "Randomize",
-                    tooltip: "Randomly generate subset of tags",
-                    action: () => {
-                        const samplerName = document.querySelector(`input[name="${TAG_GENERATOR_SAMPLER_NAME}"]:checked`).value;
-                        const sampler = samplerName === "Frequency" ? ModelInfo.ProbabilisticTagSampling : ModelInfo.UniformTagSampling;
-                        const sampleCount = tagGenerationCount.value;
-                        const frequencyThreshold = tagGenerationThreshold.value;
-                        const tags = ParseTagParagraph(tagsParagraph.innerText);
-                        const sampledTags = sampler(tags, sampleCount, frequencyThreshold);
-                        tagGeneratorRandomizedOutput.value = sampledTags.join(", ");
-                    },
-                }).element,
+                $el("h2", {
+                    style: {
+                        margin: "24px 0px 8px 0px"
+                    }
+                }, ["Tags"]),
+                tagsParagraph,
             ]),
-            $el("h2", {style: { margin: "24px 0px 8px 0px" } }, ["Training Tags"]),
-            tagsParagraph,
         ]);
         const tagButton = this.elements.tabButtons[2]; // TODO: remove magic value
         tagButton.style.display = isTags ? "" : "none";