Merge branch 'main' of https://github.com/ParisNeo/gpt4all-ui

web/src/components/DragDrop.vue

@@ -0,0 +1,142 @@
+<template>
+    <TransitionGroup name="list" tag="div">
+
+
+        <div key="dropmenu" v-if="show"
+            class="select-none text-slate-50 absolute top-0 left-0 right-0 bottom-0 flex flex-col  items-center justify-center bg-black bg-opacity-50 duration-200 backdrop-blur-sm "
+            @dragleave.prevent="panelLeave($event)" @drop.stop.prevent="panelDrop($event)">
+            <div
+                class="flex flex-col  items-center justify-center p-8 rounded-lg shadow-lg border-dashed border-4 border-secondary w-4/5 h-4/5 " >
+
+
+                <div class="text-4xl " :class="dropRelease?'':'pointer-events-none'">
+
+                    <div v-if="fileList.length == 0">
+                        Drop your files here
+                    </div>
+
+                    <div v-if="fileList.length > 0" class="flex flex-row gap-2 items-center">
+                        <i data-feather="file" class="w-12 h-12"></i>
+                        Files to upload
+                        ({{ fileList.length }})
+                    </div>
+                </div>
+                <div class=" overflow-auto no-scrollbar">
+
+                    <TransitionGroup name="list" tag="div" class="flex flex-col items-center p-2">
+                        <div v-for="file in fileList" :key="file.name">
+                            <div class="relative m-1 cursor-pointer">
+
+                                <span
+                                    class="inline-flex items-center px-2 py-1 mr-2 text-sm font-medium bg-bg-dark-tone-panel rounded-lg hover:bg-primary-light ">
+                                    <i data-feather="file" class="w-5 h-5 mr-1"></i>
+                                    {{ file.name }}
+                                    ({{ computedFileSize(file.size) }})
+                                    <button type="button" title="Remove item"
+                                        class="inline-flex items-center p-0.5 ml-2 text-sm rounded-sm hover:text-red-600 active:scale-75"
+                                        @click="removeItem(file)">
+                                        <i data-feather="x" class="w-5 h-5 "></i>
+
+                                    </button>
+                                </span>
+
+
+                            </div>
+                        </div>
+                    </TransitionGroup>
+                </div>
+
+            </div>
+        </div>
+    </TransitionGroup>
+</template>
+
+<script>
+import filesize from '../plugins/filesize'
+import feather from 'feather-icons'
+import { nextTick, TransitionGroup } from 'vue'
+export default {
+    setup() {
+
+
+        return {}
+    },
+    name: 'DragDrop',
+    emits: ['panelLeave', 'panelDrop'],
+
+    data() {
+        return {
+            fileList: [],
+            show: false,
+            dropRelease: false
+        }
+    },
+    mounted() {
+        //this.fileList.push({ name: 'lol.sss', size: 22 })
+        nextTick(() => {
+            feather.replace()
+
+        })
+    },
+    methods: {
+        computedFileSize(size) {
+            return filesize(size)
+        },
+        removeItem(file) {
+            this.fileList = this.fileList.filter((item) => item != file)
+            // console.log(this.fileList)
+        },
+        panelDrop(event) {
+            this.dropRelease = true
+            if (event.dataTransfer.files.length > 0) {
+                [...event.dataTransfer.files].forEach(element => {
+                    this.fileList.push(element)
+                });
+            }
+
+            nextTick(() => {
+                feather.replace()
+            })
+            this.$emit('panelDrop', this.fileList)
+            
+            this.show = false
+            // console.log("dropped", this.fileList)
+            //console.log(event.dataTransfer.files[0]);
+
+        },
+        panelLeave() {
+            this.$emit('panelLeave')
+            console.log('exit/leave')
+            this.dropRelease = false
+            this.show = false
+            //this.fileList = []
+            nextTick(() => {
+                feather.replace()
+
+            })
+        }
+
+    },
+}
+</script>
+
+<style>
+.list-move,
+/* apply transition to moving elements */
+.list-enter-active,
+.list-leave-active {
+    transition: all 0.5s ease;
+}
+
+.list-enter-from,
+.list-leave-to {
+    opacity: 0;
+
+}
+
+/* ensure leaving items are taken out of layout flow so that moving
+   animations can be calculated correctly. */
+.list-leave-active {
+    position: absolute;
+}
+</style>

web/src/components/ModelEntry.vue

@@ -90,6 +90,7 @@
 </template>
 
 <script>
