mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2024-12-19 04:17:52 +00:00
wip
This commit is contained in:
AndzejsP
parent
35d6c3a08b
commit
84b7c4325d
9
web/package-lock.json
generated
9
web/package-lock.json
generated
@ -8,6 +8,7 @@
|
||||
"name": "gpt4all-ui-vue",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@tailwindcss/line-clamp": "^0.4.4",
|
||||
"axios": "^1.3.6",
|
||||
"feather-icons": "^4.29.0",
|
||||
"flowbite": "^1.6.5",
|
||||
@ -598,6 +599,14 @@
|
||||
"resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
|
||||
"integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg=="
|
||||
},
|
||||
"node_modules/@tailwindcss/line-clamp": {
|
||||
"version": "0.4.4",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz",
|
||||
"integrity": "sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g==",
|
||||
"peerDependencies": {
|
||||
"tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/web-bluetooth": {
|
||||
"version": "0.0.15",
|
||||
"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.15.tgz",
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
"format": "prettier --write src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tailwindcss/line-clamp": "^0.4.4",
|
||||
"axios": "^1.3.6",
|
||||
"feather-icons": "^4.29.0",
|
||||
"flowbite": "^1.6.5",
|
||||
|
||||
79
web/src/components/PersonalityEntry.vue
Normal file
79
web/src/components/PersonalityEntry.vue
Normal file
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div class=" items-start p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer"
|
||||
@click.stop="toggleSelected" :class="selected ? ' border-primary-light' : 'border-transparent'">
|
||||
<h3 class="font-bold font-large text-lg">
|
||||
{{ personality.name }}
|
||||
</h3>
|
||||
|
||||
<div class="flex flex-row items-center flex-shrink-0 gap-3">
|
||||
<img :src="getImgUrl()" class="w-14 h-14 rounded-full object-fill text-red-700">
|
||||
|
||||
|
||||
<div class="">
|
||||
|
||||
<div class="">
|
||||
<b>Author: </b>
|
||||
{{ personality.author }}
|
||||
</div>
|
||||
<div class="">
|
||||
<b>Language: </b>
|
||||
{{ personality.language }}
|
||||
</div>
|
||||
<div class="">
|
||||
<b>Category: </b>
|
||||
{{ personality.category }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
|
||||
<b>Description: </b><br>
|
||||
|
||||
<p class="opacity-80 line-clamp-3" :title="personality.description">{{ personality.description }}</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { nextTick } from 'vue'
|
||||
import feather from 'feather-icons'
|
||||
import botImgPlaceholder from "../assets/logo.svg"
|
||||
import userImgPlaceholder from "../assets/default_user.svg"
|
||||
const bUrl = import.meta.env.VITE_GPT4ALL_API_BASEURL
|
||||
export default {
|
||||
props: {
|
||||
personality: {},
|
||||
onSelected: Function,
|
||||
selected: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
nextTick(() => {
|
||||
feather.replace()
|
||||
|
||||
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getImgUrl() {
|
||||
|
||||
if (this.personality.avatar) {
|
||||
return bUrl+this.personality.avatar
|
||||
|
||||
}
|
||||
return botImgPlaceholder;
|
||||
},
|
||||
toggleSelected() {
|
||||
this.onSelected(this)
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -128,8 +128,9 @@
|
||||
<div ref="modelZoo" class="overflow-y-auto no-scrollbar p-2 pb-0"
|
||||
:class="mzl_collapsed ? '' : 'max-h-96'">
|
||||
<model-entry v-for="(model, index) in models" :key="index" :title="model.title" :icon="model.icon"
|
||||
:path="model.path" :owner="model.owner" :owner_link="model.owner_link" :license="model.license" :description="model.description" :is-installed="model.isInstalled"
|
||||
:on-install="onInstall" :on-uninstall="onUninstall" :on-selected="onSelected"
|
||||
:path="model.path" :owner="model.owner" :owner_link="model.owner_link" :license="model.license"
|
||||
:description="model.description" :is-installed="model.isInstalled" :on-install="onInstall"
|
||||
:on-uninstall="onUninstall" :on-selected="onSelected"
|
||||
:selected="model.title === configFile.model" />
|
||||
</div>
|
||||
</div>
|
||||
@ -197,15 +198,49 @@
|
||||
</select>
|
||||
</div>
|
||||
<div class="m-2">
|
||||
<button @click="applyConfiguration" class="bg-blue-500 text-white py-2 px-4 rounded">
|
||||
Apply Configuration
|
||||
</button>
|
||||
<div v-if="isLoading" class="loader"></div>
|
||||
<button @click="applyConfiguration" class="bg-blue-500 text-white py-2 px-4 rounded">
|
||||
Apply Configuration
|
||||
</button>
|
||||
<div v-if="isLoading" class="loader"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col mb-2 rounded-lg bg-bg-light-tone dark:bg-bg-dark-tone hover:bg-bg-light-tone-panel hover:dark:bg-bg-dark-tone-panel duration-150 shadow-lg">
|
||||
<div class="flex flex-row p-3">
|
||||
<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"></i>
|
||||
<h3 class="text-lg font-semibold cursor-pointer select-none">
|
||||
Personalities zoo</h3>
|
||||
</button>
|
||||
</div>
|
||||
<div :class="{ 'hidden': pzc_collapsed }" class="flex flex-col mb-2 px-3 pb-0">
|
||||
<div v-if="personalities.length > 0" class="mb-2">
|
||||
<label for="model" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||
Personalities:
|
||||
</label>
|
||||
<div ref="personalitiesZoo" class="overflow-y-auto no-scrollbar p-2 pb-0 grid grid-cols-4 gap-4"
|
||||
:class="pzl_collapsed ? '' : 'max-h-96'">
|
||||
<personality-entry v-for="(pers, index) in personalities" :key="index" :personality="pers"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- EXPAND / COLLAPSE BUTTON -->
|
||||
<button v-if="pzl_collapsed"
|
||||
class="text-2xl hover:text-secondary duration-75 flex justify-center hover:bg-bg-light-tone hover:dark:bg-bg-dark-tone rounded-lg "
|
||||
title="Collapse" type="button" @click="pzl_collapsed = !pzl_collapsed">
|
||||
<i data-feather="chevron-up"></i>
|
||||
</button>
|
||||
<button v-else
|
||||
class="text-2xl hover:text-secondary duration-75 flex justify-center hover:bg-bg-light-tone hover:dark:bg-bg-dark-tone rounded-lg "
|
||||
title="Expand" type="button" @click="pzl_collapsed = !pzl_collapsed">
|
||||
<i data-feather="chevron-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- <div
|
||||
class="flex flex-col mb-2 p-3 rounded-lg bg-bg-light-tone dark:bg-bg-dark-tone hover:bg-bg-light-tone-panel hover:dark:bg-bg-dark-tone-panel duration-150 shadow-lg">
|
||||
<div class="flex flex-row ">
|
||||
<button @click.stop="pzc_collapsed = !pzc_collapsed"
|
||||
@ -226,7 +261,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- MODEL -->
|
||||
<div
|
||||
class="flex flex-col mb-2 p-3 rounded-lg bg-bg-light-tone dark:bg-bg-dark-tone hover:bg-bg-light-tone-panel hover:dark:bg-bg-dark-tone-panel duration-150 shadow-lg">
|
||||
@ -392,6 +427,7 @@ import YesNoDialog from "@/components/YesNoDialog.vue";
|
||||
import Toast from '../components/Toast.vue'
|
||||
import ModelEntry from '@/components/ModelEntry.vue';
|
||||
import PersonalityViewer from '@/components/PersonalityViewer.vue';
|
||||
import PersonalityEntry from "../components/PersonalityEntry.vue";
|
||||
import socket from '@/services/websocket.js'
|
||||
axios.defaults.baseURL = import.meta.env.VITE_GPT4ALL_API_BASEURL
|
||||
export default {
|
||||
@ -401,7 +437,8 @@ export default {
|
||||
ModelEntry,
|
||||
// eslint-disable-next-line vue/no-unused-components
|
||||
PersonalityViewer,
|
||||
Toast
|
||||
Toast,
|
||||
PersonalityEntry,
|
||||
},
|
||||
data() {
|
||||
|
||||
@ -419,6 +456,7 @@ export default {
|
||||
mc_collapsed: true,
|
||||
// Zoo accordeoon
|
||||
mzl_collapsed: false,
|
||||
pzl_collapsed: false,
|
||||
// Settings stuff
|
||||
backendsArr: [],
|
||||
modelsArr: [], // not used anymore but still have references in some methods
|
||||
@ -449,7 +487,7 @@ export default {
|
||||
console.log("Fetching models")
|
||||
axios.get('/get_available_models')
|
||||
.then(response => {
|
||||
console.log(`Models list recovered successfuly: ${JSON.stringify(response.data)}`)
|
||||
//console.log(`Models list recovered successfuly: ${JSON.stringify(response.data)}`)
|
||||
this.models = response.data;
|
||||
})
|
||||
.catch(error => {
|
||||
@ -629,8 +667,8 @@ export default {
|
||||
applyConfiguration() {
|
||||
if (!this.configFile.model) {
|
||||
console.log("applying configuration failed")
|
||||
this.$refs.toast.showToast("Configuration changed failed.\nPlease select model first", 4, false)
|
||||
nextTick(() => {
|
||||
this.$refs.toast.showToast("Configuration changed failed.\nPlease select model first", 4, false)
|
||||
nextTick(() => {
|
||||
feather.replace()
|
||||
})
|
||||
return
|
||||
@ -659,7 +697,7 @@ export default {
|
||||
axios.post('/save_settings', {})
|
||||
.then((res) => {
|
||||
if (res) {
|
||||
if (res.status){
|
||||
if (res.status) {
|
||||
this.$refs.messageBox.showMessage("Settings saved!")
|
||||
}
|
||||
else
|
||||
@ -720,8 +758,39 @@ export default {
|
||||
closeToast() {
|
||||
this.showToast = false
|
||||
},
|
||||
async getPersonalitiesArr() {
|
||||
this.personalities
|
||||
const dictionary = await this.api_get_req("get_all_personalities")
|
||||
const langkeys = Object.keys(dictionary); // returns languages folder names
|
||||
for (let i = 0; i < langkeys.length; i++) {
|
||||
const langkey = langkeys[i];
|
||||
const catdictionary = dictionary[langkey];
|
||||
const catkeys = Object.keys(catdictionary); // returns categories
|
||||
|
||||
for (let j = 0; j < catkeys.length; j++) {
|
||||
const catkey = catkeys[j];
|
||||
const personalitiesArray = catdictionary[catkey];
|
||||
const modPersArr = personalitiesArray.map((item)=>{
|
||||
let newItem ={}
|
||||
newItem=item
|
||||
newItem.category=catkey // add new props to items
|
||||
newItem.language=langkey // add new props to items
|
||||
return newItem
|
||||
})
|
||||
|
||||
|
||||
if (this.personalities.length == 0) {
|
||||
this.personalities = modPersArr
|
||||
} else {
|
||||
this.personalities=this.personalities.concat(modPersArr)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}, async mounted() {
|
||||
this.isLoading=true
|
||||
nextTick(() => {
|
||||
feather.replace()
|
||||
|
||||
@ -737,7 +806,9 @@ export default {
|
||||
this.persCatgArr = await this.api_get_req("list_personalities_categories")
|
||||
this.persArr = await this.api_get_req("list_personalities")
|
||||
this.langArr = await this.api_get_req("list_languages")
|
||||
|
||||
await this.getPersonalitiesArr()
|
||||
this.isLoading=false
|
||||
console.log('ppp', this.personalities)
|
||||
},
|
||||
watch: {
|
||||
bec_collapsed() {
|
||||
@ -771,6 +842,13 @@ export default {
|
||||
|
||||
})
|
||||
},
|
||||
pzl_collapsed() {
|
||||
|
||||
nextTick(() => {
|
||||
feather.replace()
|
||||
|
||||
})
|
||||
},
|
||||
all_collapsed(val) {
|
||||
this.collapseAll(val)
|
||||
nextTick(() => {
|
||||
|
||||
@ -35,6 +35,7 @@ module.exports = {
|
||||
plugins: [
|
||||
require('flowbite/plugin'),
|
||||
require('tailwind-scrollbar'),
|
||||
require('@tailwindcss/line-clamp')
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user