neuro_llc/ComfyBox
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

A whole lotta things

Browse Source
This commit is contained in:
space-nuko
2023-04-05 01:02:47 -05:00
parent 0f703c2123
commit 32f1900568
13 changed files with 1291 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.gitmodules vendored Normal file
View File

@@ -0,0 +1,4 @@
[submodule "gradio"]
path = gradio
url = https://github.com/gradio-app/gradio
branch = v3.24.1

1
gradio Submodule

Submodule gradio added at 759fb3b1f2

12
package.json
View File

@@ -23,18 +23,26 @@
"prettier-plugin-svelte": "^2.8.1",
"svelte": "^3.54.0",
"svelte-check": "^3.2.0",
"svelte-dnd-action": "^0.9.22",
"typescript": "^5.0.0",
"vite": "^4.2.0",
"vitest": "^0.25.3"
},
"type": "module",
"dependencies": {
"@svelteuidev/composables": "^0.11.1",
"@svelteuidev/core": "^0.11.1",
"@gradio/atoms": "workspace:^0.0.1",
"@gradio/button": "workspace:^0.0.1",
"@gradio/form": "workspace:^0.0.1",
"@gradio/icons": "workspace:^0.0.1",
"@gradio/theme": "workspace:^0.0.1",
"@gradio/utils": "workspace:^0.0.1",
"events": "^3.3.0",
"litegraph.js": "^0.7.12",
"radix-icons-svelte": "^1.2.1",
"svelte-preprocess": "^5.0.3",
"svelte-splitpanes": "^0.7.13",
"tailwindcss": "^3.0.12",
"typed-emitter": "github:andywer/typed-emitter",
"vite-plugin-full-reload": "^1.0.5"
}
}

347
pnpm-lock.yaml generated
View File

