mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2024-12-22 05:37:48 +00:00
Merge branch 'main' of https://github.com/ParisNeo/gpt4all-ui
This commit is contained in:
Saifeddine ALOUI
commit
9946ea028b
142
web/src/components/DragDrop.vue
Normal file
142
web/src/components/DragDrop.vue
Normal file
@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<TransitionGroup name="list" tag="div">
|
||||
|
||||
|
||||
<div key="dropmenu" v-if="show"
|
||||
class="select-none text-slate-50 absolute top-0 left-0 right-0 bottom-0 flex flex-col items-center justify-center bg-black bg-opacity-50 duration-200 backdrop-blur-sm "
|
||||
@dragleave.prevent="panelLeave($event)" @drop.stop.prevent="panelDrop($event)">
|
||||
<div
|
||||
class="flex flex-col items-center justify-center p-8 rounded-lg shadow-lg border-dashed border-4 border-secondary w-4/5 h-4/5 " >
|
||||
|
||||
|
||||
<div class="text-4xl " :class="dropRelease?'':'pointer-events-none'">
|
||||
|
||||
<div v-if="fileList.length == 0">
|
||||
Drop your files here
|
||||
</div>
|
||||
|
||||
<div v-if="fileList.length > 0" class="flex flex-row gap-2 items-center">
|
||||
<i data-feather="file" class="w-12 h-12"></i>
|
||||
Files to upload
|
||||
({{ fileList.length }})
|
||||
</div>
|
||||
</div>
|
||||
<div class=" overflow-auto no-scrollbar">
|
||||
|
||||
<TransitionGroup name="list" tag="div" class="flex flex-col items-center p-2">
|
||||
<div v-for="file in fileList" :key="file.name">
|
||||
<div class="relative m-1 cursor-pointer">
|
||||
|
||||
<span
|
||||
class="inline-flex items-center px-2 py-1 mr-2 text-sm font-medium bg-bg-dark-tone-panel rounded-lg hover:bg-primary-light ">
|
||||
<i data-feather="file" class="w-5 h-5 mr-1"></i>
|
||||
{{ file.name }}
|
||||
({{ computedFileSize(file.size) }})
|
||||
<button type="button" title="Remove item"
|
||||
class="inline-flex items-center p-0.5 ml-2 text-sm rounded-sm hover:text-red-600 active:scale-75"
|
||||
@click="removeItem(file)">
|
||||
<i data-feather="x" class="w-5 h-5 "></i>
|
||||
|
||||
</button>
|
||||
</span>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import filesize from '../plugins/filesize'
|
||||
import feather from 'feather-icons'
|
||||
import { nextTick, TransitionGroup } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
|
||||
return {}
|
||||
},
|
||||
name: 'DragDrop',
|
||||
emits: ['panelLeave', 'panelDrop'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
fileList: [],
|
||||
show: false,
|
||||
dropRelease: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
//this.fileList.push({ name: 'lol.sss', size: 22 })
|
||||
nextTick(() => {
|
||||
feather.replace()
|
||||
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
computedFileSize(size) {
|
||||
return filesize(size)
|
||||
},
|
||||
removeItem(file) {
|
||||
this.fileList = this.fileList.filter((item) => item != file)
|
||||
// console.log(this.fileList)
|
||||
},
|
||||
panelDrop(event) {
|
||||
this.dropRelease = true
|
||||
if (event.dataTransfer.files.length > 0) {
|
||||
[...event.dataTransfer.files].forEach(element => {
|
||||
this.fileList.push(element)
|
||||
});
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
feather.replace()
|
||||
})
|
||||
this.$emit('panelDrop', this.fileList)
|
||||
|
||||
this.show = false
|
||||
// console.log("dropped", this.fileList)
|
||||
//console.log(event.dataTransfer.files[0]);
|
||||
|
||||
},
|
||||
panelLeave() {
|
||||
this.$emit('panelLeave')
|
||||
console.log('exit/leave')
|
||||
this.dropRelease = false
|
||||
this.show = false
|
||||
//this.fileList = []
|
||||
nextTick(() => {
|
||||
feather.replace()
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.list-move,
|
||||
/* apply transition to moving elements */
|
||||
.list-enter-active,
|
||||
.list-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.list-enter-from,
|
||||
.list-leave-to {
|
||||
opacity: 0;
|
||||
|
||||
}
|
||||
|
||||
/* ensure leaving items are taken out of layout flow so that moving
|
||||
animations can be calculated correctly. */
|
||||
.list-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
@ -90,6 +90,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import filesize from '../plugins/filesize'
|
||||
import axios from "axios";
|
||||
import { nextTick } from 'vue'
|
||||
import feather from 'feather-icons'
|
||||
@ -131,6 +132,9 @@ export default {
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
computedFileSize(size){
|
||||
return filesize(size)
|
||||
},
|
||||
async getFileSize(url) {
|
||||
try {
|
||||
|
||||
@ -139,17 +143,17 @@ export default {
|
||||
if (res) {
|
||||
|
||||
if (res.headers["content-length"]) {
|
||||
return this.humanFileSize(res.headers["content-length"])
|
||||
return this.computedFileSize(res.headers["content-length"])
|
||||
}
|
||||
if (this.model.filesize) {
|
||||
return this.humanFileSize(this.model.filesize)
|
||||
return this.computedFileSize(this.model.filesize)
|
||||
}
|
||||
return 'Could not be determined'
|
||||
|
||||
}
|
||||
if (this.model.filesize) {
|
||||
|
||||
return this.humanFileSize(this.model.filesize)
|
||||
return this.computedFileSize(this.model.filesize)
|
||||
}
|
||||
return 'Could not be determined'
|
||||
|
||||
@ -181,38 +185,6 @@ export default {
|
||||
}
|
||||
|
||||
},
|
||||
/** From https://stackoverflow.com/a/14919494/14106028
|
||||
* Format bytes as human-readable text.
|
||||
*
|
||||
* @param bytes Number of bytes.
|
||||
* @param si True to use metric (SI) units, aka powers of 1000. False to use
|
||||
* binary (IEC), aka powers of 1024.
|
||||
* @param dp Number of decimal places to display.
|
||||
*
|
||||
* @return Formatted string.
|
||||
*/
|
||||
humanFileSize(bytes, si = false, dp = 1) {
|
||||
const thresh = si ? 1000 : 1024;
|
||||
|
||||
if (Math.abs(bytes) < thresh) {
|
||||
return bytes + ' B';
|
||||
}
|
||||
|
||||
const units = si
|
||||
? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
|
||||
: ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
|
||||
let u = -1;
|
||||
const r = 10 ** dp;
|
||||
|
||||
do {
|
||||
bytes /= thresh;
|
||||
++u;
|
||||
} while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
|
||||
|
||||
|
||||
return bytes.toFixed(dp) + ' ' + units[u];
|
||||
},
|
||||
|
||||
getImgUrl() {
|
||||
|
||||
if (this.icon === '/images/default_model.png') {
|
||||
|
||||
@ -4,28 +4,28 @@
|
||||
<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>
|
||||
<RouterLink :to="{ name: 'discussions' }" active-class=" bg-bg-light-tone dark:bg-bg-dark-tone p-2 px-4 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>
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink :to="{ name: 'settings' }" active-class=" bg-bg-light-tone dark:bg-bg-dark-tone p-2 px-4 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>
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink :to="{ name: 'extensions' }" active-class=" bg-bg-light-tone dark:bg-bg-dark-tone p-2 px-4 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>
|
||||
</RouterLink>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<RouterLink :to="{ name: 'training' }" active-class=" bg-bg-light-tone dark:bg-bg-dark-tone p-2 px-4 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>
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink :to="{ name: 'help' }" active-class=" bg-bg-light-tone dark:bg-bg-dark-tone p-2 px-4 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>
|
||||
</RouterLink>
|
||||
</li>
|
||||
|
||||
@ -2,7 +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 id="toast-success"
|
||||
<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">
|
||||
@ -23,7 +23,7 @@
|
||||
</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"
|
||||
data-dismiss-target="#toast-success" aria-label="Close">
|
||||
>
|
||||
<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 +44,9 @@ import feather from 'feather-icons'
|
||||
import { nextTick, TransitionGroup } from 'vue'
|
||||
export default {
|
||||
name: 'Toast',
|
||||
emits: ['close'],
|
||||
|
||||
props: {
|
||||
showProp: false
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -86,17 +86,7 @@ export default {
|
||||
|
||||
},
|
||||
watch: {
|
||||
showProp(val) {
|
||||
this.show = val
|
||||
if (val) {
|
||||
setTimeout(() => {
|
||||
this.$emit('close')
|
||||
this.show = false
|
||||
}, 3000);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -8,4 +8,4 @@ const app = createApp(App)
|
||||
|
||||
app.use(router)
|
||||
|
||||
app.mount('#app')
|
||||
app.mount('#app')
|
||||
31
web/src/plugins/filesize.js
Normal file
31
web/src/plugins/filesize.js
Normal file
@ -0,0 +1,31 @@
|
||||
/** From https://stackoverflow.com/a/14919494/14106028
|
||||
* Format bytes as human-readable text.
|
||||
*
|
||||
* @param bytes Number of bytes.
|
||||
* @param si True to use metric (SI) units, aka powers of 1000. False to use
|
||||
* binary (IEC), aka powers of 1024.
|
||||
* @param dp Number of decimal places to display.
|
||||
*
|
||||
* @return Formatted string.
|
||||
*/
|
||||
export default function humanFileSize(bytes, si = true, dp = 1) {
|
||||
const thresh = si ? 1000 : 1024;
|
||||
|
||||
if (Math.abs(bytes) < thresh) {
|
||||
return bytes + ' B';
|
||||
}
|
||||
|
||||
const units = si
|
||||
? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
|
||||
: ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
|
||||
let u = -1;
|
||||
const r = 10 ** dp;
|
||||
|
||||
do {
|
||||
bytes /= thresh;
|
||||
++u;
|
||||
} while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
|
||||
|
||||
|
||||
return bytes.toFixed(dp) + ' ' + units[u];
|
||||
}
|
||||
@ -2,7 +2,7 @@
|
||||
<div
|
||||
class="overflow-y-scroll 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 class="z-10 sticky top-0 flex-col bg-bg-light-tone dark:bg-bg-dark-tone shadow-md">
|
||||
<div class=" sticky top-0 flex-col bg-bg-light-tone dark:bg-bg-dark-tone shadow-md">
|
||||
|
||||
|
||||
<!-- CONTROL PANEL -->
|
||||
@ -51,11 +51,11 @@
|
||||
</div>
|
||||
<!-- SEARCH BAR -->
|
||||
<!-- <Transition name="expand" > -->
|
||||
<div key="1" v-if="isSearch" class="flex-row items-center gap-3 flex-0 w-full">
|
||||
|
||||
<div key="1" v-if="isSearch" class="flex-row items-center gap-3 flex-0 w-full">
|
||||
|
||||
|
||||
<div class="p-4 pt-2 ">
|
||||
|
||||
|
||||
<div class="p-4 pt-2 ">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<div class="scale-75">
|
||||
@ -75,9 +75,9 @@
|
||||
@input="filterDiscussions()" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<!-- </Transition> -->
|
||||
<!-- </Transition> -->
|
||||
<hr v-if="isCheckbox" class="h-px bg-bg-light p-0 mb-4 px-4 mx-4 border-0 dark:bg-bg-dark">
|
||||
<div v-if="isCheckbox" class="flex flex-row flex-grow p-4 pt-0 items-center">
|
||||
|
||||
@ -125,11 +125,11 @@
|
||||
<div class="relative overflow-y-scroll no-scrollbar">
|
||||
<!-- DISCUSSION LIST -->
|
||||
<div class="mx-4 flex-grow" :class="filterInProgress ? 'opacity-20 pointer-events-none' : ''">
|
||||
<TransitionGroup v-if="list.length>0" name="list" >
|
||||
<Discussion v-for="(item, index) in list" :key="item.id" :id="item.id" :title="item.title"
|
||||
:selected="currentDiscussion.id == item.id" :loading="item.loading" :isCheckbox="isCheckbox"
|
||||
:checkBoxValue="item.checkBoxValue" @select="selectDiscussion(item)" @delete="deleteDiscussion(item.id)"
|
||||
@editTitle="editTitle" @checked="checkUncheckDiscussion" />
|
||||
<TransitionGroup v-if="list.length > 0" name="list">
|
||||
<Discussion v-for="(item, index) in list" :key="item.id" :id="item.id" :title="item.title"
|
||||
:selected="currentDiscussion.id == item.id" :loading="item.loading" :isCheckbox="isCheckbox"
|
||||
:checkBoxValue="item.checkBoxValue" @select="selectDiscussion(item)"
|
||||
@delete="deleteDiscussion(item.id)" @editTitle="editTitle" @checked="checkUncheckDiscussion" />
|
||||
</TransitionGroup>
|
||||
<div v-if="list.length < 1"
|
||||
class="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">
|
||||
@ -142,25 +142,35 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-y-auto flex flex-col flex-grow scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary"
|
||||
id="messages-list">
|
||||
|
||||
<!-- CHAT AREA -->
|
||||
<div class="container flex flex-col flex-grow pt-4 pb-10">
|
||||
<TransitionGroup v-if="discussionArr.length>0" name="list" >
|
||||
<Message v-for="(msg, index) in discussionArr" :key="msg.id" :message="msg" :id="'msg-' + msg.id" ref="messages"
|
||||
@copy="copyToClipBoard" @delete="deleteMessage" @rankUp="rankUpMessage" @rankDown="rankDownMessage"
|
||||
@updateMessage="updateMessage" @resendMessage="resendMessage" :avatar="getAvatar(msg.sender)" />
|
||||
|
||||
|
||||
</TransitionGroup>
|
||||
<WelcomeComponent v-if="!currentDiscussion.id" />
|
||||
</div>
|
||||
<div class=" sticky bottom-0">
|
||||
<ChatBox v-if="currentDiscussion.id" @messageSentEvent="sendMsg" :loading="isGenerating"
|
||||
@stopGenerating="stopGenerating" />
|
||||
<div class="flex relative " @dragover.stop.prevent="setDropZone()" >
|
||||
<div class="z-20">
|
||||
<DragDrop ref="dragdrop" @panelDrop="setFileList"></DragDrop>
|
||||
</div>
|
||||
|
||||
<div :class="isDragOver?'pointer-events-none':''" class="flex flex-col flex-grow overflow-y-auto scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary"
|
||||
id="messages-list" >
|
||||
|
||||
<!-- CHAT AREA -->
|
||||
<div class="container flex flex-col flex-grow pt-4 pb-10 ">
|
||||
<TransitionGroup v-if="discussionArr.length > 0" name="list">
|
||||
<Message v-for="(msg, index) in discussionArr" :key="msg.id" :message="msg" :id="'msg-' + msg.id"
|
||||
ref="messages" @copy="copyToClipBoard" @delete="deleteMessage" @rankUp="rankUpMessage"
|
||||
@rankDown="rankDownMessage" @updateMessage="updateMessage" @resendMessage="resendMessage"
|
||||
:avatar="getAvatar(msg.sender)" />
|
||||
|
||||
|
||||
</TransitionGroup>
|
||||
<WelcomeComponent v-if="!currentDiscussion.id" />
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class=" sticky bottom-0">
|
||||
<ChatBox v-if="currentDiscussion.id" @messageSentEvent="sendMsg" :loading="isGenerating"
|
||||
@stopGenerating="stopGenerating" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<Toast ref="toast">
|
||||
</Toast>
|
||||
@ -169,23 +179,26 @@
|
||||
|
||||
<style scoped>
|
||||
/* THESE ARE FOR TransitionGroup components */
|
||||
.list-move, /* apply transition to moving elements */
|
||||
.list-move,
|
||||
/* apply transition to moving elements */
|
||||
.list-enter-active,
|
||||
.list-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.list-enter-from {
|
||||
transform: translatey(-30px);
|
||||
}
|
||||
|
||||
.list-leave-to {
|
||||
opacity: 0;
|
||||
transform: translatey(30px);
|
||||
opacity: 0;
|
||||
transform: translatey(30px);
|
||||
}
|
||||
|
||||
/* ensure leaving items are taken out of layout flow so that moving
|
||||
animations can be calculated correctly. */
|
||||
.list-leave-active {
|
||||
position: absolute;
|
||||
.list-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
@ -210,7 +223,10 @@ export default {
|
||||
showToast: false,
|
||||
isSearch: false,
|
||||
isDiscussionBottom: false,
|
||||
personalityAvatars: [] // object array of personality name: and avatar: props
|
||||
personalityAvatars: [], // object array of personality name: and avatar: props
|
||||
fileList: [],
|
||||
isDropZoneVisible: true,
|
||||
isDragOver:false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -224,7 +240,7 @@ export default {
|
||||
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error.message,'api_get_req')
|
||||
console.log(error.message, 'api_get_req')
|
||||
return
|
||||
}
|
||||
|
||||
@ -261,7 +277,7 @@ export default {
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error.message,'load_discussion')
|
||||
console.log(error.message, 'load_discussion')
|
||||
this.loading = false
|
||||
this.setDiscussionLoading(id, this.loading)
|
||||
}
|
||||
@ -402,10 +418,10 @@ export default {
|
||||
if (!this.filterInProgress) {
|
||||
this.filterInProgress = true
|
||||
setTimeout(() => {
|
||||
if(this.filterTitle){
|
||||
if (this.filterTitle) {
|
||||
this.list = this.tempList.filter((item) => item.title && item.title.includes(this.filterTitle))
|
||||
|
||||
}else{
|
||||
} else {
|
||||
this.list = this.tempList
|
||||
}
|
||||
this.filterInProgress = false
|
||||
@ -554,9 +570,9 @@ export default {
|
||||
},
|
||||
sendMsg(msg) {
|
||||
// Sends message to binding
|
||||
if(!msg){
|
||||
if (!msg) {
|
||||
this.$refs.toast.showToast("Message contains no content!", 4, false)
|
||||
return
|
||||
return
|
||||
}
|
||||
this.isGenerating = true;
|
||||
this.setDiscussionLoading(this.currentDiscussion.id, this.isGenerating);
|
||||
@ -673,8 +689,8 @@ export default {
|
||||
}
|
||||
this.tempList = this.list
|
||||
this.isCheckbox = false
|
||||
this.$refs.toast.showToast("Removed ("+deleteList.length+") items", 4, true)
|
||||
|
||||
this.$refs.toast.showToast("Removed (" + deleteList.length + ") items", 4, true)
|
||||
|
||||
console.log("Multi delete done")
|
||||
},
|
||||
async deleteMessage(msgId) {
|
||||
@ -843,7 +859,7 @@ export default {
|
||||
copyToClipBoard(content) {
|
||||
this.$refs.toast.showToast("Copied to clipboard successfully", 4, true)
|
||||
navigator.clipboard.writeText(content);
|
||||
|
||||
|
||||
nextTick(() => {
|
||||
feather.replace()
|
||||
|
||||
@ -952,11 +968,24 @@ export default {
|
||||
getAvatar(sender) {
|
||||
const index = this.personalityAvatars.findIndex((x) => x.name === sender)
|
||||
const pers = this.personalityAvatars[index]
|
||||
if(pers){
|
||||
if (pers) {
|
||||
return pers.avatar
|
||||
}
|
||||
|
||||
return
|
||||
|
||||
return
|
||||
},
|
||||
setFileList(files) {
|
||||
this.fileList = files
|
||||
console.log('dropppp', this.fileList)
|
||||
},
|
||||
setDropZone(){
|
||||
this.isDragOver=true
|
||||
this.$refs.dragdrop.show=true
|
||||
this.isDropZoneVisible=true
|
||||
console.log('is vis',this.isDropZoneVisible)
|
||||
},
|
||||
hideDropZone(){
|
||||
this.$refs.dragdrop.show=false
|
||||
}
|
||||
|
||||
|
||||
@ -980,7 +1009,7 @@ export default {
|
||||
socket.on('infos', this.createBotMsg)
|
||||
socket.on('message', this.streamMessageContent)
|
||||
socket.on("final", this.finalMsgEvent)
|
||||
|
||||
|
||||
},
|
||||
async activated() {
|
||||
// This lifecycle hook runs every time you switch from other page back to this page (vue-router)
|
||||
@ -999,7 +1028,8 @@ export default {
|
||||
Message,
|
||||
ChatBox,
|
||||
WelcomeComponent,
|
||||
Toast
|
||||
Toast,
|
||||
DragDrop
|
||||
},
|
||||
watch: {
|
||||
filterTitle(newVal) {
|
||||
@ -1055,11 +1085,11 @@ import Message from '../components/Message.vue'
|
||||
import ChatBox from '../components/ChatBox.vue'
|
||||
import WelcomeComponent from '../components/WelcomeComponent.vue'
|
||||
import Toast from '../components/Toast.vue'
|
||||
|
||||
import DragDrop from '../components/DragDrop.vue'
|
||||
import feather from 'feather-icons'
|
||||
|
||||
import axios from 'axios'
|
||||
import { nextTick,TransitionGroup } from 'vue'
|
||||
import { nextTick, TransitionGroup } from 'vue'
|
||||
|
||||
import socket from '@/services/websocket.js'
|
||||
|
||||
|
||||
@ -33,10 +33,10 @@
|
||||
<div class="flex gap-3 flex-1 items-center justify-end">
|
||||
|
||||
|
||||
<div v-if="!isModelSelected" class="text-red-600 flex gap-3 items-center">
|
||||
<!-- <div v-if="!isModelSelected" class="text-red-600 flex gap-3 items-center">
|
||||
<i data-feather="alert-triangle"></i>
|
||||
No model selected!
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="flex gap-3 items-center">
|
||||
<div v-if="settingsChanged" class="flex gap-3 items-center">
|
||||
Apply changes:
|
||||
@ -72,13 +72,14 @@
|
||||
<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">
|
||||
<i data-feather="chevron-right" class="mr-2"></i>
|
||||
|
||||
|
||||
<h3 class="text-lg font-semibold cursor-pointer select-none mr-2">
|
||||
Binding zoo</h3>
|
||||
<div v-if="configFile.binding" class="mr-2">|</div>
|
||||
|
||||
<div v-if="configFile.binding" class=" text-base font-semibold cursor-pointer select-none items-center">
|
||||
{{configFile.binding}} </div>
|
||||
<div v-if="configFile.binding" class="mr-2">|</div>
|
||||
|
||||
<div v-if="configFile.binding"
|
||||
class=" text-base font-semibold cursor-pointer select-none items-center">
|
||||
{{ configFile.binding }} </div>
|
||||
</button>
|
||||
</div>
|
||||
<div :class="{ 'hidden': bzc_collapsed }" class="flex flex-col mb-2 px-3 pb-0">
|
||||
@ -99,16 +100,19 @@
|
||||
<label for="binding" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||
Bindings: ({{ bindings.length }})
|
||||
</label>
|
||||
<div ref="bindingZoo" class="overflow-y-auto no-scrollbar p-2 pb-0 grid lg:grid-cols-3 md:grid-cols-2 gap-4"
|
||||
<div ref="bindingZoo"
|
||||
class="overflow-y-auto no-scrollbar p-2 pb-0 grid lg:grid-cols-3 md:grid-cols-2 gap-4"
|
||||
:class="bzl_collapsed ? '' : 'max-h-96'">
|
||||
<TransitionGroup name="list">
|
||||
<BindingEntry v-for="(binding, index) in bindings"
|
||||
:key="'index-' + index + '-' + binding.folder" :binding="binding" :on-selected="onSelectedBinding" :selected="binding.folder === configFile.binding"></BindingEntry>
|
||||
:key="'index-' + index + '-' + binding.folder" :binding="binding"
|
||||
:on-selected="onSelectedBinding" :selected="binding.folder === configFile.binding">
|
||||
</BindingEntry>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- EXPAND / COLLAPSE BUTTON -->
|
||||
<button v-if="bzl_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 "
|
||||
@ -133,17 +137,41 @@
|
||||
<i :data-feather="mzc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2"></i>
|
||||
<h3 class="text-lg font-semibold cursor-pointer select-none mr-2">
|
||||
Models zoo</h3>
|
||||
<div v-if="configFile.model" class="mr-2">|</div>
|
||||
<div v-if="configFile.model" class=" text-base font-semibold cursor-pointer select-none items-center">
|
||||
{{configFile.model}} </div>
|
||||
<div class="flex flex-row items-center">
|
||||
<div v-if="!isModelSelected" class="text-base text-red-600 flex gap-3 items-center">
|
||||
<i data-feather="alert-triangle"></i>
|
||||
No model selected!
|
||||
</div>
|
||||
|
||||
<div v-if="configFile.model" class="mr-2">|</div>
|
||||
<div v-if="configFile.model"
|
||||
class=" text-base font-semibold cursor-pointer select-none items-center">
|
||||
{{ configFile.model }} </div> </div>
|
||||
</button>
|
||||
</div>
|
||||
<div :class="{ 'hidden': mzc_collapsed }" class="flex flex-col mb-2 px-3 pb-0">
|
||||
<div class="mb-2">
|
||||
<label for="disk" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||
Disk usage:
|
||||
</label>
|
||||
<div class="flex flex-col mx-2">
|
||||
<div><b>Current binding models folder: </b>{{ binding_models_usage }}</div>
|
||||
<!-- <div><b>Percentage: </b>{{ percent_usage }}</div> -->
|
||||
<!-- <div><b>Total disk size: </b>{{ total_space }}</div> -->
|
||||
<div><b>Avaliable space: </b> {{ available_space }} / {{ total_space }}</div>
|
||||
</div>
|
||||
<div class="p-2 ">
|
||||
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
|
||||
<div class="bg-blue-600 h-2.5 rounded-full" :style="'width: ' + percent_usage + '%;'"></div>
|
||||
</div>
|
||||
|
||||
</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 }})
|
||||
</label>
|
||||
|
||||
<div ref="modelZoo" class="overflow-y-auto no-scrollbar p-2 pb-0 "
|
||||
:class="mzl_collapsed ? '' : 'max-h-96'">
|
||||
<TransitionGroup name="list">
|
||||
@ -181,10 +209,11 @@
|
||||
<i :data-feather="pzc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2"></i>
|
||||
<h3 class="text-lg font-semibold cursor-pointer select-none mr-2">
|
||||
Personalities zoo</h3>
|
||||
<div v-if="configFile.personality" class="mr-2">|</div>
|
||||
|
||||
<div v-if="configFile.personality" class=" text-base font-semibold cursor-pointer select-none items-center">
|
||||
{{configFile.personality}} </div>
|
||||
<div v-if="configFile.personality" class="mr-2">|</div>
|
||||
|
||||
<div v-if="configFile.personality"
|
||||
class=" text-base font-semibold cursor-pointer select-none items-center">
|
||||
{{ configFile.personality }} </div>
|
||||
</button>
|
||||
</div>
|
||||
<div :class="{ 'hidden': pzc_collapsed }" class="flex flex-col mb-2 px-3 pb-0">
|
||||
@ -482,6 +511,7 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import filesize from '../plugins/filesize'
|
||||
import axios from "axios";
|
||||
import feather from 'feather-icons'
|
||||
import { nextTick, TransitionGroup } from 'vue'
|
||||
@ -539,7 +569,9 @@ export default {
|
||||
showToast: false,
|
||||
isLoading: false,
|
||||
settingsChanged: false,
|
||||
isModelSelected: false
|
||||
isModelSelected: false,
|
||||
diskUsage: {}
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
@ -677,6 +709,9 @@ export default {
|
||||
this.showProgress = false;
|
||||
model_object.installing = false
|
||||
this.$refs.toast.showToast("Model:\n" + model_object.title + "\ninstalled!", 4, true)
|
||||
this.api_get_req("disk_usage").then(response =>{
|
||||
this.diskUsage=response
|
||||
})
|
||||
} else if (response.status === 'failed') {
|
||||
socket.off('install_progress', progressListener);
|
||||
console.log("Install failed")
|
||||
@ -686,6 +721,9 @@ export default {
|
||||
this.showProgress = false;
|
||||
console.error('Installation failed:', response.error);
|
||||
this.$refs.toast.showToast("Model:\n" + model_object.title + "\nfailed to install!", 4, false)
|
||||
this.api_get_req("disk_usage").then(response =>{
|
||||
this.diskUsage=response
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
@ -711,6 +749,9 @@ export default {
|
||||
this.models = this.models.filter((model) => model.title !== model_object.title)
|
||||
}
|
||||
this.$refs.toast.showToast("Model:\n" + model_object.title + "\nwas uninstalled!", 4, true)
|
||||
this.api_get_req("disk_usage").then(response =>{
|
||||
this.diskUsage=response
|
||||
})
|
||||
} else if (response.status === 'failed') {
|
||||
// Installation failed or encountered an error
|
||||
model_object.uninstalling = false;
|
||||
@ -719,6 +760,9 @@ export default {
|
||||
// eslint-disable-next-line no-undef
|
||||
console.error('Uninstallation failed:', message.error);
|
||||
this.$refs.toast.showToast("Model:\n" + model_object.title + "\nfailed to uninstall!", 4, false)
|
||||
this.api_get_req("disk_usage").then(response =>{
|
||||
this.diskUsage=response
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
@ -726,7 +770,7 @@ export default {
|
||||
|
||||
socket.emit('uninstall_model', { path: model_object.path });
|
||||
},
|
||||
onSelectedBinding(binding_object){
|
||||
onSelectedBinding(binding_object) {
|
||||
this.update_binding(binding_object.binding.folder)
|
||||
//console.log('lol',binding_object)
|
||||
},
|
||||
@ -761,6 +805,9 @@ export default {
|
||||
}
|
||||
});
|
||||
})
|
||||
this.api_get_req("disk_usage").then(response =>{
|
||||
this.diskUsage=response
|
||||
})
|
||||
this.getPersonalitiesArr()
|
||||
this.fetchModels();
|
||||
},
|
||||
@ -789,9 +836,10 @@ export default {
|
||||
.catch(error => { return { 'status': false } });
|
||||
},
|
||||
update_binding(value) {
|
||||
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
this.isLoading = true
|
||||
|
||||
this.update_setting('binding', value, (res) => {
|
||||
this.refresh();
|
||||
|
||||
@ -804,6 +852,11 @@ export default {
|
||||
})
|
||||
// If binding changes then reset model
|
||||
this.update_model(null)
|
||||
this.configFile.model=null
|
||||
|
||||
this.api_get_req("disk_usage").then(response =>{
|
||||
this.diskUsage=response
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
@ -818,14 +871,14 @@ export default {
|
||||
})
|
||||
},
|
||||
applyConfiguration() {
|
||||
if (!this.configFile.model) {
|
||||
// if (!this.configFile.model) {
|
||||
|
||||
this.$refs.toast.showToast("Configuration changed failed.\nPlease select model first", 4, false)
|
||||
nextTick(() => {
|
||||
feather.replace()
|
||||
})
|
||||
return
|
||||
}
|
||||
// this.$refs.toast.showToast("Configuration changed failed.\nPlease select model first", 4, false)
|
||||
// nextTick(() => {
|
||||
// feather.replace()
|
||||
// })
|
||||
// return
|
||||
// }
|
||||
this.isLoading = true;
|
||||
axios.post('/apply_settings').then((res) => {
|
||||
this.isLoading = false;
|
||||
@ -945,7 +998,10 @@ export default {
|
||||
this.personalitiesFiltered = this.personalities.filter((item) => item.category === this.configFile.personality_category && item.language === this.configFile.personality_language)
|
||||
this.isLoading = false
|
||||
|
||||
}
|
||||
},
|
||||
computedFileSize(size){
|
||||
return filesize(size)
|
||||
},
|
||||
|
||||
}, async mounted() {
|
||||
this.isLoading = true
|
||||
@ -967,7 +1023,22 @@ export default {
|
||||
await this.getPersonalitiesArr()
|
||||
this.bindings = await this.api_get_req("list_bindings")
|
||||
this.isLoading = false
|
||||
|
||||
this.diskUsage = await this.api_get_req("disk_usage")
|
||||
},
|
||||
computed: {
|
||||
available_space() {
|
||||
return this.computedFileSize(this.diskUsage.available_space)
|
||||
},
|
||||
binding_models_usage() {
|
||||
return this.computedFileSize(this.diskUsage.binding_models_usage)
|
||||
},
|
||||
percent_usage() {
|
||||
return this.diskUsage.percent_usage
|
||||
|
||||
},
|
||||
total_space() {
|
||||
return this.computedFileSize(this.diskUsage.total_space)
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
bec_collapsed() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user