ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2024-12-19 04:17:52 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

upgraded model entries

Browse Source
This commit is contained in:
AndzejsP 2023-05-19 17:33:31 +03:00
parent 3f4764c6e5
commit e7c3e1893a
2 changed files with 131 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<template>
<div class="flex items-center p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg">
<div class="flex items-center p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer" @click.stop="toggleSelected" :class="selected?' border-primary-light':'border-transparent'">
<div class="flex-shrink-0">
<i :class="`fas ${icon} text-xl`"></i>
</div>
@ -7,20 +7,27 @@
<h3 class="font-bold text-lg">
{{ title }}
</h3>
<a :href="path" title="Download this manually (faster) and put it in the models/<your backend> folder then refresh">{{ title }}</a>
<div @click.stop class="flex flex-shrink-0">
<a :href="path"
class="flex hover:text-secondary duration-75 active:scale-90"
title="Download this manually (faster) and put it in the models/<your backend> folder then refresh">
<i data-feather="link" class="w-5 p-1"></i>
{{ title }}
</a>
</div>
<p class="opacity-80">{{ description }}</p>
</div>
<div class="flex-shrink-0">
<button
class="px-4 py-2 rounded-md text-white font-bold transition-colors duration-300"
<button class="px-4 py-2 rounded-md text-white font-bold transition-colors duration-300"
:class="[isInstalled ? 'bg-red-500 hover:bg-red-600' : 'bg-green-500 hover:bg-green-600']"
:disabled="installing || uninstalling"
@click="toggleInstall"
>
:disabled="installing || uninstalling" @click.stop="toggleInstall">
<template v-if="installing">
<div class="flex items-center space-x-2">
<div class="h-2 w-20 bg-gray-300 rounded">
<div :style="{ width: progress + '%'}" class="h-full bg-red-500 rounded"></div>
<div :style="{ width: progress + '%' }" class="h-full bg-red-500 rounded"></div>
</div>
<span>Installing...{{ Math.floor(progress) }}%</span>
</div>
@ -42,7 +49,8 @@
</template>
<script>
import socket from '@/services/websocket.js'
import { nextTick } from 'vue'
import feather from 'feather-icons'
export default {
props: {
title: String,
@ -62,6 +70,13 @@ export default {
uninstalling: false
};
},
mounted() {
nextTick(() => {
feather.replace()
})
},
methods: {
toggleInstall() {
if (this.isInstalled) {
@ -74,6 +89,9 @@ export default {
}
},
toggleSelected(){
this.onSelected(this)
},
handleSelection() {
if (this.isInstalled && !this.selected) {
this.onSelected(this);

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

@ -1,7 +1,8 @@
<template>
<div class="container overflow-y-scroll flex flex-col no-scrollbar shadow-lg p-10 pt-0 ">
<!-- CONTROL PANEL -->
<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">
<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 -->
<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" type="button"
@ -23,21 +24,22 @@
@click="reset_configuration()">
<i data-feather="refresh-ccw"></i>
</button>
<button class="text-2xl hover:text-secondary duration-75 active:scale-90" title="Collapse / Expand all panels"
type="button" @click.stop="all_collapsed=!all_collapsed">
<button class="text-2xl hover:text-secondary duration-75 active:scale-90"
title="Collapse / Expand all panels" type="button" @click.stop="all_collapsed = !all_collapsed">
<i data-feather="list"></i>
</button>
</div>
<div class="m-2">
<button @click="applyConfiguration" class="bg-blue-500 text-white py-2 px-4 rounded">
Apply Configuration
</button>
<div v-if="isLoading" class="loader"></div>
</div>
<button @click="applyConfiguration" class="bg-blue-500 text-white py-2 px-4 rounded">
Apply Configuration
</button>
<div v-if="isLoading" class="loader"></div>
</div>
</div>
<!-- BACKEND -->
<div
<!-- DISABLED FOR NOW -->
<!-- <div
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 ">
<button @click.stop="bec_collapsed = !bec_collapsed"
@ -62,46 +64,59 @@
<label for="model" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
Model:
</label>
<select id="model" @change="update_model($event.target.value)" @mouseup="update_model($event.target.value)"
<select id="model" @change="update_model($event.target.value)"
@mouseup="update_model($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 modelsArr" :selected="item === configFile.model">{{ item }}</option>
</select>
</div>
</div>
</div>
</div>
</div> -->
<div
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">
<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>
<h3 class="text-lg font-semibold cursor-pointer select-none">
Models zoo</h3>
Models configuration</h3>
</button>
</div>
<div :class="{ 'hidden': mzc_collapsed }" class="flex flex-col mb-2 px-3 pb-0">
<div class="mx-2 mb-4">
<label for="backend" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
Backend:
</label>
<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">
<option v-for="item in backendsArr" :selected="item === configFile.backend">{{ item }}</option>
</select>
</div>
<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">
Install more models:
Models:
</label>
<div ref="modelZoo" class="overflow-y-auto no-scrollbar p-2 pb-0" :class="mzl_collapsed ? '':'max-h-96'">
<div ref="modelZoo" class="overflow-y-auto no-scrollbar p-2 pb-0"
:class="mzl_collapsed ? '' : 'max-h-96'">
<model-entry v-for="(model, index) in models" :key="index" :title="model.title" :icon="model.icon"
:path="model.path" :description="model.description" :is-installed="model.isInstalled"
:on-install="onInstall"
:on-uninstall="onUninstall"
:on-selected="onSelected" />
:on-install="onInstall" :on-uninstall="onUninstall" :on-selected="onSelected"
:selected="model.title === configFile.model" />
</div>
</div>
<!-- EXPAND / COLLAPSE BUTTON -->
<button v-if="mzl_collapsed" class="text-2xl hover:text-secondary duration-75 flex justify-center hover:bg-bg-light-tone hover:dark:bg-bg-dark-tone rounded-lg " title="Collapse"
type="button" @click="mzl_collapsed = !mzl_collapsed">
<i data-feather="chevron-up" ></i>
<!-- EXPAND / COLLAPSE BUTTON -->
<button v-if="mzl_collapsed"
class="text-2xl hover:text-secondary duration-75 flex justify-center hover:bg-bg-light-tone hover:dark:bg-bg-dark-tone rounded-lg "
title="Collapse" type="button" @click="mzl_collapsed = !mzl_collapsed">
<i data-feather="chevron-up"></i>
</button>
<button v-else class="text-2xl hover:text-secondary duration-75 flex justify-center hover:bg-bg-light-tone hover:dark:bg-bg-dark-tone rounded-lg " title="Expand"
type="button" @click="mzl_collapsed = !mzl_collapsed">
<i data-feather="chevron-down" ></i>
<button v-else
class="text-2xl hover:text-secondary duration-75 flex justify-center hover:bg-bg-light-tone hover:dark:bg-bg-dark-tone rounded-lg "
title="Expand" type="button" @click="mzl_collapsed = !mzl_collapsed">
<i data-feather="chevron-down"></i>
</button>
</div>
@ -139,7 +154,7 @@
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>
</select>
@ -161,10 +176,10 @@
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 ">
<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="mc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2"></i>
<h3 class="text-lg font-semibold cursor-pointer select-none">
Personalities zoo
Personalities zoo
</h3>
</button>
</div>
@ -184,7 +199,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">
<div class="flex flex-row">
<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 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="mc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2"></i>
<h3 class="text-lg font-semibold cursor-pointer select-none">
Model Configuration</h3>
@ -332,8 +347,7 @@
<YesNoDialog ref="yesNoDialog" />
<MessageBox ref="messageBox" />
<Toast ref="toast" />
<Toast ref="toast" />
</template>
<script>
@ -368,17 +382,17 @@ export default {
return {
// Models zoo installer stuff
models: [],
personalities:[],
personalities: [],
// Accordeon stuff
collapsedArr:[],
all_collapsed:true,
collapsedArr: [],
all_collapsed: true,
bec_collapsed: true,
mzc_collapsed: true, // models zoo
pzc_collapsed: true, // personalities zoo
pc_collapsed: true,
mc_collapsed: true,
// Zoo accordeoon
mzl_collapsed:false,
mzl_collapsed: false,
// Settings stuff
backendsArr: [],
modelsArr: [],
@ -394,14 +408,14 @@ export default {
}
},
created() {
this.fetchModels();
}, methods: {
collapseAll(val){
this.bec_collapsed=val
this.mzc_collapsed=val
this.pzc_collapsed=val
this.pc_collapsed=val
this.mc_collapsed=val
collapseAll(val) {
this.bec_collapsed = val
this.mzc_collapsed = val
this.pzc_collapsed = val
this.pc_collapsed = val
this.mc_collapsed = val
},
fetchModels() {
console.log("Fetching models")
@ -414,12 +428,18 @@ export default {
console.log(error);
});
},
onSelected(model_object){
onSelected(model_object) {
console.log("Selected model")
// eslint-disable-next-line no-unused-vars
this.update_setting('model', model_object.title, (res)=>{console.log("Model selected"); })
if (model_object) {
this.update_model(model_object.title)
this.configFile.model = model_object.title
}
//this.update_setting('model', model_object.title, (res)=>{console.log("Model selected"); })
},
// Model installation
onInstall(model_object) {
let path = model_object.path;
this.showProgress = true;
@ -474,7 +494,7 @@ export default {
console.error('Installation failed:', message.error);
}
};
socket.on('install_progress', progressListener);
socket.on('install_progress', progressListener);
socket.emit('uninstall_model', { path: model_object.path });
},
// messagebox ok stuff
@ -483,7 +503,7 @@ export default {
},
// Refresh stuff
refresh() {
console.log("Refreshing")
// No need to refresh all lists because they never change during using application.
// On settings change only config file chnages.
@ -494,20 +514,20 @@ export default {
this.api_get_req("list_personalities_categories").then(response => { this.persCatgArr = response })
this.api_get_req("list_personalities").then(response => { this.persArr = response })
//this.api_get_req("list_languages").then(response => { this.langArr = response })
this.api_get_req("get_config").then(response => {
this.configFile = response
this.api_get_req("get_config").then(response => {
this.configFile = response
console.log("selecting model")
this.models.forEach(model => {
console.log(`${model} -> ${response["model"]}`)
if(model.title==response["model"]){
model.selected=true;
if (model.title == response["model"]) {
model.selected = true;
}
else{
model.selected=false;
else {
model.selected = false;
}
});
});
})
this.fetchModels();
this.fetchModels();
},
// Accordeon stuff
toggleAccordion() {
@ -530,32 +550,32 @@ export default {
return res.data;
}
})
// eslint-disable-next-line no-unused-vars
.catch(error => { return { 'status': false } });
// eslint-disable-next-line no-unused-vars
.catch(error => { return { 'status': false } });
},
update_backend(value) {
console.log("Upgrading backend")
// eslint-disable-next-line no-unused-vars
this.update_setting('backend', value, (res)=>{
this.update_setting('backend', value, (res) => {
this.refresh();
console.log("Backend changed");
console.log("Backend changed");
console.log(res);
this.$refs.toast.showToast("Backend changed.",4, true)
this.$refs.toast.showToast("Backend changed.", 4, true)
})
},
update_model(value) {
console.log("Upgrading model")
// eslint-disable-next-line no-unused-vars
this.update_setting('model', value, (res)=>{console.log("Model changed"); this.fetchModels(); })
this.update_setting('model', value, (res) => { console.log("Model changed"); this.fetchModels(); })
},
applyConfiguration() {
this.isLoading = true;
axios.post('/apply_settings').then((res) => {
this.isLoading = false;
console.log(res.data)
if(res.data.status==="succeeded"){
if (res.data.status === "succeeded") {
console.log("applying configuration succeeded")
this.$refs.toast.showToast("Configuration changed successfully.",4, true)
this.$refs.toast.showToast("Configuration changed successfully.", 4, true)
}
})
},
@ -631,9 +651,9 @@ export default {
})
this.configFile = await this.api_get_req("get_config")
this.fetchModels();
this.backendsArr = await this.api_get_req("list_backends")
this.modelsArr = await this.api_get_req("list_models")
this.modelsArr = await this.api_get_req("list_models")
this.persLangArr = await this.api_get_req("list_personalities_languages")
this.persCatgArr = await this.api_get_req("list_personalities_categories")
this.persArr = await this.api_get_req("list_personalities")
@ -666,7 +686,7 @@ export default {
})
},
mzl_collapsed() {
nextTick(() => {
feather.replace()
@ -687,24 +707,26 @@ export default {
<style>
.loader {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 16px;
height: 16px;
animation: spin 2s linear infinite;
margin-left: 8px;
display: inline-block;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 16px;
height: 16px;
animation: spin 2s linear infinite;
margin-left: 8px;
display: inline-block;
}
.height-64 {
min-height: 64px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}</style>