new ui with enhanced language handling

configs/config.yaml

@@ -1,5 +1,5 @@
 # =================== Lord Of Large Language Multimodal Systems Configuration file =========================== 
-version: 85
+version: 87
 binding_name: null
 model_name: null
 model_variant: null
@@ -13,6 +13,7 @@ turn_on_code_execution: true
 turn_on_code_validation: true
 turn_on_open_file_validation: true
 turn_on_send_file_validation: true
+turn_on_language_validation: true
 
 force_accept_remote_access: false
 
@@ -24,6 +25,8 @@ allowed_origins: []
 host: localhost
 port: 9600
 
+app_custom_logo: ""
+
 # Genreration parameters 
 discussion_prompt_separator: "!@>"
 seed: -1
@@ -80,6 +83,8 @@ copy_to_clipboard_add_all_details: false
 # Voice service
 enable_voice_service: false
 xtts_base_url: http://localhost:8020
+xtts_use_deepspeed: false
+xtts_use_streaming_mode: true
 auto_read: false
 current_voice: null
 current_language: en

lollms_core

@@ -1 +1 @@
-Subproject commit cb17c8b917dbe35071cf71cd86f8e6f67d4d02d1
+Subproject commit a668646ba92a6d4347306940edeea4f43d5088b6

lollms_webui.py

@@ -437,7 +437,13 @@ class LOLLMSWebUI(LOLLMSElfServer):
                         try:
                             from lollms.services.xtts.lollms_xtts import LollmsXTTS
                             if self.tts is None:
-                                self.tts = LollmsXTTS(self, voice_samples_path=Path(__file__).parent.parent/"voices", xtts_base_url= self.config.xtts_base_url)
+                                self.tts = LollmsXTTS(
+                                                        self, 
+                                                        voice_samples_path=Path(__file__).parent.parent/"voices", 
+                                                        xtts_base_url= self.config.xtts_base_url,
+                                                        use_deep_speed=self.config.xtts_use_deepspeed,
+                                                        use_streaming_mode=self.config.xtts_use_streaming_mode
+                                                        )
                         except:
                             self.warning(f"Personality {personality.name} request using custom voice but couldn't load XTTS")
                 except Exception as ex:
@@ -1168,7 +1174,13 @@ class LOLLMSWebUI(LOLLMSElfServer):
                             self.process_chunk("Generating voice output",MSG_TYPE.MSG_TYPE_STEP_START,client_id=client_id)
                             from lollms.services.xtts.lollms_xtts import LollmsXTTS
                             if self.tts is None:
-                                self.tts = LollmsXTTS(self, voice_samples_path=Path(__file__).parent.parent/"voices", xtts_base_url= self.config.xtts_base_url)
+                                self.tts = LollmsXTTS(
+                                                        self, 
+                                                        voice_samples_path=Path(__file__).parent.parent/"voices", 
+                                                        xtts_base_url= self.config.xtts_base_url,
+                                                        use_deep_speed=self.config.xtts_use_deepspeed,
+                                                        use_streaming_mode=self.config.xtts_use_streaming_mode                                                        
+                                                    )
                             language = convert_language_name(self.personality.language)
                             self.tts.set_speaker_folder(Path(self.personality.audio_samples[0]).parent)
                             fn = self.personality.name.lower().replace(' ',"_").replace('.','')    

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-5b1487f6.js"></script>
+    <script type="module" crossorigin src="/assets/index-7e441524.js"></script>
-    <link rel="stylesheet" href="/assets/index-1b49592b.css">
+    <link rel="stylesheet" href="/assets/index-a6b015cd.css">
   </head>
   <body>
     <div id="app"></div>

web/src/components/ChatBox.vue

@@ -221,6 +221,7 @@
                                 </div>        
                                 <div class="relative grow">
                                     <textarea id="chat" rows="1" v-model="message" title="Hold SHIFT + ENTER to add new line"
+                                        @paste="handlePaste"
                                         class="inline-block  no-scrollbar  p-2.5 w-full text-sm text-gray-900 bg-bg-light rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-bg-dark dark:border-gray-600 dark:placeholder-gray-400  dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                         placeholder="Send message..." @keydown.enter.exact="submitOnEnter($event)">
                                     </textarea>
