From d65869e2ab1f79ae61bca11effc30e7b4d0e2fb9 Mon Sep 17 00:00:00 2001
From: Weitheng Haw <wei.thenghaw@disneystreaming.com>
Date: Tue, 28 Jan 2025 10:22:46 +0000
Subject: [PATCH] Use transparent pixel as placeholder

---
 web/src/pages/FaceLibrary.tsx | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/web/src/pages/FaceLibrary.tsx b/web/src/pages/FaceLibrary.tsx
index 689edbd32..c853eda61 100644
--- a/web/src/pages/FaceLibrary.tsx
+++ b/web/src/pages/FaceLibrary.tsx
@@ -133,9 +133,16 @@ export default function FaceLibrary() {
     
     setIsCreatingFace(true);
     try {
+      // Create a 1x1 transparent WebP image
+      const canvas = document.createElement('canvas');
+      canvas.width = 1;
+      canvas.height = 1;
+      const blob = await new Promise<Blob>((resolve) => 
+        canvas.toBlob((b) => resolve(b!), 'image/webp')
+      );
+
       const formData = new FormData();
-      const emptyBlob = new Blob([], { type: 'image/webp' });
-      formData.append('file', emptyBlob, 'empty.webp');
+      formData.append('file', blob, 'placeholder.webp');
 
       const resp = await axios.post(`/faces/${newFaceName}`, formData, {
         headers: {
@@ -172,9 +179,16 @@ export default function FaceLibrary() {
 
     setIsRenaming(true);
     try {
+      // Create a 1x1 transparent WebP image for the new face directory
+      const canvas = document.createElement('canvas');
+      canvas.width = 1;
+      canvas.height = 1;
+      const blob = await new Promise<Blob>((resolve) => 
+        canvas.toBlob((b) => resolve(b!), 'image/webp')
+      );
+
       const formData = new FormData();
-      const emptyBlob = new Blob([], { type: 'image/webp' });
-      formData.append('file', emptyBlob, 'empty.webp');
+      formData.append('file', blob, 'placeholder.webp');
       await axios.post(`/faces/${renameData.newName}`, formData);
 
       const oldFaceImages = faceData[renameData.oldName] || [];