added custom model visibility in the list

web/src/components/ModelEntry.vue

@@ -1,62 +1,69 @@
 <template>
-  <div class="flex items-center p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer" @click.stop="toggleSelected"  :class="selected?' border-primary-light':'border-transparent'">
+  <div class="flex items-center p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer"
+    @click.stop="toggleSelected" :class="selected ? ' border-primary-light' : 'border-transparent'">
     <div class="flex-shrink-0">
       <i :class="`fas ${icon} text-xl`"></i>
     </div>
-    <div class="flex-1">
+    <div v-if="model.isCustomModel">
       <h3 class="font-bold font-large text-lg">
         {{ title }}
       </h3>
-      <div class="flex flex-shrink-0">
+      
-        <b>Manual download:&nbsp;</b>
+    </div>
-        <a :href="path" @click.stop 
+    <div class="flex-1" v-if="!model.isCustomModel">
-        class="flex hover:text-secondary duration-75 active:scale-90"
+      <h3 class="font-bold font-large text-lg">
-          title="Download this manually (faster) and put it in the models/<your backend> folder then refresh">
+        {{ title }}
-          <i data-feather="link" class="w-5 p-1"></i>
+      </h3>
-          {{ title }}
+
-        </a>
+        <div class="flex flex-shrink-0">
-      </div>
+          <b>Manual download:&nbsp;</b>
-      <div class="flex flex-shrink-0">
+          <a :href="path" @click.stop class="flex hover:text-secondary duration-75 active:scale-90"
-        <b>License:&nbsp;</b>
+            title="Download this manually (faster) and put it in the models/<your backend> folder then refresh">
+            <i data-feather="link" class="w-5 p-1"></i>
+            {{ title }}
+          </a>
+        </div>
+        <div class="flex flex-shrink-0">
+          <b>License:&nbsp;</b>
           {{ license }}
+        </div>
+        <div class="flex flex-shrink-0">
+          <b>Owner:&nbsp;</b>
+          <a :href="owner_link" target="_blank" @click.stop class="flex hover:text-secondary duration-75 active:scale-90"
+            title="Owner's profile">
+            <i data-feather="link" class="w-5 p-1"></i>
+            {{ owner }}
+          </a>
+        </div>
+        <b>Description:&nbsp;</b><br>
+        <p class="opacity-80">{{ description }}</p>
       </div>
-      <div class="flex flex-shrink-0">
+      <div class="flex-shrink-0" v-if="!model.isCustomModel">
-        <b>Owner:&nbsp;</b>
+        <button class="px-4 py-2 rounded-md text-white font-bold transition-colors duration-300"
-        <a :href="owner_link"  target="_blank" @click.stop 
+          :class="[isInstalled ? 'bg-red-500 hover:bg-red-600' : 'bg-green-500 hover:bg-green-600']"
-        class="flex hover:text-secondary duration-75 active:scale-90"
+          :disabled="installing || uninstalling" @click.stop="toggleInstall">
-          title="Owner's profile">
+          <template v-if="installing">
-          <i data-feather="link" class="w-5 p-1"></i>
+            <div class="flex items-center space-x-2">
-          {{ owner }}
+              <div class="h-2 w-20 bg-gray-300 rounded">
-        </a>
+                <div :style="{ width: progress + '%' }" class="h-full bg-red-500 rounded"></div>
+              </div>
+              <span>Installing...{{ Math.floor(progress) }}%</span>
+            </div>
+          </template>
+          <template v-else-if="uninstalling">
+            <div class="flex items-center space-x-2">
+              <div class="h-2 w-20 bg-gray-300 rounded">
+                <div :style="{ width: progress + '%' }" class="h-full bg-green-500"></div>
+              </div>
+              <span>Uninstalling...</span>
+            </div>
+          </template>
+          <template v-else>
+            {{ isInstalled ? 'Uninstall' : 'Install' }}
+          </template>
+        </button>
       </div>
-      <b>Description:&nbsp;</b><br>
+ 
-      <p class="opacity-80">{{ description }}</p>
-    </div>
-    <div class="flex-shrink-0">
-      <button class="px-4 py-2 rounded-md text-white font-bold transition-colors duration-300"
-        :class="[isInstalled ? 'bg-red-500 hover:bg-red-600' : 'bg-green-500 hover:bg-green-600']"
-        :disabled="installing || uninstalling" @click.stop="toggleInstall">
-        <template v-if="installing">
-          <div class="flex items-center space-x-2">
-            <div class="h-2 w-20 bg-gray-300 rounded">
-              <div :style="{ width: progress + '%' }" class="h-full bg-red-500 rounded"></div>
-            </div>
-            <span>Installing...{{ Math.floor(progress) }}%</span>
-          </div>
-        </template>
-        <template v-else-if="uninstalling">
-          <div class="flex items-center space-x-2">
-            <div class="h-2 w-20 bg-gray-300 rounded">
-              <div :style="{ width: progress + '%' }" class="h-full bg-green-500"></div>
-            </div>
-            <span>Uninstalling...</span>
-          </div>
-        </template>
-        <template v-else>
-          {{ isInstalled ? 'Uninstall' : 'Install' }}
-        </template>
-      </button>
-    </div>
   </div>
 </template>
 
@@ -76,7 +83,8 @@ export default {
     onInstall: Function,
     onUninstall: Function,
     onSelected: Function,
-    selected: Boolean
+    selected: Boolean,
+    model: Object
   },
   data() {
     return {
@@ -104,7 +112,7 @@ export default {
 
       }
     },
-    toggleSelected(){
+    toggleSelected() {
       this.onSelected(this)
     },
     handleSelection() {

web/src/views/SettingsView.vue

@@ -131,7 +131,7 @@
                             :path="model.path" :owner="model.owner" :owner_link="model.owner_link" :license="model.license"
                             :description="model.description" :is-installed="model.isInstalled" :on-install="onInstall"
                             :on-uninstall="onUninstall" :on-selected="onSelected"
-                            :selected="model.title === configFile.model" />
+                            :selected="model.title === configFile.model" :model="model" />
                     </div>
                 </div>
                 <!-- EXPAND / COLLAPSE BUTTON -->
@@ -490,6 +490,30 @@ export default {
                     //console.log(`Models list recovered successfuly: ${JSON.stringify(response.data)}`)
                     console.log(" models",response.data.length)
                     this.models = response.data;
+                    this.fetchCustomModels()
+                })
+                .catch(error => {
+                    console.log(error);
+                });
+        },
+        fetchCustomModels() {
+            console.log("Fetching Custom models")
+            axios.get('/list_models')
+                .then(response => {
+                    // Returns array of model filenames which are = to title of models zoo entry
+                    for (let i = 0; i < response.data.length; i++) {
+                        const customModel = response.data[i]
+                        const index = this.models.findIndex(x => x.title == customModel)
+                        console.log("model-ccc", customModel, index)
+                        if (index==-1){
+                            let newModelEntry = {}
+                            newModelEntry.title = customModel
+                            newModelEntry.isCustomModel = true
+                            this.models.push(newModelEntry)
+                        }
+                    }
+                    
+
                 })
                 .catch(error => {
                     console.log(error);