mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2025-01-29 15:44:12 +00:00
UI integration added
This commit is contained in:
parent
bcc7854ed4
commit
0aaf997303
@ -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:
|
||||
|
@ -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
4
app.py
@ -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,
|
||||
})
|
||||
|
8
web/dist/assets/index-828b7c81.css
vendored
8
web/dist/assets/index-828b7c81.css
vendored
File diff suppressed because one or more lines are too long
8
web/dist/assets/index-a4ed7438.css
vendored
Normal file
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
4
web/dist/index.html
vendored
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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();
|
||||
|
@ -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="">
|
||||
|
@ -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)
|
||||
}
|
||||
|
@ -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"
|
||||
|
Loading…
x
Reference in New Issue
Block a user