Front End Refactor

.gitignore

@@ -4,3 +4,4 @@ output/
 models/checkpoints
 models/vae
 models/embeddings
+models/loras

nodes.py

@@ -53,7 +53,7 @@ def interrupt_processing(value=True):
 class CLIPTextEncode:
     @classmethod
     def INPUT_TYPES(s):
-        return {"required": {"text": ("STRING", {"multiline": True, "dynamic_prompt": True}), "clip": ("CLIP", )}}
+        return {"required": {"text": ("STRING", {"multiline": True}), "clip": ("CLIP", )}}
     RETURN_TYPES = ("CONDITIONING",)
     FUNCTION = "encode"
 

server.py

@@ -5,6 +5,7 @@
 import execution
 import uuid
 import json
+import glob
 
 try:
     import aiohttp
@@ -16,16 +17,20 @@
     print("pip install -r requirements.txt")
     sys.exit()
 
+import mimetypes; 
+
 class PromptServer():
     def __init__(self, loop):
+        mimetypes.init(); 
+        mimetypes.types_map['.js'] = 'application/javascript; charset=utf-8'
         self.prompt_queue = None
         self.loop = loop
         self.messages = asyncio.Queue()
         self.number = 0
         self.app = web.Application()
         self.sockets = dict()
         self.web_root = os.path.join(os.path.dirname(
-            os.path.realpath(__file__)), "webshit")
+            os.path.realpath(__file__)), "web")
         routes = web.RouteTableDef()
 
         @routes.get('/ws')
@@ -48,6 +53,11 @@ async def websocket_handler(request):
         async def get_root(request):
             return web.FileResponse(os.path.join(self.web_root, "index.html"))
 
+        @routes.get("/extensions")
+        async def get_extensions(request):
+            files = glob.glob(os.path.join(self.web_root, 'extensions/**/*.js'), recursive=True)
+            return web.json_response(list(map(lambda f: "/" + os.path.relpath(f, self.web_root).replace("\\", "/"), files)))
+
         @routes.get("/view/{file}")
         async def view_image(request):
             if "file" in request.match_info:

web/extensions/core/dynamicPrompts.js

@@ -0,0 +1,40 @@
+import { app } from "../../scripts/app.js";
+
+// Allows for simple dynamic prompt replacement
+// Inputs in the format {a|b} will have a random value of a or b chosen when the prompt is queued.
+
+app.registerExtension({
+	name: "Comfy.DynamicPrompts",
+	nodeCreated(node) {
+		if (node.widgets) {
+			// Locate dynamic prompt text widgets
+			// Include any widgets with dynamicPrompts set to true, and customtext
+			const widgets = node.widgets.filter(
+				(n) => (n.type === "customtext" && n.dynamicPrompts !== false) || n.dynamicPrompts
+			);
+			for (const widget of widgets) {
+				// Override the serialization of the value to resolve dynamic prompts for all widgets supporting it in this node
+				widget.serializeValue = (workflowNode, widgetIndex) => {
+					let prompt = widget.value;
+					while (prompt.replace("\\{", "").includes("{") && prompt.replace("\\}", "").includes("}")) {
+						const startIndex = prompt.replace("\\{", "00").indexOf("{");
+						const endIndex = prompt.replace("\\}", "00").indexOf("}");
+
+						const optionsString = prompt.substring(startIndex + 1, endIndex);
+						const options = optionsString.split("|");
+
+						const randomIndex = Math.floor(Math.random() * options.length);
+						const randomOption = options[randomIndex];
+
+						prompt = prompt.substring(0, startIndex) + randomOption + prompt.substring(endIndex + 1);
+					}
+
+					// Overwrite the value in the serialized workflow pnginfo
+					workflowNode.widgets_values[widgetIndex] = prompt;
+
+					return prompt;
+				};
+			}
+		}
+	},
+});

web/extensions/core/rerouteNode.js

