add frontend directory and update packaging process

.gitignore

@@ -94,3 +94,10 @@ Thumbs.db
 browser_tests/test-results/
 browser_tests/playwright-report/
 browser_tests/blob-report/
+
+#packaged product
+bizyui.egg-info/
+bizyui/js/bizyair_frontend.js
+dist/
+
+*.tsbuildinfo

README.md

@@ -13,6 +13,11 @@ npm run format
 npx eslint src
 # release frontend 
 npm run dev
+#重新打包前端得到.whl包
+npm run build:py
+#不重新生成forntend_bizyair.js只重新打包bizyui目录得到.whl包
+npm run build:bizyui
 ```
 
+
 ### Installation and Setup

bizyui/js/apis.js

@@ -0,0 +1,153 @@
+import { dialog } from './subassembly/dialog.js';
+
+const fetchCache = new Map();
+
+function customFetch(url, options = {}) {
+    const now = Date.now();
+    if (fetchCache.has(url)) {
+        const lastFetchTime = fetchCache.get(url);
+        if (now - lastFetchTime < 1200) {
+            return Promise.resolve(null);
+        }
+    }
+    fetchCache.set(url, now);
+    const host = `${window.location.origin}${window.location.pathname === '/' ? '' : window.location.pathname}`
+    return window.fetch(`${host}${url}`, options)
+        .then(response => {
+            if (response.status === 404) {
+                dialog({
+                    content: "You may be missing dependencies at the moment. For details, please refer to the ComfyUI logs.",
+                    type: 'error',
+                    noText: 'Close'
+                })
+            }
+            return response.json();
+        })
+        .then(data => {
+            const { code, message } = data;
+            if (code !== 20000) {
+                dialog({
+                    type: 'warning',
+                    content: message,
+                    noText: 'Close',
+                    onNo: () => {
+                        if (code === 401000) {
+                            document.querySelector('.menus-item-key').click()
+                        }
+                    }
+                })
+
+                return;
+            }
+            return data;
+        })
+        .catch(error => {
+            console.error('Fetch error:', error);
+            throw error;
+        });
+}
+
+
+export function check_model_exists ( type, name ) {
+    return customFetch('/bizyair/modelhost/check_model_exists', {
+        method: 'POST',
+        body: JSON.stringify({ type, name })
+    })
+}
+
+export function model_upload ( data ) {
+    return customFetch('/bizyair/modelhost/model_upload', {
+        method: 'POST',
+        body: JSON.stringify(data)
+    })
+}
+
+export function file_upload ( data ) {
+    return customFetch('/bizyair/modelhost/file_upload', {
+        method: 'POST',
+        body: data
+    })
+}
+
+export function set_api_key ( data ) {
+    return customFetch('/bizyair/set_api_key', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        },
+        body: data
+    })
+}
+
+export function models_files ( params, data ) {
+    let actualParams = ''
+    for (const i in params) {
+        actualParams += `${i}=${params[i]}&`
+    }
+    return customFetch(`/bizyair/community/models/query?${actualParams}`, {
+        method: 'POST',
+        body: JSON.stringify(data)
+    })
+}
+
+export function change_public ( data ) {
+    return customFetch('/bizyair/modelhost/models/change_public', {method: 'PUT', body: JSON.stringify(data)})
+}
+
+export function model_types () {
+    return customFetch('/bizyair/community/model_types', {method: 'GET'})
+}
+
+export function check_folder (url) {
+    return customFetch(`/bizyair/modelhost/check_folder?absolute_path=${encodeURIComponent(url)}`, {method: 'GET'})
+}
+
+export function submit_upload (data) {
+    return customFetch(`/bizyair/community/submit_upload?clientId=${sessionStorage.getItem('clientId')}`, {
+        method: 'POST',
+        body: JSON.stringify(data)
+    })
+}
+
+export function delModels ( data ) {
+    return customFetch('/bizyair/modelhost/models', {
+        method: 'DELETE',
+        body: JSON.stringify({
+            type: data.type,
+            name: data.name,
+        }),
+    })
+}
+
+export function getUserInfo () {
+    return customFetch('/bizyair/user/info', { method: 'get' })
+}
+
+export function putShareId (data) {
+    return customFetch('/bizyair/user/share_id', {
+        method: 'put',
+        body: JSON.stringify(data)
+    })
+}
+
+export function getDescription (data) {
+    return customFetch(`/bizyair/modelhost/models/description?${new URLSearchParams(data).toString()}`, {
+        method: 'get'
+    })
+}
+
+export function putDescription (data) {
+    return customFetch('/bizyair/modelhost/models/description', {
+        method: 'put',
+        body: JSON.stringify(data)
+    })
+}
+
+export function uploadImage (file) {
+    const formData = new FormData();
+    formData.append('file', file);
+    return customFetch('/bizyair/community/files/upload', {
+        method: 'POST',
+        body: formData
+    })
+}

bizyui/js/bizyair_tools.js

@@ -0,0 +1,54 @@
+import { app, ComfyApp } from "../../scripts/app.js";
+import { api } from "../../../scripts/api.js";
+
+app.registerExtension({
+	name: "bizyair.tool",
+	setup() {
+
+        async function handleFile(json_data) {
+            const jsonContent = json_data
+
+            await app.loadGraphData(
+                jsonContent,
+                true,
+                false,
+                "convert_test"
+              );
+
+        }
+        async function convert(){
+            const p2 = await app.graphToPrompt();
+            const json = JSON.stringify(p2["workflow"], null, 2);
+
+            await api.fetchApi("/bizyair/node_converter", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: json
+              }).then(response => response.json())
+              .then(data => handleFile(data))
+              .catch(error => console.error("Error:", error));
+        }
+        // Add canvas menu options
+        const orig = LGraphCanvas.prototype.getCanvasMenuOptions;
+        LGraphCanvas.prototype.getCanvasMenuOptions = function () {
+            const options = orig.apply(this, arguments);
+            options.push(null, {
+                content: "BizyAir Tools",
+                submenu: {
+                    options: [
+                        {
+                            content: "convert to bizyair node",
+                            callback: async () => {
+                                await convert()
+                            },
+                        },
+                    ],
+                },
+            });
+            return options;
+        };
+
+	},
+});

bizyui/js/connection_color.js

@@ -0,0 +1,13 @@
+import { app } from "../../scripts/app.js";
+
+app.registerExtension({
+    name: "bizyair.custom.connectionColorByType",
+    async setup() {
+        Object.assign(app.canvas.default_connection_color_byType, {
+            BIZYAIR_MODEL: '#7C5AEC',
+            BIZYAIR_CLIP: '#FFF4C4',
+            BIZYAIR_VAE: '#FF5959',
+            BIZYAIR_CONDITIONING: '#967117',
+        })
+    },
+});

bizyui/js/dataset_apply.js

@@ -0,0 +1,138 @@
+import { app } from "../../scripts/app.js";
+
+import './bizyair_frontend.js'
+import { hideWidget } from './subassembly/tools.js'
+
+function createSetWidgetCallback() {
+    return function setWidgetCallback() {
+        const targetWidget = this.widgets.find(widget => widget.name == "dataset_path");
+        if (targetWidget) {
+            targetWidget.value = targetWidget.value || "to choose"
+            targetWidget.mouse = function(e, pos, canvas) {
+                try {
+                    if (e.type === "pointerdown" || e.type === "mousedown" || e.type === "click" || e.type === "pointerup") {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        e.widgetClick = true;
+                        const currentNode = this.node;
+
+                        if (!currentNode || !currentNode.widgets) {
+                            console.warn("Node or widgets not available");
+                            return false;
+                        }
+
+                        if (typeof bizyAirLib !== 'undefined' && typeof bizyAirLib.showDatasetSelect === 'function') {
+                            bizyAirLib.showDatasetSelect({
+                                showDatasetSelect: true,
+                                isNodeSelect: true,
+                                onApply: (versionId, name) => {
+                                    console.log("onApply", versionId, name)
+                                    if (!currentNode || !currentNode.widgets) return;
+
+                                    const datasetPath = currentNode.widgets.find(widget => widget.name == "dataset_path");
+                                    const datasetVersionId = currentNode.widgets.find(w => w.name === "dataset_version_id");
+                                    if (datasetPath && datasetVersionId) {
+                                        datasetPath.value = name;
+                                        datasetVersionId.value = versionId;
+                                        currentNode.setDirtyCanvas(true);
+                                    }
+                                }
+                            })
+                        } else {
+                            console.error("bizyAirLib not available");
+                        }
+                        return false;
+                    }
+                } catch (error) {
+                    console.error("Error handling mouse event:", error);
+                }
+            };
+
+            targetWidget.node = this;
+            targetWidget.options = targetWidget.options || {};
+            targetWidget.options.values = () => [];
+            targetWidget.options.editable = false;
+            targetWidget.clickable = true;
+            targetWidget.processMouse = true;
+        }
+    }
+}
+
+function setupNodeMouseBehavior(node) {
+    hideWidget(node, "dataset_version_id");
+
+    if (!node._bizyairState) {
+        node._bizyairState = {
+            lastClickTime: 0,
+            DEBOUNCE_DELAY: 300,
+            original_onMouseDown: node.onMouseDown
+        };
+    }
+
+    node.onMouseDown = function(e, pos, canvas) {
+        if (e.widgetClick) {
+            return this._bizyairState.original_onMouseDown?.apply(this, arguments);
+        }
+        const targetWidget = this.widgets.find(widget => widget.name == "dataset_path");
+        if (targetWidget && pos[1] - targetWidget.last_y > 0 && pos[1] - targetWidget.last_y < 20) {
+            const litecontextmenu = document.querySelector('.litegraph.litecontextmenu')
+            if (litecontextmenu) {
+                litecontextmenu.style.display = 'none'
+            }
+            e.stopImmediatePropagation();
+            e.preventDefault();
+            if (e.button !== 0) {
+                return false;
+            }
+
+            const currentTime = new Date().getTime();
+            if (currentTime - this._bizyairState.lastClickTime < this._bizyairState.DEBOUNCE_DELAY) {
+                return false;
+            }
+            this._bizyairState.lastClickTime = currentTime;
+            bizyAirLib.showDatasetSelect({
+                showDatasetSelect: true,
+                isNodeSelect: true,
+                onApply: (versionId, name) => {
+                    console.log("onApply", versionId, name)
+                    if (!currentNode || !currentNode.widgets) return;
+
+                    const datasetPath = currentNode.widgets.find(widget => widget.name == "dataset_path");
+                    const datasetVersionId = currentNode.widgets.find(w => w.name === "dataset_version_id");
+                    if (datasetPath && datasetVersionId) {
+                        datasetPath.value = name;
+                        datasetVersionId.value = versionId;
+                        currentNode.setDirtyCanvas(true);
+                    }
+                }
+            })
+            return false;
+        } else {
+            return this._bizyairState.original_onMouseDown?.apply(this, arguments);
+        }
+    }
+}
+
+app.registerExtension({
+    name: "bizyair.siliconcloud.share.dataset.loader.train",
+    async beforeRegisterNodeDef(nodeType, nodeData, app) {
+        if (nodeData.name === "BizyAir_TrainDatasetAdd") {
+            const onNodeCreated = nodeType.prototype.onNodeCreated;
+            nodeType.prototype.onNodeCreated = function() {
+                try {
+                    const result = onNodeCreated?.apply(this, arguments);
+                    createSetWidgetCallback().call(this);
+                    return result;
+                } catch (error) {
+                    console.error("Error in node creation:", error);
+                }
+            };
+        }
+    },
+
+    async nodeCreated(node) {
+        if (node?.comfyClass === "BizyAir_TrainDatasetAdd") {
+            setupNodeMouseBehavior(node);
+        }
+    }
+})