This commit is contained in:
Saifeddine ALOUI 2024-04-21 20:48:05 +02:00
parent 73a2b74fe4
commit ff7daabc91
11 changed files with 349 additions and 233 deletions

View File

@ -72,7 +72,7 @@ def terminate_thread(thread):
else:
ASCIIColors.yellow("Canceled successfully")# The current version of the webui
lollms_webui_version="9.5"
lollms_webui_version="9.6"

View File

@ -64,5 +64,22 @@ weird_palette_str = """
--color-bg-light-discussion: #f4c2c2;
--color-bg-light-discussion-odd: #fae7b5;
"""
weird_palette_str = """
--color-primary: #0e8ef0;
--color-primary-light: #3dabff;
--color-secondary: #0fd974;
--color-accent: #f0700e;
--color-bg-dark: #132e59;
--color-bg-dark-tone: #25477d;
--color-bg-dark-tone-panel: #4367a3;
--color-bg-dark-code-block: #2254a7;
--color-bg-light: #e2edff;
--color-bg-light-tone: #b9d2f7;
--color-bg-light-code-block: #cad7ed;
--color-bg-light-tone-panel: #8fb5ef;
--color-bg-dark-discussion: #435E8A;
--color-bg-dark-discussion-odd: #284471;
--color-bg-light-discussion: #c5d8f8;
--color-bg-light-discussion-odd: #d6e7ff;
"""
parse_and_visualize_weird_palette(weird_palette_str)

8
web/dist/assets/index-4c43917d.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

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-f743d033.js"></script>
<link rel="stylesheet" href="/assets/index-c40831c0.css">
<script type="module" crossorigin src="/assets/index-fcb10c0e.js"></script>
<link rel="stylesheet" href="/assets/index-4c43917d.css">
</head>
<body>
<div id="app"></div>

View File

@ -84,16 +84,17 @@ ol {
--color-primary-light: #3dabff;
--color-secondary: #0fd974;
--color-accent: #f0700e;
--color-bg-dark: #132e59;
--color-bg-dark-tone: #25477d;
--color-bg-dark-tone-panel: #4367a3;
--color-bg-dark-code-block: #2254a7;
--color-bg-light-panel: #7cb5ec;
--color-bg-light: #e2edff;
--color-bg-light-tone: #b9d2f7;
--color-bg-light-code-block: #cad7ed;
--color-bg-light-tone-panel: #8fb5ef;
--color-bg-dark-discussion: #435E8A;
--color-bg-dark-discussion-odd: #284471;
--color-bg-light-discussion: #c5d8f8;
--color-bg-light-discussion-odd: #d6e7ff;
--color-bg-dark: #132e59;
--color-bg-dark-tone: #25477d;
--color-bg-dark-tone-panel: #4367a3;
--color-bg-dark-code-block: #2254a7;
--color-bg-dark-discussion: #435E8A;
--color-bg-dark-discussion-odd: #284471;
}

View File

