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

added many quality fixes

Browse Source
This commit is contained in:
AndzejsP 2023-05-27 15:52:50 +03:00
parent 6722ffb931
commit 2f0f44aff6
1 changed files with 115 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
web/src/components/ModelEntry.vue
View File

@ -13,26 +13,36 @@
</div>
<div class="flex-1" v-if="!model.isCustomModel">
<div class="flex gap-3 items-center">
<img :src="getImgUrl()" @error="defaultImg($event)" class="w-10 h-10 rounded-lg object-fill">
<img :src="getImgUrl()" @error="defaultImg($event)" class="w-10 h-10 rounded-lg object-fill" :class="linkNotValid ? 'grayscale':''">
<h3 class="font-bold font-large text-lg">
{{ title }}
</h3>
</div>
<div class="flex flex-shrink-0">
<b>Manual download:&nbsp;</b>
<a :href="path" @click.stop class="flex hover:text-secondary duration-75 active:scale-90"
<a :href="path" @click.stop class="flex items-center hover:text-secondary duration-75 active:scale-90"
title="Download this manually (faster) and put it in the models/<your binding> folder then refresh">
<i data-feather="link" class="w-5 p-1"></i>
<i data-feather="link" class="w-5 p-1" ></i>
{{ title }}
</a>
</div>
<div class="flex flex-shrink-0">
<b>File size:&nbsp;</b>
<div class="flex " :class="linkNotValid? 'text-red-600':''">
<i data-feather="file" class="w-5 p-1"></i>
{{ fileSize }}
</div>
</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"
<a :href="owner_link" target="_blank" rel="noopener noreferrer" @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 }}
@ -41,9 +51,9 @@
<b>Description:&nbsp;</b><br>
<p class="opacity-80">{{ description }}</p>
</div>
<div class="flex-shrink-0" v-if="!model.isCustomModel">
<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']"
:class="[isInstalled ? 'bg-red-500 hover:bg-red-600' : linkNotValid ? 'bg-gray-500 hover:bg-gray-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">
@ -62,7 +72,7 @@
</div>
</template>
<template v-else>
{{ isInstalled ? 'Uninstall' : 'Install' }}
{{ isInstalled ? model.isCustomModel ? 'Delete' : 'Uninstall' : linkNotValid ? 'Link is not valid':'Install' }}
</template>
</button>
</div>
@ -71,6 +81,7 @@
</template>
<script>
import axios from "axios";
import { nextTick } from 'vue'
import feather from 'feather-icons'
import defaultImgPlaceholder from "../assets/default_model.png"
@ -96,10 +107,14 @@ export default {
progress: 0,
installing: false,
uninstalling: false,
failedToLoad: false
failedToLoad: false,
fileSize: '',
linkNotValid:false,
};
},
mounted() {
async mounted() {
this.fileSize = await this.getFileSize(this.model.path)
//console.log('model path', this.model.path)
nextTick(() => {
feather.replace()
@ -107,6 +122,88 @@ export default {
})
},
methods: {
async getFileSize(url) {
try {
const res = await axios.head(url)
//console.log("addddd",url, res.headers)
if (res) {
if (res.headers["content-length"]) {
return this.humanFileSize(res.headers["content-length"])
}
if (this.model.filesize) {
return this.humanFileSize(this.model.filesize)
}
return 'Could not be determined'
}
if (this.model.filesize) {
return this.humanFileSize(this.model.filesize)
}
return 'Could not be determined'
// Example response
// {
// date: 'Tue, 03 Apr 2018 14:29:32 GMT',
// 'content-type': 'application/javascript; charset=utf-8',
// 'content-length': '9068',
// connection: 'close',
// 'last-modified': 'Wed, 28 Feb 2018 04:16:30 GMT',
// etag: '"5a962d1e-236c"',
// expires: 'Sun, 24 Mar 2019 14:29:32 GMT',
// 'cache-control': 'public, max-age=30672000',
// 'access-control-allow-origin': '*',
// 'cf-cache-status': 'HIT',
// 'accept-ranges': 'bytes',
// 'strict-transport-security': 'max-age=15780000; includeSubDomains',
// 'expect-ct': 'max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"',
// server: 'cloudflare',
// 'cf-ray': '405c3a5cba7a68ba-CDG'
// }
} catch (error) {
console.log(error.message,'getFileSize')
this.linkNotValid=true
return 'Could not be determined'
}
},
/** From https://stackoverflow.com/a/14919494/14106028
* Format bytes as human-readable text.
*
* @param bytes Number of bytes.
* @param si True to use metric (SI) units, aka powers of 1000. False to use
* binary (IEC), aka powers of 1024.
* @param dp Number of decimal places to display.
*
* @return Formatted string.
*/
humanFileSize(bytes, si = false, dp = 1) {
const thresh = si ? 1000 : 1024;
if (Math.abs(bytes) < thresh) {
return bytes + ' B';
}
const units = si
? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
: ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
let u = -1;
const r = 10 ** dp;
do {
bytes /= thresh;
++u;
} while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
return bytes.toFixed(dp) + ' ' + units[u];
},
getImgUrl() {
if (this.icon === '/images/default_model.png') {
@ -137,6 +234,15 @@ export default {
this.onSelected(this);
}
}
},
watch:{
linkNotValid(){
nextTick(() => {
feather.replace()
})
}
}
};
</script>