From da8ab8615444396865a51179d806c83452bf1ca7 Mon Sep 17 00:00:00 2001
From: Saifeddine ALOUI <aloui.seifeddine@gmail.com>
Date: Sun, 21 Apr 2024 17:14:00 +0200
Subject: [PATCH] Enhanced engines

---
 endpoints/lollms_advanced.py                  |   6 +
 .../graphviz_execution_engine.py              |   4 +-
 .../javascript_execution_engine.py            |  48 +++---
 .../mermaid_execution_engine.py               | 139 +++++++++++------
 .../execution_engines/svg_execution_engine.py | 143 +++++++++++-------
 5 files changed, 219 insertions(+), 121 deletions(-)

diff --git a/endpoints/lollms_advanced.py b/endpoints/lollms_advanced.py
index f4638e35..87b22bc7 100644
--- a/endpoints/lollms_advanced.py
+++ b/endpoints/lollms_advanced.py
@@ -45,6 +45,8 @@ from utilities.execution_engines.html_execution_engine import execute_html
 
 from utilities.execution_engines.mermaid_execution_engine import execute_mermaid
 from utilities.execution_engines.graphviz_execution_engine import execute_graphviz
+from utilities.execution_engines.svg_execution_engine import execute_svg
+
 
 
 
@@ -91,6 +93,10 @@ async def execute_code(request: CodeRequest):
             ASCIIColors.info("Executing python code:")
             ASCIIColors.yellow(code)
             return execute_python(code, client, message_id)
+        if language=="svg":
+            ASCIIColors.info("Executing svg code:")
+            ASCIIColors.yellow(code)
+            return execute_svg(code, client, message_id)
         if language=="javascript":
             ASCIIColors.info("Executing javascript code:")
             ASCIIColors.yellow(code)
diff --git a/utilities/execution_engines/graphviz_execution_engine.py b/utilities/execution_engines/graphviz_execution_engine.py
index 8c22c86a..bf0ed3c6 100644
--- a/utilities/execution_engines/graphviz_execution_engine.py
+++ b/utilities/execution_engines/graphviz_execution_engine.py
@@ -30,7 +30,7 @@ def build_graphviz_output(code, ifram_name=None):
     """
     # Start the timer.
     start_time = time.time()
-    if ifram_name!=None:
+    if ifram_name is not None:
         rendered =  "\n".join([
             '<div style="width: 100%; margin: 0 auto;">',
             f'<iframe id="{ifram_name}" srcdoc=\'',
@@ -120,4 +120,4 @@ def execute_graphviz(code, client:Client, message_id, build_file=False):
         output_json = {"output": f'<b>Page built successfully</b><br><a href="{link}" target="_blank">Press here to view the page</a>', "execution_time": execution_time}
         return output_json
     else:
-        return build_graphviz_output(code)
+        return build_graphviz_output(code, ifram_name="iframe")
diff --git a/utilities/execution_engines/javascript_execution_engine.py b/utilities/execution_engines/javascript_execution_engine.py
index ac693a3c..2a490774 100644
--- a/utilities/execution_engines/javascript_execution_engine.py
+++ b/utilities/execution_engines/javascript_execution_engine.py
@@ -17,7 +17,7 @@ from lollms.utilities import discussion_path_2_url
 
 lollmsElfServer:LOLLMSWebUI = LOLLMSWebUI.get_instance()          
 
-def build_javascript_output(code, ifram_name="unnamed"):
+def build_javascript_output(code, ifram_name=None):
     """
     This function creates an HTML5 iframe with the given HTML content and iframe name.
 
@@ -29,24 +29,34 @@ def build_javascript_output(code, ifram_name="unnamed"):
     str: The HTML string for the iframe.
     """
     # Start the timer.
-    start_time = time.time()    
-    rendered =  "\n".join([
-        '<div style="width: 100%; margin: 0 auto;">',
-        f'<iframe id="{ifram_name}" srcdoc="',
-        '<style>',
-        'iframe {',
-        'width: 100%;',
-        'height: 100%;',
-        'border: none;',
-        '}',
-        '</style>',
-        '<script>',
-        code,
-        '</script>',
-        '" style="width: 100%; height: 600px; border: none;"></iframe>',
-        '</div>'
-        ]
-    )
+    start_time = time.time()
+    if ifram_name is not None:
+        rendered =  "\n".join([
+            '<div style="width: 100%; margin: 0 auto;">',
+            f'<iframe id="{ifram_name}" srcdoc="',
+            '<style>',
+            'iframe {',
+            'width: 100%;',
+            'height: 100%;',
+            'border: none;',
+            '}',
+            '</style>',
+            '<script>',
+            code,
+            '</script>',
+            '" style="width: 100%; height: 600px; border: none;"></iframe>',
+            '</div>'
+            ]
+        )
+    else:
+        rendered =  "\n".join([
+            '<div style="width: 100%; margin: 0 auto;">',
+            '<script>',
+            code,
+            '</script>',
+            '</div>'
+            ]
+        )
     execution_time = time.time() - start_time
     return {"output": rendered, "execution_time": execution_time}
 
diff --git a/utilities/execution_engines/mermaid_execution_engine.py b/utilities/execution_engines/mermaid_execution_engine.py
index 56369da1..39b81a13 100644
--- a/utilities/execution_engines/mermaid_execution_engine.py
+++ b/utilities/execution_engines/mermaid_execution_engine.py
@@ -17,7 +17,7 @@ from lollms.utilities import discussion_path_2_url
 
 lollmsElfServer:LOLLMSWebUI = LOLLMSWebUI.get_instance()          
 
-def build_mermaid_output(code, ifram_name="unnamed"):
+def build_mermaid_output(code, ifram_name=None):
     """
     This function creates an HTML5 iframe with the given HTML content and iframe name.
 
