mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2024-12-21 05:13:10 +00:00
modified buttons to be more implicit
This commit is contained in:
AndzejsP
parent
032ac75f34
commit
d0a5d16456
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class=" items-start p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer select-none"
|
||||
@click.stop="toggleSelected" :class="selected ? ' border-primary-light' : 'border-transparent'"
|
||||
<div class=" items-start p-4 hover:bg-primary-light hover:border-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer select-none"
|
||||
@click.stop="toggleSelected" :class="selected ? ' border-primary bg-primary' : 'border-transparent'"
|
||||
:title="!binding.installed ? 'Not installed' : binding.name">
|
||||
|
||||
<div :class="!binding.installed ? 'opacity-50' : ''">
|
||||
<div>
|
||||
|
||||
<div class="flex flex-row items-center gap-3 ">
|
||||
<img ref="imgElement" :src="getImgUrl()" @error="defaultImg($event)"
|
||||
@ -16,14 +16,15 @@
|
||||
</div>
|
||||
<!-- ADVANCED OPTIONS -->
|
||||
<div class="flex-none gap-1">
|
||||
<button v-if="!binding.installed" type="button" title="Not installed"
|
||||
|
||||
<!-- <button v-if="!binding.installed" type="button" title="Not installed"
|
||||
class="hover:text-red-600 duration-75 font-medium rounded-lg text-sm p-2 text-center inline-flex items-center "
|
||||
@click.stop="">
|
||||
<i data-feather="slash" class="w-5"></i>
|
||||
<span class="sr-only">Not installed</span>
|
||||
</button>
|
||||
</button> -->
|
||||
|
||||
<button v-if="binding.installed" type="button" title="Reinstall binding"
|
||||
<!-- <button v-if="binding.installed" type="button" title="Reinstall binding"
|
||||
class="hover:text-secondary duration-75 active:scale-90 font-medium rounded-lg text-sm p-2 text-center inline-flex items-center "
|
||||
@click.stop="toggleReinstall">
|
||||
<i data-feather="tool" class="w-5"></i>
|
||||
@ -34,7 +35,7 @@
|
||||
@click.stop="toggleSettings">
|
||||
<i data-feather="sliders" class="w-5"></i>
|
||||
<span class="sr-only">Settings</span>
|
||||
</button>
|
||||
</button> -->
|
||||
<!-- - NOT IMPLEMENTED -->
|
||||
<!--
|
||||
<button type="button" title="Help - Not implemented"
|
||||
@ -45,6 +46,27 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="flex items-center flex-row-reverse gap-2 my-1">
|
||||
<!-- CONTROLS -->
|
||||
<button v-if="!binding.installed" title="Click to install" type="button" @click.stop="toggleInstall"
|
||||
class="inline-flex items-center gap-2 px-3 py-2 text-xs font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
||||
Install
|
||||
|
||||
<span class="sr-only">Click to install</span>
|
||||
</button>
|
||||
<button v-if="binding.installed" title="Click to Reinstall binding" type="button" @click.stop="toggleReinstall"
|
||||
class="inline-flex items-center gap-2 px-3 py-2 text-xs font-medium text-center focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 rounded-lg dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900">
|
||||
Reinstall binding
|
||||
|
||||
<span class="sr-only">Reinstall binding</span>
|
||||
</button>
|
||||
<button v-if="selected" title="Click to open Settings" type="button" @click.stop="toggleSettings"
|
||||
class="inline-flex items-center gap-2 px-3 py-2 text-xs font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
||||
Settings
|
||||
|
||||
<span class="sr-only">Settings</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- <div class=" justify-end">
|
||||
<i data-feather="sliders" class="w-5 m-1"></i>
|
||||
</div>
|
||||
@ -102,6 +124,7 @@ export default {
|
||||
binding: {},
|
||||
onSelected: Function,
|
||||
onReinstall: Function,
|
||||
onInstall: Function,
|
||||
onSettings: Function,
|
||||
selected: Boolean,
|
||||
|
||||
@ -131,7 +154,10 @@ export default {
|
||||
event.target.src = botImgPlaceholder
|
||||
},
|
||||
toggleSelected() {
|
||||
this.onSelected(this)
|
||||
this.onSelected(this)
|
||||
},
|
||||
toggleInstall() {
|
||||
this.onInstall(this)
|
||||
},
|
||||
toggleReinstall() {
|
||||
this.onReinstall(this)
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div
|
||||
class="relative items-start p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer select-none"
|
||||
@click.stop="toggleSelected" :class="selected ? ' border-primary-light' : 'border-transparent'" :title="title">
|
||||
|
||||
class="relative items-start p-4 hover:bg-primary-light hover:border-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer select-none"
|
||||
@click.stop="toggleSelected" :class="selected ? ' border-primary bg-primary' : 'border-transparent'" :title="title">
|
||||
<!-- CUSTOM MODEL VIEW -->
|
||||
<div class="flex flex-row" v-if="model.isCustomModel">
|
||||
<div class="flex gap-3 items-center grow">
|
||||
<img :src="getImgUrl()" @error="defaultImg($event)" class="w-10 h-10 rounded-lg object-fill">
|
||||
@ -76,7 +76,7 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div v-if="!model.isCustomModel" :class="!model.isInstalled ? 'opacity-50' : ''">
|
||||
<div >
|
||||
|
||||
<div class="flex flex-row items-center gap-3 ">
|
||||
<img ref="imgElement" :src="getImgUrl()" @error="defaultImg($event)" class="w-10 h-10 rounded-lg object-fill"
|
||||
@ -89,7 +89,7 @@
|
||||
</div>
|
||||
<!-- ADVANCED OPTIONS -->
|
||||
<div class="flex-none gap-1">
|
||||
<button v-if="!model.isInstalled" type="button" title="Not installed"
|
||||
<!-- <button v-if="!model.isInstalled" type="button" title="Not installed"
|
||||
class="hover:text-red-600 duration-75 font-medium rounded-lg text-sm p-2 text-center inline-flex items-center "
|
||||
@click.stop="">
|
||||
<i data-feather="slash" class="w-5"></i>
|
||||
@ -110,7 +110,7 @@
|
||||
class="hover:text-secondary duration-75 active:scale-90 font-medium rounded-lg text-sm p-2 text-center inline-flex items-center "
|
||||
title="Copy model info to clipboard" @click.stop="toggleCopy()">
|
||||
<i data-feather="clipboard" class="w-5"></i>
|
||||
</button>
|
||||
</button> -->
|
||||
<!-- <button v-if="selected" type="button" title="Settings"
|
||||
class="hover:text-secondary duration-75 active:scale-90 font-medium rounded-lg text-sm p-2 text-center inline-flex items-center "
|
||||
@click.stop="toggleSettings">
|
||||
@ -127,16 +127,44 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="flex items-center flex-row-reverse gap-2 my-1">
|
||||
<!-- CONTROLS -->
|
||||
<button type="button" title="Copy model info to clipboard" @click.stop="toggleCopy()"
|
||||
class="inline-flex items-center gap-2 px-3 py-2 text-xs font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
||||
Copy info
|
||||
|
||||
<span class="sr-only">Settings</span>
|
||||
</button>
|
||||
<div class="flex flex-row items-center ">
|
||||
|
||||
<div v-if="linkNotValid" class="text-base text-red-600 flex items-center mt-1 ">
|
||||
<i data-feather="alert-triangle" class="flex-shrink-0 mx-1"></i>
|
||||
Link is not valid
|
||||
</div>
|
||||
</div>
|
||||
<button v-if="!model.isInstalled && !linkNotValid" title="Click to install" type="button" @click.stop="toggleInstall"
|
||||
class="inline-flex items-center gap-2 px-3 py-2 text-xs font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
||||
Install
|
||||
|
||||
<span class="sr-only">Click to install</span>
|
||||
</button>
|
||||
<button v-if="model.isInstalled" title="Delete file from disk" type="button" @click.stop="toggleInstall"
|
||||
class="inline-flex items-center gap-2 px-3 py-2 text-xs font-medium text-center focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 rounded-lg dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900">
|
||||
Uninstall
|
||||
|
||||
<span class="sr-only">Remove</span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
<div class="" :title="!model.isInstalled ? 'Not installed' : title">
|
||||
<div class="">
|
||||
<div class="flex flex-row items-center ">
|
||||
<!-- <div class="flex flex-row items-center ">
|
||||
|
||||
<div v-if="linkNotValid" class="text-base text-red-600 flex items-center mt-1 ">
|
||||
<i data-feather="alert-triangle" class="flex-shrink-0 mx-1"></i>
|
||||
Link is not valid
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="flex flex-row items-center ">
|
||||
|
||||
<i data-feather="download" class="w-5 m-1 flex-shrink-0"></i>
|
||||
@ -152,10 +180,11 @@
|
||||
Click here to download
|
||||
|
||||
</a>
|
||||
<div class="grow"></div>
|
||||
<button
|
||||
class="hover:text-secondary duration-75 active:scale-90 font-medium rounded-lg text-sm p-2 text-center inline-flex items-center "
|
||||
title="Copy link to clipboard" @click.stop="toggleCopyLink()">
|
||||
<i data-feather="copy" class="w-5"></i>
|
||||
<i data-feather="clipboard" class="w-5"></i>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
@ -193,7 +193,8 @@
|
||||
</h3>
|
||||
<i data-feather="hard-drive" class="w-5 h-5 mx-1 flex-shrink-0"></i>
|
||||
<h3 class="font-bold font-large text-lg">
|
||||
<div> {{ disk_binding_models_usage }} / {{ disk_total_space }} ({{ disk_percent_usage }}%)</div>
|
||||
<div> {{ disk_binding_models_usage }} / {{ disk_total_space }} ({{ disk_percent_usage
|
||||
}}%)</div>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
@ -376,7 +377,7 @@
|
||||
<TransitionGroup name="list">
|
||||
<BindingEntry ref="bindingZoo" v-for="(binding, index) in bindings"
|
||||
:key="'index-' + index + '-' + binding.folder" :binding="binding"
|
||||
:on-selected="onSelectedBinding" :on-reinstall="onReinstallBinding"
|
||||
:on-selected="onSelectedBinding" :on-reinstall="onReinstallBinding" :on-install="onInstallBinding"
|
||||
:on-settings="onSettingsBinding" :selected="binding.folder === configFile.binding_name">
|
||||
</BindingEntry>
|
||||
</TransitionGroup>
|
||||
@ -647,9 +648,10 @@
|
||||
class="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
||||
placeholder="Search personality..." required v-model="searchPersonality"
|
||||
@keyup.stop="searchPersonality_func">
|
||||
<button v-if="searchPersonality" @click.stop="searchPersonality=''" type="button" class="text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
||||
Clear search</button>
|
||||
|
||||
<button v-if="searchPersonality" @click.stop="searchPersonality = ''" type="button"
|
||||
class="text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
||||
Clear search</button>
|
||||
|
||||
<!-- @input="filterPersonalities()" -->
|
||||
|
||||
</div>
|
||||
@ -1283,7 +1285,7 @@ export default {
|
||||
},
|
||||
onCancelInstall(modelEntry) {
|
||||
modelEntry.installing = false
|
||||
|
||||
|
||||
this.$refs.toast.showToast("Model installation aborted", 4, false)
|
||||
socket.emit('cancel_install', { model_name: modelEntry.title, binding_folder: this.configFile.binding_name, model_url: modelEntry.path });
|
||||
},
|
||||
@ -1305,7 +1307,7 @@ export default {
|
||||
const progressListener = (response) => {
|
||||
console.log("received something");
|
||||
if (response.status && response.progress <= 100) {
|
||||
console.log(`Progress`,response);
|
||||
console.log(`Progress`, response);
|
||||
model_object.progress = response.progress
|
||||
model_object.speed = response.speed
|
||||
model_object.total_size = response.total_size
|
||||
@ -1372,7 +1374,7 @@ export default {
|
||||
this.api_get_req("disk_usage").then(response => {
|
||||
this.diskUsage = response
|
||||
})
|
||||
} else{
|
||||
} else {
|
||||
console.log("uninstalling failed", response)
|
||||
// Installation failed or encountered an error
|
||||
model_object.uninstalling = false;
|
||||
@ -1396,7 +1398,24 @@ export default {
|
||||
})
|
||||
},
|
||||
onSelectedBinding(binding_object) {
|
||||
if (!binding_object.binding.installed) {
|
||||
this.$refs.toast.showToast("Binding is not installed:\n" + binding_object.binding.name , 4, false)
|
||||
return
|
||||
}
|
||||
if (this.configFile.binding_name != binding_object.binding.folder) {
|
||||
|
||||
// disabled for now
|
||||
// if (binding_object.binding.folder === 'backend_template' || binding_object.binding.folder === 'binding_template') {
|
||||
// this.$refs.toast.showToast("Cannot select template", 4, false)
|
||||
|
||||
// return
|
||||
// }
|
||||
this.update_binding(binding_object.binding.folder)
|
||||
//console.log('lol',binding_object)
|
||||
}
|
||||
},
|
||||
onInstallBinding(binding_object) {
|
||||
|
||||
if (this.configFile.binding_name != binding_object.binding.folder) {
|
||||
|
||||
// disabled for now
|
||||
@ -2310,7 +2329,7 @@ export default {
|
||||
// console.log('did settings?',this.settingsChanged)
|
||||
await this.$router.isReady()
|
||||
if (this.settingsChanged) {
|
||||
const res = await this.$refs.yesNoDialog.askQuestion("You forgot to apply changes?\nYou need to apply changes before you leave, or else.", 'Apply configuration', 'Cancel')
|
||||
const res = await this.$refs.yesNoDialog.askQuestion("Did You forgot to apply changes?\nYou need to apply changes before you leave, or else.", 'Apply configuration', 'Cancel')
|
||||
if (res) {
|
||||
this.applyConfiguration()
|
||||
|
||||
@ -2319,6 +2338,16 @@ export default {
|
||||
return false
|
||||
|
||||
}
|
||||
if (!this.isModelSelected) {
|
||||
const res = await this.$refs.yesNoDialog.askQuestion("Did You forgot to select model?\nYou need to select model before you leave, or else.", 'Ok', 'Cancel')
|
||||
if (res) {
|
||||
//
|
||||
|
||||
}
|
||||
|
||||
return false
|
||||
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user