From a74ec200b326cdc85a23dadc52fac9beb277cd2d Mon Sep 17 00:00:00 2001
From: Shirasawa <764798966@qq.com>
Date: Fri, 5 Sep 2025 20:07:12 +0800
Subject: [PATCH] feat: dynamically load heic2any to accelerate initial page
 loading speed

---
 src/lib/components/chat/MessageInput.svelte |  5 ++---
 src/lib/components/notes/NoteEditor.svelte  |  5 ++---
 src/lib/utils/index.ts                      | 12 ++++++++++++
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index d489b8278d..a29963ce52 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -5,7 +5,6 @@
 
 	import DOMPurify from 'dompurify';
 	import { marked } from 'marked';
-	import heic2any from 'heic2any';
 
 	import { toast } from 'svelte-sonner';
 
@@ -32,7 +31,7 @@
 	} from '$lib/stores';
 
 	import {
-		blobToFile,
+		convertHeicToJpeg,
 		compressImage,
 		createMessagesList,
 		extractContentFromFile,
@@ -765,7 +764,7 @@
 				};
 				reader.readAsDataURL(
 					file['type'] === 'image/heic'
-						? await heic2any({ blob: file, toType: 'image/jpeg' })
+						? await convertHeicToJpeg(file)
 						: file
 				);
 			} else {
diff --git a/src/lib/components/notes/NoteEditor.svelte b/src/lib/components/notes/NoteEditor.svelte
index 4cd1e6b681..0fd4c0084a 100644
--- a/src/lib/components/notes/NoteEditor.svelte
+++ b/src/lib/components/notes/NoteEditor.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { getContext, onDestroy, onMount, tick } from 'svelte';
 	import { v4 as uuidv4 } from 'uuid';
-	import heic2any from 'heic2any';
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
 
@@ -26,7 +25,7 @@
 
 	import { PaneGroup, Pane, PaneResizer } from 'paneforge';
 
-	import { compressImage, copyToClipboard, splitStream } from '$lib/utils';
+	import { compressImage, copyToClipboard, splitStream, convertHeicToJpeg } from '$lib/utils';
 	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
 	import { uploadFile } from '$lib/apis/files';
 	import { chatCompletion, generateOpenAIChatCompletion } from '$lib/apis/openai';
@@ -547,7 +546,7 @@ ${content}
 
 				reader.readAsDataURL(
 					file['type'] === 'image/heic'
-						? await heic2any({ blob: file, toType: 'image/jpeg' })
+						? await convertHeicToJpeg(file)
 						: file
 				);
 			});
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index 9816d63d53..744704fa63 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -1528,3 +1528,15 @@ export const getAge = (birthDate) => {
 	}
 	return age.toString();
 };
+
+export const convertHeicToJpeg = async (file: File) => {
+	const { default: heic2any } = await import('heic2any');
+	try {
+		return await heic2any({ blob: file, toType: 'image/jpeg' });
+	} catch (err: any) {
+		if (err?.message?.includes('already browser readable')) {
+			return file;
+		}
+		throw err;
+	}
+};