using CacheStorage store image data

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,11 +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 { SdDbInit, sendSdTask, useSdStore } from "@/app/store/sd";
-
-SdDbInit();
+import { useSdStore } from "@/app/store/sd";
 
 const sdCommonParams = (model: string, data: any) => {
   return [
@@ -286,8 +283,7 @@ export function SdPanel() {
     setCurrentModel(model);
     setParams(getModelParamBasicData(model.params({}), params));
   };
-  const sdListDb = useIndexedDB(StoreKey.SdList);
-  const { execCountInc } = useSdStore();
+  const sdStore = useSdStore();
   const handleSubmit = () => {
     const columns = currentModel.params(params);
     const reqParams: any = {};
@@ -309,7 +305,7 @@ export function SdPanel() {
       created_at: new Date().toLocaleString(),
       img_data: "",
     };
-    sendSdTask(data, sdListDb, execCountInc, () => {
+    sdStore.sendTask(data, () => {
       setParams(getModelParamBasicData(columns, params, true));
     });
   };

app/components/sd.tsx

@@ -3,7 +3,7 @@ import styles from "@/app/components/sd.module.scss";
 import { IconButton } from "@/app/components/button";
 import ReturnIcon from "@/app/icons/return.svg";
 import Locale from "@/app/locales";
-import { Path, StoreKey } from "@/app/constant";
+import { Path } from "@/app/constant";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import {
   copyToClipboard,
@@ -20,8 +20,7 @@ import DeleteIcon from "@/app/icons/clear.svg";
 import CopyIcon from "@/app/icons/copy.svg";
 import PromptIcon from "@/app/icons/prompt.svg";
 import ResetIcon from "@/app/icons/reload.svg";
-import { useIndexedDB } from "react-indexed-db-hook";
-import { sendSdTask, useSdStore } from "@/app/store/sd";
+import { useSdStore } from "@/app/store/sd";
 import locales from "@/app/locales";
 import LoadingIcon from "../icons/three-dots.svg";
 import ErrorIcon from "../icons/delete.svg";
@@ -31,17 +30,7 @@ import {
   showImageModal,
   showModal,
 } from "@/app/components/ui-lib";
-
-function getBase64ImgUrl(base64Data: string, contentType: string) {
-  const byteCharacters = atob(base64Data);
-  const byteNumbers = new Array(byteCharacters.length);
-  for (let i = 0; i < byteCharacters.length; i++) {
-    byteNumbers[i] = byteCharacters.charCodeAt(i);
-  }
-  const byteArray = new Uint8Array(byteNumbers);
-  const blob = new Blob([byteArray], { type: contentType });
-  return URL.createObjectURL(blob);
-}
+import { removeImage } from "@/app/utils/chat";
 
 function getSdTaskStatus(item: any) {
   let s: string;
@@ -100,15 +89,12 @@ export function Sd() {
   const showMaxIcon = !isMobileScreen && !clientConfig?.isApp;
   const config = useAppConfig();
   const scrollRef = useRef<HTMLDivElement>(null);
-  const sdListDb = useIndexedDB(StoreKey.SdList);
-  const [sdImages, setSdImages] = useState([]);
-  const { execCount, execCountInc } = useSdStore();
+  const sdStore = useSdStore();
+  const [sdImages, setSdImages] = useState(sdStore.draw);
 
   useEffect(() => {
-    sdListDb.getAll().then((data) => {
-      setSdImages(((data as never[]) || []).reverse());
-    });
-  }, [execCount]);
+    setSdImages(sdStore.draw);
+  }, [sdStore.currentId]);
 
   return (
     <div className={chatStyles.chat} key={"1"}>
@@ -161,20 +147,20 @@ export function Sd() {
                   {item.status === "success" ? (
                     <img
                       className={styles["img"]}
-                      src={`data:image/png;base64,${item.img_data}`}
-                      alt={`${item.id}`}
-                      onClick={(e) => {
+                      src={item.img_data}
+                      alt={item.id}
+                      onClick={(e) =>
                         showImageModal(
-                          getBase64ImgUrl(item.img_data, "image/png"),
+                          item.img_data,
                           true,
                           isMobileScreen
                             ? { width: "100%", height: "fit-content" }
                             : { maxWidth: "100%", maxHeight: "100%" },
                           isMobileScreen
                             ? { width: "100%", height: "fit-content" }
                             : { width: "100%", height: "100%" },
-                        );
-                      }}
+                        )
+                      }
                     />
                   ) : item.status === "error" ? (
                     <div className={styles["pre-img"]}>
@@ -258,26 +244,21 @@ export function Sd() {
                               created_at: new Date().toLocaleString(),
                               img_data: "",
                             };
-                            sendSdTask(reqData, sdListDb, execCountInc);
+                            sdStore.sendTask(reqData);
                           }}
                         />
                         <ChatAction
                           text={Locale.Sd.Actions.Delete}
                           icon={<DeleteIcon />}
                           onClick={async () => {
                             if (await showConfirm(Locale.Sd.Danger.Delete)) {
-                              sdListDb.deleteRecord(item.id).then(
-                                () => {
-                                  setSdImages(
-                                    sdImages.filter(
-                                      (i: any) => i.id !== item.id,
-                                    ),
-                                  );
-                                },
-                                (error) => {
-                                  console.error(error);
-                                },
-                              );
+                              // remove img_data + remove item in list
+                              removeImage(item.img_data).finally(() => {
+                                sdStore.draw = sdImages.filter(
+                                  (i: any) => i.id !== item.id,
+                                );
+                                sdStore.getNextId();
+                              });
                             }
                           }}
                         />

app/constant.ts

@@ -1,5 +1,3 @@
-import { stabilityRequestCall } from "@/app/store/sd";
-
 export const OWNER = "Yidadaa";
 export const REPO = "ChatGPT-Next-Web";
 export const REPO_URL = `https://github.com/${OWNER}/${REPO}`;
@@ -25,6 +23,8 @@ export const BYTEDANCE_BASE_URL = "https://ark.cn-beijing.volces.com";
 
 export const ALIBABA_BASE_URL = "https://dashscope.aliyuncs.com/api/";
 
+export const UPLOAD_URL = "/api/cache/upload";
+
 export enum Path {
   Home = "/",
   Chat = "/chat",
@@ -57,6 +57,7 @@ export enum FileName {
 }
 
 export enum StoreKey {
+  File = "chat-next-web-file",
   Chat = "chat-next-web-store",
   Access = "access-control",
   Config = "app-config",

app/page.tsx

@@ -3,7 +3,6 @@ import { Analytics } from "@vercel/analytics/react";
 import { Home } from "./components/home";
 
 import { getServerSideConfig } from "./config/server";
-import { SdDbInit } from "@/app/store/sd";
 
 const serverConfig = getServerSideConfig();