ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2024-12-18 20:17:50 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
AndzejsP 2023-05-23 18:06:53 +03:00
parent 35d6c3a08b
commit 84b7c4325d
5 changed files with 182 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/package-lock.json generated
View File

@ -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",

1
web/package.json
View File

@ -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
View 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:&nbsp;</b>
{{ personality.author }}
</div>
<div class="">
<b>Language:&nbsp;</b>
{{ personality.language }}
</div>
<div class="">
<b>Category:&nbsp;</b>
{{ personality.category }}
</div>
</div>
</div>
<div class="">
<b>Description:&nbsp;</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>

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

@ -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>
</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(() => {

1
web/tailwind.config.js
View File

@ -35,6 +35,7 @@ module.exports = {
plugins: [
require('flowbite/plugin'),
require('tailwind-scrollbar'),
require('@tailwindcss/line-clamp')
]
}