ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2025-06-22 16:58:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

restyled model entry

Browse Source
This commit is contained in:
AndzejsP
2023-05-11 13:07:49 +03:00
parent f6ece2a0f1
commit bc3f98fb50
2 changed files with 61 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/components/ModelEntry.vue
View File

@ -1,11 +1,14 @@
<template> <template>
<div class="flex items-center space-x-4 py-4"> <div class="flex items-center p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<i :class="`fas ${icon} text-xl`"></i> <i :class="`fas ${icon} text-xl`"></i>
</div> </div>
<div class="flex-1"> <div class="flex-1">
<h3 class="font-bold text-lg">{{ title }}</h3> <h3 class="font-bold text-lg">{{ title }}</h3>
<p class="text-gray-600">{{ description }}</p> <p class="opacity-80">{{ description }}</p>
</div> </div>
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<button <button
@ -16,6 +19,7 @@
{{ isInstalled ? 'Uninstall' : 'Install' }} {{ isInstalled ? 'Uninstall' : 'Install' }}
</button> </button>
</div> </div>
</div> </div>
</template> </template>

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

@ -1,11 +1,11 @@
<template> <template>
<div class="container overflow-y-scroll flex flex-col no-scrollbar shadow-lg p-1 pt-0 "> <div class="container overflow-y-scroll flex flex-col no-scrollbar shadow-lg p-10 pt-0 ">
<!-- CONTROL PANEL --> <!-- CONTROL PANEL -->
<div class="flex flex-row mb-2 p-3 gap-3 w-full rounded-b-lg bg-bg-light-tone dark:bg-bg-dark-tone shadow-lg"> <div class="sticky top-0 z-10 flex flex-row mb-2 p-3 gap-3 w-full rounded-b-lg bg-bg-light-tone dark:bg-bg-dark-tone shadow-lg">
<!-- SAVE CONFIG --> <!-- SAVE CONFIG -->
<div v-if="showConfirmation" class="flex gap-3 flex-1 items-center duration-75"> <div v-if="showConfirmation" class="flex gap-3 flex-1 items-center duration-75">
<button class="text-2xl hover:text-red-600 duration-75 active:scale-90 " title="Cancel" <button class="text-2xl hover:text-red-600 duration-75 active:scale-90 " title="Cancel" type="button"
type="button" @click.stop="showConfirmation = false"> @click.stop="showConfirmation = false">
<i data-feather="x"></i> <i data-feather="x"></i>
</button> </button>
<button class="text-2xl hover:text-secondary duration-75 active:scale-90" title="Confirm save changes" <button class="text-2xl hover:text-secondary duration-75 active:scale-90" title="Confirm save changes"
@ -17,7 +17,7 @@
<!-- SAVE AND RESET --> <!-- SAVE AND RESET -->
<div v-if="!showConfirmation" class="flex gap-3 flex-1 items-center "> <div v-if="!showConfirmation" class="flex gap-3 flex-1 items-center ">
<button title="Save configuration" class="text-2xl hover:text-secondary duration-75 active:scale-90" <button title="Save configuration" class="text-2xl hover:text-secondary duration-75 active:scale-90"
@click="showConfirmation=true"> @click="showConfirmation = true">
<i data-feather="save"></i> <i data-feather="save"></i>
</button> </button>
<button title="Reset configuration" class="text-2xl hover:text-secondary duration-75 active:scale-90" <button title="Reset configuration" class="text-2xl hover:text-secondary duration-75 active:scale-90"
@ -48,7 +48,7 @@
<select id="backend" @change="update_backend($event.target.value)" <select id="backend" @change="update_backend($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"> 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 backendsArr" :selected="item===configFile.backend">{{ item }}</option> <option v-for="item in backendsArr" :selected="item === configFile.backend">{{ item }}</option>
</select> </select>
</div> </div>
@ -59,21 +59,19 @@
<select id="model" <select id="model"
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 modelsArr" :selected="item===configFile.model">{{ item }}</option> <option v-for="item in modelsArr" :selected="item === configFile.model">{{ item }}</option>
</select> </select>
</div> </div>
<div class="space-y-4"> <div v-if="models.length > 0" class="my-2">
<model-entry <label for="model" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
v-for="(model, index) in models" Install more models:
:key="index" </label>
:title="model.title" <div class="overflow-y-auto max-h-96 no-scrollbar p-2">
:icon="model.icon" <model-entry v-for="(model, index) in models" :key="index" :title="model.title" :icon="model.icon"
:path="model.path" :path="model.path" :description="model.description" :is-installed="model.isInstalled"
:description="model.description" :on-toggle-install="toggleInstall" />
:is-installed="model.isInstalled" </div>
:on-toggle-install="toggleInstall"
/>
</div> </div>
</div> </div>
</div> </div>
@ -83,7 +81,7 @@
class="flex flex-col mb-2 p-3 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 p-3 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"> <div class="flex flex-row">
<button @click.stop="pc_collapsed = !pc_collapsed" <button @click.stop="pc_collapsed = !pc_collapsed"
class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1"> class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1">
<!-- <i data-feather="chevron-right"></i> --> <!-- <i data-feather="chevron-right"></i> -->
@ -99,7 +97,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===configFile.personality_language">{{ item }}</option> <option v-for="item in persLangArr" :selected="item === configFile.personality_language">{{ item }}
</option>
</select> </select>
</div> </div>
@ -110,7 +109,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===configFile.personality_category">{{ item }}</option> <option v-for="item in persCatgArr" :selected="item === configFile.personality_category">{{ item }}
</option>
</select> </select>
</div> </div>
@ -121,7 +121,7 @@
<select id="persona" @change="update_setting('personality', $event.target.value, refresh)" <select id="persona" @change="update_setting('personality', $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 persArr" :selected="item===configFile.personality">{{ item }}</option> <option v-for="item in persArr" :selected="item === configFile.personality">{{ item }}</option>
</select> </select>
</div> </div>
@ -133,7 +133,7 @@
class="flex flex-col mb-2 p-3 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 p-3 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"> <div class="flex flex-row">
<button @click.stop="mc_collapsed = !mc_collapsed" <button @click.stop="mc_collapsed = !mc_collapsed"
class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1"> class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1">
<!-- <i data-feather="chevron-right"></i> --> <!-- <i data-feather="chevron-right"></i> -->
<h3 class="text-lg font-semibold cursor-pointer select-none " <h3 class="text-lg font-semibold cursor-pointer select-none "
@ -323,7 +323,7 @@ export default {
persArr: [], persArr: [],
langArr: [], langArr: [],
configFile: {}, configFile: {},
showConfirmation:false showConfirmation: false
} }
}, },
@ -331,27 +331,27 @@ export default {
this.fetchModels(); this.fetchModels();
}, methods: { }, methods: {
fetchModels() { fetchModels() {
axios.get('/get_available_models') axios.get('/get_available_models')
.then(response => { .then(response => {
this.models = response.data; this.models = response.data;
}) })
.catch(error => { .catch(error => {
console.log(error); console.log(error);
}); });
}, },
// Model installation // Model installation
toggleInstall(isInstalled, path) { toggleInstall(isInstalled, path) {
const endpoint = isInstalled ? '/uninstall_model' : '/install_model'; const endpoint = isInstalled ? '/uninstall_model' : '/install_model';
axios.post(endpoint, { path }) axios.post(endpoint, { path })
.then((response) => { .then((response) => {
console.log(response.data.status); console.log(response.data.status);
// Update the isInstalled property of the corresponding model // Update the isInstalled property of the corresponding model
const index = this.models.findIndex((model) => model.path === path); const index = this.models.findIndex((model) => model.path === path);
this.$set(this.models[index], 'isInstalled', isInstalled); this.$set(this.models[index], 'isInstalled', isInstalled);
}) })
.catch((error) => { .catch((error) => {
console.error(error); console.error(error);
}); });
}, },
// messagebox ok stuff // messagebox ok stuff
onMessageBoxOk() { onMessageBoxOk() {
@ -375,23 +375,23 @@ export default {
this.showAccordion = !this.showAccordion; this.showAccordion = !this.showAccordion;
}, },
update_setting(setting_name_val, setting_value_val, next) { update_setting(setting_name_val, setting_value_val, next) {
const obj = { const obj = {
setting_name: setting_name_val, setting_name: setting_name_val,
setting_value: setting_value_val setting_value: setting_value_val
} }
console.log("change",setting_name_val,setting_value_val,obj) console.log("change", setting_name_val, setting_value_val, obj)
axios.post('/update_setting', obj).then((res) => { axios.post('/update_setting', obj).then((res) => {
if (res) { if (res) {
if (next !== undefined) { if (next !== undefined) {
next() next()
}
return res.data;
} }
}) return res.data;
}
})
.catch(error => { return { 'status': false } }); .catch(error => { return { 'status': false } });
}, },
save_configuration() { save_configuration() {
this.showConfirmation=false this.showConfirmation = false
axios.post('/save_settings', {}) axios.post('/save_settings', {})
.then((res) => { .then((res) => {
if (res) { if (res) {
@ -472,7 +472,7 @@ export default {
this.persCatgArr = await this.api_get_req("list_personalities_categories") this.persCatgArr = await this.api_get_req("list_personalities_categories")
this.persArr = await this.api_get_req("list_personalities") this.persArr = await this.api_get_req("list_personalities")
this.langArr = await this.api_get_req("list_languages") this.langArr = await this.api_get_req("list_languages")
}, },
watch: { watch: {
bec_collapsed() { bec_collapsed() {
@ -493,7 +493,7 @@ export default {
}) })
}, },
showConfirmation(){ showConfirmation() {
nextTick(() => { nextTick(() => {
feather.replace() feather.replace()