refactor: Adjust project structure
This commit is contained in:
hayden
@@ -1,12 +0,0 @@
|
||||
# EditorConfig is awesome: https://EditorConfig.org
|
||||
|
||||
# top-most EditorConfig file
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
6
.gitignore
vendored
6
.gitignore
vendored
@@ -188,3 +188,9 @@ Icon
|
||||
Network Trash Folder
|
||||
Temporary Items
|
||||
.apdisk
|
||||
|
||||
# dependencies
|
||||
node_modules/
|
||||
|
||||
# dist
|
||||
web/
|
||||
|
||||
1
.husky/pre-commit
Normal file
1
.husky/pre-commit
Normal file
@@ -0,0 +1 @@
|
||||
pnpm exec lint-staged
|
||||
12
.prettierrc
Normal file
12
.prettierrc
Normal file
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"printWidth": 80,
|
||||
"tabWidth": 2,
|
||||
"useTabs": false,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "all",
|
||||
"endOfLine": "lf",
|
||||
"semi": false,
|
||||
"plugins": [
|
||||
"prettier-plugin-organize-imports"
|
||||
]
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"printWidth": 80,
|
||||
"tabWidth": 2,
|
||||
"useTabs": false,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "all"
|
||||
}
|
||||
39
.vscode/settings.json
vendored
39
.vscode/settings.json
vendored
@@ -1,20 +1,23 @@
|
||||
{
|
||||
"cSpell.words": [
|
||||
"apng",
|
||||
"Civitai",
|
||||
"ckpt",
|
||||
"comfyui",
|
||||
"FYUIKMNVB",
|
||||
"gguf",
|
||||
"gligen",
|
||||
"jfif",
|
||||
"locon",
|
||||
"loras",
|
||||
"noimage",
|
||||
"onnx",
|
||||
"rfilename",
|
||||
"unet",
|
||||
"upscaler"
|
||||
],
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
"cSpell.words": [
|
||||
"apng",
|
||||
"Civitai",
|
||||
"ckpt",
|
||||
"comfyui",
|
||||
"FYUIKMNVB",
|
||||
"gguf",
|
||||
"gligen",
|
||||
"jfif",
|
||||
"locon",
|
||||
"loras",
|
||||
"noimage",
|
||||
"onnx",
|
||||
"rfilename",
|
||||
"unet",
|
||||
"upscaler"
|
||||
],
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
||||
"files.associations": {
|
||||
"*.css": "tailwindcss"
|
||||
}
|
||||
}
|
||||
32
eslint.config.js
Normal file
32
eslint.config.js
Normal file
@@ -0,0 +1,32 @@
|
||||
import globals from 'globals'
|
||||
import pluginJs from '@eslint/js'
|
||||
import tsEslint from 'typescript-eslint'
|
||||
import pluginVue from 'eslint-plugin-vue'
|
||||
|
||||
export default [
|
||||
{
|
||||
files: ['src/**/*.{js,mjs,cjs,ts,vue}'],
|
||||
},
|
||||
{
|
||||
ignores: [
|
||||
'src/scripts/*',
|
||||
'src/extensions/core/*',
|
||||
'src/types/vue-shim.d.ts',
|
||||
],
|
||||
},
|
||||
{ languageOptions: { globals: globals.browser } },
|
||||
pluginJs.configs.recommended,
|
||||
...tsEslint.configs.recommended,
|
||||
...pluginVue.configs['flat/essential'],
|
||||
{
|
||||
files: ['src/**/*.vue'],
|
||||
languageOptions: { parserOptions: { parser: tsEslint.parser } },
|
||||
},
|
||||
{
|
||||
rules: {
|
||||
'@typescript-eslint/no-explicit-any': 'off',
|
||||
'@typescript-eslint/no-unused-vars': 'off',
|
||||
'@typescript-eslint/prefer-as-const': 'off',
|
||||
},
|
||||
},
|
||||
]
|
||||
11
index.html
Normal file
11
index.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>ComfyUI-Model-Manager</title>
|
||||
</head>
|
||||
<body>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
39
package.json
Normal file
39
package.json
Normal file
@@ -0,0 +1,39 @@
|
||||
{
|
||||
"name": "comfyui-model-manager",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite build --watch",
|
||||
"build": "vite build",
|
||||
"prepare": "husky"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.5.5",
|
||||
"@vitejs/plugin-vue": "^5.1.4",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^9.10.0",
|
||||
"eslint-plugin-vue": "^9.28.0",
|
||||
"husky": "^9.1.6",
|
||||
"less": "^4.2.0",
|
||||
"lint-staged": "^15.2.10",
|
||||
"postcss": "^8.4.47",
|
||||
"prettier": "^3.3.3",
|
||||
"prettier-plugin-organize-imports": "^4.1.0",
|
||||
"tailwindcss": "^3.4.12",
|
||||
"typescript": "^5.6.2",
|
||||
"typescript-eslint": "^8.6.0",
|
||||
"vite": "^5.4.6"
|
||||
},
|
||||
"dependencies": {
|
||||
"primevue": "^4.0.7",
|
||||
"vue": "^3.4.31",
|
||||
"vue-i18n": "^9.13.1"
|
||||
},
|
||||
"lint-staged": {
|
||||
"./**/*.{js,ts,tsx,vue}": [
|
||||
"prettier --write",
|
||||
"git add"
|
||||
]
|
||||
}
|
||||
}
|
||||
2953
pnpm-lock.yaml
generated
Normal file
2953
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
8
tailwind.config.js
Normal file
8
tailwind.config.js
Normal file
@@ -0,0 +1,8 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
33
tsconfig.json
Normal file
33
tsconfig.json
Normal file
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"skipLibCheck": true,
|
||||
"incremental": true,
|
||||
"sourceMap": true,
|
||||
"esModuleInterop": true,
|
||||
"moduleResolution": "Node",
|
||||
"experimentalDecorators": true,
|
||||
"emitDecoratorMetadata": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": false,
|
||||
"strictNullChecks": true,
|
||||
"noUnusedLocals": false,
|
||||
"noUnusedParameters": false,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"downlevelIteration": true,
|
||||
|
||||
/* AllowJs during migration phase */
|
||||
"allowJs": true,
|
||||
"baseUrl": ".",
|
||||
"outDir": "./web",
|
||||
"rootDir": "./"
|
||||
},
|
||||
"include": [
|
||||
"src/**/*",
|
||||
"src/**/*.vue",
|
||||
]
|
||||
}
|
||||
25
vite.config.ts
Normal file
25
vite.config.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
|
||||
build: {
|
||||
outDir: 'web',
|
||||
minify: 'esbuild',
|
||||
target: 'es2022',
|
||||
sourcemap: true,
|
||||
rollupOptions: {
|
||||
// Disabling tree-shaking
|
||||
// Prevent vite remove unused exports
|
||||
treeshake: true,
|
||||
},
|
||||
},
|
||||
|
||||
esbuild: {
|
||||
minifyIdentifiers: false,
|
||||
keepNames: true,
|
||||
minifySyntax: true,
|
||||
minifyWhitespace: true,
|
||||
},
|
||||
})
|
||||
231
web/downshow.js
231
web/downshow.js
@@ -1,231 +0,0 @@
|
||||
/**
|
||||
* downshow.js -- A javascript library to convert HTML to markdown.
|
||||
*
|
||||
* Copyright (c) 2013 Alex Cornejo.
|
||||
*
|
||||
* Original Markdown Copyright (c) 2004-2005 John Gruber
|
||||
* <http://darlingfireball.net/projects/markdown/>
|
||||
*
|
||||
* Redistributable under a BSD-style open source license.
|
||||
*
|
||||
* downshow has no external dependencies. It has been tested in chrome and
|
||||
* firefox, it probably works in internet explorer, but YMMV.
|
||||
*
|
||||
* Basic Usage:
|
||||
*
|
||||
* downshow(document.getElementById('#yourid').innerHTML);
|
||||
*
|
||||
* TODO:
|
||||
* - Remove extra whitespace between words in headers and other places.
|
||||
*/
|
||||
|
||||
(function () {
|
||||
var doc;
|
||||
|
||||
// Use browser DOM with jsdom as a fallback (for node.js)
|
||||
try {
|
||||
doc = document;
|
||||
} catch(e) {
|
||||
var jsdom = require("jsdom").jsdom;
|
||||
doc = jsdom("<html><head></head><body></body></html>");
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns every element in root in their bfs traversal order.
|
||||
*
|
||||
* In the process it transforms any nested lists to conform to the w3c
|
||||
* standard, see: http://www.w3.org/wiki/HTML_lists#Nesting_lists
|
||||
*/
|
||||
function bfsOrder(root) {
|
||||
var inqueue = [root], outqueue = [];
|
||||
root._bfs_parent = null;
|
||||
while (inqueue.length > 0) {
|
||||
var elem = inqueue.shift();
|
||||
outqueue.push(elem);
|
||||
var children = elem.childNodes;
|
||||
var liParent = null;
|
||||
for (var i=0 ; i<children.length; i++) {
|
||||
if (children[i].nodeType == 1) {// element node
|
||||
if (children[i].tagName === 'LI') {
|
||||
liParent = children[i];
|
||||
} else if ((children[i].tagName === 'UL' || children[i].tagName === 'OL') && liParent) {
|
||||
liParent.appendChild(children[i]);
|
||||
i--;
|
||||
continue;
|
||||
}
|
||||
children[i]._bfs_parent = elem;
|
||||
inqueue.push(children[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
outqueue.shift();
|
||||
return outqueue;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove whitespace and newlines from beginning and end of a sting.
|
||||
*/
|
||||
function trim(str) {
|
||||
return str.replace(/^\s\s*/,'').replace(/\s\s*$/, '');
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove all newlines and trims the resulting string.
|
||||
*/
|
||||
function nltrim(str) {
|
||||
return str.replace(/\s{2,}/g, ' ').replace(/^\s\s*/,'').replace(/\s\s*$/, '');
|
||||
}
|
||||
|
||||
/**
|
||||
* Add prefix to the beginning of every line in block.
|
||||
*/
|
||||
function prefixBlock(prefix, block, skipEmpty) {
|
||||
var lines = block.split('\n');
|
||||
for (var i =0; i<lines.length; i++) {
|
||||
// Do not prefix empty lines
|
||||
if (lines[i].length === 0 && skipEmpty === true)
|
||||
continue;
|
||||
else
|
||||
lines[i] = prefix + lines[i];
|
||||
}
|
||||
return lines.join('\n');
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the node's content.
|
||||
*/
|
||||
function setContent(node, content, prefix, suffix) {
|
||||
if (content.length > 0) {
|
||||
if (prefix && suffix)
|
||||
node._bfs_text = prefix + content + suffix;
|
||||
else
|
||||
node._bfs_text = content;
|
||||
} else
|
||||
node._bfs_text = '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a node's content.
|
||||
*/
|
||||
function getContent(node) {
|
||||
var text = '', atom;
|
||||
for (var i = 0; i<node.childNodes.length; i++) {
|
||||
if (node.childNodes[i].nodeType === 1) {
|
||||
atom = node.childNodes[i]._bfs_text;
|
||||
} else if (node.childNodes[i].nodeType === 3) {
|
||||
atom = node.childNodes[i].data;
|
||||
} else
|
||||
continue;
|
||||
if (text.match(/[\t ]+$/) && atom.match(/^[\t ]+/)) {
|
||||
text = text.replace(/[\t ]+$/,'') + ' ' + atom.replace(/^[\t ]+/, '');
|
||||
} else {
|
||||
text = text + atom;
|
||||
}
|
||||
}
|
||||
return text;
|
||||
}
|
||||
|
||||
/**
|
||||
* Process a node in the DOM tree.
|
||||
* */
|
||||
function processNode(node) {
|
||||
if (node.tagName === 'P' || node.tagName === 'DIV' || node.tagName === 'UL' || node.tagName === 'OL' || node.tagName === 'PRE')
|
||||
setContent(node, getContent(node), '\n\n', '\n\n');
|
||||
else if (node.tagName === 'BR')
|
||||
setContent(node, '\n\n');
|
||||
else if (node.tagName === 'HR')
|
||||
setContent(node, '\n***\n');
|
||||
else if (node.tagName === 'H1')
|
||||
setContent(node, nltrim(getContent(node)), '\n# ', '\n');
|
||||
else if (node.tagName === 'H2')
|
||||
setContent(node, nltrim(getContent(node)), '\n## ', '\n');
|
||||
else if (node.tagName === 'H3')
|
||||
setContent(node, nltrim(getContent(node)), '\n### ', '\n');
|
||||
else if (node.tagName === 'H4')
|
||||
setContent(node, nltrim(getContent(node)), '\n#### ', '\n');
|
||||
else if (node.tagName === 'H5')
|
||||
setContent(node, nltrim(getContent(node)), '\n##### ', '\n');
|
||||
else if (node.tagName === 'H6')
|
||||
setContent(node, nltrim(getContent(node)), '\n###### ', '\n');
|
||||
else if (node.tagName === 'B' || node.tagName === 'STRONG')
|
||||
setContent(node, nltrim(getContent(node)), '**', '**');
|
||||
else if (node.tagName === 'I' || node.tagName === 'EM')
|
||||
setContent(node, nltrim(getContent(node)), '_', '_');
|
||||
else if (node.tagName === 'A') {
|
||||
var href = node.href ? nltrim(node.href) : '', text = nltrim(getContent(node)) || href, title = node.title ? nltrim(node.title) : '';
|
||||
if (href.length > 0)
|
||||
setContent(node, '[' + text + '](' + href + (title ? ' "' + title + '"' : '') + ')');
|
||||
else
|
||||
setContent(node, '');
|
||||
} else if (node.tagName === 'IMG') {
|
||||
var src = node.getAttribute('src') ? nltrim(node.getAttribute('src')) : '', alt = node.alt ? nltrim(node.alt) : '', caption = node.title ? nltrim(node.title) : '';
|
||||
if (src.length > 0)
|
||||
setContent(node, '![' + alt + '](' + src + (caption ? ' "' + caption + '"' : '') + ')');
|
||||
else
|
||||
setContent(node, '');
|
||||
} else if (node.tagName === 'BLOCKQUOTE') {
|
||||
var block_content = getContent(node);
|
||||
if (block_content.length > 0)
|
||||
setContent(node, prefixBlock('> ', block_content), '\n\n', '\n\n');
|
||||
else
|
||||
setContent(node, '');
|
||||
} else if (node.tagName === 'CODE') {
|
||||
if (node._bfs_parent.tagName === 'PRE' && node._bfs_parent._bfs_parent !== null)
|
||||
setContent(node, prefixBlock(' ', getContent(node)));
|
||||
else
|
||||
setContent(node, nltrim(getContent(node)), '`', '`');
|
||||
} else if (node.tagName === 'LI') {
|
||||
var list_content = getContent(node);
|
||||
if (list_content.length > 0)
|
||||
if (node._bfs_parent.tagName === 'OL')
|
||||
setContent(node, trim(prefixBlock(' ', list_content, true)), '1. ', '\n\n');
|
||||
else
|
||||
setContent(node, trim(prefixBlock(' ', list_content, true)), '- ', '\n\n');
|
||||
else
|
||||
setContent(node, '');
|
||||
} else
|
||||
setContent(node, getContent(node));
|
||||
}
|
||||
|
||||
function downshow(html, options) {
|
||||
var root = doc.createElement('pre');
|
||||
root.innerHTML = html;
|
||||
var nodes = bfsOrder(root).reverse(), i;
|
||||
|
||||
if (options && options.nodeParser) {
|
||||
for (i = 0; i<nodes.length; i++) {
|
||||
var result = options.nodeParser(doc, nodes[i].cloneNode(true));
|
||||
if (result === false)
|
||||
processNode(nodes[i]);
|
||||
else
|
||||
setContent(nodes[i], result);
|
||||
}
|
||||
} else {
|
||||
for (i = 0; i<nodes.length; i++) {
|
||||
processNode(nodes[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return getContent(root)
|
||||
// remove empty lines between blockquotes
|
||||
.replace(/(\n(?:> )+[^\n]*)\n+(\n(?:> )+)/g, "$1\n$2")
|
||||
// remove empty blockquotes
|
||||
.replace(/\n((?:> )+[ ]*\n)+/g, '\n\n')
|
||||
// remove extra newlines
|
||||
.replace(/\n[ \t]*(?:\n[ \t]*)+\n/g,'\n\n')
|
||||
// remove trailing whitespace
|
||||
.replace(/\s\s*$/, '')
|
||||
// convert lists to inline when not using paragraphs
|
||||
.replace(/^([ \t]*(?:\d+\.|\+|\-)[^\n]*)\n\n+(?=[ \t]*(?:\d+\.|\+|\-|\*)[^\n]*)/gm, "$1\n")
|
||||
// remove starting newlines
|
||||
.replace(/^\n\n*/, '');
|
||||
}
|
||||
|
||||
// Export for use in server and client.
|
||||
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
|
||||
module.exports = downshow;
|
||||
else if (typeof define === 'function' && define.amd)
|
||||
define([], function () {return downshow;});
|
||||
else
|
||||
window.downshow = downshow;
|
||||
})();
|
||||
@@ -1,8 +0,0 @@
|
||||
import globals from "globals";
|
||||
import pluginJs from "@eslint/js";
|
||||
|
||||
|
||||
export default [
|
||||
{languageOptions: { globals: globals.browser }},
|
||||
pluginJs.configs.recommended,
|
||||
];
|
||||
2498
web/marked.js
2498
web/marked.js
File diff suppressed because it is too large
Load Diff
@@ -1,698 +0,0 @@
|
||||
/* model manager */
|
||||
.model-manager {
|
||||
background-color: var(--comfy-menu-bg);
|
||||
box-sizing: border-box;
|
||||
color: var(--bg-color);
|
||||
font-family: monospace;
|
||||
font-size: 15px;
|
||||
height: 100%;
|
||||
padding: 8px;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
z-index: 2000;
|
||||
|
||||
/*override comfy-modal settings*/
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
justify-content: unset;
|
||||
max-height: 100vh;
|
||||
max-width: 100vw;
|
||||
transform: none;
|
||||
/*disable double-tap zoom on model manager*/
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.model-manager .comfy-modal-content {
|
||||
width: 100%;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.model-manager .no-highlight {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-text-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.model-manager label:has(> *){
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.model-manager label > * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* sidebar */
|
||||
|
||||
.model-manager {
|
||||
--model-manager-sidebar-width-left: 50vw;
|
||||
--model-manager-sidebar-width-right: 50vw;
|
||||
--model-manager-sidebar-height-top: 50vh;
|
||||
--model-manager-sidebar-height-bottom: 50vh;
|
||||
|
||||
--model-manager-left: 0;
|
||||
--model-manager-right: 0;
|
||||
--model-manager-top: 0;
|
||||
--model-manager-bottom: 0;
|
||||
|
||||
left: var(--model-manager-left);
|
||||
top: var(--model-manager-right);
|
||||
right: var(--model-manager-top);
|
||||
bottom: var(--model-manager-bottom);
|
||||
}
|
||||
|
||||
.model-manager.cursor-drag-left,
|
||||
.model-manager.cursor-drag-right {
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
.model-manager.cursor-drag-top,
|
||||
.model-manager.cursor-drag-bottom {
|
||||
cursor: ns-resize;
|
||||
}
|
||||
|
||||
.model-manager.cursor-drag-top.cursor-drag-left,
|
||||
.model-manager.cursor-drag-bottom.cursor-drag-right {
|
||||
cursor: nwse-resize;
|
||||
}
|
||||
|
||||
.model-manager.cursor-drag-top.cursor-drag-right,
|
||||
.model-manager.cursor-drag-bottom.cursor-drag-left {
|
||||
cursor: nesw-resize;
|
||||
}
|
||||
|
||||
/* sidebar buttons */
|
||||
.model-manager .sidebar-buttons {
|
||||
overflow: hidden;
|
||||
color: var(--input-text);
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.model-manager .sidebar-buttons .radio-button-group-active {
|
||||
border-color: var(--fg-color);
|
||||
color: var(--fg-color);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.model-manager[data-sidebar-state="left"] {
|
||||
width: var(--model-manager-sidebar-width-left);
|
||||
max-width: 95vw;
|
||||
min-width: 22vw;
|
||||
right: auto;
|
||||
border-right: solid var(--border-color) 2px;
|
||||
}
|
||||
|
||||
.model-manager[data-sidebar-state="top"] {
|
||||
height: var(--model-manager-sidebar-height-top);
|
||||
max-height: 95vh;
|
||||
min-height: 22vh;
|
||||
bottom: auto;
|
||||
border-bottom: solid var(--border-color) 2px;
|
||||
}
|
||||
|
||||
.model-manager[data-sidebar-state="bottom"] {
|
||||
height: var(--model-manager-sidebar-height-bottom);
|
||||
max-height: 95vh;
|
||||
min-height: 22vh;
|
||||
top: auto;
|
||||
border-top: solid var(--border-color) 2px;
|
||||
}
|
||||
|
||||
.model-manager[data-sidebar-state="right"] {
|
||||
width: var(--model-manager-sidebar-width-right);
|
||||
max-width: 95vw;
|
||||
min-width: 22vw;
|
||||
left: auto;
|
||||
border-left: solid var(--border-color) 2px;
|
||||
}
|
||||
|
||||
/* common */
|
||||
.model-manager h1 {
|
||||
min-width: 0;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.model-manager textarea {
|
||||
border: solid 2px var(--border-color);
|
||||
border-radius: 8px;
|
||||
font-size: 1.2em;
|
||||
resize: vertical;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.model-manager input[type="file"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.model-manager button {
|
||||
margin: 0;
|
||||
border: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
.model-manager button:not(.icon-button),
|
||||
.model-manager select,
|
||||
.model-manager input {
|
||||
padding: 4px 8px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.model-manager button:disabled,
|
||||
.model-manager select:disabled,
|
||||
.model-manager input:disabled {
|
||||
background-color: var(--comfy-menu-bg);
|
||||
filter: brightness(1.2);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.model-manager button.block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.model-manager ::-webkit-scrollbar {
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.model-manager ::-webkit-scrollbar-track {
|
||||
background-color: var(--comfy-input-bg);
|
||||
border-right: 1px solid var(--border-color);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.model-manager ::-webkit-scrollbar-thumb {
|
||||
background-color: var(--fg-color);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.model-manager .search-text-area::-webkit-input-placeholder {
|
||||
font-style: italic;
|
||||
}
|
||||
.model-manager .search-text-area:-moz-placeholder {
|
||||
font-style: italic;
|
||||
}
|
||||
.model-manager .search-text-area::-moz-placeholder {
|
||||
font-style: italic;
|
||||
}
|
||||
.model-manager .search-text-area:-ms-input-placeholder {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.model-manager .icon-button {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.model-manager .row {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.model-manager .tab-header {
|
||||
display: flex;
|
||||
padding: 8px 0px;
|
||||
flex-direction: column;
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
.model-manager .tab-header-flex-block {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.model-manager .comfy-button-success {
|
||||
color: green;
|
||||
border-color: green;
|
||||
}
|
||||
|
||||
.model-manager .comfy-button-failure {
|
||||
color: darkred;
|
||||
border-color: darkred;
|
||||
}
|
||||
|
||||
.model-manager .no-select {
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* main content */
|
||||
.model-manager .model-manager-panel {
|
||||
color: var(--fg-color);
|
||||
}
|
||||
|
||||
.model-manager .model-tab-group {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.model-manager .model-tab-group .tab-button {
|
||||
background-color: var(--comfy-menu-bg);
|
||||
border: 2px solid var(--border-color);
|
||||
border-bottom: none;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
cursor: pointer;
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 0px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.model-manager .model-tab-group .tab-button.active {
|
||||
background-color: var(--bg-color);
|
||||
cursor: default;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.model-manager .model-manager-body {
|
||||
background-color: var(--bg-color);
|
||||
border: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
.model-manager .model-manager-panel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.model-manager .model-manager-body {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding: 8px 0px 8px 16px;
|
||||
}
|
||||
|
||||
.model-manager .model-manager-body .tab-contents {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.model-manager .model-manager-body .tab-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
/* model info view */
|
||||
.model-manager .model-info-container {
|
||||
background-color: var(--bg-color);
|
||||
border-radius: 16px;
|
||||
color: var(--fg-color);
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.model-manager .model-metadata {
|
||||
table-layout: fixed;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.model-manager .model-metadata-key {
|
||||
overflow-wrap: break-word;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.model-manager .model-metadata-value {
|
||||
overflow-wrap: anywhere;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.model-manager table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.model-manager th {
|
||||
border: 1px solid;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
/* download tab */
|
||||
|
||||
.model-manager .download-model-infos {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
.model-manager .download-details summary {
|
||||
background-color: var(--comfy-menu-bg);
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.model-manager .download-details[open] summary {
|
||||
background-color: var(--border-color);
|
||||
}
|
||||
|
||||
.model-manager .download-details > div {
|
||||
column-gap: 8px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
padding: 8px;
|
||||
row-gap: 16px;
|
||||
}
|
||||
|
||||
.model-manager [data-name="Download"] .download-settings-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.model-manager [data-name="Download"] .download-settings {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 16px;
|
||||
}
|
||||
|
||||
.model-manager .download-button {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
/* models tab */
|
||||
.model-manager [data-name="Models"] .row {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* preview image */
|
||||
.model-manager .item {
|
||||
position: relative;
|
||||
width: 240px;
|
||||
height: 360px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.model-manager .item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.model-manager .model-info-container .item {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
.model-manager .model-info-container .item img {
|
||||
height: auto;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
max-height: 50vh;
|
||||
}
|
||||
|
||||
.model-manager .model-preview-button-left,
|
||||
.model-manager .model-preview-button-right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.model-manager .model-preview-button-right {
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
.model-manager .model-preview-button-left {
|
||||
left: 4px;
|
||||
}
|
||||
|
||||
.model-manager .item .model-preview-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
/* grid */
|
||||
.model-manager .comfy-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.model-manager .comfy-grid .model-label {
|
||||
background-color: rgb(from var(--content-hover-bg) r g b / 0.5);
|
||||
width: 100%;
|
||||
height: 2.2rem;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
line-height: 2.2rem;
|
||||
}
|
||||
|
||||
.model-manager .comfy-grid .model-label > p {
|
||||
width: calc(100% - 2rem);
|
||||
overflow-x: scroll;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.model-manager .comfy-grid .model-label {
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.model-manager .comfy-grid .model-label ::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.model-manager .comfy-grid .model-preview-top-right,
|
||||
.model-manager .comfy-grid .model-preview-top-left {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.model-manager .comfy-grid .model-preview-top-right {
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.model-manager .comfy-grid .model-preview-top-left {
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.model-manager .comfy-grid .model-button {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.model-manager .comfy-grid .model-button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.model-manager .comfy-grid .model-label {
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
/* radio */
|
||||
.model-manager .comfy-radio-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.model-manager .comfy-radio {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 4px 16px;
|
||||
color: var(--input-text);
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 16px;
|
||||
background-color: var(--comfy-input-bg);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.model-manager .comfy-radio:has(> input[type="radio"]:checked) {
|
||||
border-color: var(--border-color);
|
||||
background-color: var(--comfy-menu-bg);
|
||||
}
|
||||
|
||||
.model-manager .comfy-radio input[type="radio"]:checked + label {
|
||||
color: var(--fg-color);
|
||||
}
|
||||
|
||||
.model-manager .radio-input {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* model preview select */
|
||||
.model-manager .model-preview-select-radio-container {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.model-manager .model-preview-select-radio-inputs > div {
|
||||
padding: 16px 0 8px 0;
|
||||
}
|
||||
|
||||
.model-manager .model-preview-select-radio-container img {
|
||||
position: relative;
|
||||
width: 230px;
|
||||
height: 345px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* topbar */
|
||||
.model-manager .topbar-buttons {
|
||||
display: flex;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.model-manager .topbar-buttons button {
|
||||
height: 33px;
|
||||
padding: 1px 6px;
|
||||
width: 33px;
|
||||
}
|
||||
|
||||
.model-manager .model-manager-head .topbar-left {
|
||||
display: flex;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.model-manager .model-manager-head .topbar-right {
|
||||
column-gap: 4px;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.model-manager .model-manager-head .topbar-right select {
|
||||
position: relative;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
font-size: 24px;
|
||||
-o-appearance: none;
|
||||
-ms-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
/* search dropdown */
|
||||
.model-manager .input-dropdown-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.model-manager .search-models {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.model-manager .model-select-dropdown {
|
||||
min-width: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.model-manager .search-text-area,
|
||||
.model-manager .plain-text-area,
|
||||
.model-manager .model-select-dropdown {
|
||||
flex: 1;
|
||||
min-height: 36px;
|
||||
padding-block: 0;
|
||||
min-width: 36px;
|
||||
}
|
||||
|
||||
.model-manager .model-select-dropdown {
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.model-manager .search-directory-dropdown {
|
||||
background-color: var(--bg-color);
|
||||
border: 2px var(--border-color) solid;
|
||||
border-radius: 10px;
|
||||
color: var(--fg-color);
|
||||
max-height: 40vh;
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media (pointer:none), (pointer:coarse) {
|
||||
.model-manager .search-directory-dropdown {
|
||||
max-height: 17.5vh;
|
||||
}
|
||||
}
|
||||
|
||||
.model-manager .search-directory-dropdown:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.model-manager .search-directory-dropdown > p {
|
||||
margin: 0;
|
||||
padding: 0.85em 20px;
|
||||
min-width: 0;
|
||||
}
|
||||
.model-manager .search-directory-dropdown > p {
|
||||
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
.model-manager .search-directory-dropdown > p::-webkit-scrollbar {
|
||||
display: none; /* Safari and Chrome */
|
||||
}
|
||||
|
||||
.model-manager .search-directory-dropdown > p.search-directory-dropdown-key-selected,
|
||||
.model-manager .search-directory-dropdown > p.search-directory-dropdown-mouse-selected {
|
||||
background-color: var(--border-color);
|
||||
}
|
||||
|
||||
.model-manager .search-directory-dropdown > p.search-directory-dropdown-key-selected {
|
||||
border-left: 1mm solid var(--input-text);
|
||||
}
|
||||
|
||||
/* model manager settings */
|
||||
.model-manager .model-manager-settings > div,
|
||||
.model-manager .model-manager-settings > label,
|
||||
.model-manager .tag-generator-settings > label,
|
||||
.model-manager .tag-generator-settings > div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.model-manager .model-manager-settings button {
|
||||
height: 40px;
|
||||
min-width: 120px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.model-manager .model-manager-settings input[type="number"],
|
||||
.model-manager .tag-generator-settings input[type="number"]{
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.model-manager .search-settings-text {
|
||||
width: 100%;
|
||||
}
|
||||
5545
web/model-manager.js
5545
web/model-manager.js
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user