@@ -0,0 +1,93 @@
+import { app } from "../../scripts/app.js";
+
+// Node that allows you to redirect connections for cleaner graphs
+
+app.registerExtension({
+	name: "Comfy.RerouteNode",
+	registerCustomNodes() {
+		class RerouteNode {
+			constructor() {
+				if (!this.properties) {
+					this.properties = {};
+				}
+				this.properties.showOutputText = RerouteNode.defaultVisibility;
+
+				this.addInput("", "*");
+				this.addOutput(this.properties.showOutputText ? "*" : "", "*");
+				this.onConnectInput = function (_, type) {
+					if (type !== this.outputs[0].type) {
+						this.removeOutput(0);
+						this.addOutput(this.properties.showOutputText ? type : "", type);
+						this.size = this.computeSize();
+					}
+				};
+
+				this.clone = function () {
+					const cloned = RerouteNode.prototype.clone.apply(this);
+					cloned.removeOutput(0);
+					cloned.addOutput(this.properties.showOutputText ? "*" : "", "*");
+					cloned.size = cloned.computeSize();
+					return cloned;
+				};
+
+				// This node is purely frontend and does not impact the resulting prompt so should not be serialized
+				this.isVirtualNode = true;
+			}
+
+			getExtraMenuOptions(_, options) {
+				options.unshift(
+					{
+						content: (this.properties.showOutputText ? "Hide" : "Show") + " Type",
+						callback: () => {
+							this.properties.showOutputText = !this.properties.showOutputText;
+							if (this.properties.showOutputText) {
+								this.outputs[0].name = this.outputs[0].type;
+							} else {
+								this.outputs[0].name = "";
+							}
+							this.size = this.computeSize();
+							app.graph.setDirtyCanvas(true);
+						},
+					},
+					{
+						content: (RerouteNode.defaultVisibility ? "Hide" : "Show") + " Type By Default",
+						callback: () => {
+							RerouteNode.setDefaultTextVisibility(!RerouteNode.defaultVisibility);
+						},
+					}
+				);
+			}
+
+			computeSize() {
+				return [
+					this.properties.showOutputText && this.outputs && this.outputs.length
+						? Math.max(55, LiteGraph.NODE_TEXT_SIZE * this.outputs[0].name.length * 0.6 + 40)
+						: 55,
+					26,
+				];
+			}
+
+			static setDefaultTextVisibility(visible) {
+				RerouteNode.defaultVisibility = visible;
+				if (visible) {
+					localStorage["Comfy.RerouteNode.DefaultVisibility"] = "true";
+				} else {
+					delete localStorage["Comfy.RerouteNode.DefaultVisibility"];
+				}
+			}
+		}
+
+		// Load default visibility
+		RerouteNode.setDefaultTextVisibility(!!localStorage["Comfy.RerouteNode.DefaultVisibility"]);
+
+		LiteGraph.registerNodeType(
+			"Reroute",
+			Object.assign(RerouteNode, {
+				title_mode: LiteGraph.NO_TITLE,
+				title: "Reroute",
+			})
+		);
+
+		RerouteNode.category = "utils";
+	},
+});

web/extensions/logging.js.example

@@ -0,0 +1,55 @@
+import { app } from "../scripts/app.js";
+
+const ext = {
+	// Unique name for the extension
+	name: "Example.LoggingExtension",
+	async init(app) {
+		// Any initial setup to run as soon as the page loads
+		console.log("[logging]", "extension init");
+	},
+	async setup(app) {
+		// Any setup to run after the app is created
+		console.log("[logging]", "extension setup");
+	},
+	async addCustomNodeDefs(defs, app) {
+		// Add custom node definitions
+		// These definitions will be configured and registered automatically
+		// defs is a lookup core nodes, add yours into this
+		console.log("[logging]", "add custom node definitions", "current nodes:", Object.keys(defs));
+	},
+	async getCustomWidgets(app) {
+		// Return custom widget types
+		// See ComfyWidgets for widget examples
+		console.log("[logging]", "provide custom widgets");
+	},
+	async beforeRegisterNodeDef(nodeType, nodeData, app) {
+		// Run custom logic before a node definition is registered with the graph
+		console.log("[logging]", "before register node: ", nodeType, nodeData);
+
+		// This fires for every node definition so only log once
+		delete ext.beforeRegisterNodeDef;
+	},
+	async registerCustomNodes(app) {
+		// Register any custom node implementations here allowing for more flexability than a custom node def
+		console.log("[logging]", "register custom nodes");
+	},
+	loadedGraphNode(node, app) {
+		// Fires for each node when loading/dragging/etc a workflow json or png
+		// If you break something in the backend and want to patch workflows in the frontend
+		// This is the place to do this
+		console.log("[logging]", "loaded graph node: ", node);
+
+		// This fires for every node on each load so only log once
+		delete ext.loadedGraphNode;
+	},
+	nodeCreated(node, app) {
+		// Fires every time a node is constructed
+		// You can modify widgets/add handlers/etc here
+		console.log("[logging]", "node created: ", node);
+
+		// This fires for every node so only log once
+		delete ext.nodeCreated;
+	}
+};
+
+app.registerExtension(ext);

web/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<link rel="stylesheet" type="text/css" href="lib/litegraph.css" />
+		<link rel="stylesheet" type="text/css" href="style.css" />
+		<script type="text/javascript" src="lib/litegraph.core.js"></script>
+
+		<script type="module">
+			import { app } from "/scripts/app.js";
+			await app.setup();
+			window.app = app;
+			window.graph = app.graph;
+		</script>
+	</head>
+	<body></body>
+</html>