mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2025-01-18 18:56:32 +00:00
added custom model visibility in the list
This commit is contained in:
parent
e2cfdfd73e
commit
6067c9be08
@ -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: </b>
|
||||
<a :href="path" @click.stop
|
||||
class="flex hover:text-secondary duration-75 active:scale-90"
|
||||
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: </b>
|
||||
|
||||
</div>
|
||||
<div class="flex-1" v-if="!model.isCustomModel">
|
||||
<h3 class="font-bold font-large text-lg">
|
||||
{{ title }}
|
||||
</h3>
|
||||
|
||||
<div class="flex flex-shrink-0">
|
||||
<b>Manual download: </b>
|
||||
<a :href="path" @click.stop class="flex hover:text-secondary duration-75 active:scale-90"
|
||||
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: </b>
|
||||
{{ license }}
|
||||
</div>
|
||||
<div class="flex flex-shrink-0">
|
||||
<b>Owner: </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: </b><br>
|
||||
<p class="opacity-80">{{ description }}</p>
|
||||
</div>
|
||||
<div class="flex flex-shrink-0">
|
||||
<b>Owner: </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: </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 class="flex-shrink-0" v-if="!model.isCustomModel">
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
<span>Uninstalling...</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ isInstalled ? 'Uninstall' : 'Install' }}
|
||||
</template>
|
||||
</button>
|
||||
</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() {
|
||||
|
@ -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);
|
||||
|
Loading…
Reference in New Issue
Block a user