ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2025-04-11 04:39:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixed ui content

Browse Source
This commit is contained in:
Saifeddine ALOUI 2023-09-07 02:06:57 +02:00
parent 720d69efc6
commit cb5b569558
4 changed files with 86 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
web/dist/assets/index-35895651.js → web/dist/assets/index-66aeb866.js vendored
View File

File diff suppressed because one or more lines are too long

2
web/dist/index.html vendored
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LoLLMS WebUI - Welcome</title>
<script type="module" crossorigin src="/assets/index-35895651.js"></script>
<script type="module" crossorigin src="/assets/index-66aeb866.js"></script>
<link rel="stylesheet" href="/assets/index-ae0c2e02.css">
</head>
<body>

81
web/src/components/DynamicUIRenderer.vue
View File

@ -1,38 +1,53 @@
<template>
<div>
<iframe ref="outputFrame" v-bin :srcdoc="code" @load="adjustDimensions" frameborder="0" scrolling="no"></iframe>
</div>
</template>
<script>
export default {
props: {
code: String, // The HTML/CSS/JavaScript code as a prop
<div v-html="evaluatedCode">
</div>
</template>
<script>
export default {
props: {
code: String, // The HTML/CSS/JavaScript code as a prop
},
data() {
return {
evaluatedCode: '', // Store the evaluated code
};
},
watch: {
code: {
handler(newCode) {
// Extract and evaluate script tags from the new code
this.evaluateScriptTags(newCode);
},
immediate: true, // Trigger the handler immediately when the component is mounted
},
methods:{
adjustDimensions() {
// Get the iframe element
const iframe = this.$refs.outputFrame;
},
methods: {
evaluateScriptTags(code) {
// Create a temporary div element to execute scripts
const tempDiv = document.createElement('div');
tempDiv.innerHTML = code;
// Get the iframe's content window and document
const iframeWindow = iframe.contentWindow;
const iframeDocument = iframe.contentDocument || iframeWindow.document;
// Get all script elements within the div
const scriptElements = tempDiv.querySelectorAll('script');
// Get the width and height of the content
const contentWidth = iframeDocument.body.scrollWidth;
const contentHeight = iframeDocument.body.scrollHeight;
// Loop through script elements and evaluate them
scriptElements.forEach((script) => {
const newScript = document.createElement('script');
newScript.textContent = script.textContent;
document.body.appendChild(newScript);
document.body.removeChild(newScript);
});
// 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>
<style>
/* Add any styling for the component here */
</style>
// Set the evaluated code to the modified HTML
this.evaluatedCode = tempDiv.innerHTML;
},
},
};
</script>
<style>
.cursor-pointer {
cursor: pointer;
}
</style>

2
web/src/components/Message.vue
View File

@ -152,7 +152,7 @@
</div>
</div>
<DynamicUIRenderer v-if="message.ui !== null" class="w-full h-full" :code="message_ui"></DynamicUIRenderer>
<DynamicUIRenderer v-if="message.ui !== null && message.ui !== ''" class="w-full h-full" :code="message_ui"></DynamicUIRenderer>
</div>