using CacheStorage to store image #5013

app/components/home.tsx

@@ -29,7 +29,6 @@ import { AuthPage } from "./auth";
 import { getClientConfig } from "../config/client";
 import { type ClientApi, getClientApi } from "../client/api";
 import { useAccessStore } from "../store";
-import { initDB } from "react-indexed-db-hook";
 
 export function Loading(props: { noLogo?: boolean }) {
   return (

app/components/sd-panel.tsx

@@ -4,12 +4,8 @@ import { Select, showToast } from "@/app/components/ui-lib";
 import { IconButton } from "@/app/components/button";
 import locales from "@/app/locales";
 import { nanoid } from "nanoid";
-import { useIndexedDB } from "react-indexed-db-hook";
 import { StoreKey } from "@/app/constant";
 import { useSdStore } from "@/app/store/sd";
-import { FileDbInit } from "@/app/utils/file";
-
-FileDbInit();
 
 const sdCommonParams = (model: string, data: any) => {
   return [
@@ -287,7 +283,6 @@ export function SdPanel() {
     setCurrentModel(model);
     setParams(getModelParamBasicData(model.params({}), params));
   };
-  const sdListDb = useIndexedDB(StoreKey.SdList);
   const sdStore = useSdStore();
   const handleSubmit = () => {
     const columns = currentModel.params(params);
@@ -310,7 +305,7 @@ export function SdPanel() {
       created_at: new Date().toLocaleString(),
       img_data: "",
     };
-    sdStore.sendTask(data, sdListDb, () => {
+    sdStore.sendTask(data, () => {
       setParams(getModelParamBasicData(columns, params, true));
     });
   };

app/components/sd.tsx

@@ -30,8 +30,7 @@ import {
   showImageModal,
   showModal,
 } from "@/app/components/ui-lib";
-import { func } from "prop-types";
-import { useFileDB, IndexDBImage } from "@/app/utils/file";
+import { removeImage } from "@/app/utils/chat";
 
 function getSdTaskStatus(item: any) {
   let s: string;
@@ -90,7 +89,6 @@ export function Sd() {
   const showMaxIcon = !isMobileScreen && !clientConfig?.isApp;
   const config = useAppConfig();
   const scrollRef = useRef<HTMLDivElement>(null);
-  const fileDb = useFileDB();
   const sdStore = useSdStore();
   const [sdImages, setSdImages] = useState(sdStore.draw);
 
@@ -147,14 +145,13 @@ export function Sd() {
                   className={styles["sd-img-item"]}
                 >
                   {item.status === "success" ? (
-                    <IndexDBImage
+                    <img
                       className={styles["img"]}
-                      db={fileDb}
                       src={item.img_data}
                       alt={item.id}
-                      onClick={(data: any, e: any) => {
+                      onClick={(e) =>
                         showImageModal(
-                          data,
+                          item.img_data,
                           true,
                           isMobileScreen
                             ? { width: "100%", height: "fit-content" }
@@ -162,8 +159,8 @@ export function Sd() {
                           isMobileScreen
                             ? { width: "100%", height: "fit-content" }
                             : { width: "100%", height: "100%" },
-                        );
-                      }}
+                        )
+                      }
                     />
                   ) : item.status === "error" ? (
                     <div className={styles["pre-img"]}>
@@ -247,7 +244,7 @@ export function Sd() {
                               created_at: new Date().toLocaleString(),
                               img_data: "",
                             };
-                            sdStore.sendTask(reqData, fileDb);
+                            sdStore.sendTask(reqData);
                           }}
                         />
                         <ChatAction
@@ -256,7 +253,7 @@ export function Sd() {
                           onClick={async () => {
                             if (await showConfirm(Locale.Sd.Danger.Delete)) {
                               // remove img_data + remove item in list
-                              fileDb.deleteRecord(item.id).then(
+                              removeImage(item.img_data).finally(
                                 () => {
                                   sdStore.draw = sdImages.filter(
                                     (i: any) => i.id !== item.id,