From ef1f15314473abd8329e39827239191fd556030e Mon Sep 17 00:00:00 2001
From: Kun Chen <3233006+atinylittleshell@users.noreply.github.com>
Date: Sat, 11 Oct 2025 23:08:50 -0700
Subject: [PATCH 1/2] Normalize image tag text export

---
 apps/web/src/components/ImageItem.tsx     | 17 +++++++++++++++++
 apps/web/src/components/ImageSelector.tsx | 16 ++++++++++++++++
 apps/web/src/lib/types.ts                 |  1 +
 apps/web/src/routes/index.tsx             |  6 ++++++
 4 files changed, 40 insertions(+)

diff --git a/apps/web/src/components/ImageItem.tsx b/apps/web/src/components/ImageItem.tsx
index c643382..ae8d5a4 100644
--- a/apps/web/src/components/ImageItem.tsx
+++ b/apps/web/src/components/ImageItem.tsx
@@ -88,6 +88,8 @@ const ImageItem = (
     outputSizingMode,
     thumbnailScale,
     onDelete,
+    tag,
+    onTagChange,
   }: {
     file: File;
     outputSize: Size;
@@ -95,6 +97,8 @@ const ImageItem = (
     outputSizingMode: OutputSizingMode;
     thumbnailScale: number;
     onDelete: () => void;
+    tag: string;
+    onTagChange: (value: string) => void;
   },
   ref: Ref<AvatarEditor>,
 ) => {
@@ -254,6 +258,19 @@ const ImageItem = (
             }}
           />
         </div>
+        <div className="form-control mt-2">
+          <label className="label py-0">
+            <span className="label-text text-xs">Tags</span>
+          </label>
+          <textarea
+            className="textarea textarea-bordered textarea-xs w-full"
+            placeholder="Enter tags for this image"
+            value={tag}
+            onChange={(e) => {
+              onTagChange(e.target.value);
+            }}
+          />
+        </div>
       </div>
     </div>
   );
diff --git a/apps/web/src/components/ImageSelector.tsx b/apps/web/src/components/ImageSelector.tsx
index 536d7b0..ad5d515 100644
--- a/apps/web/src/components/ImageSelector.tsx
+++ b/apps/web/src/components/ImageSelector.tsx
@@ -14,6 +14,7 @@ type ImageFile = {
   id: string;
   file: File;
   editorRef?: AvatarEditor;
+  tag: string;
 };
 
 function TbPhotoPlus(props: SVGProps<SVGSVGElement>) {
@@ -67,6 +68,7 @@ function ImageSelectorImpl({
         ...acceptedFiles.map((file) => ({
           id: typeid().toString(),
           file,
+          tag: '',
         })),
         ...prev,
       ]);
@@ -87,6 +89,7 @@ function ImageSelectorImpl({
             id: file.id,
             file: file.file,
             blob: await getImageBlobFromEditor(file.editorRef, imageType, outputSizingMode),
+            tag: file.tag,
           });
         }
       }
@@ -179,6 +182,19 @@ function ImageSelectorImpl({
           onDelete={() => {
             setFiles((prev) => prev.filter((f) => f.id !== file.id));
           }}
+          tag={file.tag}
+          onTagChange={(value) => {
+            setFiles((prev) =>
+              prev.map((f) =>
+                f.id === file.id
+                  ? {
+                      ...f,
+                      tag: value,
+                    }
+                  : f,
+              ),
+            );
+          }}
         />
       ))}
     </div>
