upgraded smart router

CHANGELOG.md

@@ -1,3 +1,6 @@
+# V 15:
+Enhanced theming system
+New Smart routing system
 # V 7.0:
 Added changelog
 Separated images from text in file upload

configs/config.yaml

@@ -1,5 +1,5 @@
 # =================== Lord Of Large Language Multimodal Systems Configuration file =========================== 
-version: 139
+version: 140
 binding_name: null
 model_name: null
 model_variant: null
@@ -248,7 +248,7 @@ activate_mistralai_emulator: true
 
 use_smart_routing: false
 smart_routing_router_model : ""
-smart_routing_models_by_power : []
+smart_routing_models_description : {}
 restore_model_after_smart_routing : false
 
 

endpoints/lollms_webui_infos.py

@@ -32,7 +32,16 @@ router = APIRouter()
 async def get_lollms_version():
    """Get the version of the LoLLMs Web UI application."""
    # Return the version string
-   return {"id":4}
+   return {"id":9}
+
+@router.get("/get_changeLog")
+async def get_lollms_version():
+   """Get the changelog."""
+   # Return the version string
+   with open("CHANGELOG.md","r",encoding="utf8") as f:
+       infos = f.read()
+   return infos
+
 
 @router.get("/get_lollms_webui_version")
 async def get_lollms_webui_version():

lollms_webui.py

@@ -68,7 +68,7 @@ def terminate_thread(thread):
         else:
             ASCIIColors.yellow("Canceled successfully")# The current version of the webui
 
-lollms_webui_version="v14.5 (code name Saïph 🌟)"
+lollms_webui_version="v15 alpha (code name Orion ⭐️)"
 
 
 
@@ -1135,27 +1135,27 @@ class LOLLMSWebUI(LOLLMSElfServer):
                         ] if r!="" and r!="\n"])
 
         if self.config.use_smart_routing:
-            if self.config.smart_routing_router_model!="" and len(self.config.smart_routing_models_by_power)>=2:
+            if self.config.smart_routing_router_model!="" and len(self.config.smart_routing_models_description)>=2:
                 ASCIIColors.yellow("Using smart routing")
                 self.personality.step_start("Routing request")
                 self.back_model = f"{self.binding.binding_folder_name}::{self.model.model_name}"
                 try:
                     binding, model_name = self.model_path_to_binding_model(self.config.smart_routing_router_model)
                     self.select_model(binding, model_name)
-                    output_id = self.personality.multichoice_question("assess the complexity of the following prompt (higher means more complex, lower less complex), if the user asking simple questions or just saying hello, please select the lowest model.", [str(i) for i in range(len(self.config.smart_routing_models_by_power))], full_prompt)
+                    output_id = self.personality.multichoice_question("Given the following list of models:\n", [f"{k}: {v}" for k,v in self.config.smart_routing_models_description.items()], full_prompt)
-                    if output_id >=0 and output_id<len(self.config.smart_routing_models_by_power):
+                    if output_id >=0 and output_id<len(self.config.smart_routing_models_description):
-                        binding, model_name = self.model_path_to_binding_model(self.config.smart_routing_models_by_power[output_id])
+                        binding, model_name = self.model_path_to_binding_model(self.config.smart_routing_models_description[output_id])
                         self.select_model(binding, model_name)
                         self.personality.step_end("Routing request")
                         self.personality.step(f"Complexity level: {output_id}")
-                        self.personality.step(f"Selected {self.config.smart_routing_models_by_power[output_id]}")
+                        self.personality.step(f"Selected {self.config.smart_routing_models_description[output_id]}")
                 except Exception as ex:
                     self.error("Failed to route beceause of this error : " + str(ex))
                     self.personality.step_end("Routing request", False)
             else:
                 ASCIIColors.yellow("Warning! Smart routing is active but one of the following requirements are not met")
                 ASCIIColors.yellow("- smart_routing_router_model must be set correctly")
-                ASCIIColors.yellow("- smart_routing_models_by_power must contain at least one model")
+                ASCIIColors.yellow("- smart_routing_models_description must contain at least one model")
 
 
         if self.personality.processor is not None:
@@ -1187,7 +1187,7 @@ class LOLLMSWebUI(LOLLMSElfServer):
         ASCIIColors.success("\nFinished executing the generation")
 
         if self.config.use_smart_routing and self.config.restore_model_after_smart_routing:
-            if self.config.smart_routing_router_model!="" and len(self.config.smart_routing_models_by_power)>=2:
+            if self.config.smart_routing_router_model!="" and len(self.config.smart_routing_models_description)>=2:
                 ASCIIColors.yellow("Restoring model")
                 self.personality.step_start("Restoring main model")
                 binding, model_name = self.model_path_to_binding_model(self.back_model)

web/dist/index.html

@@ -6,8 +6,8 @@
     <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">
     <title>LoLLMS WebUI</title>
-    <script type="module" crossorigin src="/assets/index-CYweNESX.js"></script>
+    <script type="module" crossorigin src="/assets/index-DHIWbANq.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-FfsjzTPY.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-fb__xvyj.css">
   </head>
   <body>
     <div id="app"></div>

web/dist/themes/amber.css

@@ -1363,6 +1363,9 @@ html{
 .h-\[200px\]{
   height: 200px;
 }
+.h-\[400px\]{
+  height: 400px;
+}
 .h-auto{
   height: auto;
 }
@@ -1525,6 +1528,9 @@ html{
 .w-\[300px\]{
   width: 300px;
 }
+.w-\[500px\]{
+  width: 500px;
+}
 .w-auto{
   width: auto;
 }
@@ -3557,6 +3563,13 @@ html{
     -ms-overflow-style: none;
     scrollbar-width: none;
   }
+:root {
+  --lollms-title: "LoLLMS";
+  --falling-object: "";
+  --activate-dropping-animation: 0;
+  --lollms-welcome-short-message: "Welcome to LoLLMs";
+  --lollms-welcome-message:  "Dive into the sweet world of LoLLMs - where AI meets delicious innovation! 🍓🤖 We're here to make your digital experience as juicy and satisfying as a perfectly ripe strawberry. From natural language processing to multimodal tasks, LoLLMs is your one-stop AI assistant. Let's cultivate brilliant ideas together!";
+}
 .display-none{
   display: none;
 }

web/dist/themes/borg.css

@@ -1358,6 +1358,9 @@ body {
 .h-\[200px\]{
   height: 200px;
 }
+.h-\[400px\]{
+  height: 400px;
+}
 .h-auto{
   height: auto;
 }
@@ -1520,6 +1523,9 @@ body {
 .w-\[300px\]{
   width: 300px;
 }
+.w-\[500px\]{
+  width: 500px;
+}
 .w-auto{
   width: auto;
 }
@@ -3552,6 +3558,13 @@ body {
     -ms-overflow-style: none;
     scrollbar-width: none;
   }
+:root {
+  --lollms-title: "The Borg Collective Lord";
+  --falling-object: "B";
+  --activate-dropping-animation: 1;
+  --lollms-welcome-short-message: "Welcome to the Borg collective";
+  --lollms-welcome-message: "Resistance is futile";
+}
 .display-none{
   display: none;
 }
@@ -3673,7 +3686,6 @@ textarea, input, select{
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .panels-color{
-  border-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgb(5 122 85 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;

web/dist/themes/default.css

@@ -1358,6 +1358,9 @@ body {
 .h-\[200px\]{
   height: 200px;
 }
+.h-\[400px\]{
+  height: 400px;
+}
 .h-auto{
   height: auto;
 }
@@ -1520,6 +1523,9 @@ body {
 .w-\[300px\]{
   width: 300px;
 }
+.w-\[500px\]{
+  width: 500px;
+}
 .w-auto{
   width: auto;
 }
@@ -3552,6 +3558,13 @@ body {
     -ms-overflow-style: none;
     scrollbar-width: none;
   }
+:root {
+  --lollms-title: "LoLLMS";
+  --falling-object: "";
+  --activate-dropping-animation: 0;
+  --lollms-welcome-short-message: "Welcome to LoLLMS";
+  --lollms-welcome-message: "Embark on a journey through the realm of advanced AI with LoLLMS, your ultimate companion for intelligent conversations and multimodal interactions. Unleash the power of large language models and explore new frontiers in artificial intelligence.";
+}
 .display-none{
   display: none;
 }

web/dist/themes/lollms_blue.css

@@ -1363,6 +1363,9 @@ html{
 .h-\[200px\]{
   height: 200px;
 }
+.h-\[400px\]{
+  height: 400px;
+}
 .h-auto{
   height: auto;
 }
@@ -1525,6 +1528,9 @@ html{
 .w-\[300px\]{
   width: 300px;
 }
+.w-\[500px\]{
+  width: 500px;
+}
 .w-auto{
   width: auto;
 }

web/dist/themes/matrix_reborn.css

@@ -1672,6 +1672,10 @@ body {
   height: 200px;
 }
 
+.h-\[400px\]{
+  height: 400px;
+}
+
 .h-auto{
   height: auto;
 }
@@ -1888,6 +1892,10 @@ body {
   width: 300px;
 }
 
+.w-\[500px\]{
+  width: 500px;
+}
+
 .w-auto{
   width: auto;
 }
@@ -4482,6 +4490,14 @@ body {
     scrollbar-width: none;
   }
 
+:root {
+  --lollms-title: "LoLLMS";
+  --falling-object: "";
+  --activate-dropping-animation: 0;
+  --lollms-welcome-short-message: "Welcome to LoLLMS";
+  --lollms-welcome-message: "Embark on a journey through the realm of advanced AI with LoLLMS, your ultimate companion for intelligent conversations and multimodal interactions. Unleash the power of large language models and explore new frontiers in artificial intelligence.";
+}
+
 .display-none{
   display: none;
 }

web/dist/themes/red_dragon.css

@@ -1672,6 +1672,10 @@ body {
   height: 200px;
 }
 
+.h-\[400px\]{
+  height: 400px;
+}
+
 .h-auto{
   height: auto;
 }
@@ -1888,6 +1892,10 @@ body {
   width: 300px;
 }
 
+.w-\[500px\]{
+  width: 500px;
+}
+
 .w-auto{
   width: auto;
 }
@@ -4482,6 +4490,14 @@ body {
     scrollbar-width: none;
   }
 
+:root {
+  --lollms-title: "LoLLMS";
+  --falling-object: "";
+  --activate-dropping-animation: 0;
+  --lollms-welcome-short-message: "Welcome to LoLLMS";
+  --lollms-welcome-message: "Embark on a journey through the realm of advanced AI with LoLLMS, your ultimate companion for intelligent conversations and multimodal interactions. Unleash the power of large language models and explore new frontiers in artificial intelligence.";
+}
+
 .display-none{
   display: none;
 }

web/dist/themes/sober_gray.css

@@ -1358,6 +1358,9 @@ body {
 .h-\[200px\]{
   height: 200px;
 }
+.h-\[400px\]{
+  height: 400px;
+}
 .h-auto{
   height: auto;
 }
@@ -1520,6 +1523,9 @@ body {
 .w-\[300px\]{
   width: 300px;
 }
+.w-\[500px\]{
+  width: 500px;
+}
 .w-auto{
   width: auto;
 }
@@ -3552,6 +3558,13 @@ body {
     -ms-overflow-style: none;
     scrollbar-width: none;
   }
+:root {
+  --lollms-title: "LoLLMS";
+  --falling-object: "";
+  --activate-dropping-animation: 0;
+  --lollms-welcome-short-message: "Welcome to LoLLMS";
+  --lollms-welcome-message: "Embark on a journey through the realm of advanced AI with LoLLMS, your ultimate companion for intelligent conversations and multimodal interactions. Unleash the power of large language models and explore new frontiers in artificial intelligence.";
+}
 .display-none{
   display: none;
 }

web/dist/themes/strawberry.css

@@ -1363,6 +1363,9 @@ html{
 .h-\[200px\]{
   height: 200px;
 }
+.h-\[400px\]{
+  height: 400px;
+}
 .h-auto{
   height: auto;
 }
@@ -1525,6 +1528,9 @@ html{
 .w-\[300px\]{
   width: 300px;
 }
+.w-\[500px\]{
+  width: 500px;
+}
 .w-auto{
   width: auto;
 }
@@ -3557,6 +3563,13 @@ html{
     -ms-overflow-style: none;
     scrollbar-width: none;
   }
+:root {
+  --lollms-title: "L🍓LLMS";
+  --falling-object: "🍓";
+  --activate-dropping-animation: 1;
+  --lollms-welcome-short-message: "Welcome to LoLLMs";
+  --lollms-welcome-message:  "Dive into the sweet world of LoLLMs - where AI meets delicious innovation! 🍓🤖 We're here to make your digital experience as juicy and satisfying as a perfectly ripe strawberry. From natural language processing to multimodal tasks, LoLLMs is your one-stop AI assistant. Let's cultivate brilliant ideas together!";
+}
 .display-none{
   display: none;
 }

web/dist/themes/strawberry_milkshake.css

@@ -1672,6 +1672,10 @@ body {
   height: 200px;
 }
 
+.h-\[400px\]{
+  height: 400px;
+}
+
 .h-auto{
   height: auto;
 }
@@ -1888,6 +1892,10 @@ body {
   width: 300px;
 }
 
+.w-\[500px\]{
+  width: 500px;
+}
+
 .w-auto{
   width: auto;
 }
@@ -4482,6 +4490,14 @@ body {
     scrollbar-width: none;
   }
 
+:root {
+  --lollms-title: "LoLLMS";
+  --falling-object: "";
+  --activate-dropping-animation: 0;
+  --lollms-welcome-short-message: "Welcome to LoLLMS";
+  --lollms-welcome-message: "Embark on a journey through the realm of advanced AI with LoLLMS, your ultimate companion for intelligent conversations and multimodal interactions. Unleash the power of large language models and explore new frontiers in artificial intelligence.";
+}
+
 .display-none{
   display: none;
 }

web/public/themes/amber.css

@@ -1363,6 +1363,9 @@ html{
 .h-\[200px\]{
   height: 200px;
 }
+.h-\[400px\]{
+  height: 400px;
+}
 .h-auto{
   height: auto;
 }
@@ -1525,6 +1528,9 @@ html{
 .w-\[300px\]{
   width: 300px;
 }
+.w-\[500px\]{
+  width: 500px;
+}
 .w-auto{
   width: auto;
 }
@@ -3557,6 +3563,13 @@ html{
     -ms-overflow-style: none;
     scrollbar-width: none;
   }
+:root {
+  --lollms-title: "LoLLMS";
+  --falling-object: "";
+  --activate-dropping-animation: 0;
+  --lollms-welcome-short-message: "Welcome to LoLLMs";
+  --lollms-welcome-message:  "Dive into the sweet world of LoLLMs - where AI meets delicious innovation! 🍓🤖 We're here to make your digital experience as juicy and satisfying as a perfectly ripe strawberry. From natural language processing to multimodal tasks, LoLLMs is your one-stop AI assistant. Let's cultivate brilliant ideas together!";
+}
 .display-none{
   display: none;
 }

web/public/themes/borg.css

@@ -1358,6 +1358,9 @@ body {
 .h-\[200px\]{
   height: 200px;
 }
+.h-\[400px\]{
+  height: 400px;
+}
 .h-auto{
   height: auto;
 }
@@ -1520,6 +1523,9 @@ body {
 .w-\[300px\]{
   width: 300px;
 }
+.w-\[500px\]{
+  width: 500px;
+}
 .w-auto{
   width: auto;
 }
@@ -3552,6 +3558,13 @@ body {
     -ms-overflow-style: none;
     scrollbar-width: none;
   }
+:root {
+  --lollms-title: "The Borg Collective Lord";
+  --falling-object: "B";
+  --activate-dropping-animation: 1;
+  --lollms-welcome-short-message: "Welcome to the Borg collective";
+  --lollms-welcome-message: "Resistance is futile";
+}
 .display-none{
   display: none;
 }
@@ -3673,7 +3686,6 @@ textarea, input, select{
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .panels-color{
-  border-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgb(5 122 85 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;

web/public/themes/default.css

@@ -1358,6 +1358,9 @@ body {
 .h-\[200px\]{
   height: 200px;
 }
+.h-\[400px\]{
+  height: 400px;
+}
 .h-auto{
   height: auto;
 }
@@ -1520,6 +1523,9 @@ body {
 .w-\[300px\]{
   width: 300px;
 }
+.w-\[500px\]{
+  width: 500px;
+}
 .w-auto{
   width: auto;
 }
@@ -3552,6 +3558,13 @@ body {
     -ms-overflow-style: none;
     scrollbar-width: none;
   }
+:root {
+  --lollms-title: "LoLLMS";
+  --falling-object: "";
+  --activate-dropping-animation: 0;
+  --lollms-welcome-short-message: "Welcome to LoLLMS";
+  --lollms-welcome-message: "Embark on a journey through the realm of advanced AI with LoLLMS, your ultimate companion for intelligent conversations and multimodal interactions. Unleash the power of large language models and explore new frontiers in artificial intelligence.";
+}
 .display-none{
   display: none;
 }

web/public/themes/lollms_blue.css

@@ -1363,6 +1363,9 @@ html{
 .h-\[200px\]{
   height: 200px;
 }
+.h-\[400px\]{
+  height: 400px;
+}
 .h-auto{
   height: auto;
 }
@@ -1525,6 +1528,9 @@ html{
 .w-\[300px\]{
   width: 300px;
 }
+.w-\[500px\]{
+  width: 500px;
+}
 .w-auto{
   width: auto;
 }

web/public/themes/matrix_reborn.css

@@ -1672,6 +1672,10 @@ body {
   height: 200px;
 }
 
+.h-\[400px\]{
+  height: 400px;
+}
+
 .h-auto{
   height: auto;
 }
@@ -1888,6 +1892,10 @@ body {
   width: 300px;
 }
 
+.w-\[500px\]{
+  width: 500px;
+}
+
 .w-auto{
   width: auto;
 }
@@ -4482,6 +4490,14 @@ body {
     scrollbar-width: none;
   }
 
+:root {
+  --lollms-title: "LoLLMS";
+  --falling-object: "";
+  --activate-dropping-animation: 0;
+  --lollms-welcome-short-message: "Welcome to LoLLMS";
+  --lollms-welcome-message: "Embark on a journey through the realm of advanced AI with LoLLMS, your ultimate companion for intelligent conversations and multimodal interactions. Unleash the power of large language models and explore new frontiers in artificial intelligence.";
+}
+
 .display-none{
   display: none;
 }

web/public/themes/red_dragon.css

@@ -1672,6 +1672,10 @@ body {
   height: 200px;
 }
 
+.h-\[400px\]{
+  height: 400px;
+}
+
 .h-auto{
   height: auto;
 }
@@ -1888,6 +1892,10 @@ body {
   width: 300px;
 }
 
+.w-\[500px\]{
+  width: 500px;
+}
+
 .w-auto{
   width: auto;
 }
@@ -4482,6 +4490,14 @@ body {
     scrollbar-width: none;
   }
 
+:root {
+  --lollms-title: "LoLLMS";
+  --falling-object: "";
+  --activate-dropping-animation: 0;
+  --lollms-welcome-short-message: "Welcome to LoLLMS";
+  --lollms-welcome-message: "Embark on a journey through the realm of advanced AI with LoLLMS, your ultimate companion for intelligent conversations and multimodal interactions. Unleash the power of large language models and explore new frontiers in artificial intelligence.";
+}
+
 .display-none{
   display: none;
 }

web/public/themes/sober_gray.css

@@ -1358,6 +1358,9 @@ body {
 .h-\[200px\]{
   height: 200px;
 }
+.h-\[400px\]{
+  height: 400px;
+}
 .h-auto{
   height: auto;
 }
@@ -1520,6 +1523,9 @@ body {
 .w-\[300px\]{
   width: 300px;
 }
+.w-\[500px\]{
+  width: 500px;
+}
 .w-auto{
   width: auto;
 }
@@ -3552,6 +3558,13 @@ body {
     -ms-overflow-style: none;
     scrollbar-width: none;
   }
+:root {
+  --lollms-title: "LoLLMS";
+  --falling-object: "";
+  --activate-dropping-animation: 0;
+  --lollms-welcome-short-message: "Welcome to LoLLMS";
+  --lollms-welcome-message: "Embark on a journey through the realm of advanced AI with LoLLMS, your ultimate companion for intelligent conversations and multimodal interactions. Unleash the power of large language models and explore new frontiers in artificial intelligence.";
+}
 .display-none{
   display: none;
 }

web/public/themes/strawberry.css

@@ -1363,6 +1363,9 @@ html{
 .h-\[200px\]{
   height: 200px;
 }
+.h-\[400px\]{
+  height: 400px;
+}
 .h-auto{
   height: auto;
 }
@@ -1525,6 +1528,9 @@ html{
 .w-\[300px\]{
   width: 300px;
 }
+.w-\[500px\]{
+  width: 500px;
+}
 .w-auto{
   width: auto;
 }
@@ -3557,6 +3563,13 @@ html{
     -ms-overflow-style: none;
     scrollbar-width: none;
   }
+:root {
+  --lollms-title: "L🍓LLMS";
+  --falling-object: "🍓";
+  --activate-dropping-animation: 1;
+  --lollms-welcome-short-message: "Welcome to LoLLMs";
+  --lollms-welcome-message:  "Dive into the sweet world of LoLLMs - where AI meets delicious innovation! 🍓🤖 We're here to make your digital experience as juicy and satisfying as a perfectly ripe strawberry. From natural language processing to multimodal tasks, LoLLMs is your one-stop AI assistant. Let's cultivate brilliant ideas together!";
+}
 .display-none{
   display: none;
 }

web/public/themes/strawberry_milkshake.css

@@ -1672,6 +1672,10 @@ body {
   height: 200px;
 }
 
+.h-\[400px\]{
+  height: 400px;
+}
+
 .h-auto{
   height: auto;
 }
@@ -1888,6 +1892,10 @@ body {
   width: 300px;
 }
 
+.w-\[500px\]{
+  width: 500px;
+}
+
 .w-auto{
   width: auto;
 }
@@ -4482,6 +4490,14 @@ body {
     scrollbar-width: none;
   }
 
+:root {
+  --lollms-title: "LoLLMS";
+  --falling-object: "";
+  --activate-dropping-animation: 0;
+  --lollms-welcome-short-message: "Welcome to LoLLMS";
+  --lollms-welcome-message: "Embark on a journey through the realm of advanced AI with LoLLMS, your ultimate companion for intelligent conversations and multimodal interactions. Unleash the power of large language models and explore new frontiers in artificial intelligence.";
+}
+
 .display-none{
   display: none;
 }

web/src/components/DictManager.vue

@@ -4,14 +4,14 @@
         <input
           type="text"
           v-model="newKey"
-          placeholder="Enter key"
+          :placeholder="keyName"
           @keyup.enter="addItem"
           class="flex-grow px-4 py-2 border border-gray-300 rounded dark:bg-gray-700 dark:text-white text-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
         >
         <input
           type="text"
           v-model="newValue"
-          :placeholder="placeholder"
+          :placeholder="valueName"
           @keyup.enter="addItem"
           class="flex-grow px-4 py-2 border border-gray-300 rounded dark:bg-gray-700 dark:text-white text-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
         >
@@ -25,14 +25,18 @@
           :class="{ 'bg-gray-100 dark:bg-gray-700': draggingKey === key }"
         >
           <div class="flex-grow mb-2 sm:mb-0 sm:mr-4 w-full sm:w-auto">
+            <label :for="'key-' + key" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ keyName }}</label>
             <input
+              :id="'key-' + key"
               :value="key"
               @input="updateKey(key, $event.target.value)"
               class="w-full px-3 py-2 border border-gray-300 rounded dark:bg-gray-600 dark:text-white text-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
             >
           </div>
           <div class="flex-grow mb-2 sm:mb-0 sm:mr-4 w-full sm:w-auto">
+            <label :for="'value-' + key" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ valueName }}</label>
             <input
+              :id="'value-' + key"
               :value="value"
               @input="updateValue(key, $event.target.value)"
               class="w-full px-3 py-2 border border-gray-300 rounded dark:bg-gray-600 dark:text-white text-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
@@ -80,9 +84,13 @@
         type: Object,
         default: () => ({}),
       },
-      placeholder: {
+      keyName: {
         type: String,
-        default: 'Enter a value',
+        default: 'Key',
+      },
+      valueName: {
+        type: String,
+        default: 'Value',
       },
     },
     emits: ['update:modelValue', 'change'],
@@ -95,9 +103,9 @@
     },
     methods: {
       addItem() {
-        if (this.newKey.trim() && this.newValue.trim()) {
+        if (this.newKey.trim()) {
           const updatedDict = { ...this.modelValue };
-          updatedDict[this.newKey.trim()] = this.newValue.trim();
+          updatedDict[this.newKey.trim()] = this.newValue;
           this.$emit('update:modelValue', updatedDict);
           this.$emit('change');
           this.newKey = '';
@@ -125,7 +133,7 @@
       },
       updateValue(key, newValue) {
         const updatedDict = { ...this.modelValue };
-        updatedDict[key] = newValue.trim();
+        updatedDict[key] = newValue;
         this.$emit('update:modelValue', updatedDict);
         this.$emit('change');
       },

web/src/components/TopBar.vue

@@ -477,7 +477,38 @@ export default {
         // document.body.className = `theme-${themeName}`;
 
         // Safely save theme preference
-        this.saveTheme(themeName);        
+        this.saveTheme(themeName);      
+        
+        // Update the main rapameters
+        const styles = getComputedStyle(document.documentElement);
+        const lollms_title = styles.getPropertyValue('--lollms-title').trim();
+        const activate_dropping_animation = styles.getPropertyValue('--activate-dropping-animation').trim() === '1';
+        const falling_object = styles.getPropertyValue('--falling-object').trim();
+        const lollms_welcome_short_message = styles.getPropertyValue('--lollms-welcome-short-message').trim();
+        const lollms_welcome_message = styles.getPropertyValue('--lollms-welcome-message').trim();
+        
+        
+        let theme_vars = this.$store.state.theme_vars;
+        if (lollms_title){
+          theme_vars.lollms_title = lollms_title
+        }
+        if (activate_dropping_animation){
+          theme_vars.activate_dropping_animation = activate_dropping_animation
+        }
+        if (falling_object){
+          theme_vars.falling_object = falling_object
+        }
+
+        if (lollms_welcome_short_message){
+          theme_vars.lollms_welcome_short_message = lollms_welcome_short_message
+        }
+        if (lollms_welcome_message){
+          theme_vars.lollms_welcome_message = lollms_welcome_message
+        }
+
+        this.$store.commit('setThemeVars', theme_vars);
+
+
       } catch (error) {
         console.error(`Failed to load theme: ${themeName}`, error)
         this.error = `Failed to load theme: ${themeName}`

web/src/components/WelcomeComponent.vue

@@ -11,7 +11,7 @@
           </div>
           <div class="flex flex-col items-start">
             <h1 class="text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-400 dark:to-purple-400">
-              L🌟LLMS
+              {{$store.state.theme_vars.lollms_title}}
             </h1>
             <p class="text-2xl text-gray-600 dark:text-gray-300 italic mt-2">
               Lord of Large Language And Multimodal Systems
@@ -21,10 +21,10 @@
         
         <div class="space-y-8 animate-fade-in-up">
           <h2 class="text-4xl font-semibold text-gray-800 dark:text-gray-200">
-            Welcome to L🌟LLMS WebUI
+            {{$store.state.theme_vars.lollms_welcome_short_message}}
           </h2>
           <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
-            Embark on a journey through the realm of advanced AI with L🌟LLMS, your ultimate companion for intelligent conversations and multimodal interactions. Unleash the power of large language models and explore new frontiers in artificial intelligence.
+            {{$store.state.theme_vars.lollms_welcome_message}}
           </p>
           <div class="mt-12 space-y-6">
             <p class="text-lg text-gray-700 dark:text-gray-300">

web/src/main.js

@@ -23,6 +23,7 @@ function copyObject(obj) {
 export const store = createStore({
     state () {
       return {
+        theme_vars: {lollms_title:"LoLLMS", falling_object:"L", activate_dropping_animation:false, lollms_welcome_short_message:"Welcome to LoLLMS WebUI", lollms_welcome_message:"Embark on a journey through the realm of advanced AI with LoLLMS, your ultimate companion for intelligent conversations and multimodal interactions. Unleash the power of large language models and explore new frontiers in artificial intelligence."},
         personalities_ready: false,
         is_rt_on:false,
         language: "english",
@@ -95,6 +96,9 @@ export const store = createStore({
           console.log("Can't uipdate personality beceause it was Not found:",newPersonality.full_path)
         }
       },
+      setThemeVars(state, themeVars){
+        state.theme_vars = themeVars;
+      },
       setLeftPanelCollapsed(state, status) {
         state.leftPanelCollapsed = status;
         console.log(`Saving the status of left panel to ${status}`)
@@ -191,6 +195,9 @@ export const store = createStore({
       }      
     },
     getters: {
+      getThemeVars(state){
+        return state.theme_vars;
+      },
       getLeftPanelCollapsed(state) {
         return state.leftPanelCollapsed;
       },

web/src/themes/amber.css

@@ -4,6 +4,13 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --lollms-title: "LoLLMS";
+  --falling-object: "";
+  --activate-dropping-animation: 0;
+  --lollms-welcome-short-message: "Welcome to LoLLMs";
+  --lollms-welcome-message:  "Dive into the sweet world of LoLLMs - where AI meets delicious innovation! 🍓🤖 We're here to make your digital experience as juicy and satisfying as a perfectly ripe strawberry. From natural language processing to multimodal tasks, LoLLMs is your one-stop AI assistant. Let's cultivate brilliant ideas together!";
+}
 @layer base {
   html {
     @apply scroll-smooth;

web/src/themes/borg.css

@@ -5,6 +5,15 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --lollms-title: "The Borg Collective Lord";
+  --falling-object: "B";
+  --activate-dropping-animation: 1;
+  --lollms-welcome-short-message: "Welcome to the Borg collective";
+  --lollms-welcome-message: "Resistance is futile";
+}
+
+
 @layer base {
   html {
     @apply scroll-smooth;
@@ -76,7 +85,7 @@ textarea, input, select {
 }
 
 .panels-color {
-  @apply text-green-400 bg-gray-900 border border-green-600;
+  @apply text-green-400 bg-gray-900 border-green-600;
 }
 
 .unicolor-panels-color {

web/src/themes/default.css

@@ -5,6 +5,14 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --lollms-title: "LoLLMS";
+  --falling-object: "";
+  --activate-dropping-animation: 0;
+  --lollms-welcome-short-message: "Welcome to LoLLMS";
+  --lollms-welcome-message: "Embark on a journey through the realm of advanced AI with LoLLMS, your ultimate companion for intelligent conversations and multimodal interactions. Unleash the power of large language models and explore new frontiers in artificial intelligence.";
+}
+
 @layer base {
   html {
     @apply scroll-smooth;

web/src/themes/matrix_reborn.css

@@ -4,6 +4,14 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --lollms-title: "LoLLMS";
+  --falling-object: "";
+  --activate-dropping-animation: 0;
+  --lollms-welcome-short-message: "Welcome to LoLLMS";
+  --lollms-welcome-message: "Embark on a journey through the realm of advanced AI with LoLLMS, your ultimate companion for intelligent conversations and multimodal interactions. Unleash the power of large language models and explore new frontiers in artificial intelligence.";
+}
+
 @layer base {
   html {
     @apply scroll-smooth;
@@ -75,7 +83,7 @@ textarea, input, select {
 }
 
 .panels-color {
-  @apply text-green-400 dark:text-green-300 bg-black dark:bg-black border border-green-500;
+  @apply text-green-400 dark:text-green-300 bg-black dark:bg-black;
 }
 
 .unicolor-panels-color {

web/src/themes/red_dragon.css

@@ -4,6 +4,14 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --lollms-title: "LoLLMS";
+  --falling-object: "";
+  --activate-dropping-animation: 0;
+  --lollms-welcome-short-message: "Welcome to LoLLMS";
+  --lollms-welcome-message: "Embark on a journey through the realm of advanced AI with LoLLMS, your ultimate companion for intelligent conversations and multimodal interactions. Unleash the power of large language models and explore new frontiers in artificial intelligence.";
+}
+
 @layer base {
   html {
     @apply scroll-smooth;

web/src/themes/sober_gray.css

@@ -5,6 +5,14 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --lollms-title: "LoLLMS";
+  --falling-object: "";
+  --activate-dropping-animation: 0;
+  --lollms-welcome-short-message: "Welcome to LoLLMS";
+  --lollms-welcome-message: "Embark on a journey through the realm of advanced AI with LoLLMS, your ultimate companion for intelligent conversations and multimodal interactions. Unleash the power of large language models and explore new frontiers in artificial intelligence.";
+}
+
 @layer base {
   html {
     @apply scroll-smooth;

web/src/themes/strawberry.css

@@ -4,6 +4,14 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --lollms-title: "L🍓LLMS";
+  --falling-object: "🍓";
+  --activate-dropping-animation: 1;
+  --lollms-welcome-short-message: "Welcome to LoLLMs";
+  --lollms-welcome-message:  "Dive into the sweet world of LoLLMs - where AI meets delicious innovation! 🍓🤖 We're here to make your digital experience as juicy and satisfying as a perfectly ripe strawberry. From natural language processing to multimodal tasks, LoLLMs is your one-stop AI assistant. Let's cultivate brilliant ideas together!";
+}
+
 @layer base {
   html {
     @apply scroll-smooth;

web/src/views/DiscussionsView.vue

@@ -2,7 +2,7 @@
     <transition name="fade-and-fly">
         <div v-if="!isReady" class="fixed top-0 left-0 w-screen h-screen flex items-center justify-center overflow-hidden">
             <!-- Falling stars -->
-            <div class="absolute inset-0 pointer-events-none overflow-hidden">
+            <div v-if="$store.state.theme_vars.activate_dropping_animation" class="absolute inset-0 pointer-events-none overflow-hidden">
                 <div v-for="n in 50" :key="n" class="absolute animate-fall animate-giggle"
                     :style="{
                     left: `${Math.random() * 100}%`,
@@ -10,7 +10,7 @@
                     animationDuration: `${3 + Math.random() * 7}s`,
                     animationDelay: `${Math.random() * 5}s`
                     }">
-                🌟
+                {{$store.state.theme_vars.falling_object}}
                 </div>
             </div>
 
@@ -25,7 +25,7 @@
                                 background: linear-gradient(45deg, #f59e0b, #fbbf24);
                                 -webkit-background-clip: text;
                                 background-clip: text;">
-                        L<span class="animate-pulse">⭐</span>LLMS
+                        {{$store.state.theme_vars.lollms_title}}
                     </div>
 
 
@@ -58,7 +58,6 @@
                         <!-- Star that moves with progress -->
                         <div class="absolute top-0 h-full flex items-center transition-all duration-300"
                             :style="{ left: `${loading_progress}%`, transform: 'translateX(-50%)' }">
-                            <p style="font-size: 48px; line-height: 1;">🌟</p>
                         </div>
                     </div>
                 </div>

web/src/views/SettingsView.vue

@@ -224,14 +224,10 @@
                 <div :class="{ 'hidden': smartrouterconf_collapsed }" class="flex flex-col mb-2 px-3 pb-0">
                     <div class="flex flex-col mb-2 px-3 pb-2">
                         <Card title="Smart Routing Settings" :is_shrunk="false" :is_subcard="true" class="pb-2 m-2">
-                            <table class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                            <div class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
-                                <tr>
+                                <div class="flex flex-col space-y-4">
-                                    <td style="min-width: 200px;">
+                                    <div class="flex items-center">
-                                        <!-- ? Label for the checkbox to enable/disable smart routing -->
+                                        <label for="use_smart_routing" class="text-sm font-bold w-64">Use Smart Routing:</label>
-                                        <label for="use_smart_routing" class="text-sm font-bold" style="margin-right: 1rem;">Use Smart Routing:</label>
-                                    </td>
-                                    <td style="width: 100%;">
-                                        <!-- ? Checkbox input to toggle smart routing on/off -->
                                         <input
                                             type="checkbox"
                                             id="use_smart_routing"
@@ -239,15 +235,10 @@
                                             @change="settingsChanged=true"
                                             class="mt-1 px-2 py-1 border border-gray-300 rounded dark:bg-gray-600"
                                         >
-                                    </td>
+                                    </div>
-                                </tr>
+                                    
-                                <tr>
+                                    <div class="flex items-center">
-                                    <td style="min-width: 200px;">
+                                        <label for="restore_model_after_smart_routing" class="text-sm font-bold w-64">Restore model after smart routing:</label>
-                                        <!-- ? Label for the checkbox to enable/disable smart routing -->
-                                        <label for="restore_model_after_smart_routing" class="text-sm font-bold" style="margin-right: 1rem;">Restore model after smart routing:</label>
-                                    </td>
-                                    <td style="width: 100%;">
-                                        <!-- ? Checkbox input to toggle smart routing on/off -->
                                         <input
                                             type="checkbox"
                                             id="restore_model_after_smart_routing"
@@ -255,40 +246,34 @@
                                             @change="settingsChanged=true"
                                             class="mt-1 px-2 py-1 border border-gray-300 rounded dark:bg-gray-600"
                                         >
-                                    </td>
+                                    </div>
-                                </tr>                                
+                                    
-                                <tr>
+                                    <div class="flex items-center">
-                                    <td style="min-width: 200px;">
+                                        <label for="smart_routing_router_model" class="text-sm font-bold w-64">Router Model:</label>
-                                        <!-- ? Label for the input field to specify the router model -->
-                                        <label for="smart_routing_router_model" class="text-sm font-bold" style="margin-right: 1rem;">Router Model:</label>
-                                    </td>
-                                    <td style="width: 100%;">
-                                        <!-- ? Input field to enter the name of the model used for routing decisions -->
                                         <input
                                             type="text"
                                             id="smart_routing_router_model"
                                             v-model="configFile.smart_routing_router_model"
                                             @change="settingsChanged=true"
-                                            class="w-full mt-1 px-2 py-1 border border-gray-300 rounded dark:bg-gray-600"
+                                            class="flex-grow mt-1 px-2 py-1 border border-gray-300 rounded dark:bg-gray-600"
                                         >
-                                    </td>
+                                    </div>
-                                </tr>
+                                    
-                                <tr>
+                                    <div class="flex items-start">
-                                    <td style="min-width: 200px;">
+                                        <label for="smart_routing_models_description" class="text-sm font-bold w-64 mt-1">Models with description:</label>
-                                        <!-- ? Label for the list of models ordered by their processing power -->
+                                        <DictManager
-                                        <label for="smart_routing_models_by_power" class="text-sm font-bold" style="margin-right: 1rem;">Models by Power:</label>
+                                            v-model="configFile.smart_routing_models_description"
-                                    </td>
-                                    <td style="width: 100%;">
-                                        <!-- ? Custom component to manage a list of model names, ordered by their processing capability -->
-                                        <StringListManager
-                                            v-model="configFile.smart_routing_models_by_power"
                                             @change="settingsChanged = true"
+                                            key-name="Model Path"
+                                            value-name="Model description"
                                             placeholder="Enter model name"
+                                            class="flex-grow"
                                         />
-                                    </td>
+                                    </div>
-                                </tr>
+                                </div>
-                            </table>
+                            </div>
                         </Card>
+
                     </div>
                 </div>
             </div>
@@ -4425,6 +4410,7 @@ import storeLogo from '@/assets/logo.png'
 import SVGGPU from '@/assets/gpu.svg';
 
 import StringListManager from '@/components/StringListManager.vue';
+import DictManager from '@/components/DictManager.vue';
 
 const bUrl = import.meta.env.VITE_LOLLMS_API_BASEURL
 axios.defaults.baseURL = import.meta.env.VITE_LOLLMS_API_BASEURL
@@ -4439,6 +4425,7 @@ export default {
         ChoiceDialog,
         Card,
         StringListManager,
+        DictManager,
         RadioOptions,
     },
     data() {