This commit is contained in:
Saifeddine ALOUI 2024-07-07 19:14:18 +02:00
parent 2c39a0cfc5
commit 6900bf2a47
10 changed files with 253 additions and 223 deletions

@ -1 +1 @@
Subproject commit 328b960a0de2097e13654ac752253e9541521ddd Subproject commit 21245434942a8342a1e27fac2474925e8afd816a

View File

@ -891,6 +891,8 @@ class LOLLMSWebUI(LOLLMSElfServer):
client.discussion.current_message.finished_generating_at=datetime.now().strftime('%Y-%m-%d %H:%M:%S') client.discussion.current_message.finished_generating_at=datetime.now().strftime('%Y-%m-%d %H:%M:%S')
client.discussion.current_message.nb_tokens = self.nb_received_tokens client.discussion.current_message.nb_tokens = self.nb_received_tokens
mtdt = json.dumps(metadata, indent=4) if metadata is not None and type(metadata)== list else metadata mtdt = json.dumps(metadata, indent=4) if metadata is not None and type(metadata)== list else metadata
if self.nb_received_tokens==1: if self.nb_received_tokens==1:
client.discussion.current_message.started_generating_at=datetime.now().strftime('%Y-%m-%d %H:%M:%S') client.discussion.current_message.started_generating_at=datetime.now().strftime('%Y-%m-%d %H:%M:%S')
@ -899,7 +901,7 @@ class LOLLMSWebUI(LOLLMSElfServer):
"sender": self.personality.name, "sender": self.personality.name,
'id':client.discussion.current_message.id, 'id':client.discussion.current_message.id,
'content': "✍ warming up ...", 'content': "✍ warming up ...",
'ui': ui, 'ui': client.discussion.current_message.ui if ui is None else ui,
'discussion_id':client.discussion.discussion_id, 'discussion_id':client.discussion.discussion_id,
'message_type': MSG_TYPE.MSG_TYPE_STEP_END.value, 'message_type': MSG_TYPE.MSG_TYPE_STEP_END.value,
'created_at':client.discussion.current_message.created_at, 'created_at':client.discussion.current_message.created_at,
@ -917,7 +919,7 @@ class LOLLMSWebUI(LOLLMSElfServer):
"sender": self.personality.name, "sender": self.personality.name,
'id':client.discussion.current_message.id, 'id':client.discussion.current_message.id,
'content': chunk, 'content': chunk,
'ui': ui, 'ui': client.discussion.current_message.ui if ui is None else ui,
'discussion_id':client.discussion.discussion_id, 'discussion_id':client.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, '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,
'created_at':client.discussion.current_message.created_at, 'created_at':client.discussion.current_message.created_at,

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"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LoLLMS WebUI - Welcome</title> <title>LoLLMS WebUI - Welcome</title>
<script type="module" crossorigin src="/assets/index-3f1ec744.js"></script> <script type="module" crossorigin src="/assets/index-332e0297.js"></script>
<link rel="stylesheet" href="/assets/index-9ddd7a4e.css"> <link rel="stylesheet" href="/assets/index-49793894.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

View File

