mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2025-04-17 23:46:03 +00:00
restyled settings and components
This commit is contained in:
andzejsp
parent
0782556045
commit
fdf334237c
@ -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 class="bg-bg-light dark:bg-bg-dark p-8 rounded-lg shadow-lg">
|
||||
<h3 class="text-lg font-medium">{{ message }}</h3>
|
||||
<div class="mt-4 flex justify-end">
|
||||
<button @click="hide" class="bg-secondary text-white px-4 py-2 rounded-lg shadow-lg hover:bg-secondary-dark">
|
||||
<div class="mt-4 flex justify-center">
|
||||
<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
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -1,44 +1,62 @@
|
||||
<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 class="bg-bg-light dark:bg-bg-dark p-8 rounded-lg shadow-lg">
|
||||
<h3 class="text-lg font-medium">{{ message }}</h3>
|
||||
<div class="mt-4 flex justify-end">
|
||||
<button @click="hide(false)" class="bg-secondary text-white px-4 py-2 rounded-lg shadow-lg hover:bg-secondary-dark">
|
||||
No
|
||||
</button>
|
||||
<button @click="hide(true)" class="bg-secondary text-white px-4 py-2 rounded-lg shadow-lg hover:bg-secondary-dark ml-4">
|
||||
Yes
|
||||
<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="relative w-full max-w-md max-h-full">
|
||||
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
|
||||
<button type="button" @click="hide(false)"
|
||||
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">
|
||||
<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>
|
||||
<div class="p-4 text-center">
|
||||
<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 @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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
message: "",
|
||||
resolve: null,
|
||||
};
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
message: "",
|
||||
resolve: null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
hide(response) {
|
||||
this.show = false;
|
||||
if (this.resolve) {
|
||||
this.resolve(response);
|
||||
this.resolve = null;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hide(response) {
|
||||
this.show = false;
|
||||
if (this.resolve) {
|
||||
this.resolve(response);
|
||||
this.resolve = null;
|
||||
}
|
||||
},
|
||||
askQuestion(message) {
|
||||
return new Promise((resolve) => {
|
||||
this.message = message;
|
||||
this.show = true;
|
||||
this.resolve = resolve;
|
||||
});
|
||||
},
|
||||
askQuestion(message) {
|
||||
return new Promise((resolve) => {
|
||||
this.message = message;
|
||||
this.show = true;
|
||||
this.resolve = resolve;
|
||||
});
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,244 +1,284 @@
|
||||
<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 -->
|
||||
<div class="flex-row p-4 pt-0 flex items-center gap-3 flex-0">
|
||||
<button title="Save configuration" class="text-2xl hover:text-secondary duration-75 active:scale-90" @click="save_configuration()">
|
||||
<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">
|
||||
<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>
|
||||
<path d="M17 8L12 13L7 8"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button title="Reset configuration" class="text-2xl hover:text-secondary duration-75 active:scale-90" @click="reset_configuration()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<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">
|
||||
<!-- SAVE CONFIG -->
|
||||
<div v-if="showConfirmation" class="flex gap-3 flex-1 items-center duration-75">
|
||||
<button class="text-2xl hover:text-red-600 duration-75 active:scale-90 " title="Cancel"
|
||||
type="button" @click.stop="showConfirmation = false">
|
||||
<i data-feather="x"></i>
|
||||
</button>
|
||||
<button class="text-2xl hover:text-secondary duration-75 active:scale-90" title="Confirm save changes"
|
||||
type="button" @click.stop="save_configuration()">
|
||||
<i data-feather="check"></i>
|
||||
</button>
|
||||
|
||||
<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 :class="{'hidden': bec_collapsed}">
|
||||
<div class="m-2">
|
||||
<label for="backend" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||
Backend:
|
||||
</label>
|
||||
<select id="backend" @change="update_backend($event.target.value)"
|
||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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">
|
||||
|
||||
<option v-for="item in backendsArr">{{ item }}</option>
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<div class="m-2">
|
||||
<label for="model" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||
Model:
|
||||
</label>
|
||||
<select id="model"
|
||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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">
|
||||
<!-- SAVE AND RESET -->
|
||||
<div v-if="!showConfirmation" class="flex gap-3 flex-1 items-center ">
|
||||
|
||||
<option v-for="item in modelsArr">{{ item }}</option>
|
||||
|
||||
</select>
|
||||
<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>
|
||||
</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 :class="{'hidden': pc_collapsed}">
|
||||
<div class="m-2">
|
||||
<label for="persLang" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||
Personalities Languages:
|
||||
</label>
|
||||
<select id="persLang" @change="update_setting('personality_language', $event.target.value, refresh)"
|
||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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">
|
||||
|
||||
<option v-for="item in persLangArr">{{ item }}</option>
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<div class="m-2">
|
||||
<label for="persCat" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||
Personalities Category:
|
||||
</label>
|
||||
<select id="persCat" @change="update_setting('personality_category', $event.target.value, refresh)"
|
||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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">
|
||||
|
||||
<option v-for="item in persCatgArr">{{ item }}</option>
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<div class="m-2">
|
||||
<label for="persona" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||
Personality:
|
||||
</label>
|
||||
<select id="persona" @change="update_setting('personality', $event.target.value, refresh)"
|
||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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">
|
||||
|
||||
<option v-for="item in persArr">{{ item }}</option>
|
||||
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="flex flex-row">
|
||||
<button @click="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">
|
||||
<path d="M9 19l7-7-7-7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
</button>
|
||||
<h3 class="text-lg font-semibold">Model Configuration</h3>
|
||||
</div>
|
||||
<!-- 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> -->
|
||||
|
||||
<div :class="{'hidden': mc_collapsed}">
|
||||
<div class="m-2">
|
||||
<label for="seed" class="block mb-2 text-sm font-medium ">
|
||||
Seed:
|
||||
</label>
|
||||
<input type="text" id="seed" v-model="configFile.seed"
|
||||
class="bg-gray-50 border border-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
|
||||
<h3 class="text-lg font-semibold cursor-pointer select-none "
|
||||
@click.stop="bec_collapsed = !bec_collapsed">
|
||||
Backend Configuration</h3>
|
||||
</button>
|
||||
</div>
|
||||
<div class="m-2">
|
||||
<div class="flex flex-col align-bottom ">
|
||||
<div class="relative">
|
||||
<p class="absolute left-0 mt-6">
|
||||
<label for="temperature" class=" text-sm font-medium">
|
||||
Temperature:
|
||||
</label>
|
||||
</p>
|
||||
<p class="absolute right-0">
|
||||
<div :class="{ 'hidden': bec_collapsed }" class="flex flex-col mb-2 p-2">
|
||||
<div class="m-2">
|
||||
<label for="backend" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||
Backend:
|
||||
</label>
|
||||
<select id="backend" @change="update_backend($event.target.value)"
|
||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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">
|
||||
|
||||
<input type="text" id="temp-val" v-model="configFile.temp"
|
||||
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>
|
||||
<option v-for="item in backendsArr">{{ item }}</option>
|
||||
|
||||
</div>
|
||||
</select>
|
||||
</div>
|
||||
<div class="m-2">
|
||||
<label for="model" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||
Model:
|
||||
</label>
|
||||
<select id="model"
|
||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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">
|
||||
|
||||
<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">
|
||||
<option v-for="item in modelsArr">{{ item }}</option>
|
||||
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-2">
|
||||
<div class="flex flex-col align-bottom ">
|
||||
<div class="relative">
|
||||
<p class="absolute left-0 mt-6">
|
||||
<label for="predict" class=" text-sm font-medium">
|
||||
N Predict:
|
||||
</label>
|
||||
</p>
|
||||
<p class="absolute right-0">
|
||||
|
||||
<input type="text" id="predict-val" v-model="configFile.n_predict"
|
||||
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>
|
||||
|
||||
</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"
|
||||
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 class="m-2">
|
||||
<div class="flex flex-col align-bottom ">
|
||||
<div class="relative">
|
||||
<p class="absolute left-0 mt-6">
|
||||
<label for="top_k" class=" text-sm font-medium">
|
||||
Top-K:
|
||||
</label>
|
||||
</p>
|
||||
<p class="absolute right-0">
|
||||
|
||||
<input type="text" id="top_k-val" v-model="configFile.top_k"
|
||||
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>
|
||||
|
||||
</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"
|
||||
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 class="m-2">
|
||||
<div class="flex flex-col align-bottom ">
|
||||
<div class="relative">
|
||||
<p class="absolute left-0 mt-6">
|
||||
<label for="top_p" class=" text-sm font-medium">
|
||||
Top-P:
|
||||
</label>
|
||||
</p>
|
||||
<p class="absolute right-0">
|
||||
|
||||
<input type="text" id="top_p-val" v-model="configFile.top_p"
|
||||
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>
|
||||
|
||||
</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"
|
||||
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 class="m-2">
|
||||
<div class="flex flex-col align-bottom ">
|
||||
<div class="relative">
|
||||
<p class="absolute left-0 mt-6">
|
||||
<label for="repeat_penalty" class=" text-sm font-medium">
|
||||
Repeat penalty:
|
||||
</label>
|
||||
</p>
|
||||
<p class="absolute right-0">
|
||||
|
||||
<input type="text" id="repeat_penalty-val" v-model="configFile.repeat_penalty"
|
||||
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>
|
||||
|
||||
</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"
|
||||
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 class="m-2">
|
||||
<div class="flex flex-col align-bottom ">
|
||||
<div class="relative">
|
||||
<p class="absolute left-0 mt-6">
|
||||
<label for="repeat_last_n" class=" text-sm font-medium">
|
||||
Repeat last N:
|
||||
</label>
|
||||
</p>
|
||||
<p class="absolute right-0">
|
||||
|
||||
<input type="text" id="repeat_last_n-val" v-model="configFile.repeat_last_n"
|
||||
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>
|
||||
|
||||
</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"
|
||||
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>
|
||||
|
||||
<!-- 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">
|
||||
<label for="persLang" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||
Personalities Languages:
|
||||
</label>
|
||||
<select id="persLang" @change="update_setting('personality_language', $event.target.value, refresh)"
|
||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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">
|
||||
|
||||
<option v-for="item in persLangArr">{{ item }}</option>
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<div class="m-2">
|
||||
<label for="persCat" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||
Personalities Category:
|
||||
</label>
|
||||
<select id="persCat" @change="update_setting('personality_category', $event.target.value, refresh)"
|
||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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">
|
||||
|
||||
<option v-for="item in persCatgArr">{{ item }}</option>
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<div class="m-2">
|
||||
<label for="persona" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||
Personality:
|
||||
</label>
|
||||
<select id="persona" @change="update_setting('personality', $event.target.value, refresh)"
|
||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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">
|
||||
|
||||
<option v-for="item in persArr">{{ item }}</option>
|
||||
|
||||
</select>
|
||||
</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">
|
||||
<button @click.stop="mc_collapsed = !mc_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="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">
|
||||
<label for="seed" class="block mb-2 text-sm font-medium ">
|
||||
Seed:
|
||||
</label>
|
||||
<input type="text" id="seed" v-model="configFile.seed"
|
||||
class="bg-gray-50 border border-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
|
||||
</div>
|
||||
<div class="m-2">
|
||||
<div class="flex flex-col align-bottom ">
|
||||
<div class="relative">
|
||||
<p class="absolute left-0 mt-6">
|
||||
<label for="temperature" class=" text-sm font-medium">
|
||||
Temperature:
|
||||
</label>
|
||||
</p>
|
||||
<p class="absolute right-0">
|
||||
|
||||
<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">
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<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">
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-2">
|
||||
<div class="flex flex-col align-bottom ">
|
||||
<div class="relative">
|
||||
<p class="absolute left-0 mt-6">
|
||||
<label for="predict" class=" text-sm font-medium">
|
||||
N Predict:
|
||||
</label>
|
||||
</p>
|
||||
<p class="absolute right-0">
|
||||
|
||||
<input type="text" id="predict-val" v-model="configFile.n_predict"
|
||||
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>
|
||||
|
||||
</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"
|
||||
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 class="m-2">
|
||||
<div class="flex flex-col align-bottom ">
|
||||
<div class="relative">
|
||||
<p class="absolute left-0 mt-6">
|
||||
<label for="top_k" class=" text-sm font-medium">
|
||||
Top-K:
|
||||
</label>
|
||||
</p>
|
||||
<p class="absolute right-0">
|
||||
|
||||
<input type="text" id="top_k-val" v-model="configFile.top_k"
|
||||
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>
|
||||
|
||||
</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"
|
||||
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 class="m-2">
|
||||
<div class="flex flex-col align-bottom ">
|
||||
<div class="relative">
|
||||
<p class="absolute left-0 mt-6">
|
||||
<label for="top_p" class=" text-sm font-medium">
|
||||
Top-P:
|
||||
</label>
|
||||
</p>
|
||||
<p class="absolute right-0">
|
||||
|
||||
<input type="text" id="top_p-val" v-model="configFile.top_p"
|
||||
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>
|
||||
|
||||
</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"
|
||||
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 class="m-2">
|
||||
<div class="flex flex-col align-bottom ">
|
||||
<div class="relative">
|
||||
<p class="absolute left-0 mt-6">
|
||||
<label for="repeat_penalty" class=" text-sm font-medium">
|
||||
Repeat penalty:
|
||||
</label>
|
||||
</p>
|
||||
<p class="absolute right-0">
|
||||
|
||||
<input type="text" id="repeat_penalty-val" v-model="configFile.repeat_penalty"
|
||||
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>
|
||||
|
||||
</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"
|
||||
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 class="m-2">
|
||||
<div class="flex flex-col align-bottom ">
|
||||
<div class="relative">
|
||||
<p class="absolute left-0 mt-6">
|
||||
<label for="repeat_last_n" class=" text-sm font-medium">
|
||||
Repeat last N:
|
||||
</label>
|
||||
</p>
|
||||
<p class="absolute right-0">
|
||||
|
||||
<input type="text" id="repeat_last_n-val" v-model="configFile.repeat_last_n"
|
||||
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>
|
||||
|
||||
</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"
|
||||
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>
|
||||
|
||||
|
||||
<YesNoDialog ref="yesNoDialog" />
|
||||
<MessageBox ref="messageBox" />
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import feather from 'feather-icons'
|
||||
import { nextTick } from 'vue'
|
||||
import MessageBox from "@/components/MessageBox.vue";
|
||||
import YesNoDialog from "@/components/YesNoDialog.vue";
|
||||
axios.defaults.baseURL = import.meta.env.VITE_GPT4ALL_API_BASEURL
|
||||
@ -246,7 +286,7 @@ export default {
|
||||
components: {
|
||||
MessageBox,
|
||||
YesNoDialog
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
|
||||
|
||||
@ -258,9 +298,9 @@ export default {
|
||||
|
||||
return {
|
||||
// Accordeon stuff
|
||||
bec_collapsed: true,
|
||||
pc_collapsed: true,
|
||||
mc_collapsed: true,
|
||||
bec_collapsed: false,
|
||||
pc_collapsed: false,
|
||||
mc_collapsed: false,
|
||||
// Settings stuff
|
||||
backendsArr: [],
|
||||
modelsArr: [],
|
||||
@ -269,6 +309,7 @@ export default {
|
||||
persArr: [],
|
||||
langArr: [],
|
||||
configFile: {},
|
||||
showConfirmation:false
|
||||
|
||||
}
|
||||
}, methods: {
|
||||
@ -277,78 +318,79 @@ export default {
|
||||
console.log("OK button clicked");
|
||||
},
|
||||
// Refresh stuff
|
||||
refresh(){
|
||||
this.api_get_req("list_backends").then(response=>{this.backendsArr = response})
|
||||
this.api_get_req("list_models").then(response=>{this.modelsArr = response})
|
||||
this.api_get_req("list_personalities_languages").then(response=>{this.persLangArr = response})
|
||||
this.api_get_req("list_personalities_categories").then(response=>{this.persCatgArr = response})
|
||||
this.api_get_req("list_personalities").then(response=>{this.persArr = response})
|
||||
this.api_get_req("list_languages").then(response=>{this.langArr = response})
|
||||
this.api_get_req("get_config").then(response=>{this.configFile = response})
|
||||
refresh() {
|
||||
this.api_get_req("list_backends").then(response => { this.backendsArr = response })
|
||||
this.api_get_req("list_models").then(response => { this.modelsArr = response })
|
||||
this.api_get_req("list_personalities_languages").then(response => { this.persLangArr = response })
|
||||
this.api_get_req("list_personalities_categories").then(response => { this.persCatgArr = response })
|
||||
this.api_get_req("list_personalities").then(response => { this.persArr = response })
|
||||
this.api_get_req("list_languages").then(response => { this.langArr = response })
|
||||
this.api_get_req("get_config").then(response => { this.configFile = response })
|
||||
},
|
||||
// Accordeon stuff
|
||||
toggleAccordion() {
|
||||
this.showAccordion = !this.showAccordion;
|
||||
},
|
||||
update_setting(setting_name, setting_value, next=undefined){
|
||||
axios.post('/update_setting', {'setting_name':setting_name, 'setting_value':setting_value})
|
||||
.then((res) => {
|
||||
if (res) {
|
||||
if(next!==undefined){
|
||||
next()
|
||||
}
|
||||
return res.data;
|
||||
}
|
||||
})
|
||||
.catch(error=>{return {'status':false}});
|
||||
},
|
||||
save_configuration(){
|
||||
axios.post('/save_settings', {})
|
||||
.then((res) => {
|
||||
if (res) {
|
||||
if(res.status)
|
||||
this.$refs.messageBox.showMessage("Settings saved")
|
||||
else
|
||||
this.$refs.messageBox.showMessage("Couldn't save settings!")
|
||||
return res.data;
|
||||
}
|
||||
})
|
||||
.catch(error=>{
|
||||
console.log(error)
|
||||
this.$refs.messageBox.showMessage("Couldn't save settings!")
|
||||
return {'status':false}
|
||||
});
|
||||
|
||||
},
|
||||
reset_configuration(){
|
||||
this.$refs.yesNoDialog.askQuestion("Are you sure?\nThis will delete all your configurations and get back to default configuration.").then(response=>{
|
||||
if (response) {
|
||||
// User clicked Yes
|
||||
axios.post('/reset_settings', {})
|
||||
update_setting(setting_name, setting_value, next = undefined) {
|
||||
axios.post('/update_setting', { 'setting_name': setting_name, 'setting_value': setting_value })
|
||||
.then((res) => {
|
||||
if (res) {
|
||||
if(res.status)
|
||||
this.$refs.messageBox.showMessage("Settings have been reset correctly")
|
||||
else
|
||||
this.$refs.messageBox.showMessage("Couldn't reset settings!")
|
||||
if (next !== undefined) {
|
||||
next()
|
||||
}
|
||||
return res.data;
|
||||
}
|
||||
})
|
||||
.catch(error=>{
|
||||
console.log(error)
|
||||
this.$refs.messageBox.showMessage("Couldn't reset settings!")
|
||||
return {'status':false}
|
||||
});
|
||||
// Perform delete operation
|
||||
} else {
|
||||
// User clicked No
|
||||
// Do nothing
|
||||
}
|
||||
});
|
||||
.catch(error => { return { 'status': false } });
|
||||
},
|
||||
update_backend(value){
|
||||
save_configuration() {
|
||||
this.showConfirmation=false
|
||||
axios.post('/save_settings', {})
|
||||
.then((res) => {
|
||||
if (res) {
|
||||
if (res.status)
|
||||
this.$refs.messageBox.showMessage("Settings saved!")
|
||||
else
|
||||
this.$refs.messageBox.showMessage("Error: Couldn't save settings!")
|
||||
return res.data;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error)
|
||||
this.$refs.messageBox.showMessage("Couldn't save settings!")
|
||||
return { 'status': false }
|
||||
});
|
||||
|
||||
},
|
||||
reset_configuration() {
|
||||
this.$refs.yesNoDialog.askQuestion("Are you sure?\nThis will delete all your configurations and get back to default configuration.").then(response => {
|
||||
if (response) {
|
||||
// User clicked Yes
|
||||
axios.post('/reset_settings', {})
|
||||
.then((res) => {
|
||||
if (res) {
|
||||
if (res.status)
|
||||
this.$refs.messageBox.showMessage("Settings have been reset correctly")
|
||||
else
|
||||
this.$refs.messageBox.showMessage("Couldn't reset settings!")
|
||||
return res.data;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error)
|
||||
this.$refs.messageBox.showMessage("Couldn't reset settings!")
|
||||
return { 'status': false }
|
||||
});
|
||||
// Perform delete operation
|
||||
} else {
|
||||
// User clicked No
|
||||
// Do nothing
|
||||
}
|
||||
});
|
||||
},
|
||||
update_backend(value) {
|
||||
res = update_setting('backend', value)
|
||||
if(res.status){
|
||||
if (res.status) {
|
||||
console.log("Backend changed")
|
||||
}
|
||||
|
||||
@ -371,6 +413,10 @@ export default {
|
||||
},
|
||||
|
||||
}, async mounted() {
|
||||
nextTick(() => {
|
||||
feather.replace()
|
||||
|
||||
})
|
||||
this.backendsArr = await this.api_get_req("list_backends")
|
||||
this.modelsArr = await this.api_get_req("list_models")
|
||||
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.langArr = await this.api_get_req("list_languages")
|
||||
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>
|
||||
<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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user