ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2024-12-24 14:36:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

more last fixes

Browse Source
This commit is contained in:
andzejsp 2023-06-07 22:12:19 +03:00
parent 7ac36b3146
commit 8bbd026add
1 changed files with 82 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -70,22 +70,24 @@
class="flex flex-col mb-2 rounded-lg bg-bg-light-tone dark:bg-bg-dark-tone hover:bg-bg-light-tone-panel hover:dark:bg-bg-dark-tone-panel duration-150 shadow-lg"> class="flex flex-col mb-2 rounded-lg bg-bg-light-tone dark:bg-bg-dark-tone hover:bg-bg-light-tone-panel hover:dark:bg-bg-dark-tone-panel duration-150 shadow-lg">
<div class="flex flex-row p-3"> <div class="flex flex-row p-3">
<button @click.stop="sc_collapsed = !sc_collapsed" <button @click.stop="sc_collapsed = !sc_collapsed"
class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1 flex flex-row items-center"> class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1 flex flex-row items-center ">
<i data-feather="chevron-right" class="mr-2"></i> <i data-feather="chevron-right" class="mr-2 flex-shrink-0"></i>
<h3 class="text-lg font-semibold cursor-pointer select-none mr-2"> <h3 class="text-lg font-semibold cursor-pointer select-none mr-2">
System status</h3> System status</h3>
<div class="mr-2">|</div> <div class="mr-2">|</div>
<div <div class=" text-base font-semibold cursor-pointer select-none items-center">
class=" text-base font-semibold cursor-pointer select-none items-center">
<div class="flex gap-2 items-center"> <div class="flex gap-2 items-center ">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M17 17H7V7h10m4 4V9h-2V7a2 2 0 0 0-2-2h-2V3h-2v2h-2V3H9v2H7c-1.11 0-2 .89-2 2v2H3v2h2v2H3v2h2v2a2 2 0 0 0 2 2h2v2h2v-2h2v2h2v-2h2a2 2 0 0 0 2-2v-2h2v-2h-2v-2m-6 2h-2v-2h2m2-2H9v6h6V9Z"/></svg> <svg class="flex-shrink-0" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="currentColor"
d="M17 17H7V7h10m4 4V9h-2V7a2 2 0 0 0-2-2h-2V3h-2v2h-2V3H9v2H7c-1.11 0-2 .89-2 2v2H3v2h2v2H3v2h2v2a2 2 0 0 0 2 2h2v2h2v-2h2v2h2v-2h2a2 2 0 0 0 2-2v-2h2v-2h-2v-2m-6 2h-2v-2h2m2-2H9v6h6V9Z" />
</svg>
<h3 class="font-bold font-large text-lg"> <h3 class="font-bold font-large text-lg">
<div>{{ ram_usage }} / {{ ram_total_space }}</div> <div>{{ ram_usage }} / {{ ram_total_space }}</div>
</h3> </h3>
<i data-feather="hard-drive" class="w-5 h-5 mx-1"></i> <i data-feather="hard-drive" class="w-5 h-5 mx-1 flex-shrink-0"></i>
<h3 class="font-bold font-large text-lg"> <h3 class="font-bold font-large text-lg">
<div> {{ disk_binding_models_usage }} / {{ disk_total_space }}</div> <div> {{ disk_binding_models_usage }} / {{ disk_total_space }}</div>
</h3> </h3>
@ -97,8 +99,12 @@
<div class="mb-2"> <div class="mb-2">
<label for="disk" class=" flex items-center gap-1 ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white"> <label for="disk"
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M17 17H7V7h10m4 4V9h-2V7a2 2 0 0 0-2-2h-2V3h-2v2h-2V3H9v2H7c-1.11 0-2 .89-2 2v2H3v2h2v2H3v2h2v2a2 2 0 0 0 2 2h2v2h2v-2h2v2h2v-2h2a2 2 0 0 0 2-2v-2h2v-2h-2v-2m-6 2h-2v-2h2m2-2H9v6h6V9Z"/></svg> class=" flex items-center gap-1 ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="currentColor"
d="M17 17H7V7h10m4 4V9h-2V7a2 2 0 0 0-2-2h-2V3h-2v2h-2V3H9v2H7c-1.11 0-2 .89-2 2v2H3v2h2v2H3v2h2v2a2 2 0 0 0 2 2h2v2h2v-2h2v2h2v-2h2a2 2 0 0 0 2-2v-2h2v-2h-2v-2m-6 2h-2v-2h2m2-2H9v6h6V9Z" />
</svg>
Ram usage: Ram usage:
</label> </label>
<div class="flex flex-col mx-2"> <div class="flex flex-col mx-2">
@ -107,13 +113,15 @@
</div> </div>
<div class="p-2 "> <div class="p-2 ">
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700"> <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
<div class="bg-blue-600 h-2.5 rounded-full" :style="'width: ' + ram_percent_usage + '%;'"></div> <div class="bg-blue-600 h-2.5 rounded-full" :style="'width: ' + ram_percent_usage + '%;'">
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="mb-2"> <div class="mb-2">
<label for="disk" class="flex items-center gap-1 ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white"> <label for="disk"
class="flex items-center gap-1 ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
<i data-feather="hard-drive" class="w-5 h-5"></i> <i data-feather="hard-drive" class="w-5 h-5"></i>
Disk usage: Disk usage:
</label> </label>
@ -123,7 +131,8 @@
</div> </div>
<div class="p-2 "> <div class="p-2 ">
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700"> <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
<div class="bg-blue-600 h-2.5 rounded-full" :style="'width: ' + disk_percent_usage + '%;'"></div> <div class="bg-blue-600 h-2.5 rounded-full" :style="'width: ' + disk_percent_usage + '%;'">
</div>
</div> </div>
</div> </div>
@ -140,7 +149,7 @@
<div class="flex flex-row p-3"> <div class="flex flex-row p-3">
<button @click.stop="bzc_collapsed = !bzc_collapsed" <button @click.stop="bzc_collapsed = !bzc_collapsed"
class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1 flex flex-row items-center"> class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1 flex flex-row items-center">
<i data-feather="chevron-right" class="mr-2"></i> <i data-feather="chevron-right" class="mr-2 flex-shrink-0"></i>
<h3 class="text-lg font-semibold cursor-pointer select-none mr-2"> <h3 class="text-lg font-semibold cursor-pointer select-none mr-2">
Binding zoo</h3> Binding zoo</h3>
@ -151,7 +160,7 @@
<div class="flex gap-1 items-center"> <div class="flex gap-1 items-center">
<img :src="imgBinding" class="w-8 h-8 rounded-full object-fill text-blue-700"> <img :src="imgBinding" class="w-8 h-8 rounded-full object-fill text-blue-700">
<h3 class="font-bold font-large text-lg"> <h3 class="font-bold font-large text-lg line-clamp-1">
{{ configFile.binding_name }} {{ configFile.binding_name }}
</h3> </h3>
</div> </div>
@ -159,25 +168,12 @@
</button> </button>
</div> </div>
<div :class="{ 'hidden': bzc_collapsed }" class="flex flex-col mb-2 px-3 pb-0"> <div :class="{ 'hidden': bzc_collapsed }" class="flex flex-col mb-2 px-3 pb-0">
<!-- <div class="mx-2 mb-4">
<label for="binding" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
Bindings: ({{ bindingsArr.length }})
</label>
<select id="binding" @change="update_binding($event.target.value)"
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">
<option v-for="item in bindingsArr" :selected="item.folder === configFile.binding_name"
:value="item.folder">
{{ item.name }} by ({{ item.author }})
</option>
</select>
</div> -->
<div v-if="bindings.length > 0" class="mb-2"> <div v-if="bindings.length > 0" class="mb-2">
<label for="binding" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white"> <label for="binding" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
Bindings: ({{ bindings.length }}) Bindings: ({{ bindings.length }})
</label> </label>
<div <div class="overflow-y-auto no-scrollbar p-2 pb-0 grid lg:grid-cols-3 md:grid-cols-2 gap-4"
class="overflow-y-auto no-scrollbar p-2 pb-0 grid lg:grid-cols-3 md:grid-cols-2 gap-4"
:class="bzl_collapsed ? '' : 'max-h-96'"> :class="bzl_collapsed ? '' : 'max-h-96'">
<TransitionGroup name="list"> <TransitionGroup name="list">
<BindingEntry ref="bindingZoo" v-for="(binding, index) in bindings" <BindingEntry ref="bindingZoo" v-for="(binding, index) in bindings"
@ -210,12 +206,12 @@
<div class="flex flex-row p-3"> <div class="flex flex-row p-3">
<button @click.stop="mzc_collapsed = !mzc_collapsed" <button @click.stop="mzc_collapsed = !mzc_collapsed"
class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1 flex items-center"> class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1 flex items-center">
<i :data-feather="mzc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2"></i> <i :data-feather="mzc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2 flex-shrink-0"></i>
<h3 class="text-lg font-semibold cursor-pointer select-none mr-2"> <h3 class="text-lg font-semibold cursor-pointer select-none mr-2">
Models zoo</h3> Models zoo</h3>
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<div v-if="!isModelSelected" class="text-base text-red-600 flex gap-3 items-center mr-2"> <div v-if="!isModelSelected" class="text-base text-red-600 flex gap-3 items-center mr-2">
<i data-feather="alert-triangle"></i> <i data-feather="alert-triangle" class="flex-shrink-0"></i>
No model selected! No model selected!
</div> </div>
@ -226,7 +222,7 @@
<div class="flex gap-1 items-center"> <div class="flex gap-1 items-center">
<img :src="imgModel" class="w-8 h-8 rounded-lg object-fill"> <img :src="imgModel" class="w-8 h-8 rounded-lg object-fill">
<h3 class="font-bold font-large text-lg"> <h3 class="font-bold font-large text-lg line-clamp-1">
{{ configFile.model_name }} {{ configFile.model_name }}
</h3> </h3>
</div> </div>
@ -237,22 +233,7 @@
</button> </button>
</div> </div>
<div :class="{ 'hidden': mzc_collapsed }" class="flex flex-col mb-2 px-3 pb-0"> <div :class="{ 'hidden': mzc_collapsed }" class="flex flex-col mb-2 px-3 pb-0">
<!-- <div class="mb-2">
<label for="disk" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
Disk usage:
</label>
<div class="flex flex-col mx-2">
<div><b>Current binding models folder:&nbsp;</b>{{ disk_binding_models_usage }}</div>
<div><b>Avaliable space:&nbsp;</b> {{ disk_available_space }} / {{ disk_total_space }}</div>
</div>
<div class="p-2 ">
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
<div class="bg-blue-600 h-2.5 rounded-full" :style="'width: ' + disk_percent_usage + '%;'"></div>
</div>
</div>
</div> -->
<div v-if="models.length > 0" class="mb-2"> <div v-if="models.length > 0" class="mb-2">
<label for="model" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white"> <label for="model" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
Models: ({{ models.length }}) Models: ({{ models.length }})
@ -265,8 +246,8 @@
:path="model.path" :owner="model.owner" :owner_link="model.owner_link" :path="model.path" :owner="model.owner" :owner_link="model.owner_link"
:license="model.license" :description="model.description" :license="model.license" :description="model.description"
:is-installed="model.isInstalled" :on-install="onInstall" :on-uninstall="onUninstall" :is-installed="model.isInstalled" :on-install="onInstall" :on-uninstall="onUninstall"
:on-selected="onSelected" :selected="model.title === configFile.model_name" :model="model" :on-selected="onSelected" :selected="model.title === configFile.model_name"
:model_type="model.model_type" /> :model="model" :model_type="model.model_type" />
</TransitionGroup> </TransitionGroup>
</div> </div>
</div> </div>
@ -293,7 +274,7 @@
<div class="flex flex-row p-3"> <div class="flex flex-row p-3">
<button @click.stop="pzc_collapsed = !pzc_collapsed" <button @click.stop="pzc_collapsed = !pzc_collapsed"
class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1 flex items-center"> class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1 flex items-center">
<i :data-feather="pzc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2"></i> <i :data-feather="pzc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2 flex-shrink-0"></i>
<h3 class="text-lg font-semibold cursor-pointer select-none mr-2"> <h3 class="text-lg font-semibold cursor-pointer select-none mr-2">
Personalities zoo</h3> Personalities zoo</h3>
<div v-if="configFile.personalities" class="mr-2">|</div> <div v-if="configFile.personalities" class="mr-2">|</div>
@ -303,7 +284,7 @@
<div class="flex gap-1 items-center"> <div class="flex gap-1 items-center">
<img :src="imgPersonality" class="w-8 h-8 rounded-full object-fill text-red-700"> <img :src="imgPersonality" class="w-8 h-8 rounded-full object-fill text-red-700">
<h3 class="font-bold font-large text-lg"> <h3 class="font-bold font-large text-lg line-clamp-1" >
{{ this.configFile.personality_folder }} {{ this.configFile.personality_folder }}
</h3> </h3>
</div> </div>
@ -319,7 +300,8 @@
<select id="persLang" @change="update_setting('personality_language', $event.target.value, refresh)" <select id="persLang" @change="update_setting('personality_language', $event.target.value, refresh)"
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"> 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">
<option v-for="item in persLangArr" :selected="item === this.configFile.personality_language">{{ item <option v-for="item in persLangArr" :selected="item === this.configFile.personality_language">{{
item
}} }}
</option> </option>
@ -333,7 +315,8 @@
<select id="persCat" @change="update_setting('personality_category', $event.target.value, refresh)" <select id="persCat" @change="update_setting('personality_category', $event.target.value, refresh)"
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"> 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">
<option v-for="item in persCatgArr" :selected="item === this.configFile.personality_category">{{ item <option v-for="item in persCatgArr" :selected="item === this.configFile.personality_category">{{
item
}} }}
</option> </option>
@ -357,8 +340,7 @@
<label for="model" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white"> <label for="model" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
Personalities: ({{ personalitiesFiltered.length }}) Personalities: ({{ personalitiesFiltered.length }})
</label> </label>
<div <div class="overflow-y-auto no-scrollbar p-2 pb-0 grid lg:grid-cols-3 md:grid-cols-2 gap-4"
class="overflow-y-auto no-scrollbar p-2 pb-0 grid lg:grid-cols-3 md:grid-cols-2 gap-4"
:class="pzl_collapsed ? '' : 'max-h-96'"> :class="pzl_collapsed ? '' : 'max-h-96'">
<TransitionGroup name="bounce"> <TransitionGroup name="bounce">
<personality-entry ref="personalitiesZoo" v-for="(pers, index) in personalitiesFiltered" <personality-entry ref="personalitiesZoo" v-for="(pers, index) in personalitiesFiltered"
@ -685,6 +667,7 @@ export default {
this.bzc_collapsed = val this.bzc_collapsed = val
this.pc_collapsed = val this.pc_collapsed = val
this.mc_collapsed = val this.mc_collapsed = val
this.sc_collapsed = val
}, },
fetchModels() { fetchModels() {
@ -737,7 +720,7 @@ export default {
this.settingsChanged = true this.settingsChanged = true
const res = this.update_setting('personality_folder', pers.personality.folder, () => { const res = this.update_setting('personality_folder', pers.personality.folder, () => {
this.$refs.toast.showToast("Selected personality:\n" + pers.personality.name, 4, true) this.$refs.toast.showToast("Selected personality:\n" + pers.personality.name, 4, true)
this.configFile.personalities[configFile.default_personality_id] = pers.personality.language+"/"+ pers.personality.category +"/" + pers.personality.name this.configFile.personalities[configFile.default_personality_id] = pers.personality.language + "/" + pers.personality.category + "/" + pers.personality.name
}) })
} }
nextTick(() => { nextTick(() => {
@ -933,8 +916,8 @@ export default {
this.getPersonalitiesArr() this.getPersonalitiesArr()
this.fetchModels(); this.fetchModels();
}, },
extract_personality_parameters(){ extract_personality_parameters() {
try{ try {
let parts = this.configFile.personalities[this.configFile.default_personality_id].split('/') let parts = this.configFile.personalities[this.configFile.default_personality_id].split('/')
this.configFile.personality_language = parts[0] this.configFile.personality_language = parts[0]
this.configFile.personality_category = parts[1] this.configFile.personality_category = parts[1]
@ -944,7 +927,7 @@ export default {
// console.log(`p cat = ${this.configFile.personality_category }`) // console.log(`p cat = ${this.configFile.personality_category }`)
// console.log(`p name = ${this.configFile.personality_folder }`) // console.log(`p name = ${this.configFile.personality_folder }`)
}catch(error){ } catch (error) {
console.log(`Exception : ${error}`) console.log(`Exception : ${error}`)
} }
@ -1174,7 +1157,7 @@ export default {
this.isLoading = false this.isLoading = false
this.diskUsage = await this.api_get_req("disk_usage") this.diskUsage = await this.api_get_req("disk_usage")
this.ramUsage = await this.api_get_req("ram_usage") this.ramUsage = await this.api_get_req("ram_usage")
console.log('ran',this.ramUsage) console.log('ran', this.ramUsage)
this.isMounted = true this.isMounted = true
}, },
@ -1209,10 +1192,10 @@ export default {
if (!this.isMounted) { if (!this.isMounted) {
return return
} }
try{ try {
return this.$refs.bindingZoo[this.$refs.bindingZoo.findIndex(item => item.binding.folder == this.configFile.binding_name)].$refs.imgElement.src return this.$refs.bindingZoo[this.$refs.bindingZoo.findIndex(item => item.binding.folder == this.configFile.binding_name)].$refs.imgElement.src
} }
catch(error){ catch (error) {
return defaultImgPlaceholder return defaultImgPlaceholder
} }
}, },
@ -1222,10 +1205,10 @@ export default {
} }
// console.log("Config file") // console.log("Config file")
// console.log(this.configFile) // console.log(this.configFile)
try{ try {
return this.$refs.modelZoo[this.$refs.modelZoo.findIndex(item => item.title == this.configFile.model_name)].$refs.imgElement.src return this.$refs.modelZoo[this.$refs.modelZoo.findIndex(item => item.title == this.configFile.model_name)].$refs.imgElement.src
} }
catch(error){ catch (error) {
return defaultModelImgPlaceholder return defaultModelImgPlaceholder
} }
}, },
@ -1233,10 +1216,10 @@ export default {
if (!this.isMounted) { if (!this.isMounted) {
return return
} }
try{ try {
return this.$refs.personalitiesZoo[this.$refs.personalitiesZoo.findIndex(item => item.personality.folder == this.configFile.personality_folder)].$refs.imgElement.src return this.$refs.personalitiesZoo[this.$refs.personalitiesZoo.findIndex(item => item.personality.folder == this.configFile.personality_folder)].$refs.imgElement.src
} }
catch(error){ catch (error) {
return defaultPersonalityImgPlaceholder return defaultPersonalityImgPlaceholder
} }
}, },
@ -1261,6 +1244,12 @@ export default {
}) })
}, },
sc_collapsed() {
nextTick(() => {
feather.replace()
})
},
showConfirmation() { showConfirmation() {
nextTick(() => { nextTick(() => {
feather.replace() feather.replace()