Refactor to make it easier to set the api path.

web/extensions/core/maskeditor.js

@@ -1,7 +1,8 @@
 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 { api } from "../../scripts/api.js"
+import { ClipspaceDialog } from "./clipspace.js";
 
 // Helper function to convert a data URL to a Blob object
 function dataURLToBlob(dataURL) {
@@ -33,15 +34,15 @@ function loadedImageToBlob(image) {
 }
 
 async function uploadMask(filepath, formData) {
-	await fetch('./upload/mask', {
+	await api.fetchApi('/upload/mask', {
 		method: 'POST',
 		body: formData
 	}).then(response => {}).catch(error => {
 		console.error('Error:', error);
 	});
 
 	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 = api.apiURL("/view?" + new URLSearchParams(filepath).toString() + app.getPreviewFormatParam());
 
 	if(ComfyApp.clipspace.images)
 		ComfyApp.clipspace.images[ComfyApp.clipspace['selectedIndex']] = filepath;

web/scripts/api.js

@@ -3,6 +3,16 @@ class ComfyApi extends EventTarget {
 
 	constructor() {
 		super();
+		this.api_host = location.host;
+		this.api_base = location.pathname.split('/').slice(0, -1).join('/');
+	}
+
+	apiURL(route) {
+		return this.api_base + route;
+	}
+
+	fetchApi(route, options) {
+		return fetch(this.apiURL(route), options);
 	}
 
 	addEventListener(type, callback, options) {
@@ -16,7 +26,7 @@ class ComfyApi extends EventTarget {
 	#pollQueue() {
 		setInterval(async () => {
 			try {
-				const resp = await fetch("./prompt");
+				const resp = await this.fetchApi("/prompt");
 				const status = await resp.json();
 				this.dispatchEvent(new CustomEvent("status", { detail: status }));
 			} catch (error) {
@@ -40,7 +50,7 @@ class ComfyApi extends EventTarget {
 			existingSession = "?clientId=" + existingSession;
 		}
 		this.socket = new WebSocket(
-			`ws${window.location.protocol === "https:" ? "s" : ""}://${location.host}${location.pathname}ws${existingSession}`
+			`ws${window.location.protocol === "https:" ? "s" : ""}://${this.api_host}${this.api_base}/ws${existingSession}`
 		);
 		this.socket.binaryType = "arraybuffer";
 
@@ -149,7 +159,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 this.fetchApi("/extensions", { cache: "no-store" });
 		return await resp.json();
 	}
 
@@ -158,7 +168,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 this.fetchApi("/embeddings", { cache: "no-store" });
 		return await resp.json();
 	}
 
@@ -167,7 +177,7 @@ class ComfyApi extends EventTarget {
 	 * @returns The node definitions
 	 */
 	async getNodeDefs() {
-		const resp = await fetch("./object_info", { cache: "no-store" });
+		const resp = await this.fetchApi("/object_info", { cache: "no-store" });
 		return await resp.json();
 	}
 
@@ -189,7 +199,7 @@ class ComfyApi extends EventTarget {
 			body.number = number;
 		}
 
-		const res = await fetch("./prompt", {
+		const res = await this.fetchApi("/prompt", {
 			method: "POST",
 			headers: {
 				"Content-Type": "application/json",
@@ -224,7 +234,7 @@ class ComfyApi extends EventTarget {
 	 */
 	async getQueue() {
 		try {
-			const res = await fetch("./queue");
+			const res = await this.fetchApi("/queue");
 			const data = await res.json();
 			return {
 				// Running action uses a different endpoint for cancelling
@@ -246,7 +256,7 @@ class ComfyApi extends EventTarget {
 	 */
 	async getHistory() {
 		try {
-			const res = await fetch("./history");
+			const res = await this.fetchApi("/history");
 			return { History: Object.values(await res.json()) };
 		} catch (error) {
 			console.error(error);
@@ -261,7 +271,7 @@ class ComfyApi extends EventTarget {
 	 */
 	async #postItem(type, body) {
 		try {
-			await fetch("./" + type, {
+			await this.fetchApi("/" + type, {
 				method: "POST",
 				headers: {
 					"Content-Type": "application/json",

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 api.apiURL("/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(api.apiURL(ext));
 			} catch (error) {
 				console.error("Error loading extension", ext, error);
 			}

web/scripts/widgets.js

@@ -1,3 +1,5 @@
+import { api } from "./api.js"
+
 function getNumberDefaults(inputData, defaultStep) {
 	let defaultVal = inputData[1]["default"];
 	let { min, max, step } = inputData[1];
@@ -305,7 +307,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 = api.apiURL(`/view?filename=${name}&type=input&subfolder=${subfolder}${app.getPreviewFormatParam()}`);
 			node.setSizeForImage?.();
 		}
 
@@ -362,7 +364,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 api.fetchApi("/upload/image", {
 					method: "POST",
 					body,
 				});