Compare commits
19 Commits
prompt-set
...
mobile-imp
| Author | SHA1 | Date | |
|---|---|---|---|
|
f0c01a66ce | ||
|
|
4547cc1a27 | ||
|
|
3cd623fd20 | ||
|
|
263d62cb34 | ||
|
|
d8ac97cb87 | ||
|
|
6f3275da00 | ||
|
|
5474687041 | ||
|
|
c537cb71bf | ||
|
|
dbef7d0d70 | ||
|
|
5270c6750e | ||
|
|
ac53ba226b | ||
|
|
01514421f3 | ||
|
|
8890e45b66 | ||
|
|
97bc7ce6ba | ||
|
|
cba6e6e47c | ||
|
|
8b1c8ba9ee | ||
|
|
1a23039b60 | ||
|
|
51d77ddc53 | ||
|
|
a2075ede60 |
11
index.html
11
index.html
@@ -7,17 +7,6 @@
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="theme-color" content="#2196f3">
|
||||
</head>
|
||||
<script>
|
||||
if(!window.location.search.substring(1) == "desktop=true") {
|
||||
if (navigator.userAgent.match(/iPhone/i)
|
||||
|| navigator.userAgent.match(/iPad/i)
|
||||
|| navigator.userAgent.match(/Android/i)
|
||||
|| navigator.userAgent.match(/Blackberry/i)
|
||||
|| navigator.userAgent.match(/WebOs/i)) {
|
||||
window.location.href = "/mobile/"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<body>
|
||||
<div id="app-root"/>
|
||||
<script type="module" src='/src/main-desktop.ts'></script>
|
||||
|
||||
Submodule litegraph updated: 9b8d28d3e2...7c38fa4aed
@@ -30,7 +30,7 @@
|
||||
"prettier-plugin-svelte": "^2.10.0",
|
||||
"rollup-plugin-visualizer": "^5.9.0",
|
||||
"sass": "^1.61.0",
|
||||
"svelte": "^3.58.0",
|
||||
"svelte": "^3.59.0",
|
||||
"svelte-check": "^3.2.0",
|
||||
"svelte-dnd-action": "^0.9.22",
|
||||
"typescript": "^5.0.3",
|
||||
@@ -50,6 +50,7 @@
|
||||
"@codemirror/search": "^6.2.2",
|
||||
"@codemirror/state": "^6.1.2",
|
||||
"@codemirror/view": "^6.4.1",
|
||||
"@dogagenc/svelte-markdown": "^0.2.4",
|
||||
"@gradio/accordion": "workspace:*",
|
||||
"@gradio/atoms": "workspace:*",
|
||||
"@gradio/button": "workspace:*",
|
||||
@@ -85,6 +86,7 @@
|
||||
"framework7": "^8.0.3",
|
||||
"framework7-svelte": "^8.0.3",
|
||||
"img-comparison-slider": "^8.0.0",
|
||||
"marked": "^5.0.3",
|
||||
"pollen-css": "^4.6.2",
|
||||
"radix-icons-svelte": "^1.2.1",
|
||||
"style-mod": "^4.0.3",
|
||||
|
||||
104
pnpm-lock.yaml
generated
104
pnpm-lock.yaml
generated
@@ -25,6 +25,9 @@ importers:
|
||||
'@codemirror/view':
|
||||
specifier: ^6.4.1
|
||||
version: 6.11.0
|
||||
'@dogagenc/svelte-markdown':
|
||||
specifier: ^0.2.4
|
||||
version: 0.2.4(svelte@3.59.1)
|
||||
'@gradio/accordion':
|
||||
specifier: workspace:*
|
||||
version: link:gradio/js/accordion
|
||||
@@ -90,7 +93,7 @@ importers:
|
||||
version: link:litegraph/packages/tsconfig
|
||||
'@sveltejs/vite-plugin-svelte':
|
||||
specifier: ^2.1.1
|
||||
version: 2.1.1(svelte@3.58.0)(vite@4.3.8)
|
||||
version: 2.1.1(svelte@3.59.1)(vite@4.3.8)
|
||||
'@tsconfig/svelte':
|
||||
specifier: ^4.0.1
|
||||
version: 4.0.1
|
||||
@@ -130,6 +133,9 @@ importers:
|
||||
img-comparison-slider:
|
||||
specifier: ^8.0.0
|
||||
version: 8.0.0
|
||||
marked:
|
||||
specifier: ^5.0.3
|
||||
version: 5.0.3
|
||||
pollen-css:
|
||||
specifier: ^4.6.2
|
||||
version: 4.6.2
|
||||
@@ -150,13 +156,13 @@ importers:
|
||||
version: 1.5.2
|
||||
svelte-preprocess:
|
||||
specifier: ^5.0.3
|
||||
version: 5.0.3(sass@1.61.0)(svelte@3.58.0)(typescript@5.0.3)
|
||||
version: 5.0.3(sass@1.61.0)(svelte@3.59.1)(typescript@5.0.3)
|
||||
svelte-select:
|
||||
specifier: ^5.5.3
|
||||
version: 5.5.3
|
||||
svelte-splitpanes:
|
||||
specifier: ^0.7.13
|
||||
version: 0.7.13(svelte@3.58.0)
|
||||
version: 0.7.13(svelte@3.59.1)
|
||||
svelte-tiny-virtual-list:
|
||||
specifier: ^2.0.5
|
||||
version: 2.0.5
|
||||
@@ -184,7 +190,7 @@ importers:
|
||||
version: 1.2.8
|
||||
'@zerodevx/svelte-toast':
|
||||
specifier: ^0.9.3
|
||||
version: 0.9.3(svelte@3.58.0)
|
||||
version: 0.9.3(svelte@3.59.1)
|
||||
eslint:
|
||||
specifier: ^8.37.0
|
||||
version: 8.37.0
|
||||
@@ -193,7 +199,7 @@ importers:
|
||||
version: 8.8.0(eslint@8.37.0)
|
||||
eslint-plugin-svelte3:
|
||||
specifier: ^4.0.0
|
||||
version: 4.0.0(eslint@8.37.0)(svelte@3.58.0)
|
||||
version: 4.0.0(eslint@8.37.0)(svelte@3.59.1)
|
||||
happy-dom:
|
||||
specifier: ^9.18.3
|
||||
version: 9.18.3
|
||||
@@ -205,7 +211,7 @@ importers:
|
||||
version: 2.8.7
|
||||
prettier-plugin-svelte:
|
||||
specifier: ^2.10.0
|
||||
version: 2.10.0(prettier@2.8.7)(svelte@3.58.0)
|
||||
version: 2.10.0(prettier@2.8.7)(svelte@3.59.1)
|
||||
rollup-plugin-visualizer:
|
||||
specifier: ^5.9.0
|
||||
version: 5.9.0
|
||||
@@ -213,14 +219,14 @@ importers:
|
||||
specifier: ^1.61.0
|
||||
version: 1.61.0
|
||||
svelte:
|
||||
specifier: ^3.58.0
|
||||
version: 3.58.0
|
||||
specifier: ^3.59.0
|
||||
version: 3.59.1
|
||||
svelte-check:
|
||||
specifier: ^3.2.0
|
||||
version: 3.2.0(sass@1.61.0)(svelte@3.58.0)
|
||||
version: 3.2.0(sass@1.61.0)(svelte@3.59.1)
|
||||
svelte-dnd-action:
|
||||
specifier: ^0.9.22
|
||||
version: 0.9.22(svelte@3.58.0)
|
||||
version: 0.9.22(svelte@3.59.1)
|
||||
typescript:
|
||||
specifier: ^5.0.3
|
||||
version: 5.0.3
|
||||
@@ -1501,6 +1507,16 @@ packages:
|
||||
w3c-keyname: 2.2.6
|
||||
dev: false
|
||||
|
||||
/@dogagenc/svelte-markdown@0.2.4(svelte@3.59.1):
|
||||
resolution: {integrity: sha512-UmmHHZ7rilAbBYiNsxuL5d8Ac79EhFXrhjsUNr30BPzn+T7ohJR8kHMFjDYDQc0tOQOfKbICvkPAQ6cprqS3Eg==}
|
||||
peerDependencies:
|
||||
svelte: ^3.0.0
|
||||
dependencies:
|
||||
'@types/marked': 4.3.1
|
||||
marked: 4.3.0
|
||||
svelte: 3.59.1
|
||||
dev: false
|
||||
|
||||
/@esbuild/android-arm64@0.17.18:
|
||||
resolution: {integrity: sha512-/iq0aK0eeHgSC3z55ucMAHO05OIqmQehiGay8eP5l/5l+iEr4EIbh4/MI8xD9qRFjqzgkc0JkX0LculNC9mXBw==}
|
||||
engines: {node: '>=12'}
|
||||
@@ -2260,7 +2276,7 @@ packages:
|
||||
- supports-color
|
||||
dev: true
|
||||
|
||||
/@sveltejs/vite-plugin-svelte@2.1.1(svelte@3.58.0)(vite@4.3.8):
|
||||
/@sveltejs/vite-plugin-svelte@2.1.1(svelte@3.59.1)(vite@4.3.8):
|
||||
resolution: {integrity: sha512-7YeBDt4us0FiIMNsVXxyaP4Hwyn2/v9x3oqStkHU3ZdIc5O22pGwUwH33wUqYo+7Itdmo8zxJ45Qvfm3H7UUjQ==}
|
||||
engines: {node: ^14.18.0 || >= 16}
|
||||
peerDependencies:
|
||||
@@ -2271,8 +2287,8 @@ packages:
|
||||
deepmerge: 4.3.1
|
||||
kleur: 4.1.5
|
||||
magic-string: 0.30.0
|
||||
svelte: 3.58.0
|
||||
svelte-hmr: 0.15.1(svelte@3.58.0)
|
||||
svelte: 3.59.1
|
||||
svelte-hmr: 0.15.1(svelte@3.59.1)
|
||||
vite: 4.3.8(sass@1.61.0)
|
||||
vitefu: 0.2.4(vite@4.3.8)
|
||||
transitivePeerDependencies:
|
||||
@@ -2423,6 +2439,10 @@ packages:
|
||||
resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
|
||||
dev: true
|
||||
|
||||
/@types/marked@4.3.1:
|
||||
resolution: {integrity: sha512-vSSbKZFbNktrQ15v7o1EaH78EbWV+sPQbPjHG+Cp8CaNcPFUEfjZ0Iml/V0bFDwsTlYe8o6XC5Hfdp91cqPV2g==}
|
||||
dev: false
|
||||
|
||||
/@types/node@10.17.60:
|
||||
resolution: {integrity: sha512-F0KIgDJfy2nA3zMLmWGKxcH2ZVEtCZXHHdOQs2gSaQ27+lNeEfGxzkIw90aXswATX7AZ33tahPbzy6KAfUreVw==}
|
||||
dev: false
|
||||
@@ -2585,12 +2605,12 @@ packages:
|
||||
pretty-format: 27.5.1
|
||||
dev: false
|
||||
|
||||
/@zerodevx/svelte-toast@0.9.3(svelte@3.58.0):
|
||||
/@zerodevx/svelte-toast@0.9.3(svelte@3.59.1):
|
||||
resolution: {integrity: sha512-VPKWR4A9y01fyXRscu9HiTj7tV2hFrpRKZvGwMmaPXfHIXR1D9+NNsz0HXcQ7qZ0C5UaHS3n9uNtPtIcAXT7RQ==}
|
||||
peerDependencies:
|
||||
svelte: ^3.57.0
|
||||
dependencies:
|
||||
svelte: 3.58.0
|
||||
svelte: 3.59.1
|
||||
dev: true
|
||||
|
||||
/abab@2.0.6:
|
||||
@@ -3924,14 +3944,14 @@ packages:
|
||||
- typescript
|
||||
dev: true
|
||||
|
||||
/eslint-plugin-svelte3@4.0.0(eslint@8.37.0)(svelte@3.58.0):
|
||||
/eslint-plugin-svelte3@4.0.0(eslint@8.37.0)(svelte@3.59.1):
|
||||
resolution: {integrity: sha512-OIx9lgaNzD02+MDFNLw0GEUbuovNcglg+wnd/UY0fbZmlQSz7GlQiQ1f+yX0XvC07XPcDOnFcichqI3xCwp71g==}
|
||||
peerDependencies:
|
||||
eslint: '>=8.0.0'
|
||||
svelte: ^3.2.0
|
||||
dependencies:
|
||||
eslint: 8.37.0
|
||||
svelte: 3.58.0
|
||||
svelte: 3.59.1
|
||||
dev: true
|
||||
|
||||
/eslint-scope@5.1.1:
|
||||
@@ -5481,6 +5501,18 @@ packages:
|
||||
engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
|
||||
dev: false
|
||||
|
||||
/marked@4.3.0:
|
||||
resolution: {integrity: sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==}
|
||||
engines: {node: '>= 12'}
|
||||
hasBin: true
|
||||
dev: false
|
||||
|
||||
/marked@5.0.3:
|
||||
resolution: {integrity: sha512-KUONa43Uk74uUNWMxh6lfaNYmSAsRMiDAaX8QBCCRVXzEufR0zX6T33vrGbvTnQLL02ungDM3KSzZtO+chJaHg==}
|
||||
engines: {node: '>= 18'}
|
||||
hasBin: true
|
||||
dev: false
|
||||
|
||||
/md5-hex@3.0.1:
|
||||
resolution: {integrity: sha512-BUiRtTtV39LIJwinWBjqVsU9xhdnz7/i889V859IBFpuqGAj6LuOvHv5XLbgZ2R7ptJoJaEcxkv88/h25T7Ciw==}
|
||||
engines: {node: '>=8'}
|
||||
@@ -5959,14 +5991,14 @@ packages:
|
||||
engines: {node: '>= 0.8.0'}
|
||||
dev: true
|
||||
|
||||
/prettier-plugin-svelte@2.10.0(prettier@2.8.7)(svelte@3.58.0):
|
||||
/prettier-plugin-svelte@2.10.0(prettier@2.8.7)(svelte@3.59.1):
|
||||
resolution: {integrity: sha512-GXMY6t86thctyCvQq+jqElO+MKdB09BkL3hexyGP3Oi8XLKRFaJP1ud/xlWCZ9ZIa2BxHka32zhHfcuU+XsRQg==}
|
||||
peerDependencies:
|
||||
prettier: ^1.16.4 || ^2.0.0
|
||||
svelte: ^3.2.0
|
||||
dependencies:
|
||||
prettier: 2.8.7
|
||||
svelte: 3.58.0
|
||||
svelte: 3.59.1
|
||||
dev: true
|
||||
|
||||
/prettier@2.8.7:
|
||||
@@ -6627,7 +6659,7 @@ packages:
|
||||
- sugarss
|
||||
dev: true
|
||||
|
||||
/svelte-check@3.2.0(sass@1.61.0)(svelte@3.58.0):
|
||||
/svelte-check@3.2.0(sass@1.61.0)(svelte@3.59.1):
|
||||
resolution: {integrity: sha512-6ZnscN8dHEN5Eq5LgIzjj07W9nc9myyBH+diXsUAuiY/3rt0l65/LCIQYlIuoFEjp2F1NhXqZiJwV9omPj9tMw==}
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
@@ -6639,8 +6671,8 @@ packages:
|
||||
import-fresh: 3.3.0
|
||||
picocolors: 1.0.0
|
||||
sade: 1.8.1
|
||||
svelte: 3.58.0
|
||||
svelte-preprocess: 5.0.3(sass@1.61.0)(svelte@3.58.0)(typescript@5.0.3)
|
||||
svelte: 3.59.1
|
||||
svelte-preprocess: 5.0.3(sass@1.61.0)(svelte@3.59.1)(typescript@5.0.3)
|
||||
typescript: 5.0.3
|
||||
transitivePeerDependencies:
|
||||
- '@babel/core'
|
||||
@@ -6654,18 +6686,18 @@ packages:
|
||||
- sugarss
|
||||
dev: true
|
||||
|
||||
/svelte-dnd-action@0.9.22(svelte@3.58.0):
|
||||
/svelte-dnd-action@0.9.22(svelte@3.59.1):
|
||||
resolution: {integrity: sha512-lOQJsNLM1QWv5mdxIkCVtk6k4lHCtLgfE59y8rs7iOM6erchbLC9hMEFYSveZz7biJV0mpg7yDSs4bj/RT/YkA==}
|
||||
peerDependencies:
|
||||
svelte: '>=3.23.0'
|
||||
dependencies:
|
||||
svelte: 3.58.0
|
||||
svelte: 3.59.1
|
||||
dev: true
|
||||
|
||||
/svelte-feather-icons@4.0.0:
|
||||
resolution: {integrity: sha512-4ieUsjp+VYa1r6y80jDt9zRiRUZyJNbESpRdHdJJhiBubyuXX96A7f1UZSK4olxzP6Qsg5ZAuyZlnmvD+/swAA==}
|
||||
dependencies:
|
||||
svelte: 3.58.0
|
||||
svelte: 3.59.1
|
||||
dev: false
|
||||
|
||||
/svelte-floating-ui@1.2.8:
|
||||
@@ -6689,6 +6721,16 @@ packages:
|
||||
svelte: '>=3.19.0'
|
||||
dependencies:
|
||||
svelte: 3.58.0
|
||||
dev: true
|
||||
|
||||
/svelte-hmr@0.15.1(svelte@3.59.1):
|
||||
resolution: {integrity: sha512-BiKB4RZ8YSwRKCNVdNxK/GfY+r4Kjgp9jCLEy0DuqAKfmQtpL38cQK3afdpjw4sqSs4PLi3jIPJIFp259NkZtA==}
|
||||
engines: {node: ^12.20 || ^14.13.1 || >= 16}
|
||||
peerDependencies:
|
||||
svelte: '>=3.19.0'
|
||||
dependencies:
|
||||
svelte: 3.59.1
|
||||
dev: false
|
||||
|
||||
/svelte-preprocess@4.10.1(postcss-load-config@3.1.4)(postcss@8.4.21)(svelte@3.58.0)(typescript@4.5.4):
|
||||
resolution: {integrity: sha512-NSNloaylf+o9UeyUR2KvpdxrAyMdHl3U7rMnoP06/sG0iwJvlUM4TpMno13RaNqovh4AAoGsx1jeYcIyuGUXMw==}
|
||||
@@ -6796,7 +6838,7 @@ packages:
|
||||
typescript: 5.0.3
|
||||
dev: true
|
||||
|
||||
/svelte-preprocess@5.0.3(sass@1.61.0)(svelte@3.58.0)(typescript@5.0.3):
|
||||
/svelte-preprocess@5.0.3(sass@1.61.0)(svelte@3.59.1)(typescript@5.0.3):
|
||||
resolution: {integrity: sha512-GrHF1rusdJVbOZOwgPWtpqmaexkydznKzy5qIC2FabgpFyKN57bjMUUUqPRfbBXK5igiEWn1uO/DXsa2vJ5VHA==}
|
||||
engines: {node: '>= 14.10.0'}
|
||||
requiresBuild: true
|
||||
@@ -6840,7 +6882,7 @@ packages:
|
||||
sass: 1.61.0
|
||||
sorcery: 0.11.0
|
||||
strip-indent: 3.0.0
|
||||
svelte: 3.58.0
|
||||
svelte: 3.59.1
|
||||
typescript: 5.0.3
|
||||
|
||||
/svelte-range-slider-pips@2.0.1:
|
||||
@@ -6854,13 +6896,13 @@ packages:
|
||||
svelte-floating-ui: 1.2.8
|
||||
dev: false
|
||||
|
||||
/svelte-splitpanes@0.7.13(svelte@3.58.0):
|
||||
/svelte-splitpanes@0.7.13(svelte@3.59.1):
|
||||
resolution: {integrity: sha512-LiAf4OEZqRJanoax9mextXtQ0JzrdCqX2tOgVO+yJu2XNyGz5j5fGbw8+5AXgOasPi/m1nv8n2Lt+XYFRfvIGg==}
|
||||
peerDependencies:
|
||||
svelte: ^3.54.0
|
||||
dependencies:
|
||||
esm-env-robust: 0.0.3
|
||||
svelte: 3.58.0
|
||||
svelte: 3.59.1
|
||||
dev: false
|
||||
|
||||
/svelte-tiny-virtual-list@2.0.5:
|
||||
@@ -6883,6 +6925,10 @@ packages:
|
||||
resolution: {integrity: sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==}
|
||||
engines: {node: '>= 8'}
|
||||
|
||||
/svelte@3.59.1:
|
||||
resolution: {integrity: sha512-pKj8fEBmqf6mq3/NfrB9SLtcJcUvjYSWyePlfCqN9gujLB25RitWK8PvFzlwim6hD/We35KbPlRteuA6rnPGcQ==}
|
||||
engines: {node: '>= 8'}
|
||||
|
||||
/swiper@9.2.4:
|
||||
resolution: {integrity: sha512-L7y3K/iiMXNYQ94FbfcJn7jex4QPnS4+voXGupTdC+UHW4XrR40QDdm4c9hXJ+Br0Il7PP0vP1W3goM9/Ly6Sg==}
|
||||
engines: {node: '>= 4.7.0'}
|
||||
|
||||
@@ -4,12 +4,12 @@
|
||||
import "@litegraph-ts/core/css/litegraph.css";
|
||||
import "./scss/global.scss";
|
||||
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let app: ComfyAppState;
|
||||
export let isMobile: boolean
|
||||
</script>
|
||||
|
||||
<ComfyApp {app}/>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
{#if isMobile}
|
||||
<div>Redirecting...</div>
|
||||
{:else}
|
||||
<ComfyApp {app}/>
|
||||
{/if}
|
||||
|
||||
@@ -2,22 +2,22 @@
|
||||
import { onMount } from "svelte";
|
||||
import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
|
||||
|
||||
import { App, View } from "framework7-svelte"
|
||||
import { App, View, Preloader } from "framework7-svelte"
|
||||
|
||||
import { f7, f7ready } from 'framework7-svelte';
|
||||
|
||||
import "framework7/css/bundle"
|
||||
import "./scss/global.scss";
|
||||
|
||||
import MainToolbar from './mobile/MainToolbar.svelte'
|
||||
import GenToolbar from './mobile/GenToolbar.svelte'
|
||||
|
||||
import HomePage from './mobile/routes/home.svelte';
|
||||
import AboutPage from './mobile/routes/about.svelte';
|
||||
import LoginPage from './mobile/routes/login.svelte';
|
||||
import GraphPage from './mobile/routes/graph.svelte';
|
||||
import ListSubWorkflowsPage from './mobile/routes/list-subworkflows.svelte';
|
||||
import SubWorkflowPage from './mobile/routes/subworkflow.svelte';
|
||||
import WorkflowsPage from './mobile/routes/workflows.svelte';
|
||||
import QueuePage from './mobile/routes/queue.svelte';
|
||||
import GalleryPage from './mobile/routes/gallery.svelte';
|
||||
import WorkflowPage from './mobile/routes/workflow.svelte';
|
||||
import type { Framework7Parameters, Modal } from "framework7/types";
|
||||
import interfaceState from "$lib/stores/interfaceState";
|
||||
|
||||
export let app: ComfyApp;
|
||||
|
||||
@@ -51,11 +51,40 @@
|
||||
}
|
||||
}
|
||||
|
||||
let appSetupPromise: Promise<void> = null;
|
||||
let loading = true;
|
||||
let lastSize = Number.POSITIVE_INFINITY;
|
||||
|
||||
$: f7 && f7.setDarkMode($interfaceState.isDarkMode)
|
||||
|
||||
onMount(async () => {
|
||||
await app.setup();
|
||||
// let isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
$interfaceState.isDarkMode = true;
|
||||
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
|
||||
$interfaceState.isDarkMode = event.matches;
|
||||
});
|
||||
|
||||
appSetupPromise = app.setup().then(() => {
|
||||
// Autosave every minute
|
||||
setInterval(() => app.saveStateToLocalStorage(false), 60 * 1000)
|
||||
loading = false
|
||||
});
|
||||
|
||||
window.addEventListener("backbutton", onBackKeyDown, false);
|
||||
window.addEventListener("popstate", onBackKeyDown, false);
|
||||
});
|
||||
|
||||
// Blur any input elements when the virtual keyboard closes
|
||||
// Otherwise tapping on other input events can refocus the input from way
|
||||
// off the screen
|
||||
window.visualViewport.addEventListener("resize", function(e) {
|
||||
if (e.target.height > lastSize) {
|
||||
// Assume keyboard was hidden
|
||||
(document.activeElement as HTMLElement)?.blur();
|
||||
}
|
||||
lastSize = e.target.height
|
||||
})
|
||||
})
|
||||
|
||||
/*
|
||||
Now we need to map components to routes.
|
||||
@@ -66,36 +95,42 @@
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
component: HomePage,
|
||||
component: WorkflowsPage,
|
||||
options: {
|
||||
props: { app }
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/about/',
|
||||
component: AboutPage,
|
||||
},
|
||||
{
|
||||
path: '/login/',
|
||||
component: LoginPage,
|
||||
},
|
||||
{
|
||||
path: '/graph/',
|
||||
component: GraphPage,
|
||||
path: '/workflows',
|
||||
component: WorkflowsPage,
|
||||
options: {
|
||||
props: { app }
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/subworkflows/',
|
||||
component: ListSubWorkflowsPage,
|
||||
path: '/queue/',
|
||||
component: QueuePage,
|
||||
options: {
|
||||
props: { app }
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/subworkflows/:subworkflowID/',
|
||||
component: SubWorkflowPage,
|
||||
path: '/gallery/',
|
||||
component: GalleryPage,
|
||||
options: {
|
||||
props: { app }
|
||||
}
|
||||
},
|
||||
// {
|
||||
// path: '/graph/',
|
||||
// component: GraphPage,
|
||||
// options: {
|
||||
// props: { app }
|
||||
// }
|
||||
// },
|
||||
{
|
||||
path: '/workflows/:workflowIndex/',
|
||||
component: WorkflowPage,
|
||||
options: {
|
||||
props: { app }
|
||||
}
|
||||
@@ -113,23 +148,90 @@
|
||||
actions: {
|
||||
closeOnEscape: true,
|
||||
},
|
||||
touch: {
|
||||
tapHold: true
|
||||
}
|
||||
}
|
||||
|
||||
let body;
|
||||
const bindBody = (node) => (body = node);
|
||||
function setDarkClass(isDark: boolean) {
|
||||
if (!body)
|
||||
return;
|
||||
if (isDark) {
|
||||
body.classList.add("dark");
|
||||
} else {
|
||||
body.classList.remove("dark");
|
||||
}
|
||||
};
|
||||
$: setDarkClass($interfaceState.isDarkMode);
|
||||
</script>
|
||||
|
||||
{#if app}
|
||||
<App theme="auto" name="ComfyBox" {...f7params}>
|
||||
<View
|
||||
url="/"
|
||||
main={true}
|
||||
class="safe-areas"
|
||||
masterDetailBreakpoint={768},
|
||||
browserHistory=true,
|
||||
browserHistoryRoot="/mobile/"
|
||||
>
|
||||
<GenToolbar {app} />
|
||||
</View>
|
||||
</App>
|
||||
<div class="canvas-wrapper pane-wrapper" style="display: none">
|
||||
<canvas id="graph-canvas" />
|
||||
</div>
|
||||
{/if}
|
||||
<svelte:body use:bindBody />
|
||||
|
||||
<App theme="auto" name="ComfyBox" {...f7params}>
|
||||
{#if appSetupPromise}
|
||||
{#await appSetupPromise}
|
||||
<div class="comfy-app-loading">
|
||||
<div>
|
||||
<Preloader color="blue" size={100} />
|
||||
</div>
|
||||
</div>
|
||||
{:then}
|
||||
<View
|
||||
url="/workflows/"
|
||||
main={true}
|
||||
class="safe-areas"
|
||||
masterDetailBreakpoint={768},
|
||||
browserHistory=true,
|
||||
browserHistoryRoot="/mobile/"
|
||||
>
|
||||
<MainToolbar {app} />
|
||||
{#if $interfaceState.selectedWorkflowIndex && $interfaceState.showingWorkflow}
|
||||
<GenToolbar {app} />
|
||||
{/if}
|
||||
</View>
|
||||
{:catch error}
|
||||
<div class="comfy-loading-error">
|
||||
<div>
|
||||
Error loading app
|
||||
</div>
|
||||
<div>{error}</div>
|
||||
{#if error != null && error.stack}
|
||||
{@const lines = error.stack.split("\n")}
|
||||
{#each lines as line}
|
||||
<div style:font-size="16px">{line}</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
{/await}
|
||||
{/if}
|
||||
</App>
|
||||
<div class="canvas-wrapper pane-wrapper" style="display: none">
|
||||
<canvas id="graph-canvas" />
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.comfy-app-loading, .comfy-loading-error {
|
||||
font-size: 40px;
|
||||
color: var(--body-text-color);
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
z-index: 100000000;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.comfy-app-loading > span {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -333,7 +333,8 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
|
||||
/**
|
||||
* Handle keypress
|
||||
*
|
||||
* Ctrl + M mute/unmute selected nodes
|
||||
* Ctrl + M mute/unmute selected nodes
|
||||
* Ctrl + Space open node searchbox
|
||||
*/
|
||||
override processKey(e: KeyboardEvent): boolean | undefined {
|
||||
const res = super.processKey(e);
|
||||
@@ -353,7 +354,7 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
|
||||
}
|
||||
|
||||
if (e.type == "keydown") {
|
||||
// Ctrl + M mute/unmute
|
||||
// Ctrl + M - mute/unmute
|
||||
if (e.keyCode == 77 && e.ctrlKey) {
|
||||
if (this.selected_nodes) {
|
||||
for (var i in this.selected_nodes) {
|
||||
@@ -366,6 +367,21 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
|
||||
}
|
||||
block_default = true;
|
||||
}
|
||||
// Ctrl + Space - open node searchbox
|
||||
else if (e.keyCode == 32 && e.ctrlKey) {
|
||||
const event = new MouseEvent("click");
|
||||
const searchBox = this.showSearchBox(event);
|
||||
const rect = this.canvas.getBoundingClientRect();
|
||||
const sbRect = searchBox.getBoundingClientRect();
|
||||
const clientX = rect.left + rect.width / 2 - sbRect.width / 2;
|
||||
const clientY = rect.top + rect.height / 2 - sbRect.height / 2
|
||||
searchBox.style.left = `${clientX}px`;
|
||||
searchBox.style.top = `${clientY}px`;
|
||||
// TODO better API
|
||||
event.initMouseEvent("click", true, true, window, 1, clientX, clientY, clientX, clientY, false, false, false, false, 0, null);
|
||||
this.adjustMouseEvent(event);
|
||||
block_default = true;
|
||||
}
|
||||
}
|
||||
|
||||
this.graph.change();
|
||||
|
||||
@@ -125,8 +125,17 @@ export default class ComfyAPI {
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
private getHostname(): string {
|
||||
let hostname = this.hostname || location.hostname;
|
||||
if (hostname === "localhost") {
|
||||
// For dev use, assume same hostname as connected server
|
||||
hostname = location.hostname;
|
||||
}
|
||||
return hostname;
|
||||
}
|
||||
|
||||
private getBackendUrl(): string {
|
||||
const hostname = this.hostname || location.hostname;
|
||||
const hostname = this.getHostname()
|
||||
const port = this.port || location.port;
|
||||
return `${window.location.protocol}//${hostname}:${port}`
|
||||
}
|
||||
@@ -146,7 +155,7 @@ export default class ComfyAPI {
|
||||
existingSession = "?clientId=" + existingSession;
|
||||
}
|
||||
|
||||
const hostname = this.hostname || location.hostname;
|
||||
const hostname = this.getHostname()
|
||||
const port = this.port || location.port;
|
||||
|
||||
this.socket = new WebSocket(
|
||||
|
||||
@@ -211,7 +211,13 @@ export default class ComfyApp {
|
||||
this.lCanvas.allow_interaction = uiUnlocked;
|
||||
|
||||
// await this.#invokeExtensionsAsync("init");
|
||||
const defs = await this.api.getNodeDefs();
|
||||
let defs;
|
||||
try {
|
||||
defs = await this.api.getNodeDefs();
|
||||
}
|
||||
catch (error) {
|
||||
throw new Error(`Could not reach ComfyUI at ${this.api.getBackendUrl()}`);
|
||||
}
|
||||
await this.registerNodes(defs);
|
||||
|
||||
// Load previous workflow
|
||||
@@ -362,7 +368,7 @@ export default class ComfyApp {
|
||||
}
|
||||
}
|
||||
|
||||
saveStateToLocalStorage() {
|
||||
saveStateToLocalStorage(doNotify: boolean = true) {
|
||||
try {
|
||||
uiState.update(s => { s.forceSaveUserState = true; return s; })
|
||||
const state = get(workflowState)
|
||||
@@ -374,10 +380,12 @@ export default class ComfyApp {
|
||||
for (const workflow of workflows)
|
||||
workflow.isModified = false;
|
||||
workflowState.set(get(workflowState));
|
||||
notify("Saved to local storage.")
|
||||
if (doNotify)
|
||||
notify("Saved to local storage.")
|
||||
}
|
||||
catch (err) {
|
||||
notify(`Failed saving to local storage:\n${err}`, { type: "error" })
|
||||
if (doNotify)
|
||||
notify(`Failed saving to local storage:\n${err}`, { type: "error" })
|
||||
}
|
||||
finally {
|
||||
uiState.update(s => { s.forceSaveUserState = null; return s; })
|
||||
@@ -395,6 +403,9 @@ export default class ComfyApp {
|
||||
return false;
|
||||
|
||||
const workflows = state.workflows as SerializedAppState[];
|
||||
if (workflows.length === 0)
|
||||
return false;
|
||||
|
||||
await Promise.all(workflows.map(w => {
|
||||
return this.openWorkflow(w, { refreshCombos: defs, warnMissingNodeTypes: false, setActive: false }).catch(error => {
|
||||
console.error("Failed restoring previous workflow", error)
|
||||
@@ -990,7 +1001,7 @@ export default class ComfyApp {
|
||||
tag = null;
|
||||
|
||||
if (targetWorkflow.attrs.showDefaultNotifications) {
|
||||
notify("Prompt queued.", { type: "info" });
|
||||
notify("Prompt queued.", { type: "info", showOn: "web" });
|
||||
}
|
||||
|
||||
this.processingQueue = true;
|
||||
|
||||
@@ -30,6 +30,7 @@
|
||||
import ComfyQueueListDisplay from "./ComfyQueueListDisplay.svelte";
|
||||
import ComfyQueueGridDisplay from "./ComfyQueueGridDisplay.svelte";
|
||||
import { WORKFLOWS_VIEW } from "./ComfyBoxWorkflowsView.svelte";
|
||||
import uiQueueState from "$lib/stores/uiQueueState";
|
||||
|
||||
export let app: ComfyApp;
|
||||
|
||||
@@ -52,46 +53,34 @@
|
||||
let displayMode: DisplayModeType = "list";
|
||||
let imageSize: number = 40;
|
||||
let gridColumns: number = 3;
|
||||
let changed = true;
|
||||
|
||||
function switchMode(newMode: QueueItemType) {
|
||||
changed = mode !== newMode
|
||||
const changed = mode !== newMode
|
||||
mode = newMode
|
||||
if (changed) {
|
||||
_queuedEntries = []
|
||||
_runningEntries = []
|
||||
_entries = []
|
||||
uiQueueState.updateEntries();
|
||||
}
|
||||
}
|
||||
|
||||
function switchDisplayMode(newDisplayMode: DisplayModeType) {
|
||||
// changed = displayMode !== newDisplayMode
|
||||
displayMode = newDisplayMode
|
||||
// if (changed) {
|
||||
// _queuedEntries = []
|
||||
// _runningEntries = []
|
||||
// _entries = []
|
||||
// }
|
||||
}
|
||||
|
||||
let _queuedEntries: QueueUIEntry[] = []
|
||||
let _runningEntries: QueueUIEntry[] = []
|
||||
let _entries: QueueUIEntry[] = []
|
||||
|
||||
$: if (mode === "queue" && (changed || $queuePending.length != _queuedEntries.length || $queueRunning.length != _runningEntries.length)) {
|
||||
let _entries: ReadonlyArray<QueueUIEntry> = []
|
||||
$: if(mode === "queue") {
|
||||
_entries = $uiQueueState.queueUIEntries
|
||||
updateFromQueue();
|
||||
changed = false;
|
||||
}
|
||||
else if (mode === "history" && (changed || $queueCompleted.length != _entries.length)) {
|
||||
else {
|
||||
_entries = $uiQueueState.historyUIEntries;
|
||||
updateFromHistory();
|
||||
changed = false;
|
||||
}
|
||||
|
||||
$: if (mode === "queue" && !$queuePending && !$queueRunning) {
|
||||
_queuedEntries = []
|
||||
_runningEntries = []
|
||||
_entries = [];
|
||||
changed = true
|
||||
uiQueueState.clearQueue();
|
||||
}
|
||||
else if (mode === "history" && !$queueCompleted) {
|
||||
uiQueueState.clearHistory();
|
||||
}
|
||||
|
||||
async function deleteEntry(entry: QueueUIEntry, event: MouseEvent) {
|
||||
@@ -106,125 +95,26 @@
|
||||
await app.deleteQueueItem(mode, entry.entry.promptID);
|
||||
}
|
||||
|
||||
if (mode === "queue") {
|
||||
_queuedEntries = []
|
||||
_runningEntries = []
|
||||
}
|
||||
|
||||
_entries = [];
|
||||
changed = true;
|
||||
uiQueueState.updateEntries(true)
|
||||
}
|
||||
|
||||
async function clearQueue() {
|
||||
await app.clearQueue(mode);
|
||||
|
||||
if (mode === "queue") {
|
||||
_queuedEntries = []
|
||||
_runningEntries = []
|
||||
}
|
||||
|
||||
_entries = [];
|
||||
changed = true;
|
||||
}
|
||||
|
||||
function formatDate(date: Date): string {
|
||||
const time = date.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true });
|
||||
const day = date.toLocaleString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' }).replace(',', '');
|
||||
return [time, day].join(", ")
|
||||
}
|
||||
|
||||
function convertEntry(entry: QueueEntry, status: QueueUIEntryStatus): QueueUIEntry {
|
||||
let date = entry.finishedAt || entry.queuedAt;
|
||||
let dateStr = null;
|
||||
if (date) {
|
||||
dateStr = formatDate(date);
|
||||
}
|
||||
|
||||
const subgraphs: string[] | null = entry.extraData?.extra_pnginfo?.comfyBoxPrompt?.subgraphs;
|
||||
|
||||
let message = "Prompt";
|
||||
if (entry.extraData?.workflowTitle != null) {
|
||||
message = `${entry.extraData.workflowTitle}`
|
||||
}
|
||||
|
||||
if (subgraphs && subgraphs.length > 0) {
|
||||
const subgraphsString = subgraphs.join(', ')
|
||||
message += ` (${subgraphsString})`
|
||||
}
|
||||
|
||||
let submessage = `Nodes: ${Object.keys(entry.prompt).length}`
|
||||
|
||||
if (Object.keys(entry.outputs).length > 0) {
|
||||
const imageCount = Object.values(entry.outputs).filter(o => o.images).flatMap(o => o.images).length
|
||||
submessage = `Images: ${imageCount}`
|
||||
}
|
||||
|
||||
return {
|
||||
entry,
|
||||
message,
|
||||
submessage,
|
||||
date: dateStr,
|
||||
status,
|
||||
images: []
|
||||
}
|
||||
}
|
||||
|
||||
function convertPendingEntry(entry: QueueEntry, status: QueueUIEntryStatus): QueueUIEntry {
|
||||
const result = convertEntry(entry, status);
|
||||
|
||||
const thumbnails = entry.extraData?.thumbnails
|
||||
if (thumbnails) {
|
||||
result.images = thumbnails.map(convertComfyOutputToComfyURL);
|
||||
}
|
||||
|
||||
const outputs = Object.values(entry.outputs)
|
||||
.filter(o => o.images)
|
||||
.flatMap(o => o.images)
|
||||
.map(convertComfyOutputToComfyURL);
|
||||
if (outputs) {
|
||||
result.images = result.images.concat(outputs)
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
function convertCompletedEntry(entry: CompletedQueueEntry): QueueUIEntry {
|
||||
const result = convertEntry(entry.entry, entry.status);
|
||||
|
||||
const images = Object.values(entry.entry.outputs)
|
||||
.filter(o => o.images)
|
||||
.flatMap(o => o.images)
|
||||
.map(convertComfyOutputToComfyURL);
|
||||
result.images = images
|
||||
|
||||
if (entry.message)
|
||||
result.submessage = entry.message
|
||||
else if (entry.status === "interrupted" || entry.status === "all_cached")
|
||||
result.submessage = "Prompt was interrupted."
|
||||
if (entry.error)
|
||||
result.error = entry.error
|
||||
|
||||
return result;
|
||||
uiQueueState.updateEntries(true)
|
||||
}
|
||||
|
||||
async function updateFromQueue() {
|
||||
// newest entries appear at the top
|
||||
_queuedEntries = $queuePending.map((e) => convertPendingEntry(e, "pending")).reverse();
|
||||
_runningEntries = $queueRunning.map((e) => convertPendingEntry(e, "running")).reverse();
|
||||
_entries = [..._queuedEntries, ..._runningEntries]
|
||||
if (queueList) {
|
||||
await tick(); // Wait for list size to be recalculated
|
||||
queueList.scroll({ top: queueList.scrollHeight })
|
||||
}
|
||||
console.warn("[ComfyQueue] BUILDQUEUE", _entries.length, $queuePending.length, $queueRunning.length)
|
||||
}
|
||||
|
||||
async function updateFromHistory() {
|
||||
_entries = $queueCompleted.map(convertCompletedEntry).reverse();
|
||||
if (queueList) {
|
||||
await tick(); // Wait for list size to be recalculated
|
||||
queueList.scrollTo(0, 0);
|
||||
}
|
||||
console.warn("[ComfyQueue] BUILDHISTORY", _entries.length, $queueCompleted.length)
|
||||
}
|
||||
|
||||
async function interrupt() {
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
export let elem_classes: string[] = []
|
||||
export let style: string = ""
|
||||
export let label: string = ""
|
||||
export let mask: ComfyImageLocation | null;
|
||||
// let propsChanged: Writable<number> | null = null;
|
||||
let dragging = false;
|
||||
let pending_upload = false;
|
||||
@@ -172,6 +173,15 @@
|
||||
bind:naturalWidth={imgWidth}
|
||||
bind:naturalHeight={imgHeight}
|
||||
/>
|
||||
{#key mask}
|
||||
{#if mask}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<img src={convertComfyOutputToComfyURL(mask)}
|
||||
alt={firstImage.filename}
|
||||
on:click={onImgClicked}
|
||||
/>
|
||||
{/if}
|
||||
{/key}
|
||||
{:else}
|
||||
<Upload
|
||||
file_count={fileCount}
|
||||
@@ -201,6 +211,9 @@
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
58
src/lib/components/f7/progressbar.svelte
Normal file
58
src/lib/components/f7/progressbar.svelte
Normal file
@@ -0,0 +1,58 @@
|
||||
<!--
|
||||
Fix a framework7 issue
|
||||
https://github.com/framework7io/framework7/issues/4183
|
||||
-->
|
||||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
|
||||
export let progress = 0;
|
||||
export let infinite = false;
|
||||
|
||||
function colorClasses(props) {
|
||||
const { color, textColor, bgColor, borderColor, rippleColor, dark } = props;
|
||||
|
||||
return {
|
||||
dark,
|
||||
[`color-${color}`]: color,
|
||||
[`text-color-${textColor}`]: textColor,
|
||||
[`bg-color-${bgColor}`]: bgColor,
|
||||
[`border-color-${borderColor}`]: borderColor,
|
||||
[`ripple-color-${rippleColor}`]: rippleColor,
|
||||
};
|
||||
}
|
||||
|
||||
function classNames(...args) {
|
||||
const classes = [];
|
||||
args.forEach((arg) => {
|
||||
if (typeof arg === 'object' && arg.constructor === Object) {
|
||||
Object.keys(arg).forEach((key) => {
|
||||
if (arg[key]) classes.push(key);
|
||||
});
|
||||
} else if (arg) classes.push(arg);
|
||||
});
|
||||
const uniqueClasses = [];
|
||||
classes.forEach((c) => {
|
||||
if (uniqueClasses.indexOf(c) < 0) uniqueClasses.push(c);
|
||||
});
|
||||
return uniqueClasses.join(' ');
|
||||
}
|
||||
|
||||
let classes
|
||||
$: classes = classNames(
|
||||
className,
|
||||
'progressbar',
|
||||
{
|
||||
'progressbar-infinite': infinite,
|
||||
},
|
||||
colorClasses($$props),
|
||||
);
|
||||
|
||||
let transformStyle = ""
|
||||
$: transformStyle = progress ? `translate3d(${-100 + progress}%, 0, 0)` : '';
|
||||
</script>
|
||||
|
||||
<span class={classes}
|
||||
data-progress={progress} >
|
||||
<span style:transform={transformStyle} />
|
||||
</span>
|
||||
@@ -2,6 +2,9 @@ import type ComfyGraphCanvas from "$lib/ComfyGraphCanvas";
|
||||
import { type ContainerLayout, type IDragItem, type TemplateLayout, type WritableLayoutStateStore } from "$lib/stores/layoutStates"
|
||||
import type { LGraphCanvas, Vector2 } from "@litegraph-ts/core";
|
||||
import { get } from "svelte/store";
|
||||
import { PhotoBrowser, f7 } from "framework7-svelte";
|
||||
import { ImageViewer } from "$lib/ImageViewer";
|
||||
import interfaceState from "$lib/stores/interfaceState";
|
||||
|
||||
export function handleContainerConsider(layoutState: WritableLayoutStateStore, container: ContainerLayout, evt: CustomEvent<DndEvent<IDragItem>>): IDragItem[] {
|
||||
return layoutState.updateChildren(container, evt.detail.items)
|
||||
@@ -45,3 +48,25 @@ function doInsertTemplate(layoutState: WritableLayoutStateStore, droppedTemplate
|
||||
|
||||
return get(layoutState).allItems[container.id].children;
|
||||
}
|
||||
|
||||
let mobileLightbox = null;
|
||||
|
||||
export function showMobileLightbox(images: any[], selectedImage: number, options: Partial<PhotoBrowser["params"]> = {}) {
|
||||
if (!f7)
|
||||
return
|
||||
|
||||
if (mobileLightbox) {
|
||||
mobileLightbox.destroy();
|
||||
mobileLightbox = null;
|
||||
}
|
||||
|
||||
history.pushState({ type: "gallery" }, "");
|
||||
|
||||
mobileLightbox = f7.photoBrowser.create({
|
||||
photos: images,
|
||||
theme: get(interfaceState).isDarkMode ? "dark" : "light",
|
||||
type: 'popup',
|
||||
...options
|
||||
});
|
||||
mobileLightbox.open(selectedImage)
|
||||
}
|
||||
|
||||
@@ -68,7 +68,7 @@ function getConnectionPos(node: SerializedLGraphNode, is_input: boolean, slotNum
|
||||
return out;
|
||||
}
|
||||
|
||||
function createSerializedWidgetNode(vanillaWorkflow: ComfyVanillaWorkflow, node: SerializedLGraphNode, slotIndex: number, isInput: boolean, widgetNodeType: string, value: any): [ComfyWidgetNode, SerializedComfyWidgetNode] {
|
||||
function createSerializedWidgetNode(vanillaWorkflow: ComfyVanillaWorkflow, widgetNodeType: string, value: any, node?: SerializedLGraphNode, slotIndex?: number, isInput?: boolean): [ComfyWidgetNode, SerializedComfyWidgetNode] {
|
||||
const comfyWidgetNode = LiteGraph.createNode<ComfyWidgetNode>(widgetNodeType);
|
||||
comfyWidgetNode.flags.collapsed = true;
|
||||
const size: Vector2 = [0, 0];
|
||||
@@ -85,12 +85,15 @@ function createSerializedWidgetNode(vanillaWorkflow: ComfyVanillaWorkflow, node:
|
||||
const serWidgetNode = comfyWidgetNode.serialize() as SerializedComfyWidgetNode;
|
||||
serWidgetNode.comfyValue = value;
|
||||
serWidgetNode.shownOutputProperties = {};
|
||||
getConnectionPos(node, isInput, slotIndex, serWidgetNode.pos);
|
||||
if (isInput)
|
||||
serWidgetNode.pos[0] -= size[0] - 20;
|
||||
else
|
||||
serWidgetNode.pos[0] += 20;
|
||||
serWidgetNode.pos[1] += LiteGraph.NODE_TITLE_HEIGHT / 2;
|
||||
|
||||
if (node != null) {
|
||||
getConnectionPos(node, isInput, slotIndex, serWidgetNode.pos);
|
||||
if (isInput)
|
||||
serWidgetNode.pos[0] -= size[0] - 20;
|
||||
else
|
||||
serWidgetNode.pos[0] += 20;
|
||||
serWidgetNode.pos[1] += LiteGraph.NODE_TITLE_HEIGHT / 2;
|
||||
}
|
||||
|
||||
if (widgetNodeType === "ui/text" && typeof value === "string" && value.indexOf("\n") != -1) {
|
||||
const lineCount = countNewLines(value);
|
||||
@@ -260,11 +263,12 @@ function convertPrimitiveNode(vanillaWorkflow: ComfyVanillaWorkflow, node: Seria
|
||||
|
||||
const [comfyWidgetNode, serWidgetNode] = createSerializedWidgetNode(
|
||||
vanillaWorkflow,
|
||||
widgetNodeType,
|
||||
value,
|
||||
node,
|
||||
0, // first output on the PrimitiveNode
|
||||
false, // this is an output slot index
|
||||
widgetNodeType,
|
||||
value);
|
||||
false // this is an output slot index
|
||||
);
|
||||
|
||||
// Set the UI node's min/max/step from the node def
|
||||
configureWidgetNodeProperties(serWidgetNode, widgetOpts)
|
||||
@@ -381,6 +385,20 @@ export default function convertVanillaWorkflow(vanillaWorkflow: ComfyVanillaWork
|
||||
removeSerializedNode(vanillaWorkflow, node);
|
||||
continue
|
||||
}
|
||||
else if (node.type === "Note") {
|
||||
const [comfyWidgetNode, serWidgetNode] = createSerializedWidgetNode(
|
||||
vanillaWorkflow,
|
||||
"ui/markdown",
|
||||
node.widgets_values[0]
|
||||
);
|
||||
serWidgetNode.pos = [node.pos[0], node.pos[1]]
|
||||
|
||||
const group = layoutState.addContainer(left, { title: "" })
|
||||
layoutState.addWidget(group, comfyWidgetNode)
|
||||
|
||||
removeSerializedNode(vanillaWorkflow, node);
|
||||
continue
|
||||
}
|
||||
|
||||
const def = ComfyApp.knownBackendNodes[node.type];
|
||||
if (def == null) {
|
||||
@@ -449,11 +467,12 @@ export default function convertVanillaWorkflow(vanillaWorkflow: ComfyVanillaWork
|
||||
|
||||
const [comfyWidgetNode, serWidgetNode] = createSerializedWidgetNode(
|
||||
vanillaWorkflow,
|
||||
widgetNodeType,
|
||||
value,
|
||||
node,
|
||||
connInputIndex,
|
||||
true,
|
||||
widgetNodeType,
|
||||
value);
|
||||
true
|
||||
);
|
||||
|
||||
configureWidgetNodeProperties(serWidgetNode, inputOpts)
|
||||
|
||||
@@ -492,11 +511,12 @@ export default function convertVanillaWorkflow(vanillaWorkflow: ComfyVanillaWork
|
||||
// Let's create a gallery for this output node and hook it up
|
||||
const [comfyGalleryNode, serGalleryNode] = createSerializedWidgetNode(
|
||||
vanillaWorkflow,
|
||||
"ui/gallery",
|
||||
[],
|
||||
node,
|
||||
connOutputIndex,
|
||||
false,
|
||||
"ui/gallery",
|
||||
[]);
|
||||
);
|
||||
|
||||
if (group == null)
|
||||
group = layoutState.addContainer(isOutputNode ? right : left, { title: node.title || node.type })
|
||||
|
||||
@@ -3,17 +3,20 @@ import notify from "$lib/notify";
|
||||
import { convertComfyOutputToGradio, type SerializedPromptOutput } from "$lib/utils";
|
||||
import { BuiltInSlotType, LiteGraph, type SlotLayout } from "@litegraph-ts/core";
|
||||
import ComfyGraphNode, { type ComfyGraphNodeProperties } from "../ComfyGraphNode";
|
||||
import configState from "$lib/stores/configState";
|
||||
|
||||
export interface ComfyNotifyActionProperties extends ComfyGraphNodeProperties {
|
||||
message: string,
|
||||
type: string
|
||||
type: string,
|
||||
alwaysShow: boolean
|
||||
}
|
||||
|
||||
export default class ComfyNotifyAction extends ComfyGraphNode {
|
||||
override properties: ComfyNotifyActionProperties = {
|
||||
tags: [],
|
||||
message: "Nya.",
|
||||
type: "info"
|
||||
type: "info",
|
||||
alwaysShow: false
|
||||
}
|
||||
|
||||
static slotLayout: SlotLayout = {
|
||||
@@ -24,6 +27,9 @@ export default class ComfyNotifyAction extends ComfyGraphNode {
|
||||
}
|
||||
|
||||
override onAction(action: any, param: any) {
|
||||
if (!configState.canShowNotificationText() && !this.properties.alwaysShow)
|
||||
return;
|
||||
|
||||
const message = this.getInputData(0) || this.properties.message;
|
||||
if (!message)
|
||||
return;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { BuiltInSlotType, LiteGraph, type SlotLayout } from "@litegraph-ts/core";
|
||||
import ComfyGraphNode, { type ComfyGraphNodeProperties } from "../ComfyGraphNode";
|
||||
import { playSound } from "$lib/utils";
|
||||
import configState from "$lib/stores/configState";
|
||||
|
||||
export interface ComfyPlaySoundActionProperties extends ComfyGraphNodeProperties {
|
||||
sound: string,
|
||||
@@ -20,6 +21,9 @@ export default class ComfyPlaySoundAction extends ComfyGraphNode {
|
||||
}
|
||||
|
||||
override onAction(action: any, param: any) {
|
||||
if (!configState.canPlayNotificationSound())
|
||||
return;
|
||||
|
||||
const sound = this.getInputData(0) || this.properties.sound;
|
||||
if (sound) {
|
||||
playSound(sound)
|
||||
|
||||
@@ -8,6 +8,7 @@ import notify from "$lib/notify";
|
||||
import workflowState from "$lib/stores/workflowState";
|
||||
import { get } from "svelte/store";
|
||||
import type ComfyApp from "$lib/components/ComfyApp";
|
||||
import interfaceState from "$lib/stores/interfaceState";
|
||||
|
||||
export interface ComfySendOutputActionProperties extends ComfyGraphNodeProperties {
|
||||
}
|
||||
@@ -41,36 +42,8 @@ export default class ComfySendOutputAction extends ComfyGraphNode {
|
||||
|
||||
this.isActive = true;
|
||||
|
||||
const doSend = (modal: ModalData) => {
|
||||
interfaceState.querySendOutput(value, type, receiveTargets, () => {
|
||||
this.isActive = false;
|
||||
|
||||
const { workflow, targetNode } = get(modal.state) as SendOutputModalResult;
|
||||
console.warn("send", workflow, targetNode);
|
||||
|
||||
if (workflow == null || targetNode == null)
|
||||
return
|
||||
|
||||
const app = (window as any).app as ComfyApp;
|
||||
if (app == null) {
|
||||
console.error("Couldn't get app!")
|
||||
return
|
||||
}
|
||||
|
||||
targetNode.receiveOutput(value);
|
||||
workflowState.setActiveWorkflow(app.lCanvas, workflow.id)
|
||||
}
|
||||
|
||||
modalState.pushModal({
|
||||
title: "Send Output",
|
||||
closeOnClick: true,
|
||||
showCloseButton: true,
|
||||
svelteComponent: SendOutputModal,
|
||||
svelteProps: {
|
||||
value,
|
||||
type,
|
||||
receiveTargets
|
||||
},
|
||||
onClose: doSend
|
||||
})
|
||||
};
|
||||
}
|
||||
|
||||
58
src/lib/nodes/widgets/ComfyMarkdownNode.ts
Normal file
58
src/lib/nodes/widgets/ComfyMarkdownNode.ts
Normal file
@@ -0,0 +1,58 @@
|
||||
import { BuiltInSlotType, LiteGraph, type ITextWidget, type SlotLayout } from "@litegraph-ts/core";
|
||||
|
||||
import MarkdownWidget from "$lib/widgets/MarkdownWidget.svelte";
|
||||
import ComfyWidgetNode, { type ComfyWidgetProperties } from "./ComfyWidgetNode";
|
||||
|
||||
export interface ComfyMarkdownProperties extends ComfyWidgetProperties {
|
||||
}
|
||||
|
||||
export default class ComfyMarkdownNode extends ComfyWidgetNode<string> {
|
||||
override properties: ComfyMarkdownProperties = {
|
||||
tags: [],
|
||||
defaultValue: false,
|
||||
}
|
||||
|
||||
static slotLayout: SlotLayout = {
|
||||
inputs: [
|
||||
{ name: "store", type: BuiltInSlotType.ACTION }
|
||||
],
|
||||
outputs: [
|
||||
{ name: "value", type: "string" },
|
||||
{ name: "changed", type: BuiltInSlotType.EVENT },
|
||||
]
|
||||
}
|
||||
|
||||
override svelteComponentType = MarkdownWidget;
|
||||
override defaultValue = "";
|
||||
|
||||
constructor(name?: string) {
|
||||
super(name, "")
|
||||
}
|
||||
|
||||
override createDisplayWidget(): ITextWidget {
|
||||
const widget = this.addWidget<ITextWidget>(
|
||||
"text",
|
||||
"Value",
|
||||
"",
|
||||
(v: string) => {
|
||||
if (v == null || v === this.getValue()) {
|
||||
return;
|
||||
}
|
||||
this.setValue(v);
|
||||
},
|
||||
{
|
||||
multiline: true,
|
||||
|
||||
inputStyle: { fontFamily: "monospace" }
|
||||
}
|
||||
)
|
||||
return widget;
|
||||
}
|
||||
}
|
||||
|
||||
LiteGraph.registerNodeType({
|
||||
class: ComfyMarkdownNode,
|
||||
title: "UI.Markdown",
|
||||
desc: "Displays Markdown in the UI",
|
||||
type: "ui/markdown"
|
||||
})
|
||||
@@ -106,13 +106,18 @@ export default abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
|
||||
this.value = writable(value)
|
||||
this.color ||= color.color
|
||||
this.bgColor ||= color.bgColor
|
||||
this.displayWidget = this.addWidget<ITextWidget>(
|
||||
this.displayWidget = this.createDisplayWidget();
|
||||
this.unsubscribe = this.value.subscribe(this.onValueUpdated.bind(this))
|
||||
}
|
||||
|
||||
protected createDisplayWidget(): ITextWidget {
|
||||
const widget = this.addWidget<ITextWidget>(
|
||||
"text",
|
||||
"Value",
|
||||
""
|
||||
);
|
||||
this.displayWidget.disabled = true; // prevent editing
|
||||
this.unsubscribe = this.value.subscribe(this.onValueUpdated.bind(this))
|
||||
)
|
||||
widget.disabled = true; // prevent editing
|
||||
return widget;
|
||||
}
|
||||
|
||||
addPropertyAsOutput(propertyName: string, type: string) {
|
||||
|
||||
@@ -9,3 +9,4 @@ export { default as ComfyRadioNode } from "./ComfyRadioNode"
|
||||
export { default as ComfyNumberNode } from "./ComfyNumberNode"
|
||||
export { default as ComfyTextNode } from "./ComfyTextNode"
|
||||
export { default as ComfyMultiRegionNode } from "./ComfyMultiRegionNode"
|
||||
export { default as ComfyMarkdownNode } from "./ComfyMarkdownNode"
|
||||
|
||||
@@ -27,6 +27,11 @@ function notifyf7(text: string, options: NotifyOptions) {
|
||||
on.click = () => options.onClick();
|
||||
}
|
||||
|
||||
let icon = null;
|
||||
if (options.imageUrl) {
|
||||
icon = `<img src="${options.imageUrl}"/>`
|
||||
}
|
||||
|
||||
const notification = f7.notification.create({
|
||||
title: options.title,
|
||||
titleRightText: 'now',
|
||||
@@ -34,7 +39,8 @@ function notifyf7(text: string, options: NotifyOptions) {
|
||||
text: text,
|
||||
closeOnClick: true,
|
||||
closeTimeout,
|
||||
on
|
||||
on,
|
||||
icon
|
||||
});
|
||||
notification.open();
|
||||
}
|
||||
|
||||
@@ -84,6 +84,41 @@ const defComfyUIPort: ConfigDefNumber<"comfyUIPort"> = {
|
||||
}
|
||||
};
|
||||
|
||||
export enum NotificationState {
|
||||
MessageAndSound,
|
||||
MessageOnly,
|
||||
SoundOnly,
|
||||
None
|
||||
}
|
||||
|
||||
const defNotifications: ConfigDefEnum<"notifications", NotificationState> = {
|
||||
name: "notifications",
|
||||
type: "enum",
|
||||
defaultValue: NotificationState.MessageAndSound,
|
||||
category: "ui",
|
||||
description: "Controls how notifications are shown",
|
||||
options: {
|
||||
values: [
|
||||
{
|
||||
value: NotificationState.MessageAndSound,
|
||||
label: "Message & sound"
|
||||
},
|
||||
{
|
||||
value: NotificationState.MessageOnly,
|
||||
label: "Message only"
|
||||
},
|
||||
{
|
||||
value: NotificationState.SoundOnly,
|
||||
label: "Sound only"
|
||||
},
|
||||
{
|
||||
value: NotificationState.None,
|
||||
label: "None"
|
||||
},
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
const defAlwaysStripUserState: ConfigDefBoolean<"alwaysStripUserState"> = {
|
||||
name: "alwaysStripUserState",
|
||||
type: "boolean",
|
||||
@@ -158,6 +193,7 @@ const defBuiltInTemplates: ConfigDefStringArray<"builtInTemplates"> = {
|
||||
export const CONFIG_DEFS = [
|
||||
defComfyUIHostname,
|
||||
defComfyUIPort,
|
||||
defNotifications,
|
||||
defAlwaysStripUserState,
|
||||
defPromptForWorkflowName,
|
||||
defConfirmWhenUnloadingUnsavedChanges,
|
||||
|
||||
@@ -2,10 +2,12 @@ import { debounce } from '$lib/utils';
|
||||
import { toHashMap } from '@litegraph-ts/core';
|
||||
import { get, writable } from 'svelte/store';
|
||||
import type { Writable } from 'svelte/store';
|
||||
import { defaultConfig, type ConfigState, type ConfigDefAny, CONFIG_DEFS_BY_NAME, validateConfigOption } from './configDefs';
|
||||
import { defaultConfig, type ConfigState, type ConfigDefAny, CONFIG_DEFS_BY_NAME, validateConfigOption, NotificationState } from './configDefs';
|
||||
|
||||
type ConfigStateOps = {
|
||||
getBackendURL: () => string,
|
||||
canShowNotificationText: () => boolean,
|
||||
canPlayNotificationSound: () => boolean,
|
||||
|
||||
load: (data: any, runOnChanged?: boolean) => ConfigState
|
||||
loadDefault: (runOnChanged?: boolean) => ConfigState
|
||||
@@ -22,9 +24,25 @@ let changedOptions: Partial<Record<keyof ConfigState, [any, any]>> = {}
|
||||
|
||||
function getBackendURL(): string {
|
||||
const state = get(store);
|
||||
return `${window.location.protocol}//${state.comfyUIHostname}:${state.comfyUIPort}`
|
||||
let hostname = state.comfyUIHostname
|
||||
if (hostname === "localhost") {
|
||||
// For dev use, assume same hostname as connected server
|
||||
hostname = location.hostname;
|
||||
}
|
||||
return `${window.location.protocol}//${hostname}:${state.comfyUIPort}`
|
||||
}
|
||||
|
||||
function canShowNotificationText(): boolean {
|
||||
const state = get(store).notifications;
|
||||
return state === NotificationState.MessageAndSound || state === NotificationState.MessageOnly;
|
||||
}
|
||||
|
||||
function canPlayNotificationSound(): boolean {
|
||||
const state = get(store).notifications;
|
||||
return state === NotificationState.MessageAndSound || state === NotificationState.SoundOnly;
|
||||
}
|
||||
|
||||
|
||||
function setConfigOption(def: ConfigDefAny, v: any, runOnChanged: boolean): boolean {
|
||||
let valid = false;
|
||||
store.update(state => {
|
||||
@@ -112,6 +130,9 @@ const configStateStore: WritableConfigStateStore =
|
||||
{
|
||||
...store,
|
||||
getBackendURL,
|
||||
canShowNotificationText,
|
||||
canPlayNotificationSound,
|
||||
|
||||
validateConfigOption,
|
||||
setConfigOption,
|
||||
load,
|
||||
|
||||
@@ -1,6 +1,12 @@
|
||||
import { debounce } from '$lib/utils';
|
||||
import { debounce, isMobileBrowser } from '$lib/utils';
|
||||
import { get, writable } from 'svelte/store';
|
||||
import type { Readable, Writable } from 'svelte/store';
|
||||
import type { WorkflowInstID, WorkflowReceiveOutputTargets } from './workflowState';
|
||||
import modalState, { type ModalData } from './modalState';
|
||||
import type { SlotType } from '@litegraph-ts/core';
|
||||
import type ComfyApp from '$lib/components/ComfyApp';
|
||||
import SendOutputModal, { type SendOutputModalResult } from "$lib/components/modal/SendOutputModal.svelte";
|
||||
import workflowState from './workflowState';
|
||||
|
||||
export type InterfaceState = {
|
||||
// Show a large indicator of the currently editing number value for mobile
|
||||
@@ -10,12 +16,20 @@ export type InterfaceState = {
|
||||
showIndicator: boolean,
|
||||
indicatorValue: any,
|
||||
|
||||
graphTransitioning: boolean
|
||||
isJumpingToNode: boolean
|
||||
graphTransitioning: boolean,
|
||||
isJumpingToNode: boolean,
|
||||
|
||||
selectedWorkflowIndex: number | null
|
||||
showingWorkflow: boolean,
|
||||
selectedTab: number,
|
||||
showSheet: boolean,
|
||||
|
||||
isDarkMode: boolean
|
||||
}
|
||||
|
||||
type InterfaceStateOps = {
|
||||
showIndicator: (pointerX: number, pointerY: number, value: any) => void,
|
||||
querySendOutput: (value: any, type: SlotType, receiveTargets: WorkflowReceiveOutputTargets[], cb: (modal: ModalData) => void) => void,
|
||||
}
|
||||
|
||||
export type WritableInterfaceStateStore = Writable<InterfaceState> & InterfaceStateOps;
|
||||
@@ -28,6 +42,13 @@ const store: Writable<InterfaceState> = writable(
|
||||
|
||||
graphTransitioning: false,
|
||||
isJumpingToNode: false,
|
||||
selectedTab: 1,
|
||||
showSheet: false,
|
||||
|
||||
selectedWorkflowIndex: null,
|
||||
showingWorkflow: false,
|
||||
|
||||
isDarkMode: false,
|
||||
})
|
||||
|
||||
const debounceDrag = debounce(() => { store.update(s => { s.showIndicator = false; return s }) }, 1000)
|
||||
@@ -46,9 +67,49 @@ function showIndicator(pointerX: number, pointerY: number, value: any) {
|
||||
debounceDrag();
|
||||
}
|
||||
|
||||
function querySendOutput(value: any, type: SlotType, receiveTargets: WorkflowReceiveOutputTargets[], cb: (modal: ModalData) => void) {
|
||||
if (isMobileBrowser(navigator.userAgent)) {
|
||||
store.update(s => { s.showSheet = true; return s; })
|
||||
}
|
||||
else {
|
||||
const doSend = (modal: ModalData) => {
|
||||
cb(modal)
|
||||
|
||||
const { workflow, targetNode } = get(modal.state) as SendOutputModalResult;
|
||||
console.warn("send", workflow, targetNode);
|
||||
|
||||
if (workflow == null || targetNode == null)
|
||||
return
|
||||
|
||||
const app = (window as any).app as ComfyApp;
|
||||
if (app == null) {
|
||||
console.error("Couldn't get app!")
|
||||
return
|
||||
}
|
||||
|
||||
targetNode.receiveOutput(value);
|
||||
workflowState.setActiveWorkflow(app.lCanvas, workflow.id)
|
||||
}
|
||||
|
||||
modalState.pushModal({
|
||||
title: "Send Output",
|
||||
closeOnClick: true,
|
||||
showCloseButton: true,
|
||||
svelteComponent: SendOutputModal,
|
||||
svelteProps: {
|
||||
value,
|
||||
type,
|
||||
receiveTargets
|
||||
},
|
||||
onClose: doSend
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const interfaceStateStore: WritableInterfaceStateStore =
|
||||
{
|
||||
...store,
|
||||
showIndicator
|
||||
showIndicator,
|
||||
querySendOutput
|
||||
}
|
||||
export default interfaceStateStore;
|
||||
|
||||
@@ -7,6 +7,8 @@ import { playSound } from "$lib/utils";
|
||||
import { get, writable, type Writable } from "svelte/store";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import workflowState, { type WorkflowError, type WorkflowExecutionError, type WorkflowInstID, type WorkflowValidationError } from "./workflowState";
|
||||
import configState from "./configState";
|
||||
import uiQueueState from "./uiQueueState";
|
||||
|
||||
export type QueueEntryStatus = "success" | "validation_failed" | "error" | "interrupted" | "all_cached" | "unknown";
|
||||
|
||||
@@ -283,14 +285,18 @@ function executingUpdated(promptID: PromptID, runningNodeID: ComfyNodeID | null)
|
||||
if (entry != null) {
|
||||
const totalNodesInPrompt = Object.keys(entry.prompt).length
|
||||
if (entry.cachedNodes.size >= Object.keys(entry.prompt).length) {
|
||||
notify("Prompt was cached, nothing to run.", { type: "warning" })
|
||||
notify("Prompt was cached, nothing to run.", { type: "warning", showOn: "web" })
|
||||
moveToCompleted(index, queue, "all_cached", "(Execution was cached)");
|
||||
}
|
||||
else if (entry.nodesRan.size >= totalNodesInPrompt) {
|
||||
const workflow = workflowState.getWorkflow(entry.extraData.workflowID);
|
||||
if (workflow?.attrs.showDefaultNotifications) {
|
||||
notify("Prompt finished!", { type: "success" });
|
||||
playSound("notification.mp3")
|
||||
if (configState.canShowNotificationText()) {
|
||||
notify("Prompt finished!", { type: "success" });
|
||||
}
|
||||
if (configState.canPlayNotificationSound()) {
|
||||
playSound("notification.mp3")
|
||||
}
|
||||
}
|
||||
moveToCompleted(index, queue, "success")
|
||||
}
|
||||
@@ -439,7 +445,6 @@ function queueCleared(type: QueueItemType) {
|
||||
store.update(s => {
|
||||
if (type === "queue") {
|
||||
s.queuePending.set([]);
|
||||
s.queueRunning.set([]);
|
||||
s.queueRemaining = 0;
|
||||
s.runningNodeID = null;
|
||||
s.progress = null;
|
||||
|
||||
207
src/lib/stores/uiQueueState.ts
Normal file
207
src/lib/stores/uiQueueState.ts
Normal file
@@ -0,0 +1,207 @@
|
||||
import type { PromptID, QueueItemType } from '$lib/api';
|
||||
import { get, writable } from 'svelte/store';
|
||||
import type { Readable, Writable } from 'svelte/store';
|
||||
import queueState, { type CompletedQueueEntry, type QueueEntry } from './queueState';
|
||||
import type { WorkflowError } from './workflowState';
|
||||
import { convertComfyOutputToComfyURL } from '$lib/utils';
|
||||
|
||||
export type QueueUIEntryStatus = QueueEntryStatus | "pending" | "running";
|
||||
|
||||
export type QueueUIEntry = {
|
||||
entry: QueueEntry,
|
||||
message: string,
|
||||
submessage: string,
|
||||
date?: string,
|
||||
status: QueueUIEntryStatus,
|
||||
images?: string[], // URLs
|
||||
details?: string, // shown in a tooltip on hover
|
||||
error?: WorkflowError
|
||||
}
|
||||
|
||||
export type UIQueueState = {
|
||||
mode: QueueItemType,
|
||||
|
||||
queuedEntries: QueueUIEntry[],
|
||||
runningEntries: QueueUIEntry[],
|
||||
|
||||
queueUIEntries: QueueUIEntry[],
|
||||
historyUIEntries: QueueUIEntry[],
|
||||
}
|
||||
|
||||
type UIQueueStateOps = {
|
||||
updateEntries: (force?: boolean) => void
|
||||
clearAll: () => void
|
||||
clearQueue: () => void
|
||||
clearHistory: () => void
|
||||
}
|
||||
|
||||
export type WritableUIQueueStateStore = Writable<UIQueueState> & UIQueueStateOps;
|
||||
const store: Writable<UIQueueState> = writable(
|
||||
{
|
||||
mode: "queue",
|
||||
queuedEntries: [],
|
||||
runningEntries: [],
|
||||
completedEntries: [],
|
||||
|
||||
queueUIEntries: [],
|
||||
historyUIEntries: [],
|
||||
})
|
||||
|
||||
function formatDate(date: Date): string {
|
||||
const time = date.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true });
|
||||
const day = date.toLocaleString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' }).replace(',', '');
|
||||
return [time, day].join(", ")
|
||||
}
|
||||
|
||||
function convertEntry(entry: QueueEntry, status: QueueUIEntryStatus): QueueUIEntry {
|
||||
let date = entry.finishedAt || entry.queuedAt;
|
||||
let dateStr = null;
|
||||
if (date) {
|
||||
dateStr = formatDate(date);
|
||||
}
|
||||
|
||||
const subgraphs: string[] | null = entry.extraData?.extra_pnginfo?.comfyBoxPrompt?.subgraphs;
|
||||
|
||||
let message = "Prompt";
|
||||
if (entry.extraData?.workflowTitle != null) {
|
||||
message = `${entry.extraData.workflowTitle}`
|
||||
}
|
||||
|
||||
if (subgraphs && subgraphs.length > 0) {
|
||||
const subgraphsString = subgraphs.join(', ')
|
||||
message += ` (${subgraphsString})`
|
||||
}
|
||||
|
||||
let submessage = `Nodes: ${Object.keys(entry.prompt).length}`
|
||||
|
||||
if (Object.keys(entry.outputs).length > 0) {
|
||||
const imageCount = Object.values(entry.outputs).filter(o => o.images).flatMap(o => o.images).length
|
||||
submessage = `Images: ${imageCount}`
|
||||
}
|
||||
|
||||
return {
|
||||
entry,
|
||||
message,
|
||||
submessage,
|
||||
date: dateStr,
|
||||
status,
|
||||
images: []
|
||||
}
|
||||
}
|
||||
|
||||
function convertPendingEntry(entry: QueueEntry, status: QueueUIEntryStatus): QueueUIEntry {
|
||||
const result = convertEntry(entry, status);
|
||||
|
||||
const thumbnails = entry.extraData?.thumbnails
|
||||
if (thumbnails) {
|
||||
result.images = thumbnails.map(convertComfyOutputToComfyURL);
|
||||
}
|
||||
|
||||
const outputs = Object.values(entry.outputs)
|
||||
.filter(o => o.images)
|
||||
.flatMap(o => o.images)
|
||||
.map(convertComfyOutputToComfyURL);
|
||||
if (outputs) {
|
||||
result.images = result.images.concat(outputs)
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
function convertCompletedEntry(entry: CompletedQueueEntry): QueueUIEntry {
|
||||
const result = convertEntry(entry.entry, entry.status);
|
||||
|
||||
const images = Object.values(entry.entry.outputs)
|
||||
.filter(o => o.images)
|
||||
.flatMap(o => o.images)
|
||||
.map(convertComfyOutputToComfyURL);
|
||||
result.images = images
|
||||
|
||||
if (entry.message)
|
||||
result.submessage = entry.message
|
||||
else if (entry.status === "interrupted" || entry.status === "all_cached")
|
||||
result.submessage = "Prompt was interrupted."
|
||||
if (entry.error)
|
||||
result.error = entry.error
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
function updateFromQueue(queuePending: QueueEntry[], queueRunning: QueueEntry[]) {
|
||||
store.update(s => {
|
||||
// newest entries appear at the top
|
||||
s.queuedEntries = queuePending.map((e) => convertPendingEntry(e, "pending")).reverse();
|
||||
s.runningEntries = queueRunning.map((e) => convertPendingEntry(e, "running")).reverse();
|
||||
s.queueUIEntries = s.queuedEntries.concat(s.runningEntries);
|
||||
console.warn("[ComfyQueue] BUILDQUEUE", s.queuedEntries.length, s.runningEntries.length)
|
||||
return s;
|
||||
})
|
||||
}
|
||||
|
||||
function updateFromHistory(queueCompleted: CompletedQueueEntry[]) {
|
||||
store.update(s => {
|
||||
s.historyUIEntries = queueCompleted.map(convertCompletedEntry).reverse();
|
||||
console.warn("[ComfyQueue] BUILDHISTORY", s.historyUIEntries.length)
|
||||
return s
|
||||
})
|
||||
}
|
||||
|
||||
function updateEntries(force: boolean = false) {
|
||||
const state = get(store)
|
||||
const qs = get(queueState)
|
||||
const queuePending = qs.queuePending
|
||||
const queueRunning = qs.queueRunning
|
||||
const queueCompleted = qs.queueCompleted
|
||||
|
||||
const queueChanged = get(queuePending).length != state.queuedEntries.length
|
||||
|| get(queueRunning).length != state.runningEntries.length;
|
||||
const historyChanged = get(queueCompleted).length != state.historyUIEntries.length;
|
||||
|
||||
if (queueChanged || force) {
|
||||
updateFromQueue(get(queuePending), get(queueRunning));
|
||||
}
|
||||
if (historyChanged || force) {
|
||||
updateFromHistory(get(queueCompleted));
|
||||
}
|
||||
}
|
||||
|
||||
function clearAll() {
|
||||
store.update(s => {
|
||||
s.queuedEntries = []
|
||||
s.runningEntries = []
|
||||
s.historyUIEntries = []
|
||||
return s
|
||||
})
|
||||
updateEntries(true);
|
||||
}
|
||||
|
||||
function clearQueue() {
|
||||
store.update(s => {
|
||||
s.queuedEntries = []
|
||||
s.runningEntries = []
|
||||
return s
|
||||
})
|
||||
updateEntries(true);
|
||||
}
|
||||
|
||||
function clearHistory() {
|
||||
store.update(s => {
|
||||
s.historyUIEntries = []
|
||||
return s
|
||||
})
|
||||
updateEntries(true);
|
||||
}
|
||||
|
||||
queueState.subscribe(s => {
|
||||
updateEntries();
|
||||
})
|
||||
|
||||
const uiStateStore: WritableUIQueueStateStore =
|
||||
{
|
||||
...store,
|
||||
updateEntries,
|
||||
clearAll,
|
||||
clearQueue,
|
||||
clearHistory,
|
||||
}
|
||||
export default uiStateStore;
|
||||
@@ -4,10 +4,11 @@ import type { FileData as GradioFileData } from "@gradio/upload";
|
||||
import { Subgraph, type LGraph, type LGraphNode, type LLink, type SerializedLGraph, type UUID, type NodeID, type SlotType, type Vector4, type SerializedLGraphNode } from "@litegraph-ts/core";
|
||||
import { get } from "svelte/store";
|
||||
import type { ComfyNodeID } from "./api";
|
||||
import { type SerializedPrompt } from "./components/ComfyApp";
|
||||
import workflowState from "./stores/workflowState";
|
||||
import ComfyApp, { type SerializedPrompt } from "./components/ComfyApp";
|
||||
import workflowState, { type WorkflowReceiveOutputTargets } from "./stores/workflowState";
|
||||
import { ImageViewer } from "./ImageViewer";
|
||||
import configState from "$lib/stores/configState";
|
||||
import SendOutputModal, { type SendOutputModalResult } from "$lib/components/modal/SendOutputModal.svelte";
|
||||
|
||||
export function clamp(n: number, min: number, max: number): number {
|
||||
if (max <= min)
|
||||
@@ -618,6 +619,9 @@ export async function readFileToText(file: File): Promise<string> {
|
||||
reader.onload = async () => {
|
||||
resolve(reader.result as string);
|
||||
};
|
||||
reader.onerror = async () => {
|
||||
reject(reader.error);
|
||||
}
|
||||
reader.readAsText(file);
|
||||
})
|
||||
}
|
||||
@@ -635,6 +639,9 @@ export function nextLetter(s: string): string {
|
||||
}
|
||||
|
||||
export function playSound(sound: string) {
|
||||
if (!configState.canPlayNotificationSound())
|
||||
return;
|
||||
|
||||
const url = `${location.origin}/sound/${sound}`;
|
||||
const audio = new Audio(url);
|
||||
audio.play();
|
||||
@@ -706,3 +713,31 @@ export function canvasToBlob(canvas: HTMLCanvasElement): Promise<Blob> {
|
||||
canvas.toBlob(resolve);
|
||||
});
|
||||
}
|
||||
|
||||
export type SafetensorsMetadata = Record<string, string>
|
||||
|
||||
export async function getSafetensorsMetadata(folder: string, filename: string): Promise<SafetensorsMetadata> {
|
||||
const url = configState.getBackendURL();
|
||||
const params = new URLSearchParams({ filename })
|
||||
|
||||
return fetch(new Request(url + `/view_metadata/${folder}?` + params)).then(r => r.json())
|
||||
}
|
||||
|
||||
export function partition<T>(myArray: T[], chunkSize: number): T[] {
|
||||
let index = 0;
|
||||
const arrayLength = myArray.length;
|
||||
const tempArray = [];
|
||||
|
||||
for (index = 0; index < arrayLength; index += chunkSize) {
|
||||
const myChunk = myArray.slice(index, index + chunkSize);
|
||||
tempArray.push(myChunk);
|
||||
}
|
||||
|
||||
return tempArray;
|
||||
}
|
||||
|
||||
const MOBILE_USER_AGENTS = ["iPhone", "iPad", "Android", "BlackBerry", "WebOs"].map(a => new RegExp(a, "i"))
|
||||
|
||||
export function isMobileBrowser(userAgent: string): boolean {
|
||||
return MOBILE_USER_AGENTS.some(a => userAgent.match(a))
|
||||
}
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
import { type WidgetLayout } from "$lib/stores/layoutStates";
|
||||
import { get, writable, type Writable } from "svelte/store";
|
||||
import { isDisabled } from "./utils"
|
||||
import { getSafetensorsMetadata } from '$lib/utils';
|
||||
export let widget: WidgetLayout | null = null;
|
||||
export let isMobile: boolean = false;
|
||||
let node: ComfyComboNode | null = null;
|
||||
@@ -73,26 +74,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
function onSelect(e: CustomEvent<any>) {
|
||||
if (input)
|
||||
input.blur();
|
||||
navigator.vibrate(20)
|
||||
|
||||
const item = e.detail
|
||||
|
||||
console.debug("[ComboWidget] SELECT", item, item.index)
|
||||
$nodeValue = item.value;
|
||||
activeIndex = item.index;
|
||||
listOpen = false;
|
||||
}
|
||||
|
||||
let activeIndex = null;
|
||||
let hoverItemIndex = null;
|
||||
let filterText = "";
|
||||
let listOpen = null;
|
||||
let scrollToIndex = null;
|
||||
let start = 0;
|
||||
let end = 0;
|
||||
|
||||
function handleHover(index: number) {
|
||||
// console.warn("HOV", index)
|
||||
@@ -107,7 +92,9 @@
|
||||
$nodeValue = item.value
|
||||
listOpen = false;
|
||||
filterText = ""
|
||||
input?.blur()
|
||||
setTimeout(() => {
|
||||
input?.blur();
|
||||
}, 100)
|
||||
}
|
||||
|
||||
function onFilter() {
|
||||
@@ -173,7 +160,10 @@
|
||||
on:select={(e) => handleSelect(e.detail.index)}
|
||||
on:blur
|
||||
on:filter={onFilter}>
|
||||
<div class="comfy-select-list" slot="list" let:filteredItems style:--maxLabelWidth={node.maxLabelWidthChars || 100}>
|
||||
<div class="comfy-select-list" slot="list"
|
||||
class:mobile={isMobile}
|
||||
let:filteredItems
|
||||
style:--maxLabelWidth={node.maxLabelWidthChars || 100}>
|
||||
{#if filteredItems.length > 0}
|
||||
{@const itemSize = isMobile ? 50 : 25}
|
||||
{@const itemsToShow = isMobile ? 10 : 30}
|
||||
@@ -291,9 +281,14 @@
|
||||
|
||||
.comfy-select-list {
|
||||
--maxLabelWidth: 100;
|
||||
--maxListWidth: 50vw;
|
||||
&.mobile {
|
||||
--maxListWidth: 80vw;
|
||||
}
|
||||
|
||||
font-size: 14px;
|
||||
width: min(calc((var(--maxLabelWidth) + 10) * 1ch), 50vw);
|
||||
color: var(--item-color);
|
||||
width: min(calc((var(--maxLabelWidth) + 10) * 1ch), var(--maxListWidth));
|
||||
|
||||
> :global(.virtual-list-wrapper) {
|
||||
box-shadow: var(--block-shadow);
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
import { clamp, comfyBoxImageToComfyURL, type ComfyBoxImageMetadata } from "$lib/utils";
|
||||
import { f7 } from "framework7-svelte";
|
||||
import type { ComfyGalleryNode } from "$lib/nodes/widgets";
|
||||
import { showMobileLightbox } from "$lib/components/utils";
|
||||
|
||||
export let widget: WidgetLayout | null = null;
|
||||
export let isMobile: boolean = false;
|
||||
@@ -47,19 +48,8 @@
|
||||
object_fit: "cover",
|
||||
// preview: true
|
||||
}
|
||||
let element: HTMLDivElement;
|
||||
|
||||
let mobileLightbox = null;
|
||||
|
||||
function showMobileLightbox(source: HTMLImageElement) {
|
||||
if (!f7)
|
||||
return
|
||||
|
||||
if (mobileLightbox) {
|
||||
mobileLightbox.destroy();
|
||||
mobileLightbox = null;
|
||||
}
|
||||
|
||||
function showMobileLightbox_(source: HTMLImageElement, selectedImage: number) {
|
||||
const galleryElem = source.closest<HTMLDivElement>("div.block")
|
||||
console.debug("[ImageViewer] showModal", source, galleryElem);
|
||||
if (!galleryElem || ImageViewer.all_gallery_buttons(galleryElem).length === 0) {
|
||||
@@ -72,23 +62,16 @@
|
||||
const images = allGalleryButtons.map(button => {
|
||||
return {
|
||||
url: (button.children[0] as HTMLImageElement).src,
|
||||
caption: "Image"
|
||||
// caption: "Image"
|
||||
}
|
||||
})
|
||||
|
||||
history.pushState({ type: "gallery" }, "");
|
||||
|
||||
mobileLightbox = f7.photoBrowser.create({
|
||||
photos: images,
|
||||
thumbs: images.map(i => i.url),
|
||||
type: 'popup',
|
||||
});
|
||||
mobileLightbox.open($selected_image)
|
||||
showMobileLightbox(images, selectedImage, { thumbs: images });
|
||||
}
|
||||
|
||||
function onClicked(e: CustomEvent<HTMLImageElement>) {
|
||||
if (isMobile) {
|
||||
showMobileLightbox(e.detail)
|
||||
showMobileLightbox_(e.detail, $selected_image)
|
||||
}
|
||||
else {
|
||||
ImageViewer.instance.showLightbox(e.detail)
|
||||
@@ -103,7 +86,7 @@
|
||||
|
||||
{#if widget && node && nodeValue && $nodeValue}
|
||||
{#if widget.attrs.variant === "image"}
|
||||
<div class="wrapper comfy-image-widget" style={widget.attrs.style || ""} bind:this={element}>
|
||||
<div class="wrapper comfy-image-widget" style={widget.attrs.style || ""}>
|
||||
<Block variant="solid" padding={false}>
|
||||
{#if $nodeValue && $nodeValue.length > 0}
|
||||
{@const value = $nodeValue[$nodeValue.length-1]}
|
||||
@@ -122,7 +105,7 @@
|
||||
</div>
|
||||
{:else}
|
||||
{@const images = $nodeValue.map(comfyBoxImageToComfyURL)}
|
||||
<div class="wrapper comfy-gallery-widget gradio-gallery" style={widget.attrs.style || ""} bind:this={element}>
|
||||
<div class="wrapper comfy-gallery-widget gradio-gallery" style={widget.attrs.style || ""}>
|
||||
<Block variant="solid" padding={false}>
|
||||
<div class="padding">
|
||||
<Gallery
|
||||
|
||||
@@ -52,12 +52,19 @@
|
||||
};
|
||||
|
||||
let hasImage = false;
|
||||
|
||||
$: hasImage = $nodeValue && $nodeValue.length > 0;
|
||||
$: if (!hasImage) {
|
||||
editMask = false;
|
||||
}
|
||||
|
||||
let mask: ComfyImageLocation | null;
|
||||
$: if (hasImage && canMask) {
|
||||
mask = $nodeValue[0].children?.find(i => i.tags.includes("mask"))?.comfyUIFile;
|
||||
}
|
||||
else {
|
||||
mask = null;
|
||||
}
|
||||
|
||||
const MASK_FILENAME: string = "ComfyBoxMask.png"
|
||||
|
||||
async function onMaskReleased(e: CustomEvent<MaskCanvasData>) {
|
||||
@@ -122,6 +129,7 @@
|
||||
// TODO other child image types preserved here?
|
||||
image.children = [];
|
||||
}
|
||||
mask = null;
|
||||
if (maskCanvasComp) {
|
||||
maskCanvasComp.clearStrokes();
|
||||
}
|
||||
@@ -232,6 +240,7 @@
|
||||
<ImageUpload value={_value}
|
||||
bind:imgWidth={$imgWidth}
|
||||
bind:imgHeight={$imgHeight}
|
||||
{mask}
|
||||
fileCount={"single"}
|
||||
elem_classes={[]}
|
||||
style={""}
|
||||
|
||||
233
src/lib/widgets/MarkdownWidget.svelte
Normal file
233
src/lib/widgets/MarkdownWidget.svelte
Normal file
@@ -0,0 +1,233 @@
|
||||
<script lang="ts">
|
||||
import { type WidgetLayout } from "$lib/stores/layoutStates";
|
||||
import { get, type Writable, writable } from "svelte/store";
|
||||
import { Block } from "@gradio/atoms";
|
||||
import type { ComfyMarkdownNode } from "$lib/nodes/widgets";
|
||||
import SvelteMarkdown from "@dogagenc/svelte-markdown"
|
||||
import NullMarkdownRenderer from "./markdown/NullMarkdownRenderer.svelte"
|
||||
import { SvelteComponentDev } from "svelte/internal";
|
||||
|
||||
export let widget: WidgetLayout | null = null;
|
||||
export let isMobile: boolean = false;
|
||||
|
||||
let node: ComfyMarkdownNode | null = null;
|
||||
let nodeValue: Writable<string> = writable("");
|
||||
let attrsChanged: Writable<number> = writable(0);
|
||||
|
||||
let renderers: Record<string, typeof SvelteComponentDev> = {
|
||||
"html": NullMarkdownRenderer
|
||||
}
|
||||
|
||||
$: widget && setNodeValue(widget);
|
||||
|
||||
function setNodeValue(widget: WidgetLayout) {
|
||||
if (widget) {
|
||||
node = widget.node as ComfyMarkdownNode
|
||||
nodeValue = node.value;
|
||||
attrsChanged = widget.attrsChanged;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="wrapper prose">
|
||||
{#key $attrsChanged}
|
||||
{#if widget !== null && node !== null}
|
||||
<Block>
|
||||
<SvelteMarkdown source={$nodeValue} {renderers} />
|
||||
</Block>
|
||||
{/if}
|
||||
{/key}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.wrapper {
|
||||
padding: 2px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
:global(> button) {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:global(> .block) {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.prose {
|
||||
font-weight: var(--prose-text-weight);
|
||||
font-size: var(--text-md);
|
||||
}
|
||||
|
||||
.prose * {
|
||||
color: var(--body-text-color);
|
||||
}
|
||||
|
||||
.prose p {
|
||||
margin-bottom: var(--spacing-sm);
|
||||
line-height: var(--line-lg);
|
||||
}
|
||||
|
||||
/* headings
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
.prose h1,
|
||||
.prose h2,
|
||||
.prose h3,
|
||||
.prose h4,
|
||||
.prose h5 {
|
||||
margin: var(--spacing-xxl) 0 var(--spacing-lg);
|
||||
font-weight: var(--prose-header-text-weight);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.prose > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.prose h1 {
|
||||
margin-top: 0;
|
||||
font-size: var(--text-xxl);
|
||||
}
|
||||
|
||||
.prose h2 {
|
||||
font-size: var(--text-xl);
|
||||
}
|
||||
|
||||
.prose h3 {
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
|
||||
.prose h4 {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.prose h5 {
|
||||
font-size: 1.05em;
|
||||
}
|
||||
|
||||
/* lists
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
.prose ul {
|
||||
list-style: circle inside;
|
||||
}
|
||||
.prose ol {
|
||||
list-style: decimal inside;
|
||||
}
|
||||
|
||||
.prose ul > p,
|
||||
.prose li > p {
|
||||
display: inline-block;
|
||||
}
|
||||
.prose ol,
|
||||
.prose ul {
|
||||
margin-top: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.prose ul ul,
|
||||
.prose ul ol,
|
||||
.prose ol ol,
|
||||
.prose ol ul {
|
||||
margin: 0.5em 0 0.5em 3em;
|
||||
font-size: 90%;
|
||||
}
|
||||
.prose li {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
/* code
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
.prose code {
|
||||
border: 1px solid var(--border-color-primary);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--background-fill-secondary);
|
||||
padding: 1px 3px;
|
||||
font-size: 85%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.prose pre > code {
|
||||
display: block;
|
||||
padding: 0.5em 0.7em;
|
||||
/* font-size: 100%; */
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
/* tables
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
.prose th,
|
||||
.prose td {
|
||||
border-bottom: 1px solid #e1e1e1;
|
||||
padding: 12px 15px;
|
||||
text-align: left;
|
||||
}
|
||||
.prose th:first-child,
|
||||
.prose td:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
.prose th:last-child,
|
||||
.prose td:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
/* spacing
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
.prose button,
|
||||
.prose .button {
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
.prose input,
|
||||
.prose textarea,
|
||||
.prose select,
|
||||
.prose fieldset {
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
.prose pre,
|
||||
.prose blockquote,
|
||||
.prose dl,
|
||||
.prose figure,
|
||||
.prose table,
|
||||
.prose p,
|
||||
.prose ul,
|
||||
.prose ol,
|
||||
.prose form {
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
/* links
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
.prose a {
|
||||
color: var(--link-text-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.prose a:visited {
|
||||
color: var(--link-text-color-visited);
|
||||
}
|
||||
|
||||
.prose a:hover {
|
||||
color: var(--link-text-color-hover);
|
||||
}
|
||||
.prose a:active {
|
||||
color: var(--link-text-color-active);
|
||||
}
|
||||
|
||||
/* misc
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
.prose hr {
|
||||
margin-top: 3em;
|
||||
margin-bottom: 3.5em;
|
||||
border-width: 0;
|
||||
border-top: 1px solid #e1e1e1;
|
||||
}
|
||||
|
||||
.prose blockquote {
|
||||
margin: var(--size-6) 0 !important;
|
||||
border-left: 5px solid var(--border-color-primary);
|
||||
padding-left: var(--size-2);
|
||||
}
|
||||
|
||||
.prose :last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
</style>
|
||||
7
src/lib/widgets/markdown/NullMarkdownRenderer.svelte
Normal file
7
src/lib/widgets/markdown/NullMarkdownRenderer.svelte
Normal file
@@ -0,0 +1,7 @@
|
||||
<script>
|
||||
export let href = "";
|
||||
export let title = undefined;
|
||||
export let text = "";
|
||||
</script>
|
||||
|
||||
<div/>
|
||||
@@ -1,3 +1,15 @@
|
||||
import { isMobileBrowser } from "$lib/utils"
|
||||
|
||||
const isMobile = isMobileBrowser(navigator.userAgent);
|
||||
|
||||
const params = new URLSearchParams(window.location.search)
|
||||
if (params.get("desktop") !== "true") {
|
||||
if (isMobile) {
|
||||
window.location.href = "/mobile/"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Run node registration before anthing else, in the proper order
|
||||
import "$lib/nodeImports";
|
||||
|
||||
@@ -12,7 +24,7 @@ const comfyApp = new ComfyApp();
|
||||
|
||||
const app = new App({
|
||||
target: document.getElementById("app-root"),
|
||||
props: { app: comfyApp }
|
||||
props: { app: comfyApp, isMobile }
|
||||
})
|
||||
|
||||
export default app;
|
||||
|
||||
@@ -1,19 +1,11 @@
|
||||
<script lang="ts">
|
||||
import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
|
||||
import queueState from "$lib/stores/queueState";
|
||||
import workflowState, { ComfyBoxWorkflow } from "$lib/stores/workflowState";
|
||||
import { getNodeInfo } from "$lib/utils"
|
||||
|
||||
import { Link, Toolbar } from "framework7-svelte"
|
||||
import ProgressBar from "$lib/components/ProgressBar.svelte";
|
||||
import Indicator from "./Indicator.svelte";
|
||||
import interfaceState from "$lib/stores/interfaceState";
|
||||
import type { WritableLayoutStateStore } from "$lib/stores/layoutStates";
|
||||
|
||||
export let subworkflowID: number = -1;
|
||||
export let app: ComfyApp = undefined;
|
||||
let layoutState: WritableLayoutStateStore = null;
|
||||
let fileInput: HTMLInputElement = undefined;
|
||||
let workflow: ComfyBoxWorkflow | null = null;
|
||||
|
||||
$: workflow = $workflowState.activeWorkflow;
|
||||
@@ -22,111 +14,28 @@
|
||||
navigator.vibrate(20)
|
||||
app.runDefaultQueueAction()
|
||||
}
|
||||
|
||||
async function refreshCombos() {
|
||||
navigator.vibrate(20)
|
||||
await app.refreshComboInNodes()
|
||||
}
|
||||
|
||||
function doSave(): void {
|
||||
if (!fileInput)
|
||||
return;
|
||||
|
||||
navigator.vibrate(20)
|
||||
app.querySave()
|
||||
}
|
||||
|
||||
function doLoad(): void {
|
||||
if (!fileInput)
|
||||
return;
|
||||
|
||||
navigator.vibrate(20)
|
||||
fileInput.value = null;
|
||||
fileInput.click();
|
||||
}
|
||||
|
||||
function loadWorkflow(): void {
|
||||
app.handleFile(fileInput.files[0]);
|
||||
}
|
||||
|
||||
function doSaveLocal(): void {
|
||||
navigator.vibrate(20)
|
||||
app.saveStateToLocalStorage();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="bottom">
|
||||
{#if $queueState.runningNodeID || $queueState.progress}
|
||||
<div class="node-name">
|
||||
<span>Node: {getNodeInfo($queueState.runningNodeID)}</span>
|
||||
</div>
|
||||
<div class="progress-bar">
|
||||
<ProgressBar value={$queueState.progress?.value} max={$queueState.progress?.max} />
|
||||
</div>
|
||||
{/if}
|
||||
{#if typeof $queueState.queueRemaining === "number" && $queueState.queueRemaining > 0}
|
||||
<div class="queue-remaining in-progress">
|
||||
<div>
|
||||
Queued prompts: {$queueState.queueRemaining}.
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<Toolbar bottom>
|
||||
<Toolbar bottom color="red" style="bottom: calc(var(--f7-toolbar-height))">
|
||||
{#if workflow != null && workflow.attrs.queuePromptButtonName != ""}
|
||||
<Link on:click={queuePrompt}>
|
||||
{workflow.attrs.queuePromptButtonName}
|
||||
</Link>
|
||||
<div style:width="100%">
|
||||
<Link on:click={queuePrompt}>
|
||||
{workflow.attrs.queuePromptButtonName}
|
||||
</Link>
|
||||
</div>
|
||||
{/if}
|
||||
<Link on:click={refreshCombos}>🔄</Link>
|
||||
<Link on:click={doSave}>Save</Link>
|
||||
<Link on:click={doSaveLocal}>Save Local</Link>
|
||||
<Link on:click={doLoad}>Load</Link>
|
||||
<input bind:this={fileInput} id="comfy-file-input" type="file" accept=".json" on:change={loadWorkflow} />
|
||||
</Toolbar>
|
||||
{#if $interfaceState.showIndicator}
|
||||
<Indicator value={$interfaceState.indicatorValue} />
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
#comfy-file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
|
||||
z-index: var(--layer-top);
|
||||
background-color: grey;
|
||||
:global(.toolbar) {
|
||||
--f7-toolbar-font-size: 13pt;
|
||||
}
|
||||
|
||||
.node-name {
|
||||
flex-grow: 1;
|
||||
background-color: var(--color-red-300);
|
||||
padding: 0.2em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
flex-grow: 10;
|
||||
background-color: var(--color-red-300);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.queue-remaining {
|
||||
flex-grow: 1;
|
||||
padding: 0.2em;
|
||||
&.in-progress {
|
||||
background-color: var(--secondary-300);
|
||||
}
|
||||
}
|
||||
:global(.dark .toolbar.color-red) {
|
||||
background: var(--neutral-700) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
198
src/mobile/MainToolbar.svelte
Normal file
198
src/mobile/MainToolbar.svelte
Normal file
@@ -0,0 +1,198 @@
|
||||
<script lang="ts">
|
||||
import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
|
||||
import queueState from "$lib/stores/queueState";
|
||||
import workflowState, { ComfyBoxWorkflow } from "$lib/stores/workflowState";
|
||||
import { getNodeInfo } from "$lib/utils"
|
||||
import { LayoutTextSidebarReverse, Image, Grid } from "svelte-bootstrap-icons";
|
||||
|
||||
import { Link, Toolbar } from "framework7-svelte"
|
||||
import ProgressBar from "$lib/components/ProgressBar.svelte";
|
||||
import Progressbar from "$lib/components/f7/progressbar.svelte";
|
||||
import Indicator from "./Indicator.svelte";
|
||||
import interfaceState from "$lib/stores/interfaceState";
|
||||
import type { WritableLayoutStateStore } from "$lib/stores/layoutStates";
|
||||
|
||||
export let subworkflowID: number = -1;
|
||||
export let app: ComfyApp = undefined;
|
||||
let layoutState: WritableLayoutStateStore = null;
|
||||
let fileInput: HTMLInputElement = undefined;
|
||||
let workflow: ComfyBoxWorkflow | null = null;
|
||||
|
||||
$: workflow = $workflowState.activeWorkflow;
|
||||
|
||||
function queuePrompt() {
|
||||
navigator.vibrate(20)
|
||||
app.runDefaultQueueAction()
|
||||
}
|
||||
|
||||
async function refreshCombos() {
|
||||
navigator.vibrate(20)
|
||||
await app.refreshComboInNodes()
|
||||
}
|
||||
|
||||
function doSave(): void {
|
||||
if (!fileInput)
|
||||
return;
|
||||
|
||||
navigator.vibrate(20)
|
||||
app.querySave()
|
||||
}
|
||||
|
||||
function doLoad(): void {
|
||||
if (!fileInput)
|
||||
return;
|
||||
|
||||
navigator.vibrate(20)
|
||||
fileInput.value = null;
|
||||
fileInput.click();
|
||||
}
|
||||
|
||||
function loadWorkflow(): void {
|
||||
app.handleFile(fileInput.files[0]);
|
||||
}
|
||||
|
||||
function doSaveLocal(): void {
|
||||
navigator.vibrate(20)
|
||||
app.saveStateToLocalStorage();
|
||||
}
|
||||
|
||||
let queued: false;
|
||||
$: queued = Boolean($queueState.runningNodeID || $queueState.progress)
|
||||
|
||||
let running = false;
|
||||
$: running = typeof $queueState.queueRemaining === "number" && $queueState.queueRemaining > 0;
|
||||
|
||||
let progress;
|
||||
$: progress = $queueState.progress
|
||||
|
||||
let progressPercent = 0
|
||||
let progressText = ""
|
||||
$: if (progress) {
|
||||
progressPercent = (progress.value / progress.max) * 100;
|
||||
progressText = progressPercent.toFixed(1) + "%";
|
||||
} else {
|
||||
progressPercent = 0
|
||||
progressText = "??.?%"
|
||||
}
|
||||
|
||||
let centerHref = "/workflows/"
|
||||
$: if ($interfaceState.selectedWorkflowIndex && !$interfaceState.showingWorkflow) {
|
||||
centerHref = `/workflows/${$interfaceState.selectedWorkflowIndex}/`
|
||||
}
|
||||
else {
|
||||
centerHref = "/workflows/";
|
||||
}
|
||||
|
||||
let toolbarCount = 0;
|
||||
$: toolbarCount = $interfaceState.showingWorkflow ? 2 : 1;
|
||||
|
||||
const ICON_SIZE = "1.5rem";
|
||||
|
||||
let selectedTab = 1;
|
||||
</script>
|
||||
|
||||
<div class="bottom" style:--toolbarCount={toolbarCount}>
|
||||
<div class="bars">
|
||||
{#if queued}
|
||||
<div class="node-name">
|
||||
<span>Node: {getNodeInfo($queueState.runningNodeID)} ({progressText})</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
{#if queued}
|
||||
{#if progress}
|
||||
<Progressbar color="blue" progress={progressPercent} />
|
||||
{:else if running}
|
||||
<Progressbar color="blue" infinite />
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<Toolbar bottom tabbar color="blue" class={toolbarCount > 1 ? "hasGenToolbar" : ""}>
|
||||
<Link transition="f7-dive" href="/queue/" tabLinkActive={$interfaceState.selectedTab === 0}>
|
||||
<LayoutTextSidebarReverse width={ICON_SIZE} height={ICON_SIZE} />
|
||||
</Link>
|
||||
<Link transition="f7-dive" href={centerHref} tabLinkActive={$interfaceState.selectedTab === 1}>
|
||||
<Image width={ICON_SIZE} height={ICON_SIZE} />
|
||||
</Link>
|
||||
<Link transition="f7-dive" href="/gallery/" tabLinkActive={$interfaceState.selectedTab === 2}>
|
||||
<Grid width={ICON_SIZE} height={ICON_SIZE} />
|
||||
</Link>
|
||||
</Toolbar>
|
||||
{#if $interfaceState.showIndicator}
|
||||
<Indicator value={$interfaceState.indicatorValue} />
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
#comfy-file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:global(.progressbar.color-blue) {
|
||||
background: var(--neutral-400) !important;
|
||||
}
|
||||
|
||||
:global(.dark .progressbar.color-blue) {
|
||||
background: var(--neutral-500) !important;
|
||||
}
|
||||
|
||||
:global(.dark .toolbar.color-blue) {
|
||||
background: var(--neutral-800) !important;
|
||||
}
|
||||
|
||||
:global(.dark .toolbar.color-blue.hasGenToolbar) {
|
||||
border-top: 2px solid var(--neutral-600);
|
||||
}
|
||||
|
||||
:global(.dark .tab-link-active) {
|
||||
--f7-tabbar-link-active-color: var(--secondary-500);
|
||||
--f7-tabbar-link-active-bg-color: #283547;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
--toolbarCount: 1;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-size: 13pt;
|
||||
bottom: calc(var(--f7-toolbar-height) * var(--toolbarCount));
|
||||
z-index: var(--layer-top);
|
||||
}
|
||||
|
||||
.bars {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.bars {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.node-name {
|
||||
flex-grow: 1;
|
||||
background-color: var(--comfy-node-name-background);
|
||||
color: var(--comfy-node-name-foreground);
|
||||
padding: 0.2em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
flex-grow: 10;
|
||||
background-color: var(--color-red-300);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.queue-remaining {
|
||||
flex-grow: 1;
|
||||
padding: 0.2em;
|
||||
&.in-progress {
|
||||
background-color: var(--secondary-300);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
120
src/mobile/routes/gallery.svelte
Normal file
120
src/mobile/routes/gallery.svelte
Normal file
@@ -0,0 +1,120 @@
|
||||
<script lang="ts">
|
||||
import { Page, Navbar, Block, Tabs, Tab, NavLeft, NavTitle, NavRight, Link, f7 } from "framework7-svelte"
|
||||
import WidgetContainer from "$lib/components/WidgetContainer.svelte";
|
||||
import type ComfyApp from "$lib/components/ComfyApp";
|
||||
import { writable, type Writable } from "svelte/store";
|
||||
import type { IDragItem, WritableLayoutStateStore } from "$lib/stores/layoutStates";
|
||||
import workflowState, { type ComfyBoxWorkflow, type WorkflowInstID } from "$lib/stores/workflowState";
|
||||
import interfaceState from "$lib/stores/interfaceState";
|
||||
import { onMount } from "svelte";
|
||||
import GenToolbar from '../GenToolbar.svelte'
|
||||
import { partition, showLightbox } from "$lib/utils";
|
||||
import uiQueueState, { type QueueUIEntry } from "$lib/stores/uiQueueState";
|
||||
import { showMobileLightbox } from "$lib/components/utils";
|
||||
import notify from "$lib/notify";
|
||||
|
||||
export let app: ComfyApp
|
||||
|
||||
let _entries: ReadonlyArray<QueueUIEntry> = []
|
||||
$: _entries = $uiQueueState.historyUIEntries;
|
||||
|
||||
let allEntries: [QueueUIEntry, string][][] = []
|
||||
let allImages: string[] = []
|
||||
|
||||
let gridCols = 3;
|
||||
|
||||
function onPageBeforeIn() {
|
||||
$interfaceState.selectedTab = 2;
|
||||
}
|
||||
|
||||
$: buildImageList(_entries);
|
||||
|
||||
function buildImageList(entries: ReadonlyArray<QueueUIEntry>) {
|
||||
const _allEntries = []
|
||||
for (const entry of entries) {
|
||||
for (const image of entry.images) {
|
||||
_allEntries.push([entry, image]);
|
||||
}
|
||||
}
|
||||
allEntries = partition(_allEntries, gridCols);
|
||||
allImages = _allEntries.map(p => p[1]);
|
||||
}
|
||||
|
||||
function handleClick(e: MouseEvent, entry: QueueUIEntry, index: number) {
|
||||
showMobileLightbox(allImages, index)
|
||||
}
|
||||
|
||||
async function clearHistory() {
|
||||
f7.dialog.confirm("Are you sure you want to clear the current history?", async () => {
|
||||
await app.clearQueue("history");
|
||||
uiQueueState.updateEntries(true)
|
||||
notify("History cleared!")
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<Page name="gallery" on:pageBeforeIn={onPageBeforeIn}>
|
||||
<Navbar>
|
||||
<NavLeft></NavLeft>
|
||||
<NavTitle>Gallery</NavTitle>
|
||||
<NavRight>
|
||||
<Link on:click={clearHistory}>🗑️</Link>
|
||||
</NavRight>
|
||||
</Navbar>
|
||||
|
||||
<Block>
|
||||
{#each allEntries as group, i}
|
||||
<div class="grid grid-cols-{gridCols} grid-gap">
|
||||
{#each group as [entry, image], j}
|
||||
{@const index = i * gridCols + j}
|
||||
<div class="grid-entry">
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<img class="grid-entry-image"
|
||||
on:click={(e) => handleClick(e, entry, index)}
|
||||
src={image}
|
||||
loading="lazy"
|
||||
alt="thumbnail" />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</Block>
|
||||
</Page>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
overflow-x: hidden;
|
||||
|
||||
// Disable pull to refresh
|
||||
overscroll-behavior-y: contain;
|
||||
|
||||
// framework7's css conflicts with gradio's
|
||||
:global(.block) {
|
||||
z-index: unset; // f7 sets it to 1
|
||||
}
|
||||
}
|
||||
|
||||
// TODO generalize this to all properties!
|
||||
:global(.root-container.mobile > .block > .v-pane) {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
.grid-entry {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
aspect-ratio: 1 / 1;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.grid-entry-image {
|
||||
aspect-ratio: 1 / 1;
|
||||
object-fit: cover;
|
||||
margin-bottom: var(--f7-grid-gap);
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
filter: brightness(120%) contrast(120%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,35 +0,0 @@
|
||||
<script lang="ts">
|
||||
import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
|
||||
|
||||
import { Page, Navbar, Button, BlockTitle, Block, List, ListItem } from "framework7-svelte"
|
||||
|
||||
export let app: ComfyApp | null = null;
|
||||
|
||||
async function doLoadDefault() {
|
||||
var confirmed = confirm("Would you like to load the default workflow in a new tab?");
|
||||
if (confirmed) {
|
||||
await app.initDefaultWorkflow();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<Page name="home">
|
||||
<Navbar title="Home Page" />
|
||||
|
||||
<BlockTitle>Yo</BlockTitle>
|
||||
<Block>
|
||||
<div>{app} Nodes</div>
|
||||
</Block>
|
||||
|
||||
<List strong inset dividersIos class="components-list searchbar-found">
|
||||
<ListItem link="/subworkflows/" title="Workflows">
|
||||
<i class="icon icon-f7" slot="media" />
|
||||
</ListItem>
|
||||
<ListItem link="/graph/" title="Show Node Graph">
|
||||
<i class="icon icon-f7" slot="media" />
|
||||
</ListItem>
|
||||
</List>
|
||||
<Block strong outlineIos>
|
||||
<Button fill={true} onClick={doLoadDefault}>Load Default Graph</Button>
|
||||
</Block>
|
||||
</Page>
|
||||
@@ -1,16 +0,0 @@
|
||||
<script lang="ts">
|
||||
import ComfyApp from "$lib/components/ComfyApp";
|
||||
import { Page, Navbar, Link, BlockTitle, Block, List, ListItem } from "framework7-svelte"
|
||||
|
||||
export let app: ComfyApp;
|
||||
</script>
|
||||
|
||||
<Page name="subworkflows">
|
||||
<Navbar title="Workflows" backLink="Back" />
|
||||
|
||||
<List strong inset dividersIos class="components-list searchbar-found">
|
||||
<ListItem link="/subworkflows/{1}/" title="Workflow 1">
|
||||
<i class="icon icon-f7" slot="media" />
|
||||
</ListItem>
|
||||
</List>
|
||||
</Page>
|
||||
155
src/mobile/routes/queue.svelte
Normal file
155
src/mobile/routes/queue.svelte
Normal file
@@ -0,0 +1,155 @@
|
||||
<script lang="ts">
|
||||
import { Page, Navbar, Block, Tabs, Tab, NavLeft, NavTitle, NavRight, Link, List, ListItem, Card, CardHeader, CardContent, CardFooter, f7 } from "framework7-svelte"
|
||||
import WidgetContainer from "$lib/components/WidgetContainer.svelte";
|
||||
import type ComfyApp from "$lib/components/ComfyApp";
|
||||
import { writable, type Writable } from "svelte/store";
|
||||
import type { IDragItem, WritableLayoutStateStore } from "$lib/stores/layoutStates";
|
||||
import workflowState, { type ComfyBoxWorkflow, type WorkflowInstID } from "$lib/stores/workflowState";
|
||||
import interfaceState from "$lib/stores/interfaceState";
|
||||
import { onMount } from "svelte";
|
||||
import GenToolbar from '../GenToolbar.svelte'
|
||||
import { partition, showLightbox, truncateString } from "$lib/utils";
|
||||
import uiQueueState, { type QueueUIEntry } from "$lib/stores/uiQueueState";
|
||||
import { showMobileLightbox } from "$lib/components/utils";
|
||||
import queueState from "$lib/stores/queueState";
|
||||
import notify from "$lib/notify";
|
||||
|
||||
export let app: ComfyApp
|
||||
|
||||
let _entries: ReadonlyArray<QueueUIEntry> = []
|
||||
$: _entries = $uiQueueState.queueUIEntries;
|
||||
|
||||
function onPageBeforeIn() {
|
||||
$interfaceState.selectedTab = 0;
|
||||
}
|
||||
|
||||
async function interrupt() {
|
||||
await app.interrupt();
|
||||
}
|
||||
|
||||
async function clearQueue() {
|
||||
f7.dialog.confirm("Are you sure you want to clear the current queue?", async () => {
|
||||
await app.clearQueue("queue");
|
||||
uiQueueState.updateEntries(true)
|
||||
notify("Queue cleared!")
|
||||
})
|
||||
}
|
||||
|
||||
function findPrompt(entry: QueueUIEntry): string {
|
||||
let s = ""
|
||||
for (const inputs of Object.values(entry.entry.prompt)) {
|
||||
if (inputs.class_type === "CLIPTextEncode") {
|
||||
for (const [key, value] of Object.entries(inputs.inputs)) {
|
||||
if (key === "text") {
|
||||
s += value + "\n"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return truncateString(s, 240);
|
||||
}
|
||||
|
||||
async function doCancel(entry: QueueUIEntry) {
|
||||
if ($queueState.isInterrupting) {
|
||||
return;
|
||||
}
|
||||
|
||||
// TODO support interrupting from multiple running items!
|
||||
if (entry.status === "running") {
|
||||
await app.interrupt();
|
||||
}
|
||||
else {
|
||||
await app.deleteQueueItem("queue", entry.entry.promptID);
|
||||
}
|
||||
|
||||
notify("Queue item canceled.")
|
||||
uiQueueState.updateEntries(true)
|
||||
}
|
||||
|
||||
function getCardImage(entry: QueueUIEntry): string {
|
||||
if (entry.images.length > 0)
|
||||
return entry.images[0]
|
||||
return "https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg"
|
||||
}
|
||||
</script>
|
||||
|
||||
<Page name="queue" on:pageBeforeIn={onPageBeforeIn}>
|
||||
<Navbar>
|
||||
<NavLeft></NavLeft>
|
||||
<NavTitle>Queue</NavTitle>
|
||||
<NavRight>
|
||||
<Link on:click={interrupt}>🛑️</Link>
|
||||
<Link on:click={clearQueue}>🗑️</Link>
|
||||
</NavRight>
|
||||
</Navbar>
|
||||
|
||||
<Block>
|
||||
<List>
|
||||
{#each _entries as entry, i}
|
||||
{@const prompt = findPrompt(entry)}
|
||||
<ListItem>
|
||||
<Card outlineMd class="demo-card-header-pic">
|
||||
<CardHeader valign="bottom"
|
||||
style="background-image: url({getCardImage(entry)})">
|
||||
{entry.message}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p class="list-entry-message">{entry.submessage}</p>
|
||||
<p>
|
||||
{prompt}
|
||||
</p>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Link on:click={() => doCancel(entry)}>Cancel</Link>
|
||||
{#if entry.date}
|
||||
<p>{entry.date}</p>
|
||||
{/if}
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</ListItem>
|
||||
{/each}
|
||||
</List>
|
||||
</Block>
|
||||
</Page>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
overflow-x: hidden;
|
||||
|
||||
// Disable pull to refresh
|
||||
overscroll-behavior-y: contain;
|
||||
|
||||
// framework7's css conflicts with gradio's
|
||||
:global(.block) {
|
||||
z-index: unset; // f7 sets it to 1
|
||||
}
|
||||
}
|
||||
|
||||
// TODO generalize this to all properties!
|
||||
:global(.root-container.mobile > .block > .v-pane) {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
.grid-entry {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
aspect-ratio: 1 / 1;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.grid-entry-image {
|
||||
aspect-ratio: 1 / 1;
|
||||
object-fit: cover;
|
||||
margin-bottom: var(--f7-grid-gap);
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
filter: brightness(120%) contrast(120%);
|
||||
}
|
||||
}
|
||||
|
||||
.list-entry-message {
|
||||
font-size: 15pt;
|
||||
}
|
||||
</style>
|
||||
@@ -1,47 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Page, Navbar, Link, BlockTitle, Block, List, ListItem, Toolbar } from "framework7-svelte"
|
||||
import WidgetContainer from "$lib/components/WidgetContainer.svelte";
|
||||
import type ComfyApp from "$lib/components/ComfyApp";
|
||||
import { writable, type Writable } from "svelte/store";
|
||||
import type { WritableLayoutStateStore } from "$lib/stores/layoutStates";
|
||||
import workflowState, { type ComfyBoxWorkflow } from "$lib/stores/workflowState";
|
||||
|
||||
export let subworkflowID: number = -1;
|
||||
export let app: ComfyApp
|
||||
|
||||
// TODO move
|
||||
let workflow: ComfyBoxWorkflow | null = null
|
||||
let layoutState: WritableLayoutStateStore | null = null;
|
||||
|
||||
$: workflow = $workflowState.activeWorkflow;
|
||||
$: layoutState = workflow ? workflow.layout : null;
|
||||
</script>
|
||||
|
||||
<Page name="subworkflow">
|
||||
<Navbar title="Workflow {subworkflowID}" backLink="Back" />
|
||||
|
||||
{#if layoutState}
|
||||
<div class="container">
|
||||
<WidgetContainer bind:dragItem={$layoutState.root} {layoutState} isMobile={true} classes={["root-container", "mobile"]} />
|
||||
</div>
|
||||
{/if}
|
||||
</Page>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
overflow-x: hidden;
|
||||
|
||||
// Disable pull to refresh
|
||||
overscroll-behavior-y: contain;
|
||||
|
||||
// framework7's css conflicts with gradio's
|
||||
:global(.block) {
|
||||
z-index: unset; // f7 sets it to 1
|
||||
}
|
||||
}
|
||||
|
||||
// TODO generalize this to all properties!
|
||||
:global(.root-container.mobile > .block > .v-pane) {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
</style>
|
||||
114
src/mobile/routes/workflow.svelte
Normal file
114
src/mobile/routes/workflow.svelte
Normal file
@@ -0,0 +1,114 @@
|
||||
<script lang="ts">
|
||||
import { Page, Navbar, Tabs, Tab, NavLeft, NavTitle, NavRight, Link, Actions, ActionsGroup, ActionsButton, ActionsLabel, Sheet, Toolbar, PageContent, Block } from "framework7-svelte"
|
||||
import WidgetContainer from "$lib/components/WidgetContainer.svelte";
|
||||
import type ComfyApp from "$lib/components/ComfyApp";
|
||||
import { writable, type Writable } from "svelte/store";
|
||||
import { MenuUp } from 'svelte-bootstrap-icons';
|
||||
import type { IDragItem, WritableLayoutStateStore } from "$lib/stores/layoutStates";
|
||||
import workflowState, { type ComfyBoxWorkflow, type WorkflowInstID } from "$lib/stores/workflowState";
|
||||
import interfaceState from "$lib/stores/interfaceState";
|
||||
import { onMount } from "svelte";
|
||||
import GenToolbar from '../GenToolbar.svelte'
|
||||
import { onDestroy } from "svelte";
|
||||
|
||||
export let workflowIndex: number;
|
||||
export let app: ComfyApp
|
||||
|
||||
let workflow: ComfyBoxWorkflow;
|
||||
let root: IDragItem | null;
|
||||
let title = ""
|
||||
let actionsOpened = false;
|
||||
|
||||
function onPageBeforeIn() {
|
||||
workflow = $workflowState.openedWorkflows[workflowIndex-1]
|
||||
if (workflow) {
|
||||
workflowState.setActiveWorkflow(app.lCanvas, workflow.id)
|
||||
}
|
||||
$interfaceState.selectedWorkflowIndex = workflowIndex
|
||||
$interfaceState.showingWorkflow = true;
|
||||
$interfaceState.selectedTab = 1;
|
||||
}
|
||||
|
||||
function onPageBeforeOut() {
|
||||
$interfaceState.showingWorkflow = false;
|
||||
}
|
||||
|
||||
async function refreshCombos() {
|
||||
navigator.vibrate(20)
|
||||
await app.refreshComboInNodes()
|
||||
}
|
||||
|
||||
function doSaveLocal(): void {
|
||||
navigator.vibrate(20)
|
||||
app.saveStateToLocalStorage();
|
||||
}
|
||||
|
||||
$: layoutState = workflow?.layout;
|
||||
$: title = workflow?.attrs?.title || `Workflow: ${workflow?.id || workflowIndex}`;
|
||||
|
||||
$: if (layoutState && $layoutState.root) {
|
||||
root = $layoutState.root
|
||||
} else {
|
||||
root = null;
|
||||
}
|
||||
</script>
|
||||
|
||||
<Page name="workflow" style="--f7-page-toolbar-bottom-offset: calc(var(--f7-toolbar-height) * 2)"
|
||||
on:pageBeforeIn={onPageBeforeIn}
|
||||
on:pageBeforeOut={onPageBeforeOut}
|
||||
>
|
||||
<Navbar>
|
||||
<NavLeft backLink="Back" backLinkUrl="/workflows/" backLinkForce={true}></NavLeft>
|
||||
<NavTitle>{title}</NavTitle>
|
||||
<NavRight>
|
||||
<Link icon="icon-bars" on:click={() => {actionsOpened = true;}}>
|
||||
<MenuUp />
|
||||
</Link>
|
||||
</NavRight>
|
||||
</Navbar>
|
||||
|
||||
{#if workflow}
|
||||
{#if root}
|
||||
<div class="container">
|
||||
<WidgetContainer bind:dragItem={root} isMobile={true} classes={["root-container"]} {layoutState} />
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<div>
|
||||
Workflow not found.
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<Actions bind:opened={actionsOpened}>
|
||||
<ActionsGroup>
|
||||
<ActionsLabel>Actions</ActionsLabel>
|
||||
<ActionsButton strong on:click={refreshCombos}>Refresh Dropdowns</ActionsButton>
|
||||
<ActionsButton strong on:click={doSaveLocal}>Save to Local Storage</ActionsButton>
|
||||
<!-- <ActionsButton>Button 2</ActionsButton> -->
|
||||
<ActionsButton color="red">Cancel</ActionsButton>
|
||||
</ActionsGroup>
|
||||
</Actions>
|
||||
</Page>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
overflow-x: hidden;
|
||||
|
||||
// Disable pull to refresh
|
||||
overscroll-behavior-y: contain;
|
||||
|
||||
// framework7's css conflicts with gradio's
|
||||
:global(.block) {
|
||||
z-index: unset; // f7 sets it to 1
|
||||
}
|
||||
}
|
||||
|
||||
// TODO generalize this to all properties!
|
||||
:global(.root-container.mobile > .block > .v-pane) {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
.demo-sheet-push {
|
||||
bottom: calc(var(--f7-toolbar-height) * 3);
|
||||
}
|
||||
</style>
|
||||
74
src/mobile/routes/workflows.svelte
Normal file
74
src/mobile/routes/workflows.svelte
Normal file
@@ -0,0 +1,74 @@
|
||||
<script lang="ts">
|
||||
import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
|
||||
import workflowState, { ComfyBoxWorkflow, type WorkflowInstID } from "$lib/stores/workflowState";
|
||||
import { onMount } from "svelte";
|
||||
import interfaceState from "$lib/stores/interfaceState";
|
||||
import { f7 } from 'framework7-svelte';
|
||||
import { XCircle } from 'svelte-bootstrap-icons';
|
||||
|
||||
import { Page, Navbar, Button, BlockTitle, Block, List, ListItem } from "framework7-svelte"
|
||||
|
||||
export let app: ComfyApp | null = null;
|
||||
let fileInput: HTMLInputElement = undefined;
|
||||
|
||||
async function doLoadDefault() {
|
||||
f7.dialog.confirm("Would you like to load the default workflow in a new tab?", async () => {
|
||||
await app.initDefaultWorkflow();
|
||||
app.saveStateToLocalStorage(false);
|
||||
})
|
||||
}
|
||||
|
||||
function onClickDelete(workflow: ComfyBoxWorkflow, e: Event) {
|
||||
e.preventDefault();
|
||||
e.stopImmediatePropagation();
|
||||
f7.dialog.confirm("Are you sure you want to delete this workflow?", workflow.attrs.title || `Workflow: ${workflow.id}`,
|
||||
() => {
|
||||
app.closeWorkflow(workflow.id);
|
||||
app.saveStateToLocalStorage(false);
|
||||
})}
|
||||
|
||||
function doLoad(): void {
|
||||
if (!fileInput)
|
||||
return;
|
||||
|
||||
navigator.vibrate(20)
|
||||
fileInput.value = null;
|
||||
fileInput.click();
|
||||
}
|
||||
|
||||
function loadWorkflow(): void {
|
||||
app.handleFile(fileInput.files[0]);
|
||||
}
|
||||
|
||||
function onPageBeforeIn() {
|
||||
$interfaceState.selectedWorkflowIndex = null;
|
||||
$interfaceState.selectedTab = 1;
|
||||
}
|
||||
</script>
|
||||
|
||||
<Page name="home" on:pageBeforeIn={onPageBeforeIn}>
|
||||
<Navbar title="Home Page" />
|
||||
|
||||
{#if $workflowState.openedWorkflows}
|
||||
<List strong inset dividersIos class="components-list searchbar-found">
|
||||
{#each $workflowState.openedWorkflows as workflow, i}
|
||||
<ListItem link="/workflows/{i+1}/" transition="f7-cover" title={workflow.attrs.title || `Workflow: ${workflow.id}`}>
|
||||
<svelte:fragment slot="media">
|
||||
<div on:pointerdown={(e) => onClickDelete(workflow, e)}>
|
||||
<XCircle width="1.5em" height="1.5em" />
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
</ListItem>
|
||||
{/each}
|
||||
</List>
|
||||
{:else}
|
||||
(No workflows opened.)
|
||||
{/if}
|
||||
<Block strong outlineIos>
|
||||
<p class="grid grid-cols-2 grid-gap">
|
||||
<Button outline onClick={doLoadDefault}>Load default graph</Button>
|
||||
<Button outline onClick={doLoad}>Load from file...</Button>
|
||||
</p>
|
||||
</Block>
|
||||
<input bind:this={fileInput} id="comfy-file-input" style:display="none" type="file" accept=".json" on:change={loadWorkflow} />
|
||||
</Page>
|
||||
@@ -41,7 +41,7 @@ body {
|
||||
--comfy-dropdown-item-background-active: var(--secondary-600);
|
||||
--comfy-progress-bar-background: var(--neutral-300);
|
||||
--comfy-progress-bar-foreground: var(--secondary-300);
|
||||
--comfy-node-name-background: var(--color-red-300);
|
||||
--comfy-node-name-background: var(--color-blue-200);
|
||||
--comfy-node-name-foreground: var(--body-text-color);
|
||||
--comfy-spinner-main-color: var(--neutral-400);
|
||||
--comfy-spinner-accent-color: var(--secondary-500);
|
||||
@@ -77,11 +77,9 @@ body {
|
||||
--comfy-node-name-foreground: var(--body-text-color);
|
||||
--comfy-spinner-main-color: var(--neutral-600);
|
||||
--comfy-spinner-accent-color: var(--secondary-600);
|
||||
}
|
||||
|
||||
.mobile {
|
||||
--comfy-progress-bar-background: lightgrey;
|
||||
--comfy-progress-bar-foreground: #B3D8A9
|
||||
--f7-navbar-color: var(--body-text-color);
|
||||
--f7-navbar-bg-color: var(--neutral-800);
|
||||
}
|
||||
|
||||
@mixin square-button {
|
||||
@@ -252,3 +250,15 @@ button {
|
||||
:global([data-is-dnd-shadow-item]) {
|
||||
min-height: 5rem;
|
||||
}
|
||||
|
||||
:global(.dark .photo-browser-popup) {
|
||||
background: var(--neutral-700);
|
||||
}
|
||||
|
||||
:global(.dark .photo-browser-popup-) {
|
||||
background: var(--neutral-700);
|
||||
}
|
||||
|
||||
:global(.photo-browser-exposed .toolbar ~ .toolbar.photo-browser-thumbs) {
|
||||
transform: translate3d(0, calc(var(--f7-toolbar-height) * 2), 0);
|
||||
}
|
||||
|
||||
@@ -55,6 +55,7 @@ export default defineConfig({
|
||||
},
|
||||
},
|
||||
build: {
|
||||
minify: isProduction,
|
||||
sourcemap: true,
|
||||
rollupOptions: {
|
||||
input: {
|
||||
|
||||
Reference in New Issue
Block a user