The header's button rules are !important, so a <button> chip lost its own colours and size; it is a span again, with role="button", a tab stop and Enter / Space opening its explanation. The start-up line about allow_remote_changes is flushed at once, so it shows even when ComfyUI's output goes to a file. Checked on an isolated ComfyUI behind a stand-in gateway that adds X-Forwarded-For (as a cloud platform's proxy does): without the file the page is view only and changes answer 403; with it the chip reads "remote changes on" in yellow, a scan choice is saved and reset, and a picked offline scan runs to the end. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
40 lines
1.9 KiB
JavaScript
40 lines
1.9 KiB
JavaScript
/**
|
|
* Opened from another device (ComfyUI started with --listen, or on a rented cloud server): a chip
|
|
* in the header says so. Usually "view only" (the server refuses changes from other devices,
|
|
* api/local_guard.py), and pressed it says how cloud users can still change things: an SSH tunnel,
|
|
* or the allow_remote_changes file on the server. With that file there, "remote changes on",
|
|
* marked, and pressed it says that anyone who can open the page may change things. Nothing shows
|
|
* on the computer ComfyUI runs on.
|
|
*/
|
|
|
|
import { translate as t } from './locales.js';
|
|
import { anomalousAlert } from './ui_dialog.js';
|
|
|
|
/** Asks the server once whether this page is on its computer; when not, marks the window and adds the chip to `group`. */
|
|
export async function markRemoteView(container, group) {
|
|
let data = null;
|
|
try {
|
|
const response = await fetch('/anomalous/access', { cache: 'no-store' });
|
|
data = response.ok ? await response.json() : null;
|
|
} catch {
|
|
return; // an older server without the route: nothing to say
|
|
}
|
|
if (!data || data.local !== false) return;
|
|
const open = data.changes === true;
|
|
if (!open) container.classList.add('anomalous-remote-view');
|
|
// A span with a button's role and keys: the header's button rules (!important) would restyle a <button>.
|
|
const chip = document.createElement('span');
|
|
chip.setAttribute('role', 'button');
|
|
chip.tabIndex = 0;
|
|
chip.className = `anomalous-remote-chip${open ? ' is-open' : ''}`;
|
|
chip.textContent = t(open ? 'remoteChangesChip' : 'remoteViewChip');
|
|
chip.title = t(open ? 'remoteChangesHint' : 'remoteViewHint');
|
|
chip.onclick = () => anomalousAlert(chip.title, chip.textContent);
|
|
chip.onkeydown = (event) => {
|
|
if (event.key !== 'Enter' && event.key !== ' ') return;
|
|
event.preventDefault();
|
|
chip.click();
|
|
};
|
|
group.append(chip);
|
|
}
|