+import filesize from '../plugins/filesize'
 import axios from "axios";
 import { nextTick } from 'vue'
 import feather from 'feather-icons'
@@ -131,6 +132,9 @@ export default {
     })
   },
   methods: {
+    computedFileSize(size){
+            return filesize(size)
+        },
     async getFileSize(url) {
       try {
 
@@ -139,17 +143,17 @@ export default {
         if (res) {
           
           if (res.headers["content-length"]) {
-            return this.humanFileSize(res.headers["content-length"])
+            return this.computedFileSize(res.headers["content-length"])
           }
           if (this.model.filesize) {
-            return this.humanFileSize(this.model.filesize)
+            return this.computedFileSize(this.model.filesize)
           }
           return 'Could not be determined'
 
         }
         if (this.model.filesize) {
 
-          return this.humanFileSize(this.model.filesize)
+          return this.computedFileSize(this.model.filesize)
         }
         return 'Could not be determined'
 
@@ -181,38 +185,6 @@ export default {
       }
 
     },
-    /** 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') {

web/src/components/Navigation.vue

@@ -4,28 +4,28 @@
             <ul class="flex flex-col font-medium p-4 md:p-0 mt-4 md:flex-row md:space-x-8 md:mt-0 ">
 
                 <li>
-                    <RouterLink :to="{ name: 'discussions' }" active-class="  bg-bg-light-tone dark:bg-bg-dark-tone p-2 px-4 rounded-t-lg ">
+                    <RouterLink :to="{ name: 'discussions' }" class="p-2" active-class="p-2 bg-bg-light-tone dark:bg-bg-dark-tone rounded-t-lg ">
                         <a href="#" class=" hover:text-primary duration-150">Discussions</a>
                     </RouterLink>
                 </li>
                 <li>
-                    <RouterLink :to="{ name: 'settings' }" active-class="  bg-bg-light-tone dark:bg-bg-dark-tone p-2 px-4 rounded-t-lg ">
+                    <RouterLink :to="{ name: 'settings' }"  class="p-2" active-class="p-2   bg-bg-light-tone dark:bg-bg-dark-tone rounded-t-lg ">
                         <a href="#" class=" hover:text-primary duration-150">Settings</a>
                     </RouterLink>
                 </li>
                 <li>
-                    <RouterLink :to="{ name: 'extensions' }" active-class="  bg-bg-light-tone dark:bg-bg-dark-tone p-2 px-4 rounded-t-lg ">
+                    <RouterLink :to="{ name: 'extensions' }" class="p-2" active-class="p-2   bg-bg-light-tone dark:bg-bg-dark-tone rounded-t-lg ">
                         <a href="#" class=" hover:text-primary duration-150">Extensions</a>
                     </RouterLink>
                 </li>
 
                 <li>
-                    <RouterLink :to="{ name: 'training' }" active-class="  bg-bg-light-tone dark:bg-bg-dark-tone p-2 px-4 rounded-t-lg ">
+                    <RouterLink :to="{ name: 'training' }" class="p-2" active-class="p-2   bg-bg-light-tone dark:bg-bg-dark-tone rounded-t-lg ">
                         <a href="#" class=" hover:text-primary duration-150">Training</a>
                     </RouterLink>
                 </li>
                 <li>
-                    <RouterLink :to="{ name: 'help' }" active-class="  bg-bg-light-tone dark:bg-bg-dark-tone p-2 px-4 rounded-t-lg ">
+                    <RouterLink :to="{ name: 'help' }" class="p-2" active-class="p-2   bg-bg-light-tone dark:bg-bg-dark-tone rounded-t-lg ">
                         <a href="#" class=" hover:text-primary duration-150">Help</a>
                     </RouterLink>
                 </li>

web/src/components/Toast.vue

@@ -2,7 +2,7 @@
     <div class="absolute bottom-16 right-2 z-20 flex flex-col gap-3 min-w-[300px]">
         <TransitionGroup name="toastItem" tag="div">
             <div v-for=" t in toastArr" :key="t.id">
-                <div id="toast-success"
+                <div
                     class="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
                     role="alert">
                     <div class="flex flex-row  items-center">
@@ -23,7 +23,7 @@
                     </div>
                     <button type="button" @click="close(t.id)"
                         class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
-                        data-dismiss-target="#toast-success" aria-label="Close">
+                        >
                         <span class="sr-only">Close</span>
                         <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
                             xmlns="http://www.w3.org/2000/svg">
@@ -44,9 +44,9 @@ import feather from 'feather-icons'
 import { nextTick, TransitionGroup } from 'vue'
 export default {
     name: 'Toast',
-    emits: ['close'],
+    
     props: {
-        showProp: false
+       
     },
     data() {
         return {
@@ -86,18 +86,8 @@ export default {
 
     },
     watch: {
-        showProp(val) {
-            this.show = val
-            if (val) {
-                setTimeout(() => {
-                    this.$emit('close')
-                    this.show = false
-                }, 3000);
 
     }
-
-        }
-    }
 }
 </script>
 <style scoped>

web/src/plugins/filesize.js

@@ -0,0 +1,31 @@
+   /** 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.
+   */
+   export default function humanFileSize(bytes, si = true, 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];
+      }

web/src/views/DiscussionsView.vue

@@ -2,7 +2,7 @@
     <div
         class="overflow-y-scroll flex flex-col no-scrollbar shadow-lg min-w-[24rem] max-w-[24rem] bg-bg-light-tone dark:bg-bg-dark-tone">
         <!-- LEFT SIDE PANEL -->
-        <div class="z-10 sticky top-0 flex-col  bg-bg-light-tone dark:bg-bg-dark-tone shadow-md">
+        <div class=" sticky top-0 flex-col  bg-bg-light-tone dark:bg-bg-dark-tone shadow-md">
 
 
             <!-- CONTROL PANEL -->
@@ -125,11 +125,11 @@
         <div class="relative overflow-y-scroll no-scrollbar">
             <!-- DISCUSSION LIST -->
             <div class="mx-4 flex-grow" :class="filterInProgress ? 'opacity-20 pointer-events-none' : ''">
-                <TransitionGroup v-if="list.length>0" name="list" >
+                <TransitionGroup v-if="list.length > 0" name="list">
                     <Discussion v-for="(item, index) in list" :key="item.id" :id="item.id" :title="item.title"
                         :selected="currentDiscussion.id == item.id" :loading="item.loading" :isCheckbox="isCheckbox"
-                    :checkBoxValue="item.checkBoxValue" @select="selectDiscussion(item)" @delete="deleteDiscussion(item.id)"
+                        :checkBoxValue="item.checkBoxValue" @select="selectDiscussion(item)"
-                    @editTitle="editTitle" @checked="checkUncheckDiscussion" />
+                        @delete="deleteDiscussion(item.id)" @editTitle="editTitle" @checked="checkUncheckDiscussion" />
                 </TransitionGroup>
                 <div v-if="list.length < 1"
                     class="gap-2 py-2 my-2 hover:shadow-md hover:bg-primary-light dark:hover:bg-primary rounded-md p-2 duration-75 group cursor-pointer">
@@ -142,26 +142,36 @@
             </div>
         </div>
     </div>
-    <div class="overflow-y-auto flex flex-col flex-grow  scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary"
+    <div class="flex relative " @dragover.stop.prevent="setDropZone()" >
-        id="messages-list">
+        <div class="z-20">
+            <DragDrop ref="dragdrop"  @panelDrop="setFileList"></DragDrop>
+        </div>
+
+        <div  :class="isDragOver?'pointer-events-none':''" class="flex flex-col flex-grow overflow-y-auto  scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary"
+            id="messages-list" >
 
             <!-- CHAT AREA -->
-        <div class="container flex flex-col flex-grow pt-4 pb-10">
+            <div class="container flex flex-col flex-grow pt-4 pb-10 ">
-            <TransitionGroup v-if="discussionArr.length>0" name="list" >
+                <TransitionGroup v-if="discussionArr.length > 0" name="list">
-            <Message v-for="(msg, index) in discussionArr" :key="msg.id" :message="msg" :id="'msg-' + msg.id" ref="messages"
+                    <Message v-for="(msg, index) in discussionArr" :key="msg.id" :message="msg" :id="'msg-' + msg.id"
-                @copy="copyToClipBoard" @delete="deleteMessage" @rankUp="rankUpMessage" @rankDown="rankDownMessage"
+                        ref="messages" @copy="copyToClipBoard" @delete="deleteMessage" @rankUp="rankUpMessage"
-                @updateMessage="updateMessage" @resendMessage="resendMessage" :avatar="getAvatar(msg.sender)" />
+                        @rankDown="rankDownMessage" @updateMessage="updateMessage" @resendMessage="resendMessage"
+                        :avatar="getAvatar(msg.sender)" />
 
 
                 </TransitionGroup>
                 <WelcomeComponent v-if="!currentDiscussion.id" />
+
             </div>
+
+
             <div class=" sticky bottom-0">
                 <ChatBox v-if="currentDiscussion.id" @messageSentEvent="sendMsg" :loading="isGenerating"
                     @stopGenerating="stopGenerating" />
             </div>
 
         </div>
+    </div>
     <Toast ref="toast">
     </Toast>
 </template>
@@ -169,7 +179,8 @@
 
 <style scoped>
 /* THESE ARE FOR TransitionGroup components */
-.list-move, /* apply transition to moving elements */
+.list-move,
+/* apply transition to moving elements */
 .list-enter-active,
 .list-leave-active {
     transition: all 0.5s ease;
@@ -178,13 +189,15 @@
 .list-enter-from {
     transform: translatey(-30px);
 }
+
 .list-leave-to {
     opacity: 0;
     transform: translatey(30px);
 }
+
 /* ensure leaving items are taken out of layout flow so that moving
    animations can be calculated correctly. */
-   .list-leave-active {
+.list-leave-active {
     position: absolute;
 }
 </style>
@@ -210,7 +223,10 @@ export default {
             showToast: false,
             isSearch: false,
             isDiscussionBottom: false,
-            personalityAvatars: [] // object array of personality name: and avatar: props
+            personalityAvatars: [], // object array of personality name: and avatar: props
+            fileList: [],
+            isDropZoneVisible: true,
+            isDragOver:false
         }
     },
     methods: {
@@ -224,7 +240,7 @@ export default {
 
                 }
             } catch (error) {
-                console.log(error.message,'api_get_req')
+                console.log(error.message, 'api_get_req')
                 return
             }
 
@@ -261,7 +277,7 @@ export default {
                     }
                 }
             } catch (error) {
-                console.log(error.message,'load_discussion')
+                console.log(error.message, 'load_discussion')
                 this.loading = false
                 this.setDiscussionLoading(id, this.loading)
             }
@@ -402,10 +418,10 @@ export default {
             if (!this.filterInProgress) {
                 this.filterInProgress = true
                 setTimeout(() => {
-                    if(this.filterTitle){
+                    if (this.filterTitle) {
                         this.list = this.tempList.filter((item) => item.title && item.title.includes(this.filterTitle))
 
-                    }else{
+                    } else {
                         this.list = this.tempList
                     }
                     this.filterInProgress = false
@@ -554,7 +570,7 @@ export default {
         },
         sendMsg(msg) {
             // Sends message to binding
-            if(!msg){
+            if (!msg) {
                 this.$refs.toast.showToast("Message contains no content!", 4, false)
                 return
             }
@@ -673,7 +689,7 @@ export default {
             }
             this.tempList = this.list
             this.isCheckbox = false
-            this.$refs.toast.showToast("Removed ("+deleteList.length+") items", 4, true)
+            this.$refs.toast.showToast("Removed (" + deleteList.length + ") items", 4, true)
 
             console.log("Multi delete done")
         },
@@ -952,11 +968,24 @@ export default {
         getAvatar(sender) {
             const index = this.personalityAvatars.findIndex((x) => x.name === sender)
             const pers = this.personalityAvatars[index]
-            if(pers){
+            if (pers) {
                 return pers.avatar
             }
 
             return
+        },
+        setFileList(files) {
+            this.fileList = files
+            console.log('dropppp', this.fileList)
+        },
+        setDropZone(){
+            this.isDragOver=true
+            this.$refs.dragdrop.show=true
+            this.isDropZoneVisible=true
+            console.log('is vis',this.isDropZoneVisible)
+        },
+        hideDropZone(){
+            this.$refs.dragdrop.show=false
         }
 
 
@@ -999,7 +1028,8 @@ export default {
         Message,
         ChatBox,
         WelcomeComponent,
-        Toast
+        Toast,
+        DragDrop
     },
     watch: {
         filterTitle(newVal) {
@@ -1055,11 +1085,11 @@ import Message from '../components/Message.vue'
 import ChatBox from '../components/ChatBox.vue'
 import WelcomeComponent from '../components/WelcomeComponent.vue'
 import Toast from '../components/Toast.vue'
-
+import DragDrop from '../components/DragDrop.vue'
 import feather from 'feather-icons'
 
 import axios from 'axios'
-import { nextTick,TransitionGroup } from 'vue'
+import { nextTick, TransitionGroup } from 'vue'
 
 import socket from '@/services/websocket.js'
 

web/src/views/SettingsView.vue

@@ -33,10 +33,10 @@
             <div class="flex gap-3 flex-1 items-center justify-end">
 
 
-                <div v-if="!isModelSelected" class="text-red-600 flex gap-3 items-center">
+                <!-- <div v-if="!isModelSelected" class="text-red-600 flex gap-3 items-center">
                     <i data-feather="alert-triangle"></i>
                     No model selected!
-                </div>
+                </div> -->
                 <div class="flex gap-3 items-center">
                     <div v-if="settingsChanged" class="flex gap-3 items-center">
                         Apply changes:
@@ -77,8 +77,9 @@
                             Binding zoo</h3>
                         <div v-if="configFile.binding" class="mr-2">|</div>
 
-                            <div v-if="configFile.binding" class=" text-base font-semibold cursor-pointer select-none items-center">
+                        <div v-if="configFile.binding"
-                             {{configFile.binding}} </div>
+                            class=" text-base font-semibold cursor-pointer select-none items-center">
+                            {{ configFile.binding }} </div>
                     </button>
                 </div>
                 <div :class="{ 'hidden': bzc_collapsed }" class="flex flex-col mb-2 px-3 pb-0">
@@ -99,11 +100,14 @@
                         <label for="binding" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
                             Bindings: ({{ bindings.length }})
                         </label>
-                        <div ref="bindingZoo" class="overflow-y-auto no-scrollbar p-2 pb-0 grid lg:grid-cols-3 md:grid-cols-2 gap-4"
+                        <div ref="bindingZoo"
+                            class="overflow-y-auto no-scrollbar p-2 pb-0 grid lg:grid-cols-3 md:grid-cols-2 gap-4"
                             :class="bzl_collapsed ? '' : 'max-h-96'">
                             <TransitionGroup name="list">
                                 <BindingEntry v-for="(binding, index) in bindings"
-                                    :key="'index-' + index + '-' + binding.folder" :binding="binding" :on-selected="onSelectedBinding" :selected="binding.folder === configFile.binding"></BindingEntry>
+                                    :key="'index-' + index + '-' + binding.folder" :binding="binding"
+                                    :on-selected="onSelectedBinding" :selected="binding.folder === configFile.binding">
+                                </BindingEntry>
                             </TransitionGroup>
                         </div>
                     </div>
@@ -133,17 +137,41 @@
                         <i :data-feather="mzc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2"></i>
                         <h3 class="text-lg font-semibold cursor-pointer select-none mr-2">
                             Models zoo</h3>
+                            <div class="flex flex-row items-center">
+                                <div v-if="!isModelSelected" class="text-base text-red-600 flex gap-3 items-center">
+                    <i data-feather="alert-triangle"></i>
+                    No model selected!
+                </div>
+                           
                         <div v-if="configFile.model" class="mr-2">|</div>
-                            <div v-if="configFile.model" class=" text-base font-semibold cursor-pointer select-none items-center">
+                        <div v-if="configFile.model"
-                             {{configFile.model}} </div>
+                            class=" text-base font-semibold cursor-pointer select-none items-center">
+                            {{ configFile.model }} </div> </div>
                     </button>
                 </div>
                 <div :class="{ 'hidden': mzc_collapsed }" class="flex flex-col mb-2 px-3 pb-0">
+                    <div class="mb-2">
+                        <label for="disk" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                            Disk usage:
+                        </label>
+                        <div class="flex flex-col mx-2">
+                            <div><b>Current binding models folder:&nbsp;</b>{{ binding_models_usage }}</div>
+                            <!-- <div><b>Percentage:&nbsp;</b>{{ percent_usage }}</div> -->
+                            <!-- <div><b>Total disk size:&nbsp;</b>{{ total_space }}</div> -->
+                            <div><b>Avaliable space:&nbsp;</b> {{ available_space }} / {{ total_space }}</div>
+                        </div>
+                        <div class="p-2 ">
+                            <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: ' + percent_usage + '%;'"></div>
+                            </div>
 
+                        </div>
+                    </div>
                     <div v-if="models.length > 0" class="mb-2">
                         <label for="model" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
                             Models: ({{ models.length }})
                         </label>
+
                         <div ref="modelZoo" class="overflow-y-auto no-scrollbar p-2 pb-0 "
                             :class="mzl_collapsed ? '' : 'max-h-96'">
                             <TransitionGroup name="list">
@@ -183,8 +211,9 @@
                             Personalities zoo</h3>
                         <div v-if="configFile.personality" class="mr-2">|</div>
 
-                           <div v-if="configFile.personality" class=" text-base font-semibold cursor-pointer select-none items-center">
+                        <div v-if="configFile.personality"
-                            {{configFile.personality}} </div>
+                            class=" text-base font-semibold cursor-pointer select-none items-center">
+                            {{ configFile.personality }} </div>
                     </button>
                 </div>
                 <div :class="{ 'hidden': pzc_collapsed }" class="flex flex-col mb-2 px-3 pb-0">
@@ -482,6 +511,7 @@
 }
 </style>
 <script>
+import filesize from '../plugins/filesize'
 import axios from "axios";
 import feather from 'feather-icons'
 import { nextTick, TransitionGroup } from 'vue'
@@ -539,7 +569,9 @@ export default {
             showToast: false,
             isLoading: false,
             settingsChanged: false,
-            isModelSelected: false
+            isModelSelected: false,
+            diskUsage: {}
+
 
         }
     },
@@ -677,6 +709,9 @@ export default {
                     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') {
                     socket.off('install_progress', progressListener);
                     console.log("Install failed")
@@ -686,6 +721,9 @@ export default {
                     this.showProgress = false;
                     console.error('Installation failed:', response.error);
                     this.$refs.toast.showToast("Model:\n" + model_object.title + "\nfailed to install!", 4, false)
+                    this.api_get_req("disk_usage").then(response =>{
+                this.diskUsage=response
+            })
                 }
             };
 
@@ -711,6 +749,9 @@ export default {
                         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;
@@ -719,6 +760,9 @@ export default {
                     // 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
+            })
                 }
             };
 
@@ -726,7 +770,7 @@ export default {
 
             socket.emit('uninstall_model', { path: model_object.path });
         },
-        onSelectedBinding(binding_object){
+        onSelectedBinding(binding_object) {
             this.update_binding(binding_object.binding.folder)
             //console.log('lol',binding_object)
         },
@@ -761,6 +805,9 @@ export default {
                     }
                 });
             })
+            this.api_get_req("disk_usage").then(response =>{
+                this.diskUsage=response
+            })
             this.getPersonalitiesArr()
             this.fetchModels();
         },
@@ -792,6 +839,7 @@ export default {
 
             // eslint-disable-next-line no-unused-vars
             this.isLoading = true
+            
             this.update_setting('binding', value, (res) => {
                 this.refresh();
 
@@ -804,6 +852,11 @@ export default {
                 })
                 // If binding changes then reset model
                 this.update_model(null)
+                this.configFile.model=null
+
+                this.api_get_req("disk_usage").then(response =>{
+                this.diskUsage=response
+            })
             })
 
         },
@@ -818,14 +871,14 @@ export default {
             })
         },
         applyConfiguration() {
-            if (!this.configFile.model) {
+            // if (!this.configFile.model) {
 
-                this.$refs.toast.showToast("Configuration changed failed.\nPlease select model first", 4, false)
+            //     this.$refs.toast.showToast("Configuration changed failed.\nPlease select model first", 4, false)
-                nextTick(() => {
+            //     nextTick(() => {
-                    feather.replace()
+            //         feather.replace()
-                })
+            //     })
-                return
+            //     return
-            }
+            // }
             this.isLoading = true;
             axios.post('/apply_settings').then((res) => {
                 this.isLoading = false;
@@ -945,7 +998,10 @@ export default {
             this.personalitiesFiltered = this.personalities.filter((item) => item.category === this.configFile.personality_category && item.language === this.configFile.personality_language)
             this.isLoading = false
 
-        }
+        },
+        computedFileSize(size){
+            return filesize(size)
+        },
 
     }, async mounted() {
         this.isLoading = true
@@ -967,8 +1023,23 @@ export default {
         await this.getPersonalitiesArr()
         this.bindings = await this.api_get_req("list_bindings")
         this.isLoading = false
+        this.diskUsage = await this.api_get_req("disk_usage")
+    },
+    computed: {
+        available_space() {
+            return this.computedFileSize(this.diskUsage.available_space)
+        },
+        binding_models_usage() {
+            return this.computedFileSize(this.diskUsage.binding_models_usage)
+        },
+        percent_usage() {
+            return this.diskUsage.percent_usage
           
         },
+        total_space() {
+            return this.computedFileSize(this.diskUsage.total_space)
+        },
+    },
     watch: {
         bec_collapsed() {
             nextTick(() => {