mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2024-12-19 20:37:51 +00:00
Enhanced ui
This commit is contained in:
Saifeddine ALOUI
parent
e034d76aeb
commit
a5e7dace3d
2
app.py
2
app.py
@ -69,7 +69,7 @@ def check_and_install_package(package: str, version: str):
|
||||
packages: List[Tuple[str, str]] = [
|
||||
("freedom_search", "0.1.9"),
|
||||
("scrapemaster", "0.2.1"),
|
||||
("lollms_client", "0.7.6"),
|
||||
("lollms_client", "0.7.7"),
|
||||
("lollmsvectordb", "1.1.6"),
|
||||
]
|
||||
|
||||
|
||||
@ -43,6 +43,13 @@ async def get_lollms_version():
|
||||
return infos
|
||||
|
||||
|
||||
@router.get("/get_news")
|
||||
async def get_lollms_version():
|
||||
"""Get the changelog."""
|
||||
base_path = Path(__file__).parent
|
||||
infos = base_path/"news"/"current.html"
|
||||
return infos.read_text()
|
||||
|
||||
@router.get("/get_lollms_webui_version")
|
||||
async def get_lollms_webui_version():
|
||||
"""Get the version of the LoLLMs Web UI application."""
|
||||
|
||||
18
endpoints/news/current.html
Normal file
18
endpoints/news/current.html
Normal file
@ -0,0 +1,18 @@
|
||||
<div class="mb-6">
|
||||
<h3 class="text-2xl font-semibold mb-2 text-indigo-600">New Feature Alert!</h3>
|
||||
<p class="text-gray-700">LoLLMs UI now has a new theming system, allowing for more personalized and visually appealing interactions.</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<h3 class="text-2xl font-semibold mb-2 text-indigo-600">Latest Music Highlight</h3>
|
||||
<div class="relative" style="padding-top: 56.25%;">
|
||||
<iframe
|
||||
class="absolute top-0 left-0 w-full h-full"
|
||||
src="https://www.youtube.com/embed/avaixPtHUIc?si=kEdSoLtMMGOQd_j2&cc_load_policy=1&cc_lang_pref=en"
|
||||
title="YouTube video player"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen>
|
||||
</iframe>
|
||||
</div>
|
||||
</div>
|
||||
@ -1 +1 @@
|
||||
Subproject commit 55862e388295bc1c093cf56ce68ef8c9a305d8ad
|
||||
Subproject commit 9eae059a43644fa3b8e947ddb1a2bef4b452c8f5
|
||||
File diff suppressed because one or more lines are too long
8
web/dist/assets/index-DaywzZaA.css
vendored
8
web/dist/assets/index-DaywzZaA.css
vendored
File diff suppressed because one or more lines are too long
8
web/dist/assets/index-gzgffzab.css
vendored
Normal file
8
web/dist/assets/index-gzgffzab.css
vendored
Normal file
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-CQZS3dTu.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-DaywzZaA.css">
|
||||
<script type="module" crossorigin src="/assets/index-CxhUr7VR.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-gzgffzab.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@ -1,102 +1,120 @@
|
||||
<template>
|
||||
<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"
|
||||
>
|
||||
</div>
|
||||
<div class="flex flex-col items-start">
|
||||
<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 text-gray-600 dark:text-gray-300 italic mt-2">
|
||||
Lord of Large Language And Multimodal Systems
|
||||
</p>
|
||||
</div>
|
||||
<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"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="space-y-8 animate-fade-in-up">
|
||||
<h2 class="text-4xl font-semibold text-gray-800 dark:text-gray-200">
|
||||
{{$store.state.theme_vars.lollms_welcome_short_message}}
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
|
||||
{{$store.state.theme_vars.lollms_welcome_message}}
|
||||
<div class="flex flex-col items-start">
|
||||
<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 text-gray-600 dark:text-gray-300 italic mt-2">
|
||||
Lord of Large Language And Multimodal Systems
|
||||
</p>
|
||||
<div class="mt-12 space-y-6">
|
||||
<p class="text-lg text-gray-700 dark:text-gray-300">
|
||||
Discover the capabilities of L🌟LLMS:
|
||||
</p>
|
||||
<ul class="text-left list-disc list-inside text-gray-600 dark:text-gray-300 space-y-2">
|
||||
<li>Engage in natural language conversations</li>
|
||||
<li>Generate creative content and ideas</li>
|
||||
<li>Analyze complex data and provide insights</li>
|
||||
<li>Assist with coding and technical tasks</li>
|
||||
<li>Process and understand multimodal inputs</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-8 animate-fade-in-up">
|
||||
<h2 class="text-4xl font-semibold text-gray-800 dark:text-gray-200">
|
||||
{{$store.state.theme_vars.lollms_welcome_short_message}}
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
|
||||
{{$store.state.theme_vars.lollms_welcome_message}}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- New section for latest news -->
|
||||
<div id="newsContainer" class="mt-12 p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md animate-fade-in-up overflow-y-scroll" style="display: none;">
|
||||
<h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Latest LoLLMS News</h3>
|
||||
<p id="newsContent" class="text-gray-600 dark:text-gray-300"></p>
|
||||
</div>
|
||||
<div id="errorContainer" class="mt-6 text-red-500 dark:text-red-400" style="display: none;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, computed } from 'vue'
|
||||
import { useStore } from 'vuex'
|
||||
import storeLogo from '@/assets/logo.png'
|
||||
|
||||
export default {
|
||||
name: 'WelcomeComponent',
|
||||
setup() {
|
||||
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
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useStore } from 'vuex'
|
||||
import storeLogo from '@/assets/logo.png'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'WelcomeComponent',
|
||||
setup() {
|
||||
const store = useStore()
|
||||
const latestNews = ref('')
|
||||
const error = ref('')
|
||||
|
||||
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
|
||||
})
|
||||
|
||||
const fetchLatestNews = async () => {
|
||||
try {
|
||||
const response = await axios.get('/get_news')
|
||||
latestNews.value = response.data
|
||||
document.getElementById('newsContent').innerHTML = latestNews.value;
|
||||
document.getElementById('newsContainer').style.display = 'block';
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch latest news:', err)
|
||||
error.value = 'Unable to fetch the latest news. Please try again later.'
|
||||
document.getElementById('errorContainer').textContent = err;
|
||||
document.getElementById('errorContainer').style.display = 'block';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@keyframes rolling-ball {
|
||||
0% { transform: translateX(-50px) rotate(0deg); }
|
||||
25% { transform: translateX(0) rotate(90deg); }
|
||||
50% { transform: translateX(50px) rotate(180deg); }
|
||||
75% { transform: translateX(0) rotate(270deg); }
|
||||
100% { transform: translateX(-50px) rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-20px); }
|
||||
}
|
||||
|
||||
@keyframes fade-in-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
|
||||
onMounted(() => {
|
||||
fetchLatestNews()
|
||||
})
|
||||
|
||||
return {
|
||||
logoSrc,
|
||||
latestNews,
|
||||
error
|
||||
}
|
||||
}
|
||||
|
||||
.animate-rolling-ball {
|
||||
animation: rolling-ball 4s infinite ease-in-out, bounce 1s infinite ease-in-out;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@keyframes rolling-ball {
|
||||
0% { transform: translateX(-50px) rotate(0deg); }
|
||||
25% { transform: translateX(0) rotate(90deg); }
|
||||
50% { transform: translateX(50px) rotate(180deg); }
|
||||
75% { transform: translateX(0) rotate(270deg); }
|
||||
100% { transform: translateX(-50px) rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-20px); }
|
||||
}
|
||||
|
||||
@keyframes fade-in-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fade-in-up 1.5s ease-out;
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
||||
.animate-rolling-ball {
|
||||
animation: rolling-ball 4s infinite ease-in-out, bounce 1s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fade-in-up 1.5s ease-out;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1308,7 +1308,6 @@ export default {
|
||||
"LoLLMs includes advanced natural language processing capabilities in over 100 languages.",
|
||||
"The system can perform sentiment analysis on social media trends and customer feedback in real-time.",
|
||||
"LoLLMs features a unique 'time-aware' context system that understands and reasons about temporal relationships.",
|
||||
"The platform includes specialized tools for quantum computing simulation and algorithm development."
|
||||
|
||||
],
|
||||
randomFact: "",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user