From d7aad205fa214eff3b16b03c34b6568a82762af2 Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Fri, 30 Jun 2023 17:49:49 +0300
Subject: [PATCH 01/15] removed

---
 web/src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index 3488feae..b0cea8f9 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-col h-screen max-h-screen font-sans bg-bg-light text-slate-950 dark:bg-bg-dark dark:text-slate-50">
+    class="flex flex-col h-screen font-sans bg-bg-light text-slate-950 dark:bg-bg-dark dark:text-slate-50">
 
     <TopBar />
 

From 1652e2490a6b0d4b715ffe2f4ebd71d13a0e700a Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Sat, 1 Jul 2023 14:06:57 +0300
Subject: [PATCH 02/15] fixed relative paths not working

---
 web/vite.config.mjs | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/web/vite.config.mjs b/web/vite.config.mjs
index 37c0e92b..e5da9b1f 100644
--- a/web/vite.config.mjs
+++ b/web/vite.config.mjs
@@ -9,7 +9,7 @@ export default ({ mode }) => {
   process.env = {...process.env, ...loadEnv(mode, process.cwd())};
   
   return defineConfig({
-  
+    
   plugins: [
     vue()
   ],
@@ -26,6 +26,13 @@ export default ({ mode }) => {
         secure: process.env.VITE_GPT4ALL_API_SECURE,
         rewrite: (path) => path.replace(/^\/api/, ""),
       },
+      "/": {
+        target: process.env.VITE_GPT4ALL_API,
+        changeOrigin: process.env.VITE_GPT4ALL_API_CHANGE_ORIGIN,
+        secure: process.env.VITE_GPT4ALL_API_SECURE,
+        
+      },
+
     },
   }
 })}

From ff80083126d4172aab46e33648a7a7e35e26f093 Mon Sep 17 00:00:00 2001
From: andzejsp <andzejs.poprockis@gmail.com>
Date: Sat, 1 Jul 2023 14:42:39 +0300
Subject: [PATCH 03/15] added gpu model name

---
 app.py                  | 4 +++-
 src/clip                | 1 +
 src/taming-transformers | 1 +
 3 files changed, 5 insertions(+), 1 deletion(-)
 create mode 160000 src/clip
 create mode 160000 src/taming-transformers

diff --git a/app.py b/app.py
index e00cb854..47eb8073 100644
--- a/app.py
+++ b/app.py
@@ -563,7 +563,7 @@ class LoLLMsWebUI(LoLLMsAPPI):
 
     def vram_usage(self) -> Optional[dict]:
         try:
-            output = subprocess.check_output(['nvidia-smi', '--query-gpu=memory.total,memory.used', '--format=csv,nounits,noheader'])
+            output = subprocess.check_output(['nvidia-smi', '--query-gpu=memory.total,memory.used,gpu_name', '--format=csv,nounits,noheader'])
             lines = output.decode().strip().split('\n')
             vram_info = [line.split(',') for line in lines]
         except (subprocess.CalledProcessError, FileNotFoundError):
@@ -579,10 +579,12 @@ class LoLLMsWebUI(LoLLMsAPPI):
             for i, gpu in enumerate(vram_info):
                 ram_usage[f"gpu_{i}_total_vram"] = int(gpu[0])*1024*1024
                 ram_usage[f"gpu_{i}_used_vram"] = int(gpu[1])*1024*1024
+                ram_usage[f"gpu_{i}_model"] = gpu[2].strip()
         else:
             # Set all VRAM-related entries to None
             ram_usage["gpu_0_total_vram"] = None
             ram_usage["gpu_0_used_vram"] = None
+            ram_usage["gpu_0_model"] = None
         
         return jsonify(ram_usage)
 
diff --git a/src/clip b/src/clip
new file mode 160000
index 00000000..a9b1bf59
--- /dev/null
+++ b/src/clip
@@ -0,0 +1 @@
+Subproject commit a9b1bf5920416aaeaec965c25dd9e8f98c864f16
diff --git a/src/taming-transformers b/src/taming-transformers
new file mode 160000
index 00000000..3ba01b24
--- /dev/null
+++ b/src/taming-transformers
@@ -0,0 +1 @@
+Subproject commit 3ba01b241669f5ade541ce990f7650a3b8f65318

From 943ca94a26d3022d42c94dc9f161a117c5aef936 Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Sat, 1 Jul 2023 14:46:12 +0300
Subject: [PATCH 04/15] somehting

---
 web/src/components/ModelEntry.vue |  4 ++-
 web/src/views/DiscussionsView.vue |  2 ++
 web/src/views/SettingsView.vue    | 58 +++++++++++++++++++++++++++++--
 3 files changed, 60 insertions(+), 4 deletions(-)

diff --git a/web/src/components/ModelEntry.vue b/web/src/components/ModelEntry.vue
index 9063ea38..ef3e4ba8 100644
--- a/web/src/components/ModelEntry.vue
+++ b/web/src/components/ModelEntry.vue
@@ -237,7 +237,9 @@
           <i data-feather="info" class="w-5 m-1"></i>
           <b>Description:&nbsp;</b><br>
         </div>
-        <p class="mx-1 opacity-80 line-clamp-3" :title="description">{{ description }}</p>
+        <!-- <p class="mx-1 opacity-80 line-clamp-3" :title="description">{{ description }}</p> -->
+        <p class="mx-1 opacity-80 line-clamp-3" :title="description">{{ description.replace(/<\/?[^>]+>/ig, " ") }}</p>
+        <!-- <p class="mx-1 opacity-80 line-clamp-3" :title="description"><span v-html="description"></span></p> -->
 
 
       </div>
