- Added Image Upload Node
- Added Black & White Image Threshold Filter Node - Changed Color of Node Headers to #58a6ff - Misc Changes
This commit is contained in:
@ -51,6 +51,7 @@
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
font-weight: bold;
|
||||
color: #58a6ff;
|
||||
font-size: 10px;
|
||||
}
|
||||
.borealis-node-content {
|
||||
@ -68,7 +69,7 @@ input, select, button {
|
||||
background-color: #2a2a2a;
|
||||
color: #ccc;
|
||||
border: 1px solid #444;
|
||||
font-size: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Label / Dark Text styling */
|
||||
|
||||
@ -70,17 +70,6 @@ const APINode = ({ id, data }) => {
|
||||
});
|
||||
};
|
||||
|
||||
const resetAgent = () => {
|
||||
if (!selectedAgent) return;
|
||||
fetch("/api/agent/reset", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ agent_id: selectedAgent })
|
||||
}).then(() => {
|
||||
setSelectedAgent("");
|
||||
});
|
||||
};
|
||||
|
||||
const toggleOverlay = () => {
|
||||
const newVisibility = !overlayVisible;
|
||||
setOverlayVisible(newVisibility);
|
||||
@ -148,13 +137,7 @@ const APINode = ({ id, data }) => {
|
||||
style={{ flex: 1, fontSize: "9px" }}
|
||||
onClick={provisionAgent}
|
||||
>
|
||||
Provision
|
||||
</button>
|
||||
<button
|
||||
style={{ flex: 1, fontSize: "9px" }}
|
||||
onClick={resetAgent}
|
||||
>
|
||||
Reset Agent
|
||||
(Re)Provision
|
||||
</button>
|
||||
<button
|
||||
style={{ flex: 1, fontSize: "9px" }}
|
||||
|
||||
303
Data/WebUI/src/nodes/Image Processing/BW_Threshold.jsx
Normal file
303
Data/WebUI/src/nodes/Image Processing/BW_Threshold.jsx
Normal file
@ -0,0 +1,303 @@
|
||||
/**
|
||||
* =================================================================
|
||||
* Borealis Threshold Node
|
||||
* with Per-Node Unique ID & BorealisValueBus Persistence
|
||||
* =================================================================
|
||||
*
|
||||
* GOALS:
|
||||
* 1) Generate a unique ID for this node instance (the "threshold node instance ID").
|
||||
* 2) Store that ID in node.data._thresholdId if it<69>s not already there.
|
||||
* 3) Use that ID to read/write the threshold from window.BorealisValueBus,
|
||||
* so that if the node is forcibly unmounted & remounted but re-uses the
|
||||
* same node.data._thresholdId, we restore the slider.
|
||||
*
|
||||
* HOW IT WORKS:
|
||||
* - On mount, we check if node.data._thresholdId exists.
|
||||
* - If yes, we use that as our "instance ID".
|
||||
* - If no, we create a new random ID (like a GUID) and store it in node.data._thresholdId
|
||||
* and also do a one-time `setNodes()` call to update the node data so it persists.
|
||||
* - Once we have that instance ID, we look up
|
||||
* `window.BorealisValueBus["th|" + instanceId]` for a saved threshold.
|
||||
* - If found, we initialize the slider with that. Otherwise 128.
|
||||
* - On slider change, we update that bus key with the new threshold.
|
||||
* - On each unmount/mount cycle, if the node<64>s data still has `_thresholdId`,
|
||||
* we reload from the same bus key, preventing a <20>rubber-banding<6E> reset.
|
||||
*
|
||||
* NOTE:
|
||||
* - We do call setNodes() once if we have to embed the newly generated ID into node.data.
|
||||
* But we do it carefully, minimal, so we don't forcibly re-create the node.
|
||||
* If your parent code overwrites node.data, we lose the ID.
|
||||
*
|
||||
* WARNING:
|
||||
* - If the parent changes the node<64>s ID or data every time, there's no fix. This is the
|
||||
* best we can do entirely inside this node<64>s code.
|
||||
*/
|
||||
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { Handle, Position, useStore, useReactFlow } from "reactflow";
|
||||
|
||||
// Ensure BorealisValueBus exists
|
||||
if (!window.BorealisValueBus) {
|
||||
window.BorealisValueBus = {};
|
||||
}
|
||||
|
||||
// Default global update rate
|
||||
if (!window.BorealisUpdateRate) {
|
||||
window.BorealisUpdateRate = 100;
|
||||
}
|
||||
|
||||
/**
|
||||
* Utility to generate a random GUID-like string
|
||||
*/
|
||||
function generateGUID() {
|
||||
// Very simple random hex approach
|
||||
return "xxxx-4xxx-yxxx-xxxx".replace(/[xy]/g, function (c) {
|
||||
const r = Math.random() * 16 | 0;
|
||||
const v = c === "x" ? r : (r & 0x3 | 0x8);
|
||||
return v.toString(16);
|
||||
});
|
||||
}
|
||||
|
||||
const PersistentThresholdNode = ({ id, data }) => {
|
||||
const edges = useStore((state) => state.edges);
|
||||
const { setNodes } = useReactFlow(); // so we can store our unique ID in node.data if needed
|
||||
|
||||
// We'll store:
|
||||
// 1) The node<64>s unique threshold instance ID (guid)
|
||||
// 2) The slider threshold in local React state
|
||||
const [instanceId, setInstanceId] = useState(() => {
|
||||
// See if we already have an ID in data._thresholdId
|
||||
const existing = data?._thresholdId;
|
||||
return existing || ""; // If not found, empty string for now
|
||||
});
|
||||
|
||||
const [threshold, setThreshold] = useState(128);
|
||||
|
||||
// For checking upstream changes
|
||||
const [renderValue, setRenderValue] = useState("");
|
||||
const valueRef = useRef(renderValue);
|
||||
|
||||
// MOUNT / UNMOUNT debug
|
||||
useEffect(() => {
|
||||
console.log(`[ThresholdNode:${id}] MOUNTED (instanceId=${instanceId || "none"})`);
|
||||
return () => {
|
||||
console.log(`[ThresholdNode:${id}] UNMOUNTED (instanceId=${instanceId || "none"})`);
|
||||
};
|
||||
}, [id, instanceId]);
|
||||
|
||||
/**
|
||||
* On first mount, we see if we have an instanceId in node.data.
|
||||
* If not, we create one, call setNodes() to store it in data._thresholdId.
|
||||
*/
|
||||
useEffect(() => {
|
||||
if (!instanceId) {
|
||||
// Generate a new ID
|
||||
const newId = generateGUID();
|
||||
console.log(`[ThresholdNode:${id}] Generating new instanceId=${newId}`);
|
||||
|
||||
// Insert it into this node<64>s data
|
||||
setNodes((prevNodes) =>
|
||||
prevNodes.map((n) => {
|
||||
if (n.id === id) {
|
||||
return {
|
||||
...n,
|
||||
data: {
|
||||
...n.data,
|
||||
_thresholdId: newId
|
||||
}
|
||||
};
|
||||
}
|
||||
return n;
|
||||
})
|
||||
);
|
||||
setInstanceId(newId);
|
||||
} else {
|
||||
console.log(`[ThresholdNode:${id}] Found existing instanceId=${instanceId}`);
|
||||
}
|
||||
}, [id, instanceId, setNodes]);
|
||||
|
||||
/**
|
||||
* Once we have an instanceId (existing or new), load the threshold from BorealisValueBus
|
||||
* We skip if we haven't assigned instanceId yet.
|
||||
*/
|
||||
useEffect(() => {
|
||||
if (!instanceId) return; // wait for the ID to be set
|
||||
|
||||
// Look for a previously saved threshold in the bus
|
||||
const savedKey = `th|${instanceId}`;
|
||||
let savedVal = window.BorealisValueBus[savedKey];
|
||||
if (typeof savedVal !== "number") {
|
||||
// default to 128
|
||||
savedVal = 128;
|
||||
}
|
||||
console.log(`[ThresholdNode:${id}] init threshold from bus key=${savedKey} => ${savedVal}`);
|
||||
setThreshold(savedVal);
|
||||
}, [id, instanceId]);
|
||||
|
||||
/**
|
||||
* Threshold slider handle
|
||||
*/
|
||||
const handleSliderChange = (e) => {
|
||||
const newVal = parseInt(e.target.value, 10);
|
||||
setThreshold(newVal);
|
||||
console.log(`[ThresholdNode:${id}] Slider => ${newVal}`);
|
||||
|
||||
// Immediately store in BorealisValueBus
|
||||
if (instanceId) {
|
||||
const savedKey = `th|${instanceId}`;
|
||||
window.BorealisValueBus[savedKey] = newVal;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Helper function to apply threshold to base64
|
||||
*/
|
||||
const applyThreshold = async (base64Data, cutoff) => {
|
||||
if (!base64Data || typeof base64Data !== "string") {
|
||||
return "";
|
||||
}
|
||||
return new Promise((resolve) => {
|
||||
const img = new Image();
|
||||
img.crossOrigin = "anonymous";
|
||||
|
||||
img.onload = () => {
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = img.width;
|
||||
canvas.height = img.height;
|
||||
const ctx = canvas.getContext("2d");
|
||||
ctx.drawImage(img, 0, 0);
|
||||
|
||||
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
||||
const dataArr = imageData.data;
|
||||
|
||||
for (let i = 0; i < dataArr.length; i += 4) {
|
||||
const avg = (dataArr[i] + dataArr[i + 1] + dataArr[i + 2]) / 3;
|
||||
const color = avg < cutoff ? 0 : 255;
|
||||
dataArr[i] = color;
|
||||
dataArr[i + 1] = color;
|
||||
dataArr[i + 2] = color;
|
||||
}
|
||||
ctx.putImageData(imageData, 0, 0);
|
||||
|
||||
resolve(canvas.toDataURL("image/png"));
|
||||
};
|
||||
|
||||
img.onerror = () => resolve(base64Data);
|
||||
img.src = base64Data;
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Main logic loop (polling)
|
||||
*/
|
||||
useEffect(() => {
|
||||
let currentRate = window.BorealisUpdateRate || 100;
|
||||
let intervalId = null;
|
||||
|
||||
const runNodeLogic = async () => {
|
||||
// find upstream edge
|
||||
const inputEdge = edges.find((e) => e.target === id);
|
||||
if (inputEdge && inputEdge.source) {
|
||||
const upstreamValue = window.BorealisValueBus[inputEdge.source] ?? "";
|
||||
if (upstreamValue !== valueRef.current) {
|
||||
const thresholded = await applyThreshold(upstreamValue, threshold);
|
||||
valueRef.current = thresholded;
|
||||
setRenderValue(thresholded);
|
||||
window.BorealisValueBus[id] = thresholded;
|
||||
}
|
||||
} else {
|
||||
// No upstream
|
||||
if (valueRef.current) {
|
||||
console.log(`[ThresholdNode:${id}] no upstream => clear`);
|
||||
}
|
||||
valueRef.current = "";
|
||||
setRenderValue("");
|
||||
window.BorealisValueBus[id] = "";
|
||||
}
|
||||
};
|
||||
|
||||
const startInterval = () => {
|
||||
intervalId = setInterval(runNodeLogic, currentRate);
|
||||
};
|
||||
startInterval();
|
||||
|
||||
// watch for update rate changes
|
||||
const monitor = setInterval(() => {
|
||||
const newRate = window.BorealisUpdateRate || 100;
|
||||
if (newRate !== currentRate) {
|
||||
currentRate = newRate;
|
||||
clearInterval(intervalId);
|
||||
startInterval();
|
||||
}
|
||||
}, 500);
|
||||
|
||||
return () => {
|
||||
clearInterval(intervalId);
|
||||
clearInterval(monitor);
|
||||
};
|
||||
}, [id, edges, threshold]);
|
||||
|
||||
/**
|
||||
* If threshold changes, re-apply to upstream immediately (if we have upstream)
|
||||
*/
|
||||
useEffect(() => {
|
||||
const inputEdge = edges.find((e) => e.target === id);
|
||||
if (!inputEdge) {
|
||||
return;
|
||||
}
|
||||
const upstreamVal = window.BorealisValueBus[inputEdge.source] ?? "";
|
||||
if (!upstreamVal) {
|
||||
return;
|
||||
}
|
||||
applyThreshold(upstreamVal, threshold).then((transformed) => {
|
||||
valueRef.current = transformed;
|
||||
setRenderValue(transformed);
|
||||
window.BorealisValueBus[id] = transformed;
|
||||
});
|
||||
}, [threshold, edges, id]);
|
||||
|
||||
// Render the node
|
||||
return (
|
||||
<div className="borealis-node">
|
||||
<Handle type="target" position={Position.Left} className="borealis-handle" />
|
||||
<div className="borealis-node-header" style={{ fontSize: "11px" }}>
|
||||
Threshold Node
|
||||
</div>
|
||||
|
||||
<div className="borealis-node-content" style={{ fontSize: "9px" }}>
|
||||
<div style={{ marginBottom: "6px", color: "#ccc" }}>
|
||||
<strong>Node ID:</strong> {id} <br />
|
||||
<strong>Instance ID:</strong> {instanceId || "(none)"} <br />
|
||||
(Slider persists across re-mount if data._thresholdId is preserved)
|
||||
</div>
|
||||
|
||||
<label>Threshold ({threshold}):</label>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="255"
|
||||
value={threshold}
|
||||
onChange={handleSliderChange}
|
||||
style={{
|
||||
width: "100%",
|
||||
marginBottom: "6px",
|
||||
background: "#2a2a2a"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<Handle type="source" position={Position.Right} className="borealis-handle" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Export as a React Flow Node
|
||||
export default {
|
||||
type: "PersistentThresholdNode",
|
||||
label: "Persistent Threshold Node",
|
||||
description: `
|
||||
Stores a unique ID in node.data._thresholdId and uses it to track the slider threshold
|
||||
in BorealisValueBus, so the slider doesn't reset if the node is re-mounted with the same data.
|
||||
`,
|
||||
content: "Convert incoming base64 image to black & white thresholded image, with node-level persistence.",
|
||||
component: PersistentThresholdNode
|
||||
};
|
||||
173
Data/WebUI/src/nodes/Image Processing/Upload_Image.jsx
Normal file
173
Data/WebUI/src/nodes/Image Processing/Upload_Image.jsx
Normal file
@ -0,0 +1,173 @@
|
||||
/**
|
||||
* ==================================================
|
||||
* Borealis - Image Upload Node (Raw Base64 Output)
|
||||
* ==================================================
|
||||
*
|
||||
* COMPONENT ROLE:
|
||||
* This node lets the user upload an image file (JPG/JPEG/PNG),
|
||||
* reads it as a data URL, then strips off the "data:image/*;base64,"
|
||||
* prefix, storing only the raw base64 data in BorealisValueBus.
|
||||
*
|
||||
* IMPORTANT:
|
||||
* - No upstream connector (target handle) is provided.
|
||||
* - The raw base64 is pushed out to downstream nodes via source handle.
|
||||
* - Your viewer (or other downstream node) must prepend "data:image/png;base64,"
|
||||
* or the appropriate MIME string for display.
|
||||
*/
|
||||
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { Handle, Position, useReactFlow } from "reactflow";
|
||||
|
||||
// Global Shared Bus for Node Data Propagation
|
||||
if (!window.BorealisValueBus) {
|
||||
window.BorealisValueBus = {};
|
||||
}
|
||||
|
||||
// Global Update Rate (ms) for All Data Nodes
|
||||
if (!window.BorealisUpdateRate) {
|
||||
window.BorealisUpdateRate = 100;
|
||||
}
|
||||
|
||||
const ImageUploadNode = ({ id, data }) => {
|
||||
const { setNodes } = useReactFlow();
|
||||
|
||||
const [renderValue, setRenderValue] = useState(data?.value || "");
|
||||
const valueRef = useRef(renderValue);
|
||||
|
||||
// Handler for file uploads
|
||||
const handleFileUpload = (event) => {
|
||||
console.log("handleFileUpload triggered for node:", id);
|
||||
|
||||
// Get the file list
|
||||
const files = event.target.files || event.currentTarget.files;
|
||||
if (!files || files.length === 0) {
|
||||
console.log("No files selected or files array is empty");
|
||||
return;
|
||||
}
|
||||
|
||||
const file = files[0];
|
||||
if (!file) {
|
||||
console.log("File object not found");
|
||||
return;
|
||||
}
|
||||
|
||||
// Debugging info
|
||||
console.log("Selected file:", file.name, file.type, file.size);
|
||||
|
||||
// Validate file type
|
||||
const validTypes = ["image/jpeg", "image/png"];
|
||||
if (!validTypes.includes(file.type)) {
|
||||
console.warn("Unsupported file type in node:", id, file.type);
|
||||
return;
|
||||
}
|
||||
|
||||
// Setup FileReader
|
||||
const reader = new FileReader();
|
||||
reader.onload = (loadEvent) => {
|
||||
console.log("FileReader onload in node:", id);
|
||||
const base64DataUrl = loadEvent?.target?.result || "";
|
||||
|
||||
// Strip off the data:image/...;base64, prefix to store raw base64
|
||||
const rawBase64 = base64DataUrl.replace(/^data:image\/[a-zA-Z]+;base64,/, "");
|
||||
console.log("Raw Base64 (truncated):", rawBase64.substring(0, 50));
|
||||
|
||||
valueRef.current = rawBase64;
|
||||
setRenderValue(rawBase64);
|
||||
window.BorealisValueBus[id] = rawBase64;
|
||||
|
||||
// Update node data
|
||||
setNodes((nds) =>
|
||||
nds.map((n) =>
|
||||
n.id === id
|
||||
? { ...n, data: { ...n.data, value: rawBase64 } }
|
||||
: n
|
||||
)
|
||||
);
|
||||
};
|
||||
reader.onerror = (errorEvent) => {
|
||||
console.error("FileReader error in node:", id, errorEvent);
|
||||
};
|
||||
|
||||
// Read the file as a data URL
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
// Poll-based output (no upstream)
|
||||
useEffect(() => {
|
||||
let currentRate = window.BorealisUpdateRate || 100;
|
||||
let intervalId = null;
|
||||
|
||||
const runNodeLogic = () => {
|
||||
// Simply emit current value (raw base64) to the bus
|
||||
window.BorealisValueBus[id] = valueRef.current;
|
||||
};
|
||||
|
||||
const startInterval = () => {
|
||||
intervalId = setInterval(runNodeLogic, currentRate);
|
||||
};
|
||||
|
||||
startInterval();
|
||||
|
||||
// Monitor for global update rate changes
|
||||
const monitor = setInterval(() => {
|
||||
const newRate = window.BorealisUpdateRate || 100;
|
||||
if (newRate !== currentRate) {
|
||||
currentRate = newRate;
|
||||
clearInterval(intervalId);
|
||||
startInterval();
|
||||
}
|
||||
}, 250);
|
||||
|
||||
return () => {
|
||||
clearInterval(intervalId);
|
||||
clearInterval(monitor);
|
||||
};
|
||||
}, [id, setNodes]);
|
||||
|
||||
return (
|
||||
<div className="borealis-node" style={{ minWidth: "160px" }}>
|
||||
{/* No target handle because we don't accept upstream data */}
|
||||
<div className="borealis-node-header">
|
||||
{data?.label || "Raw Base64 Image Upload"}
|
||||
</div>
|
||||
|
||||
<div className="borealis-node-content">
|
||||
<div style={{ marginBottom: "8px", fontSize: "9px", color: "#ccc" }}>
|
||||
{data?.content || "Upload a JPG/PNG, store only the raw base64 in ValueBus."}
|
||||
</div>
|
||||
|
||||
<label style={{ fontSize: "9px", display: "block", marginBottom: "4px" }}>
|
||||
Upload Image File
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="file"
|
||||
accept=".jpg,.jpeg,.png"
|
||||
onChange={handleFileUpload}
|
||||
style={{
|
||||
fontSize: "9px",
|
||||
padding: "4px",
|
||||
background: "#1e1e1e",
|
||||
color: "#ccc",
|
||||
border: "1px solid #444",
|
||||
borderRadius: "2px",
|
||||
width: "100%",
|
||||
marginBottom: "8px"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Handle type="source" position={Position.Right} className="borealis-handle" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default {
|
||||
type: "ImageUploadNode_RawBase64", // Unique ID for the node type
|
||||
label: "Upload Image",
|
||||
description: `
|
||||
A node to upload an image (JPG/PNG) and store it in base64 format for later use downstream.
|
||||
`.trim(),
|
||||
content: "Upload an image, output only the raw base64 string.",
|
||||
component: ImageUploadNode
|
||||
};
|
||||
Reference in New Issue
Block a user