ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2025-01-29 15:44:12 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

enhanced ui

Browse Source
This commit is contained in:
Saifeddine ALOUI 2024-09-01 22:53:41 +02:00
parent ef6635c1a8
commit 4efb87dc46
14 changed files with 231 additions and 912 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps_zoo/chess_game/description.yaml
View File

@ -1,5 +0,0 @@
description: This is a 2 players chess game
version: 1.0
author: ParisNeo
model: gpt-4o-mini
disclaimer: None

BIN
apps_zoo/chess_game/icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 34 KiB

639
apps_zoo/chess_game/index.html
View File

@ -1,639 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chess Game with Check and Checkmate</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.game-container {
display: flex;
gap: 20px;
}
#chessboard {
display: grid;
grid-template-columns: repeat(8, 60px);
grid-template-rows: repeat(8, 60px);
border: 2px solid #333;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.square {
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
cursor: pointer;
transition: background-color 0.3s;
}
.white {
background-color: #f0d9b5;
}
.black {
background-color: #b58863;
}
.selected {
background-color: #7fc97f;
}
.possible-move {
position: relative;
}
.possible-move::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 50%;
}
.in-check {
background-color: #ff6b6b;
}
.turn-indicator {
position: absolute;
top: 20px;
left: 20px;
font-size: 24px;
font-weight: bold;
}
.game-status {
position: absolute;
top: 60px;
left: 20px;
font-size: 24px;
font-weight: bold;
color: #ff6b6b;
}
.scoreboard {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.scoreboard h2 {
margin-top: 0;
}
.score {
font-size: 18px;
margin-bottom: 10px;
}
.leaderboard {
margin-top: 20px;
}
.leaderboard ol {
padding-left: 20px;
}
.winner-input {
display: none;
margin-top: 20px;
}
.credits {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background-color: rgba(0, 0, 0, 0.8);
color: white;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.credits h1 {
margin: 0;
font-size: 48px;
}
.credits p {
font-size: 24px;
}
.credits button {
margin-top: 20px;
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="turn-indicator" id="turnIndicator"></div>
<div class="game-status" id="gameStatus"></div>
<div class="game-container">
<div id="chessboard"></div>
<div class="scoreboard">
<h2>Scoreboard</h2>
<div class="score" id="whiteScore">White: 0</div>
<div class="score" id="blackScore">Black: 0</div>
<div class="leaderboard">
<h3>Leaderboard</h3>
<ol id="leaderboardList"></ol>
</div>
<div class="winner-input" id="winnerInput">
<input type="text" id="winnerName" placeholder="Enter your name">
<button onclick="saveWinner()">Save</button>
</div>
</div>
</div>
<div class="credits" id="credits">
<h1>Congratulations!</h1>
<p>Game created by WebCraft Maestro, prompted by ParisNeo on lollms system.</p>
<button onclick="playAgain()">Play Again</button>
<audio id="creditMusic" src="https://www.bensound.com/bensound-music/bensound-sunny.mp3" loop></audio>
</div>
<script>
const board = document.getElementById('chessboard');
const turnIndicator = document.getElementById('turnIndicator');
const gameStatus = document.getElementById('gameStatus');
const whiteScoreElement = document.getElementById('whiteScore');
const blackScoreElement = document.getElementById('blackScore');
const leaderboardList = document.getElementById('leaderboardList');
const winnerInput = document.getElementById('winnerInput');
const winnerNameInput = document.getElementById('winnerName');
const credits = document.getElementById('credits');
const creditMusic = document.getElementById('creditMusic');
let selectedPiece = null;
let currentPlayer = 'white';
let whiteScore = 0;
let blackScore = 0;
let leaderboard = [];
let gameBoard = [];
const initialBoard = [
['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
['', '', '', '', '', '', '', ''],
['', '', '', '', '', '', '', ''],
['', '', '', '', '', '', '', ''],
['', '', '', '', '', '', '', ''],
['♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'],
['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖']
];
const pieceValues = {
'♙': 1, '♟': 1, // Pawns
'♘': 3, '♞': 3, // Knights
'♗': 3, '♝': 3, // Bishops
'♖': 5, '♜': 5, // Rooks
'♕': 9, '♛': 9, // Queens
'♔': 0, '♚': 0 // Kings (no point value)
};
function createBoard() {
for (let row = 0; row < 8; row++) {
gameBoard[row] = [];
for (let col = 0; col < 8; col++) {
const square = document.createElement('div');
square.className = `square ${(row + col) % 2 === 0 ? 'white' : 'black'}`;
square.dataset.row = row;
square.dataset.col = col;
square.textContent = initialBoard[row][col];
square.addEventListener('click', handleClick);
board.appendChild(square);
gameBoard[row][col] = initialBoard[row][col];
}
}
updateTurnIndicator();
}
function handleClick(event) {
const square = event.target;
const row = parseInt(square.dataset.row);
const col = parseInt(square.dataset.col);
if (selectedPiece) {
if (square.classList.contains('possible-move')) {
const capturedPiece = square.textContent;
const fromRow = parseInt(selectedPiece.dataset.row);
const fromCol = parseInt(selectedPiece.dataset.col);
// Make the move
movePiece(selectedPiece, square);
updateGameBoard(fromRow, fromCol, row, col);
// Check for check and checkmate
const oppositeColor = currentPlayer === 'white' ? 'black' : 'white';
if (isInCheck(oppositeColor)) {
if (isCheckmate(oppositeColor)) {
gameStatus.textContent = `Checkmate! ${currentPlayer.charAt(0).toUpperCase() + currentPlayer.slice(1)} wins!`;
winnerInput.style.display = 'block';
showCredits();
} else {
gameStatus.textContent = `${oppositeColor.charAt(0).toUpperCase() + oppositeColor.slice(1)} is in check!`;
}
} else {
gameStatus.textContent = '';
}
updateScore(capturedPiece);
clearSelection();
currentPlayer = oppositeColor;
updateTurnIndicator();
} else {
clearSelection();
selectPiece(square);
}
} else {
selectPiece(square);
}
}
function selectPiece(square) {
const piece = square.textContent;
if (piece && ((currentPlayer === 'white' && piece.charCodeAt(0) >= 9812 && piece.charCodeAt(0) <= 9817) ||
(currentPlayer === 'black' && piece.charCodeAt(0) >= 9818 && piece.charCodeAt(0) <= 9823))) {
selectedPiece = square;
square.classList.add('selected');
showPossibleMoves(square);
}
}
function showPossibleMoves(square) {
const piece = square.textContent;
const row = parseInt(square.dataset.row);
const col = parseInt(square.dataset.col);
clearPossibleMoves();
switch (piece) {
case '♔': case '♚': // King
showKingMoves(row, col);
break;
case '♕': case '♛': // Queen
showQueenMoves(row, col);
break;
case '♖': case '♜': // Rook
showRookMoves(row, col);
break;
case '♗': case '♝': // Bishop
showBishopMoves(row, col);
break;
case '♘': case '♞': // Knight
showKnightMoves(row, col);
break;
case '♙': case '♟': // Pawn
showPawnMoves(row, col, piece === '♙');
break;
}
}
function showKingMoves(row, col) {
const directions = [
[-1, -1], [-1, 0], [-1, 1],
[0, -1], [0, 1],
[1, -1], [1, 0], [1, 1]
];
for (const [dx, dy] of directions) {
const newRow = row + dx;
const newCol = col + dy;
if (isValidMove(newRow, newCol)) {
const targetSquare = document.querySelector(`.square[data-row="${newRow}"][data-col="${newCol}"]`);
if (isValidTarget(targetSquare) && !wouldBeInCheck(row, col, newRow, newCol)) {
targetSquare.classList.add('possible-move');
}
}
}
}
function showQueenMoves(row, col) {
showRookMoves(row, col);
showBishopMoves(row, col);
}
function showRookMoves(row, col) {
const directions = [[-1, 0], [1, 0], [0, -1], [0, 1]];
for (const [dx, dy] of directions) {
let newRow = row + dx;
let newCol = col + dy;
while (isValidMove(newRow, newCol)) {
const targetSquare = document.querySelector(`.square[data-row="${newRow}"][data-col="${newCol}"]`);
if (isValidTarget(targetSquare)) {
if (!wouldBeInCheck(row, col, newRow, newCol)) {
targetSquare.classList.add('possible-move');
}
if (targetSquare.textContent !== '') break;
} else {
break;
}
newRow += dx;
newCol += dy;
}
}
}
function showBishopMoves(row, col) {
const directions = [[-1, -1], [-1, 1], [1, -1], [1, 1]];
for (const [dx, dy] of directions) {
let newRow = row + dx;
let newCol = col + dy;
while (isValidMove(newRow, newCol)) {
const targetSquare = document.querySelector(`.square[data-row="${newRow}"][data-col="${newCol}"]`);
if (isValidTarget(targetSquare)) {
if (!wouldBeInCheck(row, col, newRow, newCol)) {
targetSquare.classList.add('possible-move');
}
if (targetSquare.textContent !== '') break;
} else {
break;
}
newRow += dx;
newCol += dy;
}
}
}
function showKnightMoves(row, col) {
const moves = [
[-2, -1], [-2, 1], [-1, -2], [-1, 2],
[1, -2], [1, 2], [2, -1], [2, 1]
];
for (const [dx, dy] of moves) {
const newRow = row + dx;
const newCol = col + dy;
if (isValidMove(newRow, newCol)) {
const targetSquare = document.querySelector(`.square[data-row="${newRow}"][data-col="${newCol}"]`);
if (isValidTarget(targetSquare) && !wouldBeInCheck(row, col, newRow, newCol)) {
targetSquare.classList.add('possible-move');
}
}
}
}
function showPawnMoves(row, col, isWhite) {
const direction = isWhite ? -1 : 1;
const startRow = isWhite ? 6 : 1;
// Move forward
let newRow = row + direction;
if (isValidMove(newRow, col)) {
const targetSquare = document.querySelector(`.square[data-row="${newRow}"][data-col="${col}"]`);
if (targetSquare.textContent === '' && !wouldBeInCheck(row, col, newRow, col)) {
targetSquare.classList.add('possible-move');
// Double move from starting position
if (row === startRow) {
newRow = row + 2 * direction;
const doubleSquare = document.querySelector(`.square[data-row="${newRow}"][data-col="${col}"]`);
if (doubleSquare.textContent === '' && !wouldBeInCheck(row, col, newRow, col)) {
doubleSquare.classList.add('possible-move');
}
}
}
}
// Capture diagonally
for (const dcol of [-1, 1]) {
newRow = row + direction;
const newCol = col + dcol;
if (isValidMove(newRow, newCol)) {
const targetSquare = document.querySelector(`.square[data-row="${newRow}"][data-col="${newCol}"]`);
if (targetSquare.textContent !== '' && isValidTarget(targetSquare) && !wouldBeInCheck(row, col, newRow, newCol)) {
targetSquare.classList.add('possible-move');
}
}
}
}
function isValidMove(row, col) {
return row >= 0 && row < 8 && col >= 0 && col < 8;
}
function isValidTarget(square) {
const piece = square.textContent;
if (!piece) return true;
if (currentPlayer === 'white') {
return piece.charCodeAt(0) >= 9818;
} else {
return piece.charCodeAt(0) <= 9817;
}
}
function clearPossibleMoves() {
document.querySelectorAll('.possible-move').forEach(square => square.classList.remove('possible-move'));
}
function clearSelection() {
if (selectedPiece) {
selectedPiece.classList.remove('selected');
selectedPiece = null;
clearPossibleMoves();
}
}
function movePiece(fromSquare, toSquare) {
toSquare.textContent = fromSquare.textContent;
fromSquare.textContent = '';
}
function updateGameBoard(fromRow, fromCol, toRow, toCol) {
gameBoard[toRow][toCol] = gameBoard[fromRow][fromCol];
gameBoard[fromRow][fromCol] = '';
}
function updateTurnIndicator() {
turnIndicator.textContent = `${currentPlayer.charAt(0).toUpperCase() + currentPlayer.slice(1)}'s turn`;
turnIndicator.style.color = currentPlayer;
}
function updateScore(capturedPiece) {
if (capturedPiece) {
const points = pieceValues[capturedPiece] || 0;
if (currentPlayer === 'white') {
whiteScore += points;
} else {
blackScore += points;
}
whiteScoreElement.textContent = `White: ${whiteScore}`;
blackScoreElement.textContent = `Black: ${blackScore}`;
updateLeaderboard();
}
}
function updateLeaderboard() {
leaderboard = [
{ name: 'White', score: whiteScore },
{ name: 'Black', score: blackScore },
...leaderboard.filter(entry => entry.name !== 'White' && entry.name !== 'Black')
];
leaderboard.sort((a, b) => b.score - a.score);
leaderboard = leaderboard.slice(0, 5); // Keep only top 5
leaderboardList.innerHTML = '';
leaderboard.forEach(entry => {
const li = document.createElement('li');
li.textContent = `${entry.name}: ${entry.score}`;
leaderboardList.appendChild(li);
});
}
function isInCheck(color) {
const king = color === 'white' ? '♔' : '♚';
let kingPosition;
// Find the king's position
for (let row = 0; row < 8; row++) {
for (let col = 0; col < 8; col++) {
if (gameBoard[row][col] === king) {
kingPosition = { row, col };
break;
}
}
if (kingPosition) break;
}
// Check if any opponent's piece can attack the king
for (let row = 0; row < 8; row++) {
for (let col = 0; col < 8; col++) {
const piece = gameBoard[row][col];
if (piece && ((color === 'white' && piece.charCodeAt(0) >= 9818) || (color === 'black' && piece.charCodeAt(0) <= 9817))) {
if (canAttack(row, col, kingPosition.row, kingPosition.col)) {
return true;
}
}
}
}
return false;
}
function canAttack(fromRow, fromCol, toRow, toCol) {
const piece = gameBoard[fromRow][fromCol];
switch (piece) {
case '♔': case '♚': // King
return Math.abs(fromRow - toRow) <= 1 && Math.abs(fromCol - toCol) <= 1;
case '♕': case '♛': // Queen
return canAttackStraight(fromRow, fromCol, toRow, toCol) || canAttackDiagonal(fromRow, fromCol, toRow, toCol);
case '♖': case '♜': // Rook
return canAttackStraight(fromRow, fromCol, toRow, toCol);
case '♗': case '♝': // Bishop
return canAttackDiagonal(fromRow, fromCol, toRow, toCol);
case '♘': case '♞': // Knight
const dx = Math.abs(fromRow - toRow);
const dy = Math.abs(fromCol - toCol);
return (dx === 2 && dy === 1) || (dx === 1 && dy === 2);
case '♙': case '♟': // Pawn
const direction = piece === '♙' ? -1 : 1;
return (fromCol === toCol && fromRow + direction === toRow) ||
(Math.abs(fromCol - toCol) === 1 && fromRow + direction === toRow);
}
return false;
}
function canAttackStraight(fromRow, fromCol, toRow, toCol) {
if (fromRow === toRow) {
const step = fromCol < toCol ? 1 : -1;
for (let col = fromCol + step; col !== toCol; col += step) {
if (gameBoard[fromRow][col] !== '') return false;
}
return true;
}
if (fromCol === toCol) {
const step = fromRow < toRow ? 1 : -1;
for (let row = fromRow + step; row !== toRow; row += step) {
if (gameBoard[row][fromCol] !== '') return false;
}
return true;
}
return false;
}
function canAttackDiagonal(fromRow, fromCol, toRow, toCol) {
if (Math.abs(fromRow - toRow) === Math.abs(fromCol - toCol)) {
const rowStep = fromRow < toRow ? 1 : -1;
const colStep = fromCol < toCol ? 1 : -1;
let row = fromRow + rowStep;
let col = fromCol + colStep;
while (row !== toRow && col !== toCol) {
if (gameBoard[row][col] !== '') return false;
row += rowStep;
col += colStep;
}
return true;
}
return false;
}
function wouldBeInCheck(fromRow, fromCol, toRow, toCol) {
const tempPiece = gameBoard[toRow][toCol];
gameBoard[toRow][toCol] = gameBoard[fromRow][fromCol];
gameBoard[fromRow][fromCol] = '';
const inCheck = isInCheck(currentPlayer);
gameBoard[fromRow][fromCol] = gameBoard[toRow][toCol];
gameBoard[toRow][toCol] = tempPiece;
return inCheck;
}
function isCheckmate(color) {
for (let fromRow = 0; fromRow < 8; fromRow++) {
for (let fromCol = 0; fromCol < 8; fromCol++) {
const piece = gameBoard[fromRow][fromCol];
if (piece && ((color === 'white' && piece.charCodeAt(0) <= 9817) || (color === 'black' && piece.charCodeAt(0) >= 9818))) {
for (let toRow = 0; toRow < 8; toRow++) {
for (let toCol = 0; toCol < 8; toCol++) {
if (canAttack(fromRow, fromCol, toRow, toCol) && !wouldBeInCheck(fromRow, fromCol, toRow, toCol)) {
return false;
}
}
}
}
}
}
return true;
}
function saveWinner() {
const winnerName = winnerNameInput.value.trim();
if (winnerName) {
const winner = leaderboard.find(entry => entry.name === winnerName);
if (winner) {
winner.score += 1;
} else {
leaderboard.push({ name: winnerName, score: 1 });
}
updateLeaderboard();
winnerInput.style.display = 'none';
winnerNameInput.value = '';
}
}
function showCredits() {
credits.style.display = 'flex';
creditMusic.play();
}
function playAgain() {
credits.style.display = 'none';
creditMusic.pause();
creditMusic.currentTime = 0;
resetGame();
}
function resetGame() {
board.innerHTML = '';
gameStatus.textContent = '';
winnerInput.style.display = 'none';
selectedPiece = null;
currentPlayer = 'white';
whiteScore = 0;
blackScore = 0;
gameBoard = [];
createBoard();
updateTurnIndicator();
updateScore();
}
createBoard();
updateLeaderboard();
</script>
</body>
</html>

2
lollms_core

@ -1 +1 @@
Subproject commit 9aaa79e4a1daf375925f6f8c6de9d53cd41fb321
Subproject commit 2dce9311fa2ae97e1eb9d3729cd35592f252d36a

41
lollms_webui.py
View File

@ -496,47 +496,6 @@ class LOLLMSWebUI(LOLLMSElfServer):
return mounted_personalities
def rebuild_extensions(self, reload_all=False):
if reload_all:
self.mounted_extensions=[]
loaded = self.mounted_extensions
loaded_names = [f"{p.category}/{p.extension_folder_name}" for p in loaded]
mounted_extensions=[]
ASCIIColors.success(f" ╔══════════════════════════════════════════════════╗ ")
ASCIIColors.success(f" ║ Building mounted Extensions ║ ")
ASCIIColors.success(f" ╚══════════════════════════════════════════════════╝ ")
to_remove=[]
for i,extension in enumerate(self.config['extensions']):
ASCIIColors.yellow(f" {extension}")
if extension in loaded_names:
mounted_extensions.append(loaded[loaded_names.index(extension)])
else:
extension_path = self.lollms_paths.extensions_zoo_path/f"{extension}"
try:
extension = ExtensionBuilder().build_extension(extension_path,self.lollms_paths, self)
mounted_extensions.append(extension)
except Exception as ex:
ASCIIColors.error(f"Extension file not found or is corrupted ({extension_path}).\nReturned the following exception:{ex}\nPlease verify that the personality you have selected exists or select another personality. Some updates may lead to change in personality name or category, so check the personality selection in settings to be sure.")
trace_exception(ex)
ASCIIColors.info("Trying to force reinstall")
if self.config["debug"]:
print(ex)
ASCIIColors.success(f" ╔══════════════════════════════════════════════════╗ ")
ASCIIColors.success(f" ║ Done ║ ")
ASCIIColors.success(f" ╚══════════════════════════════════════════════════╝ ")
# Sort the indices in descending order to ensure correct removal
to_remove.sort(reverse=True)
# Remove elements from the list based on the indices
for index in to_remove:
if 0 <= index < len(mounted_extensions):
mounted_extensions.pop(index)
self.config["extensions"].pop(index)
ASCIIColors.info(f"removed personality {extension_path}")
return mounted_extensions
# ================================== LOLLMSApp
#properties

8
web/dist/assets/index-b2ef28da.css vendored
View File

File diff suppressed because one or more lines are too long

380
web/dist/assets/index-14de4770.js → web/dist/assets/index-d74e048d.js vendored
View File

File diff suppressed because one or more lines are too long

8
web/dist/assets/index-e20c16c2.css vendored Normal file
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-14de4770.js"></script>
<link rel="stylesheet" href="/assets/index-b2ef28da.css">
<script type="module" crossorigin src="/assets/index-d74e048d.js"></script>
<link rel="stylesheet" href="/assets/index-e20c16c2.css">
</head>
<body>
<div id="app"></div>

31
web/src/assets/tailwind.css
View File

@ -32,7 +32,7 @@
}
h1 {
@apply 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;
@apply text-5xl md:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-blue-700 dark:from-blue-400 dark:to-blue-500;
}
h2 {
@ -90,20 +90,20 @@ textarea, input, select {
}
.background-color {
@apply bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900 dark:to-purple-900 min-h-screen;
@apply bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-800 dark:to-blue-900 min-h-screen;
}
.toolbar-color {
@apply text-gray-700 dark:text-gray-50 bg-gradient-to-r from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800 rounded-full shadow-lg
}
.panels-color {
@apply text-gray-700 dark:text-gray-50 bg-gradient-to-r from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800 rounded shadow-lg
@apply text-gray-700 dark:text-gray-50 bg-gradient-to-r from-blue-100 to-blue-200 dark:from-blue-800 dark:to-blue-900 rounded shadow-lg;
}
.unicolor-panels-color {
@apply bg-blue-200 dark:bg-blue-800
}
.chatbox-color {
@apply bg-gradient-to-br from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800
@apply bg-gradient-to-br from-blue-200 to-blue-300 dark:from-blue-800 dark:to-blue-900
}
.message {
@apply relative w-full rounded-lg m-2 shadow-lg border-2 border-transparent
@ -114,18 +114,18 @@ textarea, input, select {
}
/* Light theme */
.message:nth-child(even) {
@apply bg-gradient-to-br from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800;
@apply bg-gradient-to-br from-blue-200 to-blue-300 dark:from-blue-800 dark:to-blue-800;
}
.message:nth-child(odd) {
@apply bg-gradient-to-br from-blue-300 to-purple-300 dark:from-blue-900 dark:to-purple-900;
@apply bg-gradient-to-br from-blue-300 to-blue-400 dark:from-blue-800 dark:to-blue-900;
}
.discussion{
@apply mr-2 bg-gradient-to-r from-blue-300 to-purple-300 dark:from-blue-900 dark:to-purple-900 hover:from-blue-100 hover:to-purple-100 hover:dark:from-blue-700 hover:dark:to-purple-700
@apply mr-2 bg-gradient-to-r from-blue-300 to-blue-400 dark:from-blue-800 dark:to-blue-900 hover:from-blue-100 hover:to-purple-100 hover:dark:from-blue-700 hover:dark:to-purple-700
}
.discussion-hilighted{
@apply bg-gradient-to-r from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800 hover:from-blue-100 hover:to-purple-100 hover:dark:from-blue-700 hover:dark:to-purple-700
@apply bg-gradient-to-r from-blue-200 to-blue-300 dark:from-blue-800 dark:to-blue-900 hover:from-blue-100 hover:to-purple-100 hover:dark:from-blue-700 hover:dark:to-purple-700
}
@ -185,20 +185,25 @@ body {
@apply text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300;
}
.navbar-container {
@apply text-gray-700 dark:text-gray-50 bg-gradient-to-r from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800 rounded shadow-lg
@apply text-gray-700 dark:text-gray-50 bg-gradient-to-r from-blue-200 to-blue-300 dark:from-blue-800 dark:to-blue-900 rounded shadow-lg
}
.game-menu {
@apply flex justify-center items-center relative;
}
.text-shadow-custom {
text-shadow: 1px 1px 0px white, -1px -1px 0px white, 1px -1px 0px white, -1px 1px 0px white;
}
.menu-item {
@apply px-4 py-2 text-gray-800 dark:text-gray-100 font-bold text-lg transition-all duration-300 ease-in-out;
@apply mb-2 px-4 py-2 text-red-600 dark:text-red-300 font-bold text-lg transition-all duration-300 ease-in-out;
@apply hover:text-gray-500 hover:dark:text-gray-50 hover:transform hover:-translate-y-1;
}
.menu-item.active-link {
@apply px-4 py-2 text-gray-800 dark:text-gray-100 font-bold text-lg transition-all duration-300 ease-in-out scale-105;
@apply hover:text-gray-500 hover:dark:text-gray-50 hover:transform hover:-translate-y-1;
@apply rounded-t-md border-red-500 text-shadow-custom text-red-600 font-bold text-lg transition-all duration-300 ease-in-out scale-105;
@apply hover:text-red-600 hover:dark:text-gray-50 hover:transform hover:-translate-y-1;
/* Glow effect on text */
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
@ -237,7 +242,7 @@ body {
.app-card {
@apply transition-all duration-300 ease-in-out bg-gradient-to-br from-blue-200 to-purple-300 dark:from-blue-800 dark:to-purple-800 text-gray-800 dark:text-gray-100 shadow-md hover:shadow-lg;
@apply transition-all duration-300 ease-in-out bg-gradient-to-br from-blue-200 to-blue-300 dark:from-blue-800 dark:to-blue-900 text-gray-800 dark:text-gray-100 shadow-md hover:shadow-lg;
}
.app-card:hover {

16
web/src/components/PersonalityEntry.vue
View File

@ -12,8 +12,9 @@
<h3 class="font-bold text-xl text-gray-800 cursor-pointer" @click="toggleSelected">{{ personality.name }}</h3>
<p class="text-sm text-gray-600">Author: {{ personality.author }}</p>
<p class="text-sm text-gray-600">Version: {{ personality.version }}</p>
<p v-if="personality.language" class="text-sm text-gray-600">Language: {{ personality.language }}</p>
<p class="text-sm text-gray-600">Category: {{ personality.category }}</p>
<p v-if="personality.creation_date" class="text-sm text-gray-600">Creation Date: {{ formatDate(personality.creation_date) }}</p>
<p v-if="personality.last_update_date" class="text-sm text-gray-600">Last update Date: {{ formatDate(personality.last_update_date) }}</p>
</div>
</div>
@ -22,15 +23,6 @@
<p class="text-sm text-gray-600 h-20 overflow-y-auto" v-html="personality.description"></p>
</div>
<div v-if="personality.languages && select_language" class="mb-4">
<label for="languages" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Select Language:</label>
<select v-if="!isMounted" id="languages" v-model="personality.language"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
<option v-for="(item, index) in personality.languages" :key="index" :selected="item == personality.languages[0]">
{{ item }}
</option>
</select>
</div>
</div>
<div class="mt-auto pt-4 border-t">
@ -134,6 +126,10 @@ export default {
})
},
methods: {
formatDate(dateString) {
const options = { year: 'numeric', month: 'short', day: 'numeric' };
return new Date(dateString).toLocaleDateString(undefined, options);
},
showThumbnail() {
this.thumbnailVisible = true;
},

5
web/src/components/TopBar.vue
View File

@ -9,7 +9,10 @@
alt="Logo" title="LoLLMS WebUI">
</div>
<div class="flex flex-col justify-center">
<p class="text-2xl font-bold drop-shadow-md leading-none">LoLLMS</p>
<h1 class="text-2xl md:text-2xl font-bold text-red-600 mb-2"
style="text-shadow: 2px 2px 0px white, -2px -2px 0px white, 2px -2px 0px white, -2px 2px 0px white;">
LoLLMS
</h1>
<p class="text-gray-400 text-sm">One tool to rule them all</p>
</div>
</RouterLink>

2
web/src/views/SettingsView.vue
View File

@ -5278,7 +5278,7 @@ export default {
await axios.post("/copy_to_custom_personas",{client_id:this.$store.state.client_id, category: pers.personality.category, name: pers.personality.name})
},
async handleOpenFolder(pers){
await axios.post("/open_personality_folder",{client_id:this.$store.state.client_id, personality_folder: pers.personality.folder})
await axios.post("/open_personality_folder",{client_id:this.$store.state.client_id, personality_folder: pers.personality.category/pers.personality.folder})
},
onCancelInstall() {

2
zoos/personalities_zoo

@ -1 +1 @@
Subproject commit 60af981f780183eb9d28cd6e2eba2dd954b6d79f
Subproject commit 3d2db2bcc65e84648e069ce33eb9eea354681b66