enhanced UI

This commit is contained in:
Saifeddine ALOUI 2024-04-07 22:08:29 +02:00
parent bb99b59e71
commit 83c23b864d
8 changed files with 222 additions and 215 deletions

@ -1 +1 @@
Subproject commit 2f0b299817ba5b24acdd1cbc38341a559a3c8311
Subproject commit b47a8e326d2743f26fbe00b28829abb6e0f21821

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-41d86fe5.js"></script>
<link rel="stylesheet" href="/assets/index-b6bb82cc.css">
<script type="module" crossorigin src="/assets/index-f29b01fa.js"></script>
<link rel="stylesheet" href="/assets/index-0ab600e3.css">
</head>
<body>
<div id="app"></div>

View File

@ -402,7 +402,11 @@ export default {
showfilesList: true,
showPersonalities: false,
personalities_ready: false,
models_menu_icon:""
models_menu_icon:"",
posts_headers : {
'accept': 'application/json',
'Content-Type': 'application/json'
}
}
},
computed: {
@ -736,7 +740,7 @@ export default {
axios.get('/download_files')
},
remove_file(file){
axios.get('/remove_file',{name: file}).then(res=>{
axios.get('/remove_file',{client_id:this.$store.state.client_id, name: file}).then(res=>{
console.log(res)
})
},
@ -878,8 +882,13 @@ export default {
},
removeItem(file) {
console.log(file)
axios.post('/remove_file',{file}).then(()=>{
console.log("Réemoving ",file.name)
axios.post('/remove_file',{
client_id:this.$store.state.client_id,
name:file.name
},
{headers: this.posts_headers}
).then(()=>{
this.filesList = this.filesList.filter((item) => item != file)
})

View File

@ -1,5 +1,5 @@
<template>
<div class="break-all m-4">
<div class="break-all container w-full" >
<div ref="mdRender" class="markdown-content">
<div v-for="(item, index) in markdownItems" :key="index">
<code-block

View File

@ -167,10 +167,10 @@
</div>
</div>
<div class="overflow-x-auto w-full ">
<div class="overflow-x-auto w-full">
<!-- MESSAGE CONTENT -->
<details v-show="message != undefined && message.steps != undefined && message.steps.length>0" class="flex w-full cursor-pointer rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900 mb-3.5 max-w-full svelte-1escu1z">
<summary class="grid min-w-72 select-none grid-cols-[40px,1fr] items-center gap-2.5 p-2 svelte-1escu1z">
<details v-show="message != undefined && message.steps != undefined && message.steps.length>0" class="flex w-full cursor-pointer rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900 mb-3.5 max-w-full">
<summary class="grid min-w-72 select-none grid-cols-[40px,1fr] items-center gap-2.5 p-2">
<div class="relative grid aspect-square place-content-center overflow-hidden rounded-lg bg-gray-300 dark:bg-gray-200">
<img v-if="message.status_message!='Done' & message.status_message!= 'Generation canceled'" :src="loading_svg" class="absolute inset-0 text-gray-100 transition-opacity dark:text-gray-800 opacity-100">
<img v-if="message.status_message== 'Generation canceled'" :src="failed_svg" class="absolute inset-0 text-gray-100 transition-opacity dark:text-gray-800 opacity-100">
@ -203,18 +203,15 @@
<textarea v-if="message.open" ref="mdTextarea" @keydown.tab.prevent="insertTab"
class="block min-h-[900px] p-2.5 w-full text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 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 overflow-y-scroll flex flex-col shadow-lg p-10 pt-0 overflow-y-scroll 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"
:rows="4"
:style="{ minHeight: mdRenderHeight + `px` }" placeholder="Enter message here..."
v-model="message.content">
placeholder="Enter message here..."
v-model="message.content">
</textarea>
</div>
<!--
<div v-if="message.metadata !== null">
<div v-for="(metadata, index) in message.metadata.filter(metadata => metadata!=null && metadata.hasOwnProperty('title') && metadata.hasOwnProperty('content') )" :key="'json-' + message.id + '-' + index" class="json font-bold">
<div v-for="(metadata, index) in (message.metadata?.filter(metadata => metadata!=null && metadata.hasOwnProperty('title') && metadata.hasOwnProperty('content')) || [])" :key="'json-' + message.id + '-' + index" class="json font-bold">
<JsonViewer :jsonFormText="metadata.title" :jsonData="metadata.content" />
</div>
</div>
-->
<DynamicUIRenderer v-if="message.ui !== null && message.ui !== undefined && message.ui !== ''" class="w-full h-full" :code="message.ui"></DynamicUIRenderer>
<audio controls autoplay v-if="audio_url!=null" :key="audio_url">
@ -340,16 +337,17 @@ export default {
}, mounted() {
// Check if speech synthesis is supported by the browser
if ('speechSynthesis' in window) {
this.speechSynthesis = window.speechSynthesis;
this.speechSynthesis = window.speechSynthesis;
// Load the available voices
this.voices = this.speechSynthesis.getVoices();
// Load the available voices
this.voices = this.speechSynthesis.getVoices();
// Make sure the voices are loaded before starting speech synthesis
if (this.voices.length === 0) {
this.speechSynthesis.addEventListener('voiceschanged', this.onVoicesChanged);
} else {
}
// Make sure the voices are loaded before starting speech synthesis
if (this.voices.length === 0) {
this.speechSynthesis.addEventListener('voiceschanged', this.onVoicesChanged);
} else {
console.log("No voices found")
}
} else {
console.error('Speech synthesis is not supported in this browser.');
}

@ -1 +1 @@
Subproject commit b26a50b295ef2cc618355a61b12d476ebd580d01
Subproject commit 5a1f74d76771a2ab666f0a12624829b97d1568e0