upgraded ui

app.py

@@ -123,6 +123,8 @@ if __name__ == "__main__":
     from lollms.server.endpoints.lollms_configuration_infos import router as lollms_configuration_infos_router
     from lollms.server.endpoints.lollms_skills_library import router as lollms_skills_library_router
 
+    
+
     from lollms.server.endpoints.lollms_user import router as lollms_user_router
     from lollms.server.endpoints.lollms_tts import router as lollms_xtts_add_router
     from lollms.server.endpoints.lollms_sd import router as lollms_sd_router    
@@ -133,13 +135,17 @@ if __name__ == "__main__":
     from lollms.server.endpoints.lollms_ollama import router as lollms_ollama_router    
     from lollms.server.endpoints.lollms_vllm import router as lollms_vllm_router    
     from lollms.server.endpoints.lollms_motion_ctrl import router as lollms_motion_ctrl_router
+    from lollms.server.endpoints.lollms_discussion import router as lollms_discussion_router
+    from lollms.server.endpoints.lollms_petals import router as lollms_petals_router    
+
 
     from endpoints.lollms_webui_infos import router as lollms_webui_infos_router
-    from lollms.server.endpoints.lollms_discussion import router as lollms_discussion_router
     from endpoints.lollms_message import router as lollms_message_router
     from endpoints.lollms_advanced import router as lollms_advanced_router
     from endpoints.chat_bar import router as chat_bar_router
-    from lollms.server.endpoints.lollms_petals import router as lollms_petals_router    
+    
+    from endpoints.lollms_help import router as help_router
+
     
     from endpoints.lollms_playground import router as lollms_playground_router    
     
@@ -178,6 +184,7 @@ if __name__ == "__main__":
         app.include_router(lollms_user_router)
         app.include_router(lollms_advanced_router)
         app.include_router(chat_bar_router)
+        app.include_router(help_router)
         app.include_router(lollms_xtts_add_router)
         
         app.include_router(lollms_sd_router)   

endpoints/lollms_help.py

@@ -0,0 +1,77 @@
+"""
+project: lollms_user
+file: lollms_user.py 
+author: ParisNeo
+description: 
+    This module contains a set of FastAPI routes that provide information about the Lord of Large Language and Multimodal Systems (LoLLMs) Web UI
+    application. These routes allow users to do advanced stuff like executing code.
+
+"""
+from fastapi import APIRouter, Request, HTTPException
+from fastapi.responses import FileResponse
+from lollms_webui import LOLLMSWebUI
+from pydantic import BaseModel, Field
+from starlette.responses import StreamingResponse
+from lollms.types import MSG_TYPE
+from lollms.main_config import BaseConfig
+from lollms.utilities import detect_antiprompt, remove_text_from_string, trace_exception, show_yes_no_dialog, add_period
+from lollms.security import sanitize_path, forbid_remote_access, check_access, sanitize_svg, sanitize_path_from_endpoint
+from ascii_colors import ASCIIColors
+from lollms.databases.discussions_database import DiscussionsDB
+from lollms.client_session import Client
+from pathlib import Path
+from safe_store.text_vectorizer import TextVectorizer, VectorizationMethod, VisualizationMethod
+import tqdm
+from fastapi import FastAPI, UploadFile, File
+import shutil
+import os
+import platform
+import string
+import re
+import subprocess   
+from typing import Optional
+
+def validate_file_path(path):
+    try:
+        sanitized_path = sanitize_path(path, allow_absolute_path=False)
+        return sanitized_path is not None
+    except Exception as e:
+        print(f"Path validation error: {str(e)}")
+        return False
+
+from utilities.execution_engines.python_execution_engine import execute_python
+from utilities.execution_engines.latex_execution_engine import execute_latex
+from utilities.execution_engines.shell_execution_engine import execute_bash
+from utilities.execution_engines.javascript_execution_engine import execute_javascript
+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
+
+
+
+
+# ----------------------- Defining router and main class ------------------------------
+
+router = APIRouter()
+lollmsElfServer:LOLLMSWebUI = LOLLMSWebUI.get_instance()
+
+@router.get("/help/{path:path}")
+async def serve_help(path: str):
+    """
+    Serve help file.
+
+    Args:
+        path (FilePath): The path of the help file to serve.
+
+    Returns:
+        FileResponse: The file response containing the requested personalities file.
+    """
+    path = sanitize_path_from_endpoint(path)    
+    file_path = lollmsElfServer.lollms_paths.lollms_core_path / "help" / "/".join(str(path).split("/")[1:])
+
+    if not Path(file_path).exists():
+        raise HTTPException(status_code=400, detail="File not found")
+
+    return FileResponse(str(file_path))

