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

Merge pull request #220 from andzejsp/settings-upgrade

Browse Source 
many changes
This commit is contained in:
Saifeddine ALOUI 2023-05-25 07:12:02 +02:00 committed by GitHub
commit 391a57b2ba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 333 additions and 334 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,14 +18,14 @@
<b>Author:&nbsp;</b> <b>Author:&nbsp;</b>
{{ personality.author }} {{ personality.author }}
</div> </div>
<div class=""> <!-- <div class="">
<b>Language:&nbsp;</b> <b>Language:&nbsp;</b>
{{ personality.language }} {{ personality.language }}
</div> </div>
<div class=""> <div class="">
<b>Category:&nbsp;</b> <b>Category:&nbsp;</b>
{{ personality.category }} {{ personality.category }}
</div> </div> -->
</div> </div>
<b>Description:&nbsp;</b><br> <b>Description:&nbsp;</b><br>

6
web/src/components/Toast.vue
View File

@ -35,7 +35,8 @@
</template> </template>
<script> <script>
import feather from 'feather-icons'
import { nextTick } from 'vue'
export default { export default {
name: 'Toast', name: 'Toast',
emits: ['close'], emits: ['close'],
@ -58,7 +59,10 @@ export default {
this.success = success; this.success = success;
this.message = message; this.message = message;
this.show = true; this.show = true;
nextTick(() => {
feather.replace()
})
setTimeout(() => { setTimeout(() => {
this.$emit('close') this.$emit('close')
this.show = false this.show = false

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

@ -778,6 +778,7 @@ export default {
stopGenerating() { stopGenerating() {
this.stop_gen() this.stop_gen()
this.isGenerating = false this.isGenerating = false
this.setDiscussionLoading(this.currentDiscussion.id, this.isGenerating)
console.log("Stopped generating") console.log("Stopped generating")
}, },
finalMsgEvent(msgObj) { finalMsgEvent(msgObj) {
@ -853,10 +854,13 @@ export default {
const filename = 'discussions_export_' + formattedDate + '.json' const filename = 'discussions_export_' + formattedDate + '.json'
this.loading = true this.loading = true
const res = await this.export_multiple_discussions(discussionIdArr) const res = await this.export_multiple_discussions(discussionIdArr)
if (res.data) { if (res) {
this.saveJSONtoFile(res.data, filename) this.saveJSONtoFile(res, filename)
this.$refs.toast.showToast("Successfully exported", 4, true)
this.isCheckbox=false
}else{
this.$refs.toast.showToast("Failed to export discussions", 4, false)
} }
this.loading = false this.loading = false
} }

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

@ -29,7 +29,7 @@
<i data-feather="list"></i> <i data-feather="list"></i>
</button> </button>
</div> </div>
<div class="flex gap-3 flex-1 items-center justify-end"> <div class="flex gap-3 flex-1 items-center justify-end">
@ -37,13 +37,15 @@
<i data-feather="alert-triangle"></i> <i data-feather="alert-triangle"></i>
No model selected! No model selected!
</div> </div>
<div v-if="settingsChanged" class="flex gap-3 items-center"> <div class="flex gap-3 items-center">
<div v-if="settingsChanged" class="flex gap-3 items-center">
Apply changes:
<button v-if="!isLoading" class="text-2xl hover:text-secondary duration-75 active:scale-90"
title="Apply changes" type="button" @click.stop="applyConfiguration()">
<i data-feather="check"></i>
</button>
</div>
Apply changes:
<button v-if="!isLoading" class="text-2xl hover:text-secondary duration-75 active:scale-90"
title="Apply changes" type="button" @click.stop="applyConfiguration()">
<i data-feather="check"></i>
</button>
<!-- SPINNER --> <!-- SPINNER -->
<div v-if="isLoading" role="status"> <div v-if="isLoading" role="status">
<svg aria-hidden="true" class="w-6 h-6 animate-spin fill-secondary" viewBox="0 0 100 101" <svg aria-hidden="true" class="w-6 h-6 animate-spin fill-secondary" viewBox="0 0 100 101"
@ -61,330 +63,291 @@
</div> </div>
</div> </div>
</div> </div>
<div :class="isLoading ? 'pointer-events-none opacity-30':''">
<!-- MODELS ZOO -->
<div
class="flex flex-col mb-2 rounded-lg bg-bg-light-tone dark:bg-bg-dark-tone hover:bg-bg-light-tone-panel hover:dark:bg-bg-dark-tone-panel duration-150 shadow-lg">
<div class="flex flex-row p-3">
<button @click.stop="mzc_collapsed = !mzc_collapsed"
class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1 flex items-center">
<i :data-feather="mzc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2"></i>
<h3 class="text-lg font-semibold cursor-pointer select-none">
Models zoo</h3>
</button>
</div>
<div :class="{ 'hidden': mzc_collapsed }" class="flex flex-col mb-2 px-3 pb-0">
<div class="mx-2 mb-4">
<label for="backend" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
Backend: ({{ backendsArr.length }})
</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" :selected="item === configFile.backend">{{ item }}</option> <div :class="isLoading ? 'pointer-events-none opacity-30' : ''">
</select>
<!-- MODELS ZOO -->
<div
class="flex flex-col mb-2 rounded-lg bg-bg-light-tone dark:bg-bg-dark-tone hover:bg-bg-light-tone-panel hover:dark:bg-bg-dark-tone-panel duration-150 shadow-lg">
<div class="flex flex-row p-3">
<button @click.stop="mzc_collapsed = !mzc_collapsed"
class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1 flex items-center">
<i :data-feather="mzc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2"></i>
<h3 class="text-lg font-semibold cursor-pointer select-none">
Models zoo</h3>
</button>
</div> </div>
<div v-if="models.length > 0" class="mb-2"> <div :class="{ 'hidden': mzc_collapsed }" class="flex flex-col mb-2 px-3 pb-0">
<label for="model" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white"> <div class="mx-2 mb-4">
Models: ({{ models.length }}) <label for="backend" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
</label> Backend: ({{ backendsArr.length }})
<div ref="modelZoo" class="overflow-y-auto no-scrollbar p-2 pb-0 " </label>
:class="mzl_collapsed ? '' : 'max-h-96'"> <select id="backend" @change="update_backend($event.target.value)"
<model-entry v-for="(model, index) in models" :key="index" :title="model.title" :icon="model.icon" 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">
:path="model.path" :owner="model.owner" :owner_link="model.owner_link" :license="model.license"
:description="model.description" :is-installed="model.isInstalled" :on-install="onInstall" <option v-for="item in backendsArr" :selected="item === configFile.backend">{{ item }}</option>
:on-uninstall="onUninstall" :on-selected="onSelected" </select>
:selected="model.title === configFile.model" :model="model" />
</div> </div>
</div> <div v-if="models.length > 0" class="mb-2">
<!-- EXPAND / COLLAPSE BUTTON --> <label for="model" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
<button v-if="mzl_collapsed" Models: ({{ models.length }})
class="text-2xl hover:text-secondary duration-75 flex justify-center hover:bg-bg-light-tone hover:dark:bg-bg-dark-tone rounded-lg " </label>
title="Collapse" type="button" @click="mzl_collapsed = !mzl_collapsed"> <div ref="modelZoo" class="overflow-y-auto no-scrollbar p-2 pb-0 "
<i data-feather="chevron-up"></i> :class="mzl_collapsed ? '' : 'max-h-96'">
</button> <model-entry v-for="(model, index) in models" :key="index" :title="model.title"
<button v-else :icon="model.icon" :path="model.path" :owner="model.owner" :owner_link="model.owner_link"
class="text-2xl hover:text-secondary duration-75 flex justify-center hover:bg-bg-light-tone hover:dark:bg-bg-dark-tone rounded-lg " :license="model.license" :description="model.description" :is-installed="model.isInstalled"
title="Expand" type="button" @click="mzl_collapsed = !mzl_collapsed"> :on-install="onInstall" :on-uninstall="onUninstall" :on-selected="onSelected"
<i data-feather="chevron-down"></i> :selected="model.title === configFile.model" :model="model" />
</button>
</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 flex items-center">
<i :data-feather="pc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2"></i>
<h3 class="text-lg font-semibold cursor-pointer select-none">
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: ({{ persLangArr.length }})
</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" :selected="item === configFile.personality_language">{{ 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: ({{ persLangArr.length }})
</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" :selected="item === configFile.personality_category">{{ 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" :selected="item === configFile.personality">{{ item }}</option>
</select>
</div>
<div class="m-2">
<button @click="applyConfiguration" class="bg-blue-500 text-white py-2 px-4 rounded">
Apply Configuration
</button>
<div v-if="isLoading" class="loader"></div>
</div>
</div>
</div>
<!-- PERSONALITY ZOO -->
<div
class="flex flex-col mb-2 rounded-lg bg-bg-light-tone dark:bg-bg-dark-tone hover:bg-bg-light-tone-panel hover:dark:bg-bg-dark-tone-panel duration-150 shadow-lg">
<div class="flex flex-row p-3">
<button @click.stop="pzc_collapsed = !pzc_collapsed"
class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1 flex items-center">
<i :data-feather="pzc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2"></i>
<h3 class="text-lg font-semibold cursor-pointer select-none">
Personalities zoo</h3>
</button>
</div>
<div :class="{ 'hidden': pzc_collapsed }" class="flex flex-col mb-2 px-3 pb-0">
<div class="mx-2 mb-4">
<label for="persLang" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
Personalities Languages: ({{ persLangArr.length }})
</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" :selected="item === configFile.personality_language">{{ item }}
</option>
</select>
</div>
<div class="mx-2 mb-4">
<label for="persCat" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
Personalities Category: ({{ persCatgArr.length }})
</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" :selected="item === configFile.personality_category">{{ item }}
</option>
</select>
</div>
<div v-if="personalities.length > 0" class="mb-2">
<label for="model" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
Personalities: ({{ personalities.length }})
</label>
<div ref="personalitiesZoo" class="overflow-y-auto no-scrollbar p-2 pb-0 grid lg:grid-cols-3 md:grid-cols-2 gap-4"
:class="pzl_collapsed ? '' : 'max-h-96'">
<personality-entry v-for="(pers, index) in personalities" :key="index" :personality="pers" />
</div>
</div>
<!-- EXPAND / COLLAPSE BUTTON -->
<button v-if="pzl_collapsed"
class="text-2xl hover:text-secondary duration-75 flex justify-center hover:bg-bg-light-tone hover:dark:bg-bg-dark-tone rounded-lg "
title="Collapse" type="button" @click="pzl_collapsed = !pzl_collapsed">
<i data-feather="chevron-up"></i>
</button>
<button v-else
class="text-2xl hover:text-secondary duration-75 flex justify-center hover:bg-bg-light-tone hover:dark:bg-bg-dark-tone rounded-lg "
title="Expand" type="button" @click="pzl_collapsed = !pzl_collapsed">
<i data-feather="chevron-down"></i>
</button>
</div>
</div>
<!-- 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 flex items-center">
<i :data-feather="mc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2"></i>
<h3 class="text-lg font-semibold cursor-pointer select-none">
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> </div>
<input id="temperature" @change="update_setting('temperature', $event.target.value)" type="range"
v-model="configFile.temperature" 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>
<!-- EXPAND / COLLAPSE BUTTON -->
<button v-if="mzl_collapsed"
class="text-2xl hover:text-secondary duration-75 flex justify-center hover:bg-bg-light-tone hover:dark:bg-bg-dark-tone rounded-lg "
title="Collapse" type="button" @click="mzl_collapsed = !mzl_collapsed">
<i data-feather="chevron-up"></i>
</button>
<button v-else
class="text-2xl hover:text-secondary duration-75 flex justify-center hover:bg-bg-light-tone hover:dark:bg-bg-dark-tone rounded-lg "
title="Expand" type="button" @click="mzl_collapsed = !mzl_collapsed">
<i data-feather="chevron-down"></i>
</button>
</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" </div>
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> <!-- PERSONALITY ZOO -->
<div
class="flex flex-col mb-2 rounded-lg bg-bg-light-tone dark:bg-bg-dark-tone hover:bg-bg-light-tone-panel hover:dark:bg-bg-dark-tone-panel duration-150 shadow-lg">
<input id="predict" @change="update_setting('n_predict', $event.target.value)" type="range"
v-model="configFile.n_predict" min="0" max="2048" step="32" <div class="flex flex-row p-3">
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"> <button @click.stop="pzc_collapsed = !pzc_collapsed"
class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1 flex items-center">
<i :data-feather="pzc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2"></i>
<h3 class="text-lg font-semibold cursor-pointer select-none">
Personalities zoo</h3>
</button>
</div>
<div :class="{ 'hidden': pzc_collapsed }" class="flex flex-col mb-2 px-3 pb-0">
<div class="mx-2 mb-4">
<label for="persLang" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
Personalities Languages: ({{ persLangArr.length }})
</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" :selected="item === configFile.personality_language">{{ item
}}
</option>
</select>
</div> </div>
</div> <div class="mx-2 mb-4">
<div class="m-2"> <label for="persCat" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
<div class="flex flex-col align-bottom "> Personalities Category: ({{ persCatgArr.length }})
<div class="relative"> </label>
<p class="absolute left-0 mt-6"> <select id="persCat" @change="update_setting('personality_category', $event.target.value, refresh)"
<label for="top_k" class=" text-sm font-medium"> 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">
Top-K:
</label>
</p>
<p class="absolute right-0">
<input type="text" id="top_k-val" v-model="configFile.top_k" <option v-for="item in persCatgArr" :selected="item === configFile.personality_category">{{ item
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> </option>
<input id="top_k" @change="update_setting('top_k', $event.target.value)" type="range" </select>
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>
<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" <!-- <div class="mx-2 mb-4">
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"> <label for="persona" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
</p> 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" :selected="item === configFile.personality">{{ item }}</option>
</select>
</div> -->
<div v-if="personalitiesFiltered.length > 0" class="mb-2">
<label for="model" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
Personalities: ({{ personalitiesFiltered.length }})
</label>
<div ref="personalitiesZoo"
class="overflow-y-auto no-scrollbar p-2 pb-0 grid lg:grid-cols-3 md:grid-cols-2 gap-4"
:class="pzl_collapsed ? '' : 'max-h-96'">
<personality-entry v-for="(pers, index) in personalitiesFiltered" :key="index"
:personality="pers"
:selected="pers.name === configFile.personality && pers.category === configFile.personality_category && pers.language === configFile.personality_language"
:on-selected="onPersonalitySelected" />
</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"
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>
<!-- EXPAND / COLLAPSE BUTTON -->
<button v-if="pzl_collapsed"
class="text-2xl hover:text-secondary duration-75 flex justify-center hover:bg-bg-light-tone hover:dark:bg-bg-dark-tone rounded-lg "
title="Collapse" type="button" @click="pzl_collapsed = !pzl_collapsed">
<i data-feather="chevron-up"></i>
</button>
<button v-else
class="text-2xl hover:text-secondary duration-75 flex justify-center hover:bg-bg-light-tone hover:dark:bg-bg-dark-tone rounded-lg "
title="Expand" type="button" @click="pzl_collapsed = !pzl_collapsed">
<i data-feather="chevron-down"></i>
</button>
</div> </div>
<div class="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" </div>
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> <!-- MODEL -->
<div
<input id="repeat_penalty" @change="update_setting('repeat_penalty', $event.target.value)" 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">
type="range" v-model="configFile.repeat_penalty" min="0" max="2" step="0.01" <div class="flex flex-row">
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"> <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 flex items-center">
<i :data-feather="mc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2"></i>
<h3 class="text-lg font-semibold cursor-pointer select-none">
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>
</div> <div class="m-2">
<div class="m-2"> <div class="flex flex-col align-bottom ">
<div class="flex flex-col align-bottom "> <div class="relative">
<div class="relative"> <p class="absolute left-0 mt-6">
<p class="absolute left-0 mt-6"> <label for="temperature" class=" text-sm font-medium">
<label for="repeat_last_n" class=" text-sm font-medium"> Temperature:
Repeat last N: </label>
</label> </p>
</p> <p class="absolute right-0">
<p class="absolute right-0">
<input type="text" id="repeat_last_n-val" v-model="configFile.repeat_last_n" <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>
<input id="temperature" @change="update_setting('temperature', $event.target.value)"
type="range" v-model="configFile.temperature" 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>
<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 id="repeat_last_n" @change="update_setting('repeat_last_n', $event.target.value)" <input type="text" id="predict-val" v-model="configFile.n_predict"
type="range" v-model="configFile.repeat_last_n" min="0" max="100" step="1" 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="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"> </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>
</div> </div>
</div> </div>
</div>
</div> </div>
@ -421,6 +384,7 @@ export default {
// Models zoo installer stuff // Models zoo installer stuff
models: [], models: [],
personalities: [], personalities: [],
personalitiesFiltered: [],
// Accordeon stuff // Accordeon stuff
collapsedArr: [], collapsedArr: [],
all_collapsed: true, all_collapsed: true,
@ -463,7 +427,7 @@ export default {
axios.get('/get_available_models') axios.get('/get_available_models')
.then(response => { .then(response => {
//console.log(`Models list recovered successfuly: ${JSON.stringify(response.data)}`) //console.log(`Models list recovered successfuly: ${JSON.stringify(response.data)}`)
console.log(" models",response.data.length) console.log(" models", response.data.length)
this.models = response.data; this.models = response.data;
this.fetchCustomModels() this.fetchCustomModels()
}) })
@ -480,7 +444,7 @@ export default {
const customModel = response.data[i] const customModel = response.data[i]
const index = this.models.findIndex(x => x.title == customModel) const index = this.models.findIndex(x => x.title == customModel)
console.log("model-ccc", customModel, index) console.log("model-ccc", customModel, index)
if (index==-1){ if (index == -1) {
let newModelEntry = {} let newModelEntry = {}
newModelEntry.title = customModel newModelEntry.title = customModel
newModelEntry.isCustomModel = true newModelEntry.isCustomModel = true
@ -488,13 +452,42 @@ export default {
this.models.push(newModelEntry) this.models.push(newModelEntry)
} }
} }
}) })
.catch(error => { .catch(error => {
console.log(error); console.log(error);
}); });
}, },
onPersonalitySelected(pers) {
console.log("Selected personality")
// eslint-disable-next-line no-unused-vars
if (this.isLoading) {
this.$refs.toast.showToast("Loading... please wait", 4, false)
}
if (pers.personality) {
// if (model_object.isInstalled) {
this.settingsChanged = true
const res = this.update_setting('personality', pers.personality.name,()=>{
this.$refs.toast.showToast("Personality:\n" + pers.personality.name + "\nselected", 4, true)
this.configFile.personality = pers.personality.name
this.configFile.personality_category = pers.personality.category
this.configFile.personality_language = pers.personality.language
})
nextTick(() => {
feather.replace()
})
}
},
onSelected(model_object) { onSelected(model_object) {
console.log("Selected model") console.log("Selected model")
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
@ -503,28 +496,27 @@ export default {
} }
if (model_object) { if (model_object) {
if (model_object.isInstalled) { if (model_object.isInstalled) {
if (this.configFile.model != model_object.title) {
this.update_model(model_object.title)
this.configFile.model = model_object.title
this.$refs.toast.showToast("Model:\n" + model_object.title + "\nselected", 4, true)
this.settingsChanged = true
this.isModelSelected = true
}
} else { if (this.configFile.model != model_object.title) {
this.$refs.toast.showToast("Model:\n" + model_object.title + "\nis not installed", 4, false) this.update_model(model_object.title)
this.configFile.model = model_object.title
this.$refs.toast.showToast("Model:\n" + model_object.title + "\nselected", 4, true)
this.settingsChanged = true
this.isModelSelected = true
} }
} else {
this.$refs.toast.showToast("Model:\n" + model_object.title + "\nis not installed", 4, false)
}
nextTick(() => { nextTick(() => {
feather.replace() feather.replace()
}) })
} }
//this.update_setting('model', model_object.title, (res)=>{console.log("Model selected"); })
}, },
// Model installation // Model installation
@ -618,7 +610,7 @@ export default {
} }
}); });
}) })
this.getPersonalitiesArr()
this.fetchModels(); this.fetchModels();
}, },
// Accordeon stuff // Accordeon stuff
@ -695,6 +687,7 @@ export default {
console.log("applying configuration succeeded") console.log("applying configuration succeeded")
this.$refs.toast.showToast("Configuration changed successfully.", 4, true) this.$refs.toast.showToast("Configuration changed successfully.", 4, true)
this.settingsChanged = false this.settingsChanged = false
this.save_configuration()
} else { } else {
console.log("applying configuration failed") console.log("applying configuration failed")
this.$refs.toast.showToast("Configuration change failed.", 4, false) this.$refs.toast.showToast("Configuration change failed.", 4, false)
@ -712,7 +705,7 @@ export default {
.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("Error: Couldn't save settings!") this.$refs.messageBox.showMessage("Error: Couldn't save settings!")
@ -773,7 +766,8 @@ export default {
this.showToast = false this.showToast = false
}, },
async getPersonalitiesArr() { async getPersonalitiesArr() {
this.personalities this.isLoading = true
this.personalities=[]
const dictionary = await this.api_get_req("get_all_personalities") const dictionary = await this.api_get_req("get_all_personalities")
const langkeys = Object.keys(dictionary); // returns languages folder names const langkeys = Object.keys(dictionary); // returns languages folder names
for (let i = 0; i < langkeys.length; i++) { for (let i = 0; i < langkeys.length; i++) {
@ -801,6 +795,9 @@ export default {
} }
} }
this.personalitiesFiltered = this.personalities.filter((item) => item.category === this.configFile.personality_category && item.language === this.configFile.personality_language)
this.isLoading = false
} }
}, async mounted() { }, async mounted() {
@ -822,7 +819,7 @@ export default {
this.langArr = await this.api_get_req("list_languages") this.langArr = await this.api_get_req("list_languages")
await this.getPersonalitiesArr() await this.getPersonalitiesArr()
this.isLoading = false this.isLoading = false
console.log('ppp', this.personalities)
}, },
watch: { watch: {
bec_collapsed() { bec_collapsed() {
@ -886,12 +883,7 @@ export default {
console.log('iss selected:', val) console.log('iss selected:', val)
} }
// configFile(){
// nextTick(() => {
// feather.replace()
// })
// }
} }
} }
@ -922,5 +914,4 @@ export default {
100% { 100% {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }</style>
</style>