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

enhanced ui

Browse Source
This commit is contained in:
Saifeddine ALOUI 2023-10-24 01:40:39 +02:00
parent 75cfdde4e3
commit de9a898feb
21 changed files with 524 additions and 669 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
api/__init__.py
View File

@ -1324,7 +1324,7 @@ class LoLLMsAPPI(LollmsApplication):
):
self.connections[client_id]["current_discussion"].current_message.finished_generating_at=datetime.now().strftime('%Y-%m-%d %H:%M:%S')
mtdt = json.dumps(metadata, indent=4) if metadata is not None and type(metadata)== list else metadata
if self.nb_received_tokens==1 and msg_type==MSG_TYPE.MSG_TYPE_CHUNK:
if self.nb_received_tokens==1:
self.socketio.emit('update_message', {
"sender": self.personality.name,
'id':self.connections[client_id]["current_discussion"].current_message.id,

2
lollms_core

@ -1 +1 @@
Subproject commit 3d09422c9c64007da92019e86a1f0fc250c7059b
Subproject commit badd6b440a0b6bad311d4276fe5954bff4663715

BIN
web/dist/assets/default_model-9e24e852.png vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 245 KiB

BIN
web/dist/assets/default_model-eeb65acd.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 219 KiB

132
web/dist/assets/gpu-df72bf63.svg vendored Normal file
View File

@ -0,0 +1,132 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg aria-hidden="true"
class="w-10 h-10 fill-secondary" viewBox="0 -3 82 66" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M 5.9133057,14.000286 H 70.974329 a 8.9999999,8.9999999 0 0 1 8.999987,8.999998 V 47.889121 H 5.9133057 Z"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1116" />
<path d="m 5.9133057,28.634282 h -2.244251 v -9.367697 h 2.244251 z"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1118" />
<path d="M 5.9133057,42.648417 H 3.6690547 V 33.28072 h 2.244251 z"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1120" />
<path d="m 5.9133057,47.889121 v 4.42369"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1122" />
<path d="M 5.9133057,14.000286 H 2.3482707"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1124" />
<path d="M 2.3482707,14.000286 V 10.006515"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1126" />
<path
d="m 74.31472,30.942798 a 11.594069,11.594069 0 0 0 -23.188136,0 11.594069,11.594069 0 0 0 23.188136,0 z"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1128" />
<path d="m 54.568046,22.699178 a 8.1531184,8.1531184 0 0 0 8.154326,8.24362"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1130" />
<path
d="M 73.935201,28.000658 A 8.1531184,8.1531184 0 0 0 62.721525,30.944293"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1132" />
<path
d="m 70.873258,39.186418 a 8.1531184,8.1531184 0 0 0 -8.152606,-8.24362"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1134" />
<path
d="M 59.657782,42.124981 A 8.1531184,8.1531184 0 0 0 62.719435,30.940687"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1136" />
<path
d="M 51.50515,33.881361 A 8.1531184,8.1531184 0 0 0 62.720652,30.942798"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1138" />
<path
d="M 65.783521,19.760615 A 8.1531184,8.1531184 0 0 0 62.721869,30.944909"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1140" />
<path
d="m 62.720652,22.789678 a 8.1531184,8.1531184 0 0 0 -3.06287,-3.029063"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1142" />
<path
d="m 69.782328,26.864746 a 8.1531184,8.1531184 0 0 0 1.09093,-4.165568"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1144" />
<path
d="m 69.781455,35.019358 a 8.1531184,8.1531184 0 0 0 4.154699,-1.137997"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1146" />
<path d="m 62.722372,39.09293 a 8.1531184,8.1531184 0 0 0 3.064668,3.031085"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1148" />
<path
d="m 55.659849,35.019358 a 8.1531184,8.1531184 0 0 0 -1.091803,4.16706"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1150" />
<path
d="M 55.659849,26.866238 A 8.1531184,8.1531184 0 0 0 51.50515,28.004235"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1152" />
<path d="m 22.744016,47.889121 h 38.934945 v 4.42369 H 22.744016 Z"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1154" />
<path d="m 20.54627,47.889121 h -4.395478 v 4.42369 h 4.395478 z"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1156" />
<path
d="m 40.205007,30.942798 a 11.594071,11.594071 0 0 0 -23.188141,0 11.594071,11.594071 0 0 0 23.188141,0 z"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1158" />
<path d="m 20.458317,22.699178 a 8.1531184,8.1531184 0 0 0 8.154342,8.24362"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1160" />
<path
d="m 35.672615,26.864746 a 8.1531184,8.1531184 0 0 0 1.09093,-4.165568"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1162" />
<path
d="M 39.825489,28.000658 A 8.1531184,8.1531184 0 0 0 28.611786,30.944293"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1164" />
<path d="m 28.612659,39.09293 a 8.1531184,8.1531184 0 0 0 3.064669,3.031085"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1166" />
<path
d="m 36.763545,39.186418 a 8.1531184,8.1531184 0 0 0 -8.152606,-8.24362"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1168" />
<path
d="m 21.550126,35.019358 a 8.1531184,8.1531184 0 0 0 -1.091809,4.16706"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1170" />
<path
d="M 25.54807,42.124981 A 8.1531184,8.1531184 0 0 0 28.609722,30.940687"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1172" />
<path
d="m 21.550126,26.866238 a 8.1531184,8.1531184 0 0 0 -4.154684,1.137997"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1174" />
<path
d="M 17.395442,33.881361 A 8.1531184,8.1531184 0 0 0 28.610939,30.942798"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1176" />
<path
d="M 28.610939,22.789678 A 8.1531184,8.1531184 0 0 0 25.54807,19.760615"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1178" />
<path
d="M 31.673809,19.760615 A 8.1531184,8.1531184 0 0 0 28.612156,30.944909"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1180" />
<path
d="m 35.671742,35.019358 a 8.1531184,8.1531184 0 0 0 4.154673,-1.137997"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1182" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

187
web/dist/assets/index-45a76f41.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

8
web/dist/assets/index-6e20cfc4.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

8
web/dist/assets/index-9fa5ab56.css vendored
View File

File diff suppressed because one or more lines are too long

181
web/dist/assets/index-e336da74.js 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-e336da74.js"></script>
<link rel="stylesheet" href="/assets/index-9fa5ab56.css">
<script type="module" crossorigin src="/assets/index-45a76f41.js"></script>
<link rel="stylesheet" href="/assets/index-6e20cfc4.css">
</head>
<body>
<div id="app"></div>

32
web/package-lock.json generated
View File

@ -18,7 +18,8 @@
"markdown-it-attrs": "^4.1.6",
"markdown-it-emoji": "^2.0.2",
"markdown-it-implicit-figures": "^0.11.0",
"markdown-it-multimd-table": "^4.2.2",
"markdown-it-math": "^4.1.1",
"markdown-it-multimd-table": "^4.2.3",
"papaparse": "^5.4.1",
"prismjs": "^1.29.0",
"socket.io-client": "^4.6.1",
@ -961,6 +962,18 @@
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
},
"node_modules/ascii2mathml": {
"version": "0.6.2",
"resolved": "https://registry.npmjs.org/ascii2mathml/-/ascii2mathml-0.6.2.tgz",
"integrity": "sha512-tkPONh2Y7ZpuGQw6AiRnExX/CSYf5C2T/rF+UMJq5n0Us7+QjL8VY5ZE16xo9wcXhdqPkl/F7lzEzU9HX0YKng==",
"optional": true,
"dependencies": {
"minimist": "^1.2.0"
},
"bin": {
"ascii2mathml": "bin/index.js"
}
},
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@ -2228,6 +2241,14 @@
"node": ">=0.10.0"
}
},
"node_modules/markdown-it-math": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/markdown-it-math/-/markdown-it-math-4.1.1.tgz",
"integrity": "sha512-LQ0hREgMgN4tNcy2PGyw1XypjmKJjc+ZzATMuDIVD/Bagr5SGL198uHleVdiFDrNdXpqVmL4N1KD1GYyftMakQ==",
"optionalDependencies": {
"ascii2mathml": "^0.6.2"
}
},
"node_modules/markdown-it-multimd-table": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/markdown-it-multimd-table/-/markdown-it-multimd-table-4.2.3.tgz",
@ -2296,6 +2317,15 @@
"node": "*"
}
},
"node_modules/minimist": {
"version": "1.2.8",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
"integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
"optional": true,
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",

3
web/package.json
View File

@ -20,7 +20,8 @@
"markdown-it-attrs": "^4.1.6",
"markdown-it-emoji": "^2.0.2",
"markdown-it-implicit-figures": "^0.11.0",
"markdown-it-multimd-table": "^4.2.2",
"markdown-it-math": "^4.1.1",
"markdown-it-multimd-table": "^4.2.3",
"papaparse": "^5.4.1",
"prismjs": "^1.29.0",
"socket.io-client": "^4.6.1",

BIN
web/src/assets/default_model.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 245 KiB

After

Width:  |  Height:  |  Size: 219 KiB

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

@ -121,13 +121,6 @@
</div>
<!-- CHAT BOX -->
<div class="flex flex-row flex-grow items-center gap-2 overflow-visible">
<InteractiveMenu
:title="selectedModel"
:execute_cmd="setModel"
:icon="models_menu_icon"
:menu-icon-class="'rounded-full'"
:commands="commandify(models)"
:selected_entry="selectedModel"></InteractiveMenu>
<div v-if="selecting_model" title="Selecting model" class="flex flex-row flex-grow justify-end">
<!-- SPINNER -->
<div role="status">
@ -143,6 +136,30 @@
<span class="sr-only">Selecting model...</span>
</div>
</div>
<div class="w-fit group relative">
<!-- :onShowPersList="onShowPersListFun" -->
<div class= "group w-full inline-flex absolute opacity-0 group-hover:opacity-100 transform group-hover:-translate-y-10 group-hover:translate-x-15 transition-all duration-300">
<div class="w-full"
v-for="(item, index) in this.$store.state.installedModels" :key="index + '-' + item.name"
ref="installedModels">
<div v-if="item.name!=this.$store.state.config.model_name" class="group items-center flex flex-row">
<button @click.prevent="setModel(item)" class="w-8 h-8">
<img :src="item.icon?item.icon:modelImgPlaceholder" @error="modelImgPlaceholder"
class="w-8 h-8 rounded-full object-fill text-red-700 border-2 active:scale-90 hover:border-secondary "
:title="item.name">
</button>
</div>
</div>
</div>
<div class="group items-center flex flex-row">
<button @click.prevent="showModelConfig()" class="w-8 h-8">
<img :src="this.$store.state.currentModel.icon?this.$store.state.currentModel.icon:modelImgPlaceholder" @error="modelImgPlaceholder"
class="w-8 h-8 rounded-full object-fill text-red-700 border-2 active:scale-90 hover:border-secondary "
:title="this.$store.state.currentModel?this.$store.state.currentModel.name:'unknown'">
</button>
</div>
</div>
<div class="w-fit group relative">
<!-- :onShowPersList="onShowPersListFun" -->
<div class= "group w-full inline-flex absolute opacity-0 group-hover:opacity-100 transform group-hover:-translate-y-10 group-hover:translate-x-15 transition-all duration-300">
@ -297,6 +314,8 @@ import { useStore } from 'vuex'; // Import the useStore function
import { inject } from 'vue';
import socket from '@/services/websocket.js'
import Toast from '../components/Toast.vue'
import modelImgPlaceholder from "../assets/default_model.png"
console.log("modelImgPlaceholder:",modelImgPlaceholder)
const bUrl = import.meta.env.VITE_LOLLMS_API_BASEURL
export default {
name: 'ChatBox',
@ -322,11 +341,11 @@ export default {
},
data() {
return {
modelImgPlaceholder:modelImgPlaceholder,
bUrl:bUrl,
message: "",
selecting_model:false,
selectedModel:'',
models:{},
isLesteningToVoice:false,
filesList: [],
isFileSentList: [],
@ -362,6 +381,9 @@ export default {
}
},
methods: {
showModelConfig(){
},
async unmountPersonality(pers) {
this.isLoading = true
if (!pers) { return }
@ -498,27 +520,18 @@ export default {
selectElement.dispatchEvent(event_);
},
commandify(list_of_strings){
let list_of_dicts=[]
for (var i = 0; i < list_of_strings.length; i++) {
let dict={}
dict["name"]=list_of_strings[i]
dict["value"]=list_of_strings[i]
list_of_dicts.push(dict)
}
return list_of_dicts
},
setModel(selectedModel){
console.log("Setting model to "+selectedModel);
console.log("Setting model to "+selectedModel.name);
this.selecting_model=true
this.selectedModel = selectedModel
axios.post("/update_setting", {
setting_name: "model_name",
setting_value: selectedModel.value
}).then((response) => {
setting_value: selectedModel.name
}).then(async (response) => {
console.log(response);
this.$refs.toast.showToast(`Model changed to ${selectedModel.value}`,4,true)
await this.$store.dispatch('refreshModels');
await this.$store.dispatch('refreshConfig');
this.$refs.toast.showToast(`Model changed to ${selectedModel.name}`,4,true)
this.selecting_model=false
}).catch(err=>{
this.$refs.toast.showToast(`Error ${err}`,4,true)
@ -739,22 +752,6 @@ export default {
},
mounted() {
axios.get('list_models').then(response => {
console.log("List models "+response.data)
this.models=response.data
axios.get('get_active_model').then(response => {
console.log("Active model " + JSON.stringify(response.data))
if(response.data!=undefined){
this.selectedModel = response.data["model"]
}
}).catch(ex=>{
this.$refs.toast.showToast(`Error: ${ex}`,4,false)
});
}).catch(ex=>{
this.$refs.toast.showToast(`Error: ${ex}`,4,false)
});
this.emitloaded();
nextTick(() => {
feather.replace()

23
web/src/components/MarkdownRenderer.vue
View File

@ -21,6 +21,8 @@ import feather from 'feather-icons';
import MarkdownIt from 'markdown-it';
import emoji from 'markdown-it-emoji';
import anchor from 'markdown-it-anchor';
import MarkdownItMath from 'markdown-it-math';
import MarkdownItMultimdTable from 'markdown-it-multimd-table';
import implicitFigures from 'markdown-it-implicit-figures';
import 'highlight.js/styles/tomorrow-night-blue.css';
import 'highlight.js/styles/tokyo-night-dark.css';
@ -71,7 +73,26 @@ export default {
.use(implicitFigures, {
figcaption: true,
})
.use(attrs);
.use(attrs)
.use(MarkdownItMath, {
inlineOpen: '$',
inlineClose: '$',
blockOpen: '$$',
blockClose: '$$',
})
.use(MarkdownItMultimdTable,{
enableRowspan: true,
enableColspan: true,
enableGridTables: true,
enableGridTablesExtra: true,
enableTableIndentation: true,
tableCellPadding: ' ',
tableCellJoiner: '|',
multilineCellStartMarker: '|>',
multilineCellEndMarker: '<|',
multilineCellPadding: ' ',
multilineCellJoiner: '\n',
});
const markdownItems = ref([]);
const updateMarkdown = () => {
if (props.markdownText) {

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

@ -193,7 +193,7 @@
<b>License:&nbsp;</b>
{{ model.license }}
</div>
<div class="flex items-center">
<div v-if="model.quantizer!='None'" class="flex items-center">
<i data-feather="user" class="w-5 m-1"></i>
<b>quantizer:&nbsp;</b>
<a :href="'https://huggingface.co/'+model.quantizer" target="_blank" rel="noopener noreferrer" @click.stop

6
web/src/components/Navigation.vue
View File

@ -8,9 +8,6 @@
<RouterLink :to="{ name: 'playground' }" class="link-item dark:link-item-dark">
Playground
</RouterLink>
<RouterLink :to="{ name: 'settings' }" class="link-item dark:link-item-dark">
Settings
</RouterLink>
<RouterLink :to="{ name: 'extensions' }" class="link-item dark:link-item-dark">
Extensions
</RouterLink>
@ -20,6 +17,9 @@
<RouterLink :to="{ name: 'quantizing' }" class="link-item dark:link-item-dark">
Quantizing
</RouterLink>
<RouterLink :to="{ name: 'settings' }" class="link-item dark:link-item-dark">
Settings
</RouterLink>
<RouterLink :to="{ name: 'help' }" class="link-item dark:link-item-dark">
Help
</RouterLink>

33
web/src/main.js
View File

@ -39,6 +39,9 @@ export const store = createStore({
diskUsage:null,
ramUsage:null,
vramUsage:null,
modelsZoo:[],
installedModels:[],
currentModel:null,
extensionsZoo:[],
databases:[],
}
@ -83,7 +86,9 @@ export const store = createStore({
setVramUsage(state, vramUsage) {
state.vramUsage = vramUsage;
},
setModelsZoo(state, modelsZoo) {
state.modelsZoo = modelsZoo;
},
setExtensionsZoo(state, extensionsZoo) {
state.extensionsZoo = extensionsZoo;
},
@ -133,6 +138,9 @@ export const store = createStore({
getDatabasesList(state){
return state.databases;
},
getModelsZoo(state) {
return state.modelsZoo;
},
getExtensionsZoo(state) {
return state.extensionsZoo;
},
@ -275,6 +283,11 @@ export const store = createStore({
let bindingsArr = await api_get_req("list_bindings")
commit('setBindingsArr',bindingsArr)
},
async refreshModelsZoo({ commit }) {
console.log("Fetching models")
const response = await axios.get('/get_available_models');
commit('setModelsZoo',response.data.filter(model => model.variants && model.variants.length>0))
},
async refreshModels({ commit }) {
console.log("Fetching models")
let modelsArr = await api_get_req("list_models");
@ -283,8 +296,15 @@ export const store = createStore({
if(selectedModel!=undefined){
commit('setselectedModel',selectedModel["model"])
}
commit('setModelsArr',modelsArr)
this.state.modelsZoo.map((item)=>{
item.isInstalled=modelsArr.includes(item.name)
})
this.state.installedModels = this.state.modelsZoo.filter(item=> item.isInstalled)
const index = this.state.modelsZoo.findIndex(item=>item.name == this.state.config.model_name)
if (index!=-1)
this.state.currentModel = this.state.modelsZoo[index]
},
async refreshExtensionsZoo({ commit }) {
let extensions = []
@ -442,20 +462,19 @@ app.mixin({
await this.$store.dispatch('refreshConfig');
await this.$store.dispatch('refreshDatabase');
console.log("recovered config : ${}");
await this.$store.dispatch('getVersion');
console.log("recovered version");
await this.$store.dispatch('refreshBindings');
await refreshHardwareUsage(this.$store);
await this.$store.dispatch('refreshExtensionsZoo');
await this.$store.dispatch('refreshmountedExtensions');
await this.$store.dispatch('refreshModels');
await this.$store.dispatch('refreshPersonalitiesZoo')
await this.$store.dispatch('refreshMountedPersonalities');
await this.$store.dispatch('refreshModelsZoo');
await this.$store.dispatch('refreshModels');
this.$store.state.ready = true;
console.log("store status = ", this.$store.state.ready);
console.log("done loading data")
}
},

1
web/src/views/DiscussionsView.vue
View File

@ -356,6 +356,7 @@ import SVGRedBrain from '@/assets/brain_red.svg';
import SVGOrangeBrain from '@/assets/brain_orange.svg';
import SVGGreenBrain from '@/assets/brain_green.svg';
export default {
setup() { },

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

@ -110,135 +110,8 @@
<div class="flex gap-2 items-center " v-for="item in vramUsage.gpus">
<!-- GPU IMAGE -->
<svg :title="item.gpu_model" aria-hidden="true"
class="w-10 h-10 fill-secondary" viewBox="0 -3 82 66" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M 5.9133057,14.000286 H 70.974329 a 8.9999999,8.9999999 0 0 1 8.999987,8.999998 V 47.889121 H 5.9133057 Z"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1116" />
<path d="m 5.9133057,28.634282 h -2.244251 v -9.367697 h 2.244251 z"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1118" />
<path d="M 5.9133057,42.648417 H 3.6690547 V 33.28072 h 2.244251 z"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1120" />
<path d="m 5.9133057,47.889121 v 4.42369"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1122" />
<path d="M 5.9133057,14.000286 H 2.3482707"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1124" />
<path d="M 2.3482707,14.000286 V 10.006515"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1126" />
<path
d="m 74.31472,30.942798 a 11.594069,11.594069 0 0 0 -23.188136,0 11.594069,11.594069 0 0 0 23.188136,0 z"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1128" />
<path d="m 54.568046,22.699178 a 8.1531184,8.1531184 0 0 0 8.154326,8.24362"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1130" />
<path
d="M 73.935201,28.000658 A 8.1531184,8.1531184 0 0 0 62.721525,30.944293"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1132" />
<path
d="m 70.873258,39.186418 a 8.1531184,8.1531184 0 0 0 -8.152606,-8.24362"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1134" />
<path
d="M 59.657782,42.124981 A 8.1531184,8.1531184 0 0 0 62.719435,30.940687"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1136" />
<path
d="M 51.50515,33.881361 A 8.1531184,8.1531184 0 0 0 62.720652,30.942798"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1138" />
<path
d="M 65.783521,19.760615 A 8.1531184,8.1531184 0 0 0 62.721869,30.944909"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1140" />
<path
d="m 62.720652,22.789678 a 8.1531184,8.1531184 0 0 0 -3.06287,-3.029063"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1142" />
<path
d="m 69.782328,26.864746 a 8.1531184,8.1531184 0 0 0 1.09093,-4.165568"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1144" />
<path
d="m 69.781455,35.019358 a 8.1531184,8.1531184 0 0 0 4.154699,-1.137997"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1146" />
<path d="m 62.722372,39.09293 a 8.1531184,8.1531184 0 0 0 3.064668,3.031085"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1148" />
<path
d="m 55.659849,35.019358 a 8.1531184,8.1531184 0 0 0 -1.091803,4.16706"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1150" />
<path
d="M 55.659849,26.866238 A 8.1531184,8.1531184 0 0 0 51.50515,28.004235"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1152" />
<path d="m 22.744016,47.889121 h 38.934945 v 4.42369 H 22.744016 Z"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1154" />
<path d="m 20.54627,47.889121 h -4.395478 v 4.42369 h 4.395478 z"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1156" />
<path
d="m 40.205007,30.942798 a 11.594071,11.594071 0 0 0 -23.188141,0 11.594071,11.594071 0 0 0 23.188141,0 z"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1158" />
<path d="m 20.458317,22.699178 a 8.1531184,8.1531184 0 0 0 8.154342,8.24362"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1160" />
<path
d="m 35.672615,26.864746 a 8.1531184,8.1531184 0 0 0 1.09093,-4.165568"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1162" />
<path
d="M 39.825489,28.000658 A 8.1531184,8.1531184 0 0 0 28.611786,30.944293"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1164" />
<path d="m 28.612659,39.09293 a 8.1531184,8.1531184 0 0 0 3.064669,3.031085"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1166" />
<path
d="m 36.763545,39.186418 a 8.1531184,8.1531184 0 0 0 -8.152606,-8.24362"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1168" />
<path
d="m 21.550126,35.019358 a 8.1531184,8.1531184 0 0 0 -1.091809,4.16706"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1170" />
<path
d="M 25.54807,42.124981 A 8.1531184,8.1531184 0 0 0 28.609722,30.940687"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1172" />
<path
d="m 21.550126,26.866238 a 8.1531184,8.1531184 0 0 0 -4.154684,1.137997"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1174" />
<path
d="M 17.395442,33.881361 A 8.1531184,8.1531184 0 0 0 28.610939,30.942798"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1176" />
<path
d="M 28.610939,22.789678 A 8.1531184,8.1531184 0 0 0 25.54807,19.760615"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1178" />
<path
d="M 31.673809,19.760615 A 8.1531184,8.1531184 0 0 0 28.612156,30.944909"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1180" />
<path
d="m 35.671742,35.019358 a 8.1531184,8.1531184 0 0 0 4.154673,-1.137997"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1182" />
</svg>
<img :src="SVGGPU" width="25" height="25">
<h3 class="font-bold font-large text-lg">
<div>{{ computedFileSize(item.used_vram) }} / {{ computedFileSize(item.total_vram) }} ({{ item.percentage }}%)
</div>
@ -249,135 +122,7 @@
<div class="flex gap-2 items-center ">
<!-- GPU IMAGE -->
<svg aria-hidden="true"
class="w-10 h-10 fill-secondary" viewBox="0 -3 82 66" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M 5.9133057,14.000286 H 70.974329 a 8.9999999,8.9999999 0 0 1 8.999987,8.999998 V 47.889121 H 5.9133057 Z"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1116" />
<path d="m 5.9133057,28.634282 h -2.244251 v -9.367697 h 2.244251 z"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1118" />
<path d="M 5.9133057,42.648417 H 3.6690547 V 33.28072 h 2.244251 z"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1120" />
<path d="m 5.9133057,47.889121 v 4.42369"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1122" />
<path d="M 5.9133057,14.000286 H 2.3482707"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1124" />
<path d="M 2.3482707,14.000286 V 10.006515"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1126" />
<path
d="m 74.31472,30.942798 a 11.594069,11.594069 0 0 0 -23.188136,0 11.594069,11.594069 0 0 0 23.188136,0 z"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1128" />
<path d="m 54.568046,22.699178 a 8.1531184,8.1531184 0 0 0 8.154326,8.24362"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1130" />
<path
d="M 73.935201,28.000658 A 8.1531184,8.1531184 0 0 0 62.721525,30.944293"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1132" />
<path
d="m 70.873258,39.186418 a 8.1531184,8.1531184 0 0 0 -8.152606,-8.24362"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1134" />
<path
d="M 59.657782,42.124981 A 8.1531184,8.1531184 0 0 0 62.719435,30.940687"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1136" />
<path
d="M 51.50515,33.881361 A 8.1531184,8.1531184 0 0 0 62.720652,30.942798"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1138" />
<path
d="M 65.783521,19.760615 A 8.1531184,8.1531184 0 0 0 62.721869,30.944909"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1140" />
<path
d="m 62.720652,22.789678 a 8.1531184,8.1531184 0 0 0 -3.06287,-3.029063"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1142" />
<path
d="m 69.782328,26.864746 a 8.1531184,8.1531184 0 0 0 1.09093,-4.165568"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1144" />
<path
d="m 69.781455,35.019358 a 8.1531184,8.1531184 0 0 0 4.154699,-1.137997"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1146" />
<path d="m 62.722372,39.09293 a 8.1531184,8.1531184 0 0 0 3.064668,3.031085"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1148" />
<path
d="m 55.659849,35.019358 a 8.1531184,8.1531184 0 0 0 -1.091803,4.16706"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1150" />
<path
d="M 55.659849,26.866238 A 8.1531184,8.1531184 0 0 0 51.50515,28.004235"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1152" />
<path d="m 22.744016,47.889121 h 38.934945 v 4.42369 H 22.744016 Z"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1154" />
<path d="m 20.54627,47.889121 h -4.395478 v 4.42369 h 4.395478 z"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1156" />
<path
d="m 40.205007,30.942798 a 11.594071,11.594071 0 0 0 -23.188141,0 11.594071,11.594071 0 0 0 23.188141,0 z"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1158" />
<path d="m 20.458317,22.699178 a 8.1531184,8.1531184 0 0 0 8.154342,8.24362"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1160" />
<path
d="m 35.672615,26.864746 a 8.1531184,8.1531184 0 0 0 1.09093,-4.165568"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1162" />
<path
d="M 39.825489,28.000658 A 8.1531184,8.1531184 0 0 0 28.611786,30.944293"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1164" />
<path d="m 28.612659,39.09293 a 8.1531184,8.1531184 0 0 0 3.064669,3.031085"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1166" />
<path
d="m 36.763545,39.186418 a 8.1531184,8.1531184 0 0 0 -8.152606,-8.24362"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1168" />
<path
d="m 21.550126,35.019358 a 8.1531184,8.1531184 0 0 0 -1.091809,4.16706"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1170" />
<path
d="M 25.54807,42.124981 A 8.1531184,8.1531184 0 0 0 28.609722,30.940687"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1172" />
<path
d="m 21.550126,26.866238 a 8.1531184,8.1531184 0 0 0 -4.154684,1.137997"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1174" />
<path
d="M 17.395442,33.881361 A 8.1531184,8.1531184 0 0 0 28.610939,30.942798"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1176" />
<path
d="M 28.610939,22.789678 A 8.1531184,8.1531184 0 0 0 25.54807,19.760615"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1178" />
<path
d="M 31.673809,19.760615 A 8.1531184,8.1531184 0 0 0 28.612156,30.944909"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1180" />
<path
d="m 35.671742,35.019358 a 8.1531184,8.1531184 0 0 0 4.154673,-1.137997"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1182" />
</svg>
<img :src="SVGGPU" width="25" height="25">
<h3 class="font-bold font-large text-lg">
<div> {{ vramUsage.gpus.length }}x
</div>
@ -444,80 +189,8 @@
<div class="mb-2" v-for="item in vramUsage.gpus">
<label class="flex items-center gap-1 ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
<!-- GPU IMAGE -->
<svg aria-hidden="true" class="w-10 h-10 -my-5 fill-secondary" viewBox="0 -3 82 66" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M 5.9133057,14.000286 H 70.974329 a 8.9999999,8.9999999 0 0 1 8.999987,8.999998 V 47.889121 H 5.9133057 Z"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1116" />
<path d="m 5.9133057,28.634282 h -2.244251 v -9.367697 h 2.244251 z"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1118" />
<path d="M 5.9133057,42.648417 H 3.6690547 V 33.28072 h 2.244251 z"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1120" />
<path d="m 5.9133057,47.889121 v 4.42369"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1122" />
<path d="M 5.9133057,14.000286 H 2.3482707"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1124" />
<path d="M 2.3482707,14.000286 V 10.006515"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1126" />
<path
d="m 74.31472,30.942798 a 11.594069,11.594069 0 0 0 -23.188136,0 11.594069,11.594069 0 0 0 23.188136,0 z"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1128" />
<path d="m 54.568046,22.699178 a 8.1531184,8.1531184 0 0 0 8.154326,8.24362"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1130" />
<path d="M 73.935201,28.000658 A 8.1531184,8.1531184 0 0 0 62.721525,30.944293"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1132" />
<path d="m 70.873258,39.186418 a 8.1531184,8.1531184 0 0 0 -8.152606,-8.24362"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1134" />
<path d="M 59.657782,42.124981 A 8.1531184,8.1531184 0 0 0 62.719435,30.940687"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1136" />
<path d="M 51.50515,33.881361 A 8.1531184,8.1531184 0 0 0 62.720652,30.942798"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1138" />
<path d="M 65.783521,19.760615 A 8.1531184,8.1531184 0 0 0 62.721869,30.944909"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1140" />
<path d="m 62.720652,22.789678 a 8.1531184,8.1531184 0 0 0 -3.06287,-3.029063"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1142" />
<path d="m 69.782328,26.864746 a 8.1531184,8.1531184 0 0 0 1.09093,-4.165568"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1144" />
<path d="m 69.781455,35.019358 a 8.1531184,8.1531184 0 0 0 4.154699,-1.137997"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1146" />
<path d="m 62.722372,39.09293 a 8.1531184,8.1531184 0 0 0 3.064668,3.031085"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1148" />
<path d="m 55.659849,35.019358 a 8.1531184,8.1531184 0 0 0 -1.091803,4.16706"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1150" />
<path d="M 55.659849,26.866238 A 8.1531184,8.1531184 0 0 0 51.50515,28.004235"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1152" />
<path d="m 22.744016,47.889121 h 38.934945 v 4.42369 H 22.744016 Z"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1154" />
<path d="m 20.54627,47.889121 h -4.395478 v 4.42369 h 4.395478 z"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1156" />
<path
d="m 40.205007,30.942798 a 11.594071,11.594071 0 0 0 -23.188141,0 11.594071,11.594071 0 0 0 23.188141,0 z"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1158" />
<path d="m 20.458317,22.699178 a 8.1531184,8.1531184 0 0 0 8.154342,8.24362"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1160" />
<path d="m 35.672615,26.864746 a 8.1531184,8.1531184 0 0 0 1.09093,-4.165568"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1162" />
<path d="M 39.825489,28.000658 A 8.1531184,8.1531184 0 0 0 28.611786,30.944293"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1164" />
<path d="m 28.612659,39.09293 a 8.1531184,8.1531184 0 0 0 3.064669,3.031085"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1166" />
<path d="m 36.763545,39.186418 a 8.1531184,8.1531184 0 0 0 -8.152606,-8.24362"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1168" />
<path d="m 21.550126,35.019358 a 8.1531184,8.1531184 0 0 0 -1.091809,4.16706"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1170" />
<path d="M 25.54807,42.124981 A 8.1531184,8.1531184 0 0 0 28.609722,30.940687"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1172" />
<path d="m 21.550126,26.866238 a 8.1531184,8.1531184 0 0 0 -4.154684,1.137997"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1174" />
<path d="M 17.395442,33.881361 A 8.1531184,8.1531184 0 0 0 28.610939,30.942798"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1176" />
<path d="M 28.610939,22.789678 A 8.1531184,8.1531184 0 0 0 25.54807,19.760615"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1178" />
<path d="M 31.673809,19.760615 A 8.1531184,8.1531184 0 0 0 28.612156,30.944909"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1180" />
<path d="m 35.671742,35.019358 a 8.1531184,8.1531184 0 0 0 4.154673,-1.137997"
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1" id="path1182" />
</svg>
<img :src="SVGGPU" width="25" height="25">
GPU usage:
</label>
<div class="flex flex-col mx-2">
@ -1176,7 +849,7 @@
<div class="flex gap-1 items-center">
<img :src="imgModel" class="w-8 h-8 rounded-lg object-fill">
<h3 class="font-bold font-large text-lg line-clamp-1">
{{ model_name }}
{{ configFile.model_name }}
</h3>
</div>
</div>
@ -1276,14 +949,14 @@
</div>
<div v-if="!searchModel">
<div v-if="models && models.length > 0" class="mb-2">
<div v-if="models_zoo && models_zoo.length > 0" class="mb-2">
<label for="model" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
Models: ({{ models.length }})
Models: ({{ models_zoo.length }})
</label>
<div class="overflow-y-auto p-2 pb-0 grid lg:grid-cols-3 md:grid-cols-2 gap-4 overflow-y-scroll w-full dark:bg-bg-dark 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"
:class="mzl_collapsed ? '' : 'max-h-96'">
<model-entry ref="modelZoo" v-for="(model, index) in show_only_installed_models?filter_installed(models):models"
<model-entry ref="modelZoo" v-for="(model, index) in show_only_installed_models?filter_installed(models_zoo):models_zoo"
:key="'index-' + index + '-' + model.name"
:model="model"
:is-installed="model.isInstalled" :on-install="onInstall"
@ -2093,6 +1766,8 @@ import Card from "@/components/Card.vue"
import RadioOptions from '../components/RadioOptions.vue';
import ExtensionEntry from "@/components/ExtensionEntry.vue"
import {refreshHardwareUsage} from "../main"
import SVGGPU from '@/assets/gpu.svg';
const bUrl = import.meta.env.VITE_LOLLMS_API_BASEURL
axios.defaults.baseURL = import.meta.env.VITE_LOLLMS_API_BASEURL
@ -2116,6 +1791,8 @@ export default {
data() {
return {
imgModel: defaultModelImgPlaceholder,
SVGGPU:SVGGPU,
models_zoo:[],
// Sort options
sortOptions: [
@ -2202,15 +1879,10 @@ export default {
methods: {
async modelsZooToggleCollapse(){
this.mzc_collapsed = !this.mzc_collapsed
if (!this.mzc_collapsed){
this.is_loading_zoo = true
await this.refreshModelsZoo();
this.is_loading_zoo = false;
}
},
async selectSortOption(index){
this.$store.state.sort_type=index
this.modelsFiltered = this.models
this.modelsFiltered = this.models_zoo
console.log(`Selected sorting:${index}`)
},
handleRadioSelected(index){
@ -2280,8 +1952,8 @@ export default {
model_object.start_time = response.start_time
model_object.installing = true
if (model_object.progress == 100) {
const index = this.models.findIndex((model) => model.name === model_object.model.name);
this.models[index].isInstalled = true;
const index = this.models_zoo.findIndex((model) => model.name === model_object.model.name);
this.models_zoo[index].isInstalled = true;
this.showProgress = false;
model_object.installing = false
@ -2352,8 +2024,7 @@ export default {
this.loading_text = text
},
async constructor() {
console.log("Constructing")
async load_everything() {
this.isLoading = true
nextTick(() => {
feather.replace()
@ -2391,7 +2062,7 @@ export default {
// this.persCatgArr.sort()
// this.persArr.sort()
console.log("models_zoo:")
console.log(this.models)
console.log(this.models_zoo)
//await this.getPersonalitiesArr()
@ -2401,7 +2072,7 @@ export default {
//mountedPersArr
console.log("Extensions zoo")
console.log(this.$store.state.extensionsZoo)
this.modelsFiltered = this.models
this.modelsFiltered = this.models_zoo
this.extension_category = this.configFile.extension_category
this.extensionsFiltererd = this.$store.state.extensionsZoo.filter((item) => item.category === this.configFile.extension_category )
console.log("Extensions filtered")
@ -2416,7 +2087,6 @@ export default {
this.extension_category = this.configFile.extension_category
},
async open_mzl(){
this.mzl_collapsed = !this.mzl_collapsed;
@ -2445,7 +2115,7 @@ export default {
// FInd model
if (this.$refs.modelZoo) {
const index = this.$refs.modelZoo.findIndex(item => item.model.name == response.model_name && this.configFile.binding_name == response.binding_folder)
const modelEntry = this.models[index]
const modelEntry = this.models_zoo[index]
if (modelEntry) {
// Model found
@ -2466,7 +2136,7 @@ export default {
if (this.$refs.modelZoo) {
const index = this.$refs.modelZoo.findIndex(item => item.model.name == response.model_name && this.configFile.binding_name == response.binding_folder)
const modelEntry = this.models[index]
const modelEntry = this.models_zoo[index]
if (modelEntry) {
// Model found
@ -2486,7 +2156,7 @@ export default {
// Installation failed or encountered an error
if (this.$refs.modelZoo) {
const index = this.$refs.modelZoo.findIndex(item => item.model.name == response.model_name && this.configFile.binding_name == response.binding_folder)
const modelEntry = this.models[index]
const modelEntry = this.models_zoo[index]
if (modelEntry) {
// Model found
@ -2668,11 +2338,11 @@ export default {
this.configFile.model_name = model_object.model.name
if(res.status){
this.refreshModelsZoo().then(()=>{
this.updateModelsZoo();
this.$refs.toast.showToast("Selected model:\n" + model_object.name, 4, true)
nextTick(() => {
feather.replace()
})
})
}else{
this.$refs.toast.showToast("Couldn't select model:\n" + model_object.name, 4, false)
@ -2743,10 +2413,7 @@ export default {
axios.post("/add_reference_to_local_model",{"path": this.reference_path}).then((resp)=>{
if(resp.status){
this.$refs.toast.showToast("Reference created", 4, true)
this.refreshModelsZoo().then(resp=>{
this.$store.dispatch('refreshModels');
console.log("Models refreshed")
});
this.refreshModelsZoo().then(()=>{this.updateModelsZoo();})
}
else{
this.$refs.toast.showToast("Couldn't create reference", 4, false)
@ -2881,12 +2548,9 @@ export default {
model_object.uninstalling = false;
socket.off('install_progress', progressListener);
this.showProgress = false;
this.refreshModelsZoo().then(resp=>{
this.$store.dispatch('refreshModels');
console.log("Models refreshed")
});
this.refreshModelsZoo().then(()=>{this.updateModelsZoo();})
this.modelsFiltered = this.models
this.modelsFiltered = this.models_zoo
this.$refs.toast.showToast("Model:\n" + model_object.model.name + "\nwas uninstalled!", 4, true)
this.$store.dispatch('refreshDiskUsage');
} else {
@ -3221,9 +2885,25 @@ export default {
},
async refreshModelsZoo() {
const response = await axios.get('/get_available_models');
let models_zoo = response.data
models_zoo = models_zoo.filter(model => model.variants && model.variants.length>0);
await this.$store.dispatch('refreshModelsZoo');
console.log("ModelsZoo refreshed")
await this.$store.dispatch('refreshModels');
console.log("Models refreshed")
},
async updateModelsZoo(){
let models_zoo = this.$store.state.modelsZoo
if(models_zoo.length==0)
return
console.log("loading models_zoo", models_zoo)
let index = models_zoo.findIndex(item => item.name == this.configFile.model_name)
if (index>0){
this.imgModel = models_zoo[index].icon
}
else{
this.imgModel = defaultModelImgPlaceholder
}
console.log(`REFRESHING models using sorting ${this.sort_type}`)
if(models_zoo.length>1){
if(this.sort_type==0){ // Sort by date
@ -3314,16 +2994,16 @@ export default {
return 0; // both models are either installed or not installed, maintain their original order
}
});
},
update_binding(value) {
// eslint-disable-next-line no-unused-vars
this.isLoading = true
console.log("updating binding_name")
this.update_setting('binding_name', value, (res) => {
this.update_setting('binding_name', value, async (res) => {
console.log("updated binding_name")
await this.$store.dispatch('refreshConfig');
await this.refreshModelsZoo();
await this.updateModelsZoo();
const index = this.bindingsArr.findIndex(item => item.folder == value)
const item = this.bindingsArr[index]
if (item) {
@ -3336,9 +3016,6 @@ export default {
console.log("updating model")
// If binding changes then reset model
this.update_model(null).then(()=>{
setTimeout(()=>{
location.reload();
},1000)
});
@ -3357,7 +3034,6 @@ export default {
this.isLoading = false
nextTick(() => {
feather.replace()
})
return res
@ -3550,14 +3226,14 @@ export default {
async filterModels() {
if (!this.searchModel) {
console.log("Searching model")
this.modelsFiltered = this.models
this.modelsFiltered = this.models_zoo
this.searchModelInProgress = false
return
}
const searchTerm = this.searchModel.toLowerCase()
this.is_loading_zoo = true;
console.log("filtering models")
const seachedModels = this.models.filter((item) => {
const seachedModels = this.models_zoo.filter((item) => {
if (item.name && item.name.toLowerCase().includes(searchTerm) || item.description && item.description.toLowerCase().includes(searchTerm) || item.category && item.category.toLowerCase().includes(searchTerm)) {
return item
@ -3572,7 +3248,7 @@ export default {
this.modelsFiltered = seachedModels
} else {
this.modelsFiltered = this.models
this.modelsFiltered = this.models_zoo
}
this.searchModelInProgress = false
@ -3909,15 +3585,14 @@ export default {
}, async mounted() {
this.constructor()
console.log("Getting voices")
this.getVoices();
this.updateModelsZoo();
console.log("Constructing")
this.load_everything()
},
activated() {
if (this.isMounted) {
this.constructor()
}
//this.load_everything()
},
computed: {
isReady:{
@ -4219,33 +3894,6 @@ export default {
return defaultImgPlaceholder
}
},
imgModel() {
if (!this.isMounted) {
return
}
// console.log("Config file")
// console.log(this.configFile)
try {
let index = this.$refs.modelZoo.findIndex(item => item.model.name == this.configFile.model_name);
if(index==-1){
for (let model of this.$refs.modelZoo){
let v = model.model.variants;
console.log(model.model)
if(v!=undefined){
index = v.findIndex(item => item.name == this.configFile.model_name)
if(index!=-1){
break;
}
}
}
}
return this.$refs.modelZoo[index].$refs.imgElement.src
}
catch (error) {
return defaultModelImgPlaceholder
}
},
model_name() {
if (!this.isMounted) {
return

2
zoos/personalities_zoo

@ -1 +1 @@
Subproject commit a77c8f4f934ff97864dd8d21a7b0881a142a012d
Subproject commit ba7e12f84cad928300bcb233c51e3db14eeebefb