max/nodarium
1
0
Fork 0
Code Issues 12 Pull Requests 2 Actions Packages Projects Releases 3 Wiki Activity

feat: some shit

Browse Source
This commit is contained in:
Max Richter
2026-01-23 02:28:17 +01:00
parent ab02a71ca5
commit 571bb2a5d3
10 changed files with 243 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/src/lib/graph-interface/node/NodeHeader.svelte
View File

@@ -2,6 +2,7 @@
import { getGraphState } from "../graph-state.svelte";
import { createNodePath } from "../helpers/index.js";
import type { NodeInstance } from "@nodarium/types";
import { appSettings } from "$lib/settings/app-settings.svelte";
const graphState = getGraphState();
@@ -43,7 +44,12 @@
<div class="wrapper" data-node-id={node.id} data-node-type={node.type}>
<div class="content">
{node.type.split("/").pop()} ({node.id})
{#if appSettings.value.nodeInterface.showNodeIds}
<span class="bg-white text-black! mr-2 px-1 rounded-sm opacity-30"
>{node.id}</span
>
{/if}
{node.type.split("/").pop()}
</div>
<div
class="click-target"

38
app/src/lib/runtime/runtime-executor.ts
View File

@@ -87,8 +87,9 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
results: Record<number, Pointer> = {};
inputPtrs: Record<number, Pointer[]> = {};
allPtrs: Pointer[] = [];
seed = 123123;
seed = 42424242;
perf?: PerformanceStore;
@@ -202,11 +203,13 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
this.offset += length;
return {
const ptr = {
start,
end,
_title: title
};
this.allPtrs.push(ptr);
return ptr;
}
private printMemory() {
@@ -214,10 +217,13 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
console.log('MEMORY', this.memoryView.slice(0, 10));
}
async execute(graph: Graph, _settings: Record<string, unknown>) {
async execute(graph: Graph, settings: Record<string, unknown>) {
this.offset = 0;
this.inputPtrs = {};
this.seed = this.seed += 2;
this.results = {};
this.allPtrs = [];
if (this.isRunning) return undefined as unknown as Int32Array;
this.isRunning = true;
@@ -240,11 +246,22 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
(a, b) => (b.state?.depth || 0) - (a.state?.depth || 0)
);
console.log({ settings });
this.printMemory();
const seedPtr = this.writeToMemory(this.seed, 'seed');
const settingPtrs = new Map<string, Pointer>(
Object.entries(settings).map((
[key, value]
) => [key as string, this.writeToMemory(value as number, `setting.${key}`)])
);
for (const node of sortedNodes) {
const node_type = this.nodes.get(node.type)!;
console.log('---------------');
console.log('STARTING NODE EXECUTION', node_type.definition.id);
console.log('STARTING NODE EXECUTION', node_type.definition.id + '/' + node.id);
this.printMemory();
// console.log(node_type.definition.inputs);
@@ -252,23 +269,24 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
([key, input]) => {
// We should probably initially write this to memory
if (input.type === 'seed') {
return this.writeToMemory(this.seed);
return seedPtr;
}
const title = `${node.id}.${key}`;
// We should probably initially write this to memory
// If the input is linked to a setting, we use that value
// if (input.setting) {
// return getValue(input, settings[input.setting]);
// }
// TODO: handle nodes which reference undefined settings
if (input.setting) {
return settingPtrs.get(input.setting)!;
}
// check if the input is connected to another node
const inputNode = node.state.inputNodes[key];
if (inputNode) {
if (this.results[inputNode.id] === undefined) {
throw new Error(
`Node ${node.type} is missing input from node ${inputNode.type}`
`Node ${node.type}/${node.id} is missing input from node ${inputNode.type}/${inputNode.id}`
);
}
return this.results[inputNode.id];
@@ -317,6 +335,7 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
end: args[1],
_title: `${node.id} ->`
};
this.allPtrs.push(this.results[node.id]);
} else {
this.results[node.id] = {
start: this.offset,
@@ -324,6 +343,7 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
_title: `${node.id} ->`
};
this.offset += bytesWritten / 4;
this.allPtrs.push(this.results[node.id]);
}
console.log('FINISHED EXECUTION', {
bytesWritten,

181
app/src/lib/settings/app-settings.svelte.ts
View File

@@ -1,148 +1,147 @@
import { localState } from "$lib/helpers/localState.svelte";
import { localState } from '$lib/helpers/localState.svelte';
const themes = [
"dark",
"light",
"catppuccin",
"solarized",
"high-contrast",
"nord",
"dracula",
'dark',
'light',
'catppuccin',
'solarized',
'high-contrast',
'nord',
'dracula'
] as const;
export const AppSettingTypes = {
theme: {
type: "select",
type: 'select',
options: themes,
label: "Theme",
value: themes[0],
label: 'Theme',
value: themes[0]
},
showGrid: {
type: "boolean",
label: "Show Grid",
value: true,
type: 'boolean',
label: 'Show Grid',
value: true
},
centerCamera: {
type: "boolean",
label: "Center Camera",
value: true,
type: 'boolean',
label: 'Center Camera',
value: true
},
nodeInterface: {
title: "Node Interface",
title: 'Node Interface',
showNodeGrid: {
type: "boolean",
label: "Show Grid",
value: true,
type: 'boolean',
label: 'Show Grid',
value: true
},
snapToGrid: {
type: "boolean",
label: "Snap to Grid",
value: true,
type: 'boolean',
label: 'Snap to Grid',
value: true
},
showHelp: {
type: "boolean",
label: "Show Help",
value: false,
type: 'boolean',
label: 'Show Help',
value: false
},
showNodeIds: {
type: 'boolean',
label: 'Show Node Ids',
value: false
}
},
debug: {
title: "Debug",
title: 'Debug',
wireframe: {
type: "boolean",
label: "Wireframe",
value: false,
type: 'boolean',
label: 'Wireframe',
value: false
},
useWorker: {
type: "boolean",
label: "Execute in WebWorker",
value: true,
type: 'boolean',
label: 'Execute in WebWorker',
value: true
},
showIndices: {
type: "boolean",
label: "Show Indices",
value: false,
type: 'boolean',
label: 'Show Indices',
value: false
},
showPerformancePanel: {
type: "boolean",
label: "Show Performance Panel",
value: false,
type: 'boolean',
label: 'Show Performance Panel',
value: false
},
showBenchmarkPanel: {
type: "boolean",
label: "Show Benchmark Panel",
value: false,
type: 'boolean',
label: 'Show Benchmark Panel',
value: false
},
showVertices: {
type: "boolean",
label: "Show Vertices",
value: false,
type: 'boolean',
label: 'Show Vertices',
value: false
},
showStemLines: {
type: "boolean",
label: "Show Stem Lines",
value: false,
type: 'boolean',
label: 'Show Stem Lines',
value: false
},
showGraphJson: {
type: "boolean",
label: "Show Graph Source",
value: false,
type: 'boolean',
label: 'Show Graph Source',
value: false
},
cache: {
title: "Cache",
title: 'Cache',
useRuntimeCache: {
type: "boolean",
label: "Node Results",
value: true,
type: 'boolean',
label: 'Node Results',
value: true
},
useRegistryCache: {
type: "boolean",
label: "Node Source",
value: true,
},
type: 'boolean',
label: 'Node Source',
value: true
}
},
stressTest: {
title: "Stress Test",
title: 'Stress Test',
amount: {
type: "integer",
type: 'integer',
min: 2,
max: 15,
value: 4,
value: 4
},
loadGrid: {
type: "button",
label: "Load Grid",
type: 'button',
label: 'Load Grid'
},
loadTree: {
type: "button",
label: "Load Tree",
type: 'button',
label: 'Load Tree'
},
lottaFaces: {
type: "button",
label: "Load 'lots of faces'",
type: 'button',
label: "Load 'lots of faces'"
},
lottaNodes: {
type: "button",
label: "Load 'lots of nodes'",
type: 'button',
label: "Load 'lots of nodes'"
},
lottaNodesAndFaces: {
type: "button",
label: "Load 'lots of nodes and faces'",
},
},
},
type: 'button',
label: "Load 'lots of nodes and faces'"
}
}
}
} as const;
type SettingsToStore<T> =
T extends { value: infer V }
? V extends readonly string[]
? V[number]
type SettingsToStore<T> = T extends { value: infer V } ? V extends readonly string[] ? V[number]
: V
: T extends any[]
? {}
: T extends object
? {
[K in keyof T as T[K] extends object ? K : never]:
SettingsToStore<T[K]>
: T extends any[] ? {}
: T extends object ? {
[K in keyof T as T[K] extends object ? K : never]: SettingsToStore<T[K]>;
}
: never;
@@ -150,8 +149,8 @@ export function settingsToStore<T>(settings: T): SettingsToStore<T> {
const result = {} as any;
for (const key in settings) {
const value = settings[key];
if (value && typeof value === "object") {
if ("value" in value) {
if (value && typeof value === 'object') {
if ('value' in value) {
result[key] = value.value;
} else {
result[key] = settingsToStore(value);
@@ -162,8 +161,8 @@ export function settingsToStore<T>(settings: T): SettingsToStore<T> {
}
export let appSettings = localState(
"app-settings",
settingsToStore(AppSettingTypes),
'app-settings',
settingsToStore(AppSettingTypes)
);
$effect.root(() => {
@@ -173,7 +172,7 @@ $effect.root(() => {
const newClassName = `theme-${theme}`;
if (classes) {
for (const className of classes) {
if (className.startsWith("theme-") && className !== newClassName) {
if (className.startsWith('theme-') && className !== newClassName) {
classes.remove(className);
}
}

65
app/src/routes/dev/+page.svelte
View File

@@ -6,9 +6,14 @@
import { type Graph, type NodeInstance } from "@nodarium/types";
import Grid from "$lib/grid";
import { MemoryRuntimeExecutor, type Pointer } from "$lib/runtime";
import devPlant from "./dev-graph.json";
import { decodeFloat } from "@nodarium/utils";
import { localState } from "$lib/helpers/localState.svelte";
import * as templates from "$lib/graph-templates";
import NestedSettings from "$lib/settings/NestedSettings.svelte";
import {
appSettings,
AppSettingTypes,
} from "$lib/settings/app-settings.svelte";
const nodeRegistry = new RemoteNodeRegistry("");
nodeRegistry.overwriteNode("max/plantarium/output", {
@@ -23,29 +28,30 @@
},
},
execute(outputPos: number, args: number[]) {
console.log({ outputPos, args });
return 0;
},
});
const runtimeExecutor = new MemoryRuntimeExecutor(nodeRegistry);
let inputPtrs: Record<number, Pointer[]>;
let allPtrs = $state<Pointer[]>([]);
let activeNode = $state<NodeInstance>();
let isCalculating = $state<boolean>(false);
let windowHeight = $state(500);
let start = $state(0);
const start = localState("nodes.dev.scroll", 0);
const rowHeight = 40;
const numRows = $derived(Math.floor(windowHeight / rowHeight));
let memory = $state<Int32Array>();
const visibleRows = $derived(memory?.slice(start, start + numRows));
const visibleRows = $derived(
memory?.slice(start.value, start.value + numRows),
);
const ptrs = $derived.by(() => {
if (!inputPtrs) return [];
const sortedPtrs = $derived.by(() => {
const seen = new Set();
const ptrs = [...Object.values(inputPtrs)]
.flat()
const _ptrs = [...allPtrs]
.sort((a, b) => (a.start > b.start ? 1 : -1))
.filter((ptr) => {
const id = `${ptr.start}-${ptr.end}`;
@@ -53,12 +59,15 @@
seen.add(id);
return true;
});
if (!ptrs) return [];
if (!_ptrs) return [];
return _ptrs;
});
const ptrs = $derived.by(() => {
let out = [];
for (let i = 0; i < numRows; i++) {
let rowIndex = start + i;
const activePtr = ptrs.find(
let rowIndex = start.value + i;
const activePtr = sortedPtrs.find(
(ptr) => ptr.start < rowIndex && ptr.end >= rowIndex,
);
if (activePtr) {
@@ -75,7 +84,7 @@
let graph = $state(
localStorage.getItem("nodes.dev.graph")
? JSON.parse(localStorage.getItem("nodes.dev.graph")!)
: devPlant,
: templates.defaultPlant,
);
function handleSave(g: Graph) {
localStorage.setItem("nodes.dev.graph", JSON.stringify(g));
@@ -92,12 +101,16 @@
isCalculating = true;
if (res) handleSave(res);
try {
await runtimeExecutor.execute(res || graph, graphSettings);
await runtimeExecutor.execute(
res || graph,
$state.snapshot(graphSettings),
);
} catch (e) {
console.log(e);
}
memory = runtimeExecutor.getMemory();
inputPtrs = runtimeExecutor.inputPtrs;
allPtrs = runtimeExecutor.allPtrs;
clearTimeout(calcTimeout);
calcTimeout = setTimeout(() => {
isCalculating = false;
@@ -120,7 +133,11 @@
<Grid.Cell>
{#if visibleRows?.length}
<table
class="min-w-full select-none overflow-hidden text-left text-sm flex-1"
class="min-w-full select-none overflow-auto text-left text-sm flex-1"
onscroll={(e) => {
const scrollTop = e.currentTarget.scrollTop;
start.value = Math.floor(scrollTop / rowHeight);
}}
>
<thead class="">
<tr>
@@ -133,9 +150,14 @@
<th class="px-4 py-2 border-b border-[var(--outline)]">Float</th>
</tr>
</thead>
<tbody>
<tbody
onscroll={(e) => {
const scrollTop = e.currentTarget.scrollTop;
start.value = Math.floor(scrollTop / rowHeight);
}}
>
{#each visibleRows as r, i}
{@const index = i + start}
{@const index = i + start.value}
{@const ptr = ptrs[i]}
<tr class="h-[40px] odd:bg-[var(--layer-1)]">
<td class="px-4 border-b border-[var(--outline)] w-8">{index}</td>
@@ -168,7 +190,7 @@
</table>
<input
class="absolute bottom-4 left-4 bg-white"
bind:value={start}
bind:value={start.value}
min="0"
type="number"
step="1"
@@ -201,6 +223,13 @@
</Grid.Row>
<Sidebar>
<Panel id="general" title="General" icon="i-[tabler--settings]">
<NestedSettings
id="general"
bind:value={appSettings.value}
type={AppSettingTypes}
/>
</Panel>
<Panel
id="node-store"
classes="text-green-400"

49
app/src/routes/dev/dev-graph.json
View File

@@ -7,47 +7,68 @@
{
"id": 9,
"position": [
220,
80
225,
65
],
"type": "max/plantarium/output",
"props": {}
"props": {
"out": 0
}
},
{
"id": 10,
"position": [
195,
80
200,
60
],
"type": "max/plantarium/math",
"props": {
"op_type": 0,
"op_type": 3,
"a": 2,
"b": 2
"b": 0.38
}
},
{
"id": 11,
"position": [
170,
80
175,
60
],
"type": "max/plantarium/float",
"props": {
"value": 0.1
"value": 0.66
}
},
{
"id": 12,
"position": [
170,
100
175,
80
],
"type": "max/plantarium/float",
"props": {
"value": 0.1
"value": 1
}
}
],
"edges": []
"edges": [
[
11,
0,
10,
"a"
],
[
12,
0,
10,
"b"
],
[
10,
0,
9,
"out"
]
]
}