@ -1,38 +1,43 @@
<template> <template>
<div :id="`ui_${componentKey}`" class="w-full h-auto overflow-y-auto 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" v-html="evaluatedCode" :key="componentKey"> <div class="w-full h-auto overflow-y-auto 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"
ref="ui">
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
code: { ui: {
type: String, type: String,
required: true, required: true,
default: "", default: "",
}, },
}, },
data() {
return {
evaluatedCode: '', // Store the evaluated code
componentKey: 0,
};
},
watch: { watch: {
code: { ui(newVal, oldVal) {
handler(newCode) { console.log(`ui changed from ${oldVal} to ${newVal}`);
console.log("Code changed"); // Add your custom logic here
this.evaluateScriptTags(newCode); this.$nextTick(() => {
this.componentKey++; this.evaluateScriptTags();
}, });
immediate: true, // Trigger the handler immediately when the component is mounted
}, },
}, },
data() {
return {
};
},
mounted(){
this.$nextTick(() => {
this.evaluateScriptTags();
});
},
methods: { methods: {
evaluateScriptTags(code) { evaluateScriptTags() {
console.log("evaluateScriptTags")
// Create a temporary div element to execute scripts // Create a temporary div element to execute scripts
const tempDiv = document.createElement('div'); const tempDiv = document.createElement('div');
tempDiv.innerHTML = code; tempDiv.innerHTML = this.ui;
// Get all script elements within the div // Get all script elements within the div
const scriptElements = tempDiv.querySelectorAll('script'); const scriptElements = tempDiv.querySelectorAll('script');
@ -45,13 +50,10 @@ export default {
document.body.removeChild(newScript); document.body.removeChild(newScript);
}); });
// Set the evaluated code to the modified HTML // Set the evaluated ui to the modified HTML
this.evaluatedCode = tempDiv.innerHTML; this.$refs.ui.innerHTML = tempDiv.innerHTML;
console.log("this.$refs.ui.innerHTML")
// Force a re-render by updating the component key console.log(this.$refs.ui.innerHTML)
this.$nextTick(() => {
this.componentKey++;
});
}, },
}, },
}; };

View File

@ -213,8 +213,10 @@
<JsonViewer :jsonFormText="metadata.title" :jsonData="metadata.content" /> <JsonViewer :jsonFormText="metadata.title" :jsonData="metadata.content" />
</div> </div>
</div> </div>
<div v-if="message.ui !== null">
<DynamicUIRenderer class="w-full" :key="'ui-' + ui_componentKey" :code="message.ui"></DynamicUIRenderer> <DynamicUIRenderer ref="ui" class="w-full" :ui="message.ui"></DynamicUIRenderer>
</div>
<audio controls v-if="audio_url!=null" :key="audio_url"> <audio controls v-if="audio_url!=null" :key="audio_url">
<source :src="audio_url" type="audio/wav" ref="audio_player" > <source :src="audio_url" type="audio/wav" ref="audio_player" >
Your browser does not support the audio element. Your browser does not support the audio element.

View File

