fix(image): Use generic filename for downloaded images

Previously, when downloading a generated image, the filename was set to the AI's response text. This was not ideal as the response text could be long and contain characters that are not suitable for filenames.

This commit changes the behavior to use a generic, translatable filename for downloaded images. The new filename is 'ai_generated_image' (or its translation), which is more user-friendly and consistent.

src/lib/components/common/ImagePreview.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onDestroy, onMount } from 'svelte';
+	import { onDestroy, onMount, getContext } from 'svelte';
 	import panzoom, { type PanZoom } from 'panzoom';
 
 	import fileSaver from 'file-saver';
@@ -11,6 +11,8 @@
 	export let src = '';
 	export let alt = '';
 
+	const i18n = getContext('i18n');
+
 	let mounted = false;
 
 	let previewElement = null;
@@ -100,9 +102,10 @@
 
 							const mimeType = blob.type || 'image/png';
 							// create file name based on the MIME type, alt should be a valid file name with extension
-							const fileName = alt
-								? `${alt.replaceAll('.', '')}.${mimeType.split('/')[1]}`
-								: 'download.png';
+							const fileName = `${$i18n
+								.t('AI Generated Image')
+								.toLowerCase()
+								.replace(/ /g, '_')}.${mimeType.split('/')[1]}`;
 
 							// Use FileSaver to save the blob
 							saveAs(blob, fileName);
@@ -119,9 +122,10 @@
 									const blobWithType = new Blob([blob], { type: mimeType });
 
 									// create file name based on the MIME type, alt should be a valid file name with extension
-									const fileName = alt
-										? `${alt.replaceAll('.', '')}.${mimeType.split('/')[1]}`
-										: 'download.png';
+									const fileName = `${$i18n
+										.t('AI Generated Image')
+										.toLowerCase()
+										.replace(/ /g, '_')}.${mimeType.split('/')[1]}`;
 
 									// Use FileSaver to save the blob
 									saveAs(blobWithType, fileName);
@@ -146,9 +150,10 @@
 									const blobWithType = new Blob([blob], { type: mimeType });
 
 									// create file name based on the MIME type, alt should be a valid file name with extension
-									const fileName = alt
-										? `${alt.replaceAll('.', '')}.${mimeType.split('/')[1]}`
-										: 'download.png';
+									const fileName = `${$i18n
+										.t('AI Generated Image')
+										.toLowerCase()
+										.replace(/ /g, '_')}.${mimeType.split('/')[1]}`;
 
 									// Use FileSaver to save the blob
 									saveAs(blobWithType, fileName);

src/lib/i18n/locales/en-US/translation.json

@@ -74,6 +74,7 @@
 	"Advanced Parameters": "",
 	"Advanced Params": "",
 	"AI": "",
+	"AI Generated Image": "AI Generated Image",
 	"All": "",
 	"All Documents": "",
 	"All models deleted successfully": "",