[Feature QOL]be able to add custom lists from local file or from repo with tag lists with drop down menus

[Bercraft]

I modified the autocompleter.js inside ComfyUI-Zluda\custom_nodes\comfyui-custom-scripts\web\js, so that now lists from local or froma repo can be loaded. you just have to repplace the class in the file. Hope pythongosssss can implement it. the original repo with the updated lists is at https://github.com/DraconicDragon/dbr-e621-lists-archive by DraconicDragon.

I uploaded the script as .txt file, if you want to copy paste just rename the script from .txt to .js.

you can change repo editing the script chanbe Bercraft to DraconicDragon

autocompleter.txt

class CustomWordsDialog extends ComfyDialog { async show() { const text = await getCustomWords(); this.words = $el("textarea", { textContent: text, style: { width: "70vw", height: "70vh", }, });

    const repoOptions = [
        { value: "danbooru", label: "Danbooru" },
        { value: "e621", label: "e621" },
    ];

    const repoSelect = $el("select", {
        style: {
            flex: "auto",
        },
        onchange: (event) => {
            this.updateFileList(event.target.value);
        },
    });

    repoOptions.forEach(option => {
        repoSelect.appendChild(
            $el("option", {
                value: option.value,
                textContent: option.label,
            })
        );
    });

    this.fileSelect = $el("select", {
        style: {
            flex: "auto",
        },
    });

    this.updateFileList(repoOptions[0].value); // Initialize with the first repo

    const loadButton = $el("button", {
        textContent: "Load",
        onclick: async () => {
            const repo = repoSelect.value;
            const file = this.fileSelect.value;
            if (!file) {
                alert("Please select a file to load.");
                return;
            }
            const url = `https://raw.githubusercontent.com/Bercraft/dbr-e621-lists-archive/main/tag-lists/${repo}/${file}`;
            try {
                const res = await fetch(url);
                if (res.status !== 200) {
                    throw new Error("Error loading: " + res.status + " " + res.statusText);
                }
                this.words.value = await res.text();
            } catch (error) {
                alert("Error loading selected file, please try again.");
                console.error(error);
            }
        },
    });

    const fileInput = $el("input", {
        type: "file",
        accept: ".csv,.txt",
        style: {
            display: "none",
        },
        onchange: (event) => {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    this.words.value = e.target.result;
                };
                reader.readAsText(file);
            }
        },
    });

    const localLoadButton = $el("button", {
        textContent: "Load Local File",
        onclick: () => {
            fileInput.click();
        },
    });

    super.show(
        $el(
            "div",
            {
                style: {
                    display: "flex",
                    flexDirection: "column",
                    overflow: "hidden",
                    maxHeight: "100%",
                },
            },
            [
                $el("h2", {
                    textContent: "Custom Autocomplete Words",
                    style: {
                        color: "#fff",
                        marginTop: 0,
                        textAlign: "center",
                        fontFamily: "sans-serif",
                    },
                }),
                $el(
                    "div",
                    {
                        style: {
                            color: "#fff",
                            fontFamily: "sans-serif",
                            display: "flex",
                            alignItems: "center",
                            gap: "5px",
                        },
                    },
                    [
                        $el("label", { textContent: "Repository: " }),
                        repoSelect,
                    ]
                ),
                $el(
                    "div",
                    {
                        style: {
                            color: "#fff",
                            fontFamily: "sans-serif",
                            display: "flex",
                            alignItems: "center",
                            gap: "5px",
                        },
                    },
                    [
                        $el("label", { textContent: "File: " }),
                        this.fileSelect,
                        loadButton,
                    ]
                ),
                $el(
                    "div",
                    {
                        style: {
                            color: "#fff",
                            fontFamily: "sans-serif",
                            display: "flex",
                            alignItems: "center",
                            gap: "5px",
                        },
                    },
                    [
                        localLoadButton,
                    ]
                ),
                fileInput,
                this.words,
            ]
        )
    );
}

async updateFileList(repo) {
    const url = `https://api.github.com/repos/Bercraft/dbr-e621-lists-archive/contents/tag-lists/${repo}`;
    try {
        const res = await fetch(url);
        if (res.status !== 200) {
            throw new Error("Error fetching files: " + res.status + " " + res.statusText);
        }
        const files = await res.json();
        this.fileSelect.innerHTML = ""; // Clear existing options
        files.forEach(file => {
            if (file.name.endsWith(".csv") || file.name.endsWith(".txt")) {
                this.fileSelect.appendChild(
                    $el("option", {
                        value: file.name,
                        textContent: file.name,
                    })
                );
            }
        });
    } catch (error) {
        alert("Error fetching files, please try again.");
        console.error(error);
    }
}

createButtons() {
    const btns = super.createButtons();
    const save = $el("button", {
        type: "button",
        textContent: "Save",
        onclick: async (e) => {
            try {
                const res = await api.fetchApi("/pysssss/autocomplete", { method: "POST", body: this.words.value });
                if (res.status !== 200) {
                    throw new Error("Error saving: " + res.status + " " + res.statusText);
                }
                save.textContent = "Saved!";
                addCustomWords(this.words.value);
                setTimeout(() => {
                    save.textContent = "Save";
                }, 500);
            } catch (error) {
                alert("Error saving word list!");
                console.error(error);
            }
        },
    });

    btns.unshift(save);
    return btns;
}

}

[Bercraft]

Sorry for code format git hub hates me.