7x31/ChatGPT-Next-Web
1
0
Fork 0
mirror of https://github.com/Yidadaa/ChatGPT-Next-Web.git synced 2025-08-08 21:44:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

using CacheStorage to store image #5013

Browse Source
This commit is contained in:
lloydzhou
2024-07-16 01:19:40 +08:00
parent b3a324b6f5
commit bab3e0bc9b
10 changed files with 115 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/components/home.tsx
View File

@@ -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 (

7
app/components/sd-panel.tsx
View File

@@ -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));
});
};

19
app/components/sd.tsx
View File

@@ -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,

2
app/constant.ts
View File

@@ -23,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",

51
app/store/sd.ts
View File

@@ -3,7 +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, base64Image2Blob } from "@/app/utils/file";
import { uploadImage, base64Image2Blob } from "@/app/utils/chat";
export const useSdStore = createPersistStore<
{
@@ -12,7 +12,7 @@ export const useSdStore = createPersistStore<
},
{
getNextId: () => number;
sendTask: (data: any, db: any, okCall?: Function) => void;
sendTask: (data: any, okCall?: Function) => void;
updateDraw: (draw: any) => void;
}
>(
@@ -34,15 +34,14 @@ export const useSdStore = createPersistStore<
set({ currentId: id });
return id;
},
sendTask(data: any, db: any, okCall?: Function) {
sendTask(data: any, okCall?: Function) {
data = { ...data, id: nanoid(), status: "running" };
set({ draw: [data, ..._get().draw] });
// db.update(data);
this.getNextId();
this.stabilityRequestCall(data, db);
this.stabilityRequestCall(data);
okCall?.();
},
stabilityRequestCall(data: any, db: any) {
stabilityRequestCall(data: any) {
const formData = new FormData();
for (let paramsKey in data.params) {
formData.append(paramsKey, data.params[paramsKey]);
@@ -69,18 +68,26 @@ export const useSdStore = createPersistStore<
return;
}
if (resData.finish_reason === "SUCCESS") {
this.updateDraw({
...data,
status: "success",
// save blob to indexeddb instead of base64 image string
img_data: saveFileData(
db,
data.id,
base64Image2Blob(resData.image, "image/png"),
),
});
const self = this;
uploadImage(base64Image2Blob(resData.image, "image/png"))
.then((img_data) => {
console.debug("uploadImage success", img_data, self);
self.updateDraw({
...data,
status: "success",
img_data,
});
})
.catch((e) => {
console.error("uploadImage error", e);
self.updateDraw({
...data,
status: "error",
error: JSON.stringify(resData),
});
});
} else {
this.updateDraw({
self.updateDraw({
...data,
status: "error",
error: JSON.stringify(resData),
@@ -94,10 +101,12 @@ export const useSdStore = createPersistStore<
this.getNextId();
});
},
updateDraw(draw: any) {
_get().draw.some((item, index) => {
if (item.id === draw.id) {
_get().draw[index] = draw;
updateDraw(_draw: any) {
const draw = _get().draw || [];
draw.some((item, index) => {
if (item.id === _draw.id) {
draw[index] = _draw;
set(() => ({ draw }));
return true;
}
});

38
app/utils/chat.ts
View File

@@ -1,3 +1,4 @@
import { UPLOAD_URL } from "@/app/constant";
import heic2any from "heic2any";
export function compressImage(file: File, maxSize: number): Promise<string> {
@@ -52,3 +53,40 @@ export function compressImage(file: File, maxSize: number): Promise<string> {
reader.readAsDataURL(file);
});
}
export function base64Image2Blob(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);
return new Blob([byteArray], { type: contentType });
}
export function uploadImage(file: File): Promise<string> {
const body = new FormData();
body.append("file", file);
return fetch(UPLOAD_URL, {
method: "post",
body,
mode: "cors",
credentials: "include",
})
.then((res) => res.json())
.then((res) => {
console.log("res", res);
if (res?.code == 0 && res?.data) {
return res?.data;
}
throw Error(`upload Error: ${res?.msg}`);
});
}
export function removeImage(imageUrl: string) {
return fetch(imageUrl, {
method: "DELETE",
mode: "cors",
credentials: "include",
});
}

95
app/utils/file.tsx
View File

@@ -1,95 +0,0 @@
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";
export const FileDbConfig = {
name: "@chatgpt-next-web/file",
version: 1,
objectStoresMeta: [
{
store: StoreKey.File,
storeConfig: { keyPath: "id", autoIncrement: true },
storeSchema: [
{ name: "data", keypath: "data", options: { unique: false } },
{
name: "created_at",
keypath: "created_at",
options: { unique: false },
},
],
},
],
};
export function FileDbInit() {
if (typeof window !== "undefined") {
initDB(FileDbConfig);
}
}
export function useFileDB() {
return useIndexedDB(StoreKey.File);
}
export function base64Image2Blob(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);
return new Blob([byteArray], { type: contentType });
}
export function saveFileData(db: any, fileId: string, data: Blob | string) {
// save file content and return url start with `indexeddb://`
db.add({ id: fileId, data });
return `indexeddb://${StoreKey.File}@${fileId}`;
}
export async function getFileData(
db: any,
fileId: string,
contentType = "image/png",
) {
const { data } = await db.getByID(fileId);
if (typeof data == "object") {
return URL.createObjectURL(data);
}
return `data:${contentType};base64,${data}`;
}
export function IndexDBImage({
src,
alt,
onClick,
db,
className,
}: {
src: string;
alt: string;
onClick: any;
db: any;
className: string;
}) {
const [data, setData] = useState(src);
const imgId = useMemo(
() => src.replace("indexeddb://", "").split("@").pop(),
[src],
);
useEffect(() => {
getFileData(db, imgId as string)
.then((data) => setData(data))
.catch((e) => setData(src));
}, [src, imgId]);
return (
<img
className={className}
src={data}
alt={alt}
onClick={(e) => onClick(data, e)}
/>
);
}