@ -2,16 +2,45 @@
<div v-if="$store.state.ready" class="container flex flex-col sm:flex-row items-center">
<div class="w-full">
<div class="flex flex-row font-medium nav-ul">
<RouterLink :to="{ name: 'discussions' }" class="link-item dark:link-item-dark bg-light hover:bg-bg-light-tone dark:bg-bg-dark-tone hover:dark:bg-bg-light-tone">
<RouterLink
:to="{ name: 'discussions' }"
class="link-item dark:link-item-dark bg-bg-light-tone dark:bg-bg-dark-tone hover:dark:bg-bg-light-tone"
:class="{
'text-green-200 dark:text-green-100 font-bold bg-bg-light-panel': isRouteActive('discussions'),
'bounce-in': isRouteActive('discussions')
}">
Discussions
</RouterLink>
<RouterLink :to="{ name: 'playground' }" class="link-item dark:link-item-dark bg-light hover:bg-bg-light-tone dark:bg-bg-dark-tone hover:dark:bg-bg-light-tone">
<RouterLink
:to="{ name: 'playground' }"
class="link-item dark:link-item-dark bg-bg-light-tone dark:bg-bg-dark-tone hover:dark:bg-bg-light-tone"
:class="{
'text-green-200 dark:text-green-100 font-bold bg-bg-light-panel': isRouteActive('playground'),
'bounce-in': isRouteActive('playground')
}"
>
Playground
</RouterLink>
<RouterLink v-if="$store.state.config.enable_comfyui_service" :to="{ name: 'ComfyUI' }" class="link-item dark:link-item-dark bg-light hover:bg-bg-light-tone dark:bg-bg-dark-tone hover:dark:bg-bg-light-tone">
<RouterLink
v-if="$store.state.config.enable_comfyui_service"
:to="{ name: 'ComfyUI' }"
class="link-item dark:link-item-dark bg-bg-light-tone dark:bg-bg-dark-tone hover:dark:bg-bg-light-tone"
:class="{
'text-green-200 dark:text-green-100 font-bold bg-bg-light-panel': isRouteActive('ComfyUI'),
'bounce-in': isRouteActive('ComfyUI')
}"
>
ComfyUI
</RouterLink>
<RouterLink v-if="$store.state.config.enable_voice_service" :to="{ name: 'interactive' }" class="link-item dark:link-item-dark bg-light hover:bg-bg-light-tone dark:bg-bg-dark-tone hover:dark:bg-bg-light-tone">
<RouterLink
v-if="$store.state.config.enable_voice_service"
:to="{ name: 'interactive' }"
class="link-item dark:link-item-dark bg-bg-light-tone dark:bg-bg-dark-tone hover:dark:bg-bg-light-tone"
:class="{
'text-green-200 dark:text-green-100 font-bold bg-bg-light-panel': isRouteActive('interactive'),
'bounce-in': isRouteActive('interactive')
}"
>
interactive
</RouterLink>
<!--
@ -29,10 +58,24 @@
</RouterLink>
-->
<RouterLink :to="{ name: 'settings' }" class="link-item dark:link-item-dark bg-light hover:bg-bg-light-tone dark:bg-bg-dark-tone hover:dark:bg-bg-light-tone">
<RouterLink
:to="{ name: 'settings' }"
class="link-item dark:link-item-dark bg-bg-light-tone dark:bg-bg-dark-tone hover:dark:bg-bg-light-tone"
:class="{
'text-green-200 dark:text-green-100 font-bold bg-bg-light-panel': isRouteActive('settings'),
'bounce-in': isRouteActive('settings')
}"
>
Settings
</RouterLink>
<RouterLink :to="{ name: 'help' }" class="link-item dark:link-item-dark bg-light hover:bg-bg-light-tone dark:bg-bg-dark-tone hover:dark:bg-bg-light-tone">
<RouterLink
:to="{ name: 'help' }"
class="link-item dark:link-item-dark bg-bg-light-tone dark:bg-bg-dark-tone hover:dark:bg-bg-light-tone"
:class="{
'text-green-200 dark:text-green-100 font-bold bg-bg-light-panel': isRouteActive('help'),
'bounce-in': isRouteActive('help')
}"
>
Help
</RouterLink>
</div>
@ -46,8 +89,32 @@
import { RouterLink } from 'vue-router';
import { store } from '../main';
</script>
<script>
export default {
name: 'Navigation',
data() {
return {
// component data
};
},
methods: {
isRouteActive(routeName) {
try{
return this.$route.name === routeName;
}
catch{
console.log("routeName not found")
return False;
}
}
// your methods
},
// other options
};
</script>
<style>
.container {
/* Remove margin and padding */
margin: 0;
@ -109,5 +176,35 @@
align-items: center;
padding: 5px;
}
.fade-in {
animation: fadeInAnimation 0.5s;
}
@keyframes fadeInAnimation {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.bounce-in {
animation: bounceInAnimation 0.5s;
}
@keyframes bounceInAnimation {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
</style>

View File

@ -41,7 +41,7 @@
<!-- LEFT SIDE PANEL -->
<div id="leftPanel" class="flex flex-col flex-grow overflow-y-scroll no-scrollbar "
@dragover.stop.prevent="setDropZoneDiscussion()">
<div class="text-white bg-primary-light sticky z-10 top-0 bg-bg-light-tone dark:bg-bg-dark-tone shadow-md ">
<div class="text-white bg-bg-light-panel sticky z-10 top-0 dark:bg-bg-dark-tone shadow-md ">
@ -229,8 +229,8 @@
</div>
</div>
</div>
<div class="absolute bottom-0 left-0 w-full bg-primary-light dark:bg-bg-dark-tone text-white py-2 cursor-pointer hover:text-accent" @click="showDatabaseSelector">
<p class="ml-2 text-center shadow-lg">{{ formatted_database_name }}</p>
<div class="absolute bottom-0 left-0 w-full bg-bg-light-panel dark:bg-bg-dark-tone text-white py-2 cursor-pointer hover:text-accent" @click="showDatabaseSelector">
<p class="text-center text-shadow: 2px 2px 4px #000000;">{{ formatted_database_name.replace("_"," ") }}</p>
</div>
</div>
</transition>
@ -588,7 +588,7 @@ export default {
async applyConfiguration() {
this.loading = true;
const res = await axios.post('/apply_settings', {"config":this.$store.state.config})
const res = await axios.post('/apply_settings', {"client_id":this.$store.state.client_id, "config":this.$store.state.config})
this.loading = false;
//console.log('apply-res',res)
if (res.data.status) {

View File

@ -14,18 +14,19 @@ module.exports = {
'primary-light': 'var(--color-primary-light)',
'secondary': 'var(--color-secondary)',
'accent': 'var(--color-accent)',
'bg-light': 'var(--color-bg-light)',
'bg-light-tone': 'var(--color-bg-light-tone)',
'bg-light-panel': 'var(--color-bg-light-panel)',
'bg-light-code-block': 'var(--color-bg-light-code-block)',
'bg-light-tone-panel': 'var(--color-bg-light-tone-panel)',
'bg-light-discussion': 'var(--color-bg-light-discussion)',
'bg-light-discussion-odd': 'var(--color-bg-light-discussion-odd)',
'bg-dark': 'var(--color-bg-dark)',
'bg-dark-tone': 'var(--color-bg-dark-tone)',
'bg-dark-tone-panel': 'var(--color-bg-dark-tone-panel)',
'bg-dark-code-block': 'var(--color-bg-dark-code-block)',
'bg-light': 'var(--color-bg-light)',
'bg-light-tone': 'var(--color-bg-light-tone)',
'bg-light-code-block': 'var(--color-bg-light-code-block)',
'bg-light-tone-panel': 'var(--color-bg-light-tone-panel)',
'bg-dark-discussion': 'var(--color-bg-dark-discussion)',
'bg-dark-discussion-odd': 'var(--color-bg-dark-discussion-odd)',
'bg-light-discussion': 'var(--color-bg-light-discussion)',
'bg-light-discussion-odd': 'var(--color-bg-light-discussion-odd)'
'bg-dark-discussion-odd': 'var(--color-bg-dark-discussion-odd)'
},
fontFamily: {
sans: ['PTSans', 'Roboto', 'sans-serif']

@ -1 +1 @@
Subproject commit 0f9cac61aec00736537de463a0632f5e35a6d6f3
Subproject commit afdd2332d9c124eef49c3433d64987b52f42dd1e