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

Merge pull request #157 from andzejsp/main

Browse Source 
Bugfix - and stuff
This commit is contained in:
Saifeddine ALOUI 2023-05-07 16:03:58 +02:00 committed by GitHub
commit c51c015496
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 578 additions and 399 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
docs/dev/server_endpoints.md
View File

@ -195,7 +195,43 @@ This Flask server provides various endpoints to manage and interact with the cha
"voice": "" "voice": ""
} }
``` ```
- "/get_current_personality": GET request endpoint to get all information about current personality - "/get_current_personality": GET request endpoint to get all information about current personality
```
{
"personality": {
"ai_message_prefix": "###gpt4all:\n",
"anti_prompts": [
"###user",
"### user",
"###gpt4all",
"### gpt4all"
],
"assets_list": [
"personalities\\english\\generic\\gpt4all\\assets\\logo.png"
],
"author": "ParisNeo",
"category": "General",
"dependencies": [],
"disclaimer": "",
"language": "en_XX",
"link_text": "\n",
"model_n_predicts": 1024,
"model_repeat_last_n": 40,
"model_repeat_penalty": 1.0,
"model_temperature": 0.6,
"model_top_k": 50,
"model_top_p": 0.9,
"name": "gpt4all",
"personality_conditioning": "## Information:\nAssistant's name is gpt4all\nToday's date is {{date}}\n## Instructions:\nYour mission is to assist user to perform various tasks and answer his questions\n",
"personality_description": "This personality is a helpful and Kind AI ready to help you solve your problems \n",
"user_message_prefix": "###user:\n",
"user_name": "user",
"version": "1.0.0",
"welcome_message": "Welcome! My name is gpt4all.\nHow can I help you today?\n"
}
}
```
- "/extensions": GET request endpoint to list all the available extensions. - "/extensions": GET request endpoint to list all the available extensions.
- "/training": GET request endpoint to start the training process. - "/training": GET request endpoint to start the training process.

1
web/dist/assets/index-4db9d506.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

40
web/dist/assets/index-37f29646.js → web/dist/assets/index-caff7ea5.js vendored
View File

File diff suppressed because one or more lines are too long

1
web/dist/assets/index-dac235b9.css vendored
View File

File diff suppressed because one or more lines are too long

4
web/dist/index.html vendored
View File

@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GPT4All - WEBUI</title> <title>GPT4All - WEBUI</title>
<script type="module" crossorigin src="/assets/index-37f29646.js"></script> <script type="module" crossorigin src="/assets/index-caff7ea5.js"></script>
<link rel="stylesheet" href="/assets/index-dac235b9.css"> <link rel="stylesheet" href="/assets/index-4db9d506.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

10
web/src/components/Message.vue
View File

@ -21,7 +21,7 @@
<i data-feather="edit"></i> <i data-feather="edit"></i>
</div> </div>
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2" <div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2"
title="Copy message to clipboard"> title="Copy message to clipboard" @click.stop="copyContentToClipboard()">
<i data-feather="copy"></i> <i data-feather="copy"></i>
</div> </div>
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2" <div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2"
@ -55,6 +55,7 @@ import feather from 'feather-icons'
import MarkdownRenderer from './MarkdownRenderer.vue'; import MarkdownRenderer from './MarkdownRenderer.vue';
export default { export default {
name: 'Message', name: 'Message',
emits: ['copy'],
components: { components: {
MarkdownRenderer MarkdownRenderer
}, },
@ -71,6 +72,11 @@ export default {
feather.replace() feather.replace()
}) })
}, },methods:{
copyContentToClipboard(){
this.$emit('copy', this.message.content)
navigator.clipboard.writeText(this.message.content);
}
}
} }
</script> </script>

4
web/src/components/MessageBox.vue
View File

