ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2024-12-24 22:46:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'dev'

Browse Source
This commit is contained in:
Saifeddine ALOUI 2023-07-05 01:42:50 +02:00
commit dba9e08005
10 changed files with 435 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -195,3 +195,5 @@ tests/end_point_tests/*_local.http
personalities_zoo personalities_zoo
bindings_zoo bindings_zoo
user_data user_data
src/
src/taming-transformers

77
api/__init__.py
View File

@ -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,

40
app.py
View File

@ -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,6 +1290,13 @@ 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):
if self.personality is None:
return jsonify({
"personality_language":"",
"personality_category":"",
"personality_name":""
})
else:
return jsonify({ return jsonify({
"personality_language":self.personality_language, "personality_language":self.personality_language,
"personality_category":self.personality_category, "personality_category":self.personality_category,

2
requirements.txt
View File

@ -7,7 +7,7 @@ pyyaml
markdown markdown
gevent gevent
gevent-websocket gevent-websocket
lollms==2.1.14 lollms
langchain langchain
requests requests
eventlet eventlet

2
web/src/App.vue
View File

@ -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 />

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

@ -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:&nbsp;</b><br> <b>Description:&nbsp;</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>

8
web/src/services/websocket.js
View File

@ -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;

3
web/src/views/DiscussionsView.vue
View File

@ -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'

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

@ -75,8 +75,16 @@
<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 ">
<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 --> <!-- GPU IMAGE -->
<svg aria-hidden="true" class="w-10 h-10 fill-secondary" viewBox="0 -3 82 66" fill="none" <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"> xmlns="http://www.w3.org/2000/svg">
<path <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" 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"
@ -104,37 +112,47 @@
<path d="m 54.568046,22.699178 a 8.1531184,8.1531184 0 0 0 8.154326,8.24362" <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" style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1130" /> id="path1130" />
<path d="M 73.935201,28.000658 A 8.1531184,8.1531184 0 0 0 62.721525,30.944293" <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" style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1132" /> id="path1132" />
<path d="m 70.873258,39.186418 a 8.1531184,8.1531184 0 0 0 -8.152606,-8.24362" <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="path1134" /> id="path1134" />
<path d="M 59.657782,42.124981 A 8.1531184,8.1531184 0 0 0 62.719435,30.940687" <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="path1136" /> id="path1136" />
<path d="M 51.50515,33.881361 A 8.1531184,8.1531184 0 0 0 62.720652,30.942798" <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" style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1138" /> id="path1138" />
<path d="M 65.783521,19.760615 A 8.1531184,8.1531184 0 0 0 62.721869,30.944909" <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" style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1140" /> id="path1140" />
<path d="m 62.720652,22.789678 a 8.1531184,8.1531184 0 0 0 -3.06287,-3.029063" <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" style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1142" /> id="path1142" />
<path d="m 69.782328,26.864746 a 8.1531184,8.1531184 0 0 0 1.09093,-4.165568" <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="path1144" /> id="path1144" />
<path d="m 69.781455,35.019358 a 8.1531184,8.1531184 0 0 0 4.154699,-1.137997" <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" style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1146" /> id="path1146" />
<path d="m 62.722372,39.09293 a 8.1531184,8.1531184 0 0 0 3.064668,3.031085" <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="path1148" /> id="path1148" />
<path d="m 55.659849,35.019358 a 8.1531184,8.1531184 0 0 0 -1.091803,4.16706" <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" style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1150" /> id="path1150" />
<path d="M 55.659849,26.866238 A 8.1531184,8.1531184 0 0 0 51.50515,28.004235" <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="path1152" /> id="path1152" />
<path d="m 22.744016,47.889121 h 38.934945 v 4.42369 H 22.744016 Z" <path d="m 22.744016,47.889121 h 38.934945 v 4.42369 H 22.744016 Z"
@ -150,48 +168,202 @@
<path d="m 20.458317,22.699178 a 8.1531184,8.1531184 0 0 0 8.154342,8.24362" <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="path1160" /> id="path1160" />
<path d="m 35.672615,26.864746 a 8.1531184,8.1531184 0 0 0 1.09093,-4.165568" <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" style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1162" /> id="path1162" />
<path d="M 39.825489,28.000658 A 8.1531184,8.1531184 0 0 0 28.611786,30.944293" <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="path1164" /> id="path1164" />
<path d="m 28.612659,39.09293 a 8.1531184,8.1531184 0 0 0 3.064669,3.031085" <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="path1166" /> id="path1166" />
<path d="m 36.763545,39.186418 a 8.1531184,8.1531184 0 0 0 -8.152606,-8.24362" <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="path1168" /> id="path1168" />
<path d="m 21.550126,35.019358 a 8.1531184,8.1531184 0 0 0 -1.091809,4.16706" <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" style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1170" /> id="path1170" />
<path d="M 25.54807,42.124981 A 8.1531184,8.1531184 0 0 0 28.609722,30.940687" <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" style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1172" /> id="path1172" />
<path d="m 21.550126,26.866238 a 8.1531184,8.1531184 0 0 0 -4.154684,1.137997" <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" style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1174" /> id="path1174" />
<path d="M 17.395442,33.881361 A 8.1531184,8.1531184 0 0 0 28.610939,30.942798" <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" style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1176" /> id="path1176" />
<path d="M 28.610939,22.789678 A 8.1531184,8.1531184 0 0 0 25.54807,19.760615" <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="path1178" /> id="path1178" />
<path d="M 31.673809,19.760615 A 8.1531184,8.1531184 0 0 0 28.612156,30.944909" <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="path1180" /> id="path1180" />
<path d="m 35.671742,35.019358 a 8.1531184,8.1531184 0 0 0 4.154673,-1.137997" <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" style="fill:none;stroke:currentColor;stroke-width:2.5;stroke-opacity:1"
id="path1182" /> id="path1182" />
</svg> </svg>
<h3 class="font-bold font-large text-lg"> <h3 class="font-bold font-large text-lg">
<div>{{ vram_usage }} / {{ vram_total_space }} ({{ vram_percent_usage }}%)</div> <div>{{ item.used_vram }} / {{ item.total_vram }} ({{ item.percentage }}%)
</div>
</h3> </h3>
<i data-feather="cpu" class="w-5 h-5 mx-1 flex-shrink-0"></i> </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:&nbsp;</b>{{ ram_available_space }}</div> <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>
<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:&nbsp;</b>{{ disk_available_space }}</div> <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>
<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:&nbsp;</b>{{ vram_available_space }}</div> <div><b>Model:&nbsp;</b>{{ item.gpu_model }}</div>
<div><b>GPU usage:&nbsp;</b> {{ vram_usage }} / {{ vram_total_space }}</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>
<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

7
web/vite.config.mjs
View File

@ -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,
// },
}, },
} }
})} })}