brython-dev / brython

Brython (Browser Python) is an implementation of Python 3 running in the browser
BSD 3-Clause "New" or "Revised" License
6.4k stars 512 forks source link

I'm trying to make a litegraph extension that will run brython code. lots of headaches! any help? #2199

Open TashaSkyUp opened 1 year ago

TashaSkyUp commented 1 year ago
// Create a Brython-based node type
class BrythonNode {
    constructor() {
        this.name = "ETK.BrythonNode";
    }
async beforeRegisterNodeDef(nodeType, nodeData, app) {
  const nodeName = nodeData.name.toLowerCase();
  if (nodeName.includes("showtext")) {
    // Extract the Brython code from the node's configuration
    const code = nodeData.internal_state;

    // Fetch the Brython library dynamically
    const brythonScript = document.createElement('script');
    brythonScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.1/brython.js';
    document.head.appendChild(brythonScript);

    // Wait for Brython to be loaded
    await new Promise((resolve) => {
      brythonScript.onload = resolve;
    });

    // Execute the Brython code
    //const script = document.createElement('script');
    //script.type = 'text/python';
    //script.textContent = code;
    //document.head.appendChild(script);

    // Execute the modified Brython code
    const script = document.createElement('script');
    script.type = 'text/python';
    script.textContent = `from browser import console\n\n${code}\n\nmy_brython_code()`;
    document.head.appendChild(script);

    brythonScript.onload = function() {
      brython({debug: 1, indexing: true});
    };

    // Continue with the rest of the node registration process...
    const onExecuted = nodeType.prototype.onExecuted;
    nodeType.prototype.onExecuted = function (message) {
      onExecuted?.apply(this, arguments);
brython({debug: 1, indexing: true});
      // Execute additional code after Brython execution if needed
    };
  }
}
}

// Create an instance of the Brython-based node type
const brythonNode = new BrythonNode();

// Register the extension
app.registerExtension(brythonNode);

Ive tried so many different ways of making it work I cant even remember where I am any longer.. I think this version above complains about cors..

the idea is, there is a python backend, a js litegraph frontend. I'm trying to send brython code from the python backend to the client to be executed.

PierreQuentel commented 1 year ago

@TashaSkyUp

I would like to help, but I haven't heard of litegraph before and after a look at its documentation, I don't understand how it is supposed to work (for instance, I haven't found what app.registerExtension is supposed to do, or why there is a beforeRegisterNodeDef async function).

Can you provide a complete example (HTML and Javascript, client and server side) of something that works (for instance, the same as what you would like to do with Brython, but with Javascript code instead of Brython) so that I can see how it could be adapted ?

TashaSkyUp commented 1 year ago

@PierreQuentel Thank you for your interest, the idea is to be able to write nodes in brython for this project which uses lightgraph.js

https://github.com/comfyanonymous/ComfyUI

if you look at https://github.com/comfyanonymous/ComfyUI/tree/master/web/extensions

this is where litegraph.js likes to load extensions from

furthormore see https://github.com/comfyanonymous/ComfyUI/blob/master/web/extensions/logging.js.example

for an example extension

The comfyui project uses a python backend server and a litegraph.js enabled client. in the python server custom node definitions are defined and the transported to the client where litegraph renders them via a set of rules involving nodes and widgets etc etc. The idea is to enable quicker development of custom nodes and widgets, within the python code base via brython!