LiteGraph实现类似ai智能体工作量编排添加节点拖拽连线导出导入试运行代码-html代码-BFW代码库

LiteGraph实现类似ai智能体工作量编排添加节点拖拽连线导出导入试运行代码

代码语言：html

所属分类：图表

代码描述：LiteGraph实现类似ai智能体工作量编排添加节点拖拽连线导出导入试运行代码，其中后端的试运行代码在这里，是php版本的，https://blog.bfw.wiki/user12290/17178363519436740056.html

代码标签： LiteGraph 类似 ai 智能体工作量编排添加节点拖拽连线导出导入试运行代

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LiteGraph Workflow</title>
    <style>
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/litegraph_mini.js"></script>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/litegraph.1.0.css">

</head>

<body>
    <div class="header">
        <h1>LiteGraph 工作流</h1>
    </div>
    <div class="container">
        <div class="buttons">
            <button onclick="addHttpNode()">添加HTTP节点</button>
            <button onclick="addFormatNode()">添加格式化节点</button>
            <button onclick="exportWorkflow()">导出工作流</button>
            <button onclick="loadWorkflow()">加载工作流</button>

            <button onclick="testrunWorkflow()">测试运行工作流</button>
        </div>
        <canvas id="graph-container" width='1024' height='720'></canvas>

    </div>
    <script>
        // 创建LiteGraph图表
        var graph = new LGraph();
        var canvas = new LGraphCanvas("#graph-container", graph);

        // 禁用右键菜单
        canvas.getCanvasMenuOptions = function () {
            return [];
        };
        canvas.getNodeMenuOptions = function (node) {
            if (node.type === "workflow/start" || node.type === "workflow/end") {
                return [];
            }
            return LiteGraph.LGraphCanvas.prototype.getNodeMenuOptions.call(this, node);
        };

        // 注册开始节点
        function StartNode() {
            this.addOutput("Output", "string");
        }

        StartNode.title = "Start";
        StartNode.prototype.onExecute = function () {
           // this.setOutputData(0, "https://example.com"); // 输出一个固定URL
        };

        LiteGraph.registerNodeType("workflow/start", StartNode);

        // 注册结束节点
        function EndNode() {
            this.addInput("Input", "string");
        }

        EndNode.title = "End";
        EndNode.prototype.onExecute = function () {
            //var input = this.getInputData(0);
          //  console.log("End Node Input:", input); // 打印输入值
        };

        LiteGraph.registerNodeType("workflow/end", EndNode);

        // 注册HTTP节点
        function HttpNode() {
            this.addInput("URL", "string");
            this.addOutput("HTML", "string");
            this.properties = { timeout: 5000 };

            var that = this;
            this.addWidget("number", "Timeout (ms)", this.properties.timeout, function (v) {
                that.properties.timeout = v;
            });
        }

        HttpNode.title = "HttpNode";
        HttpNode.prototype.onExecute = function () {
            var url = this.getInputData(0);
            if (url) {
                return;
                fetch(url, { timeout: this.properties.timeout })
                    .then(response => response.text())
                    .then(html => {
                        this.setOutputData(0, html);
                    })
                    .catch(error => {
                        console.error("HTTP请求错误:", error);
                        this.setOutputData(0, "");
                    });
            }
        };

        LiteGraph.registerNodeType("network/http", HttpNode);

        // 注册格式化节点
        function FormatNode() {
            this.addInput("HTML", "string");
            this.addOutput("Text", "string");
        }

        FormatNode.title = "FormatNode";
        FormatNode.prototype.onExecute = function () {
            var html = this.getInput.........完整代码请登录后点击上方下载按钮下载查看