6 |
)
22 | }
23 | NavBar.displayName = 'NavBar';
24 |
--------------------------------------------------------------------------------
/docker-compose.yml:
--------------------------------------------------------------------------------
1 | version: '3.1'
2 | services:
3 | db:
4 | image: postgres:16
5 | restart: always
6 | environment:
7 | POSTGRES_PASSWORD: devpwd
8 | POSTGRES_DB: comfyui
9 | POSTGRES_USER: comfyui
10 | ports:
11 | - 5432:5432
12 | redis:
13 | image: redis:6
14 | restart: always
15 | ports:
16 | - 6379:6379
17 | adminer:
18 | image: adminer
19 | restart: always
20 | ports:
21 | - 8080:8080
--------------------------------------------------------------------------------
/k8s.yml:
--------------------------------------------------------------------------------
1 | apiVersion: apps/v1
2 | kind: Deployment
3 | metadata:
4 | name: comfyicu
5 | spec:
6 | selector:
7 | matchLabels:
8 | app: comfyicu
9 | replicas: 1
10 | template:
11 | metadata:
12 | labels:
13 | app: comfyicu
14 | spec:
15 | containers:
16 | - name: comfyicu
17 | image: ghcr.io/pagebrain/comfyicu
18 | resources:
19 | requests:
20 | cpu: 1m
21 | env:
22 | - name: ACCOUNT_ID
23 | value: ***
24 | - name: TOKEN
25 | value: ***
26 | - name: ACCESS_KEY_ID
27 | value: ***
28 | - name: SECRET_ACCESS_KEY
29 | value: ***
30 | - name: DATABASE_URL
31 | value: ***
32 | - name: NEXTAUTH_URL
33 | value: ***
34 | - name: GOOGLE_CLIENT_ID
35 | value: ***
36 | - name: GOOGLE_CLIENT_SECRET
37 | value: ***
38 | - name: NEXTAUTH_SECRET
39 | value: ***
40 | - name: BUCKET_NAME
41 | value: ***
42 | - name: ENV
43 | value: production
44 | livenessProbe:
45 | httpGet:
46 | path: /api/healthz
47 | port: 8080
48 | scheme: HTTP
49 | initialDelaySeconds: 10
50 | periodSeconds: 10
51 | timeoutSeconds: 5
52 | successThreshold: 1
53 | failureThreshold: 3
54 | readinessProbe:
55 | httpGet:
56 | path: /api/healthz
57 | port: 8080
58 | scheme: HTTP
59 | initialDelaySeconds: 10
60 | periodSeconds: 10
61 | timeoutSeconds: 5
62 | ports:
63 | - containerPort: 80
64 | protocol: TCP
65 | ---
66 | apiVersion: v1
67 | kind: Service
68 | metadata:
69 | labels:
70 | app: comfyicu
71 | name: comfyicu
72 | spec:
73 | ports:
74 | - port: 80
75 | targetPort: 8080
76 | protocol: TCP
77 | selector:
78 | app: comfyicu
79 | ---
80 | apiVersion: networking.k8s.io/v1
81 | kind: Ingress
82 | metadata:
83 | name: comfyicu
84 | annotations:
85 | kubernetes.io/ingress.class: nginx
86 | nginx.ingress.kubernetes.io/ssl-redirect: "false"
87 | # cert-manager.io/cluster-issuer: letsencrypt-prod
88 | nginx.org/client-max-body-size: 3m
89 | nginx.ingress.kubernetes.io/proxy-body-size: 3m
90 | spec:
91 | # tls:
92 | # - hosts:
93 | # - comfy.icu
94 | # secretName: comfy-icu
95 | rules:
96 | - host: comfy.icu
97 | http: &http_rules
98 | paths:
99 | - path: /
100 | pathType: ImplementationSpecific
101 | backend:
102 | service:
103 | name: comfyicu
104 | port:
105 | number: 80
--------------------------------------------------------------------------------
/lib/common.ts:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 |
3 | function readStream(input) {
4 | return new Promise((resolve, reject) => {
5 | const chunks = [];
6 | input.on('data', chunk => chunks.push(chunk));
7 | input.on('end', () => resolve(Buffer.concat(chunks)));
8 | input.on('error', reject);
9 | });
10 | }
11 |
12 | async function getPngMetadata(input) {
13 | const pngData = await readStream(input);
14 |
15 | const dataView = new DataView(pngData.buffer);
16 |
17 | if (dataView.getUint32(0) !== 0x89504e47) {
18 | console.error("Not a valid PNG file");
19 | return;
20 | }
21 |
22 | let offset = 8;
23 | let txtChunks = {};
24 |
25 | while (offset < pngData.length) {
26 | const length = dataView.getUint32(offset);
27 | const type = String.fromCharCode(...pngData.slice(offset + 4, offset + 8));
28 |
29 | if (type === "tEXt") {
30 | let keywordEnd = offset + 8;
31 |
32 | while (pngData[keywordEnd] !== 0) {
33 | keywordEnd++;
34 | }
35 |
36 | const keyword = String.fromCharCode(...pngData.slice(offset + 8, keywordEnd));
37 | const contentArraySegment = pngData.slice(keywordEnd + 1, offset + 8 + length);
38 | const contentJson = Array.from(contentArraySegment).map(s => String.fromCharCode(s)).join('');
39 | txtChunks[keyword] = contentJson;
40 | }
41 |
42 | offset += 12 + length;
43 | }
44 |
45 | return txtChunks;
46 | }
47 |
48 |
49 | const zlib = require('zlib');
50 | import {
51 | S3Client,
52 | GetObjectCommand
53 | } from "@aws-sdk/client-s3";
54 | import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
55 | import prisma from "./prisma";
56 | import { WorkflowFormat } from "@prisma/client";
57 |
58 | const S3 = new S3Client({
59 | region: "auto",
60 | endpoint: `https://${process.env.ACCOUNT_ID}.r2.cloudflarestorage.com`,
61 | credentials: {
62 | accessKeyId: process.env.ACCESS_KEY_ID,
63 | secretAccessKey: process.env.SECRET_ACCESS_KEY,
64 | },
65 | });
66 |
67 | export async function getWorkflow(id: string) {
68 | const workflow = await prisma.workflow.findUnique({where: {id}})
69 | if(!workflow){
70 | throw new Error("Not found")
71 | }
72 | let key = id + ".png"
73 | // console.log(workflow)
74 | if(workflow.format == WorkflowFormat.JSON){
75 | key = id + ".json.gz"
76 | }
77 | const obj = await S3.send(new GetObjectCommand({
78 | Bucket: process.env.BUCKET_NAME,
79 | Key: key
80 | }));
81 |
82 | if (obj === undefined) {
83 | throw new Error("Sorry, please try refreshing again")
84 | }
85 |
86 | let comfyJson;
87 | if (obj.ContentType == "application/json") {
88 | comfyJson = { workflow: zlib.gunzipSync(await obj.Body?.transformToByteArray()).toString()}
89 | comfyJson.url = 'https://comfy.icu/comfyui.webp'
90 | } else {
91 | comfyJson = await getPngMetadata(obj.Body)
92 | comfyJson.url = `https://r2.comfy.icu/${id}.png`
93 | }
94 | return comfyJson
95 | }
--------------------------------------------------------------------------------
/lib/prisma.ts:
--------------------------------------------------------------------------------
1 | import { PrismaClient } from '@prisma/client';
2 |
3 | let prisma: PrismaClient;
4 |
5 | if (process.env.NODE_ENV === 'production') {
6 | prisma = new PrismaClient();
7 | } else {
8 | if (!global.prisma) {
9 | global.prisma = new PrismaClient();
10 | }
11 | prisma = global.prisma;
12 | }
13 |
14 | export default prisma;
--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | export const popupCenter = (url, title) => {
2 | const dualScreenLeft = window.screenLeft ?? window.screenX;
3 | const dualScreenTop = window.screenTop ?? window.screenY;
4 |
5 | const width =
6 | window.innerWidth ?? document.documentElement.clientWidth ?? screen.width;
7 |
8 | const height =
9 | window.innerHeight ??
10 | document.documentElement.clientHeight ??
11 | screen.height;
12 |
13 | const systemZoom = width / window.screen.availWidth;
14 |
15 | const left = (width - 500) / 2 / systemZoom + dualScreenLeft;
16 | const top = (height - 550) / 2 / systemZoom + dualScreenTop;
17 |
18 | const newWindow = window.open(
19 | url,
20 | title,
21 | `width=${500 / systemZoom},height=${550 / systemZoom
22 | },top=${top},left=${left}`
23 | );
24 |
25 | newWindow?.focus();
26 | };
27 |
28 |
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | reactStrictMode: true,
4 | // async rewrites() {
5 | // return [
6 | // {
7 | // source: '/c/:path*',
8 | // destination: '/api/render?id=:path*',
9 | // },
10 | // ]
11 | // },
12 | skipTrailingSlashRedirect: true,
13 | typescript: {
14 | // !! WARN !!
15 | // Dangerously allow production builds to successfully complete even if
16 | // your project has type errors.
17 | // !! WARN !!
18 | ignoreBuildErrors: true,
19 | },
20 | }
21 |
22 | module.exports = nextConfig
23 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "comfyicu",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start -p 8080",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "@auth/prisma-adapter": "^1.0.3",
13 | "@aws-sdk/client-s3": "^3.388.0",
14 | "@aws-sdk/s3-request-presigner": "^3.388.0",
15 | "@prisma/client": "^5.4.1",
16 | "@types/node": "20.4.10",
17 | "@types/react": "18.2.20",
18 | "@types/react-dom": "18.2.7",
19 | "autoprefixer": "10.4.14",
20 | "eslint": "8.47.0",
21 | "eslint-config-next": "13.5.6",
22 | "formidable": "^3.5.0",
23 | "next": "13.5.6",
24 | "next-auth": "^4.23.2",
25 | "postcss": "8.4.31",
26 | "react": "18.2.0",
27 | "react-dom": "18.2.0",
28 | "tailwindcss": "3.3.3",
29 | "typescript": "5.1.6"
30 | },
31 | "devDependencies": {
32 | "prisma": "^5.4.1"
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import '@/styles/globals.css'
2 | import { SessionProvider } from 'next-auth/react';
3 | import type { AppProps } from 'next/app'
4 |
5 | export default function App({ Component, pageProps }: AppProps) {
6 | return
7 |
8 |
21 |
9 | Comfy.ICU
10 | {menu && menu}
11 | {status === "authenticated" &&
20 |
12 | 
13 |
14 |
}
15 | {status === "unauthenticated" &&
16 |
17 |
}
18 |
19 |
97 |
*/}
105 |
98 | Comfy.ICU
99 |
104 |
100 | Download Workflow
101 | Upload
102 |
103 |
106 |
110 |
107 |
108 |
109 |
111 |
115 |
116 | )
117 | }
--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import Image from 'next/image'
2 | import { Inter } from 'next/font/google'
3 |
4 |
5 | import { app } from '../components/app'
6 | import { useSession, signIn, signOut } from "next-auth/react"
7 | const inter = Inter({ subsets: ['latin'] })
8 | import Script from 'next/script'
9 | import { useRef, useState } from 'react'
10 | import { popupCenter } from '@/lib/utils'
11 |
12 | function getPngMetadata(file) {
13 | return new Promise((r) => {
14 | const reader = new FileReader();
15 | reader.onload = (event) => {
16 | // Get the PNG data as a Uint8Array
17 | const pngData = new Uint8Array(event.target.result);
18 | const dataView = new DataView(pngData.buffer);
19 |
20 | // Check that the PNG signature is present
21 | if (dataView.getUint32(0) !== 0x89504e47) {
22 | console.error("Not a valid PNG file");
23 | r();
24 | return;
25 | }
26 |
27 | // Start searching for chunks after the PNG signature
28 | let offset = 8;
29 | let txt_chunks = {};
30 | // Loop through the chunks in the PNG file
31 | while (offset < pngData.length) {
32 | // Get the length of the chunk
33 | const length = dataView.getUint32(offset);
34 | // Get the chunk type
35 | const type = String.fromCharCode(...pngData.slice(offset + 4, offset + 8));
36 | if (type === "tEXt") {
37 | // Get the keyword
38 | let keyword_end = offset + 8;
39 | while (pngData[keyword_end] !== 0) {
40 | keyword_end++;
41 | }
42 | const keyword = String.fromCharCode(...pngData.slice(offset + 8, keyword_end));
43 | // Get the text
44 | const contentArraySegment = pngData.slice(keyword_end + 1, offset + 8 + length);
45 | const contentJson = Array.from(contentArraySegment).map(s => String.fromCharCode(s)).join('')
46 | txt_chunks[keyword] = contentJson;
47 | }
48 |
49 | offset += 12 + length;
50 | }
51 |
52 | r(txt_chunks);
53 | };
54 |
55 | reader.readAsArrayBuffer(file);
56 | });
57 | }
58 |
59 | import { useRouter } from 'next/navigation';
60 | import Head from 'next/head'
61 | import Link from 'next/link'
62 | import NavBar from '@/components/NavBar'
63 | import Footer from '@/components/Footer'
64 | export default function Home() {
65 |
66 | const [dragActive, setDragActive] = useState(false);
67 | const [isLoading, setIsLoading] = useState(false);
68 | const { data: session, status } = useSession();
69 |
70 | const [errorMsg, setErrorMsg] = useState("");
71 |
72 | const router = useRouter();
73 | const inputRef = useRef(null);
74 | // handle drag events
75 | const handleDrag = function (e) {
76 | e.preventDefault();
77 | e.stopPropagation();
78 | if (e.type === "dragenter" || e.type === "dragover") {
79 | setDragActive(true);
80 | } else if (e.type === "dragleave") {
81 | setDragActive(false);
82 | }
83 | };
84 | // triggers when file is dropped
85 | const handleDrop = function (e) {
86 | e.preventDefault();
87 | e.stopPropagation();
88 | setDragActive(false);
89 | if (e.dataTransfer.files && e.dataTransfer.files[0]) {
90 | handleFile(e.dataTransfer.files);
91 | }
92 | };
93 |
94 | // triggers the input when the button is clicked
95 | const onButtonClick = (e) => {
96 | console.log("onButtonClick")
97 | inputRef.current.click();
98 | // e.preventDefault();
99 | // e.stopPropagation();
100 | };
101 | // triggers when file is selected with click
102 | const handleChange = function (e) {
103 | e.preventDefault();
104 | if (e.target.files && e.target.files[0]) {
105 | handleFile(e.target.files);
106 | }
107 | };
108 |
109 | async function uploadFile(image) {
110 | const body = new FormData();
111 | body.append("file", image);
112 | let data;
113 | try {
114 | const res = await fetch("/api/upload", {
115 | method: "POST",
116 | body
117 | });
118 | if (!res.ok) {
119 | throw new Error(await res.text())
120 | }
121 | data = await res.json();
122 | } catch (e) {
123 | console.log(e)
124 | setErrorMsg("Sorry, there was an error uploading file to server.")
125 | setIsLoading(false)
126 | }
127 | if (data && data.status == 'success') {
128 | router.push('/c/' + data.id)
129 | }
130 | }
131 | async function readJsonAsync(file) {
132 | return new Promise((resolve, reject) => {
133 | const reader = new FileReader();
134 |
135 | reader.onload = function (event) {
136 | try {
137 | const jsonData = JSON.parse(event.target.result);
138 | resolve(jsonData);
139 | } catch (error) {
140 | reject(error);
141 | }
142 | };
143 |
144 | reader.onerror = function () {
145 | reject(new Error('Error reading the file.'));
146 | };
147 |
148 | reader.readAsText(file);
149 | });
150 | }
151 |
152 | async function handleFile(files) {
153 | setErrorMsg("")
154 | setIsLoading(true);
155 | const image = files[0];
156 | // console.log(image)
157 | let metadata
158 | if (image.type == 'application/json') {
159 | try {
160 | await readJsonAsync(files[0])
161 | } catch (e) {
162 | setErrorMsg("Sorry, the JSON doesn't seem valid.")
163 | setIsLoading(false)
164 | console.log(e)
165 | return
166 | }
167 | await uploadFile(image);
168 | return
169 | } else if (image.type == 'image/png') {
170 | try {
171 | metadata = await getPngMetadata(image)
172 | console.log("metadata", metadata)
173 | } catch (e) {
174 | setErrorMsg("Sorry, there was an error parsing metadata, likely an invalid ComfyUI PNG was provided.")
175 | setIsLoading(false)
176 | console.log(e)
177 | return
178 | }
179 | if (!metadata || metadata === undefined || Object.keys(metadata).length === 0) {
180 | setErrorMsg("Sorry, there was an error parsing metadata, likely an invalid ComfyUI PNG was provided.")
181 | setIsLoading(false)
182 | return
183 | }
184 | await uploadFile(image);
185 | return
186 | } else {
187 | setErrorMsg("Sorry, invalid file format. Only valid ComfyUI JSON and PNG files are accepted.")
188 | setIsLoading(false)
189 | return
190 | }
191 | }
192 | function chunk(array, chunkSize = 4) {
193 | let out = []
194 | for (let i = 0; i < array.length; i += chunkSize) {
195 | const chunk = array.slice(i, i + chunkSize);
196 | out.push(chunk)
197 | }
198 | return out
199 | }
200 | const gallery = chunk(['tEWtAo9I', 'J7PoFyoP', 'J4DkJw', 'm6gsndMM', 'oedBJX5D', 'cPJUO3I', 'bjKyjhc', 'b3qRKKxv', 'TRQ9jgI', 'oWO9Dg', 'SNZ2Mw', 'PMclP3ig6A', 'NFAQImM', 'LjOSql4A', 'HU-LWvlxaQ', 'ILxsNPM'].map(e => {
201 | return {
202 | url: '/c/' + e,
203 | img: 'https://img.comfy.icu/sig/width:250/quality:85/' + btoa('https://r2.comfy.icu/' + e + '.png') + '.webp'
204 |
205 | }
206 | }))
207 |
208 | return (
209 | <>
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 |
112 | 
113 |
114 |
224 |
263 |
264 |
265 | )
266 | }
267 |
--------------------------------------------------------------------------------
/pages/login.tsx:
--------------------------------------------------------------------------------
1 | import { signIn, useSession } from "next-auth/react";
2 | import { useEffect } from "react";
3 |
4 | const SignInPage = () => {
5 | const { data: session, status } = useSession();
6 |
7 | useEffect(() => {
8 | if (!(status === "loading") && !session) void signIn("google");
9 | if (session) window.close();
10 | }, [session, status]);
11 |
12 | return (
13 |
225 |
228 | Comfy.ICU
226 |Imgur for sharing ComfyUI workflows
227 |
229 | {errorMsg != "" &&
230 |
248 |
249 | {errorMsg}
231 | }
232 | {!isLoading &&
233 |
242 | }
243 | {isLoading &&
244 |
245 |
246 |
}
247 |
250 |
261 |
262 |
251 | {gallery.map((f, j) => (
252 |
260 |
253 | {f.map((e, i) => (
254 | 
255 | )
256 | )}
257 |
258 | ))}
259 | Loading...
24 | );
25 | };
26 |
27 | export default SignInPage;
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/prisma/schema.prisma:
--------------------------------------------------------------------------------
1 | datasource db {
2 | provider = "postgresql"
3 | url = env("DATABASE_URL")
4 | // shadowDatabaseUrl = env("SHADOW_DATABASE_URL") // Only needed when using a cloud provider that doesn't support the creation of new databases, like Heroku. Learn more: https://pris.ly/d/migrate-shadow
5 | }
6 |
7 | generator client {
8 | provider = "prisma-client-js"
9 | // previewFeatures = ["referentialActions"] // You won't need this in Prisma 3.X or higher.
10 | }
11 |
12 | model Account {
13 | id String @id @default(nanoid())
14 | userId String
15 | type String
16 | provider String
17 | providerAccountId String
18 | refresh_token String? @db.Text
19 | access_token String? @db.Text
20 | expires_at Int?
21 | token_type String?
22 | scope String?
23 | id_token String? @db.Text
24 | session_state String?
25 |
26 | user User @relation(fields: [userId], references: [id], onDelete: Cascade)
27 |
28 | @@unique([provider, providerAccountId])
29 | }
30 |
31 | model Session {
32 | id String @id @default(nanoid())
33 | sessionToken String @unique
34 | userId String
35 | expires DateTime
36 | user User @relation(fields: [userId], references: [id], onDelete: Cascade)
37 | }
38 |
39 | model User {
40 | id String @id @default(nanoid())
41 | name String?
42 | email String? @unique
43 | emailVerified DateTime?
44 | image String?
45 | accounts Account[]
46 | sessions Session[]
47 | }
48 |
49 | model VerificationToken {
50 | identifier String
51 | token String @unique
52 | expires DateTime
53 |
54 | @@unique([identifier, token])
55 | }
56 |
57 | enum WorkflowFormat {
58 | PNG
59 | JSON
60 | }
61 |
62 | model Workflow {
63 | id String @id @default(nanoid())
64 | created_at DateTime @default(now())
65 | updated_at DateTime @updatedAt
66 | format WorkflowFormat
67 | size Int?
68 | user_id String?
69 | url String?
70 | description String?
71 | readme String?
72 | // tags String[] @default([])
73 | }
--------------------------------------------------------------------------------
/proxy.yml:
--------------------------------------------------------------------------------
1 | apiVersion: apps/v1
2 | kind: Deployment
3 | metadata:
4 | name: imgproxy
5 | spec:
6 | selector:
7 | matchLabels:
8 | app: imgproxy
9 | replicas: 1
10 | template:
11 | metadata:
12 | labels:
13 | app: imgproxy
14 | spec:
15 | containers:
16 | - name: imgproxy
17 | image: darthsim/imgproxy:v3.7.1
18 | resources:
19 | requests:
20 | cpu: 1m
21 | env:
22 | - name: IMGPROXY_JPEG_PROGRESSIVE
23 | value: "true"
24 | - name: IMGPROXY_ENFORCE_WEBP
25 | value: "true"
26 | - name: IMGPROXY_ENABLE_WEBP_DETECTION
27 | value: "true"
28 | - name: IMGPROXY_BIND
29 | value: :8080
30 | - name: IMGPROXY_FORMAT_QUALITY
31 | value: jpeg=85,webp=85
32 | - name: IMGPROXY_PREFERRED_FORMATS
33 | value: jpeg,webp
34 | - name: IMGPROXY_ALLOWED_SOURCES
35 | value: https://r2.comfy.icu/
36 | - name: IMGPROXY_READ_TIMEOUT
37 | value: "60"
38 | - name: IMGPROXY_DOWNLOAD_TIMEOUT
39 | value: "60"
40 | - name: IMGPROXY_KEEP_ALIVE_TIMEOUT
41 | value: "60"
42 | - name: IMGPROXY_WRITE_TIMEOUT
43 | value: "60"
44 | livenessProbe:
45 | httpGet:
46 | path: /
47 | port: 8080
48 | scheme: HTTP
49 | initialDelaySeconds: 10
50 | periodSeconds: 10
51 | timeoutSeconds: 5
52 | successThreshold: 1
53 | failureThreshold: 3
54 | readinessProbe:
55 | httpGet:
56 | path: /
57 | port: 8080
58 | scheme: HTTP
59 | initialDelaySeconds: 10
60 | periodSeconds: 10
61 | timeoutSeconds: 5
62 | ports:
63 | - containerPort: 8080
64 | protocol: TCP
65 | ---
66 | apiVersion: v1
67 | kind: Service
68 | metadata:
69 | labels:
70 | app: imgproxy
71 | name: imgproxy
72 | spec:
73 | ports:
74 | - port: 80
75 | targetPort: 8080
76 | protocol: TCP
77 | selector:
78 | app: imgproxy
79 |
80 | ---
81 |
82 | apiVersion: networking.k8s.io/v1
83 | kind: Ingress
84 | metadata:
85 | name: imgproxy
86 | annotations:
87 | kubernetes.io/ingress.class: nginx
88 | nginx.ingress.kubernetes.io/ssl-redirect: "false"
89 | # cert-manager.io/cluster-issuer: letsencrypt-prod
90 | nginx.org/client-max-body-size: 3m
91 | nginx.ingress.kubernetes.io/proxy-body-size: 3m
92 | spec:
93 | # tls:
94 | # - hosts:
95 | # - comfy.icu
96 | # secretName: comfy-icu
97 | rules:
98 | - host: img.comfy.icu
99 | http: &http_rules
100 | paths:
101 | - path: /
102 | pathType: ImplementationSpecific
103 | backend:
104 | service:
105 | name: imgproxy
106 | port:
107 | number: 80
--------------------------------------------------------------------------------
/public/bg.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pagebrain/comfyicu/8ede09041e0a6d3422ca1bb8abe7f687eef0c2aa/public/bg.webp
--------------------------------------------------------------------------------
/public/comfyui.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pagebrain/comfyicu/8ede09041e0a6d3422ca1bb8abe7f687eef0c2aa/public/comfyui.webp
--------------------------------------------------------------------------------
/public/extensions.js:
--------------------------------------------------------------------------------
1 | ["/extensions/core/clipspace.js", "/extensions/core/widgetInputs.js", "/extensions/core/dynamicPrompts.js", "/extensions/core/invertMenuScrolling.js", "/extensions/core/contextMenuFilter.js", "/extensions/core/snapToGrid.js", "/extensions/core/slotDefaults.js", "/extensions/core/maskeditor.js", "/extensions/core/rerouteNode.js", "/extensions/core/saveImageExtraOutput.js", "/extensions/core/keybinds.js", "/extensions/core/colorPalette.js", "/extensions/core/uploadImage.js", "/extensions/core/noteNode.js", "/extensions/core/nodeTemplates.js", "/extensions/core/editAttention.js"]
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pagebrain/comfyicu/8ede09041e0a6d3422ca1bb8abe7f687eef0c2aa/public/favicon.ico
--------------------------------------------------------------------------------
/public/lib/extensions.js:
--------------------------------------------------------------------------------
1 | ["/extensions/core/clipspace.js", "/extensions/core/widgetInputs.js", "/extensions/core/dynamicPrompts.js", "/extensions/core/invertMenuScrolling.js", "/extensions/core/contextMenuFilter.js", "/extensions/core/snapToGrid.js", "/extensions/core/slotDefaults.js", "/extensions/core/maskeditor.js", "/extensions/core/rerouteNode.js", "/extensions/core/saveImageExtraOutput.js", "/extensions/core/keybinds.js", "/extensions/core/colorPalette.js", "/extensions/core/uploadImage.js", "/extensions/core/noteNode.js", "/extensions/core/nodeTemplates.js", "/extensions/core/editAttention.js"]
--------------------------------------------------------------------------------
/public/lib/litegraph.css:
--------------------------------------------------------------------------------
1 | /* this CSS contains only the basic CSS needed to run the app and use it */
2 |
3 | .lgraphcanvas {
4 | /*cursor: crosshair;*/
5 | user-select: none;
6 | -moz-user-select: none;
7 | -webkit-user-select: none;
8 | outline: none;
9 | font-family: Tahoma, sans-serif;
10 | }
11 |
12 | .lgraphcanvas * {
13 | box-sizing: border-box;
14 | }
15 |
16 | .litegraph.litecontextmenu {
17 | font-family: Tahoma, sans-serif;
18 | position: fixed;
19 | top: 100px;
20 | left: 100px;
21 | min-width: 100px;
22 | color: #aaf;
23 | padding: 0;
24 | box-shadow: 0 0 10px black !important;
25 | background-color: #2e2e2e !important;
26 | z-index: 10;
27 | }
28 |
29 | .litegraph.litecontextmenu.dark {
30 | background-color: #000 !important;
31 | }
32 |
33 | .litegraph.litecontextmenu .litemenu-title img {
34 | margin-top: 2px;
35 | margin-left: 2px;
36 | margin-right: 4px;
37 | }
38 |
39 | .litegraph.litecontextmenu .litemenu-entry {
40 | margin: 2px;
41 | padding: 2px;
42 | }
43 |
44 | .litegraph.litecontextmenu .litemenu-entry.submenu {
45 | background-color: #2e2e2e !important;
46 | }
47 |
48 | .litegraph.litecontextmenu.dark .litemenu-entry.submenu {
49 | background-color: #000 !important;
50 | }
51 |
52 | .litegraph .litemenubar ul {
53 | font-family: Tahoma, sans-serif;
54 | margin: 0;
55 | padding: 0;
56 | }
57 |
58 | .litegraph .litemenubar li {
59 | font-size: 14px;
60 | color: #999;
61 | display: inline-block;
62 | min-width: 50px;
63 | padding-left: 10px;
64 | padding-right: 10px;
65 | user-select: none;
66 | -moz-user-select: none;
67 | -webkit-user-select: none;
68 | cursor: pointer;
69 | }
70 |
71 | .litegraph .litemenubar li:hover {
72 | background-color: #777;
73 | color: #eee;
74 | }
75 |
76 | .litegraph .litegraph .litemenubar-panel {
77 | position: absolute;
78 | top: 5px;
79 | left: 5px;
80 | min-width: 100px;
81 | background-color: #444;
82 | box-shadow: 0 0 3px black;
83 | padding: 4px;
84 | border-bottom: 2px solid #aaf;
85 | z-index: 10;
86 | }
87 |
88 | .litegraph .litemenu-entry,
89 | .litemenu-title {
90 | font-size: 12px;
91 | color: #aaa;
92 | padding: 0 0 0 4px;
93 | margin: 2px;
94 | padding-left: 2px;
95 | -moz-user-select: none;
96 | -webkit-user-select: none;
97 | user-select: none;
98 | cursor: pointer;
99 | }
100 |
101 | .litegraph .litemenu-entry .icon {
102 | display: inline-block;
103 | width: 12px;
104 | height: 12px;
105 | margin: 2px;
106 | vertical-align: top;
107 | }
108 |
109 | .litegraph .litemenu-entry.checked .icon {
110 | background-color: #aaf;
111 | }
112 |
113 | .litegraph .litemenu-entry .more {
114 | float: right;
115 | padding-right: 5px;
116 | }
117 |
118 | .litegraph .litemenu-entry.disabled {
119 | opacity: 0.5;
120 | cursor: default;
121 | }
122 |
123 | .litegraph .litemenu-entry.separator {
124 | display: block;
125 | border-top: 1px solid #333;
126 | border-bottom: 1px solid #666;
127 | width: 100%;
128 | height: 0px;
129 | margin: 3px 0 2px 0;
130 | background-color: transparent;
131 | padding: 0 !important;
132 | cursor: default !important;
133 | }
134 |
135 | .litegraph .litemenu-entry.has_submenu {
136 | border-right: 2px solid cyan;
137 | }
138 |
139 | .litegraph .litemenu-title {
140 | color: #dde;
141 | background-color: #111;
142 | margin: 0;
143 | padding: 2px;
144 | cursor: default;
145 | }
146 |
147 | .litegraph .litemenu-entry:hover:not(.disabled):not(.separator) {
148 | background-color: #444 !important;
149 | color: #eee;
150 | transition: all 0.2s;
151 | }
152 |
153 | .litegraph .litemenu-entry .property_name {
154 | display: inline-block;
155 | text-align: left;
156 | min-width: 80px;
157 | min-height: 1.2em;
158 | }
159 |
160 | .litegraph .litemenu-entry .property_value {
161 | display: inline-block;
162 | background-color: rgba(0, 0, 0, 0.5);
163 | text-align: right;
164 | min-width: 80px;
165 | min-height: 1.2em;
166 | vertical-align: middle;
167 | padding-right: 10px;
168 | }
169 |
170 | .litegraph.litesearchbox {
171 | font-family: Tahoma, sans-serif;
172 | position: absolute;
173 | background-color: rgba(0, 0, 0, 0.5);
174 | padding-top: 4px;
175 | }
176 |
177 | .litegraph.litesearchbox input,
178 | .litegraph.litesearchbox select {
179 | margin-top: 3px;
180 | min-width: 60px;
181 | min-height: 1.5em;
182 | background-color: black;
183 | border: 0;
184 | color: white;
185 | padding-left: 10px;
186 | margin-right: 5px;
187 | }
188 |
189 | .litegraph.litesearchbox .name {
190 | display: inline-block;
191 | min-width: 60px;
192 | min-height: 1.5em;
193 | padding-left: 10px;
194 | }
195 |
196 | .litegraph.litesearchbox .helper {
197 | overflow: auto;
198 | max-height: 200px;
199 | margin-top: 2px;
200 | }
201 |
202 | .litegraph.lite-search-item {
203 | font-family: Tahoma, sans-serif;
204 | background-color: rgba(0, 0, 0, 0.5);
205 | color: white;
206 | padding-top: 2px;
207 | }
208 |
209 | .litegraph.lite-search-item.not_in_filter{
210 | /*background-color: rgba(50, 50, 50, 0.5);*/
211 | /*color: #999;*/
212 | color: #B99;
213 | font-style: italic;
214 | }
215 |
216 | .litegraph.lite-search-item.generic_type{
217 | /*background-color: rgba(50, 50, 50, 0.5);*/
218 | /*color: #DD9;*/
219 | color: #999;
220 | font-style: italic;
221 | }
222 |
223 | .litegraph.lite-search-item:hover,
224 | .litegraph.lite-search-item.selected {
225 | cursor: pointer;
226 | background-color: white;
227 | color: black;
228 | }
229 |
230 | /* DIALOGs ******/
231 |
232 | .litegraph .dialog {
233 | position: absolute;
234 | top: 50%;
235 | left: 50%;
236 | margin-top: -150px;
237 | margin-left: -200px;
238 |
239 | background-color: #2A2A2A;
240 |
241 | min-width: 400px;
242 | min-height: 200px;
243 | box-shadow: 0 0 4px #111;
244 | border-radius: 6px;
245 | }
246 |
247 | .litegraph .dialog.settings {
248 | left: 10px;
249 | top: 10px;
250 | height: calc( 100% - 20px );
251 | margin: auto;
252 | max-width: 50%;
253 | }
254 |
255 | .litegraph .dialog.centered {
256 | top: 50px;
257 | left: 50%;
258 | position: absolute;
259 | transform: translateX(-50%);
260 | min-width: 600px;
261 | min-height: 300px;
262 | height: calc( 100% - 100px );
263 | margin: auto;
264 | }
265 |
266 | .litegraph .dialog .close {
267 | float: right;
268 | margin: 4px;
269 | margin-right: 10px;
270 | cursor: pointer;
271 | font-size: 1.4em;
272 | }
273 |
274 | .litegraph .dialog .close:hover {
275 | color: white;
276 | }
277 |
278 | .litegraph .dialog .dialog-header {
279 | color: #AAA;
280 | border-bottom: 1px solid #161616;
281 | }
282 |
283 | .litegraph .dialog .dialog-header { height: 40px; }
284 | .litegraph .dialog .dialog-footer { height: 50px; padding: 10px; border-top: 1px solid #1a1a1a;}
285 |
286 | .litegraph .dialog .dialog-header .dialog-title {
287 | font: 20px "Arial";
288 | margin: 4px;
289 | padding: 4px 10px;
290 | display: inline-block;
291 | }
292 |
293 | .litegraph .dialog .dialog-content, .litegraph .dialog .dialog-alt-content {
294 | height: calc(100% - 90px);
295 | width: 100%;
296 | min-height: 100px;
297 | display: inline-block;
298 | color: #AAA;
299 | /*background-color: black;*/
300 | overflow: auto;
301 | }
302 |
303 | .litegraph .dialog .dialog-content h3 {
304 | margin: 10px;
305 | }
306 |
307 | .litegraph .dialog .dialog-content .connections {
308 | flex-direction: row;
309 | }
310 |
311 | .litegraph .dialog .dialog-content .connections .connections_side {
312 | width: calc(50% - 5px);
313 | min-height: 100px;
314 | background-color: black;
315 | display: flex;
316 | }
317 |
318 | .litegraph .dialog .node_type {
319 | font-size: 1.2em;
320 | display: block;
321 | margin: 10px;
322 | }
323 |
324 | .litegraph .dialog .node_desc {
325 | opacity: 0.5;
326 | display: block;
327 | margin: 10px;
328 | }
329 |
330 | .litegraph .dialog .separator {
331 | display: block;
332 | width: calc( 100% - 4px );
333 | height: 1px;
334 | border-top: 1px solid #000;
335 | border-bottom: 1px solid #333;
336 | margin: 10px 2px;
337 | padding: 0;
338 | }
339 |
340 | .litegraph .dialog .property {
341 | margin-bottom: 2px;
342 | padding: 4px;
343 | }
344 |
345 | .litegraph .dialog .property:hover {
346 | background: #545454;
347 | }
348 |
349 | .litegraph .dialog .property_name {
350 | color: #737373;
351 | display: inline-block;
352 | text-align: left;
353 | vertical-align: top;
354 | width: 160px;
355 | padding-left: 4px;
356 | overflow: hidden;
357 | margin-right: 6px;
358 | }
359 |
360 | .litegraph .dialog .property:hover .property_name {
361 | color: white;
362 | }
363 |
364 | .litegraph .dialog .property_value {
365 | display: inline-block;
366 | text-align: right;
367 | color: #AAA;
368 | background-color: #1A1A1A;
369 | /*width: calc( 100% - 122px );*/
370 | max-width: calc( 100% - 162px );
371 | min-width: 200px;
372 | max-height: 300px;
373 | min-height: 20px;
374 | padding: 4px;
375 | padding-right: 12px;
376 | overflow: hidden;
377 | cursor: pointer;
378 | border-radius: 3px;
379 | }
380 |
381 | .litegraph .dialog .property_value:hover {
382 | color: white;
383 | }
384 |
385 | .litegraph .dialog .property.boolean .property_value {
386 | padding-right: 30px;
387 | color: #A88;
388 | /*width: auto;
389 | float: right;*/
390 | }
391 |
392 | .litegraph .dialog .property.boolean.bool-on .property_name{
393 | color: #8A8;
394 | }
395 | .litegraph .dialog .property.boolean.bool-on .property_value{
396 | color: #8A8;
397 | }
398 |
399 | .litegraph .dialog .btn {
400 | border: 0;
401 | border-radius: 4px;
402 | padding: 4px 20px;
403 | margin-left: 0px;
404 | background-color: #060606;
405 | color: #8e8e8e;
406 | }
407 |
408 | .litegraph .dialog .btn:hover {
409 | background-color: #111;
410 | color: #FFF;
411 | }
412 |
413 | .litegraph .dialog .btn.delete:hover {
414 | background-color: #F33;
415 | color: black;
416 | }
417 |
418 | .litegraph .subgraph_property {
419 | padding: 4px;
420 | }
421 |
422 | .litegraph .subgraph_property:hover {
423 | background-color: #333;
424 | }
425 |
426 | .litegraph .subgraph_property.extra {
427 | margin-top: 8px;
428 | }
429 |
430 | .litegraph .subgraph_property span.name {
431 | font-size: 1.3em;
432 | padding-left: 4px;
433 | }
434 |
435 | .litegraph .subgraph_property span.type {
436 | opacity: 0.5;
437 | margin-right: 20px;
438 | padding-left: 4px;
439 | }
440 |
441 | .litegraph .subgraph_property span.label {
442 | display: inline-block;
443 | width: 60px;
444 | padding: 0px 10px;
445 | }
446 |
447 | .litegraph .subgraph_property input {
448 | width: 140px;
449 | color: #999;
450 | background-color: #1A1A1A;
451 | border-radius: 4px;
452 | border: 0;
453 | margin-right: 10px;
454 | padding: 4px;
455 | padding-left: 10px;
456 | }
457 |
458 | .litegraph .subgraph_property button {
459 | background-color: #1c1c1c;
460 | color: #aaa;
461 | border: 0;
462 | border-radius: 2px;
463 | padding: 4px 10px;
464 | cursor: pointer;
465 | }
466 |
467 | .litegraph .subgraph_property.extra {
468 | color: #ccc;
469 | }
470 |
471 | .litegraph .subgraph_property.extra input {
472 | background-color: #111;
473 | }
474 |
475 | .litegraph .bullet_icon {
476 | margin-left: 10px;
477 | border-radius: 10px;
478 | width: 12px;
479 | height: 12px;
480 | background-color: #666;
481 | display: inline-block;
482 | margin-top: 2px;
483 | margin-right: 4px;
484 | transition: background-color 0.1s ease 0s;
485 | -moz-transition: background-color 0.1s ease 0s;
486 | }
487 |
488 | .litegraph .bullet_icon:hover {
489 | background-color: #698;
490 | cursor: pointer;
491 | }
492 |
493 | /* OLD */
494 |
495 | .graphcontextmenu {
496 | padding: 4px;
497 | min-width: 100px;
498 | }
499 |
500 | .graphcontextmenu-title {
501 | color: #dde;
502 | background-color: #222;
503 | margin: 0;
504 | padding: 2px;
505 | cursor: default;
506 | }
507 |
508 | .graphmenu-entry {
509 | box-sizing: border-box;
510 | margin: 2px;
511 | padding-left: 20px;
512 | user-select: none;
513 | -moz-user-select: none;
514 | -webkit-user-select: none;
515 | transition: all linear 0.3s;
516 | }
517 |
518 | .graphmenu-entry.event,
519 | .litemenu-entry.event {
520 | border-left: 8px solid orange;
521 | padding-left: 12px;
522 | }
523 |
524 | .graphmenu-entry.disabled {
525 | opacity: 0.3;
526 | }
527 |
528 | .graphmenu-entry.submenu {
529 | border-right: 2px solid #eee;
530 | }
531 |
532 | .graphmenu-entry:hover {
533 | background-color: #555;
534 | }
535 |
536 | .graphmenu-entry.separator {
537 | background-color: #111;
538 | border-bottom: 1px solid #666;
539 | height: 1px;
540 | width: calc(100% - 20px);
541 | -moz-width: calc(100% - 20px);
542 | -webkit-width: calc(100% - 20px);
543 | }
544 |
545 | .graphmenu-entry .property_name {
546 | display: inline-block;
547 | text-align: left;
548 | min-width: 80px;
549 | min-height: 1.2em;
550 | }
551 |
552 | .graphmenu-entry .property_value,
553 | .litemenu-entry .property_value {
554 | display: inline-block;
555 | background-color: rgba(0, 0, 0, 0.5);
556 | text-align: right;
557 | min-width: 80px;
558 | min-height: 1.2em;
559 | vertical-align: middle;
560 | padding-right: 10px;
561 | }
562 |
563 | .graphdialog {
564 | position: absolute;
565 | top: 10px;
566 | left: 10px;
567 | min-height: 2em;
568 | background-color: #333;
569 | font-size: 1.2em;
570 | box-shadow: 0 0 10px black !important;
571 | z-index: 10;
572 | }
573 |
574 | .graphdialog.rounded {
575 | border-radius: 12px;
576 | padding-right: 2px;
577 | }
578 |
579 | .graphdialog .name {
580 | display: inline-block;
581 | min-width: 60px;
582 | min-height: 1.5em;
583 | padding-left: 10px;
584 | }
585 |
586 | .graphdialog input,
587 | .graphdialog textarea,
588 | .graphdialog select {
589 | margin: 3px;
590 | min-width: 60px;
591 | min-height: 1.5em;
592 | background-color: black;
593 | border: 0;
594 | color: white;
595 | padding-left: 10px;
596 | outline: none;
597 | }
598 |
599 | .graphdialog textarea {
600 | min-height: 150px;
601 | }
602 |
603 | .graphdialog button {
604 | margin-top: 3px;
605 | vertical-align: top;
606 | background-color: #999;
607 | border: 0;
608 | }
609 |
610 | .graphdialog button.rounded,
611 | .graphdialog input.rounded {
612 | border-radius: 0 12px 12px 0;
613 | }
614 |
615 | .graphdialog .helper {
616 | overflow: auto;
617 | max-height: 200px;
618 | }
619 |
620 | .graphdialog .help-item {
621 | padding-left: 10px;
622 | }
623 |
624 | .graphdialog .help-item:hover,
625 | .graphdialog .help-item.selected {
626 | cursor: pointer;
627 | background-color: white;
628 | color: black;
629 | }
630 |
631 | .litegraph .dialog {
632 | min-height: 0;
633 | }
634 | .litegraph .dialog .dialog-content {
635 | display: block;
636 | }
637 | .litegraph .dialog .dialog-content .subgraph_property {
638 | padding: 5px;
639 | }
640 | .litegraph .dialog .dialog-footer {
641 | margin: 0;
642 | }
643 | .litegraph .dialog .dialog-footer .subgraph_property {
644 | margin-top: 0;
645 | display: flex;
646 | align-items: center;
647 | padding: 5px;
648 | }
649 | .litegraph .dialog .dialog-footer .subgraph_property .name {
650 | flex: 1;
651 | }
652 | .litegraph .graphdialog {
653 | display: flex;
654 | align-items: center;
655 | border-radius: 20px;
656 | padding: 4px 10px;
657 | position: fixed;
658 | }
659 | .litegraph .graphdialog .name {
660 | padding: 0;
661 | min-height: 0;
662 | font-size: 16px;
663 | vertical-align: middle;
664 | }
665 | .litegraph .graphdialog .value {
666 | font-size: 16px;
667 | min-height: 0;
668 | margin: 0 10px;
669 | padding: 2px 5px;
670 | }
671 | .litegraph .graphdialog input[type="checkbox"] {
672 | width: 16px;
673 | height: 16px;
674 | }
675 | .litegraph .graphdialog button {
676 | padding: 4px 18px;
677 | border-radius: 20px;
678 | cursor: pointer;
679 | }
680 |
681 |
--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/scripts/api.js:
--------------------------------------------------------------------------------
1 | class ComfyApi extends EventTarget {
2 | #registered = new Set();
3 |
4 | constructor() {
5 | super();
6 | this.api_host = location.host;
7 | this.api_base = location.pathname.split('/').slice(0, -1).join('/');
8 | }
9 |
10 | apiURL(route) {
11 | return this.api_base + route;
12 | }
13 |
14 | fetchApi(route, options) {
15 | return fetch(route, options);
16 | }
17 |
18 | addEventListener(type, callback, options) {
19 | // super.addEventListener(type, callback, options);
20 | this.#registered.add(type);
21 | }
22 |
23 | /**
24 | * Poll status for colab and other things that don't support websockets.
25 | */
26 | #pollQueue() {
27 | setInterval(async () => {
28 | try {
29 | const resp = await this.fetchApi("/prompt");
30 | const status = await resp.json();
31 | this.dispatchEvent(new CustomEvent("status", { detail: status }));
32 | } catch (error) {
33 | this.dispatchEvent(new CustomEvent("status", { detail: null }));
34 | }
35 | }, 1000);
36 | }
37 |
38 | /**
39 | * Creates and connects a WebSocket for realtime updates
40 | * @param {boolean} isReconnect If the socket is connection is a reconnect attempt
41 | */
42 | #createSocket(isReconnect) {
43 | if (this.socket) {
44 | return;
45 | }
46 |
47 | let opened = false;
48 | let existingSession = window.name;
49 | if (existingSession) {
50 | existingSession = "?clientId=" + existingSession;
51 | }
52 | this.socket = new WebSocket(
53 | `ws${window.location.protocol === "https:" ? "s" : ""}://${this.api_host}${this.api_base}/ws${existingSession}`
54 | );
55 | this.socket.binaryType = "arraybuffer";
56 |
57 | this.socket.addEventListener("open", () => {
58 | opened = true;
59 | if (isReconnect) {
60 | this.dispatchEvent(new CustomEvent("reconnected"));
61 | }
62 | });
63 |
64 | this.socket.addEventListener("error", () => {
65 | if (this.socket) this.socket.close();
66 | if (!isReconnect && !opened) {
67 | this.#pollQueue();
68 | }
69 | });
70 |
71 | this.socket.addEventListener("close", () => {
72 | setTimeout(() => {
73 | this.socket = null;
74 | this.#createSocket(true);
75 | }, 300);
76 | if (opened) {
77 | this.dispatchEvent(new CustomEvent("status", { detail: null }));
78 | this.dispatchEvent(new CustomEvent("reconnecting"));
79 | }
80 | });
81 |
82 | this.socket.addEventListener("message", (event) => {
83 | try {
84 | if (event.data instanceof ArrayBuffer) {
85 | const view = new DataView(event.data);
86 | const eventType = view.getUint32(0);
87 | const buffer = event.data.slice(4);
88 | switch (eventType) {
89 | case 1:
90 | const view2 = new DataView(event.data);
91 | const imageType = view2.getUint32(0)
92 | let imageMime
93 | switch (imageType) {
94 | case 1:
95 | default:
96 | imageMime = "image/jpeg";
97 | break;
98 | case 2:
99 | imageMime = "image/png"
100 | }
101 | const imageBlob = new Blob([buffer.slice(4)], { type: imageMime });
102 | this.dispatchEvent(new CustomEvent("b_preview", { detail: imageBlob }));
103 | break;
104 | default:
105 | throw new Error(`Unknown binary websocket message of type ${eventType}`);
106 | }
107 | }
108 | else {
109 | const msg = JSON.parse(event.data);
110 | switch (msg.type) {
111 | case "status":
112 | if (msg.data.sid) {
113 | this.clientId = msg.data.sid;
114 | window.name = this.clientId;
115 | }
116 | this.dispatchEvent(new CustomEvent("status", { detail: msg.data.status }));
117 | break;
118 | case "progress":
119 | this.dispatchEvent(new CustomEvent("progress", { detail: msg.data }));
120 | break;
121 | case "executing":
122 | this.dispatchEvent(new CustomEvent("executing", { detail: msg.data.node }));
123 | break;
124 | case "executed":
125 | this.dispatchEvent(new CustomEvent("executed", { detail: msg.data }));
126 | break;
127 | case "execution_start":
128 | this.dispatchEvent(new CustomEvent("execution_start", { detail: msg.data }));
129 | break;
130 | case "execution_error":
131 | this.dispatchEvent(new CustomEvent("execution_error", { detail: msg.data }));
132 | break;
133 | case "execution_cached":
134 | this.dispatchEvent(new CustomEvent("execution_cached", { detail: msg.data }));
135 | break;
136 | default:
137 | if (this.#registered.has(msg.type)) {
138 | this.dispatchEvent(new CustomEvent(msg.type, { detail: msg.data }));
139 | } else {
140 | throw new Error(`Unknown message type ${msg.type}`);
141 | }
142 | }
143 | }
144 | } catch (error) {
145 | console.warn("Unhandled message:", event.data, error);
146 | }
147 | });
148 | }
149 |
150 | /**
151 | * Initialises sockets and realtime updates
152 | */
153 | init() {
154 | this.#createSocket();
155 | }
156 |
157 | /**
158 | * Gets a list of extension urls
159 | * @returns An array of script urls to import
160 | */
161 | async getExtensions() {
162 | const resp = await this.fetchApi("/extensions.js", { cache: "no-store" });
163 | return await resp.json();
164 | }
165 |
166 | /**
167 | * Gets a list of embedding names
168 | * @returns An array of script urls to import
169 | */
170 | async getEmbeddings() {
171 | const resp = await this.fetchApi("/embeddings", { cache: "no-store" });
172 | return await resp.json();
173 | }
174 |
175 | /**
176 | * Loads node object definitions for the graph
177 | * @returns The node definitions
178 | */
179 | async getNodeDefs() {
180 | const resp = await this.fetchApi("/object_info.json", { cache: "no-store" });
181 | return await resp.json();
182 | }
183 |
184 | /**
185 | *
186 | * @param {number} number The index at which to queue the prompt, passing -1 will insert the prompt at the front of the queue
187 | * @param {object} prompt The prompt data to queue
188 | */
189 | async queuePrompt(number, { output, workflow }) {
190 | const body = {
191 | client_id: this.clientId,
192 | prompt: output,
193 | extra_data: { extra_pnginfo: { workflow } },
194 | };
195 |
196 | if (number === -1) {
197 | body.front = true;
198 | } else if (number != 0) {
199 | body.number = number;
200 | }
201 |
202 | const res = await this.fetchApi("/prompt", {
203 | method: "POST",
204 | headers: {
205 | "Content-Type": "application/json",
206 | },
207 | body: JSON.stringify(body),
208 | });
209 |
210 | if (res.status !== 200) {
211 | throw {
212 | response: await res.json(),
213 | };
214 | }
215 |
216 | return await res.json();
217 | }
218 |
219 | /**
220 | * Loads a list of items (queue or history)
221 | * @param {string} type The type of items to load, queue or history
222 | * @returns The items of the specified type grouped by their status
223 | */
224 | async getItems(type) {
225 | if (type === "queue") {
226 | return this.getQueue();
227 | }
228 | return this.getHistory();
229 | }
230 |
231 | /**
232 | * Gets the current state of the queue
233 | * @returns The currently running and queued items
234 | */
235 | async getQueue() {
236 | try {
237 | const res = await this.fetchApi("/queue");
238 | const data = await res.json();
239 | return {
240 | // Running action uses a different endpoint for cancelling
241 | Running: data.queue_running.map((prompt) => ({
242 | prompt,
243 | remove: { name: "Cancel", cb: () => api.interrupt() },
244 | })),
245 | Pending: data.queue_pending.map((prompt) => ({ prompt })),
246 | };
247 | } catch (error) {
248 | console.error(error);
249 | return { Running: [], Pending: [] };
250 | }
251 | }
252 |
253 | /**
254 | * Gets the prompt execution history
255 | * @returns Prompt history including node outputs
256 | */
257 | async getHistory() {
258 | try {
259 | const res = await this.fetchApi("/history");
260 | return { History: Object.values(await res.json()) };
261 | } catch (error) {
262 | console.error(error);
263 | return { History: [] };
264 | }
265 | }
266 |
267 | /**
268 | * Sends a POST request to the API
269 | * @param {*} type The endpoint to post to
270 | * @param {*} body Optional POST data
271 | */
272 | async #postItem(type, body) {
273 | try {
274 | await this.fetchApi("/" + type, {
275 | method: "POST",
276 | headers: {
277 | "Content-Type": "application/json",
278 | },
279 | body: body ? JSON.stringify(body) : undefined,
280 | });
281 | } catch (error) {
282 | console.error(error);
283 | }
284 | }
285 |
286 | /**
287 | * Deletes an item from the specified list
288 | * @param {string} type The type of item to delete, queue or history
289 | * @param {number} id The id of the item to delete
290 | */
291 | async deleteItem(type, id) {
292 | await this.#postItem(type, { delete: [id] });
293 | }
294 |
295 | /**
296 | * Clears the specified list
297 | * @param {string} type The type of list to clear, queue or history
298 | */
299 | async clearItems(type) {
300 | await this.#postItem(type, { clear: true });
301 | }
302 |
303 | /**
304 | * Interrupts the execution of the running prompt
305 | */
306 | async interrupt() {
307 | await this.#postItem("interrupt", null);
308 | }
309 | }
310 |
311 | export const api = new ComfyApi();
312 |
--------------------------------------------------------------------------------
/public/scripts/app.js:
--------------------------------------------------------------------------------
1 | import { ComfyWidgets } from "./widgets.js";
2 | import { ComfyUI, $el } from "./ui.js";
3 | import { api } from "./api.js";
4 | // import { defaultGraph } from "./defaultGraph.js";
5 | import { getPngMetadata, importA1111, getLatentMetadata } from "./pnginfo.js";
6 |
7 | /**
8 | * @typedef {import("types/comfy").ComfyExtension} ComfyExtension
9 | */
10 |
11 | export class ComfyApp {
12 | /**
13 | * List of entries to queue
14 | * @type {{number: number, batchCount: number}[]}
15 | */
16 | #queueItems = [];
17 | /**
18 | * If the queue is currently being processed
19 | * @type {boolean}
20 | */
21 | #processingQueue = false;
22 |
23 | /**
24 | * Content Clipboard
25 | * @type {serialized node object}
26 | */
27 | static clipspace = null;
28 | static clipspace_invalidate_handler = null;
29 | static open_maskeditor = null;
30 | static clipspace_return_node = null;
31 |
32 | constructor() {
33 | this.ui = new ComfyUI(this);
34 |
35 | /**
36 | * List of extensions that are registered with the app
37 | * @type {ComfyExtension[]}
38 | */
39 | this.extensions = [];
40 |
41 | /**
42 | * Stores the execution output data for each node
43 | * @type {Record- ${Array.from(new Set(missingNodeTypes)).map(
1311 | (t) => `
- ${t} ` 1312 | ).join("")}