modified buttons to be more implicit

web/src/components/BindingEntry.vue

@@ -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"
+  <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-light' : 'border-transparent'"
+    @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)

web/src/components/ModelEntry.vue

@@ -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"
+    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-light' : 'border-transparent'" :title="title">
+    @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>

web/src/views/SettingsView.vue

@@ -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">
+                                <button v-if="searchPersonality" @click.stop="searchPersonality = ''" type="button"
-                                        Clear search</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
+
+        }
 
 
     },