@@ -457,6 +458,25 @@ export default {
         }
     },
     methods: { 
+        handlePaste(event) {
+            const items = (event.clipboardData || event.originalEvent.clipboardData).items;
+            let filesToUpload = [];
+            for (let item of items) {
+                if (item.type.indexOf("image") !== -1) {
+                    const blob = item.getAsFile();
+                    // Instead of reading the file and setting it as an image URL,
+                    // call the addFiles method and pass the file
+                    this.addFiles([blob]); // Assuming addFiles accepts an array of files
+                }
+                else if (item.kind === 'file') {
+                    const file = item.getAsFile();
+                    filesToUpload.push(file);
+                }
+            }
+            if (filesToUpload.length > 0) {
+                this.addFiles(filesToUpload);
+            }            
+        },
         toggleSwitch() {
             this.$store.state.config.activate_internet_search = !this.$store.state.config.activate_internet_search;
             this.isLoading = true;

web/src/components/Navigation.vue

@@ -1,21 +1,21 @@
 <template>
     <div v-if="$store.state.ready" class="container z-60 flex flex-col sm:flex-row items-center">
       <div class="w-full text-center">
-        <div class="w-full items-center justify-center  flex flex-row font-medium nav-ul text-center">
+        <div class="m-0 flex border-b w-full items-center justify-center  flex flex-row font-medium nav-ul text-center">
             <RouterLink 
               :to="{ name: 'discussions' }" 
-              class="link-item dark:link-item-dark bg-bg-light-tone dark:bg-bg-dark-tone hover:dark:bg-bg-light-tone mr-2" 
+              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': isRouteActive('discussions'),
+                'text-green-600 hover:text-green-500 dark:text-green-100 font-bold bg-bg-secondary shadow-no-bottom': isRouteActive('discussions'),
                 'bounce-in': isRouteActive('discussions'),
                 }">
               Discussions
             </RouterLink>
             <RouterLink 
               :to="{ name: 'playground' }" 
-              class="link-item dark:link-item-dark bg-bg-light-tone dark:bg-bg-dark-tone hover:dark:bg-bg-light-tone mr-2"
+              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-light-panel': isRouteActive('playground'),
+                'text-green-600 hover:text-green-500 dark:text-green-100 font-bold bg-bg-secondary shadow-no-bottom': isRouteActive('playground'),
                 'bounce-in': isRouteActive('playground'),
               }"
               >
@@ -24,9 +24,9 @@
             <RouterLink 
               v-if="$store.state.config.enable_comfyui_service" 
               :to="{ name: 'ComfyUI' }" 
-              class="link-item dark:link-item-dark bg-bg-light-tone dark:bg-bg-dark-tone hover:dark:bg-bg-light-tone mr-2"
+              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-light-panel': isRouteActive('ComfyUI'),
+                'text-green-600 hover:text-green-500 dark:text-green-100 font-bold bg-bg-secondary shadow-no-bottom': isRouteActive('ComfyUI'),
                 'bounce-in': isRouteActive('ComfyUI'),
               }"
               >
@@ -35,9 +35,9 @@
             <RouterLink 
               v-if="$store.state.config.enable_voice_service" 
               :to="{ name: 'interactive' }" 
-              class="link-item dark:link-item-dark bg-bg-light-tone dark:bg-bg-dark-tone hover:dark:bg-bg-light-tone mr-2"
+              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-light-panel': isRouteActive('interactive'),
+                'text-green-600 hover:text-green-500 dark:text-green-100 font-bold bg-bg-secondary shadow-no-bottom': isRouteActive('interactive'),
                 'bounce-in': isRouteActive('interactive'),
               }"
               >
@@ -60,9 +60,9 @@
             -->
             <RouterLink 
               :to="{ name: 'settings' }" 
-              class="link-item dark:link-item-dark bg-bg-light-tone dark:bg-bg-dark-tone hover:dark:bg-bg-light-tone mr-2"
+              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-light-panel': isRouteActive('settings'),
+                'text-green-600 hover:text-green-500 dark:text-green-100 font-bold bg-bg-secondary shadow-no-bottom': isRouteActive('settings'),
                 'bounce-in': isRouteActive('settings'),
               }"              
               >
@@ -70,9 +70,9 @@
             </RouterLink>
             <RouterLink 
               :to="{ name: 'help' }" 
-              class="link-item dark:link-item-dark bg-bg-light-tone dark:bg-bg-dark-tone hover:dark:bg-bg-light-tone mr-2"
+              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-light-panel': isRouteActive('help'),
+                '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'),
               }"
               >
@@ -210,5 +210,9 @@
       transform: scale(1);
     }
   }
+  .shadow-no-bottom {
+    box-shadow: 0px -4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
+  }
+
 </style>
   

web/src/components/TopBar.vue

@@ -101,10 +101,14 @@
                     <button @click="toggleLanguageMenu" class="bg-transparent text-black dark:text-white py-1 px-1 rounded font-bold uppercase transition-colors duration-300 hover:bg-blue-500">
                         {{ $store.state.language.slice(0, 2) }}
                     </button>
-                    <div v-if="isLanguageMenuVisible" class="container language-menu absolute left-0 mt-1 bg-white rounded shadow-lg z-10" style="position: absolute; top: 100%; width: 200px;"> <!-- Adjusted width for a larger menu -->
+                    <div v-if="isLanguageMenuVisible" class="container language-menu absolute left-0 mt-1 bg-white dark:bg-bg-dark-tone rounded shadow-lg z-10 overflow-y-auto scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary" style="position: absolute; top: 100%; width: 200px; max-height: 300px; overflow-y: auto;">
-                        <ul style="list-style-type: none;"> <!-- Removed bullets -->
+                        <ul style="list-style-type: none; padding-left: 0; margin-left: 0;"> <!-- Set padding-left and margin-left to 0 -->
-                            <li v-for="language in languages" :key="language" @click="selectLanguage(language)" class="cursor-pointer hover:bg-blue-500 hover:text-white py-2 px-4 block whitespace-no-wrap">
+                            <li v-for="language in languages" :key="language" class="relative flex items-center" style="padding-left: 0; margin-left: 0;"> <!-- Set padding-left and margin-left to 0 -->
+                                <button @click="deleteLanguage(language)" class="mr-2 text-red-500 hover:text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 rounded-full">✕</button>
+                                <div @click="selectLanguage(language)" 
+                                    :class="{'cursor-pointer hover:bg-blue-500 hover:text-white py-2 px-4 block whitespace-no-wrap': true, 'bg-blue-500 text-white': language === $store.state.language, 'flex-grow': true}" >
                                     {{ language }}