@ -2,8 +2,8 @@
<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="bg-bg-light dark:bg-bg-dark p-8 rounded-lg shadow-lg"> <div class="bg-bg-light dark:bg-bg-dark p-8 rounded-lg shadow-lg">
<h3 class="text-lg font-medium">{{ message }}</h3> <h3 class="text-lg font-medium">{{ message }}</h3>
<div class="mt-4 flex justify-end"> <div class="mt-4 flex justify-center">
<button @click="hide" class="bg-secondary text-white px-4 py-2 rounded-lg shadow-lg hover:bg-secondary-dark"> <button @click="hide" class="bg-primary hover:bg-primary-light active:scale-95 duration-150 text-white px-4 py-2 rounded-lg shadow-lg hover:bg-secondary-dark">
OK OK
</button> </button>
</div> </div>

57
web/src/components/Toast.vue Normal file
View File

@ -0,0 +1,57 @@
<template>
<div v-if="show" class="absolute bottom-16 right-2 z-20">
<div id="toast-success"
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">
<slot>
</slot>
</div>
<button type="button" @click="close"
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">
<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>
</button>
</div>
</div>
</template>
<script>
export default {
name: 'Toast',
emits: ['close'],
props: {
showProp: false
},
data() {
return {
show: false,
};
},
methods: {
close() {
this.$emit('close')
this.show = false
}
},
watch: {
showProp(val) {
this.show = val
if (val) {
setTimeout(() => {
this.$emit('close')
this.show = false
}, 3000);
}
}
}
}
</script>

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

@ -1,14 +1,32 @@
<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="bg-bg-light dark:bg-bg-dark p-8 rounded-lg shadow-lg"> <div class="relative w-full max-w-md max-h-full">
<h3 class="text-lg font-medium">{{ message }}</h3> <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<div class="mt-4 flex justify-end"> <button type="button" @click="hide(false)"
<button @click="hide(false)" class="bg-secondary text-white px-4 py-2 rounded-lg shadow-lg hover:bg-secondary-dark"> 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">
No <svg aria-hidden="true" class="w-5 h-5" 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 class="sr-only">Close modal</span>
</button> </button>
<button @click="hide(true)" class="bg-secondary text-white px-4 py-2 rounded-lg shadow-lg hover:bg-secondary-dark ml-4"> <div class="p-4 text-center">
Yes <svg aria-hidden="true" class="mx-auto mb-4 text-gray-400 w-14 h-14 dark:text-gray-200" fill="none"
stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<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"
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
</button> </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,
cancel</button>
</div>
</div> </div>
</div> </div>
</div> </div>

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

