From b06527ba231d0073511f43ee349b5aed0fb91f80 Mon Sep 17 00:00:00 2001
From: huchenlei <chenlei.hu@mail.utoronto.ca>
Date: Fri, 29 Sep 2023 22:52:41 -0400
Subject: [PATCH] Allow extensions to add custom css

---
 server.py          | 5 +++++
 web/scripts/api.js | 9 +++++++++
 web/scripts/app.js | 9 +++++++++
 3 files changed, 23 insertions(+)

diff --git a/server.py b/server.py
index b2e16716..612c7250 100644
--- a/server.py
+++ b/server.py
@@ -142,6 +142,11 @@ class PromptServer():
                     name) + "/" + os.path.relpath(f, dir).replace("\\", "/"), files)))
 
             return web.json_response(extensions)
+        
+        @routes.get("/extensions/styles")
+        async def get_extensions_styles(request):
+            files = glob.glob(os.path.join(self.web_root, 'extensions/**/*.css'), recursive=True)
+            return web.json_response(list(map(lambda f: "/" + os.path.relpath(f, self.web_root).replace("\\", "/"), files)))
 
         def get_dir_by_type(dir_type):
             if dir_type is None:
diff --git a/web/scripts/api.js b/web/scripts/api.js
index b1d245d7..e25d5939 100644
--- a/web/scripts/api.js
+++ b/web/scripts/api.js
@@ -163,6 +163,15 @@ class ComfyApi extends EventTarget {
 		return await resp.json();
 	}
 
+	/**
+	 * Gets a list of extension's CSS style urls
+	 * @returns An array of CSS urls to include
+	 */
+	async getExtensionsStyles() {
+		const resp = await this.fetchApi("/extensions/styles", { cache: "no-store" });
+		return await resp.json();
+	}
+
 	/**
 	 * Gets a list of embedding names
 	 * @returns An array of script urls to import
diff --git a/web/scripts/app.js b/web/scripts/app.js
index b41c12b8..b723f307 100644
--- a/web/scripts/app.js
+++ b/web/scripts/app.js
@@ -1130,6 +1130,15 @@ export class ComfyApp {
 	    });
 	
 	    await Promise.all(extensionPromises);
+
+		const styles = await api.getExtensionsStyles();
+		function loadCSS(url) {
+			var link = document.createElement('link');
+			link.rel = 'stylesheet';
+			link.href = url;
+			document.head.appendChild(link);
+		}
+		styles.forEach(loadCSS);
 	}
 
 	/**