mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2024-12-24 06:36:37 +00:00
Merge branch 'dev'
This commit is contained in:
commit
dba9e08005
4
.gitignore
vendored
4
.gitignore
vendored
@ -194,4 +194,6 @@ tests/end_point_tests/*_local.http
|
|||||||
|
|
||||||
personalities_zoo
|
personalities_zoo
|
||||||
bindings_zoo
|
bindings_zoo
|
||||||
user_data
|
user_data
|
||||||
|
src/
|
||||||
|
src/taming-transformers
|
@ -19,6 +19,7 @@ from lollms.personality import AIPersonality, PersonalityBuilder
|
|||||||
from lollms.binding import LOLLMSConfig, BindingBuilder, LLMBinding, ModelBuilder
|
from lollms.binding import LOLLMSConfig, BindingBuilder, LLMBinding, ModelBuilder
|
||||||
from lollms.paths import LollmsPaths
|
from lollms.paths import LollmsPaths
|
||||||
from lollms.helpers import ASCIIColors
|
from lollms.helpers import ASCIIColors
|
||||||
|
from lollms.app import LollmsApplication
|
||||||
import multiprocessing as mp
|
import multiprocessing as mp
|
||||||
import threading
|
import threading
|
||||||
import time
|
import time
|
||||||
@ -90,39 +91,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:
|
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
|
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.config_file_path = config_file_path
|
||||||
self.cancel_gen = False
|
self.cancel_gen = False
|
||||||
|
|
||||||
@ -531,49 +506,6 @@ class LoLLMsAPPI():
|
|||||||
return mounted_personalities
|
return mounted_personalities
|
||||||
# ================================== LOLLMSApp
|
# ================================== 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 = None
|
|
||||||
self.model = None
|
|
||||||
gc.collect()
|
|
||||||
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
|
#properties
|
||||||
@property
|
@property
|
||||||
def message_id(self):
|
def message_id(self):
|
||||||
@ -760,7 +692,6 @@ class LoLLMsAPPI():
|
|||||||
anti_prompt_to_remove = prompt.lower()
|
anti_prompt_to_remove = prompt.lower()
|
||||||
|
|
||||||
if not detected_anti_prompt:
|
if not detected_anti_prompt:
|
||||||
ASCIIColors.green(f"generated:{len(self.current_generated_text.split())} words", end='\r', flush=True)
|
|
||||||
self.socketio.emit('message', {
|
self.socketio.emit('message', {
|
||||||
'data': self.current_generated_text,
|
'data': self.current_generated_text,
|
||||||
'user_message_id':self.current_user_message_id,
|
'user_message_id':self.current_user_message_id,
|
||||||
|
56
app.py
56
app.py
@ -92,17 +92,28 @@ def get_ip_address():
|
|||||||
|
|
||||||
class LoLLMsWebUI(LoLLMsAPPI):
|
class LoLLMsWebUI(LoLLMsAPPI):
|
||||||
def __init__(self, _app, _socketio, config:LOLLMSConfig, config_file_path:Path|str, lollms_paths:LollmsPaths) -> None:
|
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)
|
super().__init__(config, _socketio, config_file_path, lollms_paths)
|
||||||
|
|
||||||
self.app = _app
|
self.app = _app
|
||||||
self.cancel_gen = False
|
self.cancel_gen = False
|
||||||
|
|
||||||
app.template_folder = "web/dist"
|
app.template_folder = "web/dist"
|
||||||
if config["active_personality_id"]>=len(config["personalities"]):
|
|
||||||
config["active_personality_id"] = 0
|
if len(config["personalities"])>0:
|
||||||
self.personality_language= config["personalities"][config["active_personality_id"]].split("/")[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_category= config["personalities"][config["active_personality_id"]].split("/")[1]
|
||||||
self.personality_name= config["personalities"][config["active_personality_id"]].split("/")[2]
|
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
|
# 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("/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("/mount_personality", "mount_personality", self.p_mount_personality, methods=["POST"])
|
||||||
self.add_endpoint("/select_personality", "select_personality", self.select_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_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"])
|
self.add_endpoint("/get_active_personality_settings", "get_active_personality_settings", self.get_active_personality_settings, methods=["GET"])
|
||||||
@ -571,7 +584,7 @@ class LoLLMsWebUI(LoLLMsAPPI):
|
|||||||
|
|
||||||
def vram_usage(self) -> Optional[dict]:
|
def vram_usage(self) -> Optional[dict]:
|
||||||
try:
|
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')
|
lines = output.decode().strip().split('\n')
|
||||||
vram_info = [line.split(',') for line in lines]
|
vram_info = [line.split(',') for line in lines]
|
||||||
except (subprocess.CalledProcessError, FileNotFoundError):
|
except (subprocess.CalledProcessError, FileNotFoundError):
|
||||||
@ -587,10 +600,12 @@ class LoLLMsWebUI(LoLLMsAPPI):
|
|||||||
for i, gpu in enumerate(vram_info):
|
for i, gpu in enumerate(vram_info):
|
||||||
ram_usage[f"gpu_{i}_total_vram"] = int(gpu[0])*1024*1024
|
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}_used_vram"] = int(gpu[1])*1024*1024
|
||||||
|
ram_usage[f"gpu_{i}_model"] = gpu[2].strip()
|
||||||
else:
|
else:
|
||||||
# Set all VRAM-related entries to None
|
# Set all VRAM-related entries to None
|
||||||
ram_usage["gpu_0_total_vram"] = None
|
ram_usage["gpu_0_total_vram"] = None
|
||||||
ram_usage["gpu_0_used_vram"] = None
|
ram_usage["gpu_0_used_vram"] = None
|
||||||
|
ram_usage["gpu_0_model"] = None
|
||||||
|
|
||||||
return jsonify(ram_usage)
|
return jsonify(ram_usage)
|
||||||
|
|
||||||
@ -872,7 +887,7 @@ class LoLLMsWebUI(LoLLMsAPPI):
|
|||||||
return jsonify({"status":False, 'error':str(ex)})
|
return jsonify({"status":False, 'error':str(ex)})
|
||||||
|
|
||||||
|
|
||||||
def mount_personality(self):
|
def p_mount_personality(self):
|
||||||
print("- Mounting personality")
|
print("- Mounting personality")
|
||||||
try:
|
try:
|
||||||
data = request.get_json()
|
data = request.get_json()
|
||||||
@ -908,7 +923,7 @@ class LoLLMsWebUI(LoLLMsAPPI):
|
|||||||
ASCIIColors.error(f"nok : Personality not found @ {pth}")
|
ASCIIColors.error(f"nok : Personality not found @ {pth}")
|
||||||
return jsonify({"status": False, "error":f"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 ...")
|
print("- Unmounting personality ...")
|
||||||
try:
|
try:
|
||||||
data = request.get_json()
|
data = request.get_json()
|
||||||
@ -1050,7 +1065,7 @@ class LoLLMsWebUI(LoLLMsAPPI):
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
def select_personality(self):
|
def p_select_personality(self):
|
||||||
|
|
||||||
data = request.get_json()
|
data = request.get_json()
|
||||||
id = data['id']
|
id = data['id']
|
||||||
@ -1275,11 +1290,18 @@ class LoLLMsWebUI(LoLLMsAPPI):
|
|||||||
return jsonify(self.config.to_dict())
|
return jsonify(self.config.to_dict())
|
||||||
|
|
||||||
def get_current_personality_path_infos(self):
|
def get_current_personality_path_infos(self):
|
||||||
return jsonify({
|
if self.personality is None:
|
||||||
"personality_language":self.personality_language,
|
return jsonify({
|
||||||
"personality_category":self.personality_category,
|
"personality_language":"",
|
||||||
"personality_name":self.personality_name
|
"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):
|
def main(self):
|
||||||
return render_template("main.html")
|
return render_template("main.html")
|
||||||
|
@ -7,7 +7,7 @@ pyyaml
|
|||||||
markdown
|
markdown
|
||||||
gevent
|
gevent
|
||||||
gevent-websocket
|
gevent-websocket
|
||||||
lollms==2.1.14
|
lollms
|
||||||
langchain
|
langchain
|
||||||
requests
|
requests
|
||||||
eventlet
|
eventlet
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<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 />
|
<TopBar />
|
||||||
|
|
||||||
|
@ -237,7 +237,9 @@
|
|||||||
<i data-feather="info" class="w-5 m-1"></i>
|
<i data-feather="info" class="w-5 m-1"></i>
|
||||||
<b>Description: </b><br>
|
<b>Description: </b><br>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
// Description :
|
// Description :
|
||||||
// All websocket stuff can be found here.
|
// All websocket stuff can be found here.
|
||||||
// More info can be found here https://socket.io/how-to/use-with-vue
|
// 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';
|
import io from 'socket.io-client';
|
||||||
|
|
||||||
// fixes issues when people not hosting this site on local network
|
// fixes issues when people not hosting this site on local network
|
||||||
@ -31,11 +31,11 @@ socket.on("disconnect", () => {
|
|||||||
console.log('WebSocket disonnected (websocket)');
|
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;
|
export default socket;
|
||||||
|
|
||||||
|
@ -229,7 +229,9 @@
|
|||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
||||||
setup() { },
|
setup() { },
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
// To be synced with the backend database types
|
// To be synced with the backend database types
|
||||||
@ -1355,6 +1357,7 @@ import { nextTick, TransitionGroup } from 'vue'
|
|||||||
|
|
||||||
import socket from '@/services/websocket.js'
|
import socket from '@/services/websocket.js'
|
||||||
|
|
||||||
|
|
||||||
import { onMounted } from 'vue'
|
import { onMounted } from 'vue'
|
||||||
import { initFlowbite } from 'flowbite'
|
import { initFlowbite } from 'flowbite'
|
||||||
|
|
||||||
|
@ -75,123 +75,295 @@
|
|||||||
<div class=" text-base font-semibold cursor-pointer select-none items-center">
|
<div class=" text-base font-semibold cursor-pointer select-none items-center">
|
||||||
|
|
||||||
<div class="flex gap-2 items-center ">
|
<div class="flex gap-2 items-center ">
|
||||||
<!-- GPU IMAGE -->
|
<div>
|
||||||
<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">
|
<div v-if="vramUsage.gpus && vramUsage.gpus.length == 1">
|
||||||
<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"
|
<div class="flex gap-2 items-center " v-for="item in vramUsage.gpus">
|
||||||
id="path1116" />
|
|
||||||
<path d="m 5.9133057,28.634282 h -2.244251 v -9.367697 h 2.244251 z"
|
<!-- GPU IMAGE -->
|
||||||
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
<svg :title="item.gpu_model" aria-hidden="true"
|
||||||
id="path1118" />
|
class="w-10 h-10 fill-secondary" viewBox="0 -3 82 66" fill="none"
|
||||||
<path d="M 5.9133057,42.648417 H 3.6690547 V 33.28072 h 2.244251 z"
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
<path
|
||||||
id="path1120" />
|
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"
|
||||||
<path d="m 5.9133057,47.889121 v 4.42369"
|
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
||||||
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
id="path1116" />
|
||||||
id="path1122" />
|
<path d="m 5.9133057,28.634282 h -2.244251 v -9.367697 h 2.244251 z"
|
||||||
<path d="M 5.9133057,14.000286 H 2.3482707"
|
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
||||||
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
id="path1118" />
|
||||||
id="path1124" />
|
<path d="M 5.9133057,42.648417 H 3.6690547 V 33.28072 h 2.244251 z"
|
||||||
<path d="M 2.3482707,14.000286 V 10.006515"
|
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
||||||
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
id="path1120" />
|
||||||
id="path1126" />
|
<path d="m 5.9133057,47.889121 v 4.42369"
|
||||||
<path
|
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
||||||
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"
|
id="path1122" />
|
||||||
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
<path d="M 5.9133057,14.000286 H 2.3482707"
|
||||||
id="path1128" />
|
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
||||||
<path d="m 54.568046,22.699178 a 8.1531184,8.1531184 0 0 0 8.154326,8.24362"
|
id="path1124" />
|
||||||
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
<path d="M 2.3482707,14.000286 V 10.006515"
|
||||||
id="path1130" />
|
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
||||||
<path d="M 73.935201,28.000658 A 8.1531184,8.1531184 0 0 0 62.721525,30.944293"
|
id="path1126" />
|
||||||
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
<path
|
||||||
id="path1132" />
|
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"
|
||||||
<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"
|
||||||
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
id="path1128" />
|
||||||
id="path1134" />
|
<path d="m 54.568046,22.699178 a 8.1531184,8.1531184 0 0 0 8.154326,8.24362"
|
||||||
<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"
|
||||||
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
id="path1130" />
|
||||||
id="path1136" />
|
<path
|
||||||
<path d="M 51.50515,33.881361 A 8.1531184,8.1531184 0 0 0 62.720652,30.942798"
|
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"
|
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
||||||
id="path1138" />
|
id="path1132" />
|
||||||
<path d="M 65.783521,19.760615 A 8.1531184,8.1531184 0 0 0 62.721869,30.944909"
|
<path
|
||||||
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
d="m 70.873258,39.186418 a 8.1531184,8.1531184 0 0 0 -8.152606,-8.24362"
|
||||||
id="path1140" />
|
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
||||||
<path d="m 62.720652,22.789678 a 8.1531184,8.1531184 0 0 0 -3.06287,-3.029063"
|
id="path1134" />
|
||||||
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
<path
|
||||||
id="path1142" />
|
d="M 59.657782,42.124981 A 8.1531184,8.1531184 0 0 0 62.719435,30.940687"
|
||||||
<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"
|
||||||
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
id="path1136" />
|
||||||
id="path1144" />
|
<path
|
||||||
<path d="m 69.781455,35.019358 a 8.1531184,8.1531184 0 0 0 4.154699,-1.137997"
|
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"
|
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
||||||
id="path1146" />
|
id="path1138" />
|
||||||
<path d="m 62.722372,39.09293 a 8.1531184,8.1531184 0 0 0 3.064668,3.031085"
|
<path
|
||||||
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
d="M 65.783521,19.760615 A 8.1531184,8.1531184 0 0 0 62.721869,30.944909"
|
||||||
id="path1148" />
|
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
||||||
<path d="m 55.659849,35.019358 a 8.1531184,8.1531184 0 0 0 -1.091803,4.16706"
|
id="path1140" />
|
||||||
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
<path
|
||||||
id="path1150" />
|
d="m 62.720652,22.789678 a 8.1531184,8.1531184 0 0 0 -3.06287,-3.029063"
|
||||||
<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"
|
||||||
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
id="path1142" />
|
||||||
id="path1152" />
|
<path
|
||||||
<path d="m 22.744016,47.889121 h 38.934945 v 4.42369 H 22.744016 Z"
|
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"
|
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
||||||
id="path1154" />
|
id="path1144" />
|
||||||
<path d="m 20.54627,47.889121 h -4.395478 v 4.42369 h 4.395478 z"
|
<path
|
||||||
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
d="m 69.781455,35.019358 a 8.1531184,8.1531184 0 0 0 4.154699,-1.137997"
|
||||||
id="path1156" />
|
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
||||||
<path
|
id="path1146" />
|
||||||
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"
|
<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"
|
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
||||||
id="path1158" />
|
id="path1148" />
|
||||||
<path d="m 20.458317,22.699178 a 8.1531184,8.1531184 0 0 0 8.154342,8.24362"
|
<path
|
||||||
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
d="m 55.659849,35.019358 a 8.1531184,8.1531184 0 0 0 -1.091803,4.16706"
|
||||||
id="path1160" />
|
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
||||||
<path d="m 35.672615,26.864746 a 8.1531184,8.1531184 0 0 0 1.09093,-4.165568"
|
id="path1150" />
|
||||||
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
<path
|
||||||
id="path1162" />
|
d="M 55.659849,26.866238 A 8.1531184,8.1531184 0 0 0 51.50515,28.004235"
|
||||||
<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"
|
||||||
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
id="path1152" />
|
||||||
id="path1164" />
|
<path d="m 22.744016,47.889121 h 38.934945 v 4.42369 H 22.744016 Z"
|
||||||
<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"
|
||||||
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
id="path1154" />
|
||||||
id="path1166" />
|
<path d="m 20.54627,47.889121 h -4.395478 v 4.42369 h 4.395478 z"
|
||||||
<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"
|
||||||
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
id="path1156" />
|
||||||
id="path1168" />
|
<path
|
||||||
<path d="m 21.550126,35.019358 a 8.1531184,8.1531184 0 0 0 -1.091809,4.16706"
|
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"
|
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
||||||
id="path1170" />
|
id="path1158" />
|
||||||
<path d="M 25.54807,42.124981 A 8.1531184,8.1531184 0 0 0 28.609722,30.940687"
|
<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"
|
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
||||||
id="path1172" />
|
id="path1160" />
|
||||||
<path d="m 21.550126,26.866238 a 8.1531184,8.1531184 0 0 0 -4.154684,1.137997"
|
<path
|
||||||
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
d="m 35.672615,26.864746 a 8.1531184,8.1531184 0 0 0 1.09093,-4.165568"
|
||||||
id="path1174" />
|
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
||||||
<path d="M 17.395442,33.881361 A 8.1531184,8.1531184 0 0 0 28.610939,30.942798"
|
id="path1162" />
|
||||||
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
<path
|
||||||
id="path1176" />
|
d="M 39.825489,28.000658 A 8.1531184,8.1531184 0 0 0 28.611786,30.944293"
|
||||||
<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"
|
||||||
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
id="path1164" />
|
||||||
id="path1178" />
|
<path d="m 28.612659,39.09293 a 8.1531184,8.1531184 0 0 0 3.064669,3.031085"
|
||||||
<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"
|
||||||
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
id="path1166" />
|
||||||
id="path1180" />
|
<path
|
||||||
<path d="m 35.671742,35.019358 a 8.1531184,8.1531184 0 0 0 4.154673,-1.137997"
|
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"
|
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
||||||
id="path1182" />
|
id="path1168" />
|
||||||
</svg>
|
<path
|
||||||
<h3 class="font-bold font-large text-lg">
|
d="m 21.550126,35.019358 a 8.1531184,8.1531184 0 0 0 -1.091809,4.16706"
|
||||||
<div>{{ vram_usage }} / {{ vram_total_space }} ({{ vram_percent_usage }}%)</div>
|
style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
|
||||||
</h3>
|
id="path1170" />
|
||||||
<i data-feather="cpu" class="w-5 h-5 mx-1 flex-shrink-0"></i>
|
<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">
|
<h3 class="font-bold font-large text-lg">
|
||||||
<div>{{ ram_usage }} / {{ ram_total_space }} ({{ ram_percent_usage }}%)</div>
|
<div>{{ ram_usage }} / {{ ram_total_space }} ({{ ram_percent_usage }}%)</div>
|
||||||
</h3>
|
</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">
|
<h3 class="font-bold font-large text-lg">
|
||||||
<div> {{ disk_binding_models_usage }} / {{ disk_total_space }} ({{ disk_percent_usage
|
<div> {{ disk_binding_models_usage }} / {{ disk_total_space }} ({{ disk_percent_usage
|
||||||
}}%)</div>
|
}}%)</div>
|
||||||
@ -209,11 +381,12 @@
|
|||||||
<path fill="currentColor"
|
<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" />
|
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>
|
</svg>
|
||||||
Ram usage:
|
CPU Ram usage:
|
||||||
</label>
|
</label>
|
||||||
<div class="flex flex-col mx-2">
|
<div class="flex flex-col mx-2">
|
||||||
<div><b>Avaliable ram: </b>{{ ram_available_space }}</div>
|
<div><b>Avaliable ram: </b>{{ ram_available_space }}</div>
|
||||||
<div><b>Ram usage: </b> {{ ram_usage }} / {{ ram_total_space }}</div>
|
<div><b>Ram usage: </b> {{ ram_usage }} / {{ ram_total_space }} ({{ ram_percent_usage }})%
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-2 ">
|
<div class="p-2 ">
|
||||||
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
|
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
|
||||||
@ -230,7 +403,8 @@
|
|||||||
</label>
|
</label>
|
||||||
<div class="flex flex-col mx-2">
|
<div class="flex flex-col mx-2">
|
||||||
<div><b>Avaliable disk space: </b>{{ disk_available_space }}</div>
|
<div><b>Avaliable disk space: </b>{{ disk_available_space }}</div>
|
||||||
<div><b>Disk usage: </b> {{ disk_binding_models_usage }} / {{ disk_total_space }}</div>
|
<div><b>Disk usage: </b> {{ disk_binding_models_usage }} / {{ disk_total_space }}
|
||||||
|
({{ disk_percent_usage }}%)</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-2 ">
|
<div class="p-2 ">
|
||||||
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
|
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
|
||||||
@ -240,7 +414,7 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
</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">
|
<label class="flex items-center gap-1 ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||||
<!-- GPU IMAGE -->
|
<!-- GPU IMAGE -->
|
||||||
<svg aria-hidden="true" class="w-10 h-10 -my-5 fill-secondary" viewBox="0 -3 82 66" fill="none"
|
<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:
|
GPU usage:
|
||||||
</label>
|
</label>
|
||||||
<div class="flex flex-col mx-2">
|
<div class="flex flex-col mx-2">
|
||||||
<div><b>Avaliable vram: </b>{{ vram_available_space }}</div>
|
<div><b>Model: </b>{{ item.gpu_model }}</div>
|
||||||
<div><b>GPU usage: </b> {{ vram_usage }} / {{ vram_total_space }}</div>
|
<div><b>Avaliable vram: </b>{{ item.available_space }}</div>
|
||||||
|
<div><b>GPU usage: </b> {{ item.used_vram }} / {{ item.total_vram }} ({{ item.percentage
|
||||||
|
}}%)</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-2 ">
|
<div class="p-2 ">
|
||||||
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
|
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
|
||||||
<div class="bg-blue-600 h-2.5 rounded-full" :style="'width: ' + vram_percent_usage + '%;'">
|
<div class="bg-blue-600 h-2.5 rounded-full" :style="'width: ' + item.percentage + '%;'">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -580,7 +756,7 @@
|
|||||||
<div :class="{ 'hidden': mzdc_collapsed }" class="flex flex-col mb-2 px-3 pb-0">
|
<div :class="{ 'hidden': mzdc_collapsed }" class="flex flex-col mb-2 px-3 pb-0">
|
||||||
|
|
||||||
<div class="mb-2">
|
<div class="mb-2">
|
||||||
|
<!-- HIDDEN UNTIL ITS FIXED
|
||||||
<div class="p-2 " v-if="!modelDownlaodInProgress">
|
<div class="p-2 " v-if="!modelDownlaodInProgress">
|
||||||
|
|
||||||
<form>
|
<form>
|
||||||
@ -600,14 +776,14 @@
|
|||||||
|
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
<div class="p-2 ">
|
<div class="p-2 ">
|
||||||
|
|
||||||
<div v-if="!modelDownlaodInProgress">
|
<div v-if="!modelDownlaodInProgress">
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label
|
<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Download
|
||||||
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Download from web:</label>
|
from web:</label>
|
||||||
<input type="text" v-model="addModel.url"
|
<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"
|
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>
|
placeholder="Enter URL ..." required>
|
||||||
@ -832,7 +1008,8 @@
|
|||||||
|
|
||||||
<div v-if="personalitiesFiltered.length > 0" class="mb-2">
|
<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">
|
<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>
|
</label>
|
||||||
<div class="overflow-y-auto no-scrollbar p-2 pb-0 grid lg:grid-cols-3 md:grid-cols-2 gap-4"
|
<div class="overflow-y-auto no-scrollbar p-2 pb-0 grid lg:grid-cols-3 md:grid-cols-2 gap-4"
|
||||||
@ -1242,10 +1419,62 @@ export default {
|
|||||||
this.isLoading = false
|
this.isLoading = false
|
||||||
this.diskUsage = await this.api_get_req("disk_usage")
|
this.diskUsage = await this.api_get_req("disk_usage")
|
||||||
this.ramUsage = await this.api_get_req("ram_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.getMountedPersonalities()
|
||||||
this.isMounted = true
|
this.isMounted = true
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
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++) {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
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: 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
|
||||||
|
}
|
||||||
|
//console.log('gpu usage: ',result)
|
||||||
|
return result
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
async progressListener(response) {
|
async progressListener(response) {
|
||||||
// does not work Still freezes UI
|
// does not work Still freezes UI
|
||||||
@ -2496,20 +2725,20 @@ export default {
|
|||||||
ram_total_space() {
|
ram_total_space() {
|
||||||
return this.computedFileSize(this.ramUsage.total_space)
|
return this.computedFileSize(this.ramUsage.total_space)
|
||||||
},
|
},
|
||||||
vram_available_space() {
|
// vram_available_space() {
|
||||||
return this.computedFileSize(this.vramUsage.gpu_0_total_vram - this.vramUsage.gpu_0_used_vram)
|
// return this.computedFileSize(this.vramUsage.gpu_0_total_vram - this.vramUsage.gpu_0_used_vram)
|
||||||
},
|
// },
|
||||||
vram_usage() {
|
// vram_usage() {
|
||||||
return this.computedFileSize(this.vramUsage.gpu_0_used_vram)
|
// return this.computedFileSize(this.vramUsage.gpu_0_used_vram)
|
||||||
},
|
// },
|
||||||
vram_percent_usage() {
|
// vram_percent_usage() {
|
||||||
const percentage = (this.vramUsage.gpu_0_used_vram / this.vramUsage.gpu_0_total_vram) * 100
|
// const percentage = (this.vramUsage.gpu_0_used_vram / this.vramUsage.gpu_0_total_vram) * 100
|
||||||
return percentage.toFixed(2)
|
// return percentage.toFixed(2)
|
||||||
|
|
||||||
},
|
// },
|
||||||
vram_total_space() {
|
// vram_total_space() {
|
||||||
return this.computedFileSize(this.vramUsage.gpu_0_total_vram)
|
// return this.computedFileSize(this.vramUsage.gpu_0_total_vram)
|
||||||
},
|
// },
|
||||||
imgBinding() {
|
imgBinding() {
|
||||||
if (!this.isMounted) {
|
if (!this.isMounted) {
|
||||||
return
|
return
|
||||||
|
@ -9,7 +9,7 @@ export default ({ mode }) => {
|
|||||||
process.env = {...process.env, ...loadEnv(mode, process.cwd())};
|
process.env = {...process.env, ...loadEnv(mode, process.cwd())};
|
||||||
|
|
||||||
return defineConfig({
|
return defineConfig({
|
||||||
|
|
||||||
plugins: [
|
plugins: [
|
||||||
vue()
|
vue()
|
||||||
],
|
],
|
||||||
@ -26,6 +26,13 @@ export default ({ mode }) => {
|
|||||||
secure: process.env.VITE_GPT4ALL_API_SECURE,
|
secure: process.env.VITE_GPT4ALL_API_SECURE,
|
||||||
rewrite: (path) => path.replace(/^\/api/, ""),
|
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,
|
||||||
|
|
||||||
|
// },
|
||||||
|
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
})}
|
})}
|
||||||
|
Loading…
Reference in New Issue
Block a user