@@ -29,53 +29,94 @@ def build_mermaid_output(code, ifram_name="unnamed"):
     str: The HTML string for the iframe.
     """
     # Start the timer.
-    start_time = time.time()    
-    rendered =  "\n".join([
-        '<div style="width: 100%; margin: 0 auto;">',
-        f'<iframe id="{ifram_name}" style="width: 100%" srcdoc="',
-        '<style>',
-        'iframe {',
-        'width: 100%;',
-        'height: 100%;',
-        'border: none;',
-        '}',
-        '.mermaid {',
-        'background-color: transparent;',
-        'padding: 20px;',
-        'border-radius: 10px;',
-        'display: flex;',
-        'justify-content: center;',
-        'align-items: center;',
-        'height: 100%;',
-        '}',
-        '</style>',
-        '<div class=\'mermaid\'>',
-        "\n".join([c for c in code.split("\n") if c.strip()!=""]),
-        '</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>',
-        '" style="width: 100%; height: 600px; border: none;"></iframe>',
-        '</div>'
-        ]
-    )
+    start_time = time.time()
+    if ifram_name is not None:
+        rendered =  "\n".join([
+            '<div style="width: 100%; margin: 0 auto;">',
+            f'<iframe id="{ifram_name}" style="width: 100%" srcdoc="',
+            '<style>',
+            'iframe {',
+            'width: 100%;',
+            'height: 100%;',
+            'border: none;',
+            '}',
+            '.mermaid {',
+            'background-color: transparent;',
+            'padding: 20px;',
+            'border-radius: 10px;',
+            'display: flex;',
+            'justify-content: center;',
+            'align-items: center;',
+            'height: 100%;',
+            '}',
+            '</style>',
+            '<div class=\'mermaid\'>',
+            "\n".join([c for c in code.split("\n") if c.strip()!=""]),
+            '</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>',
+            '" style="width: 100%; height: 600px; border: none;"></iframe>',
+            '</div>'
+            ]
+        )
+    else:
+        rendered =  "\n".join([
+            '<div style="width: 100%; margin: 0 auto;">',
+            '<style>',
+            '.mermaid {',
+            'background-color: transparent;',
+            'padding: 20px;',
+            'border-radius: 10px;',
+            'display: flex;',
+            'justify-content: center;',
+            'align-items: center;',
+            'height: 100%;',
+            '}',
+            '</style>',
+            '<div class=\'mermaid\'>',
+            "\n".join([c for c in code.split("\n") if c.strip()!=""]),
+            '</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>'
+            ]
+        )
     execution_time = time.time() - start_time
     return {"output": rendered, "execution_time": execution_time}
 
@@ -104,4 +145,4 @@ def execute_mermaid(code, client:Client, message_id, build_file=False):
         output_json = {"output": f'<b>Page built successfully</b><br><a href="{link}" target="_blank">Press here to view the page</a>', "execution_time": execution_time}
         return output_json
     else:
-        return build_mermaid_output(code)
+        return build_mermaid_output(code, "app_iframe")
diff --git a/utilities/execution_engines/svg_execution_engine.py b/utilities/execution_engines/svg_execution_engine.py
index 401007f2..62983359 100644
--- a/utilities/execution_engines/svg_execution_engine.py
+++ b/utilities/execution_engines/svg_execution_engine.py
@@ -17,7 +17,7 @@ from lollms.utilities import discussion_path_2_url
 
 lollmsElfServer:LOLLMSWebUI = LOLLMSWebUI.get_instance()          
 
-def build_svg_output(code, ifram_name="unnamed"):
+def build_svg_output(code, ifram_name=None):
     """
     This function creates an HTML5 iframe with the given HTML content and iframe name.
 