diff --git a/apps/web/src/lib/types.ts b/apps/web/src/lib/types.ts
index 2a9b8b2..4c3c06d 100644
--- a/apps/web/src/lib/types.ts
+++ b/apps/web/src/lib/types.ts
@@ -7,6 +7,7 @@ export type ProcessedImage = {
   id: string;
   file: File;
   blob: Blob;
+  tag?: string;
 };
 
 export type Size = {
diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx
index b8ca291..70d44c7 100644
--- a/apps/web/src/routes/index.tsx
+++ b/apps/web/src/routes/index.tsx
@@ -163,6 +163,12 @@ export default component$(() => {
 
                   const newFileName = fileName.replace(/\.[^.]+$/, '') + `.${imageSelectorContext.outputFormat}`;
                   zip.file(newFileName, result.blob);
+                  if (result.tag && result.tag.trim().length > 0) {
+                    const textFileName = newFileName.replace(/\.[^.]+$/, '.txt');
+                    const normalizedTag = result.tag.replace(/\r\n/g, '\n').trim();
+                    const tagContent = normalizedTag.endsWith('\n') ? normalizedTag : normalizedTag + '\n';
+                    zip.file(textFileName, tagContent);
+                  }
                 }
 
                 const zipBlob = await zip.generateAsync({ type: 'blob' });

From 028b55a628db7b9ff9ed297a2c914062ef738b38 Mon Sep 17 00:00:00 2001
From: Kun Chen <3233006+atinylittleshell@users.noreply.github.com>
Date: Sat, 11 Oct 2025 23:24:32 -0700
Subject: [PATCH 2/2] Rename tagging UI to captions

---
 apps/web/src/components/ImageItem.tsx     | 18 +++++++++---------
 apps/web/src/components/ImageSelector.tsx | 12 ++++++------
 apps/web/src/lib/types.ts                 |  2 +-
 apps/web/src/routes/index.tsx             | 10 ++++++----
 4 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/apps/web/src/components/ImageItem.tsx b/apps/web/src/components/ImageItem.tsx
index ae8d5a4..f1161da 100644
--- a/apps/web/src/components/ImageItem.tsx
+++ b/apps/web/src/components/ImageItem.tsx
@@ -88,8 +88,8 @@ const ImageItem = (
     outputSizingMode,
     thumbnailScale,
     onDelete,
-    tag,
-    onTagChange,
+    caption,
+    onCaptionChange,
   }: {
     file: File;
     outputSize: Size;
@@ -97,8 +97,8 @@ const ImageItem = (
     outputSizingMode: OutputSizingMode;
     thumbnailScale: number;
     onDelete: () => void;
-    tag: string;
-    onTagChange: (value: string) => void;
+    caption: string;
+    onCaptionChange: (value: string) => void;
   },
   ref: Ref<AvatarEditor>,
 ) => {
@@ -259,15 +259,15 @@ const ImageItem = (
           />
         </div>
         <div className="form-control mt-2">
-          <label className="label py-0">
-            <span className="label-text text-xs">Tags</span>
+          <label className="label">
+            <span className="label-text text-xs">Caption</span>
           </label>
           <textarea
             className="textarea textarea-bordered textarea-xs w-full"
-            placeholder="Enter tags for this image"
-            value={tag}
+            placeholder="Caption will be stored in a text file alongside each image after download"
+            value={caption}
             onChange={(e) => {
-              onTagChange(e.target.value);
+              onCaptionChange(e.target.value);
             }}
           />
         </div>
diff --git a/apps/web/src/components/ImageSelector.tsx b/apps/web/src/components/ImageSelector.tsx
index ad5d515..01cb8d0 100644
--- a/apps/web/src/components/ImageSelector.tsx
+++ b/apps/web/src/components/ImageSelector.tsx
@@ -14,7 +14,7 @@ type ImageFile = {
   id: string;
   file: File;
   editorRef?: AvatarEditor;
-  tag: string;
+  caption: string;
 };
 
 function TbPhotoPlus(props: SVGProps<SVGSVGElement>) {
@@ -68,7 +68,7 @@ function ImageSelectorImpl({
         ...acceptedFiles.map((file) => ({
           id: typeid().toString(),
           file,
-          tag: '',
+          caption: '',
         })),
         ...prev,
       ]);
@@ -89,7 +89,7 @@ function ImageSelectorImpl({
             id: file.id,
             file: file.file,
             blob: await getImageBlobFromEditor(file.editorRef, imageType, outputSizingMode),
-            tag: file.tag,
+            caption: file.caption,
           });
         }
       }
@@ -182,14 +182,14 @@ function ImageSelectorImpl({
           onDelete={() => {
             setFiles((prev) => prev.filter((f) => f.id !== file.id));
           }}
-          tag={file.tag}
-          onTagChange={(value) => {
+          caption={file.caption}
+          onCaptionChange={(value) => {
             setFiles((prev) =>
               prev.map((f) =>
                 f.id === file.id
                   ? {
                       ...f,
-                      tag: value,
+                      caption: value,
                     }
                   : f,
               ),
diff --git a/apps/web/src/lib/types.ts b/apps/web/src/lib/types.ts
index 4c3c06d..9def4ec 100644
--- a/apps/web/src/lib/types.ts
+++ b/apps/web/src/lib/types.ts
@@ -7,7 +7,7 @@ export type ProcessedImage = {
   id: string;
   file: File;
   blob: Blob;
-  tag?: string;
+  caption?: string;
 };
 
 export type Size = {
diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx
index 70d44c7..7f7c38a 100644
--- a/apps/web/src/routes/index.tsx
+++ b/apps/web/src/routes/index.tsx
@@ -163,11 +163,13 @@ export default component$(() => {
 
                   const newFileName = fileName.replace(/\.[^.]+$/, '') + `.${imageSelectorContext.outputFormat}`;
                   zip.file(newFileName, result.blob);
-                  if (result.tag && result.tag.trim().length > 0) {
+                  if (result.caption && result.caption.trim().length > 0) {
                     const textFileName = newFileName.replace(/\.[^.]+$/, '.txt');
-                    const normalizedTag = result.tag.replace(/\r\n/g, '\n').trim();
-                    const tagContent = normalizedTag.endsWith('\n') ? normalizedTag : normalizedTag + '\n';
-                    zip.file(textFileName, tagContent);
+                    const normalizedCaption = result.caption.replace(/\r\n/g, '\n').trim();
+                    const captionContent = normalizedCaption.endsWith('\n')
+                      ? normalizedCaption
+                      : normalizedCaption + '\n';
+                    zip.file(textFileName, captionContent);
                   }
                 }