lollms_core

@@ -1 +1 @@
-Subproject commit 8888ded2d4165297c41d0d04bdad4f64312327a6
+Subproject commit 547717f1c1b9327969a27e0c2e9d6f7bc3b8f1f2

lollms_webui.py

@@ -72,7 +72,7 @@ def terminate_thread(thread):
         else:
             ASCIIColors.yellow("Canceled successfully")# The current version of the webui
 
-lollms_webui_version="9.9 (Beta)"
+lollms_webui_version="9.9 (🅱️)"
 
 
 

web/dist/index.html

@@ -6,8 +6,8 @@
     
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>LoLLMS WebUI - Welcome</title>
-    <script type="module" crossorigin src="/assets/index-47e3b80e.js"></script>
-    <link rel="stylesheet" href="/assets/index-592e836e.css">
+    <script type="module" crossorigin src="/assets/index-fcacc2dd.js"></script>
+    <link rel="stylesheet" href="/assets/index-f9292296.css">
   </head>
   <body>
     <div id="app"></div>

web/src/components/Navigation.vue

@@ -80,11 +80,11 @@
               Settings
             </RouterLink>
             <RouterLink 
-              :to="{ name: 'help' }" 
+              :to="{ name: 'help_view' }" 
               class="inline-block border-l border-t border-r rounded-t py-2 px-4 text-blue-700 font-semibold"
               :class="{ 
-                'text-green-600 hover:text-green-500 dark:text-green-100 font-bold bg-bg-secondary shadow-no-bottom': isRouteActive('help'),
-                'bounce-in': isRouteActive('help'),
+                'text-green-600 hover:text-green-500 dark:text-green-100 font-bold bg-bg-secondary shadow-no-bottom': isRouteActive('help_view'),
+                'bounce-in': isRouteActive('help_view'),
               }"
               >
               Help

web/src/router/index.js

@@ -35,8 +35,8 @@ const router = createRouter({
       component: ExtensionsView
     },
     {
-      path: '/help/',
-      name: 'help',
+      path: '/help_view/',
+      name: 'help_view',
       component: HelpView
     },
     {

web/src/views/HelpView.vue

@@ -1,131 +1,10 @@
 <template>
-
-    <div class="container flex-row mx-auto p-4 bg-bg-light-tone dark:bg-bg-dark-tone  shadow-lg overflow-y-auto no-scrollbar p-2 pb-0 grid lg:grid-cols-1 md:grid-cols-2 gap-4">
-      <Card  :disableHoverAnimation="true" :disableFocus="true">
-        <h2 class="text-2xl font-bold mb-2">About Lord of large Language Models</h2>
-        <p class="mb-4"> Lollms version {{ version }}</p>
-        <p>Discord link: <a class="text-blue-500 hover:text-blue-400 duration-150" href="https://discord.gg/YgnaFMAQ">https://discord.gg/YgnaFMAQ</a></p>
-      </Card>
-      
-      <Card  :disableHoverAnimation="true" :disableFocus="true">
-        <h2 class="text-2xl font-bold mb-2">Frequently Asked Questions</h2>
-        <ul class="list-disc pl-4">
-          <li v-for="(faq, index) in faqs" :key="index">
-            <h3 class="text-xl font-bold mb-1">{{ faq.question }}</h3>
-            <p class="mb-4" v-html="parseMultiline(faq.answer)"></p>
-          </li>
-        </ul>
-      </Card>
-      <Card  :disableHoverAnimation="true" :disableFocus="true">
-        <h2 class="text-2xl font-bold mb-2">Contact Us</h2>
-        <p class="mb-4">If you have any further questions or need assistance, feel free to reach out to me.</p>
-        <p>Discord link: <a class="text-blue-500 hover:text-blue-400 duration-150" href="https://discord.gg/YgnaFMAQ">https://discord.gg/YgnaFMAQ</a></p>
-      </Card>
-      <Card   :disableHoverAnimation="true" :disableFocus="true">
-        <h2 class="text-2xl font-bold mb-2">Credits</h2>
-        <p class="mb-4">This project is developed by <span class="font-bold">ParisNeo</span> With help from the community.</p>
-        <p class="mb-4"><span class="font-bold"><a href="https://github.com/ParisNeo/lollms-webui/graphs/contributors">Check out the full list of developers here and show them some love.</a></span></p>
-        <p>Check out the project on <a class="text-blue-500 hover:text-blue-400 duration-150" :href="githubLink" target="_blank" rel="noopener noreferrer">GitHub</a>.</p>
-      </Card>
-    </div>
+  <div style="width: 100vw; height: 100vh">
+    <iframe src="/help/index.html" class="m-0 p-0 w-full h-full"></iframe>
+  </div>
 </template>
-  
-  <script>
-  import axios from 'axios';
-  import Papa from 'papaparse'; // Import the Papa Parse library for CSV parsing
-  import Card from "@/components/Card.vue"
-  import { store } from '../main';  
 
-  export default {
-    components:{
-      Card
-    }
-    ,
-    name: 'HelpPage',
-    data() {
-      return {
-        lollmsVersion: "unknown",
-        faqs: [], // Array to store the loaded FAQs
-        githubLink: 'https://github.com/ParisNeo/lollms-webui', // Replace with your project's GitHub link
-      };
-    },
-    mounted() {
-      this.loadFAQs(); // Call the method to load FAQs when the component is mounted
-    },
-    computed: {
-      // This will be triggered whenever lollmsVersion is updated
-      // but it will not be directly used in the template.
-      version: {
-        get(){
-          return this.$store.version
-        }        
-      },
-    },
-    async created() {
-      // Fetch the data when the component is created
-    },
-    methods: {
-      async api_get_req(endpoint) {
-            try {
-                const res = await axios.get("/" + endpoint);
-
-                if (res) {
-
-                    return res.data
-
-                }
-            } catch (error) {
-                console.log(error.message, 'api_get_req')
-                return
-            }
-      },
-      loadFAQs() {
-        // Fetch and parse the CSV file
-        fetch('/help/faqs.csv')
-          .then((response) => response.text())
-          .then((csv) => {
-            const { data } = Papa.parse(csv, { header: true }); // Parse the CSV and extract data
-            console.log("Recovered data")
-            console.log(data)
-            this.faqs = data; // Assign the parsed data to the faqs array
-          })
-          .catch((error) => {
-            console.error('Error loading FAQs:', error);
-          });
-      },
-      parseMultiline(text) {
-        // Replace newline characters with HTML line breaks
-        return text.replace(/\n/g, '<br>');
-      },
-    },
-  };
-  </script>
-  
-  <style scoped>
-  .scrollbar {
-    /* Add your scrollbar container styles here */
-    scrollbar-width: thin;
-    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
-    white-space: pre-wrap; /* Preserve line breaks */
-    overflow-wrap: break-word; /* Break words if necessary */
-  }
-  
-  .scrollbar::-webkit-scrollbar {
-    width: 8px;
-  }
-  
-  .scrollbar::-webkit-scrollbar-track {
-    background-color: var(--scrollbar-track-color);
-  }
-  
-  .scrollbar::-webkit-scrollbar-thumb {
-    background-color: var(--scrollbar-thumb-color);
-    border-radius: 4px;
-  }
-  
-  .scrollbar::-webkit-scrollbar-thumb:hover {
-    background-color: var(--scrollbar-thumb-hover-color);
-  }
-  
-  </style>
+<script>
+//import "../css/classic.css";
+</script>
   

web/src/views/SettingsView.vue

@@ -16,10 +16,6 @@
             </div>
             <!-- SAVE AND RESET -->
             <div v-if="!showConfirmation" class="flex gap-3 flex-1 items-center ">
-                <button title="Save configuration" class="text-2xl hover:text-secondary duration-75 active:scale-90"
-                    @click="showConfirmation = true">
-                    <i data-feather="save"></i>
-                </button>
                 <button title="Reset configuration" class="text-2xl hover:text-secondary duration-75 active:scale-90"
                     @click="reset_configuration()">
                     <i data-feather="refresh-ccw"></i>
@@ -45,23 +41,29 @@
                     >
                     <i data-feather="refresh-ccw"></i>
                     </button>
-                    <button
+                    <button v-if="has_updates"
                     title="Upgrade program "
                     class="text-2xl hover:text-secondary duration-75 active:scale-90"
                     @click="api_post_req('update_software').then((res)=>{if(res.status){this.$store.state.toast.showToast('Success!', 4, true)}else{this.$store.state.toast.showToast('Success!', 4, true)}})"
                     >
                     <i data-feather="arrow-up-circle"></i>
-                    
-                    <div  v-if="has_updates" >
-                        <i data-feather="alert-circle"></i>
-                    </div>
-                    </button>
+                    <i data-feather="alert-circle"></i>
+=                   </button>
                 <div class="flex gap-3 items-center">
                     <div v-if="settingsChanged" class="flex gap-3 items-center">
-                        <p class="text-red-600 font-bold">Apply changes:</p>
                         <button v-if="!isLoading" class="text-2xl hover:text-secondary duration-75 active:scale-90"
                             title="Apply changes" type="button" @click.stop="applyConfiguration()">
-                            <i data-feather="check"></i>
+                            <div class="flex flex-row">
+                                <p class="text-green-600 font-bold hover:text-green-300 ml-4 pl-4 mr-4 pr-4">Apply changes:</p>
+                                <i data-feather="check"></i>
+                            </div>
+                        </button>
+                        <button v-if="!isLoading" class="text-2xl hover:text-secondary duration-75 active:scale-90"
+                            title="Cancel changes" type="button" @click.stop="cancelConfiguration()">
+                            <div class="flex flex-row">
+                                <p class="text-red-600 font-bold hover:text-red-300 ml-4 pl-4 mr-4 pr-4">Cancel changes:</p>
+                                <i data-feather="x"></i>
+                            </div>
                         </button>
                     </div>
 
@@ -5521,6 +5523,10 @@ export default {
 
             return res
         },
+        async cancelConfiguration() {
+            await this.$store.dispatch('refreshConfig');
+            this.settingsChanged=false
+        },
         applyConfiguration() {
             this.isLoading = true;
             axios.post('/apply_settings', {"client_id":this.$store.state.client_id, "config":this.configFile}, {headers: this.posts_headers}).then((res) => {

zoos/bindings_zoo

@@ -1 +1 @@
-Subproject commit b4ef274f5f3f6dbe44c1d4d2f76749e2a1892c9c
+Subproject commit 6bd793fae9fc869b45a0f0e14b1bffe9697540e5

zoos/personalities_zoo

@@ -1 +1 @@
-Subproject commit d1c1c2514b05f66296cbad0b55f300fb7050a5e0
+Subproject commit 0593b82754c965b3754a2ec2253264ee64f9685b