mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2024-12-18 20:17:50 +00:00
new ui with enhanced language handling
This commit is contained in:
Saifeddine ALOUI
parent
dd2fbab440
commit
0d9b8ee744
@ -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
|
||||
|
||||
@ -1 +1 @@
|
||||
Subproject commit cb17c8b917dbe35071cf71cd86f8e6f67d4d02d1
|
||||
Subproject commit a668646ba92a6d4347306940edeea4f43d5088b6
|
||||
@ -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('.','')
|
||||
|
||||
8
web/dist/assets/index-1b49592b.css
vendored
8
web/dist/assets/index-1b49592b.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
8
web/dist/assets/index-a6b015cd.css
vendored
Normal file
8
web/dist/assets/index-a6b015cd.css
vendored
Normal file
File diff suppressed because one or more lines are too long
4
web/dist/index.html
vendored
4
web/dist/index.html
vendored
@ -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>
|
||||
<link rel="stylesheet" href="/assets/index-1b49592b.css">
|
||||
<script type="module" crossorigin src="/assets/index-7e441524.js"></script>
|
||||
<link rel="stylesheet" href="/assets/index-a6b015cd.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@ -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>
|
||||
@ -456,7 +457,26 @@ export default {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
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;
|
||||
|
||||
@ -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="w-full 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'),
|
||||
}"
|
||||
>
|
||||
@ -209,6 +209,10 @@
|
||||
100% {
|
||||
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>
|
||||
|
||||
@ -101,12 +101,16 @@
|
||||
<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 -->
|
||||
<ul style="list-style-type: none;"> <!-- Removed bullets -->
|
||||
<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">
|
||||
{{ language }}
|
||||
<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; padding-left: 0; margin-left: 0;"> <!-- Set padding-left and margin-left to 0 -->
|
||||
<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">
|
||||
<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">
|
||||
</li>
|
||||
</ul>
|
||||
@ -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;
|
||||
|
||||
@ -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 ">
|
||||
|
||||
@ -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")
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user