@ -570,15 +570,11 @@ export default {
}, },
methods: { methods: {
extractHtml() { extractHtml() {
console.log("Extracting html")
if (this.discussionArr.length > 0) { if (this.discussionArr.length > 0) {
const lastMessage = this.discussionArr[this.discussionArr.length - 1].content; const lastMessage = this.discussionArr[this.discussionArr.length - 1].content;
const startTag = '```html'; const startTag = '```html';
const endTag = '```'; const endTag = '```';
console.log("lastMessage")
console.log(lastMessage)
let startIndex = lastMessage.indexOf(startTag); let startIndex = lastMessage.indexOf(startTag);
console.log(startIndex)
if (startIndex === -1) { if (startIndex === -1) {
this.lastMessageHtml = this.defaultMessageHtml; this.lastMessageHtml = this.defaultMessageHtml;
this.renderIsolatedContent(); this.renderIsolatedContent();
@ -587,7 +583,6 @@ export default {
startIndex += startTag.length; startIndex += startTag.length;
let endIndex = lastMessage.indexOf(endTag, startIndex); let endIndex = lastMessage.indexOf(endTag, startIndex);
console.log(endIndex)
if (endIndex === -1) { if (endIndex === -1) {
this.lastMessageHtml = lastMessage.slice(startIndex).trim(); this.lastMessageHtml = lastMessage.slice(startIndex).trim();
@ -597,8 +592,6 @@ export default {
} else { } else {
this.lastMessageHtml = this.defaultMessageHtml; this.lastMessageHtml = this.defaultMessageHtml;
} }
console.log("this.lastMessageHtml")
console.log(this.lastMessageHtml)
this.renderIsolatedContent() this.renderIsolatedContent()
}, },
renderIsolatedContent() { renderIsolatedContent() {
@ -606,8 +599,6 @@ export default {
iframe.style.border = 'none'; iframe.style.border = 'none';
iframe.style.width = '100%'; iframe.style.width = '100%';
iframe.style.height = '100%'; // Adjust as needed iframe.style.height = '100%'; // Adjust as needed
console.log("this.$refs.isolatedContent")
console.log(this.$refs.isolatedContent)
if (this.$refs.isolatedContent){ if (this.$refs.isolatedContent){
this.$refs.isolatedContent.innerHTML = ''; this.$refs.isolatedContent.innerHTML = '';
this.$refs.isolatedContent.appendChild(iframe); this.$refs.isolatedContent.appendChild(iframe);
@ -1556,8 +1547,7 @@ export default {
messageItem.metadata = msgObj.metadata messageItem.metadata = msgObj.metadata
} else if (msgObj.message_type == this.msgTypes.MSG_TYPE_UI) { } else if (msgObj.message_type == this.msgTypes.MSG_TYPE_UI) {
console.log("UI message") console.log("UI message")
messageItem.ui = msgObj.ui messageItem.ui = msgObj.ui
console.log(messageItem.ui)
} else if (msgObj.message_type == this.msgTypes.MSG_TYPE_EXCEPTION) { } else if (msgObj.message_type == this.msgTypes.MSG_TYPE_EXCEPTION) {
this.$store.state.toast.showToast(msgObj.content, 5, false) this.$store.state.toast.showToast(msgObj.content, 5, false)
} }

View File

@ -2828,7 +2828,27 @@
<i data-feather="help-circle" class="w-5 h-5 "></i> <i data-feather="help-circle" class="w-5 h-5 "></i>
</div> </div>
</td> </td>
</tr> </tr>
<tr>
<td style="min-width: 200px;">
<label for="comfyui_model" class="text-sm font-bold" style="margin-right: 1rem;">Available models (only if local):</label>
</td>
<td>
<div class="flex flex-row">
<select
id="comfyui_model"
required
v-model="configFile.comfyui_model"
@change="settingsChanged=true"
class="w-full mt-1 px-2 py-1 border border-gray-300 rounded dark:bg-gray-600"
>
<option v-for="(comfyui_model, index) in comfyui_models" :key="comfyui_model" :value="comfyui_model">
{{ comfyui_model }}
</option>
</select>
</div>
</td>
</tr>
<tr> <tr>
<td style="min-width: 200px;"> <td style="min-width: 200px;">
<label for="comfyui_model" class="text-sm font-bold" style="margin-right: 1rem;">Enable comfyui model:</label> <label for="comfyui_model" class="text-sm font-bold" style="margin-right: 1rem;">Enable comfyui model:</label>
@ -4102,6 +4122,8 @@ export default {
{ label: 'Sort by Maker', value: 3 }, { label: 'Sort by Maker', value: 3 },
{ label: 'Sort by Quantizer', value: 4 }, { label: 'Sort by Quantizer', value: 4 },
], ],
// Comfyui models
comfyui_models:[],
show_only_installed_models:false, show_only_installed_models:false,
// Local model reference path // Local model reference path
reference_path:"", reference_path:"",
@ -6144,6 +6166,18 @@ export default {
console.log("Couldin't list output devices") console.log("Couldin't list output devices")
} }
try{
console.log("Getting comfyui models")
const res = await axios.get("/list_comfyui_models")
console.log("res is ",res)
if(res.data.status){
this.comfyui_models= res.data.models
}
}
catch{
console.log("Couldin't list output devices")
}
}, },
activated() { activated() {

@ -1 +1 @@
Subproject commit 784d8463363a608844c28d872b0a56d3fb1743f7 Subproject commit d9a98a2b7d8fd3ce473fc5a68383eb7b13e3b598