admin/ComfyUI-OpenClaw
1
0
Fork 0
mirror of https://github.com/rookiestar28/ComfyUI-OpenClaw.git synced 2026-08-14 08:52:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve png info error and comfyui rendering

Browse Source
This commit is contained in:
rookiestar28
2026-04-09 00:14:26 +08:00
parent 11fec30e8e
commit 8209d7d9b2
3 changed files with 162 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/e2e/specs/png_info.spec.js
+60 -3
View File
@@ -128,11 +128,23 @@ test.describe('PNG Info Tab', () => {
body: JSON.stringify({
ok: true,
source: 'comfyui',
info: 'ComfyUI metadata detected.',
parameters: {},
info: 'ComfyUI metadata detected. Extracted prompt and sampler fields from saved graph.',
parameters: {
positive_prompt: 'Global: cinematic portrait\nLocal: sharp details',
negative_prompt: 'blurry',
Steps: 30,
Sampler: 'dpmpp_2m',
Scheduler: 'karras',
Model: 'sdxl-base.safetensors',
},
items: {
prompt: {
10: {
class_type: 'KSamplerAdvanced',
},
},
workflow: {
nodes: [{ id: 1, type: 'SaveImage' }],
nodes: [{ id: 10, type: 'KSamplerAdvanced' }],
},
},
}),
@@ -173,6 +185,51 @@ test.describe('PNG Info Tab', () => {
await expect(page.locator('#pnginfo-status')).toHaveText('Metadata ready');
await expect(page.locator('#pnginfo-summary-card')).toContainText('COMFYUI');
await expect(page.locator('#pnginfo-summary-card')).toContainText('sdxl-base.safetensors');
await expect(page.locator('#pnginfo-summary-card')).toContainText('dpmpp_2m');
await expect(page.locator('#pnginfo-positive')).toContainText('cinematic portrait');
await expect(page.locator('#pnginfo-negative')).toContainText('blurry');
await expect(page.locator('#pnginfo-raw')).toContainText('"class_type": "KSamplerAdvanced"');
expect(pngInfoRequests).toBe(1);
});
test('surfaces a friendly oversized-image error message', async ({ page }) => {
await mockComfyUiCore(page);
await page.route('**/pnginfo', async (route) => {
const req = route.request();
const url = new URL(req.url());
if (req.method() !== 'POST' || !isPngInfoPath(url.pathname)) {
await route.fallback();
return;
}
await route.fulfill({
status: 400,
contentType: 'application/json',
body: JSON.stringify({
ok: false,
error: 'image_b64_too_large',
detail: 'image_b64 exceeds the PNG Info limit (64 MiB). PNG Info must inspect the original metadata-bearing file without browser recompression.',
}),
});
});
await page.goto('test-harness.html');
await waitForOpenClawReady(page);
await clickTab(page, 'PNG Info');
await page.evaluate((pngBytes) => {
const bytes = Uint8Array.from(pngBytes);
const file = new File([bytes], 'huge.png', { type: 'image/png' });
const transfer = new DataTransfer();
transfer.items.add(file);
const event = new DragEvent('drop', { bubbles: true, cancelable: true, dataTransfer: transfer });
document.querySelector('#pnginfo-dropzone').dispatchEvent(event);
}, [...PNG_BUFFER]);
await expect(page.locator('#pnginfo-status')).toHaveText('Load failed');
await expect(page.locator('.openclaw-error-box')).toContainText('PNG Info limit (64 MiB)');
await expect(page.locator('.openclaw-error-box')).toContainText('metadata-bearing file without browser recompression');
});
});
web/tabs/png_info_tab.js
+20 -2
View File
@@ -104,6 +104,24 @@ function buildSummaryRows(result) {
return rows;
}
function formatPngInfoError(errorLike) {
const code = errorLike?.error || errorLike?.data?.error || "";
const detail = errorLike?.data?.detail || errorLike?.detail || "";
if (code === "image_b64_too_large") {
return detail || "The selected image exceeds the PNG Info upload limit. PNG Info must inspect the original metadata-bearing file without browser recompression.";
}
if (detail) {
return detail;
}
if (code) {
return code;
}
if (errorLike?.message) {
return errorLike.message;
}
return String(errorLike || "pnginfo_request_failed");
}
function renderPromptBlock(title, value, actionId) {
const body = escapeHtml(value || "");
const copyButton = value
@@ -303,7 +321,7 @@ export const PngInfoTab = {
setStatus("Inspecting metadata...", "");
const res = await openclawApi.parsePngInfo(imageB64);
if (!res?.ok) {
throw new Error(res?.error || "pnginfo_request_failed");
throw new Error(formatPngInfoError(res));
}
renderResult(res.data || {});
if (res?.data?.source === "unknown" && !Object.keys(res?.data?.items || {}).length) {
@@ -314,7 +332,7 @@ export const PngInfoTab = {
} catch (error) {
resetResults();
setStatus("Load failed", "error");
showError(container, `PNG Info failed: ${error?.message || String(error)}`);
showError(container, formatPngInfoError(error));
}
};
web/tests/unit/png_info_tab.test.js
+82
View File
@@ -126,4 +126,86 @@ describe("png_info_tab", () => {
expect(container.querySelector("#pnginfo-summary-card").textContent).toContain("UNKNOWN");
expect(container.querySelector("#pnginfo-raw").textContent).toContain("No raw metadata blocks found.");
});
it("renders ComfyUI semantic extraction fields without hiding raw metadata", async () => {
apiMock.parsePngInfo.mockResolvedValue({
ok: true,
data: {
source: "comfyui",
info: "ComfyUI metadata detected. Extracted prompt and sampler fields from saved graph.",
parameters: {
positive_prompt: "Global: cinematic portrait\nLocal: sharp details",
negative_prompt: "blurry",
Steps: 30,
Sampler: "dpmpp_2m",
Scheduler: "karras",
Model: "sdxl-base.safetensors",
},
items: {
prompt: {
10: {
class_type: "KSamplerAdvanced",
},
},
workflow: {
nodes: [{ id: 10, type: "KSamplerAdvanced" }],
},
},
},
});
const container = document.createElement("div");
PngInfoTab.render(container);
const fileInput = container.querySelector("#pnginfo-file-input");
const file = new File(["x"], "comfy.png", { type: "image/png" });
Object.defineProperty(fileInput, "files", {
configurable: true,
value: [file],
});
fileInput.dispatchEvent(new Event("change"));
await vi.waitFor(() => {
expect(container.querySelector("#pnginfo-status").textContent).toBe("Metadata ready");
});
expect(container.querySelector("#pnginfo-summary-card").textContent).toContain("COMFYUI");
expect(container.querySelector("#pnginfo-summary-card").textContent).toContain("sdxl-base.safetensors");
expect(container.querySelector("#pnginfo-summary-card").textContent).toContain("dpmpp_2m");
expect(container.querySelector("#pnginfo-positive").textContent).toContain("cinematic portrait");
expect(container.querySelector("#pnginfo-negative").textContent).toContain("blurry");
expect(container.querySelector("#pnginfo-raw").textContent).toContain('"class_type": "KSamplerAdvanced"');
});
it("shows a friendly oversize message instead of the raw backend code", async () => {
apiMock.parsePngInfo.mockResolvedValue({
ok: false,
error: "image_b64_too_large",
data: {
detail: "image_b64 exceeds the PNG Info limit (64 MiB). PNG Info must inspect the original metadata-bearing file without browser recompression.",
},
});
const container = document.createElement("div");
PngInfoTab.render(container);
const fileInput = container.querySelector("#pnginfo-file-input");
const file = new File(["x"], "huge.png", { type: "image/png" });
Object.defineProperty(fileInput, "files", {
configurable: true,
value: [file],
});
fileInput.dispatchEvent(new Event("change"));
await vi.waitFor(() => {
expect(container.querySelector("#pnginfo-status").textContent).toBe("Load failed");
});
expect(utilsMock.showError).toHaveBeenCalledWith(
container,
"image_b64 exceeds the PNG Info limit (64 MiB). PNG Info must inspect the original metadata-bearing file without browser recompression."
);
});
});