added coding

app.py

@@ -432,45 +432,52 @@ class LoLLMsWebUI(LoLLMsAPPI):
 
     def execute_python_code(self):
         """Executes Python code and returns the output."""
+        
         data = request.get_json()
         code = data["code"]
 
-        def execute_code_internal():
-            # Create a Python interpreter.
-            interpreter = io.StringIO()
-            sys.stdout = interpreter
-            globals_dict = {'__name__': '__main__', '__file__': 'ai_code.py'}
+        def spawn_process(code):
+            """Executes Python code and returns the output as JSON."""
+
+            # Start the timer.
+            start_time = time.time()
+
+            # Create a temporary file.
+            tmp_file = self.lollms_paths.personal_data_path/"ai_code.py"
+            with open(tmp_file,"w") as f:
+                f.write(code)
 
             try:
-                exec(code, globals_dict)
-                # Get the output.
-                output = interpreter.getvalue()
-            except Exception as ex:
-                # Get the traceback information
-                tb_str = traceback.format_exc().replace("<string>","ai_code.py")
-
-                substring = 'File "ai_code.py"'
-                try:
-                    position = tb_str.index(substring)
-                    tb_str = tb_str[position:]
-                except ValueError:
-                    pass
-                output = (
-                    f"<div class='text-red-500'>{ex}\n"
-                    f"Traceback:\n{tb_str}</div>"
+                # Execute the Python code in a temporary file.
+                process = subprocess.Popen(
+                    ["python", str(tmp_file)],
+                    stdout=subprocess.PIPE,
+                    stderr=subprocess.PIPE,
                 )
 
-            finally:
-                sys.stdout = sys.__stdout__  # Restore the standard output
+                # Get the output and error from the process.
+                output, error = process.communicate()
+            except Exception as ex:
+                # Stop the timer.
+                execution_time = time.time() - start_time
+                error_message = f"Error executing Python code: {ex}"
+                error_json = {"output": "<div class='text-red-500'>"+ex+"\n"+get_trace_exception(ex)+"</div>", "execution_time": execution_time}
+                return json.dumps(error_json)
 
-            return output
+            # Stop the timer.
+            execution_time = time.time() - start_time
 
-        # Execute the code and capture the output
-        start_time = time.time()
-        output = execute_code_internal()
-        end_time = time.time()
+            # Check if the process was successful.
+            if process.returncode != 0:
+                # The child process threw an exception.
+                error_message = f"Error executing Python code: {error.decode('utf8')}"
+                error_json = {"output": "<div class='text-red-500'>"+error_message+"</div>", "execution_time": execution_time}
+                return json.dumps(error_json)
 
-        return jsonify({"output": output, "execution_time": end_time - start_time})
+            # The child process was successful.
+            output_json = {"output": output, "execution_time": execution_time}
+            return json.dumps(output_json)
+        return spawn_process(code)
 
 
     def get_presets(self):

docs/youtube/playground_coding.md

@@ -0,0 +1,17 @@
+Hi there. Today I'm going to show you how to use the lollms playground to make, debug,  execute and document python code.
+Let's go.
+First, open the playground and look for the preset called  "Make full python code". 
+Press the validation button to put the preset content into the main input text area.
+Now you need to update the elements delimited by @< and >@. 
+We set the project title, the author and a description of the project.
+Here we will create a code that uses matplotlib to show a sine wave.
+Now press the generate text button to start generating the text.
+The AI generates a code that can be tested using the button execute. If there is a bug, just correct it and regenerate.
+Now you can execute the code.
+It works as expected.
+Finally, we can document the code we have just made. Just use the documentation text in the preset and run the generation.
+As you can see, the AI gave a good README.md file that I can use on my github page.
+Be aware that the quality of the output depends on the model you are using. Make sure you use a good model for coding. You can checkout the models leaderboard on hugging face.
+I hope you liked this.
+Don't forget to like and subscribe.
+See ya

docs/youtube/playground_translation.md

@@ -0,0 +1,28 @@
+Hi there. Today I'm going to show you how to use the lollms playground to translate your documents from a language A to a language B.
+Let's go.
+First, open the playground and look for the preset called Generic Translator.
+Press the validation button to put the preset content into the main input text area.
+Now you need to update the elements delimited by @< and >@. 
+
+We set the input language.
+
+Then we set the text to be translated.
+
+We set the output language.
+
+finally we remove the output placeholder text and place the cursor there.
+
+Now press the generate text button to start generating the text.
+
+Some models tend to add a summary after doing the translation. This is caused by the way they were trained. Make sure you remove any extra deductions or useless text.
+
+Here you have it! Your text is ready. You can press copy button to copy it to the clipboard.
+
+You can test multiple languages. Just remove the output, change the output language name and press generate text again.
+
+Please note that the translation quality depends on the model you use. Better results can be obtained if you use a model that was trained with the languages involved in the translation.
+
+I hope you liked this.
+Don't forget to like and subscribe.
+
+See ya

presets/presets.json

@@ -3,6 +3,7 @@
     "Simple Question Answer":"User:@<Put your question here>@\nAssistant:",
     "Question Answer with conditionning":"Assistant is a highly developed AI capable of answering any question about any subject.\nUser:@<Put your question here>\nAssistant:",
     "Instruct mode": "Instructions:\n@<Put your instructions here>@\nAnswer:",
+    "Make full python code": "```python\n# project: @<project name>@ \n# author: @<author of the project>@\n# description: @<The description of the code>@\n\n@<Place holder for text generation>@\n```\n---------\nExtra information:\nLicence: apache 2.0\nProgram type: Stand alone.\nDocumentation:\nMake README.md with the following table of contents:\n## Description\n## Installation\n## Usage\n## Licence\n## Contribute\n## Ethical guidelines\nInstructions:\nWrite a user side README.md\nStick to the provided code content and do not invent extra information.\nMake sure all sections of the table of contents are present in the file.\n----\nREADME.md:\n```markdown",
     "Make a python function": "Here is a python function that @<describe the function you want lollms to build>@:\n```python\ndef",
     "Make a c++ function": "Here is a c++ function that @<describe the function you want lollms to build>@:\n```c++\n/*",
     "Make a c# function": "Here is a c# function that @<describe the function you want lollms to build>@:\n```c#\n/*",
@@ -11,5 +12,9 @@
     "Make a visual basic.net function": "Here is a visual basic function that <describe the function you want lollms to build>@:\n```vb.net\n/*",
     "Make a vue.js ui": "Here is a vue.js template that @<describe the user interface you want to make with this>@:\n```vue.js\n<template>",
     "Make a HTML5 ui": "Here is a HTML5 ui that @<describe the user interface you want to make with this>@:\n```html",
-    "Explain code": "```@<the name of the programming language>\n@<put your code here>@\n```\nHere is an explanation of the previous method:"
+    "Explain code": "```@<the name of the programming language>\n@<put your code here>@\n```\nHere is an explanation of the previous method:",
+    "Translate yaml file": "Instruction: Translate the comments and values of the yaml file from english to French.\nSession 1:\n```yaml language=english\n# This is a comment\nparameter_1: this is parameter 1\nparameter_2: this is parameter 2\nparameter_3: 25\nparameter_4: |\n    This is a multi\n    line parameter\n```\n```yaml language=french\n# Ceci est un commentaire\nparameter_1: ceci est le param\u00e8tre 1\nparameter_2: ceci est le param\u00e8tre 2\nparameter_3: 25\nparameter_4: |\n    Ceci est une multiligne\n    ligne de param\u00e8tre\n```\nSession 2:\n```yaml language=english\n@<Put your yaml data here>@\n```\n```yaml language=french",
+    "Translate json file": "Instruction: Translate the values of the json file from english to French.\nSession 1:\n```json language=english\n{\n\"parameter_1\": \"this is parameter 1\",\n\"parameter_2\": \"this is parameter 2\",\n\"parameter_3\": 25,\n\"parameter_4\": \"This is a multi\\nline string\",\n}\n```\nAfter translation, we get:\n```json language=french\n{\n\"parameter_1\": \"ceci est le param\u00e8tre 1\",\n\"parameter_2\": \"ceci est le param\u00e8tre 2\",\n\"parameter_3\": 25,\n\"parameter_4\": \"Ceci est une cha\u00eene de caract\u00e8res multiligne\\n\",\n}\n```\nSession 2:\n```json language=english\n@<Put your json data here>@\n```\n```json language=french\n",
+    "Translate python strings": "Instruction: Translate the strings inside this python code.\nSession 1:\n```python language=english\na = input(\"a:\")\nprint(f\"you have input the value {a}\")\n```\nAfter translation, we get:\n```python language=fr\na = input(\"a:\")\nprint(f\"vous avez entr\u00e9 la valeur {a}\")\n```\nSession 2:\n```python language=@<source language example: english>@\n@<Put your python code here>@\n```\n```python language=@<source language example: french>@\n@<Remove this placeholder and place the cursor in here then press Generate Text>@\n```\n",
+    "Generic translator": "```@<put your source language name here. example english>@\n@<Put your english text here>@\n```\n```@<put your destination language name here. example french>@\n@<Remove this block and place the cursor here to make the AI generate the translation>@\n```\n"
 }

web/dist/index.html

@@ -6,7 +6,7 @@
     
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>LoLLMS WebUI - Welcome</title>
-    <script type="module" crossorigin src="/assets/index-43dbf6bb.js"></script>
+    <script type="module" crossorigin src="/assets/index-39a9feaf.js"></script>
     <link rel="stylesheet" href="/assets/index-90cbdba9.css">
   </head>
   <body>

web/src/views/PlayGroundView.vue

@@ -116,7 +116,7 @@ export default {
   },
   mounted() {
     const text_element = document.getElementById('text_element');
-    text_element.addEventListener('keypress', () => {
+    text_element.addEventListener('input', () => {
       this.cursorPosition = text_element.selectionStart;
     });    
     text_element.addEventListener('click', () => {