diff --git a/web/src/views/DiscussionsView.vue b/web/src/views/DiscussionsView.vue
index f40e07e3..59d7ad06 100644
--- a/web/src/views/DiscussionsView.vue
+++ b/web/src/views/DiscussionsView.vue
@@ -229,7 +229,9 @@
 <script>
 
 export default {
+    
     setup() { },
+    
     data() {
         return {
             list: [], // Discussion list
diff --git a/web/src/views/SettingsView.vue b/web/src/views/SettingsView.vue
index 7da99515..94c0aec4 100644
--- a/web/src/views/SettingsView.vue
+++ b/web/src/views/SettingsView.vue
@@ -606,8 +606,8 @@
 
                             <div v-if="!modelDownlaodInProgress">
                                 <div class="mb-3">
-                                    <label 
-                                        class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Download from web:</label>
+                                    <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Download
+                                        from web:</label>
                                     <input type="text" v-model="addModel.url"
                                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                         placeholder="Enter URL ..." required>
@@ -832,7 +832,8 @@
 
                         <div v-if="personalitiesFiltered.length > 0" class="mb-2">
                             <label for="model" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
-                                {{ searchPersonality ? 'Search results' : 'Personalities' }}: ({{ personalitiesFiltered.length
+                                {{ searchPersonality ? 'Search results' : 'Personalities' }}: ({{
+                                    personalitiesFiltered.length
                                 }})
                             </label>
                             <div class="overflow-y-auto no-scrollbar p-2 pb-0 grid lg:grid-cols-3 md:grid-cols-2 gap-4"
@@ -1245,6 +1246,57 @@ export default {
             this.vramUsage = await this.api_get_req("vram_usage")
             this.getMountedPersonalities()
             this.isMounted = true
+            const lala = await this.getVramUsage()
+            
+
+        },
+        async getVramUsage() {
+            const resp = await this.api_get_req("vram_usage")
+            // {
+            //   "gpu_0_total_vram": 11811160064,
+            //   "gpu_0_used_vram": 3177185280,
+            //   "nb_gpus": 1
+            // }
+
+            const gpuArr = []
+
+            if (resp.nb_gpus > 0) {
+                // Get keys
+                const keys = Object.keys(resp)
+                // for each gpu
+                for (let i = 0; i < resp.nb_gpus; i++) {
+                    // // For each key
+                    // for (let j = 0; j < keys.length; j++) {
+                    //     // if matches with array index then create gpu object
+                    //     if(keys[j].includes(i)){
+
+                    //         const gpuKey = keys[j]
+                    //         const gpuVal = resp.index
+                    //     }
+
+
+                    // }
+
+                    const total_vram = resp[`gpu_${i}_total_vram`];
+                 
+                    const used_vram = resp[`gpu_${i}_used_vram`];
+            
+
+
+                    gpuArr.push({ total_vram : total_vram, used_vram: used_vram, gpu_index: i });
+
+                }
+                const result = {
+
+                    "nb_gpus": resp.nb_gpus,
+                    "gpus":gpuArr
+                }
+                console.log('gpu usage: ',result)
+                return result
+
+            }
+
+
 
         },
         async progressListener(response) {

From c7f6a931fb8b008a165e9aea42c3b04f2b2aebc0 Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Sat, 1 Jul 2023 14:47:03 +0300
Subject: [PATCH 05/15] fixed relative paths not working

---
 web/vite.config.mjs | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/web/vite.config.mjs b/web/vite.config.mjs
index 37c0e92b..e5da9b1f 100644
--- a/web/vite.config.mjs
+++ b/web/vite.config.mjs
@@ -9,7 +9,7 @@ export default ({ mode }) => {
   process.env = {...process.env, ...loadEnv(mode, process.cwd())};
   
   return defineConfig({
-  
+    
   plugins: [
     vue()
   ],
@@ -26,6 +26,13 @@ export default ({ mode }) => {
         secure: process.env.VITE_GPT4ALL_API_SECURE,
         rewrite: (path) => path.replace(/^\/api/, ""),
       },
+      "/": {
+        target: process.env.VITE_GPT4ALL_API,
+        changeOrigin: process.env.VITE_GPT4ALL_API_CHANGE_ORIGIN,
+        secure: process.env.VITE_GPT4ALL_API_SECURE,
+        
+      },
+
     },
   }
 })}

From 20210cbdabacd25032ac40bb833ce1087f2ac3b0 Mon Sep 17 00:00:00 2001
From: andzejsp <andzejs.poprockis@gmail.com>
Date: Sat, 1 Jul 2023 14:51:16 +0300
Subject: [PATCH 06/15] addedsrc

---
 .gitignore | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index eff304d9..73017600 100644
--- a/.gitignore
+++ b/.gitignore
@@ -194,4 +194,5 @@ tests/end_point_tests/*_local.http
 
 personalities_zoo
 bindings_zoo
-user_data
\ No newline at end of file
+user_data
+src/
\ No newline at end of file

From 3a78f178c6f4f29dad9ee3726b88414b92b23fe1 Mon Sep 17 00:00:00 2001
From: andzejsp <andzejs.poprockis@gmail.com>
Date: Sat, 1 Jul 2023 14:52:15 +0300
Subject: [PATCH 07/15] f

---
 .gitignore              | 3 ++-
 src/clip                | 1 -
 src/taming-transformers | 1 -
 3 files changed, 2 insertions(+), 3 deletions(-)
 delete mode 160000 src/clip
 delete mode 160000 src/taming-transformers

diff --git a/.gitignore b/.gitignore
index 73017600..fc80dbfc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -195,4 +195,5 @@ tests/end_point_tests/*_local.http
 personalities_zoo
 bindings_zoo
 user_data
-src/
\ No newline at end of file
+src/
+src/taming-transformers
\ No newline at end of file
diff --git a/src/clip b/src/clip
deleted file mode 160000
index a9b1bf59..00000000
--- a/src/clip
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit a9b1bf5920416aaeaec965c25dd9e8f98c864f16
diff --git a/src/taming-transformers b/src/taming-transformers
deleted file mode 160000
index 3ba01b24..00000000
--- a/src/taming-transformers
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit 3ba01b241669f5ade541ce990f7650a3b8f65318

From c8e66c8a5612d8c024e62177d716f6053ce8fe51 Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Sat, 1 Jul 2023 14:58:27 +0300
Subject: [PATCH 08/15] nice

---
 web/src/views/SettingsView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/views/SettingsView.vue b/web/src/views/SettingsView.vue
index 94c0aec4..1ba0caf4 100644
--- a/web/src/views/SettingsView.vue
+++ b/web/src/views/SettingsView.vue
@@ -1278,12 +1278,12 @@ export default {
                     // }
 
                     const total_vram = resp[`gpu_${i}_total_vram`];
-                 
                     const used_vram = resp[`gpu_${i}_used_vram`];
+                    const model = resp[`gpu_${i}_model`];
             
 
 
-                    gpuArr.push({ total_vram : total_vram, used_vram: used_vram, gpu_index: i });
+                    gpuArr.push({ total_vram : total_vram, used_vram: used_vram, gpu_index: i, gpu_model:model });
 
                 }
                 const result = {

From a733d8bbf2d3b224bd70c8205ea96b3c19a0bd41 Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Sat, 1 Jul 2023 15:51:13 +0300
Subject: [PATCH 09/15] added GPUS

---
 web/src/views/SettingsView.vue | 477 ++++++++++++++++++++++-----------
 1 file changed, 327 insertions(+), 150 deletions(-)

diff --git a/web/src/views/SettingsView.vue b/web/src/views/SettingsView.vue
index 1ba0caf4..2e7ad4fd 100644
--- a/web/src/views/SettingsView.vue
+++ b/web/src/views/SettingsView.vue
@@ -75,123 +75,295 @@
                         <div class=" text-base font-semibold cursor-pointer select-none items-center">
 
                             <div class="flex gap-2 items-center ">
-                                <!-- GPU IMAGE  -->
-                                <svg aria-hidden="true" class="w-10 h-10  fill-secondary" viewBox="0 -3 82 66" fill="none"
-                                    xmlns="http://www.w3.org/2000/svg">
-                                    <path
-                                        d="M 5.9133057,14.000286 H 70.974329 a 8.9999999,8.9999999 0 0 1 8.999987,8.999998 V 47.889121 H 5.9133057 Z"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1116" />
-                                    <path d="m 5.9133057,28.634282 h -2.244251 v -9.367697 h 2.244251 z"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1118" />
-                                    <path d="M 5.9133057,42.648417 H 3.6690547 V 33.28072 h 2.244251 z"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1120" />
-                                    <path d="m 5.9133057,47.889121 v 4.42369"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1122" />
-                                    <path d="M 5.9133057,14.000286 H 2.3482707"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1124" />
-                                    <path d="M 2.3482707,14.000286 V 10.006515"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1126" />
-                                    <path
-                                        d="m 74.31472,30.942798 a 11.594069,11.594069 0 0 0 -23.188136,0 11.594069,11.594069 0 0 0 23.188136,0 z"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1128" />
-                                    <path d="m 54.568046,22.699178 a 8.1531184,8.1531184 0 0 0 8.154326,8.24362"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1130" />
-                                    <path d="M 73.935201,28.000658 A 8.1531184,8.1531184 0 0 0 62.721525,30.944293"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1132" />
-                                    <path d="m 70.873258,39.186418 a 8.1531184,8.1531184 0 0 0 -8.152606,-8.24362"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1134" />
-                                    <path d="M 59.657782,42.124981 A 8.1531184,8.1531184 0 0 0 62.719435,30.940687"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1136" />
-                                    <path d="M 51.50515,33.881361 A 8.1531184,8.1531184 0 0 0 62.720652,30.942798"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1138" />
-                                    <path d="M 65.783521,19.760615 A 8.1531184,8.1531184 0 0 0 62.721869,30.944909"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1140" />
-                                    <path d="m 62.720652,22.789678 a 8.1531184,8.1531184 0 0 0 -3.06287,-3.029063"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1142" />
-                                    <path d="m 69.782328,26.864746 a 8.1531184,8.1531184 0 0 0 1.09093,-4.165568"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1144" />
-                                    <path d="m 69.781455,35.019358 a 8.1531184,8.1531184 0 0 0 4.154699,-1.137997"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1146" />
-                                    <path d="m 62.722372,39.09293 a 8.1531184,8.1531184 0 0 0 3.064668,3.031085"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1148" />
-                                    <path d="m 55.659849,35.019358 a 8.1531184,8.1531184 0 0 0 -1.091803,4.16706"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1150" />
-                                    <path d="M 55.659849,26.866238 A 8.1531184,8.1531184 0 0 0 51.50515,28.004235"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1152" />
-                                    <path d="m 22.744016,47.889121 h 38.934945 v 4.42369 H 22.744016 Z"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1154" />
-                                    <path d="m 20.54627,47.889121 h -4.395478 v 4.42369 h 4.395478 z"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1156" />
-                                    <path
-                                        d="m 40.205007,30.942798 a 11.594071,11.594071 0 0 0 -23.188141,0 11.594071,11.594071 0 0 0 23.188141,0 z"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1158" />
-                                    <path d="m 20.458317,22.699178 a 8.1531184,8.1531184 0 0 0 8.154342,8.24362"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1160" />
-                                    <path d="m 35.672615,26.864746 a 8.1531184,8.1531184 0 0 0 1.09093,-4.165568"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1162" />
-                                    <path d="M 39.825489,28.000658 A 8.1531184,8.1531184 0 0 0 28.611786,30.944293"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1164" />
-                                    <path d="m 28.612659,39.09293 a 8.1531184,8.1531184 0 0 0 3.064669,3.031085"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1166" />
-                                    <path d="m 36.763545,39.186418 a 8.1531184,8.1531184 0 0 0 -8.152606,-8.24362"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1168" />
-                                    <path d="m 21.550126,35.019358 a 8.1531184,8.1531184 0 0 0 -1.091809,4.16706"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1170" />
-                                    <path d="M 25.54807,42.124981 A 8.1531184,8.1531184 0 0 0 28.609722,30.940687"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1172" />
-                                    <path d="m 21.550126,26.866238 a 8.1531184,8.1531184 0 0 0 -4.154684,1.137997"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1174" />
-                                    <path d="M 17.395442,33.881361 A 8.1531184,8.1531184 0 0 0 28.610939,30.942798"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1176" />
-                                    <path d="M 28.610939,22.789678 A 8.1531184,8.1531184 0 0 0 25.54807,19.760615"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1178" />
-                                    <path d="M 31.673809,19.760615 A 8.1531184,8.1531184 0 0 0 28.612156,30.944909"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1180" />
-                                    <path d="m 35.671742,35.019358 a 8.1531184,8.1531184 0 0 0 4.154673,-1.137997"
-                                        style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
-                                        id="path1182" />
-                                </svg>
-                                <h3 class="font-bold font-large text-lg">
-                                    <div>{{ vram_usage }} / {{ vram_total_space }} ({{ vram_percent_usage }}%)</div>
-                                </h3>
-                                <i data-feather="cpu" class="w-5 h-5 mx-1 flex-shrink-0"></i>
+                                <div>
+
+                                    <div v-if="vramUsage.gpus && vramUsage.gpus.length == 1">
+
+
+                                        <div class="flex gap-2 items-center " v-for="item in vramUsage.gpus">
+
+                                            <!-- GPU IMAGE  -->
+                                            <svg :title="item.gpu_model" aria-hidden="true"
+                                                class="w-10 h-10  fill-secondary" viewBox="0 -3 82 66" fill="none"
+                                                xmlns="http://www.w3.org/2000/svg">
+                                                <path
+                                                    d="M 5.9133057,14.000286 H 70.974329 a 8.9999999,8.9999999 0 0 1 8.999987,8.999998 V 47.889121 H 5.9133057 Z"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1116" />
+                                                <path d="m 5.9133057,28.634282 h -2.244251 v -9.367697 h 2.244251 z"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1118" />
+                                                <path d="M 5.9133057,42.648417 H 3.6690547 V 33.28072 h 2.244251 z"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1120" />
+                                                <path d="m 5.9133057,47.889121 v 4.42369"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1122" />
+                                                <path d="M 5.9133057,14.000286 H 2.3482707"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1124" />
+                                                <path d="M 2.3482707,14.000286 V 10.006515"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1126" />
+                                                <path
+                                                    d="m 74.31472,30.942798 a 11.594069,11.594069 0 0 0 -23.188136,0 11.594069,11.594069 0 0 0 23.188136,0 z"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1128" />
+                                                <path d="m 54.568046,22.699178 a 8.1531184,8.1531184 0 0 0 8.154326,8.24362"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1130" />
+                                                <path
+                                                    d="M 73.935201,28.000658 A 8.1531184,8.1531184 0 0 0 62.721525,30.944293"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1132" />
+                                                <path
+                                                    d="m 70.873258,39.186418 a 8.1531184,8.1531184 0 0 0 -8.152606,-8.24362"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1134" />
+                                                <path
+                                                    d="M 59.657782,42.124981 A 8.1531184,8.1531184 0 0 0 62.719435,30.940687"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1136" />
+                                                <path
+                                                    d="M 51.50515,33.881361 A 8.1531184,8.1531184 0 0 0 62.720652,30.942798"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1138" />
+                                                <path
+                                                    d="M 65.783521,19.760615 A 8.1531184,8.1531184 0 0 0 62.721869,30.944909"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1140" />
+                                                <path
+                                                    d="m 62.720652,22.789678 a 8.1531184,8.1531184 0 0 0 -3.06287,-3.029063"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1142" />
+                                                <path
+                                                    d="m 69.782328,26.864746 a 8.1531184,8.1531184 0 0 0 1.09093,-4.165568"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1144" />
+                                                <path
+                                                    d="m 69.781455,35.019358 a 8.1531184,8.1531184 0 0 0 4.154699,-1.137997"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1146" />
+                                                <path d="m 62.722372,39.09293 a 8.1531184,8.1531184 0 0 0 3.064668,3.031085"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1148" />
+                                                <path
+                                                    d="m 55.659849,35.019358 a 8.1531184,8.1531184 0 0 0 -1.091803,4.16706"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1150" />
+                                                <path
+                                                    d="M 55.659849,26.866238 A 8.1531184,8.1531184 0 0 0 51.50515,28.004235"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1152" />
+                                                <path d="m 22.744016,47.889121 h 38.934945 v 4.42369 H 22.744016 Z"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1154" />
+                                                <path d="m 20.54627,47.889121 h -4.395478 v 4.42369 h 4.395478 z"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1156" />
+                                                <path
+                                                    d="m 40.205007,30.942798 a 11.594071,11.594071 0 0 0 -23.188141,0 11.594071,11.594071 0 0 0 23.188141,0 z"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1158" />
+                                                <path d="m 20.458317,22.699178 a 8.1531184,8.1531184 0 0 0 8.154342,8.24362"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1160" />
+                                                <path
+                                                    d="m 35.672615,26.864746 a 8.1531184,8.1531184 0 0 0 1.09093,-4.165568"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1162" />
+                                                <path
+                                                    d="M 39.825489,28.000658 A 8.1531184,8.1531184 0 0 0 28.611786,30.944293"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1164" />
+                                                <path d="m 28.612659,39.09293 a 8.1531184,8.1531184 0 0 0 3.064669,3.031085"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1166" />
+                                                <path
+                                                    d="m 36.763545,39.186418 a 8.1531184,8.1531184 0 0 0 -8.152606,-8.24362"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1168" />
+                                                <path
+                                                    d="m 21.550126,35.019358 a 8.1531184,8.1531184 0 0 0 -1.091809,4.16706"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1170" />
+                                                <path
+                                                    d="M 25.54807,42.124981 A 8.1531184,8.1531184 0 0 0 28.609722,30.940687"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1172" />
+                                                <path
+                                                    d="m 21.550126,26.866238 a 8.1531184,8.1531184 0 0 0 -4.154684,1.137997"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1174" />
+                                                <path
+                                                    d="M 17.395442,33.881361 A 8.1531184,8.1531184 0 0 0 28.610939,30.942798"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1176" />
+                                                <path
+                                                    d="M 28.610939,22.789678 A 8.1531184,8.1531184 0 0 0 25.54807,19.760615"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1178" />
+                                                <path
+                                                    d="M 31.673809,19.760615 A 8.1531184,8.1531184 0 0 0 28.612156,30.944909"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1180" />
+                                                <path
+                                                    d="m 35.671742,35.019358 a 8.1531184,8.1531184 0 0 0 4.154673,-1.137997"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1182" />
+                                            </svg>
+                                            <h3 class="font-bold font-large text-lg">
+                                                <div>{{ item.used_vram }} / {{ item.total_vram }} ({{ item.percentage }}%)
+                                                </div>
+                                            </h3>
+                                        </div>
+                                    </div>
+                                    <div v-if="vramUsage.gpus && vramUsage.gpus.length >1">
+                                        <div class="flex gap-2 items-center ">
+
+                                            <!-- GPU IMAGE  -->
+                                            <svg  aria-hidden="true"
+                                                class="w-10 h-10  fill-secondary" viewBox="0 -3 82 66" fill="none"
+                                                xmlns="http://www.w3.org/2000/svg">
+                                                <path
+                                                    d="M 5.9133057,14.000286 H 70.974329 a 8.9999999,8.9999999 0 0 1 8.999987,8.999998 V 47.889121 H 5.9133057 Z"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1116" />
+                                                <path d="m 5.9133057,28.634282 h -2.244251 v -9.367697 h 2.244251 z"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1118" />
+                                                <path d="M 5.9133057,42.648417 H 3.6690547 V 33.28072 h 2.244251 z"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1120" />
+                                                <path d="m 5.9133057,47.889121 v 4.42369"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1122" />
+                                                <path d="M 5.9133057,14.000286 H 2.3482707"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1124" />
+                                                <path d="M 2.3482707,14.000286 V 10.006515"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1126" />
+                                                <path
+                                                    d="m 74.31472,30.942798 a 11.594069,11.594069 0 0 0 -23.188136,0 11.594069,11.594069 0 0 0 23.188136,0 z"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1128" />
+                                                <path d="m 54.568046,22.699178 a 8.1531184,8.1531184 0 0 0 8.154326,8.24362"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1130" />
+                                                <path
+                                                    d="M 73.935201,28.000658 A 8.1531184,8.1531184 0 0 0 62.721525,30.944293"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1132" />
+                                                <path
+                                                    d="m 70.873258,39.186418 a 8.1531184,8.1531184 0 0 0 -8.152606,-8.24362"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1134" />
+                                                <path
+                                                    d="M 59.657782,42.124981 A 8.1531184,8.1531184 0 0 0 62.719435,30.940687"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1136" />
+                                                <path
+                                                    d="M 51.50515,33.881361 A 8.1531184,8.1531184 0 0 0 62.720652,30.942798"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1138" />
+                                                <path
+                                                    d="M 65.783521,19.760615 A 8.1531184,8.1531184 0 0 0 62.721869,30.944909"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1140" />
+                                                <path
+                                                    d="m 62.720652,22.789678 a 8.1531184,8.1531184 0 0 0 -3.06287,-3.029063"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1142" />
+                                                <path
+                                                    d="m 69.782328,26.864746 a 8.1531184,8.1531184 0 0 0 1.09093,-4.165568"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1144" />
+                                                <path
+                                                    d="m 69.781455,35.019358 a 8.1531184,8.1531184 0 0 0 4.154699,-1.137997"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1146" />
+                                                <path d="m 62.722372,39.09293 a 8.1531184,8.1531184 0 0 0 3.064668,3.031085"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1148" />
+                                                <path
+                                                    d="m 55.659849,35.019358 a 8.1531184,8.1531184 0 0 0 -1.091803,4.16706"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1150" />
+                                                <path
+                                                    d="M 55.659849,26.866238 A 8.1531184,8.1531184 0 0 0 51.50515,28.004235"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1152" />
+                                                <path d="m 22.744016,47.889121 h 38.934945 v 4.42369 H 22.744016 Z"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1154" />
+                                                <path d="m 20.54627,47.889121 h -4.395478 v 4.42369 h 4.395478 z"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1156" />
+                                                <path
+                                                    d="m 40.205007,30.942798 a 11.594071,11.594071 0 0 0 -23.188141,0 11.594071,11.594071 0 0 0 23.188141,0 z"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1158" />
+                                                <path d="m 20.458317,22.699178 a 8.1531184,8.1531184 0 0 0 8.154342,8.24362"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1160" />
+                                                <path
+                                                    d="m 35.672615,26.864746 a 8.1531184,8.1531184 0 0 0 1.09093,-4.165568"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1162" />
+                                                <path
+                                                    d="M 39.825489,28.000658 A 8.1531184,8.1531184 0 0 0 28.611786,30.944293"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1164" />
+                                                <path d="m 28.612659,39.09293 a 8.1531184,8.1531184 0 0 0 3.064669,3.031085"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1166" />
+                                                <path
+                                                    d="m 36.763545,39.186418 a 8.1531184,8.1531184 0 0 0 -8.152606,-8.24362"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1168" />
+                                                <path
+                                                    d="m 21.550126,35.019358 a 8.1531184,8.1531184 0 0 0 -1.091809,4.16706"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1170" />
+                                                <path
+                                                    d="M 25.54807,42.124981 A 8.1531184,8.1531184 0 0 0 28.609722,30.940687"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1172" />
+                                                <path
+                                                    d="m 21.550126,26.866238 a 8.1531184,8.1531184 0 0 0 -4.154684,1.137997"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1174" />
+                                                <path
+                                                    d="M 17.395442,33.881361 A 8.1531184,8.1531184 0 0 0 28.610939,30.942798"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1176" />
+                                                <path
+                                                    d="M 28.610939,22.789678 A 8.1531184,8.1531184 0 0 0 25.54807,19.760615"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1178" />
+                                                <path
+                                                    d="M 31.673809,19.760615 A 8.1531184,8.1531184 0 0 0 28.612156,30.944909"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1180" />
+                                                <path
+                                                    d="m 35.671742,35.019358 a 8.1531184,8.1531184 0 0 0 4.154673,-1.137997"
+                                                    style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
+                                                    id="path1182" />
+                                            </svg>
+                                            <h3 class="font-bold font-large text-lg">
+                                                <div> {{ vramUsage.gpus.length }}x
+                                                </div>
+                                            </h3>
+
+                                        </div>
+                                    </div>
+                                </div>
+                                <i data-feather="cpu" title="CPU Ram" class="w-5 h-5 mx-1 flex-shrink-0"></i>
                                 <h3 class="font-bold font-large text-lg">
                                     <div>{{ ram_usage }} / {{ ram_total_space }} ({{ ram_percent_usage }}%)</div>
                                 </h3>
-                                <i data-feather="hard-drive" class="w-5 h-5 mx-1 flex-shrink-0"></i>
+                                <i data-feather="hard-drive" title="Hard drive" class="w-5 h-5 mx-1 flex-shrink-0"></i>
                                 <h3 class="font-bold font-large text-lg">
                                     <div> {{ disk_binding_models_usage }} / {{ disk_total_space }} ({{ disk_percent_usage
                                     }}%)</div>
@@ -209,11 +381,12 @@
                                 <path fill="currentColor"
                                     d="M17 17H7V7h10m4 4V9h-2V7a2 2 0 0 0-2-2h-2V3h-2v2h-2V3H9v2H7c-1.11 0-2 .89-2 2v2H3v2h2v2H3v2h2v2a2 2 0 0 0 2 2h2v2h2v-2h2v2h2v-2h2a2 2 0 0 0 2-2v-2h2v-2h-2v-2m-6 2h-2v-2h2m2-2H9v6h6V9Z" />
                             </svg>
-                            Ram usage:
+                            CPU Ram usage:
                         </label>
                         <div class="flex flex-col mx-2">
                             <div><b>Avaliable ram:&nbsp;</b>{{ ram_available_space }}</div>
-                            <div><b>Ram usage:&nbsp;</b> {{ ram_usage }} / {{ ram_total_space }}</div>
+                            <div><b>Ram usage:&nbsp;</b> {{ ram_usage }} / {{ ram_total_space }} ({{ ram_percent_usage }})%
+                            </div>
                         </div>
                         <div class="p-2 ">
                             <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
@@ -230,7 +403,8 @@
                         </label>
                         <div class="flex flex-col mx-2">
                             <div><b>Avaliable disk space:&nbsp;</b>{{ disk_available_space }}</div>
-                            <div><b>Disk usage:&nbsp;</b> {{ disk_binding_models_usage }} / {{ disk_total_space }}</div>
+                            <div><b>Disk usage:&nbsp;</b> {{ disk_binding_models_usage }} / {{ disk_total_space }}
+                                ({{ disk_percent_usage }}%)</div>
                         </div>
                         <div class="p-2 ">
                             <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
@@ -240,7 +414,7 @@
 
                         </div>
                     </div>
-                    <div class="mb-2">
+                    <div class="mb-2" v-for="item in vramUsage.gpus">
                         <label class="flex items-center gap-1 ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
                             <!-- GPU IMAGE  -->
                             <svg aria-hidden="true" class="w-10 h-10 -my-5 fill-secondary" viewBox="0 -3 82 66" fill="none"
@@ -320,12 +494,14 @@
                             GPU usage:
                         </label>
                         <div class="flex flex-col mx-2">
-                            <div><b>Avaliable vram:&nbsp;</b>{{ vram_available_space }}</div>
-                            <div><b>GPU usage:&nbsp;</b> {{ vram_usage }} / {{ vram_total_space }}</div>
+                            <div><b>Model:&nbsp;</b>{{ item.gpu_model }}</div>
+                            <div><b>Avaliable vram:&nbsp;</b>{{ item.available_space }}</div>
+                            <div><b>GPU usage:&nbsp;</b> {{ item.used_vram }} / {{ item.total_vram }} ({{ item.percentage
+                            }}%)</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: ' + vram_percent_usage + '%;'">
+                                <div class="bg-blue-600 h-2.5 rounded-full" :style="'width: ' + item.percentage + '%;'">
                                 </div>
                             </div>
 
@@ -1243,11 +1419,11 @@ export default {
             this.isLoading = false
             this.diskUsage = await this.api_get_req("disk_usage")
             this.ramUsage = await this.api_get_req("ram_usage")
-            this.vramUsage = await this.api_get_req("vram_usage")
+            this.vramUsage = await this.getVramUsage()
             this.getMountedPersonalities()
             this.isMounted = true
-            const lala = await this.getVramUsage()
-            
+
+
 
         },
         async getVramUsage() {
@@ -1265,33 +1441,34 @@ export default {
                 const keys = Object.keys(resp)
                 // for each gpu
                 for (let i = 0; i < resp.nb_gpus; i++) {
-                    // // For each key
-                    // for (let j = 0; j < keys.length; j++) {
-                    //     // if matches with array index then create gpu object
-                    //     if(keys[j].includes(i)){
-
-                    //         const gpuKey = keys[j]
-                    //         const gpuVal = resp.index
-                    //     }
 
 
-                    // }
+
 
                     const total_vram = resp[`gpu_${i}_total_vram`];
                     const used_vram = resp[`gpu_${i}_used_vram`];
                     const model = resp[`gpu_${i}_model`];
-            
+                    const percentage = (used_vram / total_vram) * 100
+                    const available_space = total_vram - used_vram
 
 
-                    gpuArr.push({ total_vram : total_vram, used_vram: used_vram, gpu_index: i, gpu_model:model });
+
+                    gpuArr.push({
+                        total_vram: this.computedFileSize(total_vram),
+                        used_vram: this.computedFileSize(used_vram),
+                        gpu_index: i,
+                        gpu_model: model,
+                        percentage: percentage.toFixed(2),
+                        available_space: this.computedFileSize(available_space)
+                    });
 
                 }
                 const result = {
 
                     "nb_gpus": resp.nb_gpus,
-                    "gpus":gpuArr
+                    "gpus": gpuArr
                 }
-                console.log('gpu usage: ',result)
+                //console.log('gpu usage: ',result)
                 return result
 
             }
@@ -2548,20 +2725,20 @@ export default {
         ram_total_space() {
             return this.computedFileSize(this.ramUsage.total_space)
         },
-        vram_available_space() {
-            return this.computedFileSize(this.vramUsage.gpu_0_total_vram - this.vramUsage.gpu_0_used_vram)
-        },
-        vram_usage() {
-            return this.computedFileSize(this.vramUsage.gpu_0_used_vram)
-        },
-        vram_percent_usage() {
-            const percentage = (this.vramUsage.gpu_0_used_vram / this.vramUsage.gpu_0_total_vram) * 100
-            return percentage.toFixed(2)
+        // vram_available_space() {
+        //     return this.computedFileSize(this.vramUsage.gpu_0_total_vram - this.vramUsage.gpu_0_used_vram)
+        // },
+        // vram_usage() {
+        //     return this.computedFileSize(this.vramUsage.gpu_0_used_vram)
+        // },
+        // vram_percent_usage() {
+        //     const percentage = (this.vramUsage.gpu_0_used_vram / this.vramUsage.gpu_0_total_vram) * 100
+        //     return percentage.toFixed(2)
 
-        },
-        vram_total_space() {
-            return this.computedFileSize(this.vramUsage.gpu_0_total_vram)
-        },
+        // },
+        // vram_total_space() {
+        //     return this.computedFileSize(this.vramUsage.gpu_0_total_vram)
+        // },
         imgBinding() {
             if (!this.isMounted) {
                 return

From 08b167748308f1aea949b161b345d20d0c3ef266 Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Sat, 1 Jul 2023 16:48:26 +0300
Subject: [PATCH 10/15] removed garbage

---
 web/src/services/websocket.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/src/services/websocket.js b/web/src/services/websocket.js
index 564c0794..7a99289e 100644
--- a/web/src/services/websocket.js
+++ b/web/src/services/websocket.js
@@ -3,7 +3,7 @@
 // Description :
 // All websocket stuff can be found here.
 // More info can be found here https://socket.io/how-to/use-with-vue
-import { createApp } from 'vue';
+// import { createApp } from 'vue';
 import io from 'socket.io-client';
 
 // fixes issues when people not hosting this site on local network
@@ -31,11 +31,11 @@ socket.on("disconnect", () => {
   console.log('WebSocket disonnected (websocket)');
 });
 
-const app = createApp(/* your root component */);
+// const app = createApp(/* your root component */);
 
-app.config.globalProperties.$socket = socket;
+// app.config.globalProperties.$socket = socket;
 
-app.mount(/* your root element */);
+// app.mount(/* your root element */);
 
 export default socket;
 

From f0c0f33a9e656f8a40af19a0258676b1e648f162 Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Sat, 1 Jul 2023 16:50:23 +0300
Subject: [PATCH 11/15] ss

---
 web/src/views/DiscussionsView.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/src/views/DiscussionsView.vue b/web/src/views/DiscussionsView.vue
index 59d7ad06..b7a69fc3 100644
--- a/web/src/views/DiscussionsView.vue
+++ b/web/src/views/DiscussionsView.vue
@@ -1345,6 +1345,7 @@ import { nextTick, TransitionGroup } from 'vue'
 
 import socket from '@/services/websocket.js'
 
+
 import { onMounted } from 'vue'
 import { initFlowbite } from 'flowbite'
 

From 80fed5956bc60fb63810a039c34775bc3752c860 Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Sat, 1 Jul 2023 16:57:59 +0300
Subject: [PATCH 12/15] removed becasue reasons

---
 web/vite.config.mjs | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/vite.config.mjs b/web/vite.config.mjs
index e5da9b1f..249a52e1 100644
--- a/web/vite.config.mjs
+++ b/web/vite.config.mjs
@@ -26,12 +26,12 @@ export default ({ mode }) => {
         secure: process.env.VITE_GPT4ALL_API_SECURE,
         rewrite: (path) => path.replace(/^\/api/, ""),
       },
-      "/": {
-        target: process.env.VITE_GPT4ALL_API,
-        changeOrigin: process.env.VITE_GPT4ALL_API_CHANGE_ORIGIN,
-        secure: process.env.VITE_GPT4ALL_API_SECURE,
+      // "/": {
+      //   target: process.env.VITE_GPT4ALL_API,
+      //   changeOrigin: process.env.VITE_GPT4ALL_API_CHANGE_ORIGIN,
+      //   secure: process.env.VITE_GPT4ALL_API_SECURE,
         
-      },
+      // },
 
     },
   }

From 8c97378f00bf2062c5fe45869a98a00a709596e7 Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Sat, 1 Jul 2023 16:58:07 +0300
Subject: [PATCH 13/15] removed until its fixed

---
 web/src/views/SettingsView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/views/SettingsView.vue b/web/src/views/SettingsView.vue
index 2e7ad4fd..0aeec6fa 100644
--- a/web/src/views/SettingsView.vue
+++ b/web/src/views/SettingsView.vue
@@ -756,7 +756,7 @@
                 <div :class="{ 'hidden': mzdc_collapsed }" class="flex flex-col mb-2 px-3 pb-0">
 
                     <div class="mb-2">
-
+                        <!-- HIDDEN UNTIL ITS FIXED
                         <div class="p-2 " v-if="!modelDownlaodInProgress">
 
                             <form>
@@ -776,7 +776,7 @@
 
                             </form>
 
-                        </div>
+                        </div> -->
 
                         <div class="p-2  ">
 

From 20ed2218c090ab508015e150190f3abd51aacb8f Mon Sep 17 00:00:00 2001
From: Saifeddine ALOUI <aloui.seifeddine@gmail.com>
Date: Tue, 4 Jul 2023 01:38:54 +0200
Subject: [PATCH 14/15] Started testing new lollms

---
 requirements.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/requirements.txt b/requirements.txt
index 1b61fd97..780f1e3f 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -7,7 +7,7 @@ pyyaml
 markdown
 gevent
 gevent-websocket
-lollms==2.1.14
+lollms
 langchain
 requests
 eventlet

From 25c2c2aa45cf23557002a392b5e73bf4706e32c5 Mon Sep 17 00:00:00 2001
From: Saifeddine ALOUI <aloui.seifeddine@gmail.com>
Date: Tue, 4 Jul 2023 02:19:20 +0200
Subject: [PATCH 15/15] Working dev version

---
 api/__init__.py | 74 +++----------------------------------------------
 app.py          | 52 +++++++++++++++++++++++-----------
 2 files changed, 40 insertions(+), 86 deletions(-)

diff --git a/api/__init__.py b/api/__init__.py
index 55d65afd..600e36ff 100644
--- a/api/__init__.py
+++ b/api/__init__.py
@@ -19,6 +19,7 @@ from lollms.personality import AIPersonality, PersonalityBuilder
 from lollms.binding import LOLLMSConfig, BindingBuilder, LLMBinding, ModelBuilder
 from lollms.paths import LollmsPaths
 from lollms.helpers import ASCIIColors
+from lollms.app import LollmsApplication
 import multiprocessing as mp
 import threading
 import time
@@ -89,39 +90,13 @@ def parse_requirements_file(requirements_path):
 # ===========================================================
 
 
-class LoLLMsAPPI():
+class LoLLMsAPPI(LollmsApplication):
     def __init__(self, config:LOLLMSConfig, socketio, config_file_path:str, lollms_paths: LollmsPaths) -> None:
-        self.lollms_paths = lollms_paths
-        self.config = config
-        self.is_ready = True
-        self.menu = MainMenu(self)
 
+        super().__init__("Lollms_webui",config, lollms_paths)
+        self.is_ready = True
         
         self.socketio = socketio
-        # Check model
-        if config.binding_name is None:
-            self.menu.select_binding()
-
-        self.binding = BindingBuilder().build_binding(self.config, self.lollms_paths)
-        
-        # Check model
-        if config.model_name is None:
-            self.menu.select_model()
-
-        self.mounted_personalities = []
-        try:
-            self.model = self.binding.build_model()
-            self.mounted_personalities = self.rebuild_personalities()
-            if self.config["active_personality_id"]<len(self.mounted_personalities):
-                self.personality:AIPersonality = self.mounted_personalities[self.config["active_personality_id"]]
-            else:
-                self.personality:AIPersonality = None
-            if config["debug"]:
-                print(print(f"{self.personality}"))
-            
-        except Exception as ex:
-            ASCIIColors.error(f"Couldn't load model:\nException generated:{ex}")
-            self.model = None
         self.config_file_path = config_file_path
         self.cancel_gen = False
 
@@ -530,46 +505,6 @@ class LoLLMsAPPI():
         return mounted_personalities
     # ================================== LOLLMSApp
 
-    def load_binding(self):
-        if self.config.binding_name is None:
-            print(f"No bounding selected")
-            print("Please select a valid model or install a new one from a url")
-            self.menu.select_binding()
-            # cfg.download_model(url)
-        else:
-            try:
-                self.binding = BindingBuilder().build_binding(self.config, self.lollms_paths)
-            except Exception as ex:
-                print(ex)
-                print(f"Couldn't find binding. Please verify your configuration file at {self.config.file_path} or use the next menu to select a valid binding")
-                print(f"Trying to reinstall binding")
-                self.binding = BindingBuilder().build_binding(self.config, self.lollms_paths, InstallOption.FORCE_INSTALL)
-                self.menu.select_binding()
-
-    def load_model(self):
-        try:
-            self.active_model = ModelBuilder(self.binding).get_model()
-            ASCIIColors.success("Model loaded successfully")
-        except Exception as ex:
-            ASCIIColors.error(f"Couldn't load model.")
-            ASCIIColors.error(f"Binding returned this exception : {ex}")
-            ASCIIColors.error(f"{self.config.get_model_path_infos()}")
-            print("Please select a valid model or install a new one from a url")
-            self.menu.select_model()
-
-    def load_personality(self):
-        try:
-            self.personality = PersonalityBuilder(self.lollms_paths, self.config, self.model).build_personality()
-        except Exception as ex:
-            ASCIIColors.error(f"Couldn't load personality.")
-            ASCIIColors.error(f"Binding returned this exception : {ex}")
-            ASCIIColors.error(f"{self.config.get_personality_path_infos()}")
-            print("Please select a valid model or install a new one from a url")
-            self.menu.select_model()
-        self.cond_tk = self.personality.model.tokenize(self.personality.personality_conditioning)
-        self.n_cond_tk = len(self.cond_tk)
-
-
     #properties
     @property
     def message_id(self):
@@ -756,7 +691,6 @@ class LoLLMsAPPI():
                     anti_prompt_to_remove = prompt.lower()
                     
             if not detected_anti_prompt:
-                    ASCIIColors.green(f"generated:{len(self.current_generated_text.split())} words", end='\r', flush=True)
                     self.socketio.emit('message', {
                                                     'data': self.current_generated_text, 
                                                     'user_message_id':self.current_user_message_id, 
diff --git a/app.py b/app.py
index 92297107..4f414263 100644
--- a/app.py
+++ b/app.py
@@ -92,17 +92,28 @@ def get_ip_address():
 
 class LoLLMsWebUI(LoLLMsAPPI):
     def __init__(self, _app, _socketio, config:LOLLMSConfig, config_file_path:Path|str, lollms_paths:LollmsPaths) -> None:
+        if len(config.personalities)==0:
+            config.personalities.append("english/generic/lollms")
+            config["active_personality_id"] = 0
+            config.save_config()
+
+        if config["active_personality_id"]>=len(config["personalities"]) or config["active_personality_id"]<0:
+            config["active_personality_id"] = 0
         super().__init__(config, _socketio, config_file_path, lollms_paths)
 
         self.app = _app
         self.cancel_gen = False
 
         app.template_folder = "web/dist"
-        if config["active_personality_id"]>=len(config["personalities"]):
-            config["active_personality_id"] = 0
-        self.personality_language= config["personalities"][config["active_personality_id"]].split("/")[0]
-        self.personality_category= config["personalities"][config["active_personality_id"]].split("/")[1]
-        self.personality_name= config["personalities"][config["active_personality_id"]].split("/")[2]
+
+        if len(config["personalities"])>0:
+            self.personality_language= config["personalities"][config["active_personality_id"]].split("/")[0]
+            self.personality_category= config["personalities"][config["active_personality_id"]].split("/")[1]
+            self.personality_name= config["personalities"][config["active_personality_id"]].split("/")[2]
+        else:
+            self.personality_language = "english"
+            self.personality_category = "generic"
+            self.personality_name = "lollms"
 
         # =========================================================================================
         # Endpoints
@@ -123,9 +134,11 @@ class LoLLMsWebUI(LoLLMsAPPI):
         
         
         self.add_endpoint("/list_mounted_personalities", "list_mounted_personalities", self.list_mounted_personalities, methods=["POST"])
-        self.add_endpoint("/mount_personality", "mount_personality", self.mount_personality, methods=["POST"])
-        self.add_endpoint("/unmount_personality", "unmount_personality", self.unmount_personality, methods=["POST"])
-        self.add_endpoint("/select_personality", "select_personality", self.select_personality, methods=["POST"])
+
+        self.add_endpoint("/mount_personality", "mount_personality", self.p_mount_personality, methods=["POST"])
+        self.add_endpoint("/unmount_personality", "unmount_personality", self.p_unmount_personality, methods=["POST"])        
+        self.add_endpoint("/select_personality", "select_personality", self.p_select_personality, methods=["POST"])
+
         self.add_endpoint("/get_personality_settings", "get_personality_settings", self.get_personality_settings, methods=["POST"])
 
         self.add_endpoint("/get_active_personality_settings", "get_active_personality_settings", self.get_active_personality_settings, methods=["GET"])
@@ -872,7 +885,7 @@ class LoLLMsWebUI(LoLLMsAPPI):
             return jsonify({"status":False, 'error':str(ex)})
         
 
-    def mount_personality(self):
+    def p_mount_personality(self):
         print("- Mounting personality")
         try:
             data = request.get_json()
@@ -908,7 +921,7 @@ class LoLLMsWebUI(LoLLMsAPPI):
             ASCIIColors.error(f"nok : Personality not found @ {pth}")
             return jsonify({"status": False, "error":f"Personality not found @ {pth}"})         
 
-    def unmount_personality(self):
+    def p_unmount_personality(self):
         print("- Unmounting personality ...")
         try:
             data = request.get_json()
@@ -1050,7 +1063,7 @@ class LoLLMsWebUI(LoLLMsAPPI):
 
 
 
-    def select_personality(self):
+    def p_select_personality(self):
 
         data = request.get_json()
         id = data['id']
@@ -1275,11 +1288,18 @@ class LoLLMsWebUI(LoLLMsAPPI):
         return jsonify(self.config.to_dict())
     
     def get_current_personality_path_infos(self):
-        return jsonify({
-            "personality_language":self.personality_language,
-            "personality_category":self.personality_category, 
-            "personality_name":self.personality_name
-        })
+        if self.personality is None:
+            return jsonify({
+                "personality_language":"",
+                "personality_category":"", 
+                "personality_name":""
+            })
+        else:
+            return jsonify({
+                "personality_language":self.personality_language,
+                "personality_category":self.personality_category, 
+                "personality_name":self.personality_name
+            })
 
     def main(self):
         return render_template("main.html")