ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2025-04-09 03:44:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

upgrtaded ui

Browse Source
This commit is contained in:
Saifeddine ALOUI 2024-06-29 20:39:11 +02:00
parent d7328445b4
commit 7824c4dd45
7 changed files with 234 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lollms_webui.py
View File

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

356
web/dist/assets/index-b04aad39.js → web/dist/assets/index-01362090.js vendored
View File

File diff suppressed because one or more lines are too long

2
web/dist/assets/index-8f8335b4.css → web/dist/assets/index-b98243ba.css vendored
View File

File diff suppressed because one or more lines are too long

4
web/dist/index.html vendored
View File

@ -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-b04aad39.js"></script>
<link rel="stylesheet" href="/assets/index-8f8335b4.css">
<script type="module" crossorigin src="/assets/index-01362090.js"></script>
<link rel="stylesheet" href="/assets/index-b98243ba.css">
</head>
<body>
<div id="app"></div>

18
web/src/components/ChatBox.vue
View File

@ -130,8 +130,8 @@
</div>
<div class="w-fit group relative" v-if="!loading" >
<div class= "hide top-50 hide opacity-0 group-hover:bottom-0 opacity-0 .group-hover:block fixed w-[1000px] group absolute group-hover:opacity-100 transform group-hover:translate-y-[-50px] group-hover:translate-x-[0px] transition-all duration-300">
<div class="w-fit flex-wrap flex">
<div class="w-fit h-fit "
<div class="w-fit flex-wrap flex bg-white bg-opacity-50 backdrop-blur-md rounded p-4">
<div class="w-fit h-fit inset-0 opacity-100"
v-for="(item, index) in installedBindings" :key="index + '-' + item.name"
ref="installedBindings"
@mouseover="showBindingHoveredIn(index)" @mouseleave="showBindingHoveredOut()"
@ -154,7 +154,7 @@
<div class="group items-center flex flex-row">
<button @click.prevent="showModelConfig()" class="w-8 h-8">
<img :src="currentBindingIcon"
class="w-8 h-8 rounded-full object-fill text-red-700 border-2 active:scale-90 hover:border-secondary "
class="w-8 h-8 rounded-full object-fill text-red-700 border-2 active:scale-90 hover:border-secondary hover:scale-110 hover:-translate-y-1 duration-200"
:title="currentBinding?currentBinding.name:'unknown'">
</button>
</div>
@ -162,8 +162,8 @@
</div>
<div class="w-fit group relative" v-if="!loading" >
<div class= "hide top-50 hide opacity-0 group-hover:bottom-0 opacity-0 .group-hover:block fixed w-[1000px] group absolute group-hover:opacity-100 transform group-hover:translate-y-[-50px] group-hover:translate-x-[0px] transition-all duration-300">
<div class="w-fit flex-wrap flex">
<div class="w-fit h-fit "
<div class="w-fit flex-wrap flex bg-white bg-opacity-50 backdrop-blur-md rounded p-4">
<div class="w-fit h-fit"
v-for="(item, index) in installedModels" :key="index + '-' + item.name"
ref="installedModels"
@mouseover="showModelHoveredIn(index)" @mouseleave="showModelHoveredOut()"
@ -186,7 +186,7 @@
<div class="group items-center flex flex-row">
<button @click.prevent="showModelConfig()" class="w-8 h-8">
<img :src="currentModelIcon"
class="w-8 h-8 rounded-full object-fill text-red-700 border-2 active:scale-90 hover:border-secondary "
class="w-8 h-8 rounded-full object-fill text-red-700 border-2 active:scale-90 hover:border-secondary hover:scale-110 hover:-translate-y-1 duration-400"
:title="currentModel?currentModel.name:'unknown'">
</button>
</div>
@ -194,9 +194,9 @@
</div>
<div class="w-fit group relative" v-if="!loading">
<!-- :onShowPersList="onShowPersListFun" -->
<div class= "top-50 hide opacity-0 group-hover:bottom-0 .group-hover:block fixed w-[1000px] group absolute group-hover:opacity-100 transform group-hover:translate-y-[-60px] group-hover:translate-x-[0px] transition-all duration-300">
<div class="w-fit flex-wrap flex">
<div class="w-fit h-fit "
<div class= "top-50 hide opacity-0 group-hover:bottom-0 .group-hover:block fixed w-[1000px] group absolute group-hover:opacity-100 transform group-hover:translate-y-[-50px] group-hover:translate-x-[0px] transition-all duration-300">
<div class="w-fit flex-wrap flex bg-white bg-opacity-50 backdrop-blur-md rounded p-4">
<div class="w-fit h-fit inset-0 opacity-100"
v-for="(item, index) in mountedPersonalities" :key="index + '-' + item.name"
ref="mountedPersonalities"
@mouseover="showPersonalityHoveredIn(index)" @mouseleave="showPersonalityHoveredOut()"

46
web/src/components/TopBar.vue
View File

@ -104,23 +104,22 @@
<img class="w-5 h-5" :src="normal_mode">
</div>
<div class="language-selector relative" style="position: relative;">
<div class="language-selector relative" style="position: relative;">
<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) }}
{{ $store.state.language.slice(0, 2) }}
</button>
<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">
<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>
<div v-if="isLanguageMenuVisible" ref="languageMenu" 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;">
<li v-for="language in languages" :key="language" class="relative flex items-center" style="padding-left: 0; margin-left: 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">
</li>
</ul>
</div>
</div>
@ -337,8 +336,12 @@ export default {
feather.replace()
})
window.addEventListener('resize', this.adjustMenuPosition);
},
beforeUnmount() {
window.removeEventListener('resize', this.adjustMenuPosition);
},
created() {
this.sunIcon = document.querySelector(".sun");
this.moonIcon = document.querySelector(".moon");
@ -347,6 +350,19 @@ export default {
},
methods: {
adjustMenuPosition() {
const menu = this.$refs.languageMenu;
const rect = menu.getBoundingClientRect();
const windowWidth = window.innerWidth;
if (rect.right > windowWidth) {
menu.style.left = 'auto';
menu.style.right = '0';
} else {
menu.style.left = '0';
menu.style.right = 'auto';
}
},
addCustomLanguage() {
if (this.customLanguage.trim() !== '') {
this.selectLanguage(this.customLanguage);

12
web/src/views/SettingsView.vue
View File

@ -1143,6 +1143,18 @@
>
</td>
</tr>
<tr>
<td style="min-width: 200px;">
<label for="rag_activate_multi_hops" class="text-sm font-bold" style="margin-right: 1rem;">Activate multi hops RAG:</label>
</td>
<td>
<input v-model="configFile.rag_activate_multi_hops"
type="checkbox"
@change="settingsChanged=true"
class="w-5 mt-1 px-2 py-1 border border-gray-300 rounded dark:bg-gray-600"
>
</td>
</tr>
</table>
</Card>