mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2024-12-19 04:17:52 +00:00
upgraded model entries
This commit is contained in:
AndzejsP
parent
3f4764c6e5
commit
e7c3e1893a
@ -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);
|
||||
|
||||
@ -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,8 +24,8 @@
|
||||
@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>
|
||||
@ -37,7 +38,8 @@
|
||||
|
||||
</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,7 +64,8 @@
|
||||
<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>
|
||||
@ -70,7 +73,7 @@
|
||||
</select>
|
||||
</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">
|
||||
@ -78,30 +81,42 @@
|
||||
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>
|
||||
<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>
|
||||
|
||||
@ -333,7 +348,6 @@
|
||||
<YesNoDialog ref="yesNoDialog" />
|
||||
<MessageBox ref="messageBox" />
|
||||
<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;
|
||||
@ -499,11 +519,11 @@ export default {
|
||||
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;
|
||||
}
|
||||
});
|
||||
})
|
||||
@ -536,26 +556,26 @@ export default {
|
||||
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(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,7 +651,7 @@ 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.persLangArr = await this.api_get_req("list_personalities_languages")
|
||||
@ -696,15 +716,17 @@ export default {
|
||||
margin-left: 8px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.height-64 {
|
||||
min-height: 64px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
}</style>
|
||||
Loading…
Reference in New Issue
Block a user