Global image display modal with download and auto-save functionality for ARIA
A global image display system that shows generated or uploaded images in a beautiful popup modal with download functionality and automatic server-side saving.
images/ folder// Show an image in the modal
showImageModal({
imageData: 'base64-encoded-image-data',
mediaType: 'image/png', // or 'image/jpeg', 'image/webp'
title: 'Generated Image', // Optional title
suggestedFilename: 'my-image' // Optional default filename
});
// Show from URL
showImageModal({
imageUrl: 'https://example.com/image.png',
title: 'Image from URL'
});
// Programmatically close
closeImageModal();
// Disable auto-save for specific images
showImageModal({
imageData: '...',
mediaType: 'image/png',
autoSave: false // Won't save to server
});
All images displayed through showImageModal() are automatically saved to the server's images/ folder with:
suggestedFilename plus timestamp for uniquenessImages are saved to: <project-root>/images/
Filename format: {suggestedFilename}_{YYYYMMDD_HHMMSS}.{ext}
Example: aria-generated-1735600000000_20251231_120000.png
// Manually save an image to server
ws.send(JSON.stringify({
type: 'save_image',
imageData: 'base64-encoded-data',
filename: 'my-image',
mediaType: 'image/png'
}));
// List saved images
ws.send(JSON.stringify({
type: 'list_images'
}));
// Response: image_saved
// { success: true, filepath: '/path/to/images/my-image_20251231_120000.png', filename: 'my-image_20251231_120000.png' }
// Response: images_list
// { images: [...], count: 10, folder: '/path/to/images' }
The modal dispatches custom events:
// Image downloaded by user
document.addEventListener('imageModalDownload', (e) => {
console.log('Downloaded:', e.detail.filename);
});
// Image auto-saved to server
document.addEventListener('imageAutoSaved', (e) => {
console.log('Auto-saved to:', e.detail.filepath);
});
// Modal opened
document.addEventListener('imageModalOpen', (e) => {
console.log('Opened with:', e.detail.title);
});
// Modal closed
document.addEventListener('imageModalClose', () => {
console.log('Modal closed');
});
When ARIA generates images via Gemini, automatically display in modal:
// After receiving pres_image_generated or imagegen_result
if (data.image && data.image.data) {
showImageModal({
imageData: data.image.data,
mediaType: data.image.mediaType || 'image/png',
title: 'Generated Image',
suggestedFilename: `aria-image-${Date.now()}`
});
}
Display slide images when generated or clicked:
// In presentation slide image generation
showImageModal({
imageData: slideImage.data,
mediaType: slideImage.mediaType,
title: `Slide ${slideIndex + 1} Image`,
suggestedFilename: `slide-${slideIndex + 1}-image`
});
Display images shared in conversation:
// When user shares an image or ARIA generates one
showImageModal({
imageUrl: imageUrl,
title: 'Shared Image'
});
The modal uses CSS variables for theming:
:root {
--image-modal-bg: rgba(0, 0, 0, 0.9);
--image-modal-accent: #3b82f6;
--image-modal-text: #ffffff;
--image-modal-input-bg: #1e293b;
--image-modal-border: #334155;
}
| Key | Action |
|---|---|
| ESC | Close modal |
| Enter | Download with current filename |
| Tab | Navigate between filename input and download button |
ARIA is aware of this skill and can:
images/ folder for later accessWhen generating images, ARIA should inform the user:
"I've generated your image! It's now displayed in the viewer and automatically saved to your images folder. You can also download it using the button in the modal."
Location: <project-root>/images/
This folder stores all auto-saved images. Files are organized with timestamps to prevent duplicates.
To access saved images:
images/ folder directly in your file explorerlist_images WebSocket command to get a list