@ -110,7 +110,7 @@
<!-- CHAT AREA --> <!-- CHAT AREA -->
<div class="flex flex-col flex-grow"> <div class="flex flex-col flex-grow">
<Message v-for="(msg, index) in discussionArr" :key="index" :message="msg" <Message v-for="(msg, index) in discussionArr" :key="index" :message="msg"
@click="scrollToElement($event.target)" :id="'msg-' + msg.id" ref="messages" /> @click="scrollToElement($event.target)" :id="'msg-' + msg.id" ref="messages" @copy="copyToClipBoard" />
<WelcomeComponent v-if="!currentDiscussion.id" /> <WelcomeComponent v-if="!currentDiscussion.id" />
@ -122,6 +122,14 @@
</div> </div>
</div> </div>
<Toast :showProp="isCopiedToClipboard" @close="isCopiedToClipboard = false">
<div
class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
<i data-feather="check"></i>
<span class="sr-only">Check icon</span>
</div>
<div class="ml-3 text-sm font-normal">Message content copied to clipboard!</div>
</Toast>
</template> </template>
<style scoped> <style scoped>
.height-64 { .height-64 {
@ -146,8 +154,8 @@ export default {
isCheckbox: false, isCheckbox: false,
isSelectAll: false, isSelectAll: false,
showConfirmation: false, showConfirmation: false,
chime: new Audio("chime_aud.wav") chime: new Audio("chime_aud.wav"),
isCopiedToClipboard: false
} }
}, },
methods: { methods: {
@ -375,7 +383,7 @@ export default {
this.setDiscussionLoading(this.currentDiscussion.id, this.isGenerating); this.setDiscussionLoading(this.currentDiscussion.id, this.isGenerating);
axios.get('/get_generation_status', {}).then((res) => { axios.get('/get_generation_status', {}).then((res) => {
if (res) { if (res) {
console.log(res.data.status); //console.log(res.data.status);
if (!res.data.status) { if (!res.data.status) {
socket.emit('generate_msg', { prompt: msg }); socket.emit('generate_msg', { prompt: msg });
@ -383,7 +391,7 @@ export default {
// Temp data // Temp data
let usrMessage = { let usrMessage = {
message: msg, message: msg,
id: this.discussionArr[this.discussionArr.length - 1].id + 1, id: 0,
rank: 0, rank: 0,
user: "user" user: "user"
}; };
@ -400,7 +408,7 @@ export default {
}, },
steamMessageContent(content) { steamMessageContent(content) {
// Streams response message content from backend // Streams response message content from backend
console.log(content) //console.log(content)
const lastMsg = this.discussionArr[this.discussionArr.length - 1] const lastMsg = this.discussionArr[this.discussionArr.length - 1]
lastMsg.content = content.data lastMsg.content = content.data
}, },
@ -412,8 +420,9 @@ export default {
if (msg) { if (msg) {
discussionItem.title = msg discussionItem.title = msg
this.tempList = this.list this.tempList = this.list
}
await this.edit_title(id, msg) await this.edit_title(id, msg)
}
}, },
async createNewDiscussion() { async createNewDiscussion() {
// Creates new discussion on backend, // Creates new discussion on backend,
@ -430,6 +439,7 @@ export default {
const selectedDisElement = document.getElementById('dis-' + res.id) const selectedDisElement = document.getElementById('dis-' + res.id)
this.scrollToElement(selectedDisElement) this.scrollToElement(selectedDisElement)
}) })
//console.log("disc",JSON.stringify(discussionItem))
}, },
loadLastUsedDiscussion() { loadLastUsedDiscussion() {
// Checks local storage for last selected discussion // Checks local storage for last selected discussion
@ -559,8 +569,16 @@ export default {
this.setDiscussionLoading(this.currentDiscussion.id, this.isGenerating) this.setDiscussionLoading(this.currentDiscussion.id, this.isGenerating)
this.chime.play() this.chime.play()
}, },
copyToClipBoard(){ copyToClipBoard(content) {
this.isCopiedToClipboard = true
nextTick(() => {
feather.replace()
})
},
closeToast() {
this.isCopiedToClipboard = false
} }
}, },
async created() { async created() {
@ -597,7 +615,8 @@ export default {
Discussion, Discussion,
Message, Message,
ChatBox, ChatBox,
WelcomeComponent WelcomeComponent,
Toast
}, },
watch: { watch: {
filterTitle(newVal) { filterTitle(newVal) {
@ -646,6 +665,7 @@ import Discussion from '../components/Discussion.vue'
import Message from '../components/Message.vue' import Message from '../components/Message.vue'
import ChatBox from '../components/ChatBox.vue' import ChatBox from '../components/ChatBox.vue'
import WelcomeComponent from '../components/WelcomeComponent.vue' import WelcomeComponent from '../components/WelcomeComponent.vue'
import Toast from '../components/Toast.vue'
import feather from 'feather-icons' import feather from 'feather-icons'

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

@ -1,29 +1,48 @@
<template> <template>
<div class="overflow-y-scroll flex flex-col no-scrollbar shadow-lg w-full bg-bg-light-tone dark:bg-bg-dark-tone "> <div class="container overflow-y-scroll flex flex-col no-scrollbar shadow-lg p-1 pt-0 ">
<!-- CONTROL PANEL --> <!-- CONTROL PANEL -->
<div class="flex-row p-4 pt-0 flex items-center gap-3 flex-0"> <div class="flex flex-row mb-2 p-3 gap-3 w-full rounded-b-lg bg-bg-light-tone dark:bg-bg-dark-tone shadow-lg">
<button title="Save configuration" class="text-2xl hover:text-secondary duration-75 active:scale-90" @click="save_configuration()"> <!-- SAVE CONFIG -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <div v-if="showConfirmation" class="flex gap-3 flex-1 items-center duration-75">
<path d="M5 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3Z"></path> <button class="text-2xl hover:text-red-600 duration-75 active:scale-90 " title="Cancel"
<path d="M17 8L12 13L7 8"></path> type="button" @click.stop="showConfirmation = false">
</svg> <i data-feather="x"></i>
</button> </button>
<button title="Reset configuration" class="text-2xl hover:text-secondary duration-75 active:scale-90" @click="reset_configuration()"> <button class="text-2xl hover:text-secondary duration-75 active:scale-90" title="Confirm save changes"
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> type="button" @click.stop="save_configuration()">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/> <i data-feather="check"></i>
</svg> </button>
</div>
<!-- SAVE AND RESET -->
<div v-if="!showConfirmation" class="flex gap-3 flex-1 items-center ">
<button title="Save configuration" class="text-2xl hover:text-secondary duration-75 active:scale-90"
@click="showConfirmation=true">
<i data-feather="save"></i>
</button>
<button title="Reset configuration" class="text-2xl hover:text-secondary duration-75 active:scale-90"
@click="reset_configuration()">
<i data-feather="refresh-ccw"></i>
</button> </button>
</div> </div>
<div class="flex flex-row">
<button @click="bec_collapsed = !bec_collapsed">
<svg class="h-6 w-6 hover:text-secondary duration-75 active:scale-90" :class="{'rotate-90': !bec_collapsed}" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M9 19l7-7-7-7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</svg>
</button>
<h3 class="text-lg font-semibold">Backend Configuration</h3>
</div> </div>
<div :class="{'hidden': bec_collapsed}"> <!-- BACKEND -->
<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="bec_collapsed = !bec_collapsed"
class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1">
<!-- <i data-feather="chevron-right"></i> -->
<h3 class="text-lg font-semibold cursor-pointer select-none "
@click.stop="bec_collapsed = !bec_collapsed">
Backend Configuration</h3>
</button>
</div>
<div :class="{ 'hidden': bec_collapsed }" class="flex flex-col mb-2 p-2">
<div class="m-2"> <div class="m-2">
<label for="backend" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"> <label for="backend" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
Backend: Backend:
@ -47,16 +66,22 @@
</select> </select>
</div> </div>
</div> </div>
<div class="flex flex-row">
<button @click="pc_collapsed = !pc_collapsed">
<svg class="h-6 w-6 hover:text-secondary duration-75 active:scale-90" :class="{'rotate-90': !pc_collapsed}" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M9 19l7-7-7-7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</svg>
</button>
<h3 class="text-lg font-semibold">Personality Configuration</h3>
</div> </div>
<div :class="{'hidden': pc_collapsed}"> <!-- PERSONALITY -->
<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="pc_collapsed = !pc_collapsed"
class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1">
<!-- <i data-feather="chevron-right"></i> -->
<h3 class="text-lg font-semibold cursor-pointer select-none" @click.stop="pc_collapsed = !pc_collapsed">
Personality Configuration</h3>
</button>
</div>
<div :class="{ 'hidden': pc_collapsed }" class="flex flex-col mb-2 p-2">
<div class="m-2"> <div class="m-2">
<label for="persLang" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"> <label for="persLang" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
Personalities Languages: Personalities Languages:
@ -90,18 +115,23 @@
</select> </select>
</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">
<div class="flex flex-row"> <div class="flex flex-row">
<button @click="mc_collapsed = !mc_collapsed"> <button @click.stop="mc_collapsed = !mc_collapsed"
<svg class="h-6 w-6 hover:text-secondary duration-75 active:scale-90" :class="{'rotate-90': !mc_collapsed}" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1">
<path d="M9 19l7-7-7-7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/> <!-- <i data-feather="chevron-right"></i> -->
</svg>
</button>
<h3 class="text-lg font-semibold">Model Configuration</h3>
</div>
<div :class="{'hidden': mc_collapsed}"> <h3 class="text-lg font-semibold cursor-pointer select-none "
@click.stop="mc_collapsed = !mc_collapsed">
Model Configuration</h3>
</button>
</div>
<div :class="{ 'hidden': mc_collapsed }" class="flex flex-col mb-2 p-2">
<div class="m-2"> <div class="m-2">
<label for="seed" class="block mb-2 text-sm font-medium "> <label for="seed" class="block mb-2 text-sm font-medium ">
Seed: Seed:
@ -119,13 +149,14 @@
</p> </p>
<p class="absolute right-0"> <p class="absolute right-0">
<input type="text" id="temp-val" v-model="configFile.temp" <input type="text" id="temp-val" v-model="configFile.temperature"
class="mt-2 w-16 text-right p-2 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500"> class="mt-2 w-16 text-right p-2 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
</p> </p>
</div> </div>
<input id="temperature" @change="update_setting('temperature', $event.target.value)" type="range" v-model="configFile.temp" min="0" max="5" step="0.1" <input id="temperature" @change="update_setting('temperature', $event.target.value)" type="range"
v-model="configFile.temp" min="0" max="5" step="0.1"
class="flex-none h-2 mt-14 mb-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 focus:ring-blue-500 focus:border-blue-500 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500"> class="flex-none h-2 mt-14 mb-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 focus:ring-blue-500 focus:border-blue-500 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
</div> </div>
</div> </div>
@ -145,7 +176,8 @@
</div> </div>
<input id="predict" @change="update_setting('n_predict', $event.target.value)" type="range" v-model="configFile.n_predict" min="0" max="2048" step="32" <input id="predict" @change="update_setting('n_predict', $event.target.value)" type="range"
v-model="configFile.n_predict" min="0" max="2048" step="32"
class="flex-none h-2 mt-14 mb-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 focus:ring-blue-500 focus:border-blue-500 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500"> class="flex-none h-2 mt-14 mb-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 focus:ring-blue-500 focus:border-blue-500 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
</div> </div>
</div> </div>
@ -165,7 +197,8 @@
</div> </div>
<input id="top_k" @change="update_setting('top_k', $event.target.value)" type="range" v-model="configFile.top_k" min="0" max="100" step="1" <input id="top_k" @change="update_setting('top_k', $event.target.value)" type="range"
v-model="configFile.top_k" min="0" max="100" step="1"
class="flex-none h-2 mt-14 mb-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 focus:ring-blue-500 focus:border-blue-500 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500"> class="flex-none h-2 mt-14 mb-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 focus:ring-blue-500 focus:border-blue-500 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
</div> </div>
</div> </div>
@ -185,7 +218,8 @@
</div> </div>
<input id="top_p" @change="update_setting('top_p', $event.target.value)" type="range" v-model="configFile.top_p" min="0" max="1" step="0.01" <input id="top_p" @change="update_setting('top_p', $event.target.value)" type="range"
v-model="configFile.top_p" min="0" max="1" step="0.01"
class="flex-none h-2 mt-14 mb-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 focus:ring-blue-500 focus:border-blue-500 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500"> class="flex-none h-2 mt-14 mb-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 focus:ring-blue-500 focus:border-blue-500 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
</div> </div>
</div> </div>
@ -205,7 +239,8 @@
</div> </div>
<input id="repeat_penalty" @change="update_setting('repeat_penalty', $event.target.value)" type="range" v-model="configFile.repeat_penalty" min="0" max="2" step="0.01" <input id="repeat_penalty" @change="update_setting('repeat_penalty', $event.target.value)"
type="range" v-model="configFile.repeat_penalty" min="0" max="2" step="0.01"
class="flex-none h-2 mt-14 mb-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 focus:ring-blue-500 focus:border-blue-500 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500"> class="flex-none h-2 mt-14 mb-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 focus:ring-blue-500 focus:border-blue-500 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
</div> </div>
</div> </div>
@ -225,20 +260,25 @@
</div> </div>
<input id="repeat_last_n" @change="update_setting('repeat_last_n', $event.target.value)" type="range" v-model="configFile.repeat_last_n" min="0" max="100" step="1" <input id="repeat_last_n" @change="update_setting('repeat_last_n', $event.target.value)"
type="range" v-model="configFile.repeat_last_n" min="0" max="100" step="1"
class="flex-none h-2 mt-14 mb-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 focus:ring-blue-500 focus:border-blue-500 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500"> class="flex-none h-2 mt-14 mb-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 focus:ring-blue-500 focus:border-blue-500 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<YesNoDialog ref="yesNoDialog" /> <YesNoDialog ref="yesNoDialog" />
<MessageBox ref="messageBox" /> <MessageBox ref="messageBox" />
</template> </template>
<script> <script>
import axios from "axios"; import axios from "axios";
import feather from 'feather-icons'
import { nextTick } from 'vue'
import MessageBox from "@/components/MessageBox.vue"; import MessageBox from "@/components/MessageBox.vue";
import YesNoDialog from "@/components/YesNoDialog.vue"; import YesNoDialog from "@/components/YesNoDialog.vue";
axios.defaults.baseURL = import.meta.env.VITE_GPT4ALL_API_BASEURL axios.defaults.baseURL = import.meta.env.VITE_GPT4ALL_API_BASEURL
@ -258,9 +298,9 @@ export default {
return { return {
// Accordeon stuff // Accordeon stuff
bec_collapsed: true, bec_collapsed: false,
pc_collapsed: true, pc_collapsed: false,
mc_collapsed: true, mc_collapsed: false,
// Settings stuff // Settings stuff
backendsArr: [], backendsArr: [],
modelsArr: [], modelsArr: [],
@ -269,6 +309,7 @@ export default {
persArr: [], persArr: [],
langArr: [], langArr: [],
configFile: {}, configFile: {},
showConfirmation:false
} }
}, methods: { }, methods: {
@ -303,13 +344,14 @@ export default {
.catch(error => { return { 'status': false } }); .catch(error => { return { 'status': false } });
}, },
save_configuration() { save_configuration() {
this.showConfirmation=false
axios.post('/save_settings', {}) axios.post('/save_settings', {})
.then((res) => { .then((res) => {
if (res) { if (res) {
if (res.status) if (res.status)
this.$refs.messageBox.showMessage("Settings saved") this.$refs.messageBox.showMessage("Settings saved!")
else else
this.$refs.messageBox.showMessage("Couldn't save settings!") this.$refs.messageBox.showMessage("Error: Couldn't save settings!")
return res.data; return res.data;
} }
}) })
@ -371,6 +413,10 @@ export default {
}, },
}, async mounted() { }, async mounted() {
nextTick(() => {
feather.replace()
})
this.backendsArr = await this.api_get_req("list_backends") this.backendsArr = await this.api_get_req("list_backends")
this.modelsArr = await this.api_get_req("list_models") this.modelsArr = await this.api_get_req("list_models")
this.persLangArr = await this.api_get_req("list_personalities_languages") this.persLangArr = await this.api_get_req("list_personalities_languages")
@ -378,37 +424,33 @@ export default {
this.persArr = await this.api_get_req("list_personalities") this.persArr = await this.api_get_req("list_personalities")
this.langArr = await this.api_get_req("list_languages") this.langArr = await this.api_get_req("list_languages")
this.configFile = await this.api_get_req("get_config") this.configFile = await this.api_get_req("get_config")
},
watch: {
bec_collapsed() {
nextTick(() => {
feather.replace()
})
},
pc_collapsed() {
nextTick(() => {
feather.replace()
})
},
mc_collapsed() {
nextTick(() => {
feather.replace()
})
},
showConfirmation(){
nextTick(() => {
feather.replace()
})
}
} }
} }
</script> </script>
<style>
.settings {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
.section {
margin-top: 20px;
}
h2 {
font-size: 1.2rem;
margin-bottom: 10px;
}
label {
margin-right: 10px;
}
select {
margin-right: 10px;
}
input[type="text"],
input[type="email"],
input[type="file"] {
margin-right: 10px;
}
</style>