mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2024-12-19 20:37:51 +00:00
sync
This commit is contained in:
Saifeddine ALOUI
parent
4ea7a73d60
commit
4677f1ac9b
135
utilities/execution_engines/assets/graphviz_container.html
Normal file
135
utilities/execution_engines/assets/graphviz_container.html
Normal file
@ -0,0 +1,135 @@
|
||||
<div style="width: 100%; margin: 0 auto;">
|
||||
<style>
|
||||
.graph {
|
||||
background-color: transparent;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
#svg-container {
|
||||
border: 1px solid black;
|
||||
display: inline-block;
|
||||
}
|
||||
#controls {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
<div id="controls">
|
||||
<button id="zoom-in">Zoom In</button>
|
||||
<button id="zoom-out">Zoom Out</button>
|
||||
<button id="save-svg">Save</button>
|
||||
<button id="save-png">Save as PNG</button>
|
||||
</div>
|
||||
<div id="svg-container">
|
||||
<div id="graph" class="graph"></div>
|
||||
</div>
|
||||
|
||||
<script src="https://github.com/mdaines/viz-js/releases/download/release-viz-3.2.4/viz-standalone.js"></script>
|
||||
<script>
|
||||
// Initialize the mermaid library and render our diagram
|
||||
Viz.instance().then(function(viz) {
|
||||
var svg = viz.renderSVGElement(`
|
||||
{{svg_data}}
|
||||
`);
|
||||
svg.setAttribute("id", "svg-viewer"); // Ensure your SVG has the correct ID
|
||||
document.getElementById("graph").appendChild(svg);
|
||||
});
|
||||
document.getElementById('zoom-in').addEventListener('click', function() {
|
||||
zoomSVG(1.1); // Zoom in by 10%
|
||||
});
|
||||
|
||||
document.getElementById('zoom-out').addEventListener('click', function() {
|
||||
zoomSVG(0.9); // Zoom out by 10%
|
||||
});
|
||||
|
||||
document.getElementById('save-svg').addEventListener('click', function() {
|
||||
saveSVG();
|
||||
});
|
||||
|
||||
function zoomSVG(factor) {
|
||||
var svg = document.getElementById('svg-viewer');
|
||||
var currentWidth = svg.getAttribute("width");
|
||||
var currentHeight = svg.getAttribute("height");
|
||||
svg.setAttribute("width", Math.round(currentWidth * factor));
|
||||
svg.setAttribute("height", Math.round(currentHeight * factor));
|
||||
}
|
||||
|
||||
function saveSVG() {
|
||||
var svg = document.getElementById('svg-viewer');
|
||||
var serializer = new XMLSerializer();
|
||||
var source = serializer.serializeToString(svg);
|
||||
|
||||
// Add name spaces.
|
||||
if(!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)){
|
||||
source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
|
||||
}
|
||||
if(!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)){
|
||||
source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
|
||||
}
|
||||
|
||||
// Add xml declaration
|
||||
source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
|
||||
|
||||
// Convert SVG source to URI data scheme.
|
||||
var url = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(source);
|
||||
|
||||
// Create download link and click it to start download.
|
||||
var downloadLink = document.createElement("a");
|
||||
downloadLink.href = url;
|
||||
downloadLink.download = "downloaded_svg.svg";
|
||||
document.body.appendChild(downloadLink);
|
||||
downloadLink.click();
|
||||
document.body.removeChild(downloadLink);
|
||||
}
|
||||
document.getElementById('save-png').addEventListener('click', function() {
|
||||
saveSVGAsPNG();
|
||||
});
|
||||
|
||||
function saveSVGAsPNG() {
|
||||
var svg = document.getElementById('svg-viewer');
|
||||
var serializer = new XMLSerializer();
|
||||
var source = serializer.serializeToString(svg);
|
||||
|
||||
// Fix potential namespace issues
|
||||
if(!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)){
|
||||
source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
|
||||
}
|
||||
if(!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)){
|
||||
source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
|
||||
}
|
||||
source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
|
||||
|
||||
// Convert SVG source to a data URL
|
||||
var url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
|
||||
|
||||
// Create an Image to render the SVG
|
||||
var img = new Image();
|
||||
img.onload = function() {
|
||||
// Once loaded, use the Image to render the SVG on a Canvas
|
||||
var canvas = document.createElement('canvas');
|
||||
canvas.width = img.width;
|
||||
canvas.height = img.height;
|
||||
var context = canvas.getContext('2d');
|
||||
context.drawImage(img, 0, 0);
|
||||
|
||||
// Convert the Canvas to a data URL for PNG
|
||||
var pngUrl = canvas.toDataURL("image/png");
|
||||
|
||||
// Create download link and click it to start download
|
||||
var downloadLink = document.createElement("a");
|
||||
downloadLink.href = pngUrl;
|
||||
downloadLink.download = "downloaded_svg.png";
|
||||
document.body.appendChild(downloadLink);
|
||||
downloadLink.click();
|
||||
document.body.removeChild(downloadLink);
|
||||
};
|
||||
img.src = url;
|
||||
}
|
||||
|
||||
</script>
|
||||
<div style="text-align: center;">
|
||||
</div>
|
||||
</div>
|
||||
52
utilities/execution_engines/assets/mermaid_container.html
Normal file
52
utilities/execution_engines/assets/mermaid_container.html
Normal file
@ -0,0 +1,52 @@
|
||||
<div style="width: 100%; margin: 0 auto;">
|
||||
<style>
|
||||
.graph {
|
||||
background-color: transparent;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
#svg-container {
|
||||
border: 1px solid black;
|
||||
display: inline-block;
|
||||
}
|
||||
#controls {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
<div id="controls">
|
||||
<button id="zoom-in">Zoom In</button>
|
||||
<button id="zoom-out">Zoom Out</button>
|
||||
<button id="save-svg">Save</button>
|
||||
<button id="save-png">Save as PNG</button>
|
||||
</div>
|
||||
<div id="svg-container">
|
||||
<div class='mermaid'>
|
||||
{{mermaid}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src='https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js'></script>
|
||||
<script>
|
||||
// Initialize the mermaid library and render our diagram
|
||||
mermaid.initialize({ startOnLoad: true });
|
||||
// Function to save SVG content to a file
|
||||
function saveSVG() {
|
||||
var svg = document.querySelector(".mermaid > svg");
|
||||
var serializer = new XMLSerializer();
|
||||
var source = serializer.serializeToString(svg);
|
||||
var blob = new Blob([source], {type: "image/svg+xml;charset=utf-8"});
|
||||
var url = URL.createObjectURL(blob);
|
||||
var a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "diagram.svg";
|
||||
a.click();
|
||||
}
|
||||
</script>
|
||||
<div style='text-align: center;'>
|
||||
</div>
|
||||
<button onclick="saveSVG()">Save SVG</button>
|
||||
</div>
|
||||
@ -13,7 +13,7 @@ import subprocess
|
||||
import json
|
||||
from lollms.client_session import Client
|
||||
from lollms.utilities import discussion_path_2_url
|
||||
|
||||
from pathlib import Path
|
||||
|
||||
lollmsElfServer:LOLLMSWebUI = LOLLMSWebUI.get_instance()
|
||||
|
||||
@ -39,7 +39,8 @@ def build_graphviz_output(code, ifram_name=None):
|
||||
'width: 100%;',
|
||||
'height: 100%;',
|
||||
'border: none;',
|
||||
'}',
|
||||
'}',
|
||||
|
||||
'.graph {',
|
||||
'background-color: transparent;',
|
||||
'padding: 20px;',
|
||||
@ -49,8 +50,22 @@ def build_graphviz_output(code, ifram_name=None):
|
||||
'align-items: center;',
|
||||
'height: 100%;',
|
||||
'}',
|
||||
'#svg-container {',
|
||||
' border: 1px solid black;',
|
||||
' display: inline-block;',
|
||||
'}',
|
||||
'#controls {',
|
||||
' margin-top: 10px;',
|
||||
'}',
|
||||
'</style>',
|
||||
'<div id="controls">',
|
||||
' <button id="zoom-in">Zoom In</button>',
|
||||
' <button id="zoom-out">Zoom Out</button>',
|
||||
' <button id="save-svg">Save</button>',
|
||||
'</div>',
|
||||
'<div id="svg-container">',
|
||||
'<div id="graph" class="graph"></div>',
|
||||
'</div>',
|
||||
'<script src="https://github.com/mdaines/viz-js/releases/download/release-viz-3.2.4/viz-standalone.js"></script>',
|
||||
'<script>',
|
||||
'// Initialize the mermaid library and render our diagram',
|
||||
@ -65,38 +80,13 @@ def build_graphviz_output(code, ifram_name=None):
|
||||
'</div>',
|
||||
'\' style="width: 100%; height: 600px; border: none;"></iframe>',
|
||||
'</div>'
|
||||
|
||||
]
|
||||
)
|
||||
else:
|
||||
rendered = "\n".join([
|
||||
'<div style="width: 100%; margin: 0 auto;">',
|
||||
'<style>',
|
||||
'.graph {',
|
||||
'background-color: transparent;',
|
||||
'padding: 20px;',
|
||||
'border-radius: 10px;',
|
||||
'display: flex;',
|
||||
'justify-content: center;',
|
||||
'align-items: center;',
|
||||
'height: 100%;',
|
||||
'}',
|
||||
'</style>',
|
||||
'<div id="graph" class="graph"></div>',
|
||||
'<script src="https://github.com/mdaines/viz-js/releases/download/release-viz-3.2.4/viz-standalone.js"></script>',
|
||||
'<script>',
|
||||
'// Initialize the mermaid library and render our diagram',
|
||||
'Viz.instance().then(function(viz) {',
|
||||
'var svg = viz.renderSVGElement(`',
|
||||
"\n".join([c.replace("'","\"") for c in code.split("\n") if c.strip()!=""]),
|
||||
'`);',
|
||||
'document.getElementById("graph").appendChild(svg);',
|
||||
'});',
|
||||
'</script>',
|
||||
'<div style="text-align: center;">',
|
||||
'</div>',
|
||||
'</div>'
|
||||
]
|
||||
)
|
||||
with open(Path(__file__).parent/"assets"/"graphviz_container.html","r",encoding="utf-8") as f:
|
||||
data = f.read()
|
||||
rendered = data.replace("{{svg_data}}","\n".join([c.replace("'","\'") for c in code.split("\n") if c.strip()!=""]) )
|
||||
|
||||
execution_time = time.time() - start_time
|
||||
return {"output": rendered, "execution_time": execution_time}
|
||||
|
||||
@ -1 +1 @@
|
||||
Subproject commit 8235940fed978ac7001c30a8eb38423a5fc56a2f
|
||||
Subproject commit fa288b66cb404acff87908160705007150d0cf99
|
||||
Loading…
Reference in New Issue
Block a user