Image Modal

Auto-Save Feature

All images displayed through showImageModal() are automatically saved to the server's images/ folder with:

• Automatic filename: Based on suggestedFilename plus timestamp for uniqueness
• Format preservation: Maintains original image format (PNG, JPG, WebP, GIF)
• No duplicates: Timestamp ensures each save creates a unique file

Server Storage

Images are saved to: <project-root>/images/

Filename format: {suggestedFilename}_{YYYYMMDD_HHMMSS}.{ext}

Example: aria-generated-1735600000000_20251231_120000.png

WebSocket API

// 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' }

Events

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');
});

Integration Points

Image Generation (Gemini)

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()}`
    });
}

Presentation Studio

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`
});

Chat Images

Display images shared in conversation:

// When user shares an image or ARIA generates one
showImageModal({
    imageUrl: imageUrl,
    title: 'Shared Image'
});

Styling

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

Keyboard Shortcuts

ARIA Integration

ARIA is aware of this skill and can:

1. Automatically display generated images in the modal
2. Suggest filenames based on context
3. Announce when images are ready for viewing/download
4. Auto-save all generated images to the images/ folder for later access

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

Images Folder

Location: <project-root>/images/

This folder stores all auto-saved images. Files are organized with timestamps to prevent duplicates.

To access saved images:

• Browse the images/ folder directly in your file explorer
• Use the list_images WebSocket command to get a list
• Images persist across sessions