refactor: Improve avatar asset processing

Separates asset analysis into distinct steps to accurately capture face landmarks.
Introduces `fileToDataUrl` utility and modifies `stitchAssets` to accept image source strings, reducing redundant file processing and improving clarity.

services/imageService.ts

@@ -20,16 +20,14 @@ export const loadImage = (src: string): Promise<HTMLImageElement> => {
 };
 
 export const stitchAssets = async (
-  base: File,
-  blink?: File,
-  talk?: File
+  baseSrc: string,
+  blinkSrc?: string,
+  talkSrc?: string
 ): Promise<{ imageUrl: string; mainBody: Rect; textureClosedEye?: Rect; textureOpenMouth?: Rect }> => {
     // Load images
-    const baseData = await fileToDataUrl(base);
-    const baseImg = await loadImage(baseData);
-
-    const blinkImg = blink ? await loadImage(await fileToDataUrl(blink)) : null;
-    const talkImg = talk ? await loadImage(await fileToDataUrl(talk)) : null;
+    const baseImg = await loadImage(baseSrc);
+    const blinkImg = blinkSrc ? await loadImage(blinkSrc) : null;
+    const talkImg = talkSrc ? await loadImage(talkSrc) : null;
 
     // Layout: Base on Left. Sidebar on Right containing Blink (top) and Talk (bottom).
     // Sidebar width = max(blink.width, talk.width)
@@ -38,7 +36,7 @@ export const stitchAssets = async (
     // If there are no variants, just return the base image as is
     if (sidebarWidth === 0) {
         return {
-            imageUrl: baseData,
+            imageUrl: baseSrc,
             mainBody: { x: 0, y: 0, w: 1, h: 1 }
         };
     }