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

made yesand no upgrades

Browse Source
This commit is contained in:
AndzejsP 2023-06-17 13:53:40 +03:00
parent 0d2d74fb33
commit 29a3e16194
5 changed files with 105 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,28 +4,33 @@
<ul class="flex flex-col font-medium p-4 md:p-0 mt-4 md:flex-row md:space-x-8 md:mt-0 "> <ul class="flex flex-col font-medium p-4 md:p-0 mt-4 md:flex-row md:space-x-8 md:mt-0 ">
<li> <li>
<RouterLink :to="{ name: 'discussions' }" class="p-2" active-class="p-2 bg-bg-light-tone dark:bg-bg-dark-tone rounded-t-lg "> <RouterLink :to="{ name: 'discussions' }" class="p-2"
active-class="p-2 bg-bg-light-tone dark:bg-bg-dark-tone rounded-t-lg ">
<a href="#" class=" hover:text-primary duration-150">Discussions</a> <a href="#" class=" hover:text-primary duration-150">Discussions</a>
</RouterLink> </RouterLink>
</li> </li>
<li> <li>
<RouterLink :to="{ name: 'settings' }" class="p-2" active-class="p-2 bg-bg-light-tone dark:bg-bg-dark-tone rounded-t-lg "> <RouterLink :to="{ name: 'settings' }" class="p-2"
active-class="p-2 bg-bg-light-tone dark:bg-bg-dark-tone rounded-t-lg ">
<a href="#" class=" hover:text-primary duration-150">Settings</a> <a href="#" class=" hover:text-primary duration-150">Settings</a>
</RouterLink> </RouterLink>
</li> </li>
<li> <li>
<RouterLink :to="{ name: 'extensions' }" class="p-2" active-class="p-2 bg-bg-light-tone dark:bg-bg-dark-tone rounded-t-lg "> <RouterLink :to="{ name: 'extensions' }" class="p-2"
active-class="p-2 bg-bg-light-tone dark:bg-bg-dark-tone rounded-t-lg ">
<a href="#" class=" hover:text-primary duration-150">Extensions</a> <a href="#" class=" hover:text-primary duration-150">Extensions</a>
</RouterLink> </RouterLink>
</li> </li>
<li> <li>
<RouterLink :to="{ name: 'training' }" class="p-2" active-class="p-2 bg-bg-light-tone dark:bg-bg-dark-tone rounded-t-lg "> <RouterLink :to="{ name: 'training' }" class="p-2"
active-class="p-2 bg-bg-light-tone dark:bg-bg-dark-tone rounded-t-lg ">
<a href="#" class=" hover:text-primary duration-150">Training</a> <a href="#" class=" hover:text-primary duration-150">Training</a>
</RouterLink> </RouterLink>
</li> </li>
<li> <li>
<RouterLink :to="{ name: 'help' }" class="p-2" active-class="p-2 bg-bg-light-tone dark:bg-bg-dark-tone rounded-t-lg "> <RouterLink :to="{ name: 'help' }" class="p-2"
active-class="p-2 bg-bg-light-tone dark:bg-bg-dark-tone rounded-t-lg ">
<a href="#" class=" hover:text-primary duration-150">Help</a> <a href="#" class=" hover:text-primary duration-150">Help</a>
</RouterLink> </RouterLink>
</li> </li>
@ -35,7 +40,25 @@
</template> </template>
<script setup> <script setup>
import {nextTick} from 'vue' import { nextTick } from 'vue'
import feather from 'feather-icons' import feather from 'feather-icons'
import { RouterLink } from 'vue-router' import { RouterLink } from 'vue-router'
</script>
<script>
export default {
data() {
return {
};
},
activated() {
},
methods: {
},
};
</script> </script>

15
web/src/components/YesNoDialog.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div v-if="show" class="fixed top-0 left-0 right-0 bottom-0 flex items-center justify-center bg-black bg-opacity-50"> <div v-if="show" class="fixed top-0 left-0 right-0 bottom-0 flex items-center justify-center bg-black bg-opacity-50">
<div class="relative w-full max-w-md max-h-full"> <div class="relative w-full max-w-md max-h-full ">
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700"> <div class="relative bg-white rounded-lg shadow dark:bg-gray-700 ">
<button type="button" @click="hide(false)" <button type="button" @click="hide(false)"
class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white"> class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white">
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
@ -21,11 +21,10 @@
<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400 select-none">{{ message }}</h3> <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400 select-none">{{ message }}</h3>
<button @click="hide(true)" type="button" <button @click="hide(true)" type="button"
class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2"> class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2">
Yes, I'm sure {{ConfirmButtonText}}
</button> </button>
<button @click="hide(false)" type="button" <button @click="hide(false)" type="button"
class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">No, class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">{{DenyButtonText}}</button>
cancel</button>
</div> </div>
</div> </div>
</div> </div>
@ -39,6 +38,8 @@ export default {
show: false, show: false,
message: "", message: "",
resolve: null, resolve: null,
ConfirmButtonText: "Yes, I'm sure",
DenyButtonText: "No, cancel",
}; };
}, },
methods: { methods: {
@ -49,7 +50,9 @@ export default {
this.resolve = null; this.resolve = null;
} }
}, },
askQuestion(message) { askQuestion(message, ConfirmButtonText, DenyButtonText) {
this.ConfirmButtonText =ConfirmButtonText || this.ConfirmButtonText
this.DenyButtonText =DenyButtonText || this.DenyButtonText
return new Promise((resolve) => { return new Promise((resolve) => {
this.message = message; this.message = message;
this.show = true; this.show = true;

11
web/src/main.js
View File

@ -11,14 +11,15 @@ const app = createApp(App)
const store = createStore({ const store = createStore({
state () { state () {
return { return {
count: 0, // count: 0,
mountedPersonalities: {} mountedPersonalities: {},
settingsChanged:false
} }
}, },
mutations: { mutations: {
increment (state) { // increment (state) {
state.count++ // state.count++
} // }
} }
}) })

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

@ -1196,7 +1196,7 @@ export default {
// To fix scrolling back to last message, this hook is needed. // To fix scrolling back to last message, this hook is needed.
// If anyone knows hor to fix scroll issue when changing pages, please do fix it :D // If anyone knows hor to fix scroll issue when changing pages, please do fix it :D
console.log("Websocket connected (activated)", this.socketConnected) console.log("Websocket connected (activated)", this.socketConnected)
console.log('settings changed acc', this.$store.state.settingsChanged)
await this.getPersonalityAvatars() await this.getPersonalityAvatars()
if (this.isCreated) { if (this.isCreated) {

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

@ -163,7 +163,7 @@
<img :src="imgBinding" class="w-8 h-8 rounded-full object-fill text-blue-700"> <img :src="imgBinding" class="w-8 h-8 rounded-full object-fill text-blue-700">
<h3 class="font-bold font-large text-lg line-clamp-1"> <h3 class="font-bold font-large text-lg line-clamp-1">
<!-- {{ configFile.binding_name }} --> <!-- {{ configFile.binding_name }} -->
{{binding_name}} {{ binding_name }}
</h3> </h3>
</div> </div>
</div> </div>
@ -331,17 +331,18 @@
<div v-if="configFile.personalities" class="mr-2">|</div> <div v-if="configFile.personalities" class="mr-2">|</div>
<!-- LIST OF MOUNTED PERSONALITIES --> <!-- LIST OF MOUNTED PERSONALITIES -->
<div class="mr-2 font-bold font-large text-lg line-clamp-1"> <div class="mr-2 font-bold font-large text-lg line-clamp-1">
{{active_pesonality }} {{ active_pesonality }}
</div> </div>
<div v-if="configFile.personalities" class="mr-2">|</div> <div v-if="configFile.personalities" class="mr-2">|</div>
<div v-if="configFile.personalities" <div v-if="configFile.personalities"
class=" text-base font-semibold cursor-pointer select-none items-center flex flex-row"> class=" text-base font-semibold cursor-pointer select-none items-center flex flex-row">
<!-- LIST --> <!-- LIST -->
<div class="flex -space-x-4 items-center " v-if="mountedPersArr.length > 0" > <div class="flex -space-x-4 items-center " v-if="mountedPersArr.length > 0">
<!-- ITEM --> <!-- ITEM -->
<div class="relative hover:-translate-y-2 duration-300 hover:z-10 shrink-0 " <div class="relative hover:-translate-y-2 duration-300 hover:z-10 shrink-0 "
v-for="(item, index) in mountedPersArr" :key="index + '-' + item.name" ref="mountedPersonalities"> v-for="(item, index) in mountedPersArr" :key="index + '-' + item.name"
ref="mountedPersonalities">
<div class="group items-center flex flex-row"> <div class="group items-center flex flex-row">
<button @click.stop="onPersonalitySelected(item)"> <button @click.stop="onPersonalitySelected(item)">
@ -620,7 +621,7 @@
</div> </div>
<YesNoDialog ref="yesNoDialog" /> <YesNoDialog ref="yesNoDialog" class="z-20"/>
<AddModelDialog ref="addmodeldialog" /> <AddModelDialog ref="addmodeldialog" />
<MessageBox ref="messageBox" /> <MessageBox ref="messageBox" />
<Toast ref="toast" /> <Toast ref="toast" />
@ -837,12 +838,13 @@ export default {
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 this.isLoading = true
console.log('ppa',pers) console.log('ppa', pers)
if (pers) { if (pers) {
if (pers.selected) { if (pers.selected) {
this.$refs.toast.showToast("Personality already selected", 4, true) this.$refs.toast.showToast("Personality already selected", 4, true)
this.isLoading = false
return return
} }
@ -868,7 +870,7 @@ export default {
feather.replace() feather.replace()
}) })
this.isLoading=false this.isLoading = false
} }
}, },
@ -1158,7 +1160,7 @@ export default {
this.$refs.toast.showToast("Configuration changed successfully.", 4, true) this.$refs.toast.showToast("Configuration changed successfully.", 4, true)
this.settingsChanged = false this.settingsChanged = false
this.save_configuration() //this.save_configuration()
} else { } else {
this.$refs.toast.showToast("Configuration change failed.", 4, false) this.$refs.toast.showToast("Configuration change failed.", 4, false)
@ -1367,12 +1369,14 @@ export default {
}, },
async mountPersonality(pers) { async mountPersonality(pers) {
this.isLoading=true this.isLoading = true
console.log('mount pers', pers) console.log('mount pers', pers)
if (!pers) { return } if (!pers) { return }
if (this.configFile.personalities.includes(pers.personality.full_path)) { if (this.configFile.personalities.includes(pers.personality.full_path)) {
this.isLoading = false
this.$refs.toast.showToast("Personality already mounted", 4, false) this.$refs.toast.showToast("Personality already mounted", 4, false)
return return
} }
@ -1394,11 +1398,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 this.isLoading = false
}, },
async unmountPersonality(pers) { async unmountPersonality(pers) {
this.isLoading=true 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)
@ -1443,7 +1447,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 this.isLoading = false
}, },
getMountedPersonalities() { getMountedPersonalities() {
@ -1453,13 +1457,13 @@ export default {
for (let i = 0; i < this.configFile.personalities.length; i++) { for (let i = 0; i < this.configFile.personalities.length; i++) {
const full_path_item = this.configFile.personalities[i] const full_path_item = this.configFile.personalities[i]
const index = this.personalities.findIndex(item => item.full_path == full_path_item) const index = this.personalities.findIndex(item => item.full_path == full_path_item)
console.log('index',index) console.log('index', index)
console.log("i:",i) console.log("i:", i)
const pers = this.personalities[index] const pers = this.personalities[index]
if (pers) { if (pers) {
mountedPersArr.push(pers) mountedPersArr.push(pers)
} }
else{ else {
mountedPersArr.push(this.personalities[this.personalities.findIndex(item => item.full_path == "english/generic/lollms")]) mountedPersArr.push(this.personalities[this.personalities.findIndex(item => item.full_path == "english/generic/lollms")])
} }
} }
@ -1468,14 +1472,14 @@ export default {
//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.personality_category)
nextTick(()=>{ nextTick(() => {
console.log('accc',this.$refs.mountedPersonalities) console.log('accc', this.$refs.mountedPersonalities)
//this.$store.state.mountedPersonalities = this.$refs.mountedPersonalities //this.$store.state.mountedPersonalities = this.$refs.mountedPersonalities
}) })
}, },
onPersonalityMounted(persItem) { onPersonalityMounted(persItem) {
this.isLoading=true this.isLoading = true
console.log('on sel ', persItem) console.log('on sel ', persItem)
if (this.configFile.personalities.includes(persItem.full_path)) { if (this.configFile.personalities.includes(persItem.full_path)) {
@ -1495,7 +1499,7 @@ export default {
} }
this.isLoading=true this.isLoading = false
}, },
personalityImgPlacehodler(event) { personalityImgPlacehodler(event) {
event.target.src = defaultPersonalityImgPlaceholder event.target.src = defaultPersonalityImgPlaceholder
@ -1553,9 +1557,8 @@ export default {
}, },
activated(){ activated() {
// console.log('accc',this.$refs.mountedPersonalities)
// this.$store.state.mountedPersonalities = this.$refs.mountedPersonalities
}, },
computed: { computed: {
disk_available_space() { disk_available_space() {
@ -1608,27 +1611,27 @@ export default {
return defaultModelImgPlaceholder return defaultModelImgPlaceholder
} }
}, },
binding_name(){ binding_name() {
if (!this.isMounted) { if (!this.isMounted) {
return return
} }
const index =this.bindingsArr.findIndex(item=>item.folder === this.configFile.binding_name) const index = this.bindingsArr.findIndex(item => item.folder === this.configFile.binding_name)
if(index>-1){ if (index > -1) {
return this.bindingsArr[index].name return this.bindingsArr[index].name
}else{ } else {
return return
} }
}, },
active_pesonality(){ active_pesonality() {
if (!this.isMounted) { if (!this.isMounted) {
return return
} }
const index =this.personalities.findIndex(item => item.full_path ===this.configFile.personalities[this.configFile.active_personality_id]) const index = this.personalities.findIndex(item => item.full_path === this.configFile.personalities[this.configFile.active_personality_id])
if (index>-1){ if (index > -1) {
return this.personalities[index].name return this.personalities[index].name
}else{ } else {
return return
} }
@ -1636,17 +1639,6 @@ export default {
} }
// imgPersonality() {
// if (!this.isMounted) {
// return
// }
// try {
// return this.$refs.personalitiesZoo[this.$refs.personalitiesZoo.findIndex(item => item.personality.folder == this.configFile.personality_folder)].$refs.imgElement.src
// }
// catch (error) {
// return defaultPersonalityImgPlaceholder
// }
// },
}, },
@ -1712,7 +1704,7 @@ export default {
}, },
settingsChanged(val) { settingsChanged(val) {
//this.$store.settingsChanged=val this.$store.state.settingsChanged = val
nextTick(() => { nextTick(() => {
feather.replace() feather.replace()
@ -1725,7 +1717,23 @@ export default {
}) })
}, },
},
async beforeRouteLeave(to) {
// console.log('did settings?',this.settingsChanged)
await this.$router.isReady()
if (this.settingsChanged){
const res = await this.$refs.yesNoDialog.askQuestion("You forgot to apply changes?\nYou need to apply changes before you leave, or else.",'Apply configuration','Cancel')
if(res){
this.applyConfiguration()
} }
return false
}
},
} }
</script> </script>