mirror of
https://github.com/mudler/LocalAI.git
synced 2025-05-28 14:35:00 +00:00
feat(ui): complete design overhaul (#4942)
This PR changes entirely the UI look and feeling. It updates all sections and makes it also mobile-ready. Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
This commit is contained in:
Ettore Di Giacinto
GitHub
parent
d732e261a4
commit
6b46c52789
17 changed files with 1573 additions and 978 deletions
|
|
@ -1,64 +1,246 @@
|
|||
// Initialize Alpine store for API key management
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.store('chat', {
|
||||
get key() {
|
||||
return localStorage.getItem('key') || '';
|
||||
},
|
||||
set key(value) {
|
||||
localStorage.setItem('key', value);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function submitKey(event) {
|
||||
event.preventDefault();
|
||||
localStorage.setItem("key", document.getElementById("apiKey").value);
|
||||
document.getElementById("apiKey").blur();
|
||||
}
|
||||
event.preventDefault();
|
||||
const keyValue = document.getElementById("apiKey").value;
|
||||
localStorage.setItem("key", keyValue);
|
||||
|
||||
// Show brief visual confirmation
|
||||
const button = event.submitter;
|
||||
const originalIcon = button.innerHTML;
|
||||
button.innerHTML = '<i class="fa-solid fa-check text-green-400"></i>';
|
||||
button.classList.add('bg-green-600');
|
||||
button.classList.remove('bg-blue-600', 'hover:bg-blue-700');
|
||||
|
||||
setTimeout(() => {
|
||||
button.innerHTML = originalIcon;
|
||||
button.classList.remove('bg-green-600');
|
||||
button.classList.add('bg-blue-600', 'hover:bg-blue-700');
|
||||
}, 1000);
|
||||
|
||||
document.getElementById("apiKey").blur();
|
||||
}
|
||||
|
||||
function genAudio(event) {
|
||||
event.preventDefault();
|
||||
const input = document.getElementById("input").value;
|
||||
const key = localStorage.getItem("key");
|
||||
|
||||
tts(key, input);
|
||||
}
|
||||
|
||||
async function tts(key, input) {
|
||||
document.getElementById("loader").style.display = "block";
|
||||
document.getElementById("input").value = "";
|
||||
document.getElementById("input").disabled = true;
|
||||
|
||||
const model = document.getElementById("tts-model").value;
|
||||
const response = await fetch("tts", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
Authorization: `Bearer ${key}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
model: model,
|
||||
input: input,
|
||||
}),
|
||||
});
|
||||
if (!response.ok) {
|
||||
const jsonData = await response.json(); // Now safely parse JSON
|
||||
var div = document.getElementById('result');
|
||||
div.innerHTML = '<p style="color:red;">Error: ' +jsonData.error.message + '</p>';
|
||||
if (!input.trim()) {
|
||||
showNotification('error', 'Please enter text to convert to speech');
|
||||
return;
|
||||
}
|
||||
|
||||
var div = document.getElementById('result'); // Get the div by its ID
|
||||
var link=document.createElement('a');
|
||||
link.className = "m-2 float-right inline-block rounded bg-primary px-6 pb-2.5 mb-3 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong";
|
||||
link.innerHTML = "<i class='fa-solid fa-download'></i> Download result";
|
||||
const blob = await response.blob();
|
||||
link.href=window.URL.createObjectURL(blob);
|
||||
if (!key) {
|
||||
showNotification('warning', 'API key is not set. Please set your API key first.');
|
||||
return;
|
||||
}
|
||||
|
||||
div.innerHTML = ''; // Clear the existing content of the div
|
||||
div.appendChild(link); // Add the new img element to the div
|
||||
console.log(link)
|
||||
document.getElementById("loader").style.display = "none";
|
||||
document.getElementById("input").disabled = false;
|
||||
tts(key, input);
|
||||
}
|
||||
|
||||
function showNotification(type, message) {
|
||||
// Remove any existing notification
|
||||
const existingNotification = document.getElementById('notification');
|
||||
if (existingNotification) {
|
||||
existingNotification.remove();
|
||||
}
|
||||
|
||||
// Create new notification
|
||||
const notification = document.createElement('div');
|
||||
notification.id = 'notification';
|
||||
notification.classList.add(
|
||||
'fixed', 'top-24', 'right-4', 'z-50', 'p-4', 'rounded-lg', 'shadow-lg',
|
||||
'transform', 'transition-all', 'duration-300', 'ease-in-out', 'translate-y-0',
|
||||
'flex', 'items-center', 'gap-2'
|
||||
);
|
||||
|
||||
// Style based on notification type
|
||||
if (type === 'error') {
|
||||
notification.classList.add('bg-red-900/90', 'border', 'border-red-700', 'text-red-200');
|
||||
notification.innerHTML = '<i class="fas fa-circle-exclamation text-red-400 mr-2"></i>' + message;
|
||||
} else if (type === 'warning') {
|
||||
notification.classList.add('bg-yellow-900/90', 'border', 'border-yellow-700', 'text-yellow-200');
|
||||
notification.innerHTML = '<i class="fas fa-triangle-exclamation text-yellow-400 mr-2"></i>' + message;
|
||||
} else if (type === 'success') {
|
||||
notification.classList.add('bg-green-900/90', 'border', 'border-green-700', 'text-green-200');
|
||||
notification.innerHTML = '<i class="fas fa-circle-check text-green-400 mr-2"></i>' + message;
|
||||
} else {
|
||||
notification.classList.add('bg-blue-900/90', 'border', 'border-blue-700', 'text-blue-200');
|
||||
notification.innerHTML = '<i class="fas fa-circle-info text-blue-400 mr-2"></i>' + message;
|
||||
}
|
||||
|
||||
// Add close button
|
||||
const closeBtn = document.createElement('button');
|
||||
closeBtn.innerHTML = '<i class="fas fa-xmark"></i>';
|
||||
closeBtn.classList.add('ml-auto', 'text-gray-400', 'hover:text-white', 'transition-colors');
|
||||
closeBtn.onclick = () => {
|
||||
notification.classList.add('opacity-0', 'translate-y-[-20px]');
|
||||
setTimeout(() => notification.remove(), 300);
|
||||
};
|
||||
notification.appendChild(closeBtn);
|
||||
|
||||
// Add to DOM
|
||||
document.body.appendChild(notification);
|
||||
|
||||
// Animate in
|
||||
setTimeout(() => {
|
||||
notification.classList.add('opacity-0', 'translate-y-[-20px]');
|
||||
notification.offsetHeight; // Force reflow
|
||||
notification.classList.remove('opacity-0', 'translate-y-[-20px]');
|
||||
}, 10);
|
||||
|
||||
// Auto dismiss after 5 seconds
|
||||
setTimeout(() => {
|
||||
if (document.getElementById('notification')) {
|
||||
notification.classList.add('opacity-0', 'translate-y-[-20px]');
|
||||
setTimeout(() => notification.remove(), 300);
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
async function tts(key, input) {
|
||||
// Show loader and prepare UI
|
||||
const loader = document.getElementById("loader");
|
||||
const inputField = document.getElementById("input");
|
||||
const resultDiv = document.getElementById("result");
|
||||
|
||||
loader.style.display = "block";
|
||||
inputField.value = "";
|
||||
inputField.disabled = true;
|
||||
resultDiv.innerHTML = '<div class="text-center text-gray-400 italic">Processing your request...</div>';
|
||||
|
||||
// Get the model and make API request
|
||||
const model = document.getElementById("tts-model").value;
|
||||
try {
|
||||
const response = await fetch("tts", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
Authorization: `Bearer ${key}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
model: model,
|
||||
input: input,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const jsonData = await response.json();
|
||||
resultDiv.innerHTML = `
|
||||
<div class="bg-red-900/30 border border-red-700/50 rounded-lg p-4 text-center">
|
||||
<i class="fas fa-circle-exclamation text-red-400 text-2xl mb-2"></i>
|
||||
<p class="text-red-300 font-medium">${jsonData.error.message || 'An error occurred'}</p>
|
||||
</div>
|
||||
`;
|
||||
showNotification('error', 'Failed to generate audio');
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle successful response
|
||||
const blob = await response.blob();
|
||||
const audioUrl = window.URL.createObjectURL(blob);
|
||||
|
||||
// Create audio player
|
||||
const audioPlayer = document.createElement('div');
|
||||
audioPlayer.className = 'flex flex-col items-center space-y-4 w-full';
|
||||
|
||||
// Create audio element with styled controls
|
||||
const audio = document.createElement('audio');
|
||||
audio.controls = true;
|
||||
audio.src = audioUrl;
|
||||
audio.className = 'w-full my-4';
|
||||
audioPlayer.appendChild(audio);
|
||||
|
||||
// Create action buttons container
|
||||
const actionButtons = document.createElement('div');
|
||||
actionButtons.className = 'flex flex-wrap justify-center gap-3';
|
||||
|
||||
// Download button
|
||||
const downloadLink = document.createElement('a');
|
||||
downloadLink.href = audioUrl;
|
||||
downloadLink.download = `tts-${model}-${new Date().toISOString().slice(0, 10)}.mp3`;
|
||||
downloadLink.className = 'group flex items-center bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg';
|
||||
downloadLink.innerHTML = `
|
||||
<i class="fas fa-download mr-2"></i>
|
||||
<span>Download</span>
|
||||
<i class="fas fa-arrow-right opacity-0 group-hover:opacity-100 group-hover:translate-x-2 ml-2 transition-all duration-300"></i>
|
||||
`;
|
||||
actionButtons.appendChild(downloadLink);
|
||||
|
||||
// Replay button
|
||||
const replayButton = document.createElement('button');
|
||||
replayButton.className = 'group flex items-center bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg';
|
||||
replayButton.innerHTML = `
|
||||
<i class="fas fa-rotate-right mr-2"></i>
|
||||
<span>Replay</span>
|
||||
`;
|
||||
replayButton.onclick = () => audio.play();
|
||||
actionButtons.appendChild(replayButton);
|
||||
|
||||
// Add text display
|
||||
const textDisplay = document.createElement('div');
|
||||
textDisplay.className = 'mt-4 p-4 bg-gray-800/50 border border-gray-700/50 rounded-lg text-gray-300 text-center italic';
|
||||
textDisplay.textContent = `"${input}"`;
|
||||
|
||||
// Add all elements to result div
|
||||
audioPlayer.appendChild(actionButtons);
|
||||
resultDiv.innerHTML = '';
|
||||
resultDiv.appendChild(audioPlayer);
|
||||
resultDiv.appendChild(textDisplay);
|
||||
|
||||
// Play audio automatically
|
||||
audio.play();
|
||||
|
||||
// Show success notification
|
||||
showNotification('success', 'Audio generated successfully');
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error generating audio:', error);
|
||||
resultDiv.innerHTML = `
|
||||
<div class="bg-red-900/30 border border-red-700/50 rounded-lg p-4 text-center">
|
||||
<i class="fas fa-circle-exclamation text-red-400 text-2xl mb-2"></i>
|
||||
<p class="text-red-300 font-medium">Network error: Failed to connect to the server</p>
|
||||
</div>
|
||||
`;
|
||||
showNotification('error', 'Network error occurred');
|
||||
} finally {
|
||||
// Reset UI state
|
||||
loader.style.display = "none";
|
||||
inputField.disabled = false;
|
||||
inputField.focus();
|
||||
}
|
||||
}
|
||||
|
||||
// Set up event listeners when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
document.getElementById("key").addEventListener("submit", submitKey);
|
||||
document.getElementById("input").focus();
|
||||
}
|
||||
|
||||
document.getElementById("key").addEventListener("submit", submitKey);
|
||||
document.getElementById("input").focus();
|
||||
document.getElementById("tts").addEventListener("submit", genAudio);
|
||||
document.getElementById("loader").style.display = "none";
|
||||
|
||||
const storeKey = localStorage.getItem("key");
|
||||
if (storeKey) {
|
||||
document.getElementById("apiKey").value = storeKey;
|
||||
}
|
||||
document.getElementById("tts").addEventListener("submit", genAudio);
|
||||
document.getElementById("loader").style.display = "none";
|
||||
|
||||
// Initialize stored API key if available
|
||||
const storeKey = localStorage.getItem("key");
|
||||
if (storeKey) {
|
||||
document.getElementById("apiKey").value = storeKey;
|
||||
}
|
||||
|
||||
// Add basic keyboard shortcuts
|
||||
document.addEventListener('keydown', (e) => {
|
||||
// Submit on Ctrl+Enter
|
||||
if (e.key === 'Enter' && e.ctrlKey && document.activeElement.id === 'input') {
|
||||
e.preventDefault();
|
||||
document.getElementById("tts").dispatchEvent(new Event('submit'));
|
||||
}
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue