qnloft
/
ComfyUI
mirror of https://github.com/comfyanonymous/ComfyUI.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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.
This commit is contained in:
Alex "mcmonkey" Goodwin 2023-07-10 02:09:03 -07:00
parent af15add967
commit 5797ff89b0
17 changed files with 42 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/extensions/core/clipspace.js
View File

@ -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 = [];

4
web/extensions/core/colorPalette.js
View File

@ -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

2
web/extensions/core/editAttention.js
View File

@ -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

2
web/extensions/core/invertMenuScrolling.js
View File

@ -1,4 +1,4 @@
import { app } from "/scripts/app.js";
import { app } from "../../scripts/app.js";
// Inverts the scrolling of context menus

2
web/extensions/core/keybinds.js
View File

@ -1,4 +1,4 @@
import {app} from "/scripts/app.js";
import {app} from "../../scripts/app.js";
app.registerExtension({
name: "Comfy.Keybinds",

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

@ -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;

4
web/extensions/core/nodeTemplates.js
View File

@ -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:

2
web/extensions/core/saveImageExtraOutput.js
View File

@ -1,4 +1,4 @@
import { app } from "/scripts/app.js";
import { app } from "../../scripts/app.js";
// Use widget values and dates in output filenames

4
web/extensions/core/slotDefaults.js
View File

@ -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({

2
web/extensions/core/snapToGrid.js
View File

@ -1,4 +1,4 @@
import { app } from "/scripts/app.js";
import { app } from "../../scripts/app.js";
// Shift + drag/resize to snap to grid

2
web/extensions/core/uploadImage.js
View File

@ -1,4 +1,4 @@
import { app } from "/scripts/app.js";
import { app } from "../../scripts/app.js";
// Adds an upload button to the nodes

4
web/extensions/core/widgetInputs.js
View File

@ -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"];

10
web/index.html
View File

@ -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;

18
web/scripts/api.js
View File

@ -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",

4
web/scripts/app.js
View File

@ -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);
}

4
web/scripts/widgets.js
View File

@ -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,
});

2
web/types/comfy.d.ts vendored
View File

@ -1,5 +1,5 @@
import { LGraphNode, IWidget } from "./litegraph";
import { ComfyApp } from "/scripts/app";
import { ComfyApp } from "../../scripts/app";
export interface ComfyExtension {
/**