298977887/ComfyUI
1
0
Fork 0
mirror of https://github.com/comfyanonymous/ComfyUI.git synced 2025-04-20 03:13:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor to make it easier to set the api path.

Browse Source
This commit is contained in:
comfyanonymous 2023-07-14 00:46:25 -04:00
parent 30ea187160
commit 907c9fbf0d
4 changed files with 29 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/extensions/core/maskeditor.js
View File

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

28
web/scripts/api.js
View File

@ -3,6 +3,16 @@ class ComfyApi extends EventTarget {
constructor() { constructor() {
super(); 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) { addEventListener(type, callback, options) {
@ -16,7 +26,7 @@ class ComfyApi extends EventTarget {
#pollQueue() { #pollQueue() {
setInterval(async () => { setInterval(async () => {
try { try {
const resp = await fetch("./prompt"); const resp = await this.fetchApi("/prompt");
const status = await resp.json(); const status = await resp.json();
this.dispatchEvent(new CustomEvent("status", { detail: status })); this.dispatchEvent(new CustomEvent("status", { detail: status }));
} catch (error) { } catch (error) {
@ -40,7 +50,7 @@ class ComfyApi extends EventTarget {
existingSession = "?clientId=" + existingSession; existingSession = "?clientId=" + existingSession;
} }
this.socket = new WebSocket( 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"; this.socket.binaryType = "arraybuffer";
@ -149,7 +159,7 @@ class ComfyApi extends EventTarget {
* @returns An array of script urls to import * @returns An array of script urls to import
*/ */
async getExtensions() { async getExtensions() {
const resp = await fetch("./extensions", { cache: "no-store" }); const resp = await this.fetchApi("/extensions", { cache: "no-store" });
return await resp.json(); return await resp.json();
} }
@ -158,7 +168,7 @@ class ComfyApi extends EventTarget {
* @returns An array of script urls to import * @returns An array of script urls to import
*/ */
async getEmbeddings() { async getEmbeddings() {
const resp = await fetch("./embeddings", { cache: "no-store" }); const resp = await this.fetchApi("/embeddings", { cache: "no-store" });
return await resp.json(); return await resp.json();
} }
@ -167,7 +177,7 @@ class ComfyApi extends EventTarget {
* @returns The node definitions * @returns The node definitions
*/ */
async getNodeDefs() { 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(); return await resp.json();
} }
@ -189,7 +199,7 @@ class ComfyApi extends EventTarget {
body.number = number; body.number = number;
} }
const res = await fetch("./prompt", { const res = await this.fetchApi("/prompt", {
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
@ -224,7 +234,7 @@ class ComfyApi extends EventTarget {
*/ */
async getQueue() { async getQueue() {
try { try {
const res = await fetch("./queue"); const res = await this.fetchApi("/queue");
const data = await res.json(); const data = await res.json();
return { return {
// Running action uses a different endpoint for cancelling // Running action uses a different endpoint for cancelling
@ -246,7 +256,7 @@ class ComfyApi extends EventTarget {
*/ */
async getHistory() { async getHistory() {
try { try {
const res = await fetch("./history"); const res = await this.fetchApi("/history");
return { History: Object.values(await res.json()) }; return { History: Object.values(await res.json()) };
} catch (error) { } catch (error) {
console.error(error); console.error(error);
@ -261,7 +271,7 @@ class ComfyApi extends EventTarget {
*/ */
async #postItem(type, body) { async #postItem(type, body) {
try { try {
await fetch("./" + type, { await this.fetchApi("/" + type, {
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",

4
web/scripts/app.js
View File

@ -404,7 +404,7 @@ export class ComfyApp {
this.images = output.images; this.images = output.images;
imagesChanged = true; imagesChanged = true;
imgURLs = imgURLs.concat(output.images.map(params => { 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(); const extensions = await api.getExtensions();
for (const ext of extensions) { for (const ext of extensions) {
try { try {
await import(".." + ext); await import(api.apiURL(ext));
} catch (error) { } catch (error) {
console.error("Error loading extension", ext, error); console.error("Error loading extension", ext, error);
} }

6
web/scripts/widgets.js
View File

@ -1,3 +1,5 @@
import { api } from "./api.js"
function getNumberDefaults(inputData, defaultStep) { function getNumberDefaults(inputData, defaultStep) {
let defaultVal = inputData[1]["default"]; let defaultVal = inputData[1]["default"];
let { min, max, step } = inputData[1]; let { min, max, step } = inputData[1];
@ -305,7 +307,7 @@ export const ComfyWidgets = {
subfolder = name.substring(0, folder_separator); subfolder = name.substring(0, folder_separator);
name = name.substring(folder_separator + 1); 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?.(); node.setSizeForImage?.();
} }
@ -362,7 +364,7 @@ export const ComfyWidgets = {
// Wrap file in formdata so it includes filename // Wrap file in formdata so it includes filename
const body = new FormData(); const body = new FormData();
body.append("image", file); body.append("image", file);
const resp = await fetch("./upload/image", { const resp = await api.fetchApi("/upload/image", {
method: "POST", method: "POST",
body, body,
}); });