search

jagenjo / litegraph.js

A graph node engine and editor written in Javascript similar to PD or UDK Blueprints, comes with its own editor in HTML5 Canvas2D. The engine can run client side or server side using Node. It allows to export graphs as JSONs to be included in applications independently.
MIT License
5.32k stars 602 forks source link

question: how to use ui for (*custom*) python code generation? #459

Open s-light opened 1 month ago

s-light commented 1 month ago

hello community,

i would like to experiment with this flow-graph ui embedded in a CircuitPython web-editor. so my target output are python files.

on my current looking into this package i do not have an idea how to start with this.. for my use-case i can not use a live / play mode - i think more of a every time a changes is made i regenerate the code - so i need some kind of code-fragment-generation for every node... would it be a good idea to just use the onExecute function to append the code-fragment? (i know i would have to write a a lots of nodes to have all the basic python language parts available..)

or does anybody knows of a visual similar maintained library/framework that has python code generation already implemented? maybe there is a fundamental other concept / idea how to go about such an idea..

in the end i would love to have both: flow-graph to code | code to flow-graph so aim also very open to any comments / ideas...

EliCDavis commented 1 month ago

I am not sure if this is helpful for your use case, but I am working on a code => flow-graph. Currently working on the other direction (and is considerably harder IMO).

Node definition begins with at best I can describe as inheritance (not really a thing in golang). You can see an example of this here https://github.com/EliCDavis/polyform/blob/main/examples/edit-gaussian-splats/main.go#L55

This requires a ton of reflection to then transform it into a node when it comes to javascript, which comes down to a switch statement based on the type of data it's dealing with https://github.com/EliCDavis/polyform/blob/main/generator/html/js/nodes/node.js#L10

Luckily being in python, you don't really need to deal with reflection, which might make the flow-graph => code aspect easier.

I don't use onExecute ever. I subscribe to node creation/deletion/connection editing.

s-light commented 1 month ago

Thanks EliCDAvis!

that are nice hints and concept points!

do you know of the BlockMirror project? it does python → blocks (blockly) they are using

Skulpt: A Python-to-Javascript transpiler. We use it for its parser.

they parse the python to an Abstract Syntax Tree (AST) and from this generate the blocks. i did not dig deeper in the how all of this works ;-)

for now i have to lay this project idea on ice.. (it is just to complex for me / to much other things needing my attention)