Spaces:
Runtime error
Runtime error
File size: 3,133 Bytes
424f388 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
function loadImagesInput(event) {
if (event.key === 'Enter') {
loadImages();
}
}
function loadImages() {
const outputDir = document.getElementById('output-directory').value;
fetch(`/images/${outputDir}`)
.then(response => response.json())
.then(files => {
// Filter files to only include those with the .png extension
images = files.filter(file => file.endsWith('.png')).map(file => `/image/${outputDir}/${file}`);
fileNames = files.filter(file => file.endsWith('.png')); // Filter file names as well
currentIndex = 0; // Reset index when new images are loaded
if (images.length > 0) {
displayImage(currentIndex);
} else {
document.getElementsById('image-display').src = "";
document.getElementById('expression-image-name').textContent = "No PNG images found.";
}
})
.catch(error => {
console.error('Error loading images:', error);
alert('Failed to load images.');
});
}
function navigate(direction) {
if (images.length > 0) {
currentIndex += direction;
// Wrap around the navigation
if (currentIndex < 0) {
currentIndex = images.length - 1;
} else if (currentIndex >= images.length) {
currentIndex = 0;
}
displayImage(currentIndex);
}
}
function displayImage(index) {
document.getElementById('image-display').src = images[index];
//document.getElementById('image-name').textContent = "Expression: " + fileNames[index]);
//document.getElementById('image-name').textContent = "Expression: " + fileNames[index].substring(0, fileNames[index].lastIndexOf('.'));
document.getElementById('expression-image-name').textContent = fileNames[index].replace(/\.[^.]+$/, '').charAt(0).toUpperCase() + fileNames[index].replace(/\.[^.]+$/, '').slice(1).toLowerCase();
}
function calculateAspectRatio(image) {
const naturalWidth = image.naturalWidth;
const naturalHeight = image.naturalHeight;
if (naturalWidth && naturalHeight) {
return naturalWidth / naturalHeight;
} else {
console.error("Error: Image dimensions not available.");
return 1; // Default to 1:1 aspect ratio in case of errors
}
}
// Attach event listeners to navigation buttons
document.querySelector('.nav-left').addEventListener('click', function () {
navigate(-1); // Navigate left
});
document.querySelector('.nav-right').addEventListener('click', function () {
navigate(1); // Navigate right
});
document.querySelector('.load-images').addEventListener('click', function () {
loadImages(); // Initial load of images
});
document.querySelector('#output-directory').addEventListener('change', function () {
loadImages();
});
document.addEventListener('keydown', function (event) {
if (event.key === 'ArrowLeft') {
navigate(-1);
// Add your custom logic here
} else if (event.key === 'ArrowRight') {
navigate(1);
// Add your custom logic here
}
}); |