+                                </div>
                             </li>
                             <li class="cursor-pointer hover:text-white py-0 px-0 block whitespace-no-wrap">
                                 <input type="text" v-model="customLanguage" @keyup.enter.prevent="addCustomLanguage" placeholder="Enter language..." class="bg-transparent border border-gray-300 rounded py-0 px-0 mx-0 my-1 w-full">
@@ -118,6 +122,8 @@
 
 
 
+
+
             </div>
 
         </nav>
@@ -313,6 +319,12 @@ export default {
             this.toggleLanguageMenu(); // Fermer le menu après le changement de langue
             this.language = language
         },
+        async deleteLanguage(language) {
+            await this.$store.dispatch('deleteLanguage', language);
+            this.toggleLanguageMenu(); // Fermer le menu après le changement de langue
+            this.language = language
+        },
+        
         toggleLanguageMenu() {
             console.log("Toggling language ",this.isLanguageMenuVisible)
             this.isLanguageMenuVisible = !this.isLanguageMenuVisible;

web/src/components/WelcomeComponent.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- DEFAULT FIRST PAGE LOAD VIEW -->
-    <div class="flex flex-col text-center">
+    <div class="flex flex-col text-center w-full h-full">
         <div class="flex flex-col text-center items-center">
             
             <div class="flex items-center gap-3 text-5xl drop-shadow-md align-middle pt-24 ">

web/src/main.js

@@ -299,6 +299,7 @@ export const store = createStore({
         console.log("language", language)
         commit('setLanguage', language);
       },
+      
       async changeLanguage({ commit }, new_language) {
         console.log("Changing language to ", new_language)
           let response = await axios.post('/set_personality_language', {
@@ -327,6 +328,34 @@ export const store = createStore({
 
           console.log('Language changed successfully:', response.data.message);
       },
+      async deleteLanguage({ commit }, new_language) {
+        console.log("Deleting ", new_language)
+          let response = await axios.post('/del_personality_language', {
+            client_id: this.state.client_id,
+              language: new_language,
+          })
+          console.log("get_personality_languages_list", this.state.client_id)
+          response = await axios.post(
+                      '/get_personality_languages_list',
+                      {client_id: this.state.client_id}
+                    );
+              
+          console.log("response", response)
+          const languages = response.data;
+          console.log("languages", languages)
+          commit('setLanguages', languages);          
+          response = await axios.post(
+                      '/get_personality_language',
+                      {client_id: this.state.client_id}
+                    );
+              
+          console.log("response", response)
+          const language = response.data;
+          console.log("language", language)
+          commit('setLanguage', language);
+
+          console.log('Language changed successfully:', response.data.message);
+      },
       async refreshPersonalitiesZoo({ commit }) {
           let personalities = []
           const catdictionary = await api_get_req("get_all_personalities")

web/src/views/SettingsView.vue

@@ -1953,6 +1953,42 @@
                             </td>
                             </tr>                                        
                             <tr>
+                            <td style="min-width: 200px;">
+                                <label for="xtts_use_deepspeed" class="text-sm font-bold" style="margin-right: 1rem;">Enable deepspeed:</label>
+                            </td>
+                            <td>
+                                <div class="flex flex-row">
+                                    <input
+                                        type="checkbox"
+                                        id="xtts_use_deepspeed"
+                                        required
+                                        v-model="configFile.xtts_use_deepspeed"
+                                        @change="settingsChanged=true"
+                                        class="mt-1 px-2 py-1 border border-gray-300 rounded dark:bg-gray-600"
+                                        :disabled="!enable_voice_service"
+                                    >
+                                </div>
+                            </td>
+                            </tr>
+                            <tr>
+                            <td style="min-width: 200px;">
+                                <label for="xtts_use_streaming_mode" class="text-sm font-bold" style="margin-right: 1rem;">Enable streaming mode:</label>
+                            </td>
+                            <td>
+                                <div class="flex flex-row">
+                                    <input
+                                        type="checkbox"
+                                        id="xtts_use_streaming_mode"
+                                        required
+                                        v-model="configFile.xtts_use_streaming_mode"
+                                        @change="settingsChanged=true"
+                                        class="mt-1 px-2 py-1 border border-gray-300 rounded dark:bg-gray-600"
+                                        :disabled="!enable_voice_service"
+                                    >
+                                </div>
+                            </td>
+                            </tr>                                                
+                            <tr>
                             <td style="min-width: 200px;">
                                 <label for="auto_read" class="text-sm font-bold" style="margin-right: 1rem;">Enable auto read:</label>
                             </td>