@@ -29,53 +29,94 @@ def build_svg_output(code, ifram_name="unnamed"):
     str: The HTML string for the iframe.
     """
     # Start the timer.
-    start_time = time.time()    
-    rendered =  "\n".join([
-        '<div style="width: 100%; margin: 0 auto;">',
-        f'<iframe id="{ifram_name}" style="width: 100%" srcdoc="',
-        '<style>',
-        'iframe {',
-        'width: 100%;',
-        'height: 100%;',
-        'border: none;',
-        '}',
-        '.svg {',
-        'background-color: transparent;',
-        'padding: 20px;',
-        'border-radius: 10px;',
-        'display: flex;',
-        'justify-content: center;',
-        'align-items: center;',
-        'height: 100%;',
-        '}',
-        '</style>',
-        '<div class=\'svg\'>',
-        "\n".join([c for c in code.split("\n") if c.strip()!=""]),
-        '</div>',
-        '<script src=\'https://cdn.jsdelivr.net/npm/svg/dist/svg.min.js\'></script>',
-        '<script>',
-        '// Initialize the svg library and render our diagram',
-        'svg.initialize({ startOnLoad: true });',
-        '// Function to save SVG content to a file',
-        'function saveSVG() {',
-        'var svg = document.querySelector(".svg > 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>',
-        '" style="width: 100%; height: 600px; border: none;"></iframe>',
-        '</div>'
-        ]
-    )
+    start_time = time.time()
+    if ifram_name is not None:
+        rendered =  "\n".join([
+            '<div style="width: 100%; margin: 0 auto;">',
+            f'<iframe id="{ifram_name}" style="width: 100%" srcdoc="',
+            '<style>',
+            'iframe {',
+            'width: 100%;',
+            'height: 100%;',
+            'border: none;',
+            '}',
+            '.svg {',
+            'background-color: transparent;',
+            'padding: 20px;',
+            'border-radius: 10px;',
+            'display: flex;',
+            'justify-content: center;',
+            'align-items: center;',
+            'height: 100%;',
+            '}',
+            '</style>',
+            '<div class=\'svg\'>',
+            "\n".join([c for c in code.split("\n") if c.strip()!=""]),
+            '</div>',
+            '<script src=\'https://cdn.jsdelivr.net/npm/svg/dist/svg.min.js\'></script>',
+            '<script>',
+            '// Initialize the svg library and render our diagram',
+            'svg.initialize({ startOnLoad: true });',
+            '// Function to save SVG content to a file',
+            'function saveSVG() {',
+            'var svg = document.querySelector(".svg > 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>',
+            '" style="width: 100%; height: 600px; border: none;"></iframe>',
+            '</div>'
+            ]
+        )
+    else:
+        rendered =  "\n".join([
+            '<div style="width: 100%; margin: 0 auto;">',
+            '<style>',
+            '.svg {',
+            'background-color: transparent;',
+            'padding: 20px;',
+            'border-radius: 10px;',
+            'display: flex;',
+            'justify-content: center;',
+            'align-items: center;',
+            'height: 100%;',
+            '}',
+            '</style>',
+            '<div class=\'svg\'>',
+            "\n".join([c for c in code.split("\n") if c.strip()!=""]),
+            '</div>',
+            '<script src=\'https://cdn.jsdelivr.net/npm/svg/dist/svg.min.js\'></script>',
+            '<script>',
+            '// Initialize the svg library and render our diagram',
+            'svg.initialize({ startOnLoad: true });',
+            '// Function to save SVG content to a file',
+            'function saveSVG() {',
+            'var svg = document.querySelector(".svg > 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>'
+            ]
+        )
     execution_time = time.time() - start_time
     return {"output": rendered, "execution_time": execution_time}
 
@@ -95,13 +136,13 @@ def execute_svg(code, client:Client, message_id, build_file=False):
         # Create a temporary file.
         root_folder = client.discussion.discussion_folder
         root_folder.mkdir(parents=True,exist_ok=True)
-        tmp_file = root_folder/f"ai_code_{message_id}.html"
+        tmp_file = root_folder/f"ai_svg_{message_id}.svg"
         with open(tmp_file,"w",encoding="utf8") as f:
-            f.write(build_svg_output(code)["output"])
+            f.write(code)
         link = f"{host}:{lollmsElfServer.config.port}/{discussion_path_2_url(tmp_file)}"
         # Stop the timer.
         execution_time = time.time() - start_time
         output_json = {"output": f'<b>Page built successfully</b><br><a href="{link}" target="_blank">Press here to view the page</a>', "execution_time": execution_time}
         return output_json
     else:
-        return build_svg_output(code)
+        return build_svg_output(code, "app_iframe")