v0.36.0 p5.js

README.md

@@ -6,6 +6,9 @@
 
 ##### `最新`：
 
+- 增加p5.js作为输入节点
+[workflow](./workflow/p5workflow.json)
+
 - App模式增加batch prompt，批量提示词，可以把动态提示词批量组成后运行
 
 ![alt text](./assets/1722517810720.png)

__init__.py

@@ -782,7 +782,7 @@ def random_seed(seed, data):
 @routes.post("/mixlab/prompt")
 async def mixlab_post_prompt(request):
     p_intance=PromptServer.instance
-    logging.info("got prompt")
+    logging.info("/mixlab/prompt")
     resp_code = 200
     out_string = ""
     json_data =  await request.json()
@@ -798,10 +798,11 @@ async def mixlab_post_prompt(request):
     apps=get_my_workflow_for_app(json_data['filename'],json_data['category'],False)
 
     prompt=json_data['prompt'] if 'prompt' in json_data else None
-
+    
     if len(apps)>0:
         # 取到prompt
         prompt=apps[0]['data']['output']
+        # logging.info(prompt)
         # 更新input_data到prompt里
         '''
           {

pyproject.toml

@@ -1,7 +1,7 @@
 [project]
 name = "comfyui-mixlab-nodes"
 description = "3D, ScreenShareNode & FloatingVideoNode, SpeechRecognition & SpeechSynthesis, GPT, LoadImagesFromLocal, Layers, Other Nodes, ..."
-version = "0.35.3"
+version = "0.36.0"
 license = "MIT"
 dependencies = ["numpy", "pyOpenSSL", "watchdog", "opencv-python-headless", "matplotlib", "openai", "simple-lama-inpainting", "clip-interrogator==0.6.0", "transformers>=4.36.0", "lark-parser", "imageio-ffmpeg", "rembg[gpu]", "omegaconf==2.3.0", "Pillow>=9.5.0", "einops==0.7.0", "trimesh>=4.0.5", "huggingface-hub", "scikit-image"]
 

web/javascript/checkVersion_mixlab.js

@@ -3,7 +3,7 @@ import { app } from '../../../scripts/app.js'
 const repoOwner = 'shadowcz007' // 替换为仓库的所有者
 const repoName = 'comfyui-mixlab-nodes' // 替换为仓库的名称
 
-const version = 'v0.35.1'
+const version = 'v0.36.0'
 
 fetch(`https://api.github.com/repos/${repoOwner}/${repoName}/releases/latest`)
   .then(response => response.json())

web/javascript/p5.js

@@ -171,6 +171,7 @@ const p5InputNode = {
       let widget = node.widgets?.filter(w => w.name == 'image_base64')[0]
       let framesWidget = node.widgets?.filter(w => w.name == 'frames')[0]
       if (node.type === 'P5Input' && widget) {
+        console.log('#nodeCreated P5Input')
         if (framesWidget && !framesWidget.value)
           framesWidget.value = { images: [] }
 
@@ -185,26 +186,30 @@ const p5InputNode = {
         // 监听来自iframe的消息
         const ms = async event => {
           const data = event.data
+          console.log('#P5 Input #', data)
           if (
             data.from === 'p5.widget' &&
             data.status === 'save' &&
             data.frames &&
-            data.frames.length > 0 &&
-            data.nodeId == nodeId
+            data.frames.length >= 0 &&
+            data.nodeId == nodeId &&
+            data.id != framesWidget.value.id
           ) {
             const frames = data.frames
-            console.log(frames.length, nodeId)
+
             //workflow会存储到local，会卡死
             framesWidget.value.images = []
             for (const f of frames) {
               let file = await uploadBase64ToFile(f)
               framesWidget.value.images.push(file)
             }
             // framesWidget.value.base64 = frames
-            framesWidget.value._seed = Math.random()
+            // framesWidget.value._seed = Math.random()
             node.title = 'P5 Input #' + frames.length
+            framesWidget.value.id = data.id
           }
         }
+
         window.addEventListener('message', ms)
       }
     }, 1000)

web/p5_export/p5-widget/main.bundle.js

@@ -73,28 +73,22 @@
 	    }
 	    initialContent = initialContent.replace(/\r\n/g, '\n').trim();
 	    ReactDOM.render(React.createElement(app_1.default, {initialContent: initialContent, autosaver: new autosaver_1.SessionStorageAutosaver(id), baseSketchURL: baseSketchURL, p5version: p5version, previewWidth: previewWidth, maxRunTime: maxRunTime, autoplay: autoplay}), document.getElementById('app-holder'));
+	    // 监听来自iframe的消息
+	    window.addEventListener('message', function (event) {
+	        var data = event.data;
+	        // console.log("#main", data)
+	        if (data.from === 'p5.widget' && data.status === 'save') {
+	            var frames_1 = data.frames;
+	            window.parent.postMessage({
+	                frames: frames_1,
+	                from: 'p5.widget',
+	                status: 'save',
+	                _from: "main"
+	            }, '*');
+	        }
+	    });
 	}
 	window.addEventListener('load', start);
-	// 监听来自iframe的消息
-	window.addEventListener('message', function (event) {
-	    var data = event.data;
-	    if (data.from === 'p5.widget' && data.status === 'save') {
-	        var frames_1 = data.frames;
-	        window.parent.postMessage({
-	            frames: frames_1,
-	            from: 'p5.widget',
-	            status: 'save'
-	        }, '*');
-	    }
-	    // if (data.from === 'p5.widget' && data.status === 'capture') {
-	    //   window.parent.postMessage({
-	    //     from: 'p5.widget',
-	    //     status: 'capture',
-	    //     frameCount: data.frameCount,
-	    //     maxCount: data.maxCount,
-	    //   }, '*');
-	    // }
-	});
 
 
 /***/ }),
@@ -23670,7 +23664,7 @@
 /***/ (function(module, exports) {
 
 	"use strict";
-	exports.P5_VERSION = '0.4.23';
+	exports.P5_VERSION = '1.10.0';
 	exports.PREVIEW_WIDTH = 150;
 	exports.HEIGHT = 300;
 	exports.MAX_RUN_TIME = 1000;
@@ -23766,6 +23760,10 @@
 	        };
 	        this.handleStopClick = function () {
 	            _this.setState({ isPlaying: false });
+	            window.parent.postMessage({
+	                from: 'p5.widget',
+	                status: 'stop'
+	            }, '*');
 	        };
 	        this.handleUndoClick = function () {
 	            _this.refs.editor.undo();
@@ -23956,7 +23954,7 @@
 	    }
 	    Toolbar.prototype.render = function () {
 	        return (React.createElement("div", {className: "toolbar"}, React.createElement("a", {className: "p5-logo", href: "http://p5js.org/", target: "_blank"}, React.createElement("img", {src: "static/img/p5js-beta.svg", alt: "p5js.org"})), React.createElement("button", {onClick: this.props.onPlayClick}, React.createElement(OpenIconicMediaPlay, null), "Play"), this.props.onStopClick
-	            ? React.createElement("button", {onClick: this.props.onStopClick}, React.createElement(OpenIconicMediaStop, null), "Stop ", this.props.progress)
+	            ? React.createElement("button", {onClick: this.props.onStopClick}, React.createElement(OpenIconicMediaStop, null), "Stop")
 	            : null, this.props.onUndoClick
 	            ? React.createElement("button", {onClick: this.props.onUndoClick}, React.createElement(OpenIconicActionUndo, null), "Undo")
 	            : null, this.props.onRedoClick
@@ -34945,8 +34943,7 @@
 	        content = implicit_sketch_1.default(content);
 	        try {
 	            content = falafel_1.default(content, {}, loop_inserter_1.default(function (node) {
-	                return LOOP_CHECK_FUNC_NAME + "(" +
-	                    JSON.stringify(node.range) + ");";
+	                return LOOP_CHECK_FUNC_NAME + "(" + JSON.stringify(node.range) + ");";
 	            })).toString();
 	        }
 	        catch (e) {
@@ -34998,6 +34995,7 @@
 	"use strict";
 	var esprima = __webpack_require__(204);
 	var parse = esprima.parse;
+	var LOOP_CHECK_FUNC_NAME = '__loopCheck';
 	function default_1(src, opts, fn) {
 	    if (typeof opts === 'function') {
 	        fn = opts;
@@ -35080,7 +35078,6 @@
 	        console.log('#Found draw function:', node);
 	        var hasCapturerStart_1 = false;
 	        var hasCapturerEnd_1 = false;
-	        // Traverse the function body to check for `capturer_start()` and `capturer_end()`
 	        (function checkCapturerCalls(bodyNode) {
 	            if (bodyNode.type === 'CallExpression' &&
 	                bodyNode.callee &&
@@ -40865,25 +40862,48 @@
 	"use strict";
 	function defaultInserter(name) {
 	    return function (node) {
-	        return name + "();";
+	        return name + '();';
 	    };
 	}
+	var LOOP_CHECK_FUNC_NAME = '__loopCheck';
 	function LoopInserter(fn) {
-	    if (typeof (fn) == "string")
-	        fn = defaultInserter(fn);
 	    return function (node) {
-	        if (node.type == 'WhileStatement' ||
-	            node.type == 'ForStatement' ||
-	            node.type == 'DoWhileStatement') {
-	            node.body.update('{ ' + fn(node) + node.body.source() + ' }');
-	            return true;
+	        if (node.type === 'ForStatement' ||
+	            node.type === 'WhileStatement' ||
+	            node.type === 'DoWhileStatement') {
+	            var loopCheckCode = {
+	                type: 'ExpressionStatement',
+	                expression: {
+	                    type: 'CallExpression',
+	                    callee: {
+	                        type: 'Identifier',
+	                        name: LOOP_CHECK_FUNC_NAME
+	                    },
+	                    arguments: [
+	                        {
+	                            type: 'Literal',
+	                            value: JSON.stringify(node.range)
+	                        }
+	                    ]
+	                }
+	            };
+	            if (node.body.type === 'BlockStatement') {
+	                // Insert the loop check at the beginning of the block
+	                node.body.body.unshift(loopCheckCode);
+	            }
+	            else {
+	                // Wrap the single statement body in a block and insert the loop check
+	                node.body = {
+	                    type: 'BlockStatement',
+	                    body: [loopCheckCode, node.body]
+	                };
+	            }
 	        }
-	        return false;
+	        return '';
 	    };
 	}
 	Object.defineProperty(exports, "__esModule", { value: true });
 	exports.default = LoopInserter;
-	;
 
 
 /***/ }),

web/p5_export/p5-widget/p5-widget.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
-<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
+<!-- <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> -->
 <title>p5.js-widget</title>
 <div id="app-holder"></div>
 <script src="./main.bundle.js"></script>