mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2025-01-31 00:23:52 +00:00
speedstick
This commit is contained in:
AndzejsP
parent
b7129933b3
commit
98ddad578f
@ -17,7 +17,7 @@
|
||||
</button>
|
||||
<button
|
||||
class=" hover:text-red-600 duration-75 active:scale-90 font-medium rounded-lg text-sm p-2 text-center inline-flex items-center "
|
||||
title="Delete file from disk" type="button" @click.stop="">
|
||||
title="Delete file from disk" type="button" @click.stop="toggleInstall">
|
||||
<i data-feather="trash" class="w-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
@ -50,6 +50,10 @@
|
||||
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
|
||||
<div class="bg-blue-600 h-2.5 rounded-full" :style="{ width: progress + '%' }"></div>
|
||||
</div>
|
||||
<div class="flex justify-between mb-1">
|
||||
<span class="text-base font-medium text-blue-700 dark:text-white">Download speed: {{ speed_computed }}/s</span>
|
||||
<span class="text-sm font-medium text-blue-700 dark:text-white">{{ downloaded_size_computed }}/{{ total_size_computed }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-grow">
|
||||
@ -61,7 +65,7 @@
|
||||
class="mr-2 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
||||
{{ ConfirmButtonText }}
|
||||
</button> -->
|
||||
<button @click.stop="" type="button" title="Cancel download"
|
||||
<button @click.stop="toggleCancelInstall" type="button" title="Cancel download"
|
||||
class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
|
||||
Cancel
|
||||
</button>
|
||||
@ -99,7 +103,7 @@
|
||||
</button>
|
||||
<button v-if="model.isInstalled"
|
||||
class=" hover:text-red-600 duration-75 active:scale-90 font-medium rounded-lg text-sm p-2 text-center inline-flex items-center "
|
||||
title="Delete file from disk" type="button" @click.stop="">
|
||||
title="Delete file from disk" type="button" @click.stop="toggleInstall">
|
||||
<i data-feather="trash" class="w-5"></i>
|
||||
</button>
|
||||
<button
|
||||
@ -214,6 +218,7 @@ export default {
|
||||
description: String,
|
||||
isInstalled: Boolean,
|
||||
onInstall: Function,
|
||||
onCancelInstall: Function,
|
||||
onUninstall: Function,
|
||||
onSelected: Function,
|
||||
onCopy: Function,
|
||||
@ -225,6 +230,10 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
progress: 0,
|
||||
speed: 0,
|
||||
total_size: 0,
|
||||
downloaded_size: 0,
|
||||
start_time: '',
|
||||
installing: false,
|
||||
uninstalling: false,
|
||||
failedToLoad: false,
|
||||
@ -331,6 +340,10 @@ export default {
|
||||
this.onCopyLink(this)
|
||||
//navigator.clipboard.writeText(this.path)
|
||||
},
|
||||
toggleCancelInstall() {
|
||||
this.onCancelInstall(this)
|
||||
|
||||
},
|
||||
handleSelection() {
|
||||
if (this.isInstalled && !this.selected) {
|
||||
this.onSelected(this);
|
||||
@ -342,6 +355,18 @@ export default {
|
||||
|
||||
},
|
||||
},
|
||||
computed:{
|
||||
speed_computed(){
|
||||
return filesize(this.speed)
|
||||
},
|
||||
total_size_computed(){
|
||||
return filesize(this.total_size)
|
||||
},
|
||||
downloaded_size_computed(){
|
||||
return filesize(this.downloaded_size)
|
||||
},
|
||||
|
||||
},
|
||||
watch: {
|
||||
linkNotValid() {
|
||||
nextTick(() => {
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400 select-none">{{ message }}</h3>
|
||||
<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400 select-none break-all">{{ message }}</h3>
|
||||
<button @click="hide(true)" type="button"
|
||||
class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2">
|
||||
{{ConfirmButtonText}}
|
||||
|
||||
@ -457,7 +457,7 @@
|
||||
:is-installed="model.isInstalled" :on-install="onInstall" :on-uninstall="onUninstall"
|
||||
:on-selected="onSelected" :selected="model.title === configFile.model_name"
|
||||
:model="model" :model_type="model.model_type" :on-copy="onCopy"
|
||||
:on-copy-link="onCopyLink" />
|
||||
:on-copy-link="onCopyLink" :on-cancel-install="onCancelInstall" />
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
</div>
|
||||
@ -1295,6 +1295,12 @@ export default {
|
||||
this.$refs.toast.showToast("Copied link to clipboard!", 4, true)
|
||||
navigator.clipboard.writeText(modelEntry.path);
|
||||
},
|
||||
onCancelInstall(modelEntry) {
|
||||
modelEntry.installing = false
|
||||
modelEntry.isInstalled = 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 });
|
||||
},
|
||||
|
||||
// Model installation
|
||||
|
||||
@ -1312,7 +1318,7 @@ export default {
|
||||
// Use an arrow function for progressListener
|
||||
const progressListener = (response) => {
|
||||
console.log("received something");
|
||||
if (response.status === 'progress') {
|
||||
if (response.status && response.progress <= 100) {
|
||||
console.log(`Progress = ${response.progress}`);
|
||||
model_object.progress = response.progress
|
||||
model_object.installing = true
|
||||
@ -1321,26 +1327,23 @@ export default {
|
||||
this.models[index].isInstalled = true;
|
||||
this.showProgress = false;
|
||||
model_object.installing = false
|
||||
|
||||
console.log("Received succeeded")
|
||||
socket.off('install_progress', progressListener);
|
||||
console.log("Installed successfully")
|
||||
// Update the isInstalled property of the corresponding model
|
||||
|
||||
this.$refs.toast.showToast("Model:\n" + model_object.title + "\ninstalled!", 4, true)
|
||||
this.api_get_req("disk_usage").then(response => {
|
||||
this.diskUsage = response
|
||||
})
|
||||
}
|
||||
} else if (response.status === 'succeeded') {
|
||||
console.log("Received succeeded")
|
||||
socket.off('install_progress', progressListener);
|
||||
console.log("Installed successfully")
|
||||
// Update the isInstalled property of the corresponding model
|
||||
const index = this.models.findIndex((model) => model.path === path);
|
||||
this.models[index].isInstalled = true;
|
||||
this.showProgress = false;
|
||||
model_object.installing = false
|
||||
this.$refs.toast.showToast("Model:\n" + model_object.title + "\ninstalled!", 4, true)
|
||||
this.api_get_req("disk_usage").then(response => {
|
||||
this.diskUsage = response
|
||||
})
|
||||
} else if (response.status === 'failed') {
|
||||
} else {
|
||||
socket.off('install_progress', progressListener);
|
||||
console.log("Install failed")
|
||||
// Installation failed or encountered an error
|
||||
model_object.installing = false;
|
||||
|
||||
|
||||
this.showProgress = false;
|
||||
console.error('Installation failed:', response.error);
|
||||
this.$refs.toast.showToast("Model:\n" + model_object.title + "\nfailed to install!", 4, false)
|
||||
@ -1357,41 +1360,50 @@ export default {
|
||||
console.log("Started installation, please wait");
|
||||
},
|
||||
onUninstall(model_object) {
|
||||
console.log("uninstalling model...")
|
||||
const progressListener = (response) => {
|
||||
if (response.status === 'progress') {
|
||||
this.progress = response.progress;
|
||||
} else if (response.status === 'succeeded') {
|
||||
// Installation completed
|
||||
model_object.uninstalling = false;
|
||||
socket.off('install_progress', progressListener);
|
||||
this.showProgress = false;
|
||||
const index = this.models.findIndex((model) => model.path === model_object.path);
|
||||
this.models[index].isInstalled = false;
|
||||
if (model_object.model.isCustomModel) {
|
||||
this.models = this.models.filter((model) => model.title !== model_object.title)
|
||||
}
|
||||
this.$refs.toast.showToast("Model:\n" + model_object.title + "\nwas uninstalled!", 4, true)
|
||||
this.api_get_req("disk_usage").then(response => {
|
||||
this.diskUsage = response
|
||||
})
|
||||
} else if (response.status === 'failed') {
|
||||
// Installation failed or encountered an error
|
||||
model_object.uninstalling = false;
|
||||
this.showProgress = false;
|
||||
socket.off('install_progress', progressListener);
|
||||
// eslint-disable-next-line no-undef
|
||||
console.error('Uninstallation failed:', message.error);
|
||||
this.$refs.toast.showToast("Model:\n" + model_object.title + "\nfailed to uninstall!", 4, false)
|
||||
this.api_get_req("disk_usage").then(response => {
|
||||
this.diskUsage = response
|
||||
})
|
||||
|
||||
this.$refs.yesNoDialog.askQuestion("Are you sure you want to delete this model?\n [" + model_object.title + "]", 'Yes', 'Cancel').then(yesRes => {
|
||||
if (yesRes) {
|
||||
console.log("uninstalling model...")
|
||||
const progressListener = (response) => {
|
||||
console.log("uninstalling res", response)
|
||||
if (response.status) {
|
||||
console.log("uninstalling success", response)
|
||||
|
||||
// Installation completed
|
||||
model_object.uninstalling = false;
|
||||
socket.off('install_progress', progressListener);
|
||||
this.showProgress = false;
|
||||
const index = this.models.findIndex((model) => model.path === model_object.path);
|
||||
this.models[index].isInstalled = false;
|
||||
if (model_object.model.isCustomModel) {
|
||||
this.models = this.models.filter((model) => model.title !== model_object.title)
|
||||
}
|
||||
this.$refs.toast.showToast("Model:\n" + model_object.title + "\nwas uninstalled!", 4, true)
|
||||
this.api_get_req("disk_usage").then(response => {
|
||||
this.diskUsage = response
|
||||
})
|
||||
} else{
|
||||
console.log("uninstalling failed", response)
|
||||
// Installation failed or encountered an error
|
||||
model_object.uninstalling = false;
|
||||
this.showProgress = false;
|
||||
socket.off('install_progress', progressListener);
|
||||
// eslint-disable-next-line no-undef
|
||||
console.error('Uninstallation failed:', message.error);
|
||||
this.$refs.toast.showToast("Model:\n" + model_object.title + "\nfailed to uninstall!", 4, false)
|
||||
this.api_get_req("disk_usage").then(response => {
|
||||
this.diskUsage = response
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
socket.on('install_progress', progressListener);
|
||||
|
||||
socket.emit('uninstall_model', { path: model_object.path });
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
socket.on('install_progress', progressListener);
|
||||
|
||||
socket.emit('uninstall_model', { path: model_object.path });
|
||||
})
|
||||
},
|
||||
onSelectedBinding(binding_object) {
|
||||
|
||||
@ -1564,7 +1576,7 @@ export default {
|
||||
|
||||
if (model.title == response["model_name"]) {
|
||||
model.selected = true;
|
||||
|
||||
|
||||
}
|
||||
else {
|
||||
model.selected = false;
|
||||
@ -1643,10 +1655,10 @@ export default {
|
||||
|
||||
const index = this.bindings.findIndex(item => item.folder == value)
|
||||
const item = this.bindings[index]
|
||||
if(item){
|
||||
item.installed=true
|
||||
if (item) {
|
||||
item.installed = true
|
||||
}
|
||||
|
||||
|
||||
this.$refs.toast.showToast("Binding changed.", 4, true)
|
||||
this.settingsChanged = true
|
||||
this.isLoading = false
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user