mirror of
https://github.com/bunny-lab-io/Borealis.git
synced 2025-10-28 21:31:59 -06:00
Overhauled Deployment Structure
This commit is contained in:
@@ -0,0 +1,113 @@
|
||||
////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: <ProjectRoot>/Data/WebUI/src/nodes/Image Processing/Node_Adjust_Contrast.jsx
|
||||
|
||||
import React, { useEffect, useState, useRef } from "react";
|
||||
import { Handle, Position, useStore } from "reactflow";
|
||||
|
||||
if (!window.BorealisValueBus) window.BorealisValueBus = {};
|
||||
if (!window.BorealisUpdateRate) window.BorealisUpdateRate = 100;
|
||||
|
||||
const ContrastNode = ({ id }) => {
|
||||
const edges = useStore((state) => state.edges);
|
||||
const [contrast, setContrast] = useState(100);
|
||||
const valueRef = useRef("");
|
||||
const [renderValue, setRenderValue] = useState("");
|
||||
|
||||
const applyContrast = (base64Data, contrastVal) => {
|
||||
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 data = imageData.data;
|
||||
|
||||
const factor = (259 * (contrastVal + 255)) / (255 * (259 - contrastVal));
|
||||
|
||||
for (let i = 0; i < data.length; i += 4) {
|
||||
data[i] = factor * (data[i] - 128) + 128;
|
||||
data[i + 1] = factor * (data[i + 1] - 128) + 128;
|
||||
data[i + 2] = factor * (data[i + 2] - 128) + 128;
|
||||
}
|
||||
|
||||
ctx.putImageData(imageData, 0, 0);
|
||||
resolve(canvas.toDataURL("image/png").replace(/^data:image\/png;base64,/, ""));
|
||||
};
|
||||
|
||||
img.onerror = () => resolve(base64Data);
|
||||
img.src = `data:image/png;base64,${base64Data}`;
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const inputEdge = edges.find(e => e.target === id);
|
||||
if (!inputEdge?.source) return;
|
||||
|
||||
const input = window.BorealisValueBus[inputEdge.source] ?? "";
|
||||
if (!input) return;
|
||||
|
||||
applyContrast(input, contrast).then((output) => {
|
||||
setRenderValue(output);
|
||||
window.BorealisValueBus[id] = output;
|
||||
});
|
||||
}, [contrast, edges, id]);
|
||||
|
||||
useEffect(() => {
|
||||
let interval = null;
|
||||
const tick = async () => {
|
||||
const edge = edges.find(e => e.target === id);
|
||||
const input = edge ? window.BorealisValueBus[edge.source] : "";
|
||||
|
||||
if (input && input !== valueRef.current) {
|
||||
const result = await applyContrast(input, contrast);
|
||||
valueRef.current = input;
|
||||
setRenderValue(result);
|
||||
window.BorealisValueBus[id] = result;
|
||||
}
|
||||
};
|
||||
|
||||
interval = setInterval(tick, window.BorealisUpdateRate);
|
||||
return () => clearInterval(interval);
|
||||
}, [id, contrast, edges]);
|
||||
|
||||
return (
|
||||
<div className="borealis-node">
|
||||
<Handle type="target" position={Position.Left} className="borealis-handle" />
|
||||
<div className="borealis-node-header">Adjust Contrast</div>
|
||||
<div className="borealis-node-content" style={{ fontSize: "9px" }}>
|
||||
<label>Contrast (1–255):</label>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="255"
|
||||
value={contrast}
|
||||
onChange={(e) => setContrast(parseInt(e.target.value) || 100)}
|
||||
style={{
|
||||
width: "100%",
|
||||
fontSize: "9px",
|
||||
padding: "4px",
|
||||
background: "#1e1e1e",
|
||||
color: "#ccc",
|
||||
border: "1px solid #444",
|
||||
borderRadius: "2px",
|
||||
marginTop: "4px"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<Handle type="source" position={Position.Right} className="borealis-handle" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default {
|
||||
type: "ContrastNode",
|
||||
label: "Adjust Contrast",
|
||||
description: "Modify contrast of base64 image using a contrast multiplier.",
|
||||
content: "Adjusts contrast of image using canvas pixel transform.",
|
||||
component: ContrastNode
|
||||
};
|
||||
@@ -0,0 +1,195 @@
|
||||
////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: <ProjectRoot>/Data/WebUI/src/nodes/Image Processing/Node_BW_Threshold.jsx
|
||||
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { Handle, Position, useStore } from "reactflow";
|
||||
|
||||
// Ensure BorealisValueBus exists
|
||||
if (!window.BorealisValueBus) {
|
||||
window.BorealisValueBus = {};
|
||||
}
|
||||
|
||||
if (!window.BorealisUpdateRate) {
|
||||
window.BorealisUpdateRate = 100;
|
||||
}
|
||||
|
||||
const BWThresholdNode = ({ id, data }) => {
|
||||
const edges = useStore((state) => state.edges);
|
||||
|
||||
// Attempt to parse threshold from data.value (if present),
|
||||
// otherwise default to 128.
|
||||
const initial = parseInt(data?.value, 10);
|
||||
const [threshold, setThreshold] = useState(
|
||||
isNaN(initial) ? 128 : initial
|
||||
);
|
||||
|
||||
const [renderValue, setRenderValue] = useState("");
|
||||
const valueRef = useRef("");
|
||||
const lastUpstreamRef = useRef("");
|
||||
|
||||
// If the node is reimported and data.value changes externally,
|
||||
// update the threshold accordingly.
|
||||
useEffect(() => {
|
||||
const newVal = parseInt(data?.value, 10);
|
||||
if (!isNaN(newVal)) {
|
||||
setThreshold(newVal);
|
||||
}
|
||||
}, [data?.value]);
|
||||
|
||||
const handleThresholdInput = (e) => {
|
||||
let val = parseInt(e.target.value, 10);
|
||||
if (isNaN(val)) {
|
||||
val = 128;
|
||||
}
|
||||
val = Math.max(0, Math.min(255, val));
|
||||
|
||||
// Keep the Node's data.value updated
|
||||
data.value = val;
|
||||
|
||||
setThreshold(val);
|
||||
window.BorealisValueBus[id] = val;
|
||||
};
|
||||
|
||||
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").replace(/^data:image\/png;base64,/, ""));
|
||||
};
|
||||
|
||||
img.onerror = () => resolve(base64Data);
|
||||
img.src = "data:image/png;base64," + base64Data;
|
||||
});
|
||||
};
|
||||
|
||||
// Main polling logic
|
||||
useEffect(() => {
|
||||
let currentRate = window.BorealisUpdateRate;
|
||||
let intervalId = null;
|
||||
|
||||
const runNodeLogic = async () => {
|
||||
const inputEdge = edges.find(e => e.target === id);
|
||||
if (inputEdge?.source) {
|
||||
const upstreamValue = window.BorealisValueBus[inputEdge.source] ?? "";
|
||||
|
||||
if (upstreamValue !== lastUpstreamRef.current) {
|
||||
const transformed = await applyThreshold(upstreamValue, threshold);
|
||||
lastUpstreamRef.current = upstreamValue;
|
||||
valueRef.current = transformed;
|
||||
setRenderValue(transformed);
|
||||
window.BorealisValueBus[id] = transformed;
|
||||
}
|
||||
} else {
|
||||
lastUpstreamRef.current = "";
|
||||
valueRef.current = "";
|
||||
setRenderValue("");
|
||||
window.BorealisValueBus[id] = "";
|
||||
}
|
||||
};
|
||||
|
||||
intervalId = setInterval(runNodeLogic, currentRate);
|
||||
|
||||
const monitor = setInterval(() => {
|
||||
const newRate = window.BorealisUpdateRate;
|
||||
if (newRate !== currentRate) {
|
||||
clearInterval(intervalId);
|
||||
currentRate = newRate;
|
||||
intervalId = setInterval(runNodeLogic, currentRate);
|
||||
}
|
||||
}, 250);
|
||||
|
||||
return () => {
|
||||
clearInterval(intervalId);
|
||||
clearInterval(monitor);
|
||||
};
|
||||
}, [id, edges, threshold]);
|
||||
|
||||
// Reapply when threshold changes (even if image didn't)
|
||||
useEffect(() => {
|
||||
const inputEdge = edges.find(e => e.target === id);
|
||||
if (!inputEdge?.source) {
|
||||
return;
|
||||
}
|
||||
|
||||
const upstreamValue = window.BorealisValueBus[inputEdge.source] ?? "";
|
||||
if (!upstreamValue) {
|
||||
return;
|
||||
}
|
||||
|
||||
applyThreshold(upstreamValue, threshold).then((result) => {
|
||||
valueRef.current = result;
|
||||
setRenderValue(result);
|
||||
window.BorealisValueBus[id] = result;
|
||||
});
|
||||
}, [threshold, edges, id]);
|
||||
|
||||
return (
|
||||
<div className="borealis-node">
|
||||
<Handle type="target" position={Position.Left} className="borealis-handle" />
|
||||
|
||||
<div className="borealis-node-header">BW Threshold</div>
|
||||
|
||||
<div className="borealis-node-content" style={{ fontSize: "9px" }}>
|
||||
<div style={{ marginBottom: "6px", color: "#ccc" }}>
|
||||
Threshold Strength (0–255):
|
||||
</div>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
max="255"
|
||||
value={threshold}
|
||||
onChange={handleThresholdInput}
|
||||
style={{
|
||||
width: "100%",
|
||||
fontSize: "9px",
|
||||
padding: "4px",
|
||||
background: "#1e1e1e",
|
||||
color: "#ccc",
|
||||
border: "1px solid #444",
|
||||
borderRadius: "2px",
|
||||
marginBottom: "6px"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Handle type="source" position={Position.Right} className="borealis-handle" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default {
|
||||
type: "BWThresholdNode",
|
||||
label: "BW Threshold",
|
||||
description: `
|
||||
Black & White Threshold (Stateless)
|
||||
|
||||
- Converts a base64 image to black & white using a user-defined threshold value
|
||||
- Reapplies threshold when the number changes, even if image stays the same
|
||||
- Outputs a new base64 PNG with BW transformation
|
||||
`.trim(),
|
||||
content: "Applies black & white threshold to base64 image input.",
|
||||
component: BWThresholdNode
|
||||
};
|
||||
@@ -0,0 +1,135 @@
|
||||
////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: <ProjectRoot>/Data/WebUI/src/nodes/Image Processing/Node_Convert_to_Grayscale.jsx
|
||||
|
||||
import React, { useEffect, useState, useRef } from "react";
|
||||
import { Handle, Position, useStore } from "reactflow";
|
||||
|
||||
if (!window.BorealisValueBus) window.BorealisValueBus = {};
|
||||
if (!window.BorealisUpdateRate) window.BorealisUpdateRate = 100;
|
||||
|
||||
const GrayscaleNode = ({ id }) => {
|
||||
const edges = useStore((state) => state.edges);
|
||||
const [grayscaleLevel, setGrayscaleLevel] = useState(100); // percentage (0–100)
|
||||
const [renderValue, setRenderValue] = useState("");
|
||||
const valueRef = useRef("");
|
||||
|
||||
const applyGrayscale = (base64Data, level) => {
|
||||
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 data = imageData.data;
|
||||
const alpha = level / 100;
|
||||
|
||||
for (let i = 0; i < data.length; i += 4) {
|
||||
const r = data[i];
|
||||
const g = data[i + 1];
|
||||
const b = data[i + 2];
|
||||
const avg = (r + g + b) / 3;
|
||||
|
||||
data[i] = r * (1 - alpha) + avg * alpha;
|
||||
data[i + 1] = g * (1 - alpha) + avg * alpha;
|
||||
data[i + 2] = b * (1 - alpha) + avg * alpha;
|
||||
}
|
||||
|
||||
ctx.putImageData(imageData, 0, 0);
|
||||
resolve(canvas.toDataURL("image/png").replace(/^data:image\/png;base64,/, ""));
|
||||
};
|
||||
|
||||
img.onerror = () => resolve(base64Data);
|
||||
img.src = `data:image/png;base64,${base64Data}`;
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const inputEdge = edges.find(e => e.target === id);
|
||||
if (!inputEdge?.source) return;
|
||||
|
||||
const input = window.BorealisValueBus[inputEdge.source] ?? "";
|
||||
if (!input) return;
|
||||
|
||||
applyGrayscale(input, grayscaleLevel).then((output) => {
|
||||
valueRef.current = input;
|
||||
setRenderValue(output);
|
||||
window.BorealisValueBus[id] = output;
|
||||
});
|
||||
}, [grayscaleLevel, edges, id]);
|
||||
|
||||
useEffect(() => {
|
||||
let interval = null;
|
||||
|
||||
const run = async () => {
|
||||
const edge = edges.find(e => e.target === id);
|
||||
const input = edge ? window.BorealisValueBus[edge.source] : "";
|
||||
|
||||
if (input && input !== valueRef.current) {
|
||||
const result = await applyGrayscale(input, grayscaleLevel);
|
||||
valueRef.current = input;
|
||||
setRenderValue(result);
|
||||
window.BorealisValueBus[id] = result;
|
||||
}
|
||||
};
|
||||
|
||||
interval = setInterval(run, window.BorealisUpdateRate);
|
||||
return () => clearInterval(interval);
|
||||
}, [id, edges, grayscaleLevel]);
|
||||
|
||||
const handleLevelChange = (e) => {
|
||||
let val = parseInt(e.target.value, 10);
|
||||
if (isNaN(val)) val = 100;
|
||||
val = Math.min(100, Math.max(0, val));
|
||||
setGrayscaleLevel(val);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="borealis-node">
|
||||
<Handle type="target" position={Position.Left} className="borealis-handle" />
|
||||
<div className="borealis-node-header">Convert to Grayscale</div>
|
||||
<div className="borealis-node-content" style={{ fontSize: "9px" }}>
|
||||
<label style={{ display: "block", marginBottom: "4px" }}>
|
||||
Grayscale Intensity (0–100):
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
max="100"
|
||||
step="1"
|
||||
value={grayscaleLevel}
|
||||
onChange={handleLevelChange}
|
||||
style={{
|
||||
width: "100%",
|
||||
fontSize: "9px",
|
||||
padding: "4px",
|
||||
background: "#1e1e1e",
|
||||
color: "#ccc",
|
||||
border: "1px solid #444",
|
||||
borderRadius: "2px"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<Handle type="source" position={Position.Right} className="borealis-handle" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default {
|
||||
type: "GrayscaleNode",
|
||||
label: "Convert to Grayscale",
|
||||
description: `
|
||||
Adjustable Grayscale Conversion
|
||||
|
||||
- Accepts base64 image input
|
||||
- Applies grayscale effect using a % level
|
||||
- 0% = no change, 100% = full grayscale
|
||||
- Outputs result downstream as base64
|
||||
`.trim(),
|
||||
content: "Convert image to grayscale with adjustable intensity.",
|
||||
component: GrayscaleNode
|
||||
};
|
||||
@@ -0,0 +1,90 @@
|
||||
////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: <ProjectRoot>/Data/WebUI/src/nodes/Image Processing/Node_Export_Image.jsx
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Handle, Position, useReactFlow } from "reactflow";
|
||||
|
||||
const ExportImageNode = ({ id }) => {
|
||||
const { getEdges } = useReactFlow();
|
||||
const [imageData, setImageData] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
const edges = getEdges();
|
||||
const inputEdge = edges.find(e => e.target === id);
|
||||
if (inputEdge) {
|
||||
const base64 = window.BorealisValueBus?.[inputEdge.source];
|
||||
if (typeof base64 === "string") {
|
||||
setImageData(base64);
|
||||
}
|
||||
}
|
||||
}, 1000);
|
||||
return () => clearInterval(interval);
|
||||
}, [id, getEdges]);
|
||||
|
||||
const handleDownload = async () => {
|
||||
const blob = await (async () => {
|
||||
const res = await fetch(`data:image/png;base64,${imageData}`);
|
||||
return await res.blob();
|
||||
})();
|
||||
|
||||
if (window.showSaveFilePicker) {
|
||||
try {
|
||||
const fileHandle = await window.showSaveFilePicker({
|
||||
suggestedName: "image.png",
|
||||
types: [{
|
||||
description: "PNG Image",
|
||||
accept: { "image/png": [".png"] }
|
||||
}]
|
||||
});
|
||||
const writable = await fileHandle.createWritable();
|
||||
await writable.write(blob);
|
||||
await writable.close();
|
||||
} catch (e) {
|
||||
console.warn("Save cancelled:", e);
|
||||
}
|
||||
} else {
|
||||
const a = document.createElement("a");
|
||||
a.href = URL.createObjectURL(blob);
|
||||
a.download = "image.png";
|
||||
a.style.display = "none";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
URL.revokeObjectURL(a.href);
|
||||
document.body.removeChild(a);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="borealis-node">
|
||||
<Handle type="target" position={Position.Left} className="borealis-handle" />
|
||||
<div className="borealis-node-header">Export Image</div>
|
||||
<div className="borealis-node-content" style={{ fontSize: "9px" }}>
|
||||
Export upstream base64-encoded image data as a PNG on-disk.
|
||||
<button
|
||||
style={{
|
||||
marginTop: "6px",
|
||||
width: "100%",
|
||||
fontSize: "9px",
|
||||
padding: "4px",
|
||||
background: "#1e1e1e",
|
||||
color: "#ccc",
|
||||
border: "1px solid #444",
|
||||
borderRadius: "2px"
|
||||
}}
|
||||
onClick={handleDownload}
|
||||
disabled={!imageData}
|
||||
>
|
||||
Download PNG
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default {
|
||||
type: "ExportImageNode",
|
||||
label: "Export Image",
|
||||
description: "Lets the user download the base64 PNG image to disk.",
|
||||
content: "Save base64 PNG to disk as a file.",
|
||||
component: ExportImageNode
|
||||
};
|
||||
@@ -0,0 +1,132 @@
|
||||
////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: <ProjectRoot>/Data/WebUI/src/nodes/Image Processing/Node_Image_Viewer.jsx
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Handle, Position, useReactFlow } from "reactflow";
|
||||
|
||||
if (!window.BorealisValueBus) window.BorealisValueBus = {};
|
||||
if (!window.BorealisUpdateRate) window.BorealisUpdateRate = 100;
|
||||
|
||||
const ImageViewerNode = ({ id, data }) => {
|
||||
const { getEdges } = useReactFlow();
|
||||
const [imageBase64, setImageBase64] = useState("");
|
||||
const [selectedType, setSelectedType] = useState("base64");
|
||||
|
||||
// Monitor upstream input and propagate to ValueBus
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
const edges = getEdges();
|
||||
const inputEdge = edges.find(e => e.target === id);
|
||||
if (inputEdge) {
|
||||
const sourceId = inputEdge.source;
|
||||
const valueBus = window.BorealisValueBus || {};
|
||||
const value = valueBus[sourceId];
|
||||
if (typeof value === "string") {
|
||||
setImageBase64(value);
|
||||
window.BorealisValueBus[id] = value;
|
||||
}
|
||||
} else {
|
||||
setImageBase64("");
|
||||
window.BorealisValueBus[id] = "";
|
||||
}
|
||||
}, window.BorealisUpdateRate || 100);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [id, getEdges]);
|
||||
|
||||
const handleDownload = async () => {
|
||||
if (!imageBase64) return;
|
||||
const blob = await (await fetch(`data:image/png;base64,${imageBase64}`)).blob();
|
||||
|
||||
if (window.showSaveFilePicker) {
|
||||
try {
|
||||
const fileHandle = await window.showSaveFilePicker({
|
||||
suggestedName: "image.png",
|
||||
types: [{
|
||||
description: "PNG Image",
|
||||
accept: { "image/png": [".png"] }
|
||||
}]
|
||||
});
|
||||
const writable = await fileHandle.createWritable();
|
||||
await writable.write(blob);
|
||||
await writable.close();
|
||||
} catch (e) {
|
||||
console.warn("Save cancelled:", e);
|
||||
}
|
||||
} else {
|
||||
const a = document.createElement("a");
|
||||
a.href = URL.createObjectURL(blob);
|
||||
a.download = "image.png";
|
||||
a.style.display = "none";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
URL.revokeObjectURL(a.href);
|
||||
document.body.removeChild(a);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="borealis-node">
|
||||
<Handle type="target" position={Position.Left} className="borealis-handle" />
|
||||
<div className="borealis-node-header">Image Viewer</div>
|
||||
<div className="borealis-node-content">
|
||||
<label style={{ fontSize: "10px" }}>Data Type:</label>
|
||||
<select
|
||||
value={selectedType}
|
||||
onChange={(e) => setSelectedType(e.target.value)}
|
||||
style={{ width: "100%", fontSize: "9px", marginBottom: "6px" }}
|
||||
>
|
||||
<option value="base64">Base64 Encoded Image</option>
|
||||
</select>
|
||||
|
||||
{imageBase64 ? (
|
||||
<>
|
||||
<img
|
||||
src={`data:image/png;base64,${imageBase64}`}
|
||||
alt="Live"
|
||||
style={{
|
||||
width: "100%",
|
||||
border: "1px solid #333",
|
||||
marginTop: "6px",
|
||||
marginBottom: "6px"
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
onClick={handleDownload}
|
||||
style={{
|
||||
width: "100%",
|
||||
fontSize: "9px",
|
||||
padding: "4px",
|
||||
background: "#1e1e1e",
|
||||
color: "#ccc",
|
||||
border: "1px solid #444",
|
||||
borderRadius: "2px"
|
||||
}}
|
||||
>
|
||||
Export to PNG
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<div style={{ fontSize: "9px", color: "#888", marginTop: "6px" }}>
|
||||
Waiting for image...
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Handle type="source" position={Position.Right} className="borealis-handle" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default {
|
||||
type: "Image_Viewer",
|
||||
label: "Image Viewer",
|
||||
description: `
|
||||
Displays base64 image and exports it
|
||||
|
||||
- Accepts upstream base64 image
|
||||
- Shows preview
|
||||
- Provides "Export to PNG" button
|
||||
- Outputs the same base64 to downstream
|
||||
`.trim(),
|
||||
content: "Visual preview of base64 image with optional PNG export.",
|
||||
component: ImageViewerNode
|
||||
};
|
||||
@@ -0,0 +1,175 @@
|
||||
////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: <ProjectRoot>/Data/WebUI/src/nodes/Image Processing/Node_Upload_Image.jsx
|
||||
|
||||
/**
|
||||
* ==================================================
|
||||
* 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