ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2025-01-31 00:23:52 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

wip2

Browse Source
This commit is contained in:
AndzejsP 2023-06-28 08:49:40 +03:00
parent ccbf3fa283
commit 26dca4ac64
3 changed files with 63 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -87,15 +87,15 @@
</button> </button>
</div> </div>
<div v-if="showPersonalities" class="flex items-center mx-1"> <div v-if="showPersonalities" class="flex items-center mx-1">
<MountedPersonalitiesList @click.stop=""/> <MountedPersonalitiesList ref="mountedPersList" />
</div> </div>
<!-- CHAT BOX --> <!-- CHAT BOX -->
<div class="flex flex-row flex-grow items-center gap-2 overflow-visible"> <div class="flex flex-row flex-grow items-center gap-2 overflow-visible">
<div class="w-24 overflow-visible"> <div class="w-fit">
<MountedPersonalities @click.stop=""/> <MountedPersonalities :onShowPersList="onShowPersList" />
</div> </div>
<div class="relative grow"> <div class="relative grow">
<textarea id="chat" rows="1" v-model="message" title="Hold SHIFT + ENTER to add new line" <textarea id="chat" rows="1" v-model="message" title="Hold SHIFT + ENTER to add new line"
@ -144,7 +144,6 @@
</div> </div>
</form> </form>
</div> </div>
</template> </template>
<style scoped> <style scoped>
/* THESE ARE FOR TransitionGroup components */ /* THESE ARE FOR TransitionGroup components */
@ -185,8 +184,7 @@ export default {
emits: ["messageSentEvent", "stopGenerating"], emits: ["messageSentEvent", "stopGenerating"],
props: { props: {
loading: false, loading: false
discussionList:[]
}, },
components: { components: {
@ -203,10 +201,14 @@ export default {
message: "", message: "",
fileList: [], fileList: [],
totalSize: 0, totalSize: 0,
showPersonalities:true showPersonalities: false
} }
}, },
methods: { methods: {
onShowPersList(comp) {
this.showPersonalities = comp.show
},
computedFileSize(size) { computedFileSize(size) {
nextTick(() => { nextTick(() => {
feather.replace() feather.replace()

85
web/src/components/MountedPersonalities.vue
View File

@ -1,37 +1,24 @@
<template> <template>
<!-- LIST OF MOUNTED PERSONALITIES --> <!-- LIST OF MOUNTED PERSONALITIES -->
<div
class="overflow-visible text-base font-semibold cursor-pointer select-none items-center flex flex-row overflow-x-auto -my-2 pr-2 scrollbar-thin scrollbar-track-bg-light scrollbar-thumb-bg-light-tone hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark dark:scrollbar-thumb-bg-dark-tone dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary">
<!-- LIST -->
<div class="flex -space-x-4 items-center overflow-visible my-2 mx-2">
<!-- ITEM -->
<div class="relative hover:-translate-y-2 duration-300 hover:z-10 shrink-0 overflow-visible"
v-for="(item, index) in mountedPersArr" :key="index + '-' + item.name">
<div class="group items-center flex flex-row overflow-visible">
<button @click.stop="onPersonalitySelected(item)">
<img :src="bUrl + item.avatar" @error="personalityImgPlacehodler"
class="w-8 h-8 rounded-full object-fill text-red-700 border-2 active:scale-90 group-hover:border-secondary "
:class="configFile.active_personality_id == configFile.personalities.indexOf(item.full_path) ? 'border-secondary' : 'border-transparent z-0'"
:title="item.name">
</button>
<button @click.stop="onPersonalityMounted(item)">
<span <div class="w-fit select-none">
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 class="flex -space-x-4 " v-if="mountedPersArr.length > 1">
</div>
</div>
<img :src="bUrl + mountedPers.avatar" @error="personalityImgPlacehodler"
class="w-8 h-8 rounded-full object-fill text-red-700 border-2 active:scale-90 group-hover:border-secondary border-secondary"
:title="mountedPers.name">
<div class="flex items-center justify-center w-8 h-8 cursor-pointer text-xs font-medium text-white bg-gray-700 border-2 border-white rounded-full hover:bg-gray-600 dark:border-gray-800"
@click.stop="toggleShowPersList" title="Click to show more">+{{ mountedPersArr.length - 1 }}</div>
</div>
<div class="flex -space-x-4 " v-if="mountedPersArr.length == 1">
<img :src="bUrl + mountedPers.avatar" @error="personalityImgPlacehodler"
class="w-8 h-8 rounded-full object-fill text-red-700 border-2 active:scale-90 group-hover:border-secondary cursor-pointer border-secondary"
:title="mountedPers.name" @click.stop="toggleShowPersList">
</div> </div>
</div> </div>
@ -45,6 +32,9 @@ const bUrl = import.meta.env.VITE_GPT4ALL_API_BASEURL
axios.defaults.baseURL = import.meta.env.VITE_GPT4ALL_API_BASEURL axios.defaults.baseURL = import.meta.env.VITE_GPT4ALL_API_BASEURL
export default { export default {
name: 'MountedPersonalities', name: 'MountedPersonalities',
props: {
onShowPersList: Function,
},
setup() { setup() {
@ -54,7 +44,9 @@ export default {
personalities: [], personalities: [],
bUrl: bUrl, bUrl: bUrl,
isMounted: false, isMounted: false,
isLoading:false mountedPers: {},
show: false
} }
}, },
async mounted() { async mounted() {
@ -68,6 +60,10 @@ export default {
}, },
methods: { methods: {
toggleShowPersList() {
this.show = !this.show
this.onShowPersList(this)
},
async constructor() { async constructor() {
this.configFile = await this.api_get_req("get_config") this.configFile = await this.api_get_req("get_config")
let personality_path_infos = await this.api_get_req("get_current_personality_path_infos") let personality_path_infos = await this.api_get_req("get_current_personality_path_infos")
@ -79,6 +75,7 @@ export default {
this.getMountedPersonalities() this.getMountedPersonalities()
this.$forceUpdate() this.$forceUpdate()
}) })
}, },
async api_get_req(endpoint) { async api_get_req(endpoint) {
try { try {
@ -97,7 +94,7 @@ export default {
}, },
async getPersonalitiesArr() { async getPersonalitiesArr() {
this.isLoading = true
this.personalities = [] this.personalities = []
const dictionary = await this.api_get_req("get_all_personalities") const dictionary = await this.api_get_req("get_all_personalities")
const config = await this.api_get_req("get_config") const config = await this.api_get_req("get_config")
@ -140,10 +137,10 @@ export default {
} }
this.personalities.sort((a, b) => a.name.localeCompare(b.name)) this.personalities.sort((a, b) => a.name.localeCompare(b.name))
this.personalitiesFiltered = this.personalities.filter((item) => item.category === this.configFile.personality_category && item.language === this.configFile.personality_language) // this.personalitiesFiltered = this.personalities.filter((item) => item.category === this.configFile.personality_category && item.language === this.configFile.personality_language)
this.personalitiesFiltered.sort() // this.personalitiesFiltered.sort()
this.isLoading = false
}, },
personalityImgPlacehodler(event) { personalityImgPlacehodler(event) {
@ -168,14 +165,14 @@ export default {
} }
this.isLoading = true
}, },
async onPersonalitySelected(pers) { async onPersonalitySelected(pers) {
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
if (this.isLoading) { if (this.isLoading) {
this.$refs.toast.showToast("Loading... please wait", 4, false) this.$refs.toast.showToast("Loading... please wait", 4, false)
} }
this.isLoading = true
console.log('ppa', pers) console.log('ppa', pers)
if (pers) { if (pers) {
@ -204,7 +201,7 @@ export default {
} }
this.isLoading = false
} }
}, },
@ -241,9 +238,9 @@ export default {
try { try {
this.isLoading = true
const res = await axios.post('/unmount_personality', obj); const res = await axios.post('/unmount_personality', obj);
this.isLoading = false
if (res) { if (res) {
return res.data return res.data
@ -283,7 +280,7 @@ export default {
}, },
async mountPersonality(pers) { async mountPersonality(pers) {
this.isLoading = true
console.log('mount pers', pers) console.log('mount pers', pers)
if (!pers) { return } if (!pers) { return }
@ -310,11 +307,11 @@ export default {
pers.isMounted = false pers.isMounted = false
this.$refs.toast.showToast("Could not mount personality\nError: " + res.error, 4, false) this.$refs.toast.showToast("Could not mount personality\nError: " + res.error, 4, false)
} }
this.isLoading = false
}, },
async unmountPersonality(pers) { async unmountPersonality(pers) {
this.isLoading = true
if (!pers) { return } if (!pers) { return }
const res = await this.unmount_personality(pers.personality || pers) const res = await this.unmount_personality(pers.personality || pers)
@ -359,7 +356,7 @@ export default {
this.$refs.toast.showToast("Could not unmount personality\nError: " + res.error, 4, false) this.$refs.toast.showToast("Could not unmount personality\nError: " + res.error, 4, false)
} }
this.isLoading = false
}, },
getMountedPersonalities() { getMountedPersonalities() {
@ -384,6 +381,8 @@ export default {
console.log('getMountedPersonalities', mountedPersArr) console.log('getMountedPersonalities', mountedPersArr)
console.log('fig', this.configFile.personality_category) console.log('fig', this.configFile.personality_category)
this.mountedPers = this.personalities[this.personalities.findIndex(item => item.full_path == this.configFile.personalities[this.configFile.active_personality_id])]
}, },
} }
} }

19
web/src/components/MountedPersonalitiesList.vue
View File

@ -11,7 +11,7 @@
<TransitionGroup name="bounce"> <TransitionGroup name="bounce">
<personality-entry ref="personalitiesZoo" v-for="(pers, index) in mountedPersArr" <personality-entry ref="personalitiesZoo" v-for="(pers, index) in mountedPersArr"
:key="'index-' + index + '-' + pers.name" :personality="pers" :full_path="pers.full_path" :key="'index-' + index + '-' + pers.name" :personality="pers" :full_path="pers.full_path"
:selected="configFile.active_personality_id == configFile.personalities.findIndex(item => item === pers.full_path)" :selected="configFile.personalities[configFile.active_personality_id]==pers.full_path"
:on-selected="onPersonalitySelected" :on-mounted="onPersonalityMounted" :on-selected="onPersonalitySelected" :on-mounted="onPersonalityMounted"
:on-settings="onSettingsPersonality" /> :on-settings="onSettingsPersonality" />
</TransitionGroup> </TransitionGroup>
@ -22,6 +22,7 @@
<Toast ref="toast"> <Toast ref="toast">
</Toast> </Toast>
<UniversalForm ref="universalForm" class="z-20" />
</div> </div>
</template> </template>
@ -30,6 +31,7 @@ import axios from "axios";
import defaultPersonalityImgPlaceholder from "../assets/logo.svg" import defaultPersonalityImgPlaceholder from "../assets/logo.svg"
import PersonalityEntry from './PersonalityEntry.vue' import PersonalityEntry from './PersonalityEntry.vue'
import Toast from './Toast.vue' import Toast from './Toast.vue'
import UniversalForm from './UniversalForm.vue';
const bUrl = import.meta.env.VITE_GPT4ALL_API_BASEURL const bUrl = import.meta.env.VITE_GPT4ALL_API_BASEURL
axios.defaults.baseURL = import.meta.env.VITE_GPT4ALL_API_BASEURL axios.defaults.baseURL = import.meta.env.VITE_GPT4ALL_API_BASEURL
export default { export default {
@ -41,6 +43,7 @@ export default {
components: { components: {
PersonalityEntry, PersonalityEntry,
Toast, Toast,
UniversalForm,
}, },
name: 'MountedPersonalitiesList', name: 'MountedPersonalitiesList',
setup() { setup() {
@ -56,7 +59,7 @@ export default {
} }
}, },
async mounted() { async mounted() {
await this.constructor() await this.constructor()
this.isMounted = true this.isMounted = true
}, },
async activated() { async activated() {
@ -73,10 +76,7 @@ export default {
this.configFile.personality_category = personality_path_infos["personality_category"] this.configFile.personality_category = personality_path_infos["personality_category"]
this.configFile.personality_folder = personality_path_infos["personality_name"] this.configFile.personality_folder = personality_path_infos["personality_name"]
await this.getPersonalitiesArr().then(() => { await this.getPersonalitiesArr()
this.getMountedPersonalities()
this.$forceUpdate()
})
}, },
async api_get_req(endpoint) { async api_get_req(endpoint) {
try { try {
@ -143,6 +143,9 @@ export default {
this.isLoading = false this.isLoading = false
this.getMountedPersonalities()
this.$forceUpdate()
}, },
personalityImgPlacehodler(event) { personalityImgPlacehodler(event) {
event.target.src = defaultPersonalityImgPlaceholder event.target.src = defaultPersonalityImgPlaceholder
@ -193,7 +196,7 @@ export default {
await this.constructor() await this.constructor()
this.$refs.toast.showToast("Selected personality:\n" + pers.name, 4, true) this.$refs.toast.showToast("Selected personality:\n" + pers.name, 4, true)
} }
} }
@ -430,7 +433,7 @@ export default {
this.mountedPersArr = mountedPersArr this.mountedPersArr = mountedPersArr
//this.mountedPersArr = mountedPersArr //this.mountedPersArr = mountedPersArr
console.log('getMountedPersonalities', mountedPersArr) console.log('getMountedPersonalities', mountedPersArr)
console.log('fig', this.configFile.personality_category) console.log('fig', this.configFile)
}, },
} }