upgraded ui

This commit is contained in:
Saifeddine ALOUI 2025-01-19 23:13:52 +01:00
parent 7e1c1f1d65
commit 99d693227c
6 changed files with 421 additions and 294 deletions

8
web/dist/assets/index-D3RFgJ-r.css vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

4
web/dist/index.html vendored
View File

@ -6,8 +6,8 @@
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script> <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"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LoLLMS WebUI</title> <title>LoLLMS WebUI</title>
<script type="module" crossorigin src="/assets/index-DT-TjDjA.js"></script> <script type="module" crossorigin src="/assets/index-DiGBKYgc.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-Dou72F5q.css"> <link rel="stylesheet" crossorigin href="/assets/index-D3RFgJ-r.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

View File

@ -206,7 +206,7 @@
</audio> </audio>
<tokens-hilighter :namedTokens="namedTokens"> <tokens-hilighter :namedTokens="namedTokens">
</tokens-hilighter> </tokens-hilighter>
<div v-if="tab_id === 'render'"> <div v-if="tab_id === 'render'">
<MarkdownRenderer ref="mdRender" :client_id="this.$store.state.client_id" :message_id="0" :discussion_id="0" :markdown-text="text" class="mt-4 p-2 rounded shadow-lg dark:bg-bg-dark"> <MarkdownRenderer ref="mdRender" :client_id="this.$store.state.client_id" :message_id="0" :discussion_id="0" :markdown-text="text" class="mt-4 p-2 rounded shadow-lg dark:bg-bg-dark">
</MarkdownRenderer> </MarkdownRenderer>
@ -889,9 +889,9 @@ export default {
this.generating=true this.generating=true
}, },
async tokenize_text(){ async tokenize_text(){
const output = await axios.post("/lollms_tokenize", {"prompt": this.text}, {headers: this.posts_headers}); const output = await axios.post("/lollms_tokenize", {"prompt": this.text, "return_named": true}, {headers: this.posts_headers});
console.log(output.data.named_tokens) console.log(output.data)
this.namedTokens = output.data.named_tokens this.namedTokens = output.data
}, },
generate(){ generate(){
console.log("Finding cursor position") console.log("Finding cursor position")

View File

@ -292,93 +292,205 @@
</div> </div>
<div :class="{ 'hidden': mainconf_collapsed }" class="flex flex-col mb-2 px-3 pb-0"> <div :class="{ 'hidden': mainconf_collapsed }" class="flex flex-col mb-2 px-3 pb-0">
<div class="flex flex-col mb-2 px-3 pb-2"> <div class="flex flex-col mb-2 px-3 pb-2">
<Card title="General" :is_subcard="true" class="pb-2 m-2"> <Card title="General" :is_subcard="true" class="pb-2 m-2">
<div class="settings-container grid gap-6 p-6 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-300 dark:border-gray-600"> <div class="settings-container grid gap-6 p-6 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-300 dark:border-gray-600">
<!-- Logo Section --> <!-- Existing sections remain unchanged -->
<!-- User Information Section -->
<div class="setting-section">
<h3 class="font-bold text-lg text-gray-800 dark:text-gray-200 mb-4">User Information</h3>
<div class="settings-grid grid gap-4">
<!-- User Name -->
<div class="setting-row flex items-center gap-4"> <div class="setting-row flex items-center gap-4">
<div class="setting-label w-64"> <div class="setting-label w-64">
<label class="font-bold text-sm text-gray-700 dark:text-gray-200">Application logo:</label> <label class="font-bold text-sm text-gray-700 dark:text-gray-200">Username:</label>
</div>
<input type="text"
v-model="configFile.user_name"
@change="settingsChanged=true"
class="flex-1 px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800
text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500">
</div>
<!-- User Description -->
<div class="setting-row flex items-center gap-4">
<div class="setting-label w-64">
<label class="font-bold text-sm text-gray-700 dark:text-gray-200">User Description:</label>
</div>
<textarea
v-model="configFile.user_description"
@change="settingsChanged=true"
class="flex-1 px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800
text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500"
rows="3">
</textarea>
</div>
<!-- User Avatar -->
<div class="setting-row flex items-center gap-4">
<div class="setting-label w-64">
<label class="font-bold text-sm text-gray-700 dark:text-gray-200">User Avatar:</label>
</div> </div>
<div class="setting-content flex items-center gap-4"> <div class="setting-content flex items-center gap-4">
<label for="logo-upload" class="cursor-pointer"> <label for="avatar-upload" class="cursor-pointer">
<img :src="configFile.app_custom_logo ? `/user_infos/${configFile.app_custom_logo}` : storeLogo" <img :src="configFile.user_avatar ? `/user_infos/${configFile.user_avatar}` : defaultAvatar"
class="w-12 h-12 rounded-full object-cover border-2 border-gray-300 hover:border-blue-500 transition-all"> class="w-12 h-12 rounded-full object-cover border-2 border-gray-300 hover:border-blue-500 transition-all">
</label> </label>
<input type="file" id="logo-upload" class="hidden" @change="uploadLogo"> <input type="file" id="avatar-upload" class="hidden" @change="uploadAvatar">
<button @click.stop="resetLogo()" <button @click.stop="resetAvatar()"
class="text-gray-500 hover:text-red-600 p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600 transition-all" class="text-gray-500 hover:text-red-600 p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600 transition-all"
title="Discard logo"> title="Remove avatar">
<i data-feather="x"></i> <i data-feather="x"></i>
</button> </button>
</div> </div>
</div> </div>
</div>
</div>
<!-- Hardware Mode Section --> <!-- Discussion Settings -->
<div class="setting-row flex items-center gap-4"> <div class="setting-section">
<div class="setting-label w-64"> <h3 class="font-bold text-lg text-gray-800 dark:text-gray-200 mb-4">Discussion Settings</h3>
<label class="font-bold text-sm text-gray-700 dark:text-gray-200">Hardware mode:</label> <div class="settings-grid grid gap-4">
</div> <div class="setting-row flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm">
<div class="setting-content"> <label class="font-bold text-sm text-gray-700 dark:text-gray-200">Use username in discussions</label>
<select v-model="configFile.hardware_mode" <div class="relative inline-block w-12 h-6">
@change="settingsChanged=true" <input type="checkbox"
class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 v-model="configFile.use_user_name_in_discussions"
text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500"> @change="settingsChanged=true"
<option value="cpu">CPU</option> class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer
<option value="cpu-noavx">CPU (No AVX)</option> transition-transform duration-200 ease-in-out checked:translate-x-6 checked:bg-blue-500">
<option value="nvidia-tensorcores">NVIDIA (Tensor Cores)</option> <label class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 dark:bg-gray-600 cursor-pointer"></label>
<option value="nvidia">NVIDIA</option>
<option value="amd-noavx">AMD (No AVX)</option>
<option value="amd">AMD</option>
<option value="apple-intel">Apple Intel</option>
<option value="apple-silicon">Apple Silicon</option>
</select>
</div> </div>
</div> </div>
<div class="setting-row flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm">
<!-- Toggle Switches --> <label class="font-bold text-sm text-gray-700 dark:text-gray-200">Use model name in discussions</label>
<div class="settings-grid grid gap-4"> <div class="relative inline-block w-12 h-6">
<div v-for="setting in toggleSettings" :key="setting.id" <input type="checkbox"
class="setting-row flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm"> v-model="configFile.use_model_name_in_discussions"
<label :for="setting.id" class="font-bold text-sm text-gray-700 dark:text-gray-200">{{ setting.label }}</label> @change="settingsChanged=true"
<div class="relative inline-block w-12 h-6"> class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer
<input type="checkbox" transition-transform duration-200 ease-in-out checked:translate-x-6 checked:bg-blue-500">
:id="setting.id" <label class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 dark:bg-gray-600 cursor-pointer"></label>
v-model="configFile[setting.model]"
@change="settingsChanged=true"
class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer
transition-transform duration-200 ease-in-out checked:translate-x-6 checked:bg-blue-500">
<label :for="setting.id"
class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 dark:bg-gray-600 cursor-pointer">
</label>
</div>
</div> </div>
</div> </div>
<div class="setting-row flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm">
<!-- Text Input Fields --> <label class="font-bold text-sm text-gray-700 dark:text-gray-200">Use user information in discussions</label>
<div class="settings-grid grid gap-4"> <div class="relative inline-block w-12 h-6">
<div class="setting-row flex items-center gap-4"> <input type="checkbox"
<div class="setting-label w-64"> v-model="configFile.use_user_informations_in_discussion"
<label class="font-bold text-sm text-gray-700 dark:text-gray-200">Database path:</label>
</div>
<input type="text"
v-model="configFile.discussion_db_name"
@change="settingsChanged=true" @change="settingsChanged=true"
class="flex-1 px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer
text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500"> transition-transform duration-200 ease-in-out checked:translate-x-6 checked:bg-blue-500">
</div> <label class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 dark:bg-gray-600 cursor-pointer"></label>
<div class="setting-row flex items-center gap-4">
<div class="setting-label w-64">
<label class="font-bold text-sm text-gray-700 dark:text-gray-200">Debug file path:</label>
</div>
<input type="text"
v-model="configFile.debug_log_file_path"
@change="settingsChanged=true"
class="flex-1 px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800
text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500">
</div> </div>
</div> </div>
</div> </div>
</Card> </div>
<!-- Debug Settings -->
<div class="setting-section">
<h3 class="font-bold text-lg text-gray-800 dark:text-gray-200 mb-4">Debug Settings</h3>
<div class="settings-grid grid gap-4">
<div class="setting-row flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm">
<label class="font-bold text-sm text-gray-700 dark:text-gray-200">Enable Debug Mode</label>
<div class="relative inline-block w-12 h-6">
<input type="checkbox"
v-model="configFile.debug"
@change="settingsChanged=true"
class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer
transition-transform duration-200 ease-in-out checked:translate-x-6 checked:bg-blue-500">
<label class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 dark:bg-gray-600 cursor-pointer"></label>
</div>
</div>
<div class="setting-row flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm">
<label class="font-bold text-sm text-gray-700 dark:text-gray-200">Show Final Full Prompt</label>
<div class="relative inline-block w-12 h-6">
<input type="checkbox"
v-model="configFile.debug_show_final_full_prompt"
@change="settingsChanged=true"
class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer
transition-transform duration-200 ease-in-out checked:translate-x-6 checked:bg-blue-500">
<label class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 dark:bg-gray-600 cursor-pointer"></label>
</div>
</div>
<div class="setting-row flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm">
<label class="font-bold text-sm text-gray-700 dark:text-gray-200">Show Chunks</label>
<div class="relative inline-block w-12 h-6">
<input type="checkbox"
v-model="configFile.debug_show_chunks"
@change="settingsChanged=true"
class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer
transition-transform duration-200 ease-in-out checked:translate-x-6 checked:bg-blue-500">
<label class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 dark:bg-gray-600 cursor-pointer"></label>
</div>
</div>
</div>
</div>
<!-- Auto-sync Settings -->
<div class="setting-section">
<h3 class="font-bold text-lg text-gray-800 dark:text-gray-200 mb-4">Auto-sync Settings</h3>
<div class="settings-grid grid gap-4">
<div class="setting-row flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm">
<label class="font-bold text-sm text-gray-700 dark:text-gray-200">Auto Update</label>
<div class="relative inline-block w-12 h-6">
<input type="checkbox"
v-model="configFile.auto_update"
@change="settingsChanged=true"
class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer
transition-transform duration-200 ease-in-out checked:translate-x-6 checked:bg-blue-500">
<label class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 dark:bg-gray-600 cursor-pointer"></label>
</div>
</div>
<div class="setting-row flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm">
<label class="font-bold text-sm text-gray-700 dark:text-gray-200">Auto Sync Personalities</label>
<div class="relative inline-block w-12 h-6">
<input type="checkbox"
v-model="configFile.auto_sync_personalities"
@change="settingsChanged=true"
class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer
transition-transform duration-200 ease-in-out checked:translate-x-6 checked:bg-blue-500">
<label class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 dark:bg-gray-600 cursor-pointer"></label>
</div>
</div>
<div class="setting-row flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm">
<label class="font-bold text-sm text-gray-700 dark:text-gray-200">Auto Sync Extensions</label>
<div class="relative inline-block w-12 h-6">
<input type="checkbox"
v-model="configFile.auto_sync_extensions"
@change="settingsChanged=true"
class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer
transition-transform duration-200 ease-in-out checked:translate-x-6 checked:bg-blue-500">
<label class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 dark:bg-gray-600 cursor-pointer"></label>
</div>
</div>
<div class="setting-row flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm">
<label class="font-bold text-sm text-gray-700 dark:text-gray-200">Auto Sync Bindings</label>
<div class="relative inline-block w-12 h-6">
<input type="checkbox"
v-model="configFile.auto_sync_bindings"
@change="settingsChanged=true"
class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer
transition-transform duration-200 ease-in-out checked:translate-x-6 checked:bg-blue-500">
<label class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 dark:bg-gray-600 cursor-pointer"></label>
</div>
</div>
<div class="setting-row flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm">
<label class="font-bold text-sm text-gray-700 dark:text-gray-200">Auto Sync Models</label>
<div class="relative inline-block w-12 h-6">
<input type="checkbox"
v-model="configFile.auto_sync_models"
@change="settingsChanged=true"
class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer
transition-transform duration-200 ease-in-out checked:translate-x-6 checked:bg-blue-500">
<label class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 dark:bg-gray-600 cursor-pointer"></label>
</div>
</div>
</div>
</div>
</div>
</Card>
<Card title="Model template" :is_subcard="true" class="pb-2 m-2"> <Card title="Model template" :is_subcard="true" class="pb-2 m-2">
<div class="grid gap-6 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md"> <div class="grid gap-6 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<!-- Template Selection --> <!-- Template Selection -->
@ -1130,15 +1242,18 @@
<!-- Actions Row --> <!-- Actions Row -->
<div class="flex items-center justify-between mt-4 pt-3 border-t border-gray-200 dark:border-gray-700"> <div class="flex items-center justify-between mt-4 pt-3 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center space-x-4"> <div class="flex items-center space-x-4">
<label class="flex items-center space-x-2 cursor-pointer"> <div class="setting-row flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm">
<input <label class="font-bold text-sm text-gray-700 dark:text-gray-200">Start at Startup</label>
type="checkbox" <div class="relative inline-block w-12 h-6">
:checked="getServedDatabaseStatus(index)" <input type="checkbox"
@change="updateMounted(index, $event.target.checked)" v-model="configFile.rag_local_services[index].start_at_startup"
class="w-4 h-4 text-blue-600 rounded focus:ring-blue-500" @change="settingsChanged=true"
> class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Mounted</span> transition-transform duration-200 ease-in-out checked:translate-x-6 checked:bg-blue-500">
</label> <label class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 dark:bg-gray-600 cursor-pointer"></label>
</div>
</div>
<input type="file" ref="fileInput" @change="handleFileUpload" <input type="file" ref="fileInput" @change="handleFileUpload"
accept=".pdf,.txt,.doc,.docx,.csv,.md" class="hidden" multiple /> accept=".pdf,.txt,.doc,.docx,.csv,.md" class="hidden" multiple />
@ -4441,7 +4556,7 @@ export default {
return this.configFile.rag_local_services[index].url; return this.configFile.rag_local_services[index].url;
}, },
getServedDatabaseStatus(index) { getServedDatabaseStatus(index) {
return this.configFile.rag_local_services[index].mounted || false; return this.configFile.rag_local_services[index].start_at_startup || false;
}, },
getServedDatabaseKey(index) { getServedDatabaseKey(index) {
return this.configFile.rag_local_services[index].key || ""; return this.configFile.rag_local_services[index].key || "";
@ -4495,6 +4610,10 @@ export default {
this.configFile.datalakes[index].mounted = value; this.configFile.datalakes[index].mounted = value;
this.settingsChanged = true; this.settingsChanged = true;
}, },
updateStartAtStartup(index, value) {
this.configFile.datalakes[index].start_at_startup = value;
this.settingsChanged = true;
},
addDatabaseService(){ addDatabaseService(){
if (!this.configFile.rag_local_services) { if (!this.configFile.rag_local_services) {
this.configFile.rag_local_services = []; this.configFile.rag_local_services = [];
@ -4507,7 +4626,7 @@ export default {
url: "http://localhost:9621/", url: "http://localhost:9621/",
path: "", path: "",
key: "", key: "",
mounted: false start_at_startup: false
}); });
this.settingsChanged = true; this.settingsChanged = true;
@ -4537,6 +4656,14 @@ export default {
this.settingsChanged = true; this.settingsChanged = true;
}, },
removeServedDataBase(index) {
console.log("Removing remote database")
this.configFile.rag_local_services.splice(index, 1);
console.log(this.configFile.rag_local_services)
this.settingsChanged = true;
},
fetchElevenLabsVoices() { fetchElevenLabsVoices() {
fetch('https://api.elevenlabs.io/v1/voices') fetch('https://api.elevenlabs.io/v1/voices')
.then(response => response.json()) .then(response => response.json())