UI integration added

This commit is contained in:
Saifeddine ALOUI 2023-09-04 02:05:46 +02:00
parent bcc7854ed4
commit 0aaf997303
13 changed files with 131 additions and 132 deletions

View File

@ -1101,12 +1101,15 @@ class LoLLMsAPPI(LollmsApplication):
sender_type:SENDER_TYPES=SENDER_TYPES.SENDER_TYPES_AI
):
mtdt = metadata if metadata is None or type(metadata) == str else json.dumps(metadata, indent=4)
msg = self.connections[client_id]["current_discussion"].add_message(
message_type = message_type.value,
sender_type = sender_type.value,
sender = sender,
content = content,
metadata = json.dumps(metadata, indent=4) if metadata is not None and type(metadata) == list else metadata,
metadata = mtdt,
ui = ui,
rank = 0,
parent_message_id = self.connections[client_id]["current_discussion"].current_message.id,
binding = self.config["binding_name"],
@ -1121,7 +1124,7 @@ class LoLLMsAPPI(LollmsApplication):
"sender_type": SENDER_TYPES.SENDER_TYPES_AI.value,
"content": content,
"parameters": parameters,
"metadata": json.dumps(metadata, indent=4) if metadata is not None and type(metadata)== list else metadata,
"metadata": metadata,
"ui": ui,
"id": msg.id,
"parent_message_id": msg.parent_message_id,
@ -1147,13 +1150,12 @@ class LoLLMsAPPI(LollmsApplication):
"sender": self.personality.name,
'id':self.connections[client_id]["current_discussion"].current_message.id,
'content': chunk,# self.connections[client_id]["generated_text"],
'metadata': metadata,
'ui': ui,
'discussion_id':self.connections[client_id]["current_discussion"].discussion_id,
'message_type': msg_type.value if msg_type is not None else MSG_TYPE.MSG_TYPE_CHUNK.value if self.nb_received_tokens>1 else MSG_TYPE.MSG_TYPE_FULL.value,
'finished_generating_at': self.connections[client_id]["current_discussion"].current_message.finished_generating_at,
'parameters':parameters,
'metadata':mtdt
'metadata':metadata
}, room=client_id
)
self.socketio.sleep(0.01)
@ -1178,10 +1180,10 @@ class LoLLMsAPPI(LollmsApplication):
)
def process_chunk(
self,
chunk,
chunk:str,
message_type:MSG_TYPE,
parameters=None,
parameters:dict=None,
metadata:list=None,
client_id:int=0
):
@ -1215,8 +1217,13 @@ class LoLLMsAPPI(LollmsApplication):
self.new_message(
client_id,
self.personality.name,
chunk,
metadata = parameters["metadata"],
chunk if parameters["type"]!=MSG_TYPE.MSG_TYPE_UI.value else '',
metadata = [{
"title":chunk,
"content":parameters["metadata"]
}
] if parameters["type"]==MSG_TYPE.MSG_TYPE_JSON_INFOS.value else None,
ui= chunk if parameters["type"]==MSG_TYPE.MSG_TYPE_UI.value else None,
message_type= MSG_TYPE(parameters["type"]))
elif message_type == MSG_TYPE.MSG_TYPE_FINISHED_MESSAGE:

View File

@ -359,8 +359,8 @@ class Message:
if insert_into_db:
self.id = self.discussions_db.insert(
"INSERT INTO message (sender, message_type, sender_type, sender, content, metadata, rank, parent_message_id, binding, model, personality, created_at, finished_generating_at, discussion_id) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)",
(sender, message_type, sender_type, sender, content, metadata, rank, parent_message_id, binding, model, personality, created_at, finished_generating_at, discussion_id)
"INSERT INTO message (sender, message_type, sender_type, sender, content, metadata, ui, rank, parent_message_id, binding, model, personality, created_at, finished_generating_at, discussion_id) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)",
(sender, message_type, sender_type, sender, content, metadata, ui, rank, parent_message_id, binding, model, personality, created_at, finished_generating_at, discussion_id)
)
else:
self.id = id

4
app.py
View File

