mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2024-12-21 05:13:10 +00:00
new stuff
This commit is contained in:
Saifeddine ALOUI
parent
d22201f850
commit
24debaa54c
@ -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
2
web/dist/index.html
vendored
@ -6,7 +6,7 @@
|
||||
<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">
|
||||
<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">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
<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"
|
||||
ref="ui">
|
||||
</div>
|
||||
<div ref="container"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DynamicUIRenderer',
|
||||
props: {
|
||||
ui: {
|
||||
type: String,
|
||||
@ -13,74 +12,50 @@ export default {
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.renderUI();
|
||||
},
|
||||
watch: {
|
||||
ui: {
|
||||
handler(newVal) {
|
||||
this.$nextTick(() => {
|
||||
this.renderAndExecuteScripts(newVal);
|
||||
});
|
||||
handler: 'renderUI',
|
||||
immediate: true,
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
renderAndExecuteScripts(content) {
|
||||
// Clear previous content
|
||||
this.$refs.ui.innerHTML = '';
|
||||
renderUI() {
|
||||
const container = this.$refs.container;
|
||||
container.innerHTML = '';
|
||||
|
||||
// Create a temporary container
|
||||
const temp = document.createElement('div');
|
||||
temp.innerHTML = content;
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(this.ui, 'text/html');
|
||||
|
||||
// Function to execute a single script
|
||||
const executeScript = (script) => {
|
||||
return new Promise((resolve) => {
|
||||
const newScript = document.createElement('script');
|
||||
|
||||
if (script.src) {
|
||||
// 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);
|
||||
}
|
||||
// Extract and apply styles
|
||||
const styles = doc.getElementsByTagName('style');
|
||||
Array.from(styles).forEach(style => {
|
||||
const styleElement = document.createElement('style');
|
||||
styleElement.textContent = style.textContent;
|
||||
container.appendChild(styleElement);
|
||||
});
|
||||
|
||||
// Replace the old script with the new one
|
||||
script.parentNode.replaceChild(newScript, script);
|
||||
|
||||
if (!script.src) {
|
||||
// For inline scripts, resolve immediately
|
||||
resolve();
|
||||
}
|
||||
// Extract and execute scripts
|
||||
const scripts = doc.getElementsByTagName('script');
|
||||
Array.from(scripts).forEach(script => {
|
||||
const scriptElement = document.createElement('script');
|
||||
scriptElement.textContent = script.textContent;
|
||||
container.appendChild(scriptElement);
|
||||
});
|
||||
};
|
||||
|
||||
// Execute scripts sequentially
|
||||
const executeScripts = async () => {
|
||||
const scripts = temp.querySelectorAll('script');
|
||||
for (let script of scripts) {
|
||||
await executeScript(script);
|
||||
}
|
||||
};
|
||||
// Append body content
|
||||
const body = doc.body;
|
||||
Array.from(body.children).forEach(child => {
|
||||
container.appendChild(child);
|
||||
});
|
||||
|
||||
// Render content and execute scripts
|
||||
this.$refs.ui.appendChild(temp);
|
||||
executeScripts();
|
||||
}
|
||||
// Apply any inline styles from the body
|
||||
if (body.style.cssText) {
|
||||
container.style.cssText = body.style.cssText;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1 +1 @@
|
||||
Subproject commit 21e8a8c7764d86429943a122f6d3fe22fb0c9c17
|
||||
Subproject commit c3a351fb8db5f030cfbc4bcf3091095a21b26fed
|
||||
Loading…
Reference in New Issue
Block a user