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

fix ui

Browse Source
This commit is contained in:
Saifeddine ALOUI 2025-04-01 18:25:18 +02:00
parent 8e50b92e6d
commit 44333d69f3
5 changed files with 199 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
web/dist/assets/index-CWI0YyLv.css vendored
View File

File diff suppressed because one or more lines are too long

26
web/dist/assets/index-D67w-OKm.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

118
web/dist/assets/index-m7-kGF9C.js → web/dist/assets/index-G3fhqLj-.js vendored
View File

File diff suppressed because one or more lines are too long

4
web/dist/index.html vendored
View File

@ -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-m7-kGF9C.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-CWI0YyLv.css">
<script type="module" crossorigin src="/assets/index-G3fhqLj-.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-D67w-OKm.css">
</head>
<body>
<div id="app"></div>

139
web/src/components/WelcomeComponent.vue
View File

@ -1,57 +1,57 @@
<template>
<div class="flex flex-col items-center justify-center w-full h-full min-h-screen p-8 bg-gradient-welcome">
<div class="flex flex-col items-center justify-center w-full h-full min-h-screen p-8">
<div class="text-center max-w-4xl">
<div class="flex items-center justify-center gap-8 mb-12">
<div class="relative w-24 h-24">
<img
:src="logoSrc"
alt="LoLLMS Logo"
class="w-24 h-24 rounded-full absolute animate-rolling-ball shadow-lg border-2 border-blue-300 dark:border-blue-600"
<img
:src="logoSrc"
alt="LoLLMS Logo"
class="w-24 h-24 rounded-full absolute animate-rolling-ball"
>
</div>
<div v-if="$store.state.config!=null&&$store.state.config.app_custom_name!=null&&$store.state.config.app_custom_name!=''" class="flex flex-col items-start">
<h1 class="text-6xl font-bold text-gradient-title">
<h1 class="text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-400 dark:to-purple-400">
{{$store.state.config.app_custom_name}}
</h1>
</div>
<div v-else class="flex flex-col items-start">
<h1 class="text-6xl font-bold text-gradient-title">
<h1 class="text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-400 dark:to-purple-400">
{{$store.state.theme_vars.lollms_title}}
</h1>
<p class="text-2xl italic mt-2 text-subtitle">
<p class="text-2xl italic mt-2">
Lord of Large Language And Multimodal Systems
</p>
</div>
</div>
<div v-if="$store.state.config!=null&&$store.state.config.app_custom_name!=null&&$store.state.config.app_custom_name!=''" class="space-y-8 animate-fade-in-up">
<p class="text-lg md:text-xl text-blue-700 dark:text-blue-200" v-html="$store.state.config.app_custom_welcome_message">
<p v-html="$store.state.config.app_custom_welcome_message">
</p>
</div>
<div v-else class="space-y-8 animate-fade-in-up">
<h2 class="text-4xl font-semibold text-blue-700 dark:text-blue-200">
<h2 class="text-4xl font-semibold">
{{$store.state.theme_vars.lollms_welcome_short_message}}
</h2>
<p class="text-lg md:text-xl max-w-3xl mx-auto text-blue-800 dark:text-blue-300">
<p class="text-xl max-w-3xl mx-auto">
{{$store.state.theme_vars.lollms_welcome_message}}
</p>
<!-- New section for latest news -->
<div v-if="latestNews" class="mt-12 p-6 card animate-fade-in-up max-h-60 overflow-y-auto scrollbar">
<h3 class="text-2xl font-medium text-blue-600 dark:text-blue-300 mb-3 border-b border-blue-300 dark:border-blue-600 pb-2">Latest LoLLMS News</h3>
<p class="text-base text-blue-700 dark:text-blue-300" v-html="latestNews"></p>
<div v-if="latestNews" class="mt-12 p-6 rounded-lg shadow-md animate-fade-in-up overflow-y-scroll scrollbar-thin">
<h3>Latest LoLLMS News</h3>
<p v-html="latestNews"></p>
</div>
</div>
<div v-if="error" class="mt-6 text-red-500 dark:text-red-400">{{ error }}</div>
<div v-if="error" class="mt-6 text-red-500">{{ error }}</div>
</div>
<!-- Floating button for latest ParisNeo video -->
<div v-if="showVideoButton" class="floating-button-container">
<a :href="videoUrl" target="_blank" class="floating-button" @click="handleClick">
<span class="tooltip">New ParisNeo Video!</span>
<img
:src="getImageForVideoType"
:alt="'New ' + videoType"
<img
:src="getImageForVideoType"
:alt="'New ' + videoType"
class="w-full h-full object-cover"
>
</a>
@ -59,8 +59,87 @@
</div>
</template>
<script>
import storeLogo from '@/assets/logo.png'
import axios from 'axios'
export default {
name: 'WelcomeComponent',
data() {
return {
videoUrl: "",
videoType: "",
latestNews: "",
error: "",
showVideoButton: false,
lastVideoUrl: ""
}
},
computed: {
getImageForVideoType() {
switch (this.videoType.toLowerCase()) {
case 'podcast':
return '/podcast.png';
case 'music':
return '/music.png';
case 'movie':
return '/movie.png';
case 'tutorial':
return '/tutorial.png';
default:
return '/play_video.png'; // fallback to default image
}
},
logoSrc() {
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
}
},
methods: {
async fetchLatestNews() {
try {
const response = await axios.get('/get_news');
this.latestNews = response.data;
} catch (err) {
console.error('Failed to fetch latest news:', err);
this.error = 'Unable to fetch the latest news. Please try again later.';
}
},
async fetchVideoUrl() {
try {
const response = await axios.get('/get_last_video_url');
this.videoUrl = response.data.url;
this.videoType = response.data.type;
this.checkVideoUpdate();
} catch (err) {
console.error('Failed to fetch video information:', err);
this.error = 'Unable to fetch the latest video information. Please try again later.';
}
},
async handleClick() {
await axios.post("/set_last_viewed_video_url",{client_id:this.$store.state.client_id, last_viewed_video_url:this.videoUrl});
this.showVideoButton = false;
},
async checkVideoUpdate() {
const response = await axios.get("/get_last_viewed_video_url");
const storedVideoUrl = response.data
console.log("storedVideoUrl");
console.log(storedVideoUrl);
if (this.videoUrl !== storedVideoUrl) {
this.showVideoButton = true;
}
}
},
mounted() {
this.fetchLatestNews();
this.fetchVideoUrl();
}
}
</script>
<style scoped>
/* Keep existing animations and floating button styles as they are custom */
@keyframes rolling-ball {
0% { transform: translateX(-50px) rotate(0deg); }
25% { transform: translateX(0) rotate(90deg); }
@ -97,23 +176,25 @@
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9999; /* Ensure it's above other content */
z-index: 9999;
}
.floating-button {
position: relative; /* Changed from fixed to relative to container */
position: fixed;
bottom: 30px;
right: 30px;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgba(255, 69, 0, 0.9); /* Keeping custom color for distinction */
background-color: rgba(255, 69, 0, 0.9);
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 30px rgba(255, 69, 0, 0.8);
animation: pulse 1.5s infinite, glow 2s infinite, wobble 3s infinite;
overflow: hidden; /* Keep overflow hidden for image */
overflow: hidden;
z-index: 9999;
transition: all 0.3s ease;
cursor: pointer;
}
.floating-button:hover {
@ -123,7 +204,7 @@
.tooltip {
position: absolute;
background-color: rgba(0, 0, 0, 0.8); /* Keeping custom tooltip style */
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 8px 12px;
border-radius: 8px;
@ -133,7 +214,7 @@
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
pointer-events: none;
top: -50px; /* Position above the button */
top: -50px;
left: 50%;
transform: translateX(-50%) scale(0.9);
}
@ -159,4 +240,8 @@
0%, 100% { transform: rotate(-3deg); }
50% { transform: rotate(3deg); }
}
</style>
.hidden {
display: none;
}
</style>