ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2025-03-11 15:03:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' of https://github.com/andzejsp/gpt4all-ui

Browse Source
This commit is contained in:
Saifeddine ALOUI 2023-06-26 22:27:41 +02:00
commit facef64b22
4 changed files with 136 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
c_webui.bat
View File

@ -62,7 +62,7 @@ if %errorlevel% equ 0 (
REM Check if repository exists REM Check if repository exists
if exist .git ( if exist .git (
echo Pulling latest changes echo Pulling latest changes
git pull origin main git pull
) else ( ) else (
if exist lollms-webui ( if exist lollms-webui (
cd ./lollms-webui cd ./lollms-webui

2
c_webui.sh
View File

@ -58,7 +58,7 @@ if ping -q -c 1 google.com >/dev/null 2>&1; then
# Check if repository exists # Check if repository exists
if [[ -d .git ]] ;then if [[ -d .git ]] ;then
echo "Pulling latest changes" echo "Pulling latest changes"
git pull origin main git pull
else else
if [[ -d lollms-webui ]] ;then if [[ -d lollms-webui ]] ;then
cd lollms-webui cd lollms-webui

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

@ -2,7 +2,7 @@
<div <div
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" 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 bg-primary' : 'border-transparent'" :title="title"> @click.stop="toggleSelected" :class="selected ? ' border-primary bg-primary' : 'border-transparent'" :title="title">
<!-- CUSTOM MODEL VIEW --> <!-- CUSTOM MODEL VIEW -->
<div class="flex flex-row" v-if="model.isCustomModel"> <div class="flex flex-row" v-if="model.isCustomModel">
<div class="flex gap-3 items-center grow"> <div class="flex gap-3 items-center grow">
<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">
@ -10,20 +10,35 @@
{{ title }} {{ title }}
</h3> </h3>
</div> </div>
<button type="button" title="Custom model / local model"
class="font-medium rounded-lg text-sm p-2 text-center inline-flex items-center " @click.stop="">
<i data-feather="box" class="w-5"></i> </div>
<span class="sr-only">Custom model / local model</span> <div v-if="model.isCustomModel" class="flex items-center flex-row gap-2 my-1">
</button> <!-- CONTROLS -->
<button <div class="flex grow items-center">
class=" hover:text-red-600 duration-75 active:scale-90 font-medium rounded-lg text-sm p-2 text-center inline-flex items-center " <button type="button" title="Custom model / local model"
title="Delete file from disk" type="button" @click.stop="toggleInstall"> class="font-medium rounded-lg text-sm p-2 text-center inline-flex items-center " @click.stop="">
<i data-feather="trash" class="w-5"></i> <i data-feather="box" class="w-5"></i>
</button> <span class="sr-only">Custom model / local model</span>
</button>
Custom model
</div>
<div>
<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> </div>
<div v-if="installing" <div v-if="installing"
class="absolute z-10 -m-4 p-5 shadow-md text-center rounded-lg w-full h-full bg-bg-light-tone-panel dark:bg-bg-dark-tone-panel bg-opacity-70 dark:bg-opacity-70 flex justify-center items-center"> class="absolute z-10 -m-4 p-5 shadow-md text-center rounded-lg w-full h-full bg-bg-light-tone-panel dark:bg-bg-dark-tone-panel bg-opacity-70 dark:bg-opacity-70 flex justify-center items-center">
<!-- DOWNLOAD MODEL PANEL SPINNER --> <!-- DOWNLOAD MODEL PANEL SPINNER -->
<div class="relative flex flex-col items-center justify-center flex-grow h-full"> <div class="relative flex flex-col items-center justify-center flex-grow h-full">
<div role="status" class=" justify-center "> <div role="status" class=" justify-center ">
<!-- SPINNER --> <!-- SPINNER -->
@ -51,8 +66,10 @@
<div class="bg-blue-600 h-2.5 rounded-full" :style="{ width: progress + '%' }"></div> <div class="bg-blue-600 h-2.5 rounded-full" :style="{ width: progress + '%' }"></div>
</div> </div>
<div class="flex justify-between mb-1"> <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-base font-medium text-blue-700 dark:text-white">Download speed: {{ speed_computed
<span class="text-sm font-medium text-blue-700 dark:text-white">{{ downloaded_size_computed }}/{{ total_size_computed }}</span> }}/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>
</div> </div>
@ -76,7 +93,7 @@
</div> </div>
</div> </div>
<div > <div v-if="!model.isCustomModel">
<div class="flex flex-row items-center gap-3 "> <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" <img ref="imgElement" :src="getImgUrl()" @error="defaultImg($event)" class="w-10 h-10 rounded-lg object-fill"
@ -129,7 +146,7 @@
</div> </div>
<div class="flex items-center flex-row-reverse gap-2 my-1"> <div class="flex items-center flex-row-reverse gap-2 my-1">
<!-- CONTROLS --> <!-- CONTROLS -->
<button type="button" title="Copy model info to clipboard" @click.stop="toggleCopy()" <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"> 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 Copy info
@ -137,18 +154,19 @@
</button> </button>
<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 "> <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> <i data-feather="alert-triangle" class="flex-shrink-0 mx-1"></i>
Link is not valid Link is not valid
</div> </div>
</div> </div>
<button v-if="!model.isInstalled && !linkNotValid" title="Click to install" type="button" @click.stop="toggleInstall" <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"> 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 Install
<span class="sr-only">Click to install</span> <span class="sr-only">Click to install</span>
</button> </button>
<button v-if="model.isInstalled" title="Delete file from disk" type="button" @click.stop="toggleInstall" <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"> 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 Uninstall
@ -384,14 +402,14 @@ export default {
}, },
}, },
computed:{ computed: {
speed_computed(){ speed_computed() {
return filesize(this.speed) return filesize(this.speed)
}, },
total_size_computed(){ total_size_computed() {
return filesize(this.total_size) return filesize(this.total_size)
}, },
downloaded_size_computed(){ downloaded_size_computed() {
return filesize(this.downloaded_size) return filesize(this.downloaded_size)
}, },

96
web/src/views/SettingsView.vue
View File

@ -519,13 +519,15 @@
files</label> files</label>
<input <input @change="setFileList"
class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
id="multiple_files" type="file" multiple> ref="fileDialogAddModel" type="file" multiple>
</div> </div>
<button type="submit" <button type="button" @click.stop="uploadLocalModel"
class="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 w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Upload</button> class="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 w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Upload</button>
</form> </form>
</div> </div>
@ -572,9 +574,14 @@
</svg> </svg>
<span class="sr-only">Loading...</span> <span class="sr-only">Loading...</span>
</span> </span>
<span class="text-sm font-medium text-blue-700 dark:text-white">{{ <span class="text-sm font-medium text-blue-700 dark:text-white">{{
Math.floor(addModel.progress) }}%</span> Math.floor(addModel.progress) }}%</span>
</div> </div>
<div class="mx-1 opacity-80 line-clamp-1" :title="addModel.url">
{{ addModel.url }}
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700"> <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" <div class="bg-blue-600 h-2.5 rounded-full"
:style="{ width: addModel.progress + '%' }"> :style="{ width: addModel.progress + '%' }">
@ -1108,6 +1115,7 @@ export default {
searchPersonalityInProgress: false, searchPersonalityInProgress: false,
addModel: {}, addModel: {},
modelDownlaodInProgress: false, modelDownlaodInProgress: false,
uploadData: [],
} }
}, },
@ -1354,10 +1362,10 @@ export default {
const modelEntry = this.addModel const modelEntry = this.addModel
const keys = Object.keys(this.addModel) // const keys = Object.keys(this.addModel)
if (keys.includes('url')) { // if (keys.includes('url')) {
return // return
} // }
this.modelDownlaodInProgress = false this.modelDownlaodInProgress = false
this.addModel = {} this.addModel = {}
this.$refs.toast.showToast("Model installation aborted", 4, false) this.$refs.toast.showToast("Model installation aborted", 4, false)
@ -1446,6 +1454,7 @@ export default {
if (response.status && response.progress <= 100) { if (response.status && response.progress <= 100) {
console.log(`Progress`, response); console.log(`Progress`, response);
this.addModel = response this.addModel = response
this.addModel.url = path
// this.addModel.progress = response.progress // this.addModel.progress = response.progress
// this.addModel.speed = response.speed // this.addModel.speed = response.speed
// this.addModel.total_size = response.total_size // this.addModel.total_size = response.total_size
@ -1454,13 +1463,13 @@ export default {
this.modelDownlaodInProgress = true this.modelDownlaodInProgress = true
if (this.addModel.progress == 100) { if (this.addModel.progress == 100) {
this.modelDownlaodInProgress = true this.modelDownlaodInProgress = false
console.log("Received succeeded") console.log("Received succeeded")
socket.off('install_progress', progressListener); socket.off('install_progress', progressListener);
console.log("Installed successfully") console.log("Installed successfully")
// Update the isInstalled property of the corresponding model // Update the isInstalled property of the corresponding model
this.addModel = {}
this.$refs.toast.showToast("Model:\n" + this.addModel.model_name + "\ninstalled!", 4, true) this.$refs.toast.showToast("Model:\n" + this.addModel.model_name + "\ninstalled!", 4, true)
this.api_get_req("disk_usage").then(response => { this.api_get_req("disk_usage").then(response => {
this.diskUsage = response this.diskUsage = response
@ -1487,6 +1496,75 @@ export default {
socket.emit('install_model', { path: path }); socket.emit('install_model', { path: path });
console.log("Started installation, please wait"); console.log("Started installation, please wait");
}, },
uploadLocalModel() {
if (this.uploadData.length == 0) {
this.$refs.toast.showToast("No files to upload", 4, false)
return
}
let path = this.addModel.url;
this.addModel.progress = 0;
console.log("installing...");
console.log("value ", this.addModel.url);
this.modelDownlaodInProgress = true
// Use an arrow function for progressListener
const progressListener = (response) => {
console.log("received something");
if (response.status && response.progress <= 100) {
console.log(`Progress`, response);
this.addModel = response
this.addModel.url = path
// this.addModel.progress = response.progress
// this.addModel.speed = response.speed
// this.addModel.total_size = response.total_size
// this.addModel.downloaded_size = response.downloaded_size
// this.addModel.start_time = response.start_time
this.modelDownlaodInProgress = true
if (this.addModel.progress == 100) {
this.modelDownlaodInProgress = false
console.log("Received succeeded")
socket.off('progress', progressListener);
console.log("Installed successfully")
// Update the isInstalled property of the corresponding model
this.addModel = {}
this.$refs.toast.showToast("Model:\n" + this.addModel.model_name + "\ninstalled!", 4, true)
this.api_get_req("disk_usage").then(response => {
this.diskUsage = response
})
}
} else {
socket.off('progress', progressListener);
console.log("Install failed")
// Installation failed or encountered an error
this.modelDownlaodInProgress = false;
console.error('Installation failed:', response.error);
this.$refs.toast.showToast("Model:\n" + this.addModel.model_name + "\nfailed to install!", 4, false)
this.api_get_req("disk_usage").then(response => {
this.diskUsage = response
})
}
};
socket.on('progress', progressListener);
// socket.emit('send_file', { file: this.uploadData });
console.log("Started installation, please wait");
},
setFileList(event) {
this.uploadData = event.target.files
console.log('set file list', this.uploadData)
},
onUninstall(model_object) { onUninstall(model_object) {
this.$refs.yesNoDialog.askQuestion("Are you sure you want to delete this model?\n [" + model_object.title + "]", 'Yes', 'Cancel').then(yesRes => { this.$refs.yesNoDialog.askQuestion("Are you sure you want to delete this model?\n [" + model_object.title + "]", 'Yes', 'Cancel').then(yesRes => {