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:
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>
|
<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>
|
||||||
|
@ -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
|
Loading…
Reference in New Issue
Block a user