From 907c9fbf0d1a74cb05f437c10903a948ac421d38 Mon Sep 17 00:00:00 2001 From: comfyanonymous Date: Fri, 14 Jul 2023 00:46:25 -0400 Subject: [PATCH] Refactor to make it easier to set the api path. --- web/extensions/core/maskeditor.js | 7 ++++--- web/scripts/api.js | 28 +++++++++++++++++++--------- web/scripts/app.js | 4 ++-- web/scripts/widgets.js | 6 ++++-- 4 files changed, 29 insertions(+), 16 deletions(-) diff --git a/web/extensions/core/maskeditor.js b/web/extensions/core/maskeditor.js index c9b858831de..f6292b9e378 100644 --- a/web/extensions/core/maskeditor.js +++ b/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,7 +34,7 @@ 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 => { @@ -41,7 +42,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 = api.apiURL("/view?" + new URLSearchParams(filepath).toString() + app.getPreviewFormatParam()); if(ComfyApp.clipspace.images) ComfyApp.clipspace.images[ComfyApp.clipspace['selectedIndex']] = filepath; diff --git a/web/scripts/api.js b/web/scripts/api.js index 57451d77601..d3d15e47e19 100644 --- a/web/scripts/api.js +++ b/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", diff --git a/web/scripts/app.js b/web/scripts/app.js index a1b8470e29d..5d54edd7651 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 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); } diff --git a/web/scripts/widgets.js b/web/scripts/widgets.js index 356c57a5b95..a8afc29b0db 100644 --- a/web/scripts/widgets.js +++ b/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, });