@ -879,6 +879,8 @@ class LoLLMsWebUI(LoLLMsAPPI):
self.config.enable_gpu=True
return jsonify({'status':res==0})
def ram_usage(self):
"""
Returns the RAM usage in bytes.
@ -931,7 +933,7 @@ class LoLLMsWebUI(LoLLMsAPPI):
"percent_usage":drive_disk_usage.percent,
"binding_disk_total_space":models_folder_disk_usage.total,
"binding_disk_available_space":drive_disk_usage.free,
"binding_disk_available_space":models_folder_disk_usage.free,
"binding_models_usage": models_folder_disk_usage.used,
"binding_models_percent_usage": models_folder_disk_usage.percent,
})

File diff suppressed because one or more lines are too long

8
web/dist/assets/index-a4ed7438.css vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

4
web/dist/index.html vendored
View File

@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LoLLMS WebUI - Welcome</title>
<script type="module" crossorigin src="/assets/index-d3bfd912.js"></script>
<link rel="stylesheet" href="/assets/index-828b7c81.css">
<script type="module" crossorigin src="/assets/index-c1e6772c.js"></script>
<link rel="stylesheet" href="/assets/index-a4ed7438.css">
</head>
<body>
<div id="app"></div>

View File

@ -1,8 +1,8 @@
<template>
<div class="flex flex-col h-screen font-sans bg-bg-light text-slate-950 dark:bg-bg-dark dark:text-slate-50">
<div class="flex flex-col h-screen font-sans bg-bg-light text-slate-950 dark:bg-bg-dark dark:text-slate-50 overflow-y-scroll w-full dark:bg-bg-dark scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary">
<TopBar />
<div class="flex overflow-hidden flex-grow">
<div class="flex overflow-hidden flex-grow ">
<!-- VIEW CONTAINER -->
<RouterView v-slot="{ Component }">
<KeepAlive>

View File

@ -1,6 +1,6 @@
<template>
<div>
<iframe ref="outputFrame" :srcdoc="code"></iframe>
<iframe ref="outputFrame" :srcdoc="code" @load="adjustDimensions" frameborder="0" scrolling="no"></iframe>
</div>
</template>
@ -9,6 +9,26 @@
props: {
code: String, // The HTML/CSS/JavaScript code as a prop
},
methods:{
adjustDimensions() {
// Get the iframe element
const iframe = this.$refs.outputFrame;
// Get the iframe's content window and document
const iframeWindow = iframe.contentWindow;
const iframeDocument = iframe.contentDocument || iframeWindow.document;
// Get the width and height of the content
const contentWidth = iframeDocument.body.scrollWidth;
const contentHeight = iframeDocument.body.scrollHeight;
// Set the width and height of the div and iframe to match the content
this.$el.style.width = contentWidth + 'px';
this.$el.style.height = contentHeight + 'px';
iframe.style.width = '100%';
iframe.style.height = '100%';
},
}
};
</script>

View File

@ -152,7 +152,7 @@
</div>
</div>
<DynamicUIRenderer v-if="message.ui!=null" :code="message.ui"></DynamicUIRenderer>
<DynamicUIRenderer v-if="message.ui!=null" class="w-full h-full" :code="message.ui"></DynamicUIRenderer>
</div>
@ -254,6 +254,7 @@ export default {
})
}, methods: {
onVoicesChanged() {
// This event will be triggered when the voices are loaded
this.voices = this.speechSynthesis.getVoices();

View File

@ -115,44 +115,6 @@
<div class="grow">
<!-- EMPTY SPACE FILLER -->
</div>
<!-- ADVANCED OPTIONS -->
<div class="flex-none gap-1">
<!-- <button v-if="!model.isInstalled" type="button" title="Not installed"
class="hover:text-red-600 duration-75 font-medium rounded-lg text-sm p-2 text-center inline-flex items-center "
@click.stop="">
<i data-feather="slash" class="w-5"></i>
<span class="sr-only">Not installed</span>
</button>
<button v-if="!model.isInstalled" type="button" title="Click to install model"
class="hover:text-secondary duration-75 active:scale-90 font-medium rounded-lg text-sm p-2 text-center inline-flex items-center "
@click.stop="toggleInstall">
<i data-feather="plus-square" class="w-5"></i>
<span class="sr-only">Install</span>
</button>
<button v-if="model.isInstalled"
class=" hover:text-red-600 duration-75 active:scale-90 font-medium rounded-lg text-sm p-2 text-center inline-flex items-center "
title="Delete file from disk" type="button" @click.stop="toggleInstall">
<i data-feather="trash" class="w-5"></i>
</button>
<button
class="hover:text-secondary duration-75 active:scale-90 font-medium rounded-lg text-sm p-2 text-center inline-flex items-center "
title="Copy model info to clipboard" @click.stop="toggleCopy()">
<i data-feather="clipboard" class="w-5"></i>
</button> -->
<!-- <button v-if="selected" type="button" title="Settings"
class="hover:text-secondary duration-75 active:scale-90 font-medium rounded-lg text-sm p-2 text-center inline-flex items-center "
@click.stop="toggleSettings">
<i data-feather="sliders" class="w-5"></i>
<span class="sr-only">Settings</span>
</button> -->
<!-- - NOT IMPLEMENTED -->
<!--
<button type="button" title="Help - Not implemented"
class="hover:text-secondary duration-75 active:scale-90 font-medium rounded-lg text-sm p-2 text-center inline-flex items-center " @click.stop="">
<i data-feather="help-circle" class="w-5"></i>
<span class="sr-only">Help</span>
</button> -->
</div>
<button v-if="model.isInstalled" type="button" title="Select"
@click="toggleSelected"
class="hover:text-secondary duration-75 active:scale-90 font-medium rounded-lg text-sm p-2 text-center inline-flex items-center " @click.stop="">

View File

@ -865,7 +865,8 @@ export default {
return true
},
new_message(msgObj) {
console.log('create bot', msgObj);
console.log("Making a new message")
console.log('New message', msgObj);
let responseMessage = {
sender: msgObj.sender,
@ -883,6 +884,8 @@ export default {
finished_generating_at: msgObj.finished_generating_at,
rank: 0,
ui: msgObj.ui,
steps : [],
parameters : msgObj.parameters,
metadata : msgObj.metadata
@ -1045,6 +1048,10 @@ export default {
console.log("JSON message")
console.log(msgObj.metadata)
messageItem.metadata = msgObj.metadata
} else if (msgObj.message_type == this.msgTypes.MSG_TYPE_JSON_UI) {
console.log("UI message")
console.log(msgObj.ui)
messageItem.ui = msgObj.ui
} else if (msgObj.message_type == this.msgTypes.MSG_TYPE_EXCEPTION) {
this.$refs.toast.showToast(msgObj.content, 5, false)
}

View File

@ -1,5 +1,5 @@
<template>
<div class="container overflow-y-scroll flex flex-col no-scrollbar shadow-lg p-10 pt-0 ">
<div class="container overflow-y-scroll flex flex-col shadow-lg p-10 pt-0 overflow-y-scroll w-full dark:bg-bg-dark scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary">
<!-- CONTROL PANEL -->
<div
class="sticky top-0 z-10 flex flex-row mb-2 p-3 gap-3 w-full rounded-b-lg bg-bg-light-tone dark:bg-bg-dark-tone shadow-lg">
@ -1199,7 +1199,7 @@
Search results: ({{ modelsFiltered.length }})
</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 p-2 pb-0 grid lg:grid-cols-3 md:grid-cols-2 gap-4 overflow-y-scroll w-full dark:bg-bg-dark scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary"
:class="mzl_collapsed ? '' : 'max-h-96'">
<TransitionGroup name="list">
<model-entry ref="modelZoo" v-for="(model, index) in show_only_installed_models?filter_installed(modelsFiltered):modelsFiltered"
@ -1224,7 +1224,7 @@
Models: ({{ models.length }})
</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 p-2 pb-0 grid lg:grid-cols-3 md:grid-cols-2 gap-4 overflow-y-scroll w-full dark:bg-bg-dark scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary"
:class="mzl_collapsed ? '' : 'max-h-96'">
<TransitionGroup name="list">
<model-entry ref="modelZoo" v-for="(model, index) in show_only_installed_models?filter_installed(models):models"