@@ -1,35 +1,51 @@
lockfileVersion: 5.4
importers:
.:
specifiers:
'@gradio/atoms': workspace:^0.0.1
'@gradio/button': workspace:^0.0.1
'@gradio/form': workspace:^0.0.1
'@gradio/icons': workspace:^0.0.1
'@gradio/theme': workspace:^0.0.1
'@gradio/utils': workspace:^0.0.1
'@sveltejs/adapter-auto': ^2.0.0
'@sveltejs/kit': ^1.5.0
'@svelteuidev/composables': ^0.11.1
'@svelteuidev/core': ^0.11.1
eslint: ^8.28.0
eslint-config-prettier: ^8.5.0
eslint-plugin-svelte3: ^4.0.0
events: ^3.3.0
litegraph.js: ^0.7.12
prettier: ^2.8.0
prettier-plugin-svelte: ^2.8.1
radix-icons-svelte: ^1.2.1
svelte: ^3.54.0
svelte-check: ^3.2.0
svelte-dnd-action: ^0.9.22
svelte-preprocess: ^5.0.3
svelte-splitpanes: ^0.7.13
tailwindcss: ^3.0.12
typed-emitter: github:andywer/typed-emitter
typescript: ^5.0.0
vite: ^4.2.0
vite-plugin-full-reload: ^1.0.5
vitest: ^0.25.3
dependencies:
'@svelteuidev/composables': 0.11.1
'@svelteuidev/core': 0.11.1_37jsqdnf2svoc6irho24bh7xqi
'@gradio/atoms': link:gradio/js/atoms
'@gradio/button': link:gradio/js/button
'@gradio/form': link:gradio/js/form
'@gradio/icons': link:gradio/js/icons
'@gradio/theme': link:gradio/js/theme
'@gradio/utils': link:gradio/js/utils
events: 3.3.0
litegraph.js: 0.7.12
radix-icons-svelte: 1.2.1
svelte-preprocess: 5.0.3_ex2livsgfbezl6rd73hucsky7y
svelte-splitpanes: 0.7.13_svelte@3.58.0
tailwindcss: 3.3.1
typed-emitter: github.com/andywer/typed-emitter/9a139b6fa0ec6b0db6141b5b756b784e4f7ef4e4
vite-plugin-full-reload: 1.0.5_vite@4.2.1
devDependencies:
'@sveltejs/adapter-auto': 2.0.0_@sveltejs+kit@1.15.0
'@sveltejs/kit': 1.15.0_svelte@3.58.0+vite@4.2.1
@@ -40,6 +56,7 @@ devDependencies:
prettier-plugin-svelte: 2.10.0_ur5pqdgn24bclu6l6i7qojopk4
svelte: 3.58.0
svelte-check: 3.2.0_svelte@3.58.0
svelte-dnd-action: 0.9.22_svelte@3.58.0
typescript: 5.0.3
vite: 4.2.1
vitest: 0.25.8
@@ -259,16 +276,6 @@ packages:
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dev: true
/@floating-ui/core/0.7.3:
resolution: {integrity: sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg==}
dev: false
/@floating-ui/dom/0.5.2:
resolution: {integrity: sha512-z1DnEa7F3d8Fm/eXSbii8UEGpcjZGkQaYYUI0WpEVgD3vBfebDW8j/3ysusxonuMexoigA+A3b/fYH7sEqiwyg==}
dependencies:
'@floating-ui/core': 0.7.3
dev: false
/@humanwhocodes/config-array/0.11.8:
resolution: {integrity: sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==}
engines: {node: '>=10.10.0'}
@@ -310,12 +317,10 @@ packages:
dependencies:
'@nodelib/fs.stat': 2.0.5
run-parallel: 1.2.0
dev: true
/@nodelib/fs.stat/2.0.5:
resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
engines: {node: '>= 8'}
dev: true
/@nodelib/fs.walk/1.2.8:
resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
@@ -323,16 +328,11 @@ packages:
dependencies:
'@nodelib/fs.scandir': 2.1.5
fastq: 1.15.0
dev: true
/@polka/url/1.0.0-next.21:
resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
dev: true
/@stitches/core/1.2.8:
resolution: {integrity: sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==}
dev: false
/@sveltejs/adapter-auto/2.0.0_@sveltejs+kit@1.15.0:
resolution: {integrity: sha512-b+gkHFZgD771kgV3aO4avHFd7y1zhmMYy9i6xOK7m/rwmwaRO8gnF5zBc0Rgca80B2PMU1bKNxyBTHA14OzUAQ==}
peerDependencies:
@@ -389,22 +389,6 @@ packages:
- supports-color
dev: true
/@svelteuidev/composables/0.11.1:
resolution: {integrity: sha512-TTRGTDlrJD22KT/X8L2he5hu3rDorzzB591sgzDjtCi35vKF6Z/ijuc/ngNCFHA+2WxcDGBGPs7YewEgv2yEKg==}
dev: false
/@svelteuidev/core/0.11.1_37jsqdnf2svoc6irho24bh7xqi:
resolution: {integrity: sha512-Dy16B6OaoSgMPyWL+WvrJwFB529N6Gmr4S4qdUWmE3LrJwhm9rNtwoEQn167dhOlmTQhfgJDot+DuIRRwtGXrw==}
peerDependencies:
'@svelteuidev/composables': 0.11.1
svelte: '>=3.55.0'
dependencies:
'@floating-ui/dom': 0.5.2
'@stitches/core': 1.2.8
'@svelteuidev/composables': 0.11.1
svelte: 3.58.0
dev: false
/@types/chai-subset/1.3.3:
resolution: {integrity: sha512-frBecisrNGz+F4T6bcc+NLeolfiojh5FxW2klu669+8BARtyQv2C/GkNW6FUodVe4BroGMP/wER/YDGc7rEllw==}
dependencies:
@@ -466,13 +450,20 @@ packages:
color-convert: 2.0.1
dev: true
/any-promise/1.3.0:
resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
dev: false
/anymatch/3.1.3:
resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
engines: {node: '>= 8'}
dependencies:
normalize-path: 3.0.0
picomatch: 2.3.1
dev: true
/arg/5.0.2:
resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
dev: false
/argparse/2.0.1:
resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
@@ -488,7 +479,6 @@ packages:
/binary-extensions/2.2.0:
resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
engines: {node: '>=8'}
dev: true
/brace-expansion/1.1.11:
resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
@@ -501,7 +491,6 @@ packages:
engines: {node: '>=8'}
dependencies:
fill-range: 7.0.1
dev: true
/buffer-crc32/0.2.13:
resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
@@ -518,6 +507,11 @@ packages:
engines: {node: '>=6'}
dev: true
/camelcase-css/2.0.1:
resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
engines: {node: '>= 6'}
dev: false
/chai/4.3.7:
resolution: {integrity: sha512-HLnAzZ2iupm25PlN0xFreAlBA5zaBSv3og0DdeGA4Ar6h6rJ3A0rolRUKJhSF2V10GZKDgWF/VmAEsNWjCRB+A==}
engines: {node: '>=4'}
@@ -556,7 +550,6 @@ packages:
readdirp: 3.6.0
optionalDependencies:
fsevents: 2.3.2
dev: true
/color-convert/2.0.1:
resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
@@ -567,7 +560,11 @@ packages:
/color-name/1.1.4:
resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
dev: true
/commander/4.1.1:
resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
engines: {node: '>= 6'}
dev: false
/concat-map/0.0.1:
resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
@@ -586,6 +583,12 @@ packages:
which: 2.0.2
dev: true
/cssesc/3.0.0:
resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
engines: {node: '>=4'}
hasBin: true
dev: false
/debug/4.3.4:
resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
engines: {node: '>=6.0'}
@@ -622,6 +625,14 @@ packages:
resolution: {integrity: sha512-n94yQo4LI3w7erwf84mhRUkUJfhLoCZiLyoOZ/QFsDbcWNZePrLwbQpvZBUG2TNxwV3VjCKPxkiiQA6pe3TrTA==}
dev: true
/didyoumean/1.2.2:
resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
dev: false
/dlv/1.1.3:
resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
dev: false
/doctrine/3.0.0:
resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
engines: {node: '>=6.0.0'}
@@ -789,6 +800,11 @@ packages:
engines: {node: '>=0.10.0'}
dev: true
/events/3.3.0:
resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
engines: {node: '>=0.8.x'}
dev: false
/fast-deep-equal/3.1.3:
resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
dev: true
@@ -802,7 +818,6 @@ packages:
glob-parent: 5.1.2
merge2: 1.4.1
micromatch: 4.0.5
dev: true
/fast-json-stable-stringify/2.1.0:
resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
@@ -816,7 +831,6 @@ packages:
resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==}
dependencies:
reusify: 1.0.4
dev: true
/file-entry-cache/6.0.1:
resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
@@ -830,7 +844,6 @@ packages:
engines: {node: '>=8'}
dependencies:
to-regex-range: 5.0.1
dev: true
/find-up/5.0.0:
resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
@@ -874,14 +887,23 @@ packages:
engines: {node: '>= 6'}
dependencies:
is-glob: 4.0.3
dev: true
/glob-parent/6.0.2:
resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
engines: {node: '>=10.13.0'}
dependencies:
is-glob: 4.0.3
dev: true
/glob/7.1.6:
resolution: {integrity: sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==}
dependencies:
fs.realpath: 1.0.0
inflight: 1.0.6
inherits: 2.0.4
minimatch: 3.1.2
once: 1.4.0
path-is-absolute: 1.0.1
dev: false
/glob/7.2.3:
resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
@@ -962,7 +984,6 @@ packages:
engines: {node: '>=8'}
dependencies:
binary-extensions: 2.2.0
dev: true
/is-core-module/2.11.0:
resolution: {integrity: sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==}
@@ -972,19 +993,16 @@ packages:
/is-extglob/2.1.1:
resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
engines: {node: '>=0.10.0'}
dev: true
/is-glob/4.0.3:
resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
engines: {node: '>=0.10.0'}
dependencies:
is-extglob: 2.1.1
dev: true
/is-number/7.0.0:
resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
engines: {node: '>=0.12.0'}
dev: true
/is-path-inside/3.0.3:
resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
@@ -995,6 +1013,11 @@ packages:
resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
dev: true
/jiti/1.18.2:
resolution: {integrity: sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==}
hasBin: true
dev: false
/js-sdsl/4.4.0:
resolution: {integrity: sha512-FfVSdx6pJ41Oa+CF7RDaFmTnCaFhua+SNYQX74riGOpl96x+2jQCqEfQ2bnXu/5DPCqlRuiqyvTJM0Qjz26IVg==}
dev: true
@@ -1027,6 +1050,15 @@ packages:
type-check: 0.4.0
dev: true
/lilconfig/2.1.0:
resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
engines: {node: '>=10'}
dev: false
/lines-and-columns/1.2.4:
resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
dev: false
/litegraph.js/0.7.12:
resolution: {integrity: sha512-aQUj5jxKtQLzY0+qQ6YmIfa6EOqhI8lXlJPwEpJFFUir893ulVcDt9YIMFA9rwBDg4/HlFyAUGmwktAduebm9Q==}
dev: false
@@ -1069,7 +1101,6 @@ packages:
/merge2/1.4.1:
resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
engines: {node: '>= 8'}
dev: true
/micromatch/4.0.5:
resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
@@ -1077,7 +1108,6 @@ packages:
dependencies:
braces: 3.0.2
picomatch: 2.3.1
dev: true
/mime/3.0.0:
resolution: {integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==}
@@ -1117,6 +1147,14 @@ packages:
resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
dev: true
/mz/2.7.0:
resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
dependencies:
any-promise: 1.3.0
object-assign: 4.1.1
thenify-all: 1.6.0
dev: false
/nanoid/3.3.6:
resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -1129,7 +1167,16 @@ packages:
/normalize-path/3.0.0:
resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
engines: {node: '>=0.10.0'}
dev: true
/object-assign/4.1.1:
resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
engines: {node: '>=0.10.0'}
dev: false
/object-hash/3.0.0:
resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
engines: {node: '>= 6'}
dev: false
/once/1.4.0:
resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
@@ -1197,6 +1244,77 @@ packages:
resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
engines: {node: '>=8.6'}
/pify/2.3.0:
resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
engines: {node: '>=0.10.0'}
dev: false
/pirates/4.0.5:
resolution: {integrity: sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==}
engines: {node: '>= 6'}
dev: false
/postcss-import/14.1.0_postcss@8.4.21:
resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
engines: {node: '>=10.0.0'}
peerDependencies:
postcss: ^8.0.0
dependencies:
postcss: 8.4.21
postcss-value-parser: 4.2.0
read-cache: 1.0.0
resolve: 1.22.1
dev: false
/postcss-js/4.0.1_postcss@8.4.21:
resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
engines: {node: ^12 || ^14 || >= 16}
peerDependencies:
postcss: ^8.4.21
dependencies:
camelcase-css: 2.0.1
postcss: 8.4.21
dev: false
/postcss-load-config/3.1.4_postcss@8.4.21:
resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
engines: {node: '>= 10'}
peerDependencies:
postcss: '>=8.0.9'
ts-node: '>=9.0.0'
peerDependenciesMeta:
postcss:
optional: true
ts-node:
optional: true
dependencies:
lilconfig: 2.1.0
postcss: 8.4.21
yaml: 1.10.2
dev: false
/postcss-nested/6.0.0_postcss@8.4.21:
resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==}
engines: {node: '>=12.0'}
peerDependencies:
postcss: ^8.2.14
dependencies:
postcss: 8.4.21
postcss-selector-parser: 6.0.11
dev: false
/postcss-selector-parser/6.0.11:
resolution: {integrity: sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==}
engines: {node: '>=4'}
dependencies:
cssesc: 3.0.0
util-deprecate: 1.0.2
dev: false
/postcss-value-parser/4.2.0:
resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
dev: false
/postcss/8.4.21:
resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==}
engines: {node: ^10 || ^12 || >=14}
@@ -1233,18 +1351,27 @@ packages:
/queue-microtask/1.2.3:
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
dev: true
/quick-lru/5.1.1:
resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
engines: {node: '>=10'}
dev: false
/radix-icons-svelte/1.2.1:
resolution: {integrity: sha512-svmiMd0ocpdTm9cvAz0klcZpnh639lVctj6psQiawd4pYalVzOG4cX+JizAgRckyTAsRVdzObP7D2EBrSfdghA==}
dev: false
/read-cache/1.0.0:
resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
dependencies:
pify: 2.3.0
dev: false
/readdirp/3.6.0:
resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
engines: {node: '>=8.10.0'}
dependencies:
picomatch: 2.3.1
dev: true
/resolve-from/4.0.0:
resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
@@ -1262,7 +1389,6 @@ packages:
/reusify/1.0.4:
resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
dev: true
/rimraf/2.7.1:
resolution: {integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==}
@@ -1288,7 +1414,14 @@ packages:
resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
dependencies:
queue-microtask: 1.2.3
dev: true
/rxjs/7.8.0:
resolution: {integrity: sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==}
requiresBuild: true
dependencies:
tslib: 2.5.0
dev: false
optional: true
/sade/1.8.1:
resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
@@ -1377,6 +1510,19 @@ packages:
acorn: 8.8.2
dev: true
/sucrase/3.31.0:
resolution: {integrity: sha512-6QsHnkqyVEzYcaiHsOKkzOtOgdJcb8i54x6AV2hDwyZcY9ZyykGZVw6L/YN98xC0evwTP6utsWWrKRaa8QlfEQ==}
engines: {node: '>=8'}
hasBin: true
dependencies:
commander: 4.1.1
glob: 7.1.6
lines-and-columns: 1.2.4
mz: 2.7.0
pirates: 4.0.5
ts-interface-checker: 0.1.13
dev: false
/supports-color/7.2.0:
resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
engines: {node: '>=8'}
@@ -1415,6 +1561,14 @@ packages:
- sugarss
dev: true
/svelte-dnd-action/0.9.22_svelte@3.58.0:
resolution: {integrity: sha512-lOQJsNLM1QWv5mdxIkCVtk6k4lHCtLgfE59y8rs7iOM6erchbLC9hMEFYSveZz7biJV0mpg7yDSs4bj/RT/YkA==}
peerDependencies:
svelte: '>=3.23.0'
dependencies:
svelte: 3.58.0
dev: true
/svelte-hmr/0.15.1_svelte@3.58.0:
resolution: {integrity: sha512-BiKB4RZ8YSwRKCNVdNxK/GfY+r4Kjgp9jCLEy0DuqAKfmQtpL38cQK3afdpjw4sqSs4PLi3jIPJIFp259NkZtA==}
engines: {node: ^12.20 || ^14.13.1 || >= 16}
@@ -1483,10 +1637,56 @@ packages:
resolution: {integrity: sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==}
engines: {node: '>= 8'}
/tailwindcss/3.3.1:
resolution: {integrity: sha512-Vkiouc41d4CEq0ujXl6oiGFQ7bA3WEhUZdTgXAhtKxSy49OmKs8rEfQmupsfF0IGW8fv2iQkp1EVUuapCFrZ9g==}
engines: {node: '>=12.13.0'}
hasBin: true
dependencies:
arg: 5.0.2
chokidar: 3.5.3
color-name: 1.1.4
didyoumean: 1.2.2
dlv: 1.1.3
fast-glob: 3.2.12
glob-parent: 6.0.2
is-glob: 4.0.3
jiti: 1.18.2
lilconfig: 2.1.0
micromatch: 4.0.5
normalize-path: 3.0.0
object-hash: 3.0.0
picocolors: 1.0.0
postcss: 8.4.21
postcss-import: 14.1.0_postcss@8.4.21
postcss-js: 4.0.1_postcss@8.4.21
postcss-load-config: 3.1.4_postcss@8.4.21
postcss-nested: 6.0.0_postcss@8.4.21
postcss-selector-parser: 6.0.11
postcss-value-parser: 4.2.0
quick-lru: 5.1.1
resolve: 1.22.1
sucrase: 3.31.0
transitivePeerDependencies:
- ts-node
dev: false
/text-table/0.2.0:
resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
dev: true
/thenify-all/1.6.0:
resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
engines: {node: '>=0.8'}
dependencies:
thenify: 3.3.1
dev: false
/thenify/3.3.1:
resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
dependencies:
any-promise: 1.3.0
dev: false
/tiny-glob/0.2.9:
resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==}
dependencies:
@@ -1513,13 +1713,21 @@ packages:
engines: {node: '>=8.0'}
dependencies:
is-number: 7.0.0
dev: true
/totalist/3.0.1:
resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
engines: {node: '>=6'}
dev: true
/ts-interface-checker/0.1.13:
resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
dev: false
/tslib/2.5.0:
resolution: {integrity: sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==}
dev: false
optional: true
/type-check/0.4.0:
resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
engines: {node: '>= 0.8.0'}
@@ -1555,6 +1763,10 @@ packages:
punycode: 2.3.0
dev: true
/util-deprecate/1.0.2:
resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
dev: false
/vite-plugin-full-reload/1.0.5_vite@4.2.1:
resolution: {integrity: sha512-kVZFDFWr0DxiHn6MuDVTQf7gnWIdETGlZh0hvTiMXzRN80vgF4PKbONSq8U1d0WtHsKaFODTQgJeakLacoPZEQ==}
peerDependencies:
@@ -1703,7 +1915,20 @@ packages:
/wrappy/1.0.2:
resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
/yaml/1.10.2:
resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
engines: {node: '>= 6'}
dev: false
/yocto-queue/0.1.0:
resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
engines: {node: '>=10'}
dev: true
github.com/andywer/typed-emitter/9a139b6fa0ec6b0db6141b5b756b784e4f7ef4e4:
resolution: {tarball: https://codeload.github.com/andywer/typed-emitter/tar.gz/9a139b6fa0ec6b0db6141b5b756b784e4f7ef4e4}
name: typed-emitter
version: 2.1.0
optionalDependencies:
rxjs: 7.8.0
dev: false

2
pnpm-workspace.yaml Normal file
View File

@@ -0,0 +1,2 @@
packages:
- 'gradio/js/*'

88
src/lib/components/ComfyApp.svelte
View File

@@ -1,11 +1,14 @@
<script lang="ts">
import { onMount } from "svelte";
import { Pane, Splitpanes } from 'svelte-splitpanes';
import { Tabs } from '@svelteuidev/core';
import { Backpack, Gear } from 'radix-icons-svelte';
import ComfyUIPane from "./ComfyUIPane.svelte";
import ComfyApp from "./ComfyApp";
import { LGraphNode } from "litegraph.js";
let app: ComfyApp = undefined;
let uiPane: ComfyUIPane = undefined;
function refreshView(event) {
app.resizeCanvas();
@@ -13,6 +16,23 @@
onMount(async () => {
app = new ComfyApp();
app.eventBus.on("nodeAdded", (node: LGraphNode) => {
uiPane.addNodeUI(node);
});
app.eventBus.on("nodeRemoved", (node: LGraphNode) => {
uiPane.removeNodeUI(node);
});
app.eventBus.on("configured", (graph: LGraph) => {
uiPane.configureFinished(graph);
});
app.eventBus.on("cleared", () => {
uiPane.clear();
});
await app.setup();
refreshView();
@@ -20,14 +40,19 @@
})
</script>
<Tabs>
<Tabs.Tab label="Workspace" icon={Backpack}>
<div id="dropzone" class="dropzone"></div>
<div id="container">
<Splitpanes on:resize={refreshView}>
<Pane class="sidebar" size={20} minSize={20}>I have a min width of 20%</Pane>
<Splitpanes theme="comfy" on:resize={refreshView}>
<Pane size={20} minSize={10}>
<div>
Sidebar
</div>
</Pane>
<Pane>
<Splitpanes on:resize={refreshView} horizontal="{true}">
<Pane minSize={15}>I have a min height of 15%</Pane>
<Splitpanes theme="comfy" on:resize={refreshView} horizontal="{true}">
<Pane minSize={15}>
<ComfyUIPane bind:this={uiPane} {app} />
</Pane>
<Pane minSize={10}>
<canvas id="graph-canvas" />
</Pane>
@@ -35,10 +60,6 @@
</Pane>
</Splitpanes>
</div>
</Tabs.Tab>
<Tabs.Tab label="Settings" icon={Gear}>
</Tabs.Tab>
</Tabs>
<style>
#container {
@@ -47,24 +68,6 @@
width: 100%;
}
.panel {
overflow: auto;
position: relative;
}
.resizer[data-direction='horizontal'] {
background-color: #cbd5e0;
cursor: ew-resize;
height: 100%;
width: 2px;
}
.resizer[data-direction='vertical'] {
background-color: #cbd5e0;
cursor: ns-resize;
height: 2px;
width: 100%;
}
#comfy-content {
grid-area: content;
height: 100vh;
@@ -81,6 +84,19 @@
height: 100%;
}
.dropzone {
box-sizing: border-box;
display: none;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 99999;
background: #60a7dc80;
border: 4px dashed #60a7dc;
}
:global(html, body) {
width: 100%;
height: 100%;
@@ -88,6 +104,20 @@
font-family: Arial;
}
:global(.splitpanes.comfy.splitpanes--horizontal>.splitpanes__splitter) {
min-height: 20px;
cursor: row-resize;
}
:global(.splitpanes.comfy.splitpanes--vertical>.splitpanes__splitter) {
min-width: 20px;
cursor: col-resize;
}
:global(.splitpanes.comfy) {
max-height: calc(100vh - 60px);
}
:global(.splitpanes__pane) {
box-shadow: 0 0 3px rgba(0, 0, 0, .2) inset;
justify-content: center;

114
src/lib/components/ComfyApp.ts
View File

@@ -1,19 +1,31 @@
import { LiteGraph, LGraph, LGraphCanvas, LGraphNode } from "litegraph.js";
import type { LGraphNodeBase } from "litegraph.js";
import type { LGraphNodeBase, LConnectionKind, INodeSlot } from "litegraph.js";
import ComfyAPI from "$lib/api"
import { ComfyWidgets } from "$lib/widgets"
import defaultGraph from "$lib/defaultGraph"
import { getPngMetadata, importA1111 } from "$lib/pnginfo";
import EventEmitter from "events";
import type TypedEmitter from "typed-emitter";
type QueueItem = { num: number, batchCount: number }
type ComfyAppEvents = {
configured: (graph: LGraph) => void
nodeAdded: (node: LGraphNode) => void
nodeRemoved: (node: LGraphNode) => void
nodeConnectionChanged: (kind: LConnectionKind, node: LGraphNode, slot: INodeSlot, targetNode: LGraphNode, targetSlot: INodeSlot) => void
cleared: () => void
}
export default class ComfyApp {
api: ComfyAPI;
canvasEl: HTMLCanvasElement | null = null;
canvasCtx: CanvasRenderingContext2D | null = null;
lGraph: LGraph | null = null;
lCanvas: LGraphCanvas | null = null;
dropZone: HTMLElement | null = null;
nodeOutputs: Record<string, any> = {};
eventBus: TypedEmitter<ComfyAppEvents> = new EventEmitter() as TypedEmitter<ComfyAppEvents>;
private queueItems: QueueItem[] = [];
private processingQueue: boolean = false;
@@ -31,6 +43,8 @@ export default class ComfyApp {
this.lCanvas = new LGraphCanvas(this.canvasEl, this.lGraph);
this.canvasCtx = this.canvasEl.getContext("2d");
this.addGraphLifecycleHooks();
LiteGraph.release_link_on_empty_shows_menu = true;
LiteGraph.alt_drag_do_clone_nodes = true;
@@ -63,7 +77,7 @@ export default class ComfyApp {
// this.#addDrawNodeHandler();
// this.#addDrawGroupsHandler();
// this.#addApiUpdateHandlers();
// this.#addDropHandler();
this.addDropHandler();
// this.#addPasteHandler();
// this.#addKeyboardHandler();
@@ -101,6 +115,52 @@ export default class ComfyApp {
}
private graphOnConfigure() {
console.log("Configured");
this.eventBus.emit("configured", this.lGraph);
}
private graphOnBeforeChange(graph: LGraph, info: any) {
console.log("BeforeChange", info);
this.eventBus.emit("beforeChange", graph, info);
}
private graphOnAfterChange(graph: LGraph, info: any) {
console.log("AfterChange", info);
this.eventBus.emit("afterChange", graph, info);
}
private graphOnNodeAdded(node: LGraphNode) {
console.log("Added", node);
this.eventBus.emit("nodeAdded", node);
}
private graphOnNodeRemoved(node: LGraphNode) {
console.log("Removed", node);
this.eventBus.emit("nodeRemoved", node);
}
private graphOnNodeConnectionChange(kind: LConnectionKind, node: LGraphNode, slot: INodeSlot, targetNode: LGraphNode, targetSlot: INodeSlot) {
console.log("ConnectionChange", node);
this.eventBus.emit("nodeConnectionChanged", kind, node, slot, targetNode, targetSlot);
}
private canvasOnClear() {
console.log("CanvasClear");
this.eventBus.emit("cleared");
}
private addGraphLifecycleHooks() {
this.lGraph.onConfigure = this.graphOnConfigure.bind(this);
this.lGraph.onBeforeChange = this.graphOnBeforeChange.bind(this);
this.lGraph.onAfterChange = this.graphOnAfterChange.bind(this);
this.lGraph.onNodeAdded = this.graphOnNodeAdded.bind(this);
this.lGraph.onNodeRemoved = this.graphOnNodeRemoved.bind(this);
this.lGraph.onNodeConnectionChange = this.graphOnNodeConnectionChange.bind(this);
this.lCanvas.onClear = this.canvasOnClear.bind(this);
}
private async registerNodes() {
const app = this;
@@ -183,6 +243,41 @@ export default class ComfyApp {
// await this.#invokeExtensionsAsync("registerCustomNodes");
}
private showDropZone() {
this.dropZone.style.display = "block";
}
private hideDropZone() {
this.dropZone.style.display = "none";
}
private allowDrag(event: DragEvent) {
if (event.dataTransfer.items?.length > 0) {
event.dataTransfer.dropEffect = 'copy';
this.showDropZone();
event.preventDefault();
}
}
private async handleDrop(event: DragEvent) {
event.preventDefault();
event.stopPropagation();
this.hideDropZone();
if (event.dataTransfer.files.length > 0) {
await this.handleFile(event.dataTransfer.files[0]);
}
}
private addDropHandler() {
this.dropZone = document.getElementById("dropzone");
window.addEventListener('dragenter', this.allowDrag.bind(this));
this.dropZone.addEventListener('dragover', this.allowDrag.bind(this));
this.dropZone.addEventListener('dragleave', this.hideDropZone.bind(this));
this.dropZone.addEventListener('drop', this.handleDrop.bind(this));
}
/**
* Populates the graph with the specified workflow data
* @param {*} graphData A serialized graph object
@@ -229,11 +324,18 @@ export default class ComfyApp {
* Converts the current graph workflow for sending to the API
* @returns The workflow and node links
*/
async graphToPrompt() {
async graphToPrompt(frontendState: Record<number, any[]> = {}) {
const workflow = this.lGraph.serialize();
const output = {};
// Process nodes in order of execution
for (const node of this.lGraph.computeExecutionOrder(false, null)) {
const fromFrontend = frontendState[node.id];
if (fromFrontend) {
console.log("Set values!", node, fromFrontend)
node.widgets_values = fromFrontend;
}
const n = workflow.nodes.find((n) => n.id === node.id);
if (node.isVirtualNode) {
@@ -303,7 +405,7 @@ export default class ComfyApp {
return { workflow, output };
}
async queuePrompt(num: number, batchCount: number = 1) {
async queuePrompt(num: number, batchCount: number = 1, frontendState: Record<number, any[]> = {}) {
this.queueItems.push({ num, batchCount });
// Only have one action process the items so each one gets a unique seed correctly
@@ -318,7 +420,7 @@ export default class ComfyApp {
console.log(`Queue get! ${num} ${batchCount}`);
for (let i = 0; i < batchCount; i++) {
const p = await this.graphToPrompt();
const p = await this.graphToPrompt(frontendState);
try {
await this.api.queuePrompt(num, p);
@@ -367,7 +469,7 @@ export default class ComfyApp {
} else if (file.type === "application/json" || file.name.endsWith(".json")) {
const reader = new FileReader();
reader.onload = () => {
this.loadGraphData(JSON.parse(reader.result));
this.loadGraphData(JSON.parse(reader.result as string));
};
reader.readAsText(file);
}

165
src/lib/components/ComfyUIPane.svelte Normal file
View File

@@ -0,0 +1,165 @@
<script lang="ts">
import { Button } from "@gradio/button";
import { Block, BlockTitle } from "@gradio/atoms";
import { Dropdown, Range, TextBox } from "@gradio/form";
import { LGraphNode, LGraph } from "litegraph.js";
import type { IWidget } from "litegraph.js";
import ComfyApp from "./ComfyApp";
export let app: ComfyApp;
export function clear() {
nodes = {};
items = {};
state = {};
}
export function addNodeUI(node: LGraphNode) {
if (node.widgets) {
for (const [i, widget] of node.widgets.entries()) {
nodes[node.id] = node;
node.onPropertyChanged = (k, v) => {
console.log("PROPCHANGE", k, v)
};
if (!items[node.id]) {
items[node.id] = []
}
items[node.id].push({ node, widget })
if (!state[node.id]) {
state[node.id] = []
}
state[node.id].push(widget.value);
}
}
nodes = nodes;
items = items;
state = state;
}
export function removeNodeUI(node: LGraphNode) {
delete nodes[node.id]
delete state[node.id]
delete items[node.id]
nodes = nodes;
items = items;
state = state;
}
export function configureFinished(graph: LGraph) {
for (const node of graph.computeExecutionOrder(false, null)) {
if (node.widgets_values) {
for (const [j, value] of node.widgets_values.entries()) {
state[node.id][j] = value;
}
}
}
nodes = nodes;
state = state;
}
function getState() {
}
function queuePrompt() {
console.log("Queuing!", state);
app.queuePrompt(0, 1, state);
}
let nodes: Record<number, LGraphNode> = {};
let items: Record<number, { node: LGraphNode, widget: IWidget }[]> = {};
let state: Record<number, any[]> = {};
</script>
<div id="comfy-ui-panes">
<div class="v-pane">
{#each Object.keys(items) as id}
{@const node = nodes[id]}
<Block>
<label for={id}>
<BlockTitle>{node.title}</BlockTitle>
</label>
{#each items[id] as item, i}
{#if item.widget.type == "combo"}
<div class="wrapper">
<Dropdown
bind:value={state[id][i]}
choices={item.widget.options.values}
multiselect={false}
max_choices={1},
label={item.widget.name}
show_label={true}
disabled={item.widget.options.values.length === 0}
on:change
on:select
on:blur
/>
</div>
{:else if item.widget.type == "number"}
<div class="wrapper">
<Range
bind:value={state[id][i]}
minimum={item.widget.options.min}
maximum={item.widget.options.max}
step={item.widget.options.step}
label={item.widget.name}
show_label={true}
on:change
on:release
/>
</div>
{:else if item.widget.type == "text"}
<div class="wrapper">
<TextBox
bind:value={state[id][i]}
label={item.widget.name}
lines={item.widget.options.multiline ? 5 : 1}
show_label={true}
on:change
on:submit
on:blur
on:select
/>
</div>
{/if}
{/each}
</Block>
{/each}
</div>
<div class="v-pane">
</div>
<div class="v-pane">
<div class="wrapper">
<Button variant="primary" on:click={queuePrompt}>
Run
</Button>
</div>
</div>
</div>
<style>
#comfy-ui-panes {
width: 100%;
height: 100%;
}
.v-pane {
border: 1px solid grey;
float: left;
height: 100%;
overflow: auto;
position: relative;
width: 33%;
}
.wrapper {
padding: 10px;
width: 100%;
}
</style>

4
src/lib/widgets.ts
View File

@@ -1,7 +1,7 @@
import type { IWidget, LGraphNode } from "litegraph.js";
import type ComfyApp from "$lib/components/ComfyApp";
interface WidgetData {
export interface WidgetData {
widget: IWidget,
minWidth?: number,
minHeight?: number
@@ -55,7 +55,7 @@ const STRING: WidgetFactory = (node: LGraphNode, inputName: string, inputData: a
// if (multiline) {
// return addMultilineWidget(node, inputName, { defaultVal, ...inputData[1] }, app);
// } else {
return { widget: node.addWidget("text", inputName, defaultVal, () => {}, {}) };
return { widget: node.addWidget("text", inputName, defaultVal, () => {}, { multiline }) };
// }
};

372
src/routes/+page.svelte
View File

@@ -1,8 +1,374 @@
<script lang="ts">
import { SvelteUIProvider } from '@svelteuidev/core';
import ComfyApp from "$lib/components/ComfyApp.svelte"
import "litegraph.js/css/litegraph.css";
</script>
<SvelteUIProvider themeObserver="light">
<ComfyApp/>
</SvelteUIProvider>
<style>
:root {
--primary-50: #fff7ed;
--primary-100: #ffedd5;
--primary-200: #fed7aa;
--primary-300: #fdba74;
--primary-400: #fb923c;
--primary-500: #f97316;
--primary-600: #ea580c;
--primary-700: #c2410c;
--primary-800: #9a3412;
--primary-900: #7c2d12;
--primary-950: #6c2e12;
--secondary-50: #eff6ff;
--secondary-100: #dbeafe;
--secondary-200: #bfdbfe;
--secondary-300: #93c5fd;
--secondary-400: #60a5fa;
--secondary-500: #3b82f6;
--secondary-600: #2563eb;
--secondary-700: #1d4ed8;
--secondary-800: #1e40af;
--secondary-900: #1e3a8a;
--secondary-950: #1d3660;
--neutral-50: #f9fafb;
--neutral-100: #f3f4f6;
--neutral-200: #e5e7eb;
--neutral-300: #d1d5db;
--neutral-400: #9ca3af;
--neutral-500: #6b7280;
--neutral-600: #4b5563;
--neutral-700: #374151;
--neutral-800: #1f2937;
--neutral-900: #111827;
--neutral-950: #0b0f19;
--spacing-xxs: 1px;
--spacing-xs: 2px;
--spacing-sm: 4px;
--spacing-md: 6px;
--spacing-lg: 8px;
--spacing-xl: 10px;
--spacing-xxl: 16px;
--radius-xxs: 1px;
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-xxl: 22px;
--text-xxs: 9px;
--text-xs: 10px;
--text-sm: 12px;
--text-md: 14px;
--text-lg: 16px;
--text-xl: 22px;
--text-xxl: 26px;
--color-accent: var(--primary-500);
--color-accent-soft: var(--primary-50);
--background-fill-primary: white;
--background-fill-secondary: var(--neutral-50);
--border-color-accent: var(--primary-300);
--border-color-primary: var(--neutral-200);
--text-color-code-background-fill: var(--neutral-200);
--text-color-code-border: var(--border-color-primary);
--link-text-color: var(--secondary-600);
--link-text-color-active: var(--secondary-600);
--link-text-color-hover: var(--secondary-700);
--link-text-color-visited: var(--secondary-500);
--body-text-color-subdued: var(--neutral-400);
--body-background-fill: var(--background-fill-primary);
--body-text-color: var(--neutral-800);
--body-text-size: var(--text-md);
--body-text-weight: 400;
--embed-radius: var(--radius-lg);
--shadow-drop: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
--shadow-drop-lg: 0 1px 3px 0 rgb(0 0 0 / 0.1),
0 1px 2px -1px rgb(0 0 0 / 0.1);
--shadow-inset: rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset;
--shadow-spread: 3px;
--block-background-fill: var(--background-fill-primary);
--block-border-color: var(--border-color-primary);
--block-border-width: 1px;
--block-info-text-color: var(--body-text-color-subdued);
--block-info-text-size: var(--text-sm);
--block-info-text-weight: 400;
--block-label-background-fill: var(--background-fill-primary);
--block-label-border-color: var(--border-color-primary);
--block-label-border-width: 1px;
--block-label-text-color: var(--neutral-500);
--block-label-icon-color: var(--block-label-text-color);
--block-label-margin: 0;
--block-label-padding: var(--spacing-sm) var(--spacing-lg);
--block-label-radius: calc(var(--radius-lg) - 1px) 0
calc(var(--radius-lg) - 1px) 0;
--block-label-right-radius: 0 calc(var(--radius-lg) - 1px) 0
calc(var(--radius-lg) - 1px);
--block-label-text-size: var(--text-sm);
--block-label-text-weight: 400;
--block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px);
--block-radius: var(--radius-lg);
--block-shadow: var(--shadow-drop);
--block-title-background-fill: none;
--block-title-border-color: none;
--block-title-border-width: 0px;
--block-title-text-color: var(--neutral-500);
--block-title-padding: 0;
--block-title-radius: none;
--block-title-text-size: var(--text-md);
--block-title-text-weight: 400;
--container-radius: var(--radius-lg);
--form-gap-width: 1px;
--layout-gap: var(--spacing-xxl);
--panel-background-fill: var(--background-fill-secondary);
--panel-border-color: var(--border-color-primary);
--panel-border-width: 0;
--section-header-text-size: var(--text-md);
--section-header-text-weight: 400;
--checkbox-background-color: var(--background-fill-primary);
--checkbox-background-color-focus: var(--background-fill-primary);
--checkbox-background-color-hover: var(--background-fill-primary);
--checkbox-background-color-selected: var(--secondary-600);
--checkbox-border-color: var(--neutral-300);
--checkbox-border-color-focus: var(--secondary-500);
--checkbox-border-color-hover: var(--neutral-300);
--checkbox-border-color-selected: var(--secondary-600);
--checkbox-border-radius: var(--radius-sm);
--checkbox-border-width: var(--input-border-width);
--checkbox-label-background-fill: linear-gradient(
to top,
var(--neutral-50),
white
);
--checkbox-label-background-fill-hover: linear-gradient(
to top,
var(--neutral-100),
white
);
--checkbox-label-background-fill-selected: var(
--checkbox-label-background-fill
);
--checkbox-label-border-color: var(--border-color-primary);
--checkbox-label-border-color-hover: var(--border-color-primary);
--checkbox-label-border-width: var(--input-border-width);
--checkbox-label-gap: var(--spacing-lg);
--checkbox-label-padding: var(--spacing-md) calc(2 * var(--spacing-md));
--checkbox-label-shadow: var(--shadow-drop);
--checkbox-label-text-size: var(--text-md);
--checkbox-label-text-weight: 400;
--checkbox-shadow: var(--input-shadow);
--checkbox-label-text-color: var(--body-text-color);
--checkbox-label-text-color-selected: var(--checkbox-label-text-color);
--error-background-fill: linear-gradient(
to right,
#fee2e2,
var(--background-fill-secondary)
);
--error-border-color: #fecaca;
--error-border-width: 1px;
--error-text-color: #ef4444;
--prose-header-text-weight: 600;
--input-background-fill: white;
--input-background-fill-focus: var(--secondary-500);
--input-background-fill-hover: var(--input-background-fill);
--input-border-color: var(--border-color-primary);
--input-border-color-focus: var(--secondary-300);
--input-border-color-hover: var(--border-color-primary);
--input-border-width: 1px;
--input-padding: var(--spacing-xl);
--input-placeholder-color: var(--neutral-400);
--input-radius: var(--radius-lg);
--input-shadow: 0 0 0 var(--shadow-spread) transparent, var(--shadow-inset);
--input-shadow-focus: 0 0 0 var(--shadow-spread) var(--secondary-50),
var(--shadow-inset);
--input-text-size: var(--text-md);
--input-text-weight: 400;
--loader-color: var(--color-accent);
--prose-text-size: var(--text-md);
--prose-text-weight: 400;
--stat-background-fill: linear-gradient(
to right,
var(--primary-400),
var(--primary-200)
);
--table-border-color: var(--neutral-300);
--table-even-background-fill: white;
--table-odd-background-fill: var(--neutral-50);
--table-radius: var(--radius-lg);
--table-row-focus: var(--color-accent-soft);
--button-border-width: var(--input-border-width);
--button-cancel-background-fill: linear-gradient(
to bottom right,
#fee2e2,
#fecaca
);
--button-cancel-background-fill-hover: linear-gradient(
to bottom right,
#fee2e2,
#fee2e2
);
--button-cancel-border-color: #fecaca;
--button-cancel-border-color-hover: var(--button-cancel-border-color);
--button-cancel-text-color: #dc2626;
--button-cancel-text-color-hover: var(--button-cancel-text-color);
--button-large-padding: var(--spacing-lg) calc(2 * var(--spacing-lg));
--button-large-radius: var(--radius-lg);
--button-large-text-size: var(--text-lg);
--button-large-text-weight: 600;
--button-primary-background-fill: linear-gradient(
to bottom right,
var(--primary-100),
var(--primary-300)
);
--button-primary-background-fill-hover: linear-gradient(
to bottom right,
var(--primary-100),
var(--primary-200)
);
--button-primary-border-color: var(--primary-200);
--button-primary-border-color-hover: var(--button-primary-border-color);
--button-primary-text-color: var(--primary-600);
--button-primary-text-color-hover: var(--button-primary-text-color);
--button-secondary-background-fill: linear-gradient(
to bottom right,
var(--neutral-100),
var(--neutral-200)
);
--button-secondary-background-fill-hover: linear-gradient(
to bottom right,
var(--neutral-100),
var(--neutral-100)
);
--button-secondary-border-color: var(--neutral-200);
--button-secondary-border-color-hover: var(--button-secondary-border-color);
--button-secondary-text-color: var(--neutral-700);
--button-secondary-text-color-hover: var(--button-secondary-text-color);
--button-shadow: var(--shadow-drop);
--button-shadow-active: var(--shadow-inset);
--button-shadow-hover: var(--shadow-drop-lg);
--button-small-padding: var(--spacing-sm) calc(2 * var(--spacing-sm));
--button-small-radius: var(--radius-lg);
--button-small-text-size: var(--text-md);
--button-small-text-weight: 400;
--button-transition: none;
}
.dark {
--color-accent-soft: var(--neutral-900);
--background-fill-primary: var(--neutral-950);
--background-fill-secondary: var(--neutral-900);
--border-color-accent: var(--neutral-600);
--border-color-primary: var(--neutral-700);
--text-color-code-background-fill: var(--neutral-800);
--link-text-color-active: var(--secondary-500);
--link-text-color: var(--secondary-500);
--link-text-color-hover: var(--secondary-400);
--link-text-color-visited: var(--secondary-600);
--body-text-color-subdued: var(--neutral-400);
--body-background-fill: var(--background-fill-primary);
--body-text-color: var(--neutral-100);
--shadow-spread: 1px;
--block-background-fill: var(--neutral-800);
--block-border-color: var(--border-color-primary);
--block-border-width: 1px;
--block-info-text-color: var(--body-text-color-subdued);
--block-label-background-fill: var(--background-fill-secondary);
--block-label-border-color: var(--border-color-primary);
--block-label-border-width: 1px;
--block-label-text-color: var(--neutral-200);
--block-shadow: none;
--block-title-background-fill: none;
--block-title-border-color: none;
--block-title-border-width: 0px;
--block-title-text-color: var(--neutral-200);
--panel-background-fill: var(--background-fill-secondary);
--panel-border-color: var(--border-color-primary);
--checkbox-background-color: var(--neutral-800);
--checkbox-background-color-focus: var(--checkbox-background-color);
--checkbox-background-color-hover: var(--checkbox-background-color);
--checkbox-background-color-selected: var(--secondary-600);
--checkbox-border-color: var(--neutral-700);
--checkbox-border-color-focus: var(--secondary-500);
--checkbox-border-color-hover: var(--neutral-600);
--checkbox-border-color-selected: var(--secondary-600);
--checkbox-label-background-fill: linear-gradient(
to top,
var(--neutral-900),
var(--neutral-800)
);
--checkbox-label-background-fill-hover: linear-gradient(
to top,
var(--neutral-900),
var(--neutral-800)
);
--checkbox-label-background-fill-selected: var(
--checkbox-label-background-fill
);
--checkbox-label-border-color: var(--border-color-primary);
--checkbox-label-border-color-hover: var(--border-color-primary);
--checkbox-label-text-color: var(--body-text-color);
--checkbox-label-text-color-selected: var(--checkbox-label-text-color);
--error-background-fill: var(--background-fill-primary);
--error-border-color: var(--border-color-primary);
--error-border-width: var(--error-border-width);
--error-text-color: #ef4444;
--input-background-fill: var(--neutral-800);
--input-background-fill-focus: var(--secondary-600);
--input-background-fill-hover: var(--input-background-fill);
--input-border-color: var(--border-color-primary);
--input-border-color-focus: var(--neutral-700);
--input-border-color-hover: var(--border-color-primary);
--input-placeholder-color: var(--neutral-500);
--input-shadow: var(--input-shadow);
--input-shadow-focus: 0 0 0 var(--shadow-spread) var(--neutral-700),
var(--shadow-inset);
--loader-color: var(--loader-color);
--stat-background-fill: linear-gradient(
to right,
var(--primary-400),
var(--primary-600)
);
--table-border-color: var(--neutral-700);
--table-even-background-fill: var(--neutral-950);
--table-odd-background-fill: var(--neutral-900);
--table-row-focus: var(--color-accent-soft);
--button-cancel-background-fill: linear-gradient(
to bottom right,
#dc2626,
#b91c1c
);
--button-cancel-background-fill-hover: linear-gradient(
to bottom right,
#dc2626,
#dc2626
);
--button-cancel-border-color: #dc2626;
--button-cancel-border-color-hover: var(--button-cancel-border-color);
--button-cancel-text-color: white;
--button-cancel-text-color-hover: var(--button-cancel-text-color);
--button-primary-background-fill: linear-gradient(
to bottom right,
var(--primary-600),
var(--primary-700)
);
--button-primary-background-fill-hover: linear-gradient(
to bottom right,
var(--primary-600),
var(--primary-600)
);
--button-primary-border-color: var(--primary-600);
--button-primary-border-color-hover: var(--button-primary-border-color);
--button-primary-text-color: white;
--button-primary-text-color-hover: var(--button-primary-text-color);
--button-secondary-background-fill: linear-gradient(
to bottom right,
var(--neutral-600),
var(--neutral-700)
);
--button-secondary-background-fill-hover: linear-gradient(
to bottom right,
var(--neutral-600),
var(--neutral-600)
);
--button-secondary-border-color: var(--neutral-600);
--button-secondary-border-color-hover: var(--button-secondary-border-color);
--button-secondary-text-color: white;
--button-secondary-text-color-hover: var(--button-secondary-text-color);
}
</style>

31
src/types/litegraph.js/litegraph.d.ts vendored
View File

@@ -409,6 +409,8 @@ declare module "litegraph.js" {
version: typeof LiteGraph.VERSION;
};
export type LConnectionKind = LiteGraph.INPUT | LiteGraph.OUTPUT;
export declare class LGraph {
static supported_types: string[];
static STATUS_STOPPED: 1;
@@ -436,7 +438,7 @@ declare module "litegraph.js" {
starttime: number;
status: typeof LGraph.STATUS_RUNNING | typeof LGraph.STATUS_STOPPED;
/* private */ _nodes: LGraphNode[];
private _nodes: LGraphNode[];
private _groups: LGraphGroup[];
private _nodes_by_id: Record<number, LGraphNode>;
/** nodes that are executable sorted in execution order */
@@ -514,11 +516,35 @@ declare module "litegraph.js" {
* @param node the instance of the node
*/
add(node: LGraphNode, skip_compute_order?: boolean): void;
/**
* Called before the graph is changed
*/
onBeforeChange(graph: LGraph, info: any): void;
/**
* Called after the graph is changed
*/
onAfterChange(graph: LGraph, info: any): void;
/**
* Called when a new node is added
* @param node the instance of the node
*/
onNodeAdded(node: LGraphNode): void;
/**
* Called when a node is removed
* @param node the instance of the node
*/
onNodeRemoved(node: LGraphNode): void;
/**
* Called when a node's connection is changed
* @param node the instance of the node
*/
onNodeConnectionChange(kind: LConnectionKind,
node: LGraphNode,
slot: INodeSlot,
target_node: LGraphNode,
target_slot: INodeSlot): void;
/** Called by `LGraph.configure` */
onConfigure?(o: SerializedLGraphNode): void;
/** Removes a node from the graph */
remove(node: LGraphNode): void;
/** Returns a node by its id. */
@@ -677,6 +703,7 @@ declare module "litegraph.js" {
id: number;
widgets: IWidget[] | null | undefined;
widgets_values?: IWidget["value"][];
//inputs available: array of inputs
inputs: INodeInputSlot[];
@@ -1270,6 +1297,8 @@ declare module "litegraph.js" {
node_over: LGraphNode | null;
node_title_color: string;
node_widget: [LGraphNode, IWidget] | null;
/** Called by `LGraphCanvas.clear` */
onClear?(): void;
/** Called by `LGraphCanvas.drawBackCanvas` */
onDrawBackground:
| ((ctx: CanvasRenderingContext2D, visibleArea: Vector4) => void)

5
vite.config.ts
View File

@@ -11,7 +11,10 @@ export default defineConfig({
sourcemap: true,
},
server: {
port: 3000
port: 3000,
fs: {
allow: ["./gradio"]
}
},
test: {
include: ['src/**/*.{test,spec}.{js,ts}']