mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2025-04-07 10:56:44 +00:00
Enhanced Welcome ui
This commit is contained in:
Saifeddine ALOUI
parent
371a297eb4
commit
981323eb26
@ -1 +1 @@
|
||||
Subproject commit 208f57b1d71b2209543598b8bceafab1a336725f
|
||||
Subproject commit ccf237faba17935efd1e8ecbbf12f494c837333b
|
||||
8
web/dist/assets/index-c6c58977.css
vendored
Normal file
8
web/dist/assets/index-c6c58977.css
vendored
Normal file
File diff suppressed because one or more lines are too long
8
web/dist/assets/index-cac66727.css
vendored
8
web/dist/assets/index-cac66727.css
vendored
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 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>LoLLMS WebUI</title>
|
||||
<script type="module" crossorigin src="/assets/index-9bc65a8f.js"></script>
|
||||
<link rel="stylesheet" href="/assets/index-cac66727.css">
|
||||
<script type="module" crossorigin src="/assets/index-fe749e52.js"></script>
|
||||
<link rel="stylesheet" href="/assets/index-c6c58977.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@ -1,43 +1,103 @@
|
||||
<template>
|
||||
<!-- DEFAULT FIRST PAGE LOAD VIEW -->
|
||||
<div class="flex flex-col text-center w-full h-full">
|
||||
<div class="flex flex-col text-center items-center">
|
||||
|
||||
<div class="flex items-center gap-3 text-5xl drop-shadow-md align-middle pt-24 ">
|
||||
<img class="w-12 hover:scale-95 duration-150" title="LoLLMS WebUI" :src="$store.state.config==null?storeLogo:$store.state.config.app_custom_logo!=''?'/user_infos/'+$store.state.config.app_custom_logo: storeLogo" alt="Logo">
|
||||
<div class="flex flex-col items-start">
|
||||
<p class="text-2xl ">LoLLMS</p>
|
||||
<p class="text-gray-400 text-base">One tool to rule them all</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<hr
|
||||
class=" mt-1 w-96 h-1 mx-auto my-2 md:my-2 dark:bg-bg-dark-tone-panel bg-bg-light-tone-panel border-0 rounded ">
|
||||
<p class="text-2xl">Welcome</p>
|
||||
<p class="text-lg ">Please create a new discussion or select existing one to start</p>
|
||||
|
||||
<div class="flex flex-col items-center justify-center w-full h-full bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900 dark:to-purple-900">
|
||||
<div class="text-center">
|
||||
<div class="flex items-center justify-center gap-4 mb-8">
|
||||
<div class="relative w-20 h-80">
|
||||
<img
|
||||
:src="logoSrc"
|
||||
alt="LoLLMS Logo"
|
||||
class="w-20 h-20 rounded-full absolute animate-ball-bounce"
|
||||
>
|
||||
</div>
|
||||
<div class="flex flex-col items-start">
|
||||
<h1 class="text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-400 dark:to-purple-400">
|
||||
LoLLMS
|
||||
</h1>
|
||||
<p class="text-xl text-gray-600 dark:text-gray-300 italic">
|
||||
One tool to rule them all
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="space-y-6 animate-fade-in-up">
|
||||
<h2 class="text-3xl font-semibold text-gray-800 dark:text-gray-200">
|
||||
Welcome to LoLLMS WebUI
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 dark:text-gray-300">
|
||||
Your gateway to powerful language models and intelligent conversations
|
||||
</p>
|
||||
<div class="flex justify-center space-x-4 mt-8">
|
||||
<button class="px-6 py-3 text-white bg-blue-600 rounded-full hover:bg-blue-700 transform hover:scale-105 transition-all duration-200 ease-in-out shadow-lg">
|
||||
Create New Discussion
|
||||
</button>
|
||||
<button class="px-6 py-3 text-blue-600 bg-white border-2 border-blue-600 rounded-full hover:bg-blue-50 transform hover:scale-105 transition-all duration-200 ease-in-out shadow-lg">
|
||||
Select Existing Discussion
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import storeLogo from '@/assets/logo.png'
|
||||
|
||||
export default {
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, computed } from 'vue'
|
||||
import { useStore } from 'vuex'
|
||||
import storeLogo from '@/assets/logo.png'
|
||||
|
||||
export default {
|
||||
name: 'WelcomeComponent',
|
||||
computed:{
|
||||
storeLogo(){
|
||||
if (this.$store.state.config){
|
||||
return storeLogo
|
||||
}
|
||||
return this.$store.state.config.app_custom_logo!=''?'/user_infos/'+this.$store.state.config.app_custom_logo:storeLogo
|
||||
},
|
||||
},
|
||||
data(){
|
||||
},
|
||||
setup() {
|
||||
return {}
|
||||
const store = useStore()
|
||||
|
||||
const logoSrc = computed(() => {
|
||||
if (!store.state.config) return storeLogo
|
||||
return store.state.config.app_custom_logo
|
||||
? `/user_infos/${store.state.config.app_custom_logo}`
|
||||
: storeLogo
|
||||
})
|
||||
|
||||
return {
|
||||
logoSrc
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@keyframes ball-bounce {
|
||||
0%, 100% {
|
||||
transform: translateY(0) rotate(0deg);
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
25% { transform: translateY(-120px) rotate(90deg); }
|
||||
50% { transform: translateY(-160px) rotate(180deg); }
|
||||
75% { transform: translateY(-40px) rotate(270deg); }
|
||||
85%, 95% {
|
||||
transform: translateY(0) rotate(360deg);
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
90%, 97% {
|
||||
transform: translateY(-20px) rotate(360deg);
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-ball-bounce {
|
||||
animation: ball-bounce 4s infinite;
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fade-in-up 1s ease-out;
|
||||
}
|
||||
</style>
|
||||
@ -1,33 +1,44 @@
|
||||
<template>
|
||||
<transition name="fade-and-fly">
|
||||
<div v-if="!isReady" class="fixed top-0 left-0 w-screen h-screen flex items-center justify-center">
|
||||
<!-- SPINNER -->
|
||||
|
||||
<div class="flex flex-col text-center">
|
||||
<div class="flex flex-col text-center items-center">
|
||||
|
||||
<div class="flex items-center gap-3 text-5xl drop-shadow-md align-middle pt-24 ">
|
||||
|
||||
<img class="w-24 animate-bounce" title="LoLLMS WebUI" src="@/assets/logo.png" alt="Logo">
|
||||
<div class="flex flex-col items-start">
|
||||
<p class="text-2xl font-bold text-5xl drop-shadow-md align-middle">LoLLMS {{ version_info }} </p>
|
||||
<p class="text-gray-400 text-base">One tool to rule them all</p>
|
||||
<p class="text-gray-400 text-base">by ParisNeo</p>
|
||||
<div v-if="!isReady" class="fixed top-0 left-0 w-screen h-screen flex items-center justify-center bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900 dark:to-purple-900">
|
||||
<div class="flex flex-col items-center text-center max-w-4xl w-full px-4">
|
||||
<div class="mb-8 w-full">
|
||||
<h1 class="text-5xl md:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-400 dark:to-purple-400 mb-2">
|
||||
LoLLMS {{ version_info }}
|
||||
</h1>
|
||||
<p class="text-2xl text-gray-600 dark:text-gray-300 italic">
|
||||
One tool to rule them all
|
||||
</p>
|
||||
<p class="text-xl text-gray-500 dark:text-gray-400 mb-6">
|
||||
by ParisNeo
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="w-full h-24 relative overflow-hidden bg-gradient-to-r from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800 rounded-full shadow-lg">
|
||||
<img
|
||||
class="w-24 h-24 rounded-full absolute top-0 transition-all duration-300 ease-linear"
|
||||
:style="{ left: `calc(${loading_progress}% - 3rem)` }"
|
||||
title="LoLLMS WebUI"
|
||||
src="@/assets/logo.png"
|
||||
alt="Logo"
|
||||
>
|
||||
</div>
|
||||
<hr class=" mt-1 w-96 h-1 mx-auto my-2 md:my-2 dark:bg-bg-dark-tone-panel bg-bg-light-tone-panel border-0 rounded ">
|
||||
<p class="text-2xl mb-10 font-bold drop-shadow-md ">Welcome</p>
|
||||
<div role="status" class="text-center w-full display: flex; flex-row align-items: center;">
|
||||
<ProgressBar ref="loading_progress" :progress="loading_progress"></ProgressBar>
|
||||
<p class="text-2xl animate-pulse mt-2"> {{ loading_infos }} ...</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w-full max-w-2xl">
|
||||
<h2 class="text-3xl font-semibold text-gray-800 dark:text-gray-200 mb-6">
|
||||
Welcome
|
||||
</h2>
|
||||
<div role="status" class="w-full">
|
||||
<p class="text-xl text-gray-700 dark:text-gray-300">
|
||||
{{ loading_infos }}...
|
||||
</p>
|
||||
<p class="text-2xl font-bold text-blue-600 dark:text-blue-400 mt-2">
|
||||
{{ Math.round(loading_progress) }}%
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</transition>
|
||||
<button v-if="isReady" @click="togglePanel" class="absolute top-2 left-2 p-3 bg-white bg-opacity-0 cursor-pointer transition-all duration-300 hover:scale-110 hover:bg-opacity-20 hover:shadow-xl group">
|
||||
@ -455,6 +466,27 @@ animation: custom-pulse 2s infinite;
|
||||
.list-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes roll {
|
||||
0% {
|
||||
transform: translateX(-50%) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-roll {
|
||||
animation: roll 4s linear infinite;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import SVGRedBrain from '@/assets/brain_red.svg';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user