new stuff

This commit is contained in:
Saifeddine ALOUI 2024-08-21 03:27:01 +02:00
parent d22201f850
commit 24debaa54c
5 changed files with 41 additions and 152 deletions

View File

@ -303,89 +303,3 @@ class WorkflowVisualizer {
}); });
} }
} }
// Usage example
const nodeOperations = {
"Add": (inputs) => ({ sum: inputs.a + inputs.b }),
"Multiply": (inputs) => ({ product: inputs.x * inputs.y }),
"Output": (inputs) => console.log("Result:", inputs.result)
};
const visualizer = new WorkflowVisualizer("workflow-container");
const addNode = new WorkflowNode(0, "Add", [
{ name: "a", type: "number" },
{ name: "b", type: "number" }
], [
{ name: "sum", type: "number" }
], nodeOperations["Add"], 50, 50);
const multiplyNode = new WorkflowNode(1, "Multiply", [
{ name: "x", type: "number" },
{ name: "y", type: "number" }
], [
{ name: "product", type: "number" }
], nodeOperations["Multiply"], 250, 50);
const outputNode = new WorkflowNode(2, "Output", [
{ name: "result", type: "number" }
], [], nodeOperations["Output"], 450, 50);
visualizer.addNode(addNode);
visualizer.addNode(multiplyNode);
visualizer.addNode(outputNode);
visualizer.connectNodes(0, 0, 1, 0);
visualizer.connectNodes(1, 0, 2, 0);
// Add save and load buttons
const saveButton = document.createElement("button");
saveButton.textContent = "Save";
saveButton.onclick = () => {
const json = visualizer.saveToJSON();
const blob = new Blob([json], { type: "application/json" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "workflow.json";
a.click();
URL.revokeObjectURL(url);
};
document.body.appendChild(saveButton);
const loadButton = document.createElement("button");
loadButton.textContent = "Load";
loadButton.onclick = () => {
const input = document.createElement("input");
input.type = "file";
input.accept = "application/json";
input.onchange = (event) => {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = (e) => {
visualizer.loadFromJSON(e.target.result, nodeOperations);
};
reader.readAsText(file);
};
input.click();
};
document.body.appendChild(loadButton);
// Add save and load to/from localStorage buttons
const saveLocalButton = document.createElement("button");
saveLocalButton.textContent = "Save to LocalStorage";
saveLocalButton.onclick = () => visualizer.saveToLocalStorage("workflow");
document.body.appendChild(saveLocalButton);
const loadLocalButton = document.createElement("button");
loadLocalButton.textContent = "Load from LocalStorage";
loadLocalButton.onclick = () => visualizer.loadFromLocalStorage("workflow", nodeOperations);
document.body.appendChild(loadLocalButton);
const executeButton = document.createElement("button");
executeButton.textContent = "Execute";
executeButton.onclick = () => {
const results = visualizer.execute();
console.log(results);
};
document.body.appendChild(executeButton);

File diff suppressed because one or more lines are too long

2
web/dist/index.html vendored
View File

@ -6,7 +6,7 @@
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script> <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LoLLMS WebUI</title> <title>LoLLMS WebUI</title>
<script type="module" crossorigin src="/assets/index-9d85d317.js"></script> <script type="module" crossorigin src="/assets/index-14cd1bfc.js"></script>
<link rel="stylesheet" href="/assets/index-f1d31414.css"> <link rel="stylesheet" href="/assets/index-f1d31414.css">
</head> </head>
<body> <body>

View File

@ -1,11 +1,10 @@
<template> <template>
<div class="w-full h-auto overflow-y-auto scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary" <div ref="container"></div>
ref="ui">
</div>
</template> </template>
<script> <script>
export default { export default {
name: 'DynamicUIRenderer',
props: { props: {
ui: { ui: {
type: String, type: String,
@ -13,74 +12,50 @@ export default {
default: "", default: "",
}, },
}, },
mounted() {
this.renderUI();
},
watch: { watch: {
ui: { ui: {
handler(newVal) { handler: 'renderUI',
this.$nextTick(() => { immediate: true,
this.renderAndExecuteScripts(newVal);
});
}, },
immediate: true
}
}, },
methods: { methods: {
renderAndExecuteScripts(content) { renderUI() {
// Clear previous content const container = this.$refs.container;
this.$refs.ui.innerHTML = ''; container.innerHTML = '';
// Create a temporary container const parser = new DOMParser();
const temp = document.createElement('div'); const doc = parser.parseFromString(this.ui, 'text/html');
temp.innerHTML = content;
// Function to execute a single script // Extract and apply styles
const executeScript = (script) => { const styles = doc.getElementsByTagName('style');
return new Promise((resolve) => { Array.from(styles).forEach(style => {
const newScript = document.createElement('script'); const styleElement = document.createElement('style');
styleElement.textContent = style.textContent;
if (script.src) { container.appendChild(styleElement);
// External script
newScript.src = script.src;
newScript.onload = resolve;
} else {
// Inline script
newScript.textContent = script.textContent;
}
// Copy other attributes
Array.from(script.attributes).forEach(attr => {
if (attr.name !== 'src') {
newScript.setAttribute(attr.name, attr.value);
}
}); });
// Replace the old script with the new one // Extract and execute scripts
script.parentNode.replaceChild(newScript, script); const scripts = doc.getElementsByTagName('script');
Array.from(scripts).forEach(script => {
if (!script.src) { const scriptElement = document.createElement('script');
// For inline scripts, resolve immediately scriptElement.textContent = script.textContent;
resolve(); container.appendChild(scriptElement);
}
}); });
};
// Execute scripts sequentially // Append body content
const executeScripts = async () => { const body = doc.body;
const scripts = temp.querySelectorAll('script'); Array.from(body.children).forEach(child => {
for (let script of scripts) { container.appendChild(child);
await executeScript(script); });
}
};
// Render content and execute scripts // Apply any inline styles from the body
this.$refs.ui.appendChild(temp); if (body.style.cssText) {
executeScripts(); container.style.cssText = body.style.cssText;
}
} }
},
},
}; };
</script> </script>
<style>
.cursor-pointer {
cursor: pointer;
}
</style>

@ -1 +1 @@
Subproject commit 21e8a8c7764d86429943a122f6d3fe22fb0c9c17 Subproject commit c3a351fb8db5f030cfbc4bcf3091095a21b26fed