Enhanced ui

This commit is contained in:
Saifeddine ALOUI 2024-11-20 23:24:31 +01:00
parent e034d76aeb
commit a5e7dace3d
10 changed files with 168 additions and 126 deletions

2
app.py
View File

@ -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"),
]

View File

@ -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."""

View 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

File diff suppressed because one or more lines are too long

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
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-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>

View File

@ -26,32 +26,30 @@
<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 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>
</template>
<script>
import { ref, computed } from 'vue'
import { useStore } from 'vuex'
import storeLogo from '@/assets/logo.png'
<!-- 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>
</div>
</template>
export default {
<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
@ -60,28 +58,48 @@
: storeLogo
})
return {
logoSrc
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 {
onMounted(() => {
fetchLatestNews()
})
return {
logoSrc,
latestNews,
error
}
}
}
</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 {
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
}
@keyframes fade-in-up {
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(20px);
@ -90,13 +108,13 @@
opacity: 1;
transform: translateY(0);
}
}
}
.animate-rolling-ball {
.animate-rolling-ball {
animation: rolling-ball 4s infinite ease-in-out, bounce 1s infinite ease-in-out;
}
}
.animate-fade-in-up {
.animate-fade-in-up {
animation: fade-in-up 1.5s ease-out;
}
</style>
}
</style>

View File

@ -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: "",