move code to utils/file

app/components/sd.tsx

@@ -29,10 +29,9 @@ import {
   showConfirm,
   showImageModal,
   showModal,
-  IndexDBImage,
 } from "@/app/components/ui-lib";
 import { func } from "prop-types";
-import { useFileDB } from "@/app/utils/file";
+import { useFileDB, IndexDBImage } from "@/app/utils/file";
 
 function getSdTaskStatus(item: any) {
   let s: string;

app/components/ui-lib.tsx

@@ -511,29 +511,3 @@ export function Selector<T>(props: {
     </div>
   );
 }
-
-export function IndexDBImage({ src, alt, onClick, db, className }) {
-  const [data, setData] = useState(src);
-  const imgId = useMemo(
-    () => src.replace("indexeddb://", "").split("@").pop(),
-    [src],
-  );
-  useEffect(() => {
-    db.getByID(imgId)
-      .then(({ data }) => {
-        setData(`data:image/png;base64,${data}`);
-      })
-      .catch((e) => {
-        setData(src);
-      });
-  }, [src, imgId]);
-
-  return (
-    <img
-      className={className}
-      src={data}
-      alt={alt}
-      onClick={(e) => onClick(data, e)}
-    />
-  );
-}

app/store/sd.ts

@@ -3,6 +3,7 @@ import { showToast } from "@/app/components/ui-lib";
 import { getHeaders } from "@/app/client/api";
 import { createPersistStore } from "@/app/utils/store";
 import { nanoid } from "nanoid";
+import { saveFileData } from "@/app/utils/file";
 
 export const useSdStore = createPersistStore<
   {
@@ -68,11 +69,10 @@ export const useSdStore = createPersistStore<
               return;
             }
             if (resData.finish_reason === "SUCCESS") {
-              db.add({ id: data.id, data: resData.image });
               this.updateDraw({
                 ...data,
                 status: "success",
-                img_data: `indexeddb://${StoreKey.File}@${data.id}`,
+                img_data: saveFileData(db, data.id, resData.image),
               });
             } else {
               this.updateDraw({

app/utils/file.tsx

@@ -1,4 +1,4 @@
-"use client";
+import { useState, useMemo, useEffect } from "react";
 import { initDB } from "react-indexed-db-hook";
 import { StoreKey } from "@/app/constant";
 import { useIndexedDB } from "react-indexed-db-hook";
@@ -23,9 +23,44 @@ export const FileDbConfig = {
 };
 
 export function FileDbInit() {
-  initDB(FileDbConfig);
+  if (typeof window !== "undefined") {
+    initDB(FileDbConfig);
+  }
 }
 
 export function useFileDB() {
   return useIndexedDB(StoreKey.File);
 }
+
+export function saveFileData(db, fileId, data) {
+  // save file content and return url start with `indexeddb://`
+  db.add({ id: fileId, data });
+  return `indexeddb://${StoreKey.File}@${fileId}`;
+}
+
+export async function getFileData(db, fileId, contentType = "image/png") {
+  const { data } = await db.getByID(fileId);
+  return `data:${contentType};base64,${data}`;
+}
+
+export function IndexDBImage({ src, alt, onClick, db, className }) {
+  const [data, setData] = useState(src);
+  const imgId = useMemo(
+    () => src.replace("indexeddb://", "").split("@").pop(),
+    [src],
+  );
+  useEffect(() => {
+    getFileData(db, imgId)
+      .then((data) => setData(data))
+      .catch((e) => setData(src));
+  }, [src, imgId]);
+
+  return (
+    <img
+      className={className}
+      src={data}
+      alt={alt}
+      onClick={(e) => onClick(data, e)}
+    />
+  );
+}