mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2025-02-01 00:45:34 +00:00
Saifeddine ALOUI
GitHub
commit
b82e78adff
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div :class="selected ? 'bg-bg-light-discussion dark:bg-bg-dark-discussion shadow-md' : ''"
|
||||
class="container flex sm:flex-row item-center shadow-sm gap-2 py-2 my-2 hover:shadow-md hover:bg-primary-light dark:hover:bg-primary rounded-md p-2 duration-75 group cursor-pointer"
|
||||
class=" flex flex-row sm:flex-row item-center shadow-sm gap-2 py-2 my-2 hover:shadow-md hover:bg-primary-light dark:hover:bg-primary rounded-md p-2 duration-75 group cursor-pointer"
|
||||
:id="'dis-' + id" @click.stop="selectEvent()">
|
||||
|
||||
<!-- PRE TITLE SECTION -->
|
||||
@ -19,8 +19,11 @@
|
||||
:class="loading ? 'min-h-full w-2 rounded-xl self-stretch animate-bounce bg-accent ' : ' '"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- TITLE -->
|
||||
<p v-if="!editTitle" :title="title" class="truncate w-full">{{ title ? title === "untitled" ? "New discussion" :
|
||||
<p v-if="!editTitle" :title="title" class="line-clamp-1 w-full ml-1 -mx-5">{{ title ? title === "untitled" ? "New discussion" :
|
||||
title : "New discussion" }}</p>
|
||||
|
||||
<input v-if="editTitle" type="text" id="title-box" ref="titleBox"
|
||||
@ -66,6 +69,7 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,13 +1,38 @@
|
||||
<template>
|
||||
<div class=" items-start p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer active:scale-95 duration-75 select-none"
|
||||
<div
|
||||
class=" items-start p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer active:scale-95 duration-75 select-none"
|
||||
@click.stop="toggleSelected" :class="selected ? ' border-primary-light' : 'border-transparent'">
|
||||
|
||||
|
||||
<div class="flex flex-row items-center flex-shrink-0 gap-3">
|
||||
<img ref="imgElement" :src="getImgUrl()" @error="defaultImg($event)" class="w-10 h-10 rounded-full object-fill text-red-700">
|
||||
<img ref="imgElement" :src="getImgUrl()" @error="defaultImg($event)"
|
||||
class="w-10 h-10 rounded-full object-fill text-red-700">
|
||||
<h3 class="font-bold font-large text-lg line-clamp-3">
|
||||
{{ personality.name }}
|
||||
</h3>
|
||||
{{ personality.name }}
|
||||
</h3>
|
||||
<div class="grow">
|
||||
<!-- EMPTY SPACE FILLER -->
|
||||
</div>
|
||||
<!-- ADVANCED OPTIONS - NOT IMPLEMENTED -->
|
||||
<div class="flex-none">
|
||||
|
||||
<!-- CHECKBOX MOUNTED -->
|
||||
<button type="button" @click.stop="toggleMounted"
|
||||
class="inline-flex items-center px-5 py-2.5 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
||||
{{isMounted ? 'Unmount':'Mount'}}
|
||||
<span
|
||||
class="inline-flex items-center justify-center w-4 h-4 ml-2 text-xs font-semibold text-blue-800 bg-blue-200 rounded-full">
|
||||
<input disabled id="default-checkbox" type="checkbox" v-model="isMounted" @change.stop="toggleMounted"
|
||||
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<!-- <div class="flex items-center mb-4" @click.stop title="Click to mount/unmount">
|
||||
<input id="default-checkbox" type="checkbox" v-model="isMounted" @change.stop="toggleMounted"
|
||||
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium">Mounted</label>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
@ -18,9 +43,9 @@
|
||||
<i data-feather="user" class="w-5 m-1"></i>
|
||||
<b>Author: </b>
|
||||
|
||||
{{ personality.author }}
|
||||
</div>
|
||||
<!-- <div class="">
|
||||
{{ personality.author }}
|
||||
</div>
|
||||
<!-- <div class="">
|
||||
<b>Language: </b>
|
||||
{{ personality.language }}
|
||||
</div>
|
||||
@ -28,8 +53,8 @@
|
||||
<b>Category: </b>
|
||||
{{ personality.category }}
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<i data-feather="info" class="w-5 m-1"></i>
|
||||
<b>Description: </b><br>
|
||||
</div>
|
||||
@ -51,19 +76,27 @@ export default {
|
||||
props: {
|
||||
personality: {},
|
||||
onSelected: Function,
|
||||
selected: Boolean
|
||||
selected: Boolean,
|
||||
onMounted: Function,
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
isMounted: false
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.isMounted = this.personality.isMounted
|
||||
|
||||
nextTick(() => {
|
||||
feather.replace()
|
||||
|
||||
|
||||
})
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
getImgUrl() {
|
||||
@ -75,6 +108,9 @@ export default {
|
||||
toggleSelected() {
|
||||
this.onSelected(this)
|
||||
},
|
||||
toggleMounted() {
|
||||
this.onMounted(this)
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
@ -2,8 +2,7 @@
|
||||
<div class="absolute bottom-16 right-2 z-20 flex flex-col gap-3 min-w-[300px]">
|
||||
<TransitionGroup name="toastItem" tag="div">
|
||||
<div v-for=" t in toastArr" :key="t.id">
|
||||
<div
|
||||
class="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
|
||||
<div class="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
|
||||
role="alert">
|
||||
<div class="flex flex-row items-center">
|
||||
<slot>
|
||||
@ -22,8 +21,7 @@
|
||||
</slot>
|
||||
</div>
|
||||
<button type="button" @click="close(t.id)"
|
||||
class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
|
||||
>
|
||||
class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700">
|
||||
<span class="sr-only">Close</span>
|
||||
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
@ -44,9 +42,9 @@ import feather from 'feather-icons'
|
||||
import { nextTick, TransitionGroup } from 'vue'
|
||||
export default {
|
||||
name: 'Toast',
|
||||
|
||||
|
||||
props: {
|
||||
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div
|
||||
class="relative flex flex-col no-scrollbar shadow-lg min-w-[24rem] max-w-[24rem] bg-bg-light-tone dark:bg-bg-dark-tone">
|
||||
<!-- LEFT SIDE PANEL -->
|
||||
<div id="leftPanel" class="flex flex-col flex-grow overflow-y-scroll no-scrollbar"
|
||||
<div id="leftPanel" class="flex flex-col flex-grow overflow-y-scroll no-scrollbar "
|
||||
@dragover.stop.prevent="setDropZoneDiscussion()">
|
||||
<div class=" sticky z-10 top-0 bg-bg-light-tone dark:bg-bg-dark-tone shadow-md">
|
||||
|
||||
@ -130,10 +130,10 @@
|
||||
<DragDrop ref="dragdropDiscussion" @panelDrop="setFileListDiscussion">Drop your discussion file here
|
||||
</DragDrop>
|
||||
</div>
|
||||
<div class="relative flex flex-row flex-grow mb-10">
|
||||
<div class="relative flex flex-row flex-grow mb-10 ">
|
||||
|
||||
<!-- DISCUSSION LIST -->
|
||||
<div class="mx-4 flex flex-col flex-grow" :class="isDragOverDiscussion ? 'pointer-events-none' : ''">
|
||||
<div class="mx-4 flex flex-col flex-grow " :class="isDragOverDiscussion ? 'pointer-events-none' : ''">
|
||||
|
||||
|
||||
<div id="dis-list" :class="filterInProgress ? 'opacity-20 pointer-events-none' : ''"
|
||||
@ -517,7 +517,7 @@ export default {
|
||||
}
|
||||
},
|
||||
scrollToElementInContainer(el, containerId) {
|
||||
const topPos = el.offsetTop + el.clientHeight;
|
||||
const topPos = el.offsetTop ; //+ el.clientHeight
|
||||
const container = document.getElementById(containerId)
|
||||
// console.log(el.offsetTop , el.clientHeight, container.clientHeight)
|
||||
|
||||
|
||||
@ -32,11 +32,6 @@
|
||||
|
||||
<div class="flex gap-3 flex-1 items-center justify-end">
|
||||
|
||||
|
||||
<!-- <div v-if="!isModelSelected" class="text-red-600 flex gap-3 items-center">
|
||||
<i data-feather="alert-triangle"></i>
|
||||
No model selected!
|
||||
</div> -->
|
||||
<div class="flex gap-3 items-center">
|
||||
<div v-if="settingsChanged" class="flex gap-3 items-center">
|
||||
Apply changes:
|
||||
@ -70,7 +65,7 @@
|
||||
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="sc_collapsed = !sc_collapsed"
|
||||
class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1 flex flex-row items-center ">
|
||||
class="text-2xl hover:text-primary p-2 -m-2 w-full text-left flex flex-row items-center ">
|
||||
<i data-feather="chevron-right" class="mr-2 flex-shrink-0"></i>
|
||||
|
||||
<h3 class="text-lg font-semibold cursor-pointer select-none mr-2">
|
||||
@ -149,11 +144,16 @@
|
||||
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="bzc_collapsed = !bzc_collapsed"
|
||||
class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1 flex flex-row items-center">
|
||||
class="text-2xl hover:text-primary p-2 -m-2 w-full text-left flex flex-row items-center">
|
||||
<i data-feather="chevron-right" class="mr-2 flex-shrink-0"></i>
|
||||
|
||||
<h3 class="text-lg font-semibold cursor-pointer select-none mr-2">
|
||||
Binding zoo</h3>
|
||||
<div v-if="!configFile.binding_name" class="text-base text-red-600 flex gap-3 items-center mr-2">
|
||||
<i data-feather="alert-triangle" class="flex-shrink-0"></i>
|
||||
No binding selected!
|
||||
</div>
|
||||
|
||||
<div v-if="configFile.binding_name" class="mr-2">|</div>
|
||||
|
||||
<div v-if="configFile.binding_name"
|
||||
@ -206,17 +206,25 @@
|
||||
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 p-2 -m-2 w-full text-left flex items-center">
|
||||
<i :data-feather="mzc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2 flex-shrink-0"></i>
|
||||
<h3 class="text-lg font-semibold cursor-pointer select-none mr-2">
|
||||
Models zoo</h3>
|
||||
Models zoo</h3>
|
||||
<div class="flex flex-row items-center">
|
||||
<div v-if="!isModelSelected" class="text-base text-red-600 flex gap-3 items-center mr-2">
|
||||
<i data-feather="alert-triangle" class="flex-shrink-0"></i>
|
||||
No model selected!
|
||||
</div>
|
||||
|
||||
<div v-if="configFile.model_name" class="mr-2">|</div>
|
||||
<div v-if="!configFile.binding_name"
|
||||
class="text-base text-red-600 flex gap-3 items-center mr-2">
|
||||
<i data-feather="alert-triangle" class="flex-shrink-0"></i>
|
||||
Select binding first!
|
||||
</div>
|
||||
|
||||
<div v-if="!isModelSelected && configFile.binding_name"
|
||||
class="text-base text-red-600 flex gap-3 items-center mr-2">
|
||||
<i data-feather="alert-triangle" class="flex-shrink-0"></i>
|
||||
No model selected!
|
||||
</div>
|
||||
|
||||
<div v-if="configFile.model_name" class="mr-2">|</div>
|
||||
|
||||
<div v-if="configFile.model_name" class="text-base font-semibold cursor-pointer select-none items-center">
|
||||
<div class="flex gap-1 items-center">
|
||||
@ -235,7 +243,47 @@
|
||||
|
||||
|
||||
<div :class="{ 'hidden': mzc_collapsed }" class="flex flex-col mb-2 px-3 pb-0">
|
||||
<div class="mb-2" v-if="configFile.binding_name">
|
||||
<label for="model" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||
Add models:
|
||||
</label>
|
||||
<div class="p-2 ">
|
||||
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||
for="file_input">Select
|
||||
files</label>
|
||||
|
||||
|
||||
<input
|
||||
class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
|
||||
id="multiple_files" type="file" multiple>
|
||||
</div>
|
||||
|
||||
<button type="submit"
|
||||
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Upload</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<div class="p-2 ">
|
||||
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label for="email"
|
||||
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Model
|
||||
URL</label>
|
||||
<input type="email" id="email"
|
||||
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"
|
||||
placeholder="url" required>
|
||||
</div>
|
||||
|
||||
<button type="submit"
|
||||
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Download</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</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">
|
||||
Models: ({{ models.length }})
|
||||
@ -273,22 +321,49 @@
|
||||
class="flex flex-col mb-2 rounded-lg bg-bg-light-tone dark:bg-bg-dark-tone hover:bg-bg-light-tone-panel hover:dark:bg-bg-dark-tone-panel duration-150 shadow-lg">
|
||||
|
||||
|
||||
<div class="flex flex-row p-3">
|
||||
<div class="flex flex-row p-3 items-center">
|
||||
<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">
|
||||
<i :data-feather="pzc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2 flex-shrink-0"></i>
|
||||
class="text-2xl hover:text-primary p-2 -m-2 text-left w-full flex items-center">
|
||||
<i :data-feather="pzc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2 flex-shrink-0 "></i>
|
||||
<h3 class="text-lg font-semibold cursor-pointer select-none mr-2">
|
||||
Personalities zoo</h3>
|
||||
|
||||
|
||||
<div v-if="configFile.personalities" class="mr-2">|</div>
|
||||
|
||||
<!-- LIST OF MOUNTED PERSONALITIES -->
|
||||
<div v-if="configFile.personalities"
|
||||
class=" text-base font-semibold cursor-pointer select-none items-center">
|
||||
class=" text-base font-semibold cursor-pointer select-none items-center ">
|
||||
<!-- LIST -->
|
||||
<div class="flex -space-x-4 items-center" v-if="mountedPersArr.length > 0">
|
||||
<!-- ITEM -->
|
||||
<div class="relative hover:-translate-y-2 duration-300 hover:z-10 shrink-0 "
|
||||
v-for="(item, index) in mountedPersArr" :key="index + '-' + item.name">
|
||||
<div class="group ">
|
||||
<button @click.stop="onPersonalitySelected(item)">
|
||||
|
||||
<div class="flex gap-1 items-center">
|
||||
<img :src="imgPersonality" class="w-8 h-8 rounded-full object-fill text-red-700">
|
||||
<h3 class="font-bold font-large text-lg line-clamp-1">
|
||||
{{ this.configFile.personality_folder }}
|
||||
</h3>
|
||||
<img :src="item.$refs.imgElement.src"
|
||||
class="w-8 h-8 rounded-full object-fill text-red-700 border-2 active:scale-90 group-hover:border-secondary "
|
||||
:class="item.selected ? 'border-secondary':'border-transparent z-0'"
|
||||
:title="item.personality.name"
|
||||
>
|
||||
</button>
|
||||
<button @click.stop="onPersonalityMounted(item)">
|
||||
|
||||
<span
|
||||
class="hidden group-hover:block top-0 left-7 absolute active:scale-90 bg-bg-light dark:bg-bg-dark rounded-full border-2 border-transparent"
|
||||
title="Unmount personality">
|
||||
<!-- UNMOUNT BUTTON -->
|
||||
<svg aria-hidden="true" class="w-4 h-4 text-red-600 hover:text-red-500 "
|
||||
fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd"
|
||||
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -347,8 +422,8 @@
|
||||
<TransitionGroup name="bounce">
|
||||
<personality-entry ref="personalitiesZoo" v-for="(pers, index) in personalitiesFiltered"
|
||||
:key="'index-' + index + '-' + pers.name" :personality="pers"
|
||||
:selected="pers.folder === this.configFile.personality_folder && pers.category === this.configFile.personality_category && pers.language === this.configFile.personality_language"
|
||||
:on-selected="onPersonalitySelected" />
|
||||
:selected="configFile.active_personality_id == configFile.personalities.findIndex(item => item === pers.full_path) "
|
||||
:on-selected="onPersonalitySelected" :on-mounted="onPersonalityMounted" />
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
</div>
|
||||
@ -372,7 +447,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 p-2 -m-2 w-full text-left 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>
|
||||
@ -589,16 +664,17 @@
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.bg-primary-light {
|
||||
background-color: aqua
|
||||
background-color: aqua
|
||||
}
|
||||
|
||||
.hover:bg-primary-light:hover {
|
||||
background-color: aquamarine
|
||||
background-color: aquamarine
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
@ -630,6 +706,7 @@ export default {
|
||||
Toast,
|
||||
PersonalityEntry,
|
||||
BindingEntry,
|
||||
|
||||
},
|
||||
data() {
|
||||
|
||||
@ -671,6 +748,7 @@ export default {
|
||||
isModelSelected: false,
|
||||
diskUsage: {},
|
||||
ramUsage: {},
|
||||
mountedPersArr: [],
|
||||
isMounted: false // Needed to wait for $refs to be rendered
|
||||
|
||||
|
||||
@ -745,22 +823,55 @@ export default {
|
||||
console.log(error.message, 'fetchCustomModels');
|
||||
});
|
||||
},
|
||||
onPersonalitySelected(pers) {
|
||||
async onPersonalitySelected(pers) {
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
if (this.isLoading) {
|
||||
this.$refs.toast.showToast("Loading... please wait", 4, false)
|
||||
}
|
||||
if (pers.personality) {
|
||||
if (this.configFile.personality_folder != pers.personality.folder) {
|
||||
|
||||
|
||||
this.settingsChanged = true
|
||||
const res = this.update_setting('personality_folder', pers.personality.folder, () => {
|
||||
this.$refs.toast.showToast("Selected personality:\n" + pers.personality.name, 4, true)
|
||||
this.configFile.personalities[configFile.active_personality_id] = pers.personality.language + "/" + pers.personality.category + "/" + pers.personality.name
|
||||
})
|
||||
if(pers.selected){
|
||||
this.$refs.toast.showToast("Personality already selected", 4, true)
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
this.settingsChanged = true
|
||||
|
||||
if(pers.isMounted){
|
||||
|
||||
const res= await this.select_personality(pers)
|
||||
|
||||
if(res.status){
|
||||
this.$refs.toast.showToast("Selected personality:\n" + pers.personality.name, 4, true)
|
||||
|
||||
}
|
||||
|
||||
}else{
|
||||
this.onPersonalityMounted(pers)
|
||||
|
||||
}
|
||||
|
||||
|
||||
// const res = this.update_setting('personality_folder', pers.personality.folder, () => {
|
||||
|
||||
// this.$refs.toast.showToast("Selected personality:\n" + pers.personality.name, 4, true)
|
||||
|
||||
// console.log('selecting', pers)
|
||||
// //this.mountPersonality(pers)
|
||||
// this.onPersonalityMounted(pers)
|
||||
// //this.configFile.personalities[configFile.active_personality_id] = pers.personality.language + "/" + pers.personality.category + "/" + pers.personality.name
|
||||
// if (!pers.isMounted) {
|
||||
|
||||
|
||||
// // }else{
|
||||
// // console.log('elsing')
|
||||
// // this.refresh()
|
||||
// }
|
||||
|
||||
// })
|
||||
|
||||
nextTick(() => {
|
||||
feather.replace()
|
||||
|
||||
@ -956,8 +1067,8 @@ export default {
|
||||
this.configFile.personality_folder = response["personality_name"]
|
||||
console.log("received infos")
|
||||
});
|
||||
this.api_get_req("list_personalities").then(response => {
|
||||
this.persArr = response
|
||||
this.api_get_req("list_personalities").then(response => {
|
||||
this.persArr = response
|
||||
console.log(`Listed personalities:\n${response}`)
|
||||
})
|
||||
this.api_get_req("disk_usage").then(response => {
|
||||
@ -969,6 +1080,7 @@ export default {
|
||||
//console.log('ram',this.ramUsage)
|
||||
this.getPersonalitiesArr()
|
||||
this.fetchModels();
|
||||
this.getMountedPersonalities()
|
||||
},
|
||||
// Accordeon stuff
|
||||
toggleAccordion() {
|
||||
@ -983,7 +1095,7 @@ export default {
|
||||
axios.post('/update_setting', obj).then((res) => {
|
||||
|
||||
if (res) {
|
||||
|
||||
console.log('update_setting', res)
|
||||
if (next !== undefined) {
|
||||
|
||||
next(res)
|
||||
@ -1000,7 +1112,7 @@ export default {
|
||||
this.isLoading = true
|
||||
|
||||
this.update_setting('binding_name', value, (res) => {
|
||||
|
||||
|
||||
|
||||
this.$refs.toast.showToast("Binding changed.", 4, true)
|
||||
this.settingsChanged = true
|
||||
@ -1127,6 +1239,8 @@ export default {
|
||||
this.isLoading = true
|
||||
this.personalities = []
|
||||
const dictionary = await this.api_get_req("get_all_personalities")
|
||||
const config = await this.api_get_req("get_config")
|
||||
//console.log('asdas',config)
|
||||
// console.log("all_personalities")
|
||||
// console.log(dictionary)
|
||||
const langkeys = Object.keys(dictionary); // returns languages folder names
|
||||
@ -1139,10 +1253,17 @@ export default {
|
||||
const catkey = catkeys[j];
|
||||
const personalitiesArray = catdictionary[catkey];
|
||||
const modPersArr = personalitiesArray.map((item) => {
|
||||
|
||||
const isMounted = config.personalities.includes(langkey + '/' + catkey + '/' + item.name)
|
||||
// if (isMounted) {
|
||||
// console.log(item)
|
||||
// }
|
||||
let newItem = {}
|
||||
newItem = item
|
||||
newItem.category = catkey // add new props to items
|
||||
newItem.language = langkey // add new props to items
|
||||
newItem.full_path = langkey + '/' + catkey + '/' + item.name // add new props to items
|
||||
newItem.isMounted = isMounted // add new props to items
|
||||
return newItem
|
||||
})
|
||||
|
||||
@ -1159,15 +1280,197 @@ export default {
|
||||
// console.log(this.configFile.personality_category)
|
||||
// console.log(this.configFile.personality_language)
|
||||
// console.log("Personalities")
|
||||
// console.log(this.personalities)
|
||||
//console.log(this.personalities)
|
||||
this.personalitiesFiltered = this.personalities.filter((item) => item.category === this.configFile.personality_category && item.language === this.configFile.personality_language)
|
||||
//console.log(`Personalities filtered ${this.personalitiesFiltered}`)
|
||||
|
||||
this.isLoading = false
|
||||
|
||||
},
|
||||
computedFileSize(size) {
|
||||
return filesize(size)
|
||||
},
|
||||
async mount_personality(pers) {
|
||||
if (!pers) { return { 'status': false, 'error': 'no personality - mount_personality' } }
|
||||
|
||||
|
||||
try {
|
||||
const obj = {
|
||||
language: pers.language,
|
||||
category: pers.category,
|
||||
name: pers.name
|
||||
}
|
||||
const res = await axios.post('/mount_personality', obj);
|
||||
|
||||
if (res) {
|
||||
|
||||
return res.data
|
||||
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error.message, 'mount_personality - settings')
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
async unmount_personality(pers) {
|
||||
if (!pers) { return { 'status': false, 'jig': 'no personality - unmount_personality' } }
|
||||
|
||||
const obj = {
|
||||
language: pers.language,
|
||||
category: pers.category,
|
||||
name: pers.name
|
||||
}
|
||||
|
||||
|
||||
try {
|
||||
const res = await axios.post('/unmount_personality', obj);
|
||||
|
||||
if (res) {
|
||||
|
||||
return res.data
|
||||
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error.message, 'unmount_personality - settings')
|
||||
return
|
||||
}
|
||||
|
||||
},
|
||||
async select_personality(pers) {
|
||||
if (!pers) { return { 'status': false, 'jig': 'no personality - select_personality' } }
|
||||
console.log('select pers',pers)
|
||||
const id = this.configFile.personalities.findIndex(item=> item === pers.personality.full_path)
|
||||
|
||||
const obj = {
|
||||
id: id
|
||||
}
|
||||
|
||||
|
||||
try {
|
||||
const res = await axios.post('/select_personality', obj);
|
||||
|
||||
if (res) {
|
||||
this.configFile = await this.api_get_req("get_config")
|
||||
return res.data
|
||||
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error.message, 'select_personality - settings')
|
||||
return
|
||||
}
|
||||
|
||||
},
|
||||
async mountPersonality(pers) {
|
||||
console.log('mount pers', pers)
|
||||
if (!pers) { return }
|
||||
|
||||
if (this.configFile.personalities.includes(pers.personality.full_path)) {
|
||||
this.$refs.toast.showToast("Personality already mounted", 4, false)
|
||||
return
|
||||
}
|
||||
|
||||
const res = await this.mount_personality(pers.personality)
|
||||
console.log('mount_personality res', res)
|
||||
|
||||
if (res.status) {
|
||||
this.configFile.personalities = res.personalities
|
||||
this.$refs.toast.showToast("Personality mounted", 4, true)
|
||||
pers.isMounted = true
|
||||
|
||||
const res2 = await this.select_personality(pers)
|
||||
if (res2.status) {
|
||||
this.$refs.toast.showToast("Selected personality:\n" + pers.personality.name, 4, true)
|
||||
|
||||
}
|
||||
this.getMountedPersonalities()
|
||||
} else {
|
||||
pers.isMounted = false
|
||||
this.$refs.toast.showToast("Could not mount personality\nError: "+ res.error, 4, false)
|
||||
}
|
||||
|
||||
},
|
||||
async unmountPersonality(pers) {
|
||||
if (!pers) { return }
|
||||
|
||||
const res = await this.unmount_personality(pers.personality)
|
||||
|
||||
|
||||
if (res.status) {
|
||||
this.configFile.personalities = res.personalities
|
||||
this.$refs.toast.showToast("Personality unmounted", 4, true)
|
||||
pers.isMounted = false
|
||||
this.getMountedPersonalities()
|
||||
// Select some other personality
|
||||
const lastPers = this.mountedPersArr[this.mountedPersArr.length-1]
|
||||
|
||||
console.log(lastPers, this.mountedPersArr.length)
|
||||
const res2 = await this.select_personality(lastPers)
|
||||
if (res2.status) {
|
||||
this.$refs.toast.showToast("Selected personality:\n" + lastPers.personality.name, 4, true)
|
||||
|
||||
}
|
||||
|
||||
|
||||
} else {
|
||||
this.$refs.toast.showToast("Could not unmount personality\nError: "+res.error, 4, false)
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
getMountedPersonalities() {
|
||||
|
||||
let mountedPersArr = []
|
||||
if (this.configFile.personalities.length > 0) {
|
||||
|
||||
for (let i = 0; i < this.configFile.personalities.length; i++) {
|
||||
const full_path_item = this.configFile.personalities[i]
|
||||
|
||||
const index = this.$refs.personalitiesZoo.findIndex(item => item.personality.full_path == full_path_item)
|
||||
if (index) {
|
||||
|
||||
const pers = this.$refs.personalitiesZoo[index]
|
||||
if (pers) {
|
||||
mountedPersArr.push(pers)
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
this.mountedPersArr = []
|
||||
this.mountedPersArr = mountedPersArr
|
||||
//this.mountedPersArr = mountedPersArr
|
||||
console.log('getMountedPersonalities', mountedPersArr.length)
|
||||
|
||||
|
||||
},
|
||||
onPersonalityMounted(persItem) {
|
||||
|
||||
|
||||
if (this.configFile.personalities.includes(persItem.personality.full_path)) {
|
||||
//this.$refs.toast.showToast("Personality already mounted", 4, false)
|
||||
//return
|
||||
//persItem.ismounted = false
|
||||
if(this.configFile.personalities.length==1){
|
||||
this.$refs.toast.showToast("Can't unmount last personality", 4, false)
|
||||
|
||||
}else{
|
||||
this.unmountPersonality(persItem)
|
||||
|
||||
}
|
||||
} else {
|
||||
//persItem.ismounted = true
|
||||
this.mountPersonality(persItem)
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}, async mounted() {
|
||||
@ -1199,8 +1502,9 @@ export default {
|
||||
this.isLoading = false
|
||||
this.diskUsage = await this.api_get_req("disk_usage")
|
||||
this.ramUsage = await this.api_get_req("ram_usage")
|
||||
console.log('ran', this.ramUsage)
|
||||
|
||||
this.isMounted = true
|
||||
this.getMountedPersonalities()
|
||||
|
||||
},
|
||||
computed: {
|
||||
@ -1266,6 +1570,7 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
watch: {
|
||||
bec_collapsed() {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user