From 5797ff89b06095df90e56c736e72d71c47355db3 Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Mon, 10 Jul 2023 02:09:03 -0700
Subject: [PATCH] use relative paths for all web connections

This enables local reverse-proxies to host ComfyUI on a path, eg "http://example.com/ComfyUI/" in such a way that at least everything I tested works. Without this patch, proxying ComfyUI in this way will yield errors.
---
 web/extensions/core/clipspace.js            |  6 +++---
 web/extensions/core/colorPalette.js         |  4 ++--
 web/extensions/core/editAttention.js        |  2 +-
 web/extensions/core/invertMenuScrolling.js  |  2 +-
 web/extensions/core/keybinds.js             |  2 +-
 web/extensions/core/maskeditor.js           | 12 ++++++------
 web/extensions/core/nodeTemplates.js        |  4 ++--
 web/extensions/core/saveImageExtraOutput.js |  2 +-
 web/extensions/core/slotDefaults.js         |  4 ++--
 web/extensions/core/snapToGrid.js           |  2 +-
 web/extensions/core/uploadImage.js          |  2 +-
 web/extensions/core/widgetInputs.js         |  4 ++--
 web/index.html                              | 10 +++++-----
 web/scripts/api.js                          | 18 +++++++++---------
 web/scripts/app.js                          |  4 ++--
 web/scripts/widgets.js                      |  4 ++--
 web/types/comfy.d.ts                        |  2 +-
 17 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/web/extensions/core/clipspace.js b/web/extensions/core/clipspace.js
index adb5877eab7..e376a02f70d 100644
--- a/web/extensions/core/clipspace.js
+++ b/web/extensions/core/clipspace.js
@@ -1,6 +1,6 @@
-import { app } from "/scripts/app.js";
-import { ComfyDialog, $el } from "/scripts/ui.js";
-import { ComfyApp } from "/scripts/app.js";
+import { app } from "../../scripts/app.js";
+import { ComfyDialog, $el } from "../../scripts/ui.js";
+import { ComfyApp } from "../../scripts/app.js";
 
 export class ClipspaceDialog extends ComfyDialog {
 	static items = [];
diff --git a/web/extensions/core/colorPalette.js b/web/extensions/core/colorPalette.js
index f8208a47524..3695b08e27f 100644
--- a/web/extensions/core/colorPalette.js
+++ b/web/extensions/core/colorPalette.js
@@ -1,5 +1,5 @@
-import {app} from "/scripts/app.js";
-import {$el} from "/scripts/ui.js";
+import {app} from "../../scripts/app.js";
+import {$el} from "../../scripts/ui.js";
 
 // Manage color palettes
 
diff --git a/web/extensions/core/editAttention.js b/web/extensions/core/editAttention.js
index b937bb103d7..6792b235720 100644
--- a/web/extensions/core/editAttention.js
+++ b/web/extensions/core/editAttention.js
@@ -1,4 +1,4 @@
-import { app } from "/scripts/app.js";
+import { app } from "../../scripts/app.js";
 
 // Allows you to edit the attention weight by holding ctrl (or cmd) and using the up/down arrow keys
 
diff --git a/web/extensions/core/invertMenuScrolling.js b/web/extensions/core/invertMenuScrolling.js
index f900fccf4d9..98a1786ab48 100644
--- a/web/extensions/core/invertMenuScrolling.js
+++ b/web/extensions/core/invertMenuScrolling.js
@@ -1,4 +1,4 @@
-import { app } from "/scripts/app.js";
+import { app } from "../../scripts/app.js";
 
 // Inverts the scrolling of context menus
 
diff --git a/web/extensions/core/keybinds.js b/web/extensions/core/keybinds.js
index bf26d2415f2..cf698ea5a66 100644
--- a/web/extensions/core/keybinds.js
+++ b/web/extensions/core/keybinds.js
@@ -1,4 +1,4 @@
-import {app} from "/scripts/app.js";
+import {app} from "../../scripts/app.js";
 
 app.registerExtension({
 	name: "Comfy.Keybinds",
diff --git a/web/extensions/core/maskeditor.js b/web/extensions/core/maskeditor.js
index 503c45f0ec4..c9b858831de 100644
--- a/web/extensions/core/maskeditor.js
+++ b/web/extensions/core/maskeditor.js
@@ -1,7 +1,7 @@
-import { app } from "/scripts/app.js";
-import { ComfyDialog, $el } from "/scripts/ui.js";
-import { ComfyApp } from "/scripts/app.js";
-import { ClipspaceDialog } from "/extensions/core/clipspace.js";
+import { app } from "../../scripts/app.js";
+import { ComfyDialog, $el } from "../../scripts/ui.js";
+import { ComfyApp } from "../../scripts/app.js";
+import { ClipspaceDialog } from "../../extensions/core/clipspace.js";
 
 // Helper function to convert a data URL to a Blob object
 function dataURLToBlob(dataURL) {
@@ -33,7 +33,7 @@ function loadedImageToBlob(image) {
 }
 
 async function uploadMask(filepath, formData) {
-	await fetch('/upload/mask', {
+	await fetch('./upload/mask', {
 		method: 'POST',
 		body: formData
 	}).then(response => {}).catch(error => {
@@ -41,7 +41,7 @@ async function uploadMask(filepath, formData) {
 	});
 
 	ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']] = new Image();
-	ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src = "/view?" + new URLSearchParams(filepath).toString() + app.getPreviewFormatParam();
+	ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src = "./view?" + new URLSearchParams(filepath).toString() + app.getPreviewFormatParam();
 
 	if(ComfyApp.clipspace.images)
 		ComfyApp.clipspace.images[ComfyApp.clipspace['selectedIndex']] = filepath;
diff --git a/web/extensions/core/nodeTemplates.js b/web/extensions/core/nodeTemplates.js
index 69d09cde839..7059f826d74 100644
--- a/web/extensions/core/nodeTemplates.js
+++ b/web/extensions/core/nodeTemplates.js
@@ -1,5 +1,5 @@
-import { app } from "/scripts/app.js";
-import { ComfyDialog, $el } from "/scripts/ui.js";
+import { app } from "../../scripts/app.js";
+import { ComfyDialog, $el } from "../../scripts/ui.js";
 
 // Adds the ability to save and add multiple nodes as a template
 // To save:
diff --git a/web/extensions/core/saveImageExtraOutput.js b/web/extensions/core/saveImageExtraOutput.js
index 6032d4cc7a6..99e2213bfee 100644
--- a/web/extensions/core/saveImageExtraOutput.js
+++ b/web/extensions/core/saveImageExtraOutput.js
@@ -1,4 +1,4 @@
-import { app } from "/scripts/app.js";
+import { app } from "../../scripts/app.js";
 
 // Use widget values and dates in output filenames
 
diff --git a/web/extensions/core/slotDefaults.js b/web/extensions/core/slotDefaults.js
index 5b830471134..718d2540571 100644
--- a/web/extensions/core/slotDefaults.js
+++ b/web/extensions/core/slotDefaults.js
@@ -1,5 +1,5 @@
-import { app } from "/scripts/app.js";
-import { ComfyWidgets } from "/scripts/widgets.js";
+import { app } from "../../scripts/app.js";
+import { ComfyWidgets } from "../../scripts/widgets.js";
 // Adds defaults for quickly adding nodes with middle click on the input/output
 
 app.registerExtension({
diff --git a/web/extensions/core/snapToGrid.js b/web/extensions/core/snapToGrid.js
index cb5fc154b50..dc534d6edf9 100644
--- a/web/extensions/core/snapToGrid.js
+++ b/web/extensions/core/snapToGrid.js
@@ -1,4 +1,4 @@
-import { app } from "/scripts/app.js";
+import { app } from "../../scripts/app.js";
 
 // Shift + drag/resize to snap to grid
 
diff --git a/web/extensions/core/uploadImage.js b/web/extensions/core/uploadImage.js
index 45fabb78ed7..f50473ae3b2 100644
--- a/web/extensions/core/uploadImage.js
+++ b/web/extensions/core/uploadImage.js
@@ -1,4 +1,4 @@
-import { app } from "/scripts/app.js";
+import { app } from "../../scripts/app.js";
 
 // Adds an upload button to the nodes
 
diff --git a/web/extensions/core/widgetInputs.js b/web/extensions/core/widgetInputs.js
index 6b5174968be..7600ce87b05 100644
--- a/web/extensions/core/widgetInputs.js
+++ b/web/extensions/core/widgetInputs.js
@@ -1,5 +1,5 @@
-import { ComfyWidgets, addValueControlWidget } from "/scripts/widgets.js";
-import { app } from "/scripts/app.js";
+import { ComfyWidgets, addValueControlWidget } from "../../scripts/widgets.js";
+import { app } from "../../scripts/app.js";
 
 const CONVERTED_TYPE = "converted-widget";
 const VALID_TYPES = ["STRING", "combo", "number"];
diff --git a/web/index.html b/web/index.html
index c48d716e1be..71067d99344 100644
--- a/web/index.html
+++ b/web/index.html
@@ -4,12 +4,12 @@
 		<meta charset="UTF-8">
 		<title>ComfyUI</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-		<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="text/javascript" src="lib/litegraph.extensions.js" defer></script>
+		<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="text/javascript" src="./lib/litegraph.extensions.js" defer></script>
 		<script type="module">
-			import { app } from "/scripts/app.js";
+			import { app } from "./scripts/app.js";
 			await app.setup();
 			window.app = app;
 			window.graph = app.graph;
diff --git a/web/scripts/api.js b/web/scripts/api.js
index d7d28fbed29..5e49285013e 100644
--- a/web/scripts/api.js
+++ b/web/scripts/api.js
@@ -16,7 +16,7 @@ class ComfyApi extends EventTarget {
 	#pollQueue() {
 		setInterval(async () => {
 			try {
-				const resp = await fetch("/prompt");
+				const resp = await fetch("./prompt");
 				const status = await resp.json();
 				this.dispatchEvent(new CustomEvent("status", { detail: status }));
 			} catch (error) {
@@ -40,7 +40,7 @@ class ComfyApi extends EventTarget {
 			existingSession = "?clientId=" + existingSession;
 		}
 		this.socket = new WebSocket(
-			`ws${window.location.protocol === "https:" ? "s" : ""}://${location.host}/ws${existingSession}`
+			`ws${window.location.protocol === "https:" ? "s" : ""}://${location.host}${location.pathname}ws${existingSession}`
 		);
 		this.socket.binaryType = "arraybuffer";
 
@@ -149,7 +149,7 @@ class ComfyApi extends EventTarget {
 	 * @returns An array of script urls to import
 	 */
 	async getExtensions() {
-		const resp = await fetch("/extensions", { cache: "no-store" });
+		const resp = await fetch("./extensions", { cache: "no-store" });
 		return await resp.json();
 	}
 
@@ -158,7 +158,7 @@ class ComfyApi extends EventTarget {
 	 * @returns An array of script urls to import
 	 */
 	async getEmbeddings() {
-		const resp = await fetch("/embeddings", { cache: "no-store" });
+		const resp = await fetch("./embeddings", { cache: "no-store" });
 		return await resp.json();
 	}
 
@@ -167,7 +167,7 @@ class ComfyApi extends EventTarget {
 	 * @returns The node definitions
 	 */
 	async getNodeDefs() {
-		const resp = await fetch("object_info", { cache: "no-store" });
+		const resp = await fetch("./object_info", { cache: "no-store" });
 		return await resp.json();
 	}
 
@@ -189,7 +189,7 @@ class ComfyApi extends EventTarget {
 			body.number = number;
 		}
 
-		const res = await fetch("/prompt", {
+		const res = await fetch("./prompt", {
 			method: "POST",
 			headers: {
 				"Content-Type": "application/json",
@@ -222,7 +222,7 @@ class ComfyApi extends EventTarget {
 	 */
 	async getQueue() {
 		try {
-			const res = await fetch("/queue");
+			const res = await fetch("./queue");
 			const data = await res.json();
 			return {
 				// Running action uses a different endpoint for cancelling
@@ -244,7 +244,7 @@ class ComfyApi extends EventTarget {
 	 */
 	async getHistory() {
 		try {
-			const res = await fetch("/history");
+			const res = await fetch("./history");
 			return { History: Object.values(await res.json()) };
 		} catch (error) {
 			console.error(error);
@@ -259,7 +259,7 @@ class ComfyApi extends EventTarget {
 	 */
 	async #postItem(type, body) {
 		try {
-			await fetch("/" + type, {
+			await fetch("./" + type, {
 				method: "POST",
 				headers: {
 					"Content-Type": "application/json",
diff --git a/web/scripts/app.js b/web/scripts/app.js
index bf424058fda..bd5afe0d2c5 100644
--- a/web/scripts/app.js
+++ b/web/scripts/app.js
@@ -404,7 +404,7 @@ export class ComfyApp {
 						this.images = output.images;
 						imagesChanged = true;
 						imgURLs = imgURLs.concat(output.images.map(params => {
-							return "/view?" + new URLSearchParams(params).toString() + app.getPreviewFormatParam();
+							return "./view?" + new URLSearchParams(params).toString() + app.getPreviewFormatParam();
 						}))
 					}
 				}
@@ -1005,7 +1005,7 @@ export class ComfyApp {
 		const extensions = await api.getExtensions();
 		for (const ext of extensions) {
 			try {
-				await import(ext);
+				await import(".." + ext);
 			} catch (error) {
 				console.error("Error loading extension", ext, error);
 			}
diff --git a/web/scripts/widgets.js b/web/scripts/widgets.js
index 4fc5dc19942..356c57a5b95 100644
--- a/web/scripts/widgets.js
+++ b/web/scripts/widgets.js
@@ -305,7 +305,7 @@ export const ComfyWidgets = {
 				subfolder = name.substring(0, folder_separator);
 				name = name.substring(folder_separator + 1);
 			}
-			img.src = `/view?filename=${name}&type=input&subfolder=${subfolder}${app.getPreviewFormatParam()}`;
+			img.src = `./view?filename=${name}&type=input&subfolder=${subfolder}${app.getPreviewFormatParam()}`;
 			node.setSizeForImage?.();
 		}
 
@@ -362,7 +362,7 @@ export const ComfyWidgets = {
 				// Wrap file in formdata so it includes filename
 				const body = new FormData();
 				body.append("image", file);
-				const resp = await fetch("/upload/image", {
+				const resp = await fetch("./upload/image", {
 					method: "POST",
 					body,
 				});
diff --git a/web/types/comfy.d.ts b/web/types/comfy.d.ts
index 3bb92454339..8444e13a8c8 100644
--- a/web/types/comfy.d.ts
+++ b/web/types/comfy.d.ts
@@ -1,5 +1,5 @@
 import { LGraphNode, IWidget } from "./litegraph";
-import { ComfyApp } from "/scripts/app";
+import { ComfyApp } from "../../scripts/app";
 
 export interface ComfyExtension {
 	/**