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;
container.appendChild(styleElement);
});
if (script.src) { // Extract and execute scripts
// External script const scripts = doc.getElementsByTagName('script');
newScript.src = script.src; Array.from(scripts).forEach(script => {
newScript.onload = resolve; const scriptElement = document.createElement('script');
} else { scriptElement.textContent = script.textContent;
// Inline script container.appendChild(scriptElement);
newScript.textContent = script.textContent; });
}
// Copy other attributes // Append body content
Array.from(script.attributes).forEach(attr => { const body = doc.body;
if (attr.name !== 'src') { Array.from(body.children).forEach(child => {
newScript.setAttribute(attr.name, attr.value); container.appendChild(child);
} });
});
// Replace the old script with the new one // Apply any inline styles from the body
script.parentNode.replaceChild(newScript, script); if (body.style.cssText) {
container.style.cssText = body.style.cssText;
if (!script.src) { }
// For inline scripts, resolve immediately },
resolve(); },
}
});
};
// Execute scripts sequentially
const executeScripts = async () => {
const scripts = temp.querySelectorAll('script');
for (let script of scripts) {
await executeScript(script);
}
};
// Render content and execute scripts
this.$refs.ui.appendChild(temp);
executeScripts();
}
}
}; };
</script> </script>
<style>
.cursor-pointer {
cursor: pointer;
}
</style>

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