Merge pull request #299 from ParisNeo/main

sync
This commit is contained in:
Saifeddine ALOUI 2023-06-16 16:08:31 +02:00 committed by GitHub
commit 38002d1aef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 512 additions and 24 deletions

View File

@ -591,8 +591,7 @@ class LoLLMsAPPI():
message = data["prompt"]
message_id = self.current_discussion.add_message(
"user", message, parent=self.message_id,model = self.config["model_name"],
personality=self.config["personalities"][self.config["active_personality_id"]]
"user", message, parent=self.message_id
)
self.current_user_message_id = message_id
@ -839,7 +838,9 @@ class LoLLMsAPPI():
self.current_ai_message_id = self.current_discussion.add_message(
self.personality.name,
"",
parent = self.current_user_message_id
parent = self.current_user_message_id,
model = self.config["model_name"],
personality=self.config["personalities"][self.config["active_personality_id"]]
) # first the content is empty, but we'll fill it at the end
self.socketio.emit('infos',
{

View File

@ -7,7 +7,6 @@ pyyaml
markdown
gevent
gevent-websocket
pyaipersonality>=0.0.14
lollms
langchain
requests

View File

@ -10,6 +10,7 @@
</button>
</div>
</div>
<form>
<label for="chat" class="sr-only">Send message</label>
<div class="px-3 py-3 rounded-lg bg-bg-light-tone-panel dark:bg-bg-dark-tone-panel shadow-lg ">
@ -19,7 +20,7 @@
<div v-if="fileList.length > 0" class="flex flex-col max-h-64 ">
<TransitionGroup name="list" tag="div"
class="flex flex-col flex-grow overflow-y-auto 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">
<div v-for="(file,index) in fileList" :key="index+'-'+file.name" >
<div v-for="(file, index) in fileList" :key="index + '-' + file.name">
<div class=" m-1" :title="file.name">
<div
@ -87,12 +88,16 @@
</div>
<!-- CHAT BOX -->
<div class="flex flex-row flex-grow items-center gap-2 ">
<!-- <div class="w-24">
<MountedPersonalitiesComponent />
</div> -->
<div class="relative grow">
<textarea id="chat" rows="1" v-model="message"
class="block min-h-11 no-scrollbar p-2.5 w-full text-sm text-gray-900 bg-bg-light rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-bg-dark dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Send message..." @keydown.enter.exact="submitOnEnter($event)">
</textarea>
<input type="file" ref="fileDialog" style="display: none" @change="addFiles" multiple/>
<input type="file" ref="fileDialog" style="display: none" @change="addFiles" multiple />
<button type="button" @click.stop="$refs.fileDialog.click()" title="Add files"
class="absolute inset-y-0 right-0 flex items-center mr-2 w-6 hover:text-secondary duration-75 active:scale-90">
@ -125,6 +130,7 @@
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
</div>
</div>
@ -156,8 +162,12 @@
position: absolute;
}
</style>
<script setup>
import MountedPersonalitiesComponent from './MountedPersonalitiesComponent.vue'
</script>
<script>
import { nextTick, TransitionGroup } from 'vue'
import feather from 'feather-icons'
import filesize from '../plugins/filesize'
@ -169,6 +179,9 @@ export default {
loading: false
},
components: {
MountedPersonalitiesComponent
},
setup() {
return {}
},
@ -218,9 +231,9 @@ export default {
stopGenerating() {
this.$emit('stopGenerating')
},
addFiles(event){
this.fileList = this.fileList.concat([...event.target.files])
addFiles(event) {
this.fileList = this.fileList.concat([...event.target.files])
}
},
watch: {

View File

@ -11,13 +11,19 @@
<div class="flex flex-col w-full flex-grow-0 ">
<div class="flex flex-row flex-grow items-start ">
<!-- SENDER NAME -->
<div class="flex ">
<p class="drop-shadow-sm text-lg text-opacity-95 font-bold grow ">{{ message.sender }}</p>
<button @click="toggleModel" class="expand-button">{{ expanded ? ' - ' : ' + ' }}</button>
<div class="flex flex-col mb-2">
<div class="drop-shadow-sm text-lg text-opacity-95 font-bold grow ">{{ message.sender }}
<!-- <button @click="toggleModel" class="expand-button">{{ expanded ? ' - ' : ' + ' }}</button>
<p v-if="expanded" class="drop-shadow-sm text-lg text-opacity-95 font-bold grow">
{{ message.model }}
</p>
</div>
</p> -->
</div>
<div class="text-sm text-gray-400 font-thin" v-if="message.created_at" :title="message.created_at">
{{ created_at }}
</div>
</div>
<div class="flex-grow ">
</div>
@ -84,16 +90,24 @@
</div>
</div>
<div class="overflow-x-auto w-full " >
<div class="overflow-x-auto w-full ">
<!-- MESSAGE CONTENT -->
<MarkdownRenderer ref="mdRender" v-if="!editMsgMode" :markdown-text="message.content" >
<MarkdownRenderer ref="mdRender" v-if="!editMsgMode" :markdown-text="message.content">
</MarkdownRenderer>
<textarea v-if="editMsgMode" ref="mdTextarea" :rows="4"
class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
:style="{ minHeight: mdRenderHeight + `px` }" placeholder="Enter message here..."
v-model="new_message_content"></textarea>
</div>
<!-- FOOTER -->
<div class="text-sm text-gray-400 mt-2">
<div class="flex flex-row items-center gap-2">
<p v-if="message.binding">Binding: <span class="font-thin">{{ message.binding }}</span></p>
<p v-if="message.model">Model: <span class="font-thin">{{ message.model }}</span></p>
<p v-if="message.seed">Seed: <span class="font-thin">{{ message.seed }}</span></p>
</div>
</div>
</div>
@ -104,14 +118,15 @@
</div>
</template>
<style>
.expand-button {
margin-left: 10px; /* Add space between sender and expand button */
margin-right: 10px; /* Add space between sender and expand button */
background: none;
border: none;
padding: 0;
cursor: pointer;
margin-left: 10px;
/* Add space between sender and expand button */
margin-right: 10px;
/* Add space between sender and expand button */
background: none;
border: none;
padding: 0;
cursor: pointer;
}
</style>
<script>
@ -201,6 +216,65 @@ export default {
defaultImg(event) {
event.target.src = botImgPlaceholder
},
parseDate(tdate) {
let system_date = new Date(Date.parse(tdate));
let user_date = new Date();
let diff = Math.floor((user_date - system_date) / 1000);
if (diff <= 1) {
return "just now";
}
if (diff < 20) {
return diff + " seconds ago";
}
if (diff < 40) {
return "half a minute ago";
}
if (diff < 60) {
return "less than a minute ago";
}
if (diff <= 90) {
return "one minute ago";
}
if (diff <= 3540) {
return Math.round(diff / 60) + " minutes ago";
}
if (diff <= 5400) {
return "1 hour ago";
}
if (diff <= 86400) {
return Math.round(diff / 3600) + " hours ago";
}
if (diff <= 129600) {
return "1 day ago";
}
if (diff < 604800) {
return Math.round(diff / 86400) + " days ago";
}
if (diff <= 777600) {
return "1 week ago";
}
return tdate;
},
prettyDate(time) {
let date = new Date((time || "").replace(/-/g, "/").replace(/[TZ]/g, " ")),
diff = (((new Date()).getTime() - date.getTime()) / 1000),
day_diff = Math.floor(diff / 86400);
if (isNaN(day_diff) || day_diff < 0 || day_diff >= 31)
return;
return day_diff == 0 && (
diff < 60 && "just now" ||
diff < 120 && "1 minute ago" ||
diff < 3600 && Math.floor(diff / 60) + " minutes ago" ||
diff < 7200 && "1 hour ago" ||
diff < 86400 && Math.floor(diff / 3600) + " hours ago") ||
day_diff == 1 && "Yesterday" ||
day_diff < 7 && day_diff + " days ago" ||
day_diff < 31 && Math.ceil(day_diff / 7) + " weeks ago";
}
}, watch: {
showConfirmation() {
@ -230,7 +304,10 @@ export default {
},
computed: {
created_at() {
return this.prettyDate(this.message.created_at)
}
}

View File

@ -0,0 +1,398 @@
<template>
<!-- LIST OF MOUNTED PERSONALITIES -->
<div
class=" text-base font-semibold cursor-pointer select-none items-center flex flex-row overflow-visible overflow-x-auto 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 ">
<!-- ITEM -->
<div class="relative hover:-translate-y-2 duration-300 hover:z-10 shrink-0 "
v-for="(item, index) in mountedPersArr" :key="index + '-' + item.name" >
<div class="group items-center flex flex-row">
<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
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>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
import defaultPersonalityImgPlaceholder from "../assets/logo.svg"
const bUrl = import.meta.env.VITE_GPT4ALL_API_BASEURL
axios.defaults.baseURL = import.meta.env.VITE_GPT4ALL_API_BASEURL
export default {
name: 'MountedPersonalitiesComponent',
setup() {
return {
configFile: {},
mountedPersArr:[],
personalities:[],
bUrl:bUrl,
isMounted:false
}
},
async mounted(){
await this.constructor()
this.isMounted=true
},
async activated(){
if(this.isMounted){
await this.constructor()
}
},
methods:{
async constructor(){
this.configFile = await this.api_get_req("get_config")
let personality_path_infos = await this.api_get_req("get_current_personality_path_infos")
this.configFile.personality_language = personality_path_infos["personality_language"]
this.configFile.personality_category = personality_path_infos["personality_category"]
this.configFile.personality_folder = personality_path_infos["personality_name"]
await this.getPersonalitiesArr().then(()=>{
this.getMountedPersonalities()
this.$forceUpdate()
})
},
async api_get_req(endpoint) {
try {
const res = await axios.get("/" + endpoint);
if (res) {
return res.data
}
} catch (error) {
console.log(error.message, 'api_get_req - mountedPersonalities')
return
}
},
async getPersonalitiesArr() {
this.isLoading = true
this.personalities = []
const dictionary = await this.api_get_req("get_all_personalities")
const config = await this.api_get_req("get_config")
//this.configFile=config
//console.log('asdas',config)
// console.log("all_personalities")
// console.log(dictionary)
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) => {
const isMounted = config.personalities.includes(langkey + '/' + catkey + '/' + item.folder)
// if (isMounted) {
// console.log(item)
// }
let newItem = {}
newItem = item
newItem.category = catkey // add new props to items
newItem.language = langkey // add new props to items
newItem.full_path = langkey + '/' + catkey + '/' + item.folder // add new props to items
newItem.isMounted = isMounted // add new props to items
return newItem
})
if (this.personalities.length == 0) {
this.personalities = modPersArr
} else {
this.personalities = this.personalities.concat(modPersArr)
}
}
}
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.sort()
this.isLoading = false
},
personalityImgPlacehodler(event) {
event.target.src = defaultPersonalityImgPlaceholder
},
onPersonalityMounted(persItem) {
if (this.configFile.personalities.includes(persItem.full_path)) {
//this.$refs.toast.showToast("Personality already mounted", 4, false)
//return
//persItem.ismounted = false
if (this.configFile.personalities.length == 1) {
this.$refs.toast.showToast("Can't unmount last personality", 4, false)
} else {
this.unmountPersonality(persItem)
}
} else {
//persItem.ismounted = true
this.mountPersonality(persItem)
}
this.isLoading=true
},
async onPersonalitySelected(pers) {
// eslint-disable-next-line no-unused-vars
if (this.isLoading) {
this.$refs.toast.showToast("Loading... please wait", 4, false)
}
this.isLoading=true
console.log('ppa',pers)
if (pers) {
if (pers.selected) {
this.$refs.toast.showToast("Personality already selected", 4, true)
return
}
this.settingsChanged = true
if (pers.isMounted) {
const res = await this.select_personality(pers)
if (res.status) {
this.$refs.toast.showToast("Selected personality:\n" + pers.name, 4, true)
}
} else {
this.onPersonalityMounted(pers)
}
nextTick(() => {
})
this.isLoading=false
}
},
async mount_personality(pers) {
if (!pers) { return { 'status': false, 'error': 'no personality - mount_personality' } }
try {
const obj = {
language: pers.language,
category: pers.category,
folder: pers.folder
}
const res = await axios.post('/mount_personality', obj);
if (res) {
return res.data
}
} catch (error) {
console.log(error.message, 'mount_personality - settings')
return
}
},
async unmount_personality(pers) {
if (!pers) { return { 'status': false, 'error': 'no personality - unmount_personality' } }
const obj = {
language: pers.language,
category: pers.category,
folder: pers.folder
}
try {
const res = await axios.post('/unmount_personality', obj);
if (res) {
return res.data
}
} catch (error) {
console.log(error.message, 'unmount_personality - settings')
return
}
},
async select_personality(pers) {
if (!pers) { return { 'status': false, 'error': 'no personality - select_personality' } }
console.log('select pers', pers)
const id = this.configFile.personalities.findIndex(item => item === pers.full_path)
const obj = {
id: id
}
try {
const res = await axios.post('/select_personality', obj);
if (res) {
this.configFile = await this.api_get_req("get_config")
let personality_path_infos = await this.api_get_req("get_current_personality_path_infos")
this.configFile.personality_language = personality_path_infos["personality_language"]
this.configFile.personality_category = personality_path_infos["personality_category"]
this.configFile.personality_folder = personality_path_infos["personality_name"]
return res.data
}
} catch (error) {
console.log(error.message, 'select_personality - settings')
return
}
},
async mountPersonality(pers) {
this.isLoading=true
console.log('mount pers', pers)
if (!pers) { return }
if (this.configFile.personalities.includes(pers.personality.full_path)) {
this.$refs.toast.showToast("Personality already mounted", 4, false)
return
}
const res = await this.mount_personality(pers.personality)
console.log('mount_personality res', res)
if (res.status) {
this.configFile.personalities = res.personalities
this.$refs.toast.showToast("Personality mounted", 4, true)
pers.isMounted = true
const res2 = await this.select_personality(pers.personality)
if (res2.status) {
this.$refs.toast.showToast("Selected personality:\n" + pers.personality.name, 4, true)
}
this.getMountedPersonalities()
} else {
pers.isMounted = false
this.$refs.toast.showToast("Could not mount personality\nError: " + res.error, 4, false)
}
this.isLoading=false
},
async unmountPersonality(pers) {
this.isLoading=true
if (!pers) { return }
const res = await this.unmount_personality(pers.personality || pers)
if (res.status) {
this.configFile.personalities = res.personalities
this.$refs.toast.showToast("Personality unmounted", 4, true)
const persId = this.personalities.findIndex(item => item.full_path == pers.full_path)
const persFilteredId = this.personalitiesFiltered.findIndex(item => item.full_path == pers.full_path)
const persIdZoo = this.$refs.personalitiesZoo.findIndex(item => item.full_path == pers.full_path)
console.log('ppp', this.personalities[persId])
this.personalities[persId].isMounted = false
if (persFilteredId > -1) {
this.personalitiesFiltered[persFilteredId].isMounted = false
}
if (persIdZoo > -1) {
this.$refs.personalitiesZoo[persIdZoo].isMounted = false
}
//pers.isMounted = false
this.getMountedPersonalities()
// Select some other personality
const lastPers = this.mountedPersArr[this.mountedPersArr.length - 1]
console.log(lastPers, this.mountedPersArr.length)
// const res2 = await this.select_personality(lastPers.personality)
const res2 = await this.select_personality(pers.personality)
if (res2.status) {
this.$refs.toast.showToast("Selected personality:\n" + lastPers.name, 4, true)
}
} else {
this.$refs.toast.showToast("Could not unmount personality\nError: " + res.error, 4, false)
}
this.isLoading=false
},
getMountedPersonalities() {
let mountedPersArr = []
console.log(this.configFile.personalities.length)
// console.log('perrs listo',this.personalities)
for (let i = 0; i < this.configFile.personalities.length; i++) {
const full_path_item = this.configFile.personalities[i]
const index = this.personalities.findIndex(item => item.full_path == full_path_item)
const pers = this.personalities[index]
if (pers) {
mountedPersArr.push(pers)
}
else{
mountedPersArr.push(this.personalities[this.personalities.findIndex(item => item.full_path == "english/generic/lollms")])
}
}
this.mountedPersArr = []
this.mountedPersArr = mountedPersArr
//this.mountedPersArr = mountedPersArr
console.log('getMountedPersonalities', mountedPersArr)
console.log('fig', this.configFile.personality_category)
},
}
}
</script>

View File

@ -1471,7 +1471,7 @@ export default {
console.log('fig', this.configFile.personality_category)
nextTick(()=>{
console.log('accc',this.$refs.mountedPersonalities)
this.$store.state.mountedPersonalities = this.$refs.mountedPersonalities
//this.$store.state.mountedPersonalities = this.$refs.mountedPersonalities
})
},