From a51fb24f36f24f75d393f4637ea9b60754f7d596 Mon Sep 17 00:00:00 2001
From: licoy <licoycn@gmail.com>
Date: Thu, 27 Jun 2024 15:13:45 +0800
Subject: [PATCH 01/43] fix ts error

---
 app/components/error.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/components/error.tsx b/app/components/error.tsx
index 914740f9686..c90997d1166 100644
--- a/app/components/error.tsx
+++ b/app/components/error.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { IconButton } from "./button";
 import GithubIcon from "../icons/github.svg";

From fa6ebadc7b78cb023dc15705207ce2d180298edf Mon Sep 17 00:00:00 2001
From: licoy <licoycn@gmail.com>
Date: Thu, 27 Jun 2024 15:35:16 +0800
Subject: [PATCH 02/43] feat: add plugin entry selection

---
 app/components/sidebar.tsx        | 25 +++++++++++++++++++++----
 app/components/ui-lib.module.scss |  4 ++++
 app/components/ui-lib.tsx         | 18 ++++++++++++------
 3 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/app/components/sidebar.tsx b/app/components/sidebar.tsx
index 69b2e71f871..ea4d70dbb58 100644
--- a/app/components/sidebar.tsx
+++ b/app/components/sidebar.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useMemo } from "react";
+import React, { useEffect, useRef, useMemo, useState } from "react";
 
 import styles from "./home.module.scss";
 
@@ -15,7 +15,7 @@ import DragIcon from "../icons/drag.svg";
 
 import Locale from "../locales";
 
-import { useAppConfig, useChatStore } from "../store";
+import { ModelType, useAppConfig, useChatStore } from "../store";
 
 import {
   DEFAULT_SIDEBAR_WIDTH,
@@ -29,7 +29,7 @@ import {
 import { Link, useNavigate } from "react-router-dom";
 import { isIOS, useMobileScreen } from "../utils";
 import dynamic from "next/dynamic";
-import { showConfirm, showToast } from "./ui-lib";
+import { Selector, showConfirm, showToast } from "./ui-lib";
 
 const ChatList = dynamic(async () => (await import("./chat-list")).ChatList, {
   loading: () => null,
@@ -140,6 +140,7 @@ export function SideBar(props: { className?: string }) {
     () => isIOS() && isMobileScreen,
     [isMobileScreen],
   );
+  const [showPluginSelector, setShowPluginSelector] = useState(false);
 
   useHotKey();
 
@@ -183,7 +184,7 @@ export function SideBar(props: { className?: string }) {
           icon={<PluginIcon />}
           text={shouldNarrow ? undefined : Locale.Plugin.Name}
           className={styles["sidebar-bar-button"]}
-          onClick={() => showToast(Locale.WIP)}
+          onClick={() => setShowPluginSelector(true)}
           shadow
         />
       </div>
@@ -245,6 +246,22 @@ export function SideBar(props: { className?: string }) {
       >
         <DragIcon />
       </div>
+      {showPluginSelector && (
+        <Selector
+          items={[
+            {
+              title: "👇 Please select the plugin you need to use",
+              value: "-",
+              disable: true,
+            },
+            { title: "Stable Diffusion", value: "sd" },
+          ]}
+          onClose={() => setShowPluginSelector(false)}
+          onSelection={(s) => {
+            console.log("go to page: ", s);
+          }}
+        />
+      )}
     </div>
   );
 }
diff --git a/app/components/ui-lib.module.scss b/app/components/ui-lib.module.scss
index 83c02f92a23..ee17746f4ab 100644
--- a/app/components/ui-lib.module.scss
+++ b/app/components/ui-lib.module.scss
@@ -291,6 +291,10 @@
   justify-content: center;
   z-index: 999;
 
+  .selector-item-disabled{
+    opacity: 0.6;
+  }
+
   &-content {
     .list {
       max-height: 90vh;
diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx
index da700c0fb7c..26e0f4af1d4 100644
--- a/app/components/ui-lib.tsx
+++ b/app/components/ui-lib.tsx
@@ -13,7 +13,7 @@ import MinIcon from "../icons/min.svg";
 import Locale from "../locales";
 
 import { createRoot } from "react-dom/client";
-import React, { HTMLProps, useEffect, useState } from "react";
+import React, { HTMLProps, MouseEvent, useEffect, useState } from "react";
 import { IconButton } from "./button";
 
 export function Popover(props: {
@@ -47,7 +47,7 @@ export function ListItem(props: {
   children?: JSX.Element | JSX.Element[];
   icon?: JSX.Element;
   className?: string;
-  onClick?: () => void;
+  onClick?: (event: MouseEvent) => void;
 }) {
   return (
     <div
@@ -442,6 +442,7 @@ export function Selector<T>(props: {
     title: string;
     subTitle?: string;
     value: T;
+    disable?: boolean;
   }>;
   defaultSelectedValue?: T;
   onSelection?: (selection: T[]) => void;
@@ -456,13 +457,18 @@ export function Selector<T>(props: {
             const selected = props.defaultSelectedValue === item.value;
             return (
               <ListItem
-                className={styles["selector-item"]}
+                className={`${styles["selector-item"]} ${
+                  item.disable && styles["selector-item-disabled"]
+                }`}
                 key={i}
                 title={item.title}
                 subTitle={item.subTitle}
-                onClick={() => {
-                  props.onSelection?.([item.value]);
-                  props.onClose?.();
+                onClick={(event) => {
+                  event.stopPropagation();
+                  if (!item.disable) {
+                    props.onSelection?.([item.value]);
+                    props.onClose?.();
+                  }
                 }}
               >
                 {selected ? (

From d21481173e5c8eeb89024216acb164930ba31175 Mon Sep 17 00:00:00 2001
From: licoy <licoycn@gmail.com>
Date: Thu, 27 Jun 2024 16:06:15 +0800
Subject: [PATCH 03/43] feat: add SD page switching

---
 app/components/home.tsx            |  3 +++
 app/components/sd-list.module.scss |  0
 app/components/sd-list.tsx         |  3 +++
 app/components/sd.module.scss      |  0
 app/components/sd.tsx              |  3 +++
 app/components/sidebar.tsx         | 32 +++++++++++++++++++++++++-----
 app/constant.ts                    |  3 +++
 7 files changed, 39 insertions(+), 5 deletions(-)
 create mode 100644 app/components/sd-list.module.scss
 create mode 100644 app/components/sd-list.tsx
 create mode 100644 app/components/sd.module.scss
 create mode 100644 app/components/sd.tsx

diff --git a/app/components/home.tsx b/app/components/home.tsx
index ffac64fdac0..99755cc2032 100644
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { Sd } from "@/app/components/sd";
+
 require("../polyfill");
 
 import { useState, useEffect } from "react";
@@ -159,6 +161,7 @@ function Screen() {
               <Route path={Path.NewChat} element={<NewChat />} />
               <Route path={Path.Masks} element={<MaskPage />} />
               <Route path={Path.Chat} element={<Chat />} />
+              <Route path={Path.Sd} element={<Sd />} />
               <Route path={Path.Settings} element={<Settings />} />
             </Routes>
           </div>
diff --git a/app/components/sd-list.module.scss b/app/components/sd-list.module.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/app/components/sd-list.tsx b/app/components/sd-list.tsx
new file mode 100644
index 00000000000..ba42919a54d
--- /dev/null
+++ b/app/components/sd-list.tsx
@@ -0,0 +1,3 @@
+export function SdList() {
+  return <div>sd-list</div>;
+}
diff --git a/app/components/sd.module.scss b/app/components/sd.module.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/app/components/sd.tsx b/app/components/sd.tsx
new file mode 100644
index 00000000000..5341e5387c9
--- /dev/null
+++ b/app/components/sd.tsx
@@ -0,0 +1,3 @@
+export function Sd() {
+  return <div>sd</div>;
+}
diff --git a/app/components/sidebar.tsx b/app/components/sidebar.tsx
index ea4d70dbb58..a06262fefb0 100644
--- a/app/components/sidebar.tsx
+++ b/app/components/sidebar.tsx
@@ -23,18 +23,24 @@ import {
   MIN_SIDEBAR_WIDTH,
   NARROW_SIDEBAR_WIDTH,
   Path,
+  PLUGINS,
   REPO_URL,
 } from "../constant";
 
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import { isIOS, useMobileScreen } from "../utils";
 import dynamic from "next/dynamic";
 import { Selector, showConfirm, showToast } from "./ui-lib";
+import de from "@/app/locales/de";
 
 const ChatList = dynamic(async () => (await import("./chat-list")).ChatList, {
   loading: () => null,
 });
 
+const SdList = dynamic(async () => (await import("./sd-list")).SdList, {
+  loading: () => null,
+});
+
 function useHotKey() {
   const chatStore = useChatStore();
 
@@ -141,9 +147,20 @@ export function SideBar(props: { className?: string }) {
     [isMobileScreen],
   );
   const [showPluginSelector, setShowPluginSelector] = useState(false);
+  const location = useLocation();
 
   useHotKey();
 
+  let bodyComponent: React.JSX.Element;
+  let isChat: boolean;
+  switch (location.pathname) {
+    case Path.Sd:
+      bodyComponent = <SdList />;
+      break;
+    default:
+      isChat = true;
+      bodyComponent = <ChatList narrow={shouldNarrow} />;
+  }
   return (
     <div
       className={`${styles.sidebar} ${props.className} ${
@@ -192,12 +209,12 @@ export function SideBar(props: { className?: string }) {
       <div
         className={styles["sidebar-body"]}
         onClick={(e) => {
-          if (e.target === e.currentTarget) {
+          if (isChat && e.target === e.currentTarget) {
             navigate(Path.Home);
           }
         }}
       >
-        <ChatList narrow={shouldNarrow} />
+        {bodyComponent}
       </div>
 
       <div className={styles["sidebar-tail"]}>
@@ -254,11 +271,16 @@ export function SideBar(props: { className?: string }) {
               value: "-",
               disable: true,
             },
-            { title: "Stable Diffusion", value: "sd" },
+            ...PLUGINS.map((item) => {
+              return {
+                title: item.name,
+                value: item.path,
+              };
+            }),
           ]}
           onClose={() => setShowPluginSelector(false)}
           onSelection={(s) => {
-            console.log("go to page: ", s);
+            navigate(s[0], { state: { fromHome: true } });
           }}
         />
       )}
diff --git a/app/constant.ts b/app/constant.ts
index 411e481508d..c56f77cb9da 100644
--- a/app/constant.ts
+++ b/app/constant.ts
@@ -21,6 +21,7 @@ export enum Path {
   NewChat = "/new-chat",
   Masks = "/masks",
   Auth = "/auth",
+  Sd = "/sd",
 }
 
 export enum ApiPath {
@@ -213,3 +214,5 @@ export const internalAllowedWebDavEndpoints = [
   "https://webdav.yandex.com",
   "https://app.koofr.net/dav/Koofr",
 ];
+
+export const PLUGINS = [{ name: "Stable Diffusion", path: Path.Sd }];

From 34034be0e3ccba51214cb7fac7cd7bae2033ff58 Mon Sep 17 00:00:00 2001
From: licoy <licoycn@gmail.com>
Date: Thu, 27 Jun 2024 16:13:51 +0800
Subject: [PATCH 04/43] hide new chat button on sd page

---
 app/components/sidebar.tsx | 35 +++++++++++++++++++----------------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/app/components/sidebar.tsx b/app/components/sidebar.tsx
index a06262fefb0..91ddd4c2355 100644
--- a/app/components/sidebar.tsx
+++ b/app/components/sidebar.tsx
@@ -152,7 +152,7 @@ export function SideBar(props: { className?: string }) {
   useHotKey();
 
   let bodyComponent: React.JSX.Element;
-  let isChat: boolean;
+  let isChat: boolean = false;
   switch (location.pathname) {
     case Path.Sd:
       bodyComponent = <SdList />;
@@ -161,6 +161,7 @@ export function SideBar(props: { className?: string }) {
       isChat = true;
       bodyComponent = <ChatList narrow={shouldNarrow} />;
   }
+  // @ts-ignore
   return (
     <div
       className={`${styles.sidebar} ${props.className} ${
@@ -240,21 +241,23 @@ export function SideBar(props: { className?: string }) {
             </a>
           </div>
         </div>
-        <div>
-          <IconButton
-            icon={<AddIcon />}
-            text={shouldNarrow ? undefined : Locale.Home.NewChat}
-            onClick={() => {
-              if (config.dontShowMaskSplashScreen) {
-                chatStore.newSession();
-                navigate(Path.Chat);
-              } else {
-                navigate(Path.NewChat);
-              }
-            }}
-            shadow
-          />
-        </div>
+        {isChat && (
+          <div>
+            <IconButton
+              icon={<AddIcon />}
+              text={shouldNarrow ? undefined : Locale.Home.NewChat}
+              onClick={() => {
+                if (config.dontShowMaskSplashScreen) {
+                  chatStore.newSession();
+                  navigate(Path.Chat);
+                } else {
+                  navigate(Path.NewChat);
+                }
+              }}
+              shadow
+            />
+          </div>
+        )}
       </div>
 
       <div

From bbbf59c74a2813807a978021a8603ce55f35d04c Mon Sep 17 00:00:00 2001
From: licoy <licoycn@gmail.com>
Date: Tue, 2 Jul 2024 10:24:19 +0800
Subject: [PATCH 05/43] Improve the Stability parameter control panel

---
 app/components/button.tsx           |   3 +
 app/components/sd-list.module.scss  |   0
 app/components/sd-list.tsx          |   3 -
 app/components/sd-panel.module.scss |  33 +++++
 app/components/sd-panel.tsx         | 220 ++++++++++++++++++++++++++++
 app/components/sidebar.tsx          |   4 +-
 app/components/ui-lib.module.scss   |  13 ++
 app/components/ui-lib.tsx           |   7 +-
 app/locales/cn.ts                   |  10 ++
 app/locales/en.ts                   |  11 +-
 app/styles/globals.scss             |   3 +-
 11 files changed, 299 insertions(+), 8 deletions(-)
 delete mode 100644 app/components/sd-list.module.scss
 delete mode 100644 app/components/sd-list.tsx
 create mode 100644 app/components/sd-panel.module.scss
 create mode 100644 app/components/sd-panel.tsx

diff --git a/app/components/button.tsx b/app/components/button.tsx
index 7a5633924c5..c6039acc292 100644
--- a/app/components/button.tsx
+++ b/app/components/button.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 
 import styles from "./button.module.scss";
+import { CSSProperties } from "react";
 
 export type ButtonType = "primary" | "danger" | null;
 
@@ -16,6 +17,7 @@ export function IconButton(props: {
   disabled?: boolean;
   tabIndex?: number;
   autoFocus?: boolean;
+  style?: CSSProperties;
 }) {
   return (
     <button
@@ -31,6 +33,7 @@ export function IconButton(props: {
       role="button"
       tabIndex={props.tabIndex}
       autoFocus={props.autoFocus}
+      style={props.style}
     >
       {props.icon && (
         <div
diff --git a/app/components/sd-list.module.scss b/app/components/sd-list.module.scss
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/app/components/sd-list.tsx b/app/components/sd-list.tsx
deleted file mode 100644
index ba42919a54d..00000000000
--- a/app/components/sd-list.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export function SdList() {
-  return <div>sd-list</div>;
-}
diff --git a/app/components/sd-panel.module.scss b/app/components/sd-panel.module.scss
new file mode 100644
index 00000000000..1b31faeaca5
--- /dev/null
+++ b/app/components/sd-panel.module.scss
@@ -0,0 +1,33 @@
+.ctrl-param-item {
+  display: flex;
+  justify-content: space-between;
+  min-height: 40px;
+  padding: 10px 0;
+  animation: slide-in ease 0.6s;
+  flex-direction: column;
+
+  .ctrl-param-item-header {
+    display: flex;
+    align-items: center;
+
+    .ctrl-param-item-title{
+      font-size: 14px;
+      font-weight: bolder;
+      margin-bottom: 5px;
+    }
+  }
+
+  .ctrl-param-item-sub-title {
+    font-size: 12px;
+    font-weight: normal;
+    margin-top: 3px;
+  }
+}
+
+.ai-models{
+  button{
+    margin-bottom: 10px;
+    padding:10px;
+    width: 100%;
+  }
+}
\ No newline at end of file
diff --git a/app/components/sd-panel.tsx b/app/components/sd-panel.tsx
new file mode 100644
index 00000000000..33f15259479
--- /dev/null
+++ b/app/components/sd-panel.tsx
@@ -0,0 +1,220 @@
+import styles from "./sd-panel.module.scss";
+import React, { useState } from "react";
+import { Select } from "@/app/components/ui-lib";
+import { IconButton } from "@/app/components/button";
+import locales from "@/app/locales";
+
+const sdCommonParams = (model: string, data: any) => {
+  return [
+    {
+      name: locales.SdPanel.Prompt,
+      value: "prompt",
+      type: "textarea",
+      placeholder: locales.SdPanel.PleaseInput(locales.SdPanel.Prompt),
+      required: true,
+    },
+    {
+      name: locales.SdPanel.NegativePrompt,
+      value: "negative_prompt",
+      type: "textarea",
+      placeholder: locales.SdPanel.PleaseInput(locales.SdPanel.NegativePrompt),
+    },
+    {
+      name: locales.SdPanel.AspectRatio,
+      value: "aspect_ratio",
+      type: "select",
+      default: "1:1",
+      options: [
+        { name: "1:1", value: "1:1" },
+        { name: "2:2", value: "2:2" },
+      ],
+    },
+    {
+      name: locales.SdPanel.ImageStyle,
+      value: "style",
+      type: "select",
+      default: "3d",
+      support: ["core"],
+      options: [{ name: "3D", value: "3d" }],
+    },
+    { name: "Seed", value: "seed", type: "number", default: 0 },
+    {
+      name: locales.SdPanel.OutFormat,
+      value: "output_format",
+      type: "select",
+      default: 0,
+      options: [
+        { name: "PNG", value: "png" },
+        { name: "JPEG", value: "jpeg" },
+        { name: "WebP", value: "webp" },
+      ],
+    },
+  ].filter((item) => {
+    return !(item.support && !item.support.includes(model));
+  });
+};
+
+const models = [
+  {
+    name: "Stable Image Ultra",
+    value: "ultra",
+    params: (data: any) => sdCommonParams("ultra", data),
+  },
+  {
+    name: "Stable Image Core",
+    value: "core",
+    params: (data: any) => sdCommonParams("core", data),
+  },
+  {
+    name: "Stable Diffusion 3",
+    value: "sd3",
+    params: (data: any) => {
+      return sdCommonParams("sd3", data);
+    },
+  },
+];
+
+export function ControlParamItem(props: {
+  title: string;
+  subTitle?: string;
+  children?: JSX.Element | JSX.Element[];
+  className?: string;
+}) {
+  return (
+    <div className={styles["ctrl-param-item"] + ` ${props.className || ""}`}>
+      <div className={styles["ctrl-param-item-header"]}>
+        <div className={styles["ctrl-param-item-title"]}>
+          <div>{props.title}</div>
+        </div>
+      </div>
+      {props.children}
+      {props.subTitle && (
+        <div className={styles["ctrl-param-item-sub-title"]}>
+          {props.subTitle}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function ControlParam(props: {
+  columns: any[];
+  data: any;
+  set: React.Dispatch<React.SetStateAction<{}>>;
+}) {
+  const handleValueChange = (field: string, val: any) => {
+    props.set((prevParams) => ({
+      ...prevParams,
+      [field]: val,
+    }));
+  };
+
+  return (
+    <>
+      {props.columns.map((item) => {
+        let element: null | JSX.Element;
+        switch (item.type) {
+          case "textarea":
+            element = (
+              <ControlParamItem title={item.name} subTitle={item.sub}>
+                <textarea
+                  rows={item.rows || 3}
+                  style={{ maxWidth: "100%", width: "100%", padding: "10px" }}
+                  placeholder={item.placeholder}
+                  onChange={(e) => {
+                    handleValueChange(item.value, e.currentTarget.value);
+                  }}
+                  value={props.data[item.value]}
+                ></textarea>
+              </ControlParamItem>
+            );
+            break;
+          case "select":
+            element = (
+              <ControlParamItem title={item.name} subTitle={item.sub}>
+                <Select
+                  value={props.data[item.value]}
+                  onChange={(e) => {
+                    handleValueChange(item.value, e.currentTarget.value);
+                  }}
+                >
+                  {item.options.map((opt: any) => {
+                    return (
+                      <option value={opt.value} key={opt.value}>
+                        {opt.name}
+                      </option>
+                    );
+                  })}
+                </Select>
+              </ControlParamItem>
+            );
+            break;
+          case "number":
+            element = (
+              <ControlParamItem title={item.name} subTitle={item.sub}>
+                <input
+                  type="number"
+                  value={props.data[item.value]}
+                  onChange={(e) => {
+                    handleValueChange(item.value, e.currentTarget.value);
+                  }}
+                />
+              </ControlParamItem>
+            );
+            break;
+          default:
+            element = (
+              <ControlParamItem title={item.name} subTitle={item.sub}>
+                <input
+                  type="text"
+                  value={props.data[item.value]}
+                  style={{ maxWidth: "100%", width: "100%" }}
+                  onChange={(e) => {
+                    handleValueChange(item.value, e.currentTarget.value);
+                  }}
+                />
+              </ControlParamItem>
+            );
+        }
+        return <div key={item.value}>{element}</div>;
+      })}
+    </>
+  );
+}
+
+export function SdPanel() {
+  const [currentModel, setCurrentModel] = useState(models[0]);
+  const [params, setParams] = useState({});
+  return (
+    <>
+      <ControlParamItem title={locales.SdPanel.AIModel}>
+        <div className={styles["ai-models"]}>
+          {models.map((item) => {
+            return (
+              <IconButton
+                text={item.name}
+                key={item.value}
+                type={currentModel.value == item.value ? "primary" : null}
+                shadow
+                onClick={() => {
+                  setCurrentModel(item);
+                }}
+              />
+            );
+          })}
+        </div>
+      </ControlParamItem>
+      <ControlParam
+        columns={currentModel.params(params) as any[]}
+        set={setParams}
+        data={params}
+      ></ControlParam>
+      <IconButton
+        text={locales.SdPanel.Submit}
+        type="primary"
+        style={{ marginTop: "20px" }}
+        shadow
+      ></IconButton>
+    </>
+  );
+}
diff --git a/app/components/sidebar.tsx b/app/components/sidebar.tsx
index 91ddd4c2355..806660e5dbb 100644
--- a/app/components/sidebar.tsx
+++ b/app/components/sidebar.tsx
@@ -37,7 +37,7 @@ const ChatList = dynamic(async () => (await import("./chat-list")).ChatList, {
   loading: () => null,
 });
 
-const SdList = dynamic(async () => (await import("./sd-list")).SdList, {
+const SdPanel = dynamic(async () => (await import("./sd-panel")).SdPanel, {
   loading: () => null,
 });
 
@@ -155,7 +155,7 @@ export function SideBar(props: { className?: string }) {
   let isChat: boolean = false;
   switch (location.pathname) {
     case Path.Sd:
-      bodyComponent = <SdList />;
+      bodyComponent = <SdPanel />;
       break;
     default:
       isChat = true;
diff --git a/app/components/ui-lib.module.scss b/app/components/ui-lib.module.scss
index ee17746f4ab..21df87394ef 100644
--- a/app/components/ui-lib.module.scss
+++ b/app/components/ui-lib.module.scss
@@ -61,6 +61,19 @@
       font-weight: normal;
     }
   }
+
+  &.vertical{
+    flex-direction: column;
+    align-items: start;
+    .list-header{
+      .list-item-title{
+        margin-bottom: 5px;
+      }
+      .list-item-sub-title{
+        margin-bottom: 2px;
+      }
+    }
+  }
 }
 
 .list {
diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx
index 26e0f4af1d4..499c0fee558 100644
--- a/app/components/ui-lib.tsx
+++ b/app/components/ui-lib.tsx
@@ -48,10 +48,15 @@ export function ListItem(props: {
   icon?: JSX.Element;
   className?: string;
   onClick?: (event: MouseEvent) => void;
+  vertical?: boolean;
 }) {
   return (
     <div
-      className={styles["list-item"] + ` ${props.className || ""}`}
+      className={
+        styles["list-item"] +
+        ` ${props.vertical ? styles["vertical"] : ""} ` +
+        ` ${props.className || ""}`
+      }
       onClick={props.onClick}
     >
       <div className={styles["list-header"]}>
diff --git a/app/locales/cn.ts b/app/locales/cn.ts
index 2ff94e32d43..892cc19fadc 100644
--- a/app/locales/cn.ts
+++ b/app/locales/cn.ts
@@ -484,6 +484,16 @@ const cn = {
     Topic: "主题",
     Time: "时间",
   },
+  SdPanel: {
+    Prompt: "画面提示",
+    NegativePrompt: "否定提示",
+    PleaseInput: (name: string) => `请输入${name}`,
+    AspectRatio: "横纵比",
+    ImageStyle: "图像风格",
+    OutFormat: "输出格式",
+    AIModel: "AI模型",
+    Submit: "提交生成",
+  },
 };
 
 type DeepPartial<T> = T extends object
diff --git a/app/locales/en.ts b/app/locales/en.ts
index aa153f52369..373307f06a4 100644
--- a/app/locales/en.ts
+++ b/app/locales/en.ts
@@ -486,11 +486,20 @@ const en: LocaleType = {
     Topic: "Topic",
     Time: "Time",
   },
-
   URLCommand: {
     Code: "Detected access code from url, confirm to apply? ",
     Settings: "Detected settings from url, confirm to apply?",
   },
+  SdPanel: {
+    Prompt: "Prompt",
+    NegativePrompt: "Negative Prompt",
+    PleaseInput: (name: string) => `Please input ${name}`,
+    AspectRatio: "Aspect Ratio",
+    ImageStyle: "Image Style",
+    OutFormat: "Output Format",
+    AIModel: "AI Model",
+    Submit: "Submit",
+  },
 };
 
 export default en;
diff --git a/app/styles/globals.scss b/app/styles/globals.scss
index 20792cda526..5bbae339f0d 100644
--- a/app/styles/globals.scss
+++ b/app/styles/globals.scss
@@ -226,7 +226,8 @@ input[type="range"]::-ms-thumb:hover {
 
 input[type="number"],
 input[type="text"],
-input[type="password"] {
+input[type="password"],
+textarea {
   appearance: none;
   border-radius: 10px;
   border: var(--border-in-light);

From 7fde9327a2ef0d9664276855f735ec6715063045 Mon Sep 17 00:00:00 2001
From: licoy <licoycn@gmail.com>
Date: Tue, 2 Jul 2024 15:19:44 +0800
Subject: [PATCH 06/43] feat: Improve the data input and submission acquisition
 of SD parameter panel

---
 app/components/sd-panel.tsx | 127 +++++++++++++++++++++++++++++-------
 app/locales/cn.ts           |  20 ++++++
 app/locales/en.ts           |  20 ++++++
 3 files changed, 145 insertions(+), 22 deletions(-)

diff --git a/app/components/sd-panel.tsx b/app/components/sd-panel.tsx
index 33f15259479..3cbec7b9751 100644
--- a/app/components/sd-panel.tsx
+++ b/app/components/sd-panel.tsx
@@ -13,6 +13,18 @@ const sdCommonParams = (model: string, data: any) => {
       placeholder: locales.SdPanel.PleaseInput(locales.SdPanel.Prompt),
       required: true,
     },
+    {
+      name: locales.SdPanel.ChildModel,
+      value: "model",
+      type: "select",
+      default: 0,
+      support: ["sd3"],
+      options: [
+        { name: "SD3 Medium", value: "sd3-medium" },
+        { name: "SD3 Large", value: "sd3-large" },
+        { name: "SD3 Large Turbo", value: "sd3-large-turbo" },
+      ],
+    },
     {
       name: locales.SdPanel.NegativePrompt,
       value: "negative_prompt",
@@ -26,7 +38,14 @@ const sdCommonParams = (model: string, data: any) => {
       default: "1:1",
       options: [
         { name: "1:1", value: "1:1" },
-        { name: "2:2", value: "2:2" },
+        { name: "16:9", value: "16:9" },
+        { name: "21:9", value: "21:9" },
+        { name: "2:3", value: "2:3" },
+        { name: "3:2", value: "3:2" },
+        { name: "4:5", value: "4:5" },
+        { name: "5:4", value: "5:4" },
+        { name: "9:16", value: "9:16" },
+        { name: "9:21", value: "9:21" },
       ],
     },
     {
@@ -35,9 +54,37 @@ const sdCommonParams = (model: string, data: any) => {
       type: "select",
       default: "3d",
       support: ["core"],
-      options: [{ name: "3D", value: "3d" }],
+      options: [
+        { name: locales.SdPanel.Styles.D3Model, value: "3d-model" },
+        { name: locales.SdPanel.Styles.AnalogFilm, value: "analog-film" },
+        { name: locales.SdPanel.Styles.Anime, value: "anime" },
+        { name: locales.SdPanel.Styles.Cinematic, value: "cinematic" },
+        { name: locales.SdPanel.Styles.ComicBook, value: "comic-book" },
+        { name: locales.SdPanel.Styles.DigitalArt, value: "digital-art" },
+        { name: locales.SdPanel.Styles.Enhance, value: "enhance" },
+        { name: locales.SdPanel.Styles.FantasyArt, value: "fantasy-art" },
+        { name: locales.SdPanel.Styles.Isometric, value: "isometric" },
+        { name: locales.SdPanel.Styles.LineArt, value: "line-art" },
+        { name: locales.SdPanel.Styles.LowPoly, value: "low-poly" },
+        {
+          name: locales.SdPanel.Styles.ModelingCompound,
+          value: "modeling-compound",
+        },
+        { name: locales.SdPanel.Styles.NeonPunk, value: "neon-punk" },
+        { name: locales.SdPanel.Styles.Origami, value: "origami" },
+        { name: locales.SdPanel.Styles.Photographic, value: "photographic" },
+        { name: locales.SdPanel.Styles.PixelArt, value: "pixel-art" },
+        { name: locales.SdPanel.Styles.TileTexture, value: "tile-texture" },
+      ],
+    },
+    {
+      name: "Seed",
+      value: "seed",
+      type: "number",
+      default: 0,
+      min: 0,
+      max: 4294967294,
     },
-    { name: "Seed", value: "seed", type: "number", default: 0 },
     {
       name: locales.SdPanel.OutFormat,
       value: "output_format",
@@ -69,7 +116,11 @@ const models = [
     name: "Stable Diffusion 3",
     value: "sd3",
     params: (data: any) => {
-      return sdCommonParams("sd3", data);
+      return sdCommonParams("sd3", data).filter((item) => {
+        return !(
+          data.model === "sd3-large-turbo" && item.value == "negative_prompt"
+        );
+      });
     },
   },
 ];
@@ -100,15 +151,8 @@ export function ControlParamItem(props: {
 export function ControlParam(props: {
   columns: any[];
   data: any;
-  set: React.Dispatch<React.SetStateAction<{}>>;
+  onChange: (field: string, val: any) => void;
 }) {
-  const handleValueChange = (field: string, val: any) => {
-    props.set((prevParams) => ({
-      ...prevParams,
-      [field]: val,
-    }));
-  };
-
   return (
     <>
       {props.columns.map((item) => {
@@ -122,7 +166,7 @@ export function ControlParam(props: {
                   style={{ maxWidth: "100%", width: "100%", padding: "10px" }}
                   placeholder={item.placeholder}
                   onChange={(e) => {
-                    handleValueChange(item.value, e.currentTarget.value);
+                    props.onChange(item.value, e.currentTarget.value);
                   }}
                   value={props.data[item.value]}
                 ></textarea>
@@ -135,7 +179,7 @@ export function ControlParam(props: {
                 <Select
                   value={props.data[item.value]}
                   onChange={(e) => {
-                    handleValueChange(item.value, e.currentTarget.value);
+                    props.onChange(item.value, e.currentTarget.value);
                   }}
                 >
                   {item.options.map((opt: any) => {
@@ -154,9 +198,11 @@ export function ControlParam(props: {
               <ControlParamItem title={item.name} subTitle={item.sub}>
                 <input
                   type="number"
-                  value={props.data[item.value]}
+                  min={item.min}
+                  max={item.max}
+                  value={props.data[item.value] || 0}
                   onChange={(e) => {
-                    handleValueChange(item.value, e.currentTarget.value);
+                    props.onChange(item.value, parseInt(e.currentTarget.value));
                   }}
                 />
               </ControlParamItem>
@@ -170,7 +216,7 @@ export function ControlParam(props: {
                   value={props.data[item.value]}
                   style={{ maxWidth: "100%", width: "100%" }}
                   onChange={(e) => {
-                    handleValueChange(item.value, e.currentTarget.value);
+                    props.onChange(item.value, e.currentTarget.value);
                   }}
                 />
               </ControlParamItem>
@@ -182,9 +228,47 @@ export function ControlParam(props: {
   );
 }
 
+const getModelParamBasicData = (
+  columns: any[],
+  data: any,
+  clearText?: boolean,
+) => {
+  const newParams: any = {};
+  columns.forEach((item: any) => {
+    if (clearText && ["text", "textarea", "number"].includes(item.type)) {
+      newParams[item.value] = item.default || "";
+    } else {
+      // @ts-ignore
+      newParams[item.value] = data[item.value] || item.default || "";
+    }
+  });
+  return newParams;
+};
+
 export function SdPanel() {
   const [currentModel, setCurrentModel] = useState(models[0]);
-  const [params, setParams] = useState({});
+  const [params, setParams] = useState(
+    getModelParamBasicData(currentModel.params({}), {}),
+  );
+  const handleValueChange = (field: string, val: any) => {
+    setParams((prevParams: any) => ({
+      ...prevParams,
+      [field]: val,
+    }));
+  };
+  const handleModelChange = (model: any) => {
+    setCurrentModel(model);
+    setParams(getModelParamBasicData(model.params({}), params));
+  };
+  const handleSubmit = () => {
+    const columns = currentModel.params(params);
+    const reqData: any = {};
+    columns.forEach((item: any) => {
+      reqData[item.value] = params[item.value] ?? null;
+    });
+    console.log(JSON.stringify(reqData, null, 4));
+    setParams(getModelParamBasicData(columns, params, true));
+  };
   return (
     <>
       <ControlParamItem title={locales.SdPanel.AIModel}>
@@ -196,9 +280,7 @@ export function SdPanel() {
                 key={item.value}
                 type={currentModel.value == item.value ? "primary" : null}
                 shadow
-                onClick={() => {
-                  setCurrentModel(item);
-                }}
+                onClick={() => handleModelChange(item)}
               />
             );
           })}
@@ -206,14 +288,15 @@ export function SdPanel() {
       </ControlParamItem>
       <ControlParam
         columns={currentModel.params(params) as any[]}
-        set={setParams}
         data={params}
+        onChange={handleValueChange}
       ></ControlParam>
       <IconButton
         text={locales.SdPanel.Submit}
         type="primary"
         style={{ marginTop: "20px" }}
         shadow
+        onClick={handleSubmit}
       ></IconButton>
     </>
   );
diff --git a/app/locales/cn.ts b/app/locales/cn.ts
index 892cc19fadc..9fa0c9c2df4 100644
--- a/app/locales/cn.ts
+++ b/app/locales/cn.ts
@@ -492,7 +492,27 @@ const cn = {
     ImageStyle: "图像风格",
     OutFormat: "输出格式",
     AIModel: "AI模型",
+    ChildModel: "子模型",
     Submit: "提交生成",
+    Styles: {
+      D3Model: "3D模型",
+      AnalogFilm: "模拟电影",
+      Anime: "动漫",
+      Cinematic: "电影风格",
+      ComicBook: "漫画书",
+      DigitalArt: "数字艺术",
+      Enhance: "增强",
+      FantasyArt: "幻想艺术",
+      Isometric: "等角",
+      LineArt: "线描",
+      LowPoly: "低多边形",
+      ModelingCompound: "建模材料",
+      NeonPunk: "霓虹朋克",
+      Origami: "折纸",
+      Photographic: "摄影",
+      PixelArt: "像素艺术",
+      TileTexture: "贴图",
+    },
   },
 };
 
diff --git a/app/locales/en.ts b/app/locales/en.ts
index 373307f06a4..b807ee8ec7e 100644
--- a/app/locales/en.ts
+++ b/app/locales/en.ts
@@ -498,7 +498,27 @@ const en: LocaleType = {
     ImageStyle: "Image Style",
     OutFormat: "Output Format",
     AIModel: "AI Model",
+    ChildModel: "Child Model",
     Submit: "Submit",
+    Styles: {
+      D3Model: "3d-model",
+      AnalogFilm: "analog-film",
+      Anime: "anime",
+      Cinematic: "cinematic",
+      ComicBook: "comic-book",
+      DigitalArt: "digital-art",
+      Enhance: "enhance",
+      FantasyArt: "fantasy-art",
+      Isometric: "isometric",
+      LineArt: "line-art",
+      LowPoly: "low-poly",
+      ModelingCompound: "modeling-compound",
+      NeonPunk: "neon-punk",
+      Origami: "origami",
+      Photographic: "photographic",
+      PixelArt: "pixel-art",
+      TileTexture: "tile-texture",
+    },
   },
 };
 

From 54401162bd3a3141d37d245d95ae0c8de9756731 Mon Sep 17 00:00:00 2001
From: licoy <licoycn@gmail.com>
Date: Tue, 2 Jul 2024 15:31:30 +0800
Subject: [PATCH 07/43] fix: model version field name

---
 app/components/sd-panel.tsx | 2 +-
 app/locales/cn.ts           | 2 +-
 app/locales/en.ts           | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/sd-panel.tsx b/app/components/sd-panel.tsx
index 3cbec7b9751..71a7a0ce37a 100644
--- a/app/components/sd-panel.tsx
+++ b/app/components/sd-panel.tsx
@@ -14,7 +14,7 @@ const sdCommonParams = (model: string, data: any) => {
       required: true,
     },
     {
-      name: locales.SdPanel.ChildModel,
+      name: locales.SdPanel.ModelVersion,
       value: "model",
       type: "select",
       default: 0,
diff --git a/app/locales/cn.ts b/app/locales/cn.ts
index 9fa0c9c2df4..a0323d85cc8 100644
--- a/app/locales/cn.ts
+++ b/app/locales/cn.ts
@@ -492,7 +492,7 @@ const cn = {
     ImageStyle: "图像风格",
     OutFormat: "输出格式",
     AIModel: "AI模型",
-    ChildModel: "子模型",
+    ModelVersion: "模型版本",
     Submit: "提交生成",
     Styles: {
       D3Model: "3D模型",
diff --git a/app/locales/en.ts b/app/locales/en.ts
index b807ee8ec7e..29bbe3d005a 100644
--- a/app/locales/en.ts
+++ b/app/locales/en.ts
@@ -498,7 +498,7 @@ const en: LocaleType = {
     ImageStyle: "Image Style",
     OutFormat: "Output Format",
     AIModel: "AI Model",
-    ChildModel: "Child Model",
+    ModelVersion: "Model Version",
     Submit: "Submit",
     Styles: {
       D3Model: "3d-model",

From a16725ac178007ebbc7597f3e7bf8b93ec1940ea Mon Sep 17 00:00:00 2001
From: licoy <licoycn@gmail.com>
Date: Wed, 3 Jul 2024 15:37:34 +0800
Subject: [PATCH 08/43] feat: Improve SD list data and API integration

---
 app/components/chat.tsx       |   2 +-
 app/components/home.tsx       |  18 ++-
 app/components/sd-panel.tsx   |  81 ++++++++++--
 app/components/sd.module.scss |  53 ++++++++
 app/components/sd.tsx         | 231 +++++++++++++++++++++++++++++++++-
 app/components/sidebar.tsx    |  23 ++--
 app/config/client.ts          |   2 +-
 app/constant.ts               |   2 +
 app/locales/cn.ts             |  21 ++++
 app/locales/en.ts             |  21 ++++
 app/page.tsx                  |   1 +
 app/store/sd.ts               |  78 ++++++++++++
 package.json                  |   1 +
 yarn.lock                     |   5 +
 14 files changed, 507 insertions(+), 32 deletions(-)
 create mode 100644 app/store/sd.ts

diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index 06119250465..9145db04dce 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -337,7 +337,7 @@ function ClearContextDivider() {
   );
 }
 
-function ChatAction(props: {
+export function ChatAction(props: {
   text: string;
   icon: JSX.Element;
   onClick: () => void;
diff --git a/app/components/home.tsx b/app/components/home.tsx
index 99755cc2032..21cfbcc4281 100644
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -1,7 +1,5 @@
 "use client";
 
-import { Sd } from "@/app/components/sd";
-
 require("../polyfill");
 
 import { useState, useEffect } from "react";
@@ -32,6 +30,7 @@ import { getClientConfig } from "../config/client";
 import { ClientApi } from "../client/api";
 import { useAccessStore } from "../store";
 import { identifyDefaultClaudeModel } from "../utils/checkers";
+import { initDB } from "react-indexed-db-hook";
 
 export function Loading(props: { noLogo?: boolean }) {
   return (
@@ -58,6 +57,14 @@ const MaskPage = dynamic(async () => (await import("./mask")).MaskPage, {
   loading: () => <Loading noLogo />,
 });
 
+const Sd = dynamic(async () => (await import("./sd")).Sd, {
+  loading: () => <Loading noLogo />,
+});
+
+const SdPanel = dynamic(async () => (await import("./sd-panel")).SdPanel, {
+  loading: () => <Loading noLogo />,
+});
+
 export function useSwitchTheme() {
   const config = useAppConfig();
 
@@ -128,7 +135,8 @@ const loadAsyncGoogleFont = () => {
 function Screen() {
   const config = useAppConfig();
   const location = useLocation();
-  const isHome = location.pathname === Path.Home;
+  const isHome =
+    location.pathname === Path.Home || location.pathname === Path.SdPanel;
   const isAuth = location.pathname === Path.Auth;
   const isMobileScreen = useMobileScreen();
   const shouldTightBorder =
@@ -137,7 +145,6 @@ function Screen() {
   useEffect(() => {
     loadAsyncGoogleFont();
   }, []);
-
   return (
     <div
       className={
@@ -154,7 +161,6 @@ function Screen() {
       ) : (
         <>
           <SideBar className={isHome ? styles["sidebar-show"] : ""} />
-
           <div className={styles["window-content"]} id={SlotID.AppBody}>
             <Routes>
               <Route path={Path.Home} element={<Chat />} />
@@ -162,6 +168,7 @@ function Screen() {
               <Route path={Path.Masks} element={<MaskPage />} />
               <Route path={Path.Chat} element={<Chat />} />
               <Route path={Path.Sd} element={<Sd />} />
+              <Route path={Path.SdPanel} element={<Sd />} />
               <Route path={Path.Settings} element={<Settings />} />
             </Routes>
           </div>
@@ -173,7 +180,6 @@ function Screen() {
 
 export function useLoadData() {
   const config = useAppConfig();
-
   var api: ClientApi;
   if (config.modelConfig.model.startsWith("gemini")) {
     api = new ClientApi(ModelProvider.GeminiPro);
diff --git a/app/components/sd-panel.tsx b/app/components/sd-panel.tsx
index 71a7a0ce37a..8e1159cf9b2 100644
--- a/app/components/sd-panel.tsx
+++ b/app/components/sd-panel.tsx
@@ -1,8 +1,14 @@
 import styles from "./sd-panel.module.scss";
 import React, { useState } from "react";
-import { Select } from "@/app/components/ui-lib";
+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();
 
 const sdCommonParams = (model: string, data: any) => {
   return [
@@ -89,7 +95,7 @@ const sdCommonParams = (model: string, data: any) => {
       name: locales.SdPanel.OutFormat,
       value: "output_format",
       type: "select",
-      default: 0,
+      default: "png",
       options: [
         { name: "PNG", value: "png" },
         { name: "JPEG", value: "jpeg" },
@@ -128,6 +134,7 @@ const models = [
 export function ControlParamItem(props: {
   title: string;
   subTitle?: string;
+  required?: boolean;
   children?: JSX.Element | JSX.Element[];
   className?: string;
 }) {
@@ -135,7 +142,10 @@ export function ControlParamItem(props: {
     <div className={styles["ctrl-param-item"] + ` ${props.className || ""}`}>
       <div className={styles["ctrl-param-item-header"]}>
         <div className={styles["ctrl-param-item-title"]}>
-          <div>{props.title}</div>
+          <div>
+            {props.title}
+            {props.required && <span style={{ color: "red" }}>*</span>}
+          </div>
         </div>
       </div>
       {props.children}
@@ -160,7 +170,11 @@ export function ControlParam(props: {
         switch (item.type) {
           case "textarea":
             element = (
-              <ControlParamItem title={item.name} subTitle={item.sub}>
+              <ControlParamItem
+                title={item.name}
+                subTitle={item.sub}
+                required={item.required}
+              >
                 <textarea
                   rows={item.rows || 3}
                   style={{ maxWidth: "100%", width: "100%", padding: "10px" }}
@@ -175,7 +189,11 @@ export function ControlParam(props: {
             break;
           case "select":
             element = (
-              <ControlParamItem title={item.name} subTitle={item.sub}>
+              <ControlParamItem
+                title={item.name}
+                subTitle={item.sub}
+                required={item.required}
+              >
                 <Select
                   value={props.data[item.value]}
                   onChange={(e) => {
@@ -195,7 +213,11 @@ export function ControlParam(props: {
             break;
           case "number":
             element = (
-              <ControlParamItem title={item.name} subTitle={item.sub}>
+              <ControlParamItem
+                title={item.name}
+                subTitle={item.sub}
+                required={item.required}
+              >
                 <input
                   type="number"
                   min={item.min}
@@ -210,7 +232,11 @@ export function ControlParam(props: {
             break;
           default:
             element = (
-              <ControlParamItem title={item.name} subTitle={item.sub}>
+              <ControlParamItem
+                title={item.name}
+                subTitle={item.sub}
+                required={item.required}
+              >
                 <input
                   type="text"
                   value={props.data[item.value]}
@@ -260,14 +286,43 @@ export function SdPanel() {
     setCurrentModel(model);
     setParams(getModelParamBasicData(model.params({}), params));
   };
+  const sdListDb = useIndexedDB(StoreKey.SdList);
+  const { execCountInc } = useSdStore();
   const handleSubmit = () => {
     const columns = currentModel.params(params);
-    const reqData: any = {};
-    columns.forEach((item: any) => {
-      reqData[item.value] = params[item.value] ?? null;
-    });
-    console.log(JSON.stringify(reqData, null, 4));
-    setParams(getModelParamBasicData(columns, params, true));
+    const reqParams: any = {};
+    for (let i = 0; i < columns.length; i++) {
+      const item = columns[i];
+      reqParams[item.value] = params[item.value] ?? null;
+      if (item.required) {
+        if (!reqParams[item.value]) {
+          showToast(locales.SdPanel.ParamIsRequired(item.name));
+          return;
+        }
+      }
+    }
+    // console.log(JSON.stringify(reqParams, null, 4));
+    let data: any = {
+      model: currentModel.value,
+      model_name: currentModel.name,
+      status: "wait",
+      params: reqParams,
+      created_at: new Date().toISOString(),
+      img_data: "",
+    };
+    sdListDb.add(data).then(
+      (id) => {
+        data = { ...data, id, status: "running" };
+        sdListDb.update(data);
+        execCountInc();
+        sendSdTask(data, sdListDb, execCountInc);
+        setParams(getModelParamBasicData(columns, params, true));
+      },
+      (error) => {
+        console.error(error);
+        showToast(`error: ` + error.message);
+      },
+    );
   };
   return (
     <>
diff --git a/app/components/sd.module.scss b/app/components/sd.module.scss
index e69de29bb2d..9aece2c9beb 100644
--- a/app/components/sd.module.scss
+++ b/app/components/sd.module.scss
@@ -0,0 +1,53 @@
+.sd-img-list{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  .sd-img-item{
+    width: 48%;
+    .sd-img-item-info{
+      flex:1;
+      width: 100%;
+      overflow: hidden;
+      user-select: text;
+      p{
+        margin: 6px;
+        font-size: 12px;
+      }
+      .line-1{
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+    .pre-img{
+      display: flex;
+      width: 130px;
+      justify-content: center;
+      align-items: center;
+      background-color: var(--second);
+      border-radius: 10px;
+    }
+    .img{
+      width: 130px;
+      height: 130px;
+      border-radius: 10px;
+      overflow: hidden;
+      cursor: pointer;
+      transition: all .3s;
+      &:hover{
+        opacity: .7;
+      }
+    }
+    &:not(:last-child){
+      margin-bottom: 20px;
+    }
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .sd-img-list{
+    .sd-img-item{
+      width: 100%;
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/components/sd.tsx b/app/components/sd.tsx
index 5341e5387c9..a35d6a60ea3 100644
--- a/app/components/sd.tsx
+++ b/app/components/sd.tsx
@@ -1,3 +1,232 @@
+import chatStyles from "@/app/components/chat.module.scss";
+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 React, { useEffect, useMemo, useRef, useState } from "react";
+import {
+  copyToClipboard,
+  getMessageTextContent,
+  useMobileScreen,
+  useWindowSize,
+} from "@/app/utils";
+import { useNavigate } from "react-router-dom";
+import { useAppConfig } from "@/app/store";
+import MinIcon from "@/app/icons/min.svg";
+import MaxIcon from "@/app/icons/max.svg";
+import { getClientConfig } from "@/app/config/client";
+import { ChatAction } from "@/app/components/chat";
+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 { useSdStore } from "@/app/store/sd";
+import locales from "@/app/locales";
+import LoadingIcon from "../icons/three-dots.svg";
+import ErrorIcon from "../icons/delete.svg";
+import { Property } from "csstype";
+import { showConfirm } from "@/app/components/ui-lib";
+
+function openBase64ImgUrl(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 });
+  const blobUrl = URL.createObjectURL(blob);
+  window.open(blobUrl);
+}
+
+function getSdTaskStatus(item: any) {
+  let s: string;
+  let color: Property.Color | undefined = undefined;
+  switch (item.status) {
+    case "success":
+      s = Locale.Sd.Status.Success;
+      color = "green";
+      break;
+    case "error":
+      s = Locale.Sd.Status.Error;
+      color = "red";
+      break;
+    case "wait":
+      s = Locale.Sd.Status.Wait;
+      color = "yellow";
+      break;
+    case "running":
+      s = Locale.Sd.Status.Running;
+      color = "blue";
+      break;
+    default:
+      s = item.status.toUpperCase();
+  }
+  return (
+    <p className={styles["line-1"]} title={item.error} style={{ color: color }}>
+      <span>
+        {locales.Sd.Status.Name}: {s}
+      </span>
+      {item.status === "error" && <span> - {item.error}</span>}
+    </p>
+  );
+}
+
 export function Sd() {
-  return <div>sd</div>;
+  const isMobileScreen = useMobileScreen();
+  const navigate = useNavigate();
+  const clientConfig = useMemo(() => getClientConfig(), []);
+  const showMaxIcon = !isMobileScreen && !clientConfig?.isApp;
+  const config = useAppConfig();
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const sdListDb = useIndexedDB(StoreKey.SdList);
+  const [sdImages, setSdImages] = useState([]);
+  const { execCount } = useSdStore();
+
+  useEffect(() => {
+    sdListDb.getAll().then((data) => {
+      setSdImages(((data as never[]) || []).reverse());
+    });
+  }, [execCount]);
+
+  return (
+    <div className={chatStyles.chat} key={"1"}>
+      <div className="window-header" data-tauri-drag-region>
+        {isMobileScreen && (
+          <div className="window-actions">
+            <div className={"window-action-button"}>
+              <IconButton
+                icon={<ReturnIcon />}
+                bordered
+                title={Locale.Chat.Actions.ChatList}
+                onClick={() => navigate(Path.SdPanel)}
+              />
+            </div>
+          </div>
+        )}
+        <div className={`window-header-title ${chatStyles["chat-body-title"]}`}>
+          <div className={`window-header-main-title`}>Stability AI</div>
+          <div className="window-header-sub-title">
+            {Locale.Sd.SubTitle(sdImages.length || 0)}
+          </div>
+        </div>
+
+        <div className="window-actions">
+          {showMaxIcon && (
+            <div className="window-action-button">
+              <IconButton
+                icon={config.tightBorder ? <MinIcon /> : <MaxIcon />}
+                bordered
+                onClick={() => {
+                  config.update(
+                    (config) => (config.tightBorder = !config.tightBorder),
+                  );
+                }}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+      <div className={chatStyles["chat-body"]} ref={scrollRef}>
+        <div className={styles["sd-img-list"]}>
+          {sdImages.length > 0 ? (
+            sdImages.map((item: any) => {
+              return (
+                <div
+                  key={item.id}
+                  style={{ display: "flex" }}
+                  className={styles["sd-img-item"]}
+                >
+                  {item.status === "success" ? (
+                    <img
+                      className={styles["img"]}
+                      src={`data:image/png;base64,${item.img_data}`}
+                      alt={`${item.id}`}
+                      onClick={(e) => {
+                        openBase64ImgUrl(item.img_data, "image/png");
+                      }}
+                    />
+                  ) : item.status === "error" ? (
+                    <div className={styles["pre-img"]}>
+                      <ErrorIcon />
+                    </div>
+                  ) : (
+                    <div className={styles["pre-img"]}>
+                      <LoadingIcon />
+                    </div>
+                  )}
+                  <div
+                    style={{ marginLeft: "10px" }}
+                    className={styles["sd-img-item-info"]}
+                  >
+                    <p className={styles["line-1"]}>
+                      {locales.SdPanel.Prompt}:{" "}
+                      <span title={item.params.prompt}>
+                        {item.params.prompt}
+                      </span>
+                    </p>
+                    <p>
+                      {locales.SdPanel.AIModel}: {item.model_name}
+                    </p>
+                    {getSdTaskStatus(item)}
+                    <p>{item.created_at}</p>
+                    <div className={chatStyles["chat-message-actions"]}>
+                      <div className={chatStyles["chat-input-actions"]}>
+                        <ChatAction
+                          text={Locale.Sd.Actions.Params}
+                          icon={<PromptIcon />}
+                          onClick={() => console.log(1)}
+                        />
+                        <ChatAction
+                          text={Locale.Sd.Actions.Copy}
+                          icon={<CopyIcon />}
+                          onClick={() =>
+                            copyToClipboard(
+                              getMessageTextContent({
+                                role: "user",
+                                content: item.params.prompt,
+                              }),
+                            )
+                          }
+                        />
+                        <ChatAction
+                          text={Locale.Sd.Actions.Retry}
+                          icon={<ResetIcon />}
+                          onClick={() => console.log(1)}
+                        />
+                        <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);
+                                },
+                              );
+                            }
+                          }}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })
+          ) : (
+            <div>{locales.Sd.EmptyRecord}</div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
 }
diff --git a/app/components/sidebar.tsx b/app/components/sidebar.tsx
index 806660e5dbb..3fc3ef81c6a 100644
--- a/app/components/sidebar.tsx
+++ b/app/components/sidebar.tsx
@@ -155,6 +155,7 @@ export function SideBar(props: { className?: string }) {
   let isChat: boolean = false;
   switch (location.pathname) {
     case Path.Sd:
+    case Path.SdPanel:
       bodyComponent = <SdPanel />;
       break;
     default:
@@ -220,16 +221,18 @@ export function SideBar(props: { className?: string }) {
 
       <div className={styles["sidebar-tail"]}>
         <div className={styles["sidebar-actions"]}>
-          <div className={styles["sidebar-action"] + " " + styles.mobile}>
-            <IconButton
-              icon={<DeleteIcon />}
-              onClick={async () => {
-                if (await showConfirm(Locale.Home.DeleteChat)) {
-                  chatStore.deleteSession(chatStore.currentSessionIndex);
-                }
-              }}
-            />
-          </div>
+          {isChat && (
+            <div className={styles["sidebar-action"] + " " + styles.mobile}>
+              <IconButton
+                icon={<DeleteIcon />}
+                onClick={async () => {
+                  if (await showConfirm(Locale.Home.DeleteChat)) {
+                    chatStore.deleteSession(chatStore.currentSessionIndex);
+                  }
+                }}
+              />
+            </div>
+          )}
           <div className={styles["sidebar-action"]}>
             <Link to={Path.Settings}>
               <IconButton icon={<SettingsIcon />} shadow />
diff --git a/app/config/client.ts b/app/config/client.ts
index da582a3e858..30a7eb40001 100644
--- a/app/config/client.ts
+++ b/app/config/client.ts
@@ -3,7 +3,7 @@ import { BuildConfig, getBuildConfig } from "./build";
 export function getClientConfig() {
   if (typeof document !== "undefined") {
     // client side
-    return JSON.parse(queryMeta("config")) as BuildConfig;
+    return JSON.parse(queryMeta("config") || "{}") as BuildConfig;
   }
 
   if (typeof process !== "undefined") {
diff --git a/app/constant.ts b/app/constant.ts
index c56f77cb9da..29bda6b7f34 100644
--- a/app/constant.ts
+++ b/app/constant.ts
@@ -22,6 +22,7 @@ export enum Path {
   Masks = "/masks",
   Auth = "/auth",
   Sd = "/sd",
+  SdPanel = "/sd-panel",
 }
 
 export enum ApiPath {
@@ -48,6 +49,7 @@ export enum StoreKey {
   Prompt = "prompt-store",
   Update = "chat-update",
   Sync = "sync",
+  SdList = "sd-list",
 }
 
 export const DEFAULT_SIDEBAR_WIDTH = 300;
diff --git a/app/locales/cn.ts b/app/locales/cn.ts
index a0323d85cc8..22ff942055e 100644
--- a/app/locales/cn.ts
+++ b/app/locales/cn.ts
@@ -494,6 +494,7 @@ const cn = {
     AIModel: "AI模型",
     ModelVersion: "模型版本",
     Submit: "提交生成",
+    ParamIsRequired: (name: string) => `${name}不能为空`,
     Styles: {
       D3Model: "3D模型",
       AnalogFilm: "模拟电影",
@@ -514,6 +515,26 @@ const cn = {
       TileTexture: "贴图",
     },
   },
+  Sd: {
+    SubTitle: (count: number) => `共 ${count} 条绘画`,
+    Actions: {
+      Params: "查看参数",
+      Copy: "复制提示词",
+      Delete: "删除",
+      Retry: "重试",
+    },
+    EmptyRecord: "暂无绘画记录",
+    Status: {
+      Name: "状态",
+      Success: "成功",
+      Error: "失败",
+      Wait: "等待中",
+      Running: "运行中",
+    },
+    Danger: {
+      Delete: "确认删除？",
+    },
+  },
 };
 
 type DeepPartial<T> = T extends object
diff --git a/app/locales/en.ts b/app/locales/en.ts
index 29bbe3d005a..a47b1ef70d0 100644
--- a/app/locales/en.ts
+++ b/app/locales/en.ts
@@ -500,6 +500,7 @@ const en: LocaleType = {
     AIModel: "AI Model",
     ModelVersion: "Model Version",
     Submit: "Submit",
+    ParamIsRequired: (name: string) => `${name} is required`,
     Styles: {
       D3Model: "3d-model",
       AnalogFilm: "analog-film",
@@ -520,6 +521,26 @@ const en: LocaleType = {
       TileTexture: "tile-texture",
     },
   },
+  Sd: {
+    SubTitle: (count: number) => `${count} images`,
+    Actions: {
+      Params: "See Params",
+      Copy: "Copy Prompt",
+      Delete: "Delete",
+      Retry: "Retry",
+    },
+    EmptyRecord: "No images yet",
+    Status: {
+      Name: "Status",
+      Success: "Success",
+      Error: "Error",
+      Wait: "Waiting",
+      Running: "Running",
+    },
+    Danger: {
+      Delete: "Confirm to delete?",
+    },
+  },
 };
 
 export default en;
diff --git a/app/page.tsx b/app/page.tsx
index b3f169a9b74..6d24b015438 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,6 +3,7 @@ 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();
 
diff --git a/app/store/sd.ts b/app/store/sd.ts
new file mode 100644
index 00000000000..b811e0addb0
--- /dev/null
+++ b/app/store/sd.ts
@@ -0,0 +1,78 @@
+import { initDB, useIndexedDB } from "react-indexed-db-hook";
+import { StoreKey } from "@/app/constant";
+import { create, StoreApi } from "zustand";
+
+export const SdDbConfig = {
+  name: "@chatgpt-next-web/sd",
+  version: 1,
+  objectStoresMeta: [
+    {
+      store: StoreKey.SdList,
+      storeConfig: { keyPath: "id", autoIncrement: true },
+      storeSchema: [
+        { name: "model", keypath: "model", options: { unique: false } },
+        {
+          name: "model_name",
+          keypath: "model_name",
+          options: { unique: false },
+        },
+        { name: "status", keypath: "status", options: { unique: false } },
+        { name: "params", keypath: "params", options: { unique: false } },
+        { name: "img_data", keypath: "img_data", options: { unique: false } },
+        { name: "error", keypath: "error", options: { unique: false } },
+        {
+          name: "created_at",
+          keypath: "created_at",
+          options: { unique: false },
+        },
+      ],
+    },
+  ],
+};
+
+export function SdDbInit() {
+  initDB(SdDbConfig);
+}
+
+type SdStore = {
+  execCount: number;
+  execCountInc: () => void;
+};
+
+export const useSdStore = create<SdStore>()((set) => ({
+  execCount: 1,
+  execCountInc: () => set((state) => ({ execCount: state.execCount + 1 })),
+}));
+
+export function sendSdTask(data: any, db: any, inc: any) {
+  const formData = new FormData();
+  for (let paramsKey in data.params) {
+    formData.append(paramsKey, data.params[paramsKey]);
+  }
+  fetch("https://api.stability.ai/v2beta/stable-image/generate/" + data.model, {
+    method: "POST",
+    headers: {
+      Accept: "application/json",
+    },
+    body: formData,
+  })
+    .then((response) => response.json())
+    .then((resData) => {
+      if (resData.errors && resData.errors.length > 0) {
+        db.update({ ...data, status: "error", error: resData.errors[0] });
+        inc();
+        return;
+      }
+      if (resData.finish_reason === "SUCCESS") {
+        db.update({ ...data, status: "success", img_data: resData.image });
+      } else {
+        db.update({ ...data, status: "error", error: JSON.stringify(resData) });
+      }
+      inc();
+    })
+    .catch((error) => {
+      db.update({ ...data, status: "error", error: error.message });
+      console.error("Error:", error);
+      inc();
+    });
+}
diff --git a/package.json b/package.json
index 4d06b0b14e4..22465df366c 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "node-fetch": "^3.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-indexed-db-hook": "^1.0.14",
     "react-markdown": "^8.0.7",
     "react-router-dom": "^6.15.0",
     "rehype-highlight": "^6.0.0",
diff --git a/yarn.lock b/yarn.lock
index 72df8cafc54..3d15ff5f630 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5110,6 +5110,11 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-indexed-db-hook@^1.0.14:
+  version "1.0.14"
+  resolved "https://registry.npmmirror.com/react-indexed-db-hook/-/react-indexed-db-hook-1.0.14.tgz#a29cd732d592735b6a68dfc94316b7a4a091e6be"
+  integrity sha512-tQ6rWofgXUCBhZp9pRpWzthzPbjqcll5uXMo07lbQTKl47VyL9nw9wfVswRxxzS5yj5Sq/VHUkNUjamWbA/M/w==
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"

From 2b0153807cf6294ea7b8bce9f2f4b58a71c94be4 Mon Sep 17 00:00:00 2001
From: licoy <licoycn@gmail.com>
Date: Tue, 9 Jul 2024 09:50:04 +0800
Subject: [PATCH 09/43] feat: Add Stability API server relay sending

---
 app/api/auth.ts                      |   3 +
 app/api/stability/[...path]/route.ts | 104 +++++++++++++++++++++++++++
 app/components/sd-panel.tsx          |  18 ++---
 app/components/sd.tsx                |  83 +++++++++++++++++----
 app/components/ui-lib.tsx            |   5 +-
 app/config/server.ts                 |   3 +
 app/constant.ts                      |   8 +++
 app/locales/cn.ts                    |   2 +
 app/locales/en.ts                    |   2 +
 app/store/sd.ts                      |  23 +++++-
 10 files changed, 220 insertions(+), 31 deletions(-)
 create mode 100644 app/api/stability/[...path]/route.ts

diff --git a/app/api/auth.ts b/app/api/auth.ts
index b750f2d1731..4162ec2d030 100644
--- a/app/api/auth.ts
+++ b/app/api/auth.ts
@@ -73,6 +73,9 @@ export function auth(req: NextRequest, modelProvider: ModelProvider) {
       case ModelProvider.Claude:
         systemApiKey = serverConfig.anthropicApiKey;
         break;
+      case ModelProvider.Stability:
+        systemApiKey = serverConfig.stabilityApiKey;
+        break;
       case ModelProvider.GPT:
       default:
         if (serverConfig.isAzure) {
diff --git a/app/api/stability/[...path]/route.ts b/app/api/stability/[...path]/route.ts
new file mode 100644
index 00000000000..4b2bcc30527
--- /dev/null
+++ b/app/api/stability/[...path]/route.ts
@@ -0,0 +1,104 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getServerSideConfig } from "@/app/config/server";
+import { ModelProvider, STABILITY_BASE_URL } from "@/app/constant";
+import { auth } from "@/app/api/auth";
+
+async function handle(
+  req: NextRequest,
+  { params }: { params: { path: string[] } },
+) {
+  console.log("[Stability] params ", params);
+
+  if (req.method === "OPTIONS") {
+    return NextResponse.json({ body: "OK" }, { status: 200 });
+  }
+
+  const controller = new AbortController();
+
+  const serverConfig = getServerSideConfig();
+
+  let baseUrl = serverConfig.stabilityUrl || STABILITY_BASE_URL;
+
+  if (!baseUrl.startsWith("http")) {
+    baseUrl = `https://${baseUrl}`;
+  }
+
+  if (baseUrl.endsWith("/")) {
+    baseUrl = baseUrl.slice(0, -1);
+  }
+
+  let path = `${req.nextUrl.pathname}`.replaceAll("/api/stability/", "");
+
+  console.log("[Stability Proxy] ", path);
+  console.log("[Stability Base Url]", baseUrl);
+
+  const timeoutId = setTimeout(
+    () => {
+      controller.abort();
+    },
+    10 * 60 * 1000,
+  );
+
+  const authResult = auth(req, ModelProvider.Stability);
+
+  if (authResult.error) {
+    return NextResponse.json(authResult, {
+      status: 401,
+    });
+  }
+
+  const bearToken = req.headers.get("Authorization") ?? "";
+  const token = bearToken.trim().replaceAll("Bearer ", "").trim();
+
+  const key = token ? token : serverConfig.stabilityApiKey;
+
+  if (!key) {
+    return NextResponse.json(
+      {
+        error: true,
+        message: `missing STABILITY_API_KEY in server env vars`,
+      },
+      {
+        status: 401,
+      },
+    );
+  }
+
+  const fetchUrl = `${baseUrl}/${path}`;
+  console.log("[Stability Url] ", fetchUrl);
+  const fetchOptions: RequestInit = {
+    headers: {
+      "Content-Type": req.headers.get("Content-Type") || "multipart/form-data",
+      Accept: req.headers.get("Accept") || "application/json",
+      Authorization: `Bearer ${key}`,
+    },
+    method: req.method,
+    body: req.body,
+    // to fix #2485: https://stackoverflow.com/questions/55920957/cloudflare-worker-typeerror-one-time-use-body
+    redirect: "manual",
+    // @ts-ignore
+    duplex: "half",
+    signal: controller.signal,
+  };
+
+  try {
+    const res = await fetch(fetchUrl, fetchOptions);
+    // to prevent browser prompt for credentials
+    const newHeaders = new Headers(res.headers);
+    newHeaders.delete("www-authenticate");
+    // to disable nginx buffering
+    newHeaders.set("X-Accel-Buffering", "no");
+    return new Response(res.body, {
+      status: res.status,
+      statusText: res.statusText,
+      headers: newHeaders,
+    });
+  } finally {
+    clearTimeout(timeoutId);
+  }
+}
+
+export const GET = handle;
+export const POST = handle;
+
+export const runtime = "edge";
diff --git a/app/components/sd-panel.tsx b/app/components/sd-panel.tsx
index 8e1159cf9b2..0430301524e 100644
--- a/app/components/sd-panel.tsx
+++ b/app/components/sd-panel.tsx
@@ -307,22 +307,12 @@ export function SdPanel() {
       model_name: currentModel.name,
       status: "wait",
       params: reqParams,
-      created_at: new Date().toISOString(),
+      created_at: new Date().toLocaleString(),
       img_data: "",
     };
-    sdListDb.add(data).then(
-      (id) => {
-        data = { ...data, id, status: "running" };
-        sdListDb.update(data);
-        execCountInc();
-        sendSdTask(data, sdListDb, execCountInc);
-        setParams(getModelParamBasicData(columns, params, true));
-      },
-      (error) => {
-        console.error(error);
-        showToast(`error: ` + error.message);
-      },
-    );
+    sendSdTask(data, sdListDb, execCountInc, () => {
+      setParams(getModelParamBasicData(columns, params, true));
+    });
   };
   return (
     <>
diff --git a/app/components/sd.tsx b/app/components/sd.tsx
index a35d6a60ea3..6f3acde968f 100644
--- a/app/components/sd.tsx
+++ b/app/components/sd.tsx
@@ -9,7 +9,6 @@ import {
   copyToClipboard,
   getMessageTextContent,
   useMobileScreen,
-  useWindowSize,
 } from "@/app/utils";
 import { useNavigate } from "react-router-dom";
 import { useAppConfig } from "@/app/store";
@@ -22,14 +21,18 @@ 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 { useSdStore } from "@/app/store/sd";
+import { sendSdTask, useSdStore } from "@/app/store/sd";
 import locales from "@/app/locales";
 import LoadingIcon from "../icons/three-dots.svg";
 import ErrorIcon from "../icons/delete.svg";
 import { Property } from "csstype";
-import { showConfirm } from "@/app/components/ui-lib";
+import {
+  showConfirm,
+  showImageModal,
+  showModal,
+} from "@/app/components/ui-lib";
 
-function openBase64ImgUrl(base64Data: string, contentType: string) {
+function getBase64ImgUrl(base64Data: string, contentType: string) {
   const byteCharacters = atob(base64Data);
   const byteNumbers = new Array(byteCharacters.length);
   for (let i = 0; i < byteCharacters.length; i++) {
@@ -37,8 +40,7 @@ function openBase64ImgUrl(base64Data: string, contentType: string) {
   }
   const byteArray = new Uint8Array(byteNumbers);
   const blob = new Blob([byteArray], { type: contentType });
-  const blobUrl = URL.createObjectURL(blob);
-  window.open(blobUrl);
+  return URL.createObjectURL(blob);
 }
 
 function getSdTaskStatus(item: any) {
@@ -69,7 +71,24 @@ function getSdTaskStatus(item: any) {
       <span>
         {locales.Sd.Status.Name}: {s}
       </span>
-      {item.status === "error" && <span> - {item.error}</span>}
+      {item.status === "error" && (
+        <span
+          className="clickable"
+          onClick={() => {
+            showModal({
+              title: locales.Sd.Detail,
+              children: (
+                <div style={{ color: color, userSelect: "text" }}>
+                  {item.error}
+                </div>
+              ),
+            });
+          }}
+        >
+          {" "}
+          - {item.error}
+        </span>
+      )}
     </p>
   );
 }
@@ -83,7 +102,7 @@ export function Sd() {
   const scrollRef = useRef<HTMLDivElement>(null);
   const sdListDb = useIndexedDB(StoreKey.SdList);
   const [sdImages, setSdImages] = useState([]);
-  const { execCount } = useSdStore();
+  const { execCount, execCountInc } = useSdStore();
 
   useEffect(() => {
     sdListDb.getAll().then((data) => {
@@ -145,7 +164,10 @@ export function Sd() {
                       src={`data:image/png;base64,${item.img_data}`}
                       alt={`${item.id}`}
                       onClick={(e) => {
-                        openBase64ImgUrl(item.img_data, "image/png");
+                        showImageModal(
+                          getBase64ImgUrl(item.img_data, "image/png"),
+                          true,
+                        );
                       }}
                     />
                   ) : item.status === "error" ? (
@@ -163,7 +185,20 @@ export function Sd() {
                   >
                     <p className={styles["line-1"]}>
                       {locales.SdPanel.Prompt}:{" "}
-                      <span title={item.params.prompt}>
+                      <span
+                        className="clickable"
+                        title={item.params.prompt}
+                        onClick={() => {
+                          showModal({
+                            title: locales.Sd.Detail,
+                            children: (
+                              <div style={{ userSelect: "text" }}>
+                                {item.params.prompt}
+                              </div>
+                            ),
+                          });
+                        }}
+                      >
                         {item.params.prompt}
                       </span>
                     </p>
@@ -177,7 +212,21 @@ export function Sd() {
                         <ChatAction
                           text={Locale.Sd.Actions.Params}
                           icon={<PromptIcon />}
-                          onClick={() => console.log(1)}
+                          onClick={() => {
+                            showModal({
+                              title: locales.Sd.GenerateParams,
+                              children: (
+                                <div style={{ userSelect: "text" }}>
+                                  {Object.keys(item.params).map((key) => (
+                                    <div key={key} style={{ margin: "10px" }}>
+                                      <strong>{key}: </strong>
+                                      {item.params[key]}
+                                    </div>
+                                  ))}
+                                </div>
+                              ),
+                            });
+                          }}
                         />
                         <ChatAction
                           text={Locale.Sd.Actions.Copy}
@@ -194,7 +243,17 @@ export function Sd() {
                         <ChatAction
                           text={Locale.Sd.Actions.Retry}
                           icon={<ResetIcon />}
-                          onClick={() => console.log(1)}
+                          onClick={() => {
+                            const reqData = {
+                              model: item.model,
+                              model_name: item.model_name,
+                              status: "wait",
+                              params: { ...item.params },
+                              created_at: new Date().toLocaleString(),
+                              img_data: "",
+                            };
+                            sendSdTask(reqData, sdListDb, execCountInc);
+                          }}
                         />
                         <ChatAction
                           text={Locale.Sd.Actions.Delete}
diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx
index 499c0fee558..9d17672fa5b 100644
--- a/app/components/ui-lib.tsx
+++ b/app/components/ui-lib.tsx
@@ -425,11 +425,12 @@ export function showPrompt(content: any, value = "", rows = 3) {
   });
 }
 
-export function showImageModal(img: string) {
+export function showImageModal(img: string, defaultMax?: boolean) {
   showModal({
     title: Locale.Export.Image.Modal,
+    defaultMax: defaultMax,
     children: (
-      <div>
+      <div style={{ display: "flex", justifyContent: "center" }}>
         <img
           src={img}
           alt="preview"
diff --git a/app/config/server.ts b/app/config/server.ts
index b7c85ce6a5f..7d1ffb0dcb5 100644
--- a/app/config/server.ts
+++ b/app/config/server.ts
@@ -124,6 +124,9 @@ export const getServerSideConfig = () => {
     anthropicApiVersion: process.env.ANTHROPIC_API_VERSION,
     anthropicUrl: process.env.ANTHROPIC_URL,
 
+    stabilityUrl: process.env.STABILITY_URL,
+    stabilityApiKey: process.env.STABILITY_API_KEY,
+
     gtmId: process.env.GTM_ID,
 
     needCode: ACCESS_CODES.size > 0,
diff --git a/app/constant.ts b/app/constant.ts
index 29bda6b7f34..4a6043e308d 100644
--- a/app/constant.ts
+++ b/app/constant.ts
@@ -1,3 +1,5 @@
+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}`;
@@ -13,6 +15,7 @@ export const OPENAI_BASE_URL = "https://api.openai.com";
 export const ANTHROPIC_BASE_URL = "https://api.anthropic.com";
 
 export const GEMINI_BASE_URL = "https://generativelanguage.googleapis.com/";
+export const STABILITY_BASE_URL = "https://api.stability.ai";
 
 export enum Path {
   Home = "/",
@@ -79,6 +82,7 @@ export enum ModelProvider {
   GPT = "GPT",
   GeminiPro = "GeminiPro",
   Claude = "Claude",
+  Stability = "Stability",
 }
 
 export const Anthropic = {
@@ -104,6 +108,10 @@ export const Google = {
   ChatPath: (modelName: string) => `v1beta/models/${modelName}:generateContent`,
 };
 
+export const StabilityPath = {
+  GeneratePath: "v2beta/stable-image/generate",
+};
+
 export const DEFAULT_INPUT_TEMPLATE = `{{input}}`; // input / time / model / lang
 // export const DEFAULT_SYSTEM_TEMPLATE = `
 // You are ChatGPT, a large language model trained by {{ServiceProvider}}.
diff --git a/app/locales/cn.ts b/app/locales/cn.ts
index 22ff942055e..b01ea9d27c6 100644
--- a/app/locales/cn.ts
+++ b/app/locales/cn.ts
@@ -534,6 +534,8 @@ const cn = {
     Danger: {
       Delete: "确认删除？",
     },
+    GenerateParams: "生成参数",
+    Detail: "详情",
   },
 };
 
diff --git a/app/locales/en.ts b/app/locales/en.ts
index a47b1ef70d0..da2224f6a62 100644
--- a/app/locales/en.ts
+++ b/app/locales/en.ts
@@ -540,6 +540,8 @@ const en: LocaleType = {
     Danger: {
       Delete: "Confirm to delete?",
     },
+    GenerateParams: "Generate Params",
+    Detail: "Detail",
   },
 };
 
diff --git a/app/store/sd.ts b/app/store/sd.ts
index b811e0addb0..77d31d74335 100644
--- a/app/store/sd.ts
+++ b/app/store/sd.ts
@@ -1,6 +1,7 @@
 import { initDB, useIndexedDB } from "react-indexed-db-hook";
-import { StoreKey } from "@/app/constant";
+import { StabilityPath, StoreKey } from "@/app/constant";
 import { create, StoreApi } from "zustand";
+import { showToast } from "@/app/components/ui-lib";
 
 export const SdDbConfig = {
   name: "@chatgpt-next-web/sd",
@@ -44,12 +45,28 @@ export const useSdStore = create<SdStore>()((set) => ({
   execCountInc: () => set((state) => ({ execCount: state.execCount + 1 })),
 }));
 
-export function sendSdTask(data: any, db: any, inc: any) {
+export function sendSdTask(data: any, db: any, inc: any, okCall?: Function) {
+  db.add(data).then(
+    (id: number) => {
+      data = { ...data, id, status: "running" };
+      db.update(data);
+      inc();
+      stabilityRequestCall(data, db, inc);
+      okCall?.();
+    },
+    (error: any) => {
+      console.error(error);
+      showToast(`error: ` + error.message);
+    },
+  );
+}
+
+export function stabilityRequestCall(data: any, db: any, inc: any) {
   const formData = new FormData();
   for (let paramsKey in data.params) {
     formData.append(paramsKey, data.params[paramsKey]);
   }
-  fetch("https://api.stability.ai/v2beta/stable-image/generate/" + data.model, {
+  fetch(`/api/stability/${StabilityPath.GeneratePath}/${data.model}`, {
     method: "POST",
     headers: {
       Accept: "application/json",

From 17cc9284a0d90c65f3a349d2e3b08d30c24fc82b Mon Sep 17 00:00:00 2001
From: lloydzhou <lloydzhou@qq.com>
Date: Thu, 11 Jul 2024 15:35:36 +0800
Subject: [PATCH 10/43] add config in readme

---
 README.md    | 8 ++++++++
 README_CN.md | 9 +++++++++
 2 files changed, 17 insertions(+)

diff --git a/README.md b/README.md
index 24967c16403..ff9d003bdf6 100644
--- a/README.md
+++ b/README.md
@@ -295,6 +295,14 @@ You can use this option if you want to increase the number of webdav service add
 
 Customize the default template used to initialize the User Input Preprocessing configuration item in Settings.
 
+### `STABILITY_API_KEY` (optional)
+
+Stability API key.
+
+### `STABILITY_URL` (optional)
+
+Customize Stability API url.
+
 ## Requirements
 
 NodeJS >= 18, Docker >= 20
diff --git a/README_CN.md b/README_CN.md
index 5400bb276fa..42121ef1540 100644
--- a/README_CN.md
+++ b/README_CN.md
@@ -200,6 +200,15 @@ ByteDance Api Url.
 
 自定义默认的 template，用于初始化『设置』中的『用户输入预处理』配置项
 
+### `STABILITY_API_KEY` (optional)
+
+Stability API密钥
+
+### `STABILITY_URL` (optional)
+
+自定义的Stability API请求地址
+
+
 ## 开发
 
 点击下方按钮，开始二次开发：

From 01ea690421489975d099429ad4bab17356109d25 Mon Sep 17 00:00:00 2001
From: lloydzhou <lloydzhou@qq.com>
Date: Thu, 11 Jul 2024 18:35:44 +0800
Subject: [PATCH 11/43] remove code

---
 app/components/sidebar.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/components/sidebar.tsx b/app/components/sidebar.tsx
index 3fc3ef81c6a..dbe2f2d1a5f 100644
--- a/app/components/sidebar.tsx
+++ b/app/components/sidebar.tsx
@@ -31,7 +31,6 @@ import { Link, useLocation, useNavigate } from "react-router-dom";
 import { isIOS, useMobileScreen } from "../utils";
 import dynamic from "next/dynamic";
 import { Selector, showConfirm, showToast } from "./ui-lib";
-import de from "@/app/locales/de";
 
 const ChatList = dynamic(async () => (await import("./chat-list")).ChatList, {
   loading: () => null,

From 74b915a7907f8f6964b3adbd068f65182d0f3409 Mon Sep 17 00:00:00 2001
From: licoy <licoycn@gmail.com>
Date: Fri, 12 Jul 2024 10:32:06 +0800
Subject: [PATCH 12/43] fix: sd3 model default select

---
 app/components/sd-panel.tsx | 3 ++-
 app/store/sd.ts             | 4 ++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/components/sd-panel.tsx b/app/components/sd-panel.tsx
index 0430301524e..cf6e0d8e237 100644
--- a/app/components/sd-panel.tsx
+++ b/app/components/sd-panel.tsx
@@ -23,7 +23,7 @@ const sdCommonParams = (model: string, data: any) => {
       name: locales.SdPanel.ModelVersion,
       value: "model",
       type: "select",
-      default: 0,
+      default: "sd3-medium",
       support: ["sd3"],
       options: [
         { name: "SD3 Medium", value: "sd3-medium" },
@@ -311,6 +311,7 @@ export function SdPanel() {
       img_data: "",
     };
     sendSdTask(data, sdListDb, execCountInc, () => {
+      console.log(currentModel.value);
       setParams(getModelParamBasicData(columns, params, true));
     });
   };
diff --git a/app/store/sd.ts b/app/store/sd.ts
index 77d31d74335..970f190f816 100644
--- a/app/store/sd.ts
+++ b/app/store/sd.ts
@@ -2,6 +2,7 @@ import { initDB, useIndexedDB } from "react-indexed-db-hook";
 import { StabilityPath, StoreKey } from "@/app/constant";
 import { create, StoreApi } from "zustand";
 import { showToast } from "@/app/components/ui-lib";
+import { getHeaders } from "@/app/client/api";
 
 export const SdDbConfig = {
   name: "@chatgpt-next-web/sd",
@@ -66,9 +67,12 @@ export function stabilityRequestCall(data: any, db: any, inc: any) {
   for (let paramsKey in data.params) {
     formData.append(paramsKey, data.params[paramsKey]);
   }
+  const headers = getHeaders();
+  delete headers["Content-Type"];
   fetch(`/api/stability/${StabilityPath.GeneratePath}/${data.model}`, {
     method: "POST",
     headers: {
+      ...headers,
       Accept: "application/json",
     },
     body: formData,

From a7ceb61e275846665f2ce1bf4210190fb40d95d7 Mon Sep 17 00:00:00 2001
From: licoy <licoycn@gmail.com>
Date: Fri, 12 Jul 2024 10:33:43 +0800
Subject: [PATCH 13/43] pref: remove console

---
 app/components/sd-panel.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/components/sd-panel.tsx b/app/components/sd-panel.tsx
index cf6e0d8e237..d7476ccf84a 100644
--- a/app/components/sd-panel.tsx
+++ b/app/components/sd-panel.tsx
@@ -301,7 +301,6 @@ export function SdPanel() {
         }
       }
     }
-    // console.log(JSON.stringify(reqParams, null, 4));
     let data: any = {
       model: currentModel.value,
       model_name: currentModel.name,
@@ -311,7 +310,6 @@ export function SdPanel() {
       img_data: "",
     };
     sendSdTask(data, sdListDb, execCountInc, () => {
-      console.log(currentModel.value);
       setParams(getModelParamBasicData(columns, params, true));
     });
   };

From dd1030139bcc0108ca1dceec1bb2baafb0da776b Mon Sep 17 00:00:00 2001
From: licoy <licoycn@gmail.com>
Date: Fri, 12 Jul 2024 15:20:09 +0800
Subject: [PATCH 14/43] fix: sd image preview modal size

---
 app/components/sd.tsx     |  6 ++++++
 app/components/ui-lib.tsx | 25 +++++++++++++++++++------
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/app/components/sd.tsx b/app/components/sd.tsx
index 6f3acde968f..cc0e326e393 100644
--- a/app/components/sd.tsx
+++ b/app/components/sd.tsx
@@ -167,6 +167,12 @@ export function Sd() {
                         showImageModal(
                           getBase64ImgUrl(item.img_data, "image/png"),
                           true,
+                          isMobileScreen
+                            ? { width: "100%", height: "fit-content" }
+                            : { maxWidth: "100%", maxHeight: "100%" },
+                          isMobileScreen
+                            ? { width: "100%", height: "fit-content" }
+                            : { width: "100%", height: "100%" },
                         );
                       }}
                     />
diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx
index 9d17672fa5b..27555105afb 100644
--- a/app/components/ui-lib.tsx
+++ b/app/components/ui-lib.tsx
@@ -13,7 +13,13 @@ import MinIcon from "../icons/min.svg";
 import Locale from "../locales";
 
 import { createRoot } from "react-dom/client";
-import React, { HTMLProps, MouseEvent, useEffect, useState } from "react";
+import React, {
+  CSSProperties,
+  HTMLProps,
+  MouseEvent,
+  useEffect,
+  useState,
+} from "react";
 import { IconButton } from "./button";
 
 export function Popover(props: {
@@ -425,18 +431,25 @@ export function showPrompt(content: any, value = "", rows = 3) {
   });
 }
 
-export function showImageModal(img: string, defaultMax?: boolean) {
+export function showImageModal(
+  img: string,
+  defaultMax?: boolean,
+  style?: CSSProperties,
+  boxStyle?: CSSProperties,
+) {
   showModal({
     title: Locale.Export.Image.Modal,
     defaultMax: defaultMax,
     children: (
-      <div style={{ display: "flex", justifyContent: "center" }}>
+      <div style={{ display: "flex", justifyContent: "center", ...boxStyle }}>
         <img
           src={img}
           alt="preview"
-          style={{
-            maxWidth: "100%",
-          }}
+          style={
+            style ?? {
+              maxWidth: "100%",
+            }
+          }
         ></img>
       </div>
     ),

From 3767b2c7f98540934ebfb4862cc13a87b29547dc Mon Sep 17 00:00:00 2001
From: licoy <licoycn@gmail.com>
Date: Mon, 15 Jul 2024 15:29:56 +0800
Subject: [PATCH 15/43] test

---
 app/components/sd-panel.tsx |   6 +-
 app/components/sd.tsx       |  55 ++++++++---
 app/constant.ts             |   2 -
 app/store/sd.ts             | 176 +++++++++++++++++++++---------------
 4 files changed, 149 insertions(+), 90 deletions(-)

diff --git a/app/components/sd-panel.tsx b/app/components/sd-panel.tsx
index d7476ccf84a..12a54c7320a 100644
--- a/app/components/sd-panel.tsx
+++ b/app/components/sd-panel.tsx
@@ -6,7 +6,7 @@ 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";
+import { SdDbInit, useSdStore } from "@/app/store/sd";
 
 SdDbInit();
 
@@ -287,7 +287,7 @@ export function SdPanel() {
     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 +309,7 @@ export function SdPanel() {
       created_at: new Date().toLocaleString(),
       img_data: "",
     };
-    sendSdTask(data, sdListDb, execCountInc, () => {
+    sdStore.sendTask(data, sdListDb, () => {
       setParams(getModelParamBasicData(columns, params, true));
     });
   };
diff --git a/app/components/sd.tsx b/app/components/sd.tsx
index cc0e326e393..02f94ae0916 100644
--- a/app/components/sd.tsx
+++ b/app/components/sd.tsx
@@ -21,7 +21,7 @@ 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,6 +31,7 @@ import {
   showImageModal,
   showModal,
 } from "@/app/components/ui-lib";
+import { func } from "prop-types";
 
 function getBase64ImgUrl(base64Data: string, contentType: string) {
   const byteCharacters = atob(base64Data);
@@ -93,7 +94,7 @@ function getSdTaskStatus(item: any) {
   );
 }
 
-export function Sd() {
+export async function Sd() {
   const isMobileScreen = useMobileScreen();
   const navigate = useNavigate();
   const clientConfig = useMemo(() => getClientConfig(), []);
@@ -101,14 +102,41 @@ export function Sd() {
   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());
+    setSdImages(sdStore.draw);
+  }, [sdStore.currentId]);
+
+  const useIndexeddb: any = {};
+
+  async function getImageData(item: any) {
+    let id = item.img_data;
+    if (id.indexOf("indexeddb://")) {
+      id = id.replace("indexeddb://", "");
+    }
+    const link = id.split("@");
+    if (link.length != 2) {
+      return id;
+    }
+    let db = useIndexeddb[link[0]];
+    if (!db) {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      db = useIndexedDB(link[0]);
+      useIndexeddb[link[0]] = db;
+    }
+    db.getByID(link[1]).then((data: any) => {
+      console.log(data);
+      item.img = data;
     });
-  }, [execCount]);
+  }
+
+  sdImages.forEach((item: any) => {
+    if (item.status === "success") {
+      getImageData(item);
+    }
+  });
 
   return (
     <div className={chatStyles.chat} key={"1"}>
@@ -161,11 +189,11 @@ export function Sd() {
                   {item.status === "success" ? (
                     <img
                       className={styles["img"]}
-                      src={`data:image/png;base64,${item.img_data}`}
+                      src={`data:image/png;base64,${item.img}`}
                       alt={`${item.id}`}
                       onClick={(e) => {
                         showImageModal(
-                          getBase64ImgUrl(item.img_data, "image/png"),
+                          getBase64ImgUrl(item.img, "image/png"),
                           true,
                           isMobileScreen
                             ? { width: "100%", height: "fit-content" }
@@ -258,7 +286,7 @@ export function Sd() {
                               created_at: new Date().toLocaleString(),
                               img_data: "",
                             };
-                            sendSdTask(reqData, sdListDb, execCountInc);
+                            sdStore.sendTask(reqData, sdListDb);
                           }}
                         />
                         <ChatAction
@@ -268,11 +296,10 @@ export function Sd() {
                             if (await showConfirm(Locale.Sd.Danger.Delete)) {
                               sdListDb.deleteRecord(item.id).then(
                                 () => {
-                                  setSdImages(
-                                    sdImages.filter(
-                                      (i: any) => i.id !== item.id,
-                                    ),
+                                  sdStore.draw = sdImages.filter(
+                                    (i: any) => i.id !== item.id,
                                   );
+                                  sdStore.getNextId();
                                 },
                                 (error) => {
                                   console.error(error);
diff --git a/app/constant.ts b/app/constant.ts
index c51e85a150a..201843e901f 100644
--- a/app/constant.ts
+++ b/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}`;
diff --git a/app/store/sd.ts b/app/store/sd.ts
index 970f190f816..ec0d5cfecfb 100644
--- a/app/store/sd.ts
+++ b/app/store/sd.ts
@@ -1,8 +1,9 @@
-import { initDB, useIndexedDB } from "react-indexed-db-hook";
+import { initDB } from "react-indexed-db-hook";
 import { StabilityPath, StoreKey } from "@/app/constant";
-import { create, StoreApi } from "zustand";
 import { showToast } from "@/app/components/ui-lib";
 import { getHeaders } from "@/app/client/api";
+import { createPersistStore } from "@/app/utils/store";
+import { nanoid } from "nanoid";
 
 export const SdDbConfig = {
   name: "@chatgpt-next-web/sd",
@@ -12,16 +13,7 @@ export const SdDbConfig = {
       store: StoreKey.SdList,
       storeConfig: { keyPath: "id", autoIncrement: true },
       storeSchema: [
-        { name: "model", keypath: "model", options: { unique: false } },
-        {
-          name: "model_name",
-          keypath: "model_name",
-          options: { unique: false },
-        },
-        { name: "status", keypath: "status", options: { unique: false } },
-        { name: "params", keypath: "params", options: { unique: false } },
-        { name: "img_data", keypath: "img_data", options: { unique: false } },
-        { name: "error", keypath: "error", options: { unique: false } },
+        { name: "data", keypath: "data", options: { unique: false } },
         {
           name: "created_at",
           keypath: "created_at",
@@ -36,64 +28,106 @@ export function SdDbInit() {
   initDB(SdDbConfig);
 }
 
-type SdStore = {
-  execCount: number;
-  execCountInc: () => void;
-};
-
-export const useSdStore = create<SdStore>()((set) => ({
-  execCount: 1,
-  execCountInc: () => set((state) => ({ execCount: state.execCount + 1 })),
-}));
+export const useSdStore = createPersistStore<
+  {
+    currentId: number;
+    draw: any[];
+  },
+  {
+    getNextId: () => number;
+    sendTask: (data: any, db: any, okCall?: Function) => void;
+    updateDraw: (draw: any) => void;
+  }
+>(
+  {
+    currentId: 0,
+    draw: [],
+  },
+  (set, _get) => {
+    function get() {
+      return {
+        ..._get(),
+        ...methods,
+      };
+    }
 
-export function sendSdTask(data: any, db: any, inc: any, okCall?: Function) {
-  db.add(data).then(
-    (id: number) => {
-      data = { ...data, id, status: "running" };
-      db.update(data);
-      inc();
-      stabilityRequestCall(data, db, inc);
-      okCall?.();
-    },
-    (error: any) => {
-      console.error(error);
-      showToast(`error: ` + error.message);
-    },
-  );
-}
+    const methods = {
+      getNextId() {
+        const id = ++_get().currentId;
+        set({ currentId: id });
+        return id;
+      },
+      sendTask(data: any, db: any, okCall?: Function) {
+        data = { ...data, id: nanoid(), status: "running" };
+        set({ draw: [data, ..._get().draw] });
+        // db.update(data);
+        this.getNextId();
+        this.stabilityRequestCall(data, db);
+        okCall?.();
+      },
+      stabilityRequestCall(data: any, db: any) {
+        const formData = new FormData();
+        for (let paramsKey in data.params) {
+          formData.append(paramsKey, data.params[paramsKey]);
+        }
+        const headers = getHeaders();
+        delete headers["Content-Type"];
+        fetch(`/api/stability/${StabilityPath.GeneratePath}/${data.model}`, {
+          method: "POST",
+          headers: {
+            ...headers,
+            Accept: "application/json",
+          },
+          body: formData,
+        })
+          .then((response) => response.json())
+          .then((resData) => {
+            if (resData.errors && resData.errors.length > 0) {
+              this.updateDraw({
+                ...data,
+                status: "error",
+                error: resData.errors[0],
+              });
+              this.getNextId();
+              return;
+            }
+            if (resData.finish_reason === "SUCCESS") {
+              const imgId = nanoid();
+              db.add({ id: data.id, data: resData.image });
+              this.updateDraw({
+                ...data,
+                status: "success",
+                img_data: `indexeddb://${StoreKey.SdList}@${imgId}`,
+              });
+            } else {
+              this.updateDraw({
+                ...data,
+                status: "error",
+                error: JSON.stringify(resData),
+              });
+            }
+            this.getNextId();
+          })
+          .catch((error) => {
+            this.updateDraw({ ...data, status: "error", error: error.message });
+            console.error("Error:", error);
+            this.getNextId();
+          });
+      },
+      updateDraw(draw: any) {
+        _get().draw.some((item, index) => {
+          if (item.id === draw.id) {
+            _get().draw[index] = draw;
+            return true;
+          }
+        });
+      },
+    };
 
-export function stabilityRequestCall(data: any, db: any, inc: any) {
-  const formData = new FormData();
-  for (let paramsKey in data.params) {
-    formData.append(paramsKey, data.params[paramsKey]);
-  }
-  const headers = getHeaders();
-  delete headers["Content-Type"];
-  fetch(`/api/stability/${StabilityPath.GeneratePath}/${data.model}`, {
-    method: "POST",
-    headers: {
-      ...headers,
-      Accept: "application/json",
-    },
-    body: formData,
-  })
-    .then((response) => response.json())
-    .then((resData) => {
-      if (resData.errors && resData.errors.length > 0) {
-        db.update({ ...data, status: "error", error: resData.errors[0] });
-        inc();
-        return;
-      }
-      if (resData.finish_reason === "SUCCESS") {
-        db.update({ ...data, status: "success", img_data: resData.image });
-      } else {
-        db.update({ ...data, status: "error", error: JSON.stringify(resData) });
-      }
-      inc();
-    })
-    .catch((error) => {
-      db.update({ ...data, status: "error", error: error.message });
-      console.error("Error:", error);
-      inc();
-    });
-}
+    return methods;
+  },
+  {
+    name: StoreKey.SdList,
+    version: 1.0,
+  },
+);

From e2f0206d88572bad4979324b3c22d789e40854da Mon Sep 17 00:00:00 2001
From: lloydzhou <lloydzhou@qq.com>
Date: Mon, 15 Jul 2024 19:29:25 +0800
Subject: [PATCH 16/43] update using indexdb read sd image data

---
 app/components/sd.tsx | 95 ++++++++++++++++++++++---------------------
 app/store/sd.ts       |  3 +-
 2 files changed, 49 insertions(+), 49 deletions(-)

diff --git a/app/components/sd.tsx b/app/components/sd.tsx
index 02f94ae0916..ece3e18a01c 100644
--- a/app/components/sd.tsx
+++ b/app/components/sd.tsx
@@ -94,7 +94,46 @@ function getSdTaskStatus(item: any) {
   );
 }
 
-export async function Sd() {
+function IndexDBImage({ img_data, title, isMobileScreen }) {
+  const [src, setSrc] = useState(img_data);
+  const sdListDb = useIndexedDB(StoreKey.SdList);
+  const img_id = useMemo(
+    () => img_data.replace("indexeddb://", "").split("@").pop(),
+    [img_data],
+  );
+  useEffect(() => {
+    sdListDb
+      .getByID(img_id)
+      .then(({ data }) => {
+        setSrc(data);
+      })
+      .catch((e) => {
+        setSrc(img_data);
+      });
+  }, [img_data, img_id]);
+
+  return (
+    <img
+      className={styles["img"]}
+      src={`data:image/png;base64,${src}`}
+      alt={title}
+      onClick={(e) => {
+        showImageModal(
+          getBase64ImgUrl(src, "image/png"),
+          true,
+          isMobileScreen
+            ? { width: "100%", height: "fit-content" }
+            : { maxWidth: "100%", maxHeight: "100%" },
+          isMobileScreen
+            ? { width: "100%", height: "fit-content" }
+            : { width: "100%", height: "100%" },
+        );
+      }}
+    />
+  );
+}
+
+export function Sd() {
   const isMobileScreen = useMobileScreen();
   const navigate = useNavigate();
   const clientConfig = useMemo(() => getClientConfig(), []);
@@ -109,35 +148,6 @@ export async function Sd() {
     setSdImages(sdStore.draw);
   }, [sdStore.currentId]);
 
-  const useIndexeddb: any = {};
-
-  async function getImageData(item: any) {
-    let id = item.img_data;
-    if (id.indexOf("indexeddb://")) {
-      id = id.replace("indexeddb://", "");
-    }
-    const link = id.split("@");
-    if (link.length != 2) {
-      return id;
-    }
-    let db = useIndexeddb[link[0]];
-    if (!db) {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      db = useIndexedDB(link[0]);
-      useIndexeddb[link[0]] = db;
-    }
-    db.getByID(link[1]).then((data: any) => {
-      console.log(data);
-      item.img = data;
-    });
-  }
-
-  sdImages.forEach((item: any) => {
-    if (item.status === "success") {
-      getImageData(item);
-    }
-  });
-
   return (
     <div className={chatStyles.chat} key={"1"}>
       <div className="window-header" data-tauri-drag-region>
@@ -187,23 +197,13 @@ export async function Sd() {
                   className={styles["sd-img-item"]}
                 >
                   {item.status === "success" ? (
-                    <img
-                      className={styles["img"]}
-                      src={`data:image/png;base64,${item.img}`}
-                      alt={`${item.id}`}
-                      onClick={(e) => {
-                        showImageModal(
-                          getBase64ImgUrl(item.img, "image/png"),
-                          true,
-                          isMobileScreen
-                            ? { width: "100%", height: "fit-content" }
-                            : { maxWidth: "100%", maxHeight: "100%" },
-                          isMobileScreen
-                            ? { width: "100%", height: "fit-content" }
-                            : { width: "100%", height: "100%" },
-                        );
-                      }}
-                    />
+                    <>
+                      <IndexDBImage
+                        img_data={item.img_data}
+                        title={item.id}
+                        isMobileScreen={isMobileScreen}
+                      />
+                    </>
                   ) : item.status === "error" ? (
                     <div className={styles["pre-img"]}>
                       <ErrorIcon />
@@ -294,6 +294,7 @@ export async function Sd() {
                           icon={<DeleteIcon />}
                           onClick={async () => {
                             if (await showConfirm(Locale.Sd.Danger.Delete)) {
+                              // remove img_data + remove item in list
                               sdListDb.deleteRecord(item.id).then(
                                 () => {
                                   sdStore.draw = sdImages.filter(
diff --git a/app/store/sd.ts b/app/store/sd.ts
index ec0d5cfecfb..7218926df6c 100644
--- a/app/store/sd.ts
+++ b/app/store/sd.ts
@@ -92,12 +92,11 @@ export const useSdStore = createPersistStore<
               return;
             }
             if (resData.finish_reason === "SUCCESS") {
-              const imgId = nanoid();
               db.add({ id: data.id, data: resData.image });
               this.updateDraw({
                 ...data,
                 status: "success",
-                img_data: `indexeddb://${StoreKey.SdList}@${imgId}`,
+                img_data: `indexeddb://${StoreKey.SdList}@${data.id}`,
               });
             } else {
               this.updateDraw({

From 33450ce429ee7b06488709d61a1afd2dae6262c1 Mon Sep 17 00:00:00 2001
From: lloydzhou <lloydzhou@qq.com>
Date: Mon, 15 Jul 2024 20:09:21 +0800
Subject: [PATCH 17/43] move code to utils/file

---
 app/components/sd-panel.tsx |  5 ++-
 app/components/sd.tsx       | 87 +++++++++++--------------------------
 app/components/ui-lib.tsx   | 27 ++++++++++++
 app/constant.ts             |  1 +
 app/store/sd.ts             | 26 +----------
 app/utils/file.tsx          | 31 +++++++++++++
 6 files changed, 88 insertions(+), 89 deletions(-)
 create mode 100644 app/utils/file.tsx

diff --git a/app/components/sd-panel.tsx b/app/components/sd-panel.tsx
index 12a54c7320a..36842c7427e 100644
--- a/app/components/sd-panel.tsx
+++ b/app/components/sd-panel.tsx
@@ -6,9 +6,10 @@ import locales from "@/app/locales";
 import { nanoid } from "nanoid";
 import { useIndexedDB } from "react-indexed-db-hook";
 import { StoreKey } from "@/app/constant";
-import { SdDbInit, useSdStore } from "@/app/store/sd";
+import { useSdStore } from "@/app/store/sd";
+import { FileDbInit } from "@/app/utils/file";
 
-SdDbInit();
+FileDbInit();
 
 const sdCommonParams = (model: string, data: any) => {
   return [
diff --git a/app/components/sd.tsx b/app/components/sd.tsx
index ece3e18a01c..40e0c9abd07 100644
--- a/app/components/sd.tsx
+++ b/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,7 +20,6 @@ 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 { useSdStore } from "@/app/store/sd";
 import locales from "@/app/locales";
 import LoadingIcon from "../icons/three-dots.svg";
@@ -30,19 +29,10 @@ import {
   showConfirm,
   showImageModal,
   showModal,
+  IndexDBImage,
 } from "@/app/components/ui-lib";
 import { func } from "prop-types";
-
-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 { useFileDB } from "@/app/utils/file";
 
 function getSdTaskStatus(item: any) {
   let s: string;
@@ -94,45 +84,6 @@ function getSdTaskStatus(item: any) {
   );
 }
 
-function IndexDBImage({ img_data, title, isMobileScreen }) {
-  const [src, setSrc] = useState(img_data);
-  const sdListDb = useIndexedDB(StoreKey.SdList);
-  const img_id = useMemo(
-    () => img_data.replace("indexeddb://", "").split("@").pop(),
-    [img_data],
-  );
-  useEffect(() => {
-    sdListDb
-      .getByID(img_id)
-      .then(({ data }) => {
-        setSrc(data);
-      })
-      .catch((e) => {
-        setSrc(img_data);
-      });
-  }, [img_data, img_id]);
-
-  return (
-    <img
-      className={styles["img"]}
-      src={`data:image/png;base64,${src}`}
-      alt={title}
-      onClick={(e) => {
-        showImageModal(
-          getBase64ImgUrl(src, "image/png"),
-          true,
-          isMobileScreen
-            ? { width: "100%", height: "fit-content" }
-            : { maxWidth: "100%", maxHeight: "100%" },
-          isMobileScreen
-            ? { width: "100%", height: "fit-content" }
-            : { width: "100%", height: "100%" },
-        );
-      }}
-    />
-  );
-}
-
 export function Sd() {
   const isMobileScreen = useMobileScreen();
   const navigate = useNavigate();
@@ -140,7 +91,7 @@ export function Sd() {
   const showMaxIcon = !isMobileScreen && !clientConfig?.isApp;
   const config = useAppConfig();
   const scrollRef = useRef<HTMLDivElement>(null);
-  const sdListDb = useIndexedDB(StoreKey.SdList);
+  const fileDb = useFileDB();
   const sdStore = useSdStore();
   const [sdImages, setSdImages] = useState(sdStore.draw);
 
@@ -197,13 +148,25 @@ export function Sd() {
                   className={styles["sd-img-item"]}
                 >
                   {item.status === "success" ? (
-                    <>
-                      <IndexDBImage
-                        img_data={item.img_data}
-                        title={item.id}
-                        isMobileScreen={isMobileScreen}
-                      />
-                    </>
+                    <IndexDBImage
+                      className={styles["img"]}
+                      db={fileDb}
+                      src={item.img_data}
+                      alt={item.id}
+                      onClick={(data, e) => {
+                        showImageModal(
+                          data,
+                          true,
+                          isMobileScreen
+                            ? { width: "100%", height: "fit-content" }
+                            : { maxWidth: "100%", maxHeight: "100%" },
+                          isMobileScreen
+                            ? { width: "100%", height: "fit-content" }
+                            : { width: "100%", height: "100%" },
+                        );
+                      }}
+                      isMobileScreen={isMobileScreen}
+                    />
                   ) : item.status === "error" ? (
                     <div className={styles["pre-img"]}>
                       <ErrorIcon />
@@ -286,7 +249,7 @@ export function Sd() {
                               created_at: new Date().toLocaleString(),
                               img_data: "",
                             };
-                            sdStore.sendTask(reqData, sdListDb);
+                            sdStore.sendTask(reqData, fileDb);
                           }}
                         />
                         <ChatAction
@@ -295,7 +258,7 @@ export function Sd() {
                           onClick={async () => {
                             if (await showConfirm(Locale.Sd.Danger.Delete)) {
                               // remove img_data + remove item in list
-                              sdListDb.deleteRecord(item.id).then(
+                              fileDb.deleteRecord(item.id).then(
                                 () => {
                                   sdStore.draw = sdImages.filter(
                                     (i: any) => i.id !== item.id,
diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx
index 27555105afb..a859b969560 100644
--- a/app/components/ui-lib.tsx
+++ b/app/components/ui-lib.tsx
@@ -19,6 +19,7 @@ import React, {
   MouseEvent,
   useEffect,
   useState,
+  useMemo,
 } from "react";
 import { IconButton } from "./button";
 
@@ -510,3 +511,29 @@ 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)}
+    />
+  );
+}
diff --git a/app/constant.ts b/app/constant.ts
index 201843e901f..509b90ee0e5 100644
--- a/app/constant.ts
+++ b/app/constant.ts
@@ -55,6 +55,7 @@ export enum FileName {
 }
 
 export enum StoreKey {
+  File = "chat-next-web-file",
   Chat = "chat-next-web-store",
   Access = "access-control",
   Config = "app-config",
diff --git a/app/store/sd.ts b/app/store/sd.ts
index 7218926df6c..77b20d001f6 100644
--- a/app/store/sd.ts
+++ b/app/store/sd.ts
@@ -1,33 +1,9 @@
-import { initDB } from "react-indexed-db-hook";
 import { StabilityPath, StoreKey } from "@/app/constant";
 import { showToast } from "@/app/components/ui-lib";
 import { getHeaders } from "@/app/client/api";
 import { createPersistStore } from "@/app/utils/store";
 import { nanoid } from "nanoid";
 
-export const SdDbConfig = {
-  name: "@chatgpt-next-web/sd",
-  version: 1,
-  objectStoresMeta: [
-    {
-      store: StoreKey.SdList,
-      storeConfig: { keyPath: "id", autoIncrement: true },
-      storeSchema: [
-        { name: "data", keypath: "data", options: { unique: false } },
-        {
-          name: "created_at",
-          keypath: "created_at",
-          options: { unique: false },
-        },
-      ],
-    },
-  ],
-};
-
-export function SdDbInit() {
-  initDB(SdDbConfig);
-}
-
 export const useSdStore = createPersistStore<
   {
     currentId: number;
@@ -96,7 +72,7 @@ export const useSdStore = createPersistStore<
               this.updateDraw({
                 ...data,
                 status: "success",
-                img_data: `indexeddb://${StoreKey.SdList}@${data.id}`,
+                img_data: `indexeddb://${StoreKey.File}@${data.id}`,
               });
             } else {
               this.updateDraw({
diff --git a/app/utils/file.tsx b/app/utils/file.tsx
new file mode 100644
index 00000000000..0e77840e452
--- /dev/null
+++ b/app/utils/file.tsx
@@ -0,0 +1,31 @@
+"use client";
+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() {
+  initDB(FileDbConfig);
+}
+
+export function useFileDB() {
+  return useIndexedDB(StoreKey.File);
+}

From 5df09d5e2af74a099ca65fcfab9e9f0900a28905 Mon Sep 17 00:00:00 2001
From: lloydzhou <lloydzhou@qq.com>
Date: Mon, 15 Jul 2024 20:26:03 +0800
Subject: [PATCH 18/43] move code to utils/file

---
 app/components/sd.tsx     |  3 +--
 app/components/ui-lib.tsx | 26 --------------------------
 app/store/sd.ts           |  4 ++--
 app/utils/file.tsx        | 39 +++++++++++++++++++++++++++++++++++++--
 4 files changed, 40 insertions(+), 32 deletions(-)

diff --git a/app/components/sd.tsx b/app/components/sd.tsx
index 40e0c9abd07..5d520bd1ada 100644
--- a/app/components/sd.tsx
+++ b/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;
diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx
index a859b969560..ca13a621570 100644
--- a/app/components/ui-lib.tsx
+++ b/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)}
-    />
-  );
-}
diff --git a/app/store/sd.ts b/app/store/sd.ts
index 77b20d001f6..70d44cac313 100644
--- a/app/store/sd.ts
+++ b/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({
diff --git a/app/utils/file.tsx b/app/utils/file.tsx
index 0e77840e452..63039359f9c 100644
--- a/app/utils/file.tsx
+++ b/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)}
+    />
+  );
+}

From 6ece818d6915cf76f549be30f222ff22d3b9254f Mon Sep 17 00:00:00 2001
From: lloydzhou <lloydzhou@qq.com>
Date: Mon, 15 Jul 2024 20:28:55 +0800
Subject: [PATCH 19/43] remove no need code

---
 app/components/ui-lib.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx
index ca13a621570..27555105afb 100644
--- a/app/components/ui-lib.tsx
+++ b/app/components/ui-lib.tsx
@@ -19,7 +19,6 @@ import React, {
   MouseEvent,
   useEffect,
   useState,
-  useMemo,
 } from "react";
 import { IconButton } from "./button";
 

From a1117cd4ee0ae28ce9a965447dd0ec8d0c9ee5c0 Mon Sep 17 00:00:00 2001
From: lloydzhou <lloydzhou@qq.com>
Date: Mon, 15 Jul 2024 20:47:49 +0800
Subject: [PATCH 20/43] save blob to indexeddb instead of base64 image string

---
 app/store/sd.ts    |  9 +++++++--
 app/utils/file.tsx | 13 +++++++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/app/store/sd.ts b/app/store/sd.ts
index 70d44cac313..842763f9f46 100644
--- a/app/store/sd.ts
+++ b/app/store/sd.ts
@@ -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 } from "@/app/utils/file";
+import { saveFileData, base64Image2Blob } from "@/app/utils/file";
 
 export const useSdStore = createPersistStore<
   {
@@ -72,7 +72,12 @@ export const useSdStore = createPersistStore<
               this.updateDraw({
                 ...data,
                 status: "success",
-                img_data: saveFileData(db, data.id, resData.image),
+                // save blob to indexeddb instead of base64 image string
+                img_data: saveFileData(
+                  db,
+                  data.id,
+                  base64Image2Blob(resData.image, "image/png"),
+                ),
               });
             } else {
               this.updateDraw({
diff --git a/app/utils/file.tsx b/app/utils/file.tsx
index 63039359f9c..52a258edf83 100644
--- a/app/utils/file.tsx
+++ b/app/utils/file.tsx
@@ -32,6 +32,16 @@ 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, fileId, data) {
   // save file content and return url start with `indexeddb://`
   db.add({ id: fileId, data });
@@ -40,6 +50,9 @@ export function saveFileData(db, fileId, data) {
 
 export async function getFileData(db, fileId, contentType = "image/png") {
   const { data } = await db.getByID(fileId);
+  if (typeof data == "object") {
+    return URL.createObjectURL(data);
+  }
   return `data:${contentType};base64,${data}`;
 }
 

From b3a324b6f5fe84ab5f0e1774e288d834d23e7500 Mon Sep 17 00:00:00 2001
From: lloydzhou <lloydzhou@qq.com>
Date: Mon, 15 Jul 2024 21:21:50 +0800
Subject: [PATCH 21/43] fixed typescript error

---
 app/components/sd.tsx |  3 +--
 app/page.tsx          |  1 -
 app/utils/file.tsx    | 24 ++++++++++++++++++++----
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/app/components/sd.tsx b/app/components/sd.tsx
index 5d520bd1ada..dfbe640d611 100644
--- a/app/components/sd.tsx
+++ b/app/components/sd.tsx
@@ -152,7 +152,7 @@ export function Sd() {
                       db={fileDb}
                       src={item.img_data}
                       alt={item.id}
-                      onClick={(data, e) => {
+                      onClick={(data: any, e: any) => {
                         showImageModal(
                           data,
                           true,
@@ -164,7 +164,6 @@ export function Sd() {
                             : { width: "100%", height: "100%" },
                         );
                       }}
-                      isMobileScreen={isMobileScreen}
                     />
                   ) : item.status === "error" ? (
                     <div className={styles["pre-img"]}>
diff --git a/app/page.tsx b/app/page.tsx
index 6d24b015438..b3f169a9b74 100644
--- a/app/page.tsx
+++ b/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();
 
diff --git a/app/utils/file.tsx b/app/utils/file.tsx
index 52a258edf83..b9b697f5680 100644
--- a/app/utils/file.tsx
+++ b/app/utils/file.tsx
@@ -42,13 +42,17 @@ export function base64Image2Blob(base64Data: string, contentType: string) {
   return new Blob([byteArray], { type: contentType });
 }
 
-export function saveFileData(db, fileId, data) {
+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, fileId, contentType = "image/png") {
+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);
@@ -56,14 +60,26 @@ export async function getFileData(db, fileId, contentType = "image/png") {
   return `data:${contentType};base64,${data}`;
 }
 
-export function IndexDBImage({ src, alt, onClick, db, className }) {
+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)
+    getFileData(db, imgId as string)
       .then((data) => setData(data))
       .catch((e) => setData(src));
   }, [src, imgId]);

From bab3e0bc9bf72f41f905add1b9140960d345d3db Mon Sep 17 00:00:00 2001
From: lloydzhou <lloydzhou@qq.com>
Date: Tue, 16 Jul 2024 01:19:40 +0800
Subject: [PATCH 22/43] using CacheStorage to store image #5013

---
 app/components/home.tsx     |  1 -
 app/components/sd-panel.tsx |  7 +--
 app/components/sd.tsx       | 19 ++++----
 app/constant.ts             |  2 +
 app/store/sd.ts             | 51 ++++++++++++--------
 app/utils/chat.ts           | 38 +++++++++++++++
 app/utils/file.tsx          | 95 -------------------------------------
 package.json                |  1 -
 public/serviceWorker.js     | 37 ++++++++++++++-
 yarn.lock                   |  5 --
 10 files changed, 115 insertions(+), 141 deletions(-)
 delete mode 100644 app/utils/file.tsx

diff --git a/app/components/home.tsx b/app/components/home.tsx
index 875f37e5445..aacd2326480 100644
--- a/app/components/home.tsx
+++ b/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 (
diff --git a/app/components/sd-panel.tsx b/app/components/sd-panel.tsx
index 36842c7427e..c6b28f22157 100644
--- a/app/components/sd-panel.tsx
+++ b/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));
     });
   };
diff --git a/app/components/sd.tsx b/app/components/sd.tsx
index dfbe640d611..e06ee168324 100644
--- a/app/components/sd.tsx
+++ b/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,
diff --git a/app/constant.ts b/app/constant.ts
index 509b90ee0e5..d50db15f911 100644
--- a/app/constant.ts
+++ b/app/constant.ts
@@ -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",
diff --git a/app/store/sd.ts b/app/store/sd.ts
index 842763f9f46..d40c53a8525 100644
--- a/app/store/sd.ts
+++ b/app/store/sd.ts
@@ -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;
           }
         });
diff --git a/app/utils/chat.ts b/app/utils/chat.ts
index 991d06b7320..55127f50e75 100644
--- a/app/utils/chat.ts
+++ b/app/utils/chat.ts
@@ -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",
+  });
+}
diff --git a/app/utils/file.tsx b/app/utils/file.tsx
deleted file mode 100644
index b9b697f5680..00000000000
--- a/app/utils/file.tsx
+++ /dev/null
@@ -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)}
-    />
-  );
-}
diff --git a/package.json b/package.json
index 15ae9b69987..ed5edb04330 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,6 @@
     "node-fetch": "^3.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-indexed-db-hook": "^1.0.14",
     "react-markdown": "^8.0.7",
     "react-router-dom": "^6.15.0",
     "rehype-highlight": "^6.0.0",
diff --git a/public/serviceWorker.js b/public/serviceWorker.js
index f5a24b70176..b9b80c319ef 100644
--- a/public/serviceWorker.js
+++ b/public/serviceWorker.js
@@ -1,4 +1,6 @@
 const CHATGPT_NEXT_WEB_CACHE = "chatgpt-next-web-cache";
+const CHATGPT_NEXT_WEB_FILE_CACHE = "chatgpt-next-web-file";
+let a="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let nanoid=(e=21)=>{let t="",r=crypto.getRandomValues(new Uint8Array(e));for(let n=0;n<e;n++)t+=a[63&r[n]];return t};
 
 self.addEventListener("activate", function (event) {
   console.log("ServiceWorker activated.");
@@ -12,4 +14,37 @@ self.addEventListener("install", function (event) {
   );
 });
 
-self.addEventListener("fetch", (e) => {});
+async function upload(request, url) {
+  const formData = await request.formData()
+  const file = formData.getAll('file')[0]
+  let ext = file.name.split('.').pop()
+  if (ext === 'blob') {
+    ext = file.type.split('/').pop()
+  }
+  const fileUrl = `${url.origin}/api/cache/${nanoid()}.${ext}`
+  // console.debug('file', file, fileUrl)
+  const cache = await caches.open(CHATGPT_NEXT_WEB_FILE_CACHE)
+  await cache.put(new Request(fileUrl), new Response(file))
+  return Response.json({ code: 0, data: fileUrl })
+}
+
+async function remove(request, url) {
+  const cache = await caches.open(CHATGPT_NEXT_WEB_FILE_CACHE)
+  const res = await cache.delete(request.url)
+  return Response.json({ code: 0 })
+}
+
+self.addEventListener("fetch", (e) => {
+  const url = new URL(e.request.url);
+  if (/^\/api\/cache/.test(url.pathname)) {
+    if ('GET' == e.request.method) {
+      e.respondWith(caches.match(e.request))
+    }
+    if ('POST' == e.request.method) {
+      e.respondWith(upload(e.request, url))
+    }
+    if ('DELETE' == e.request.method) {
+      e.respondWith(remove(e.request, url))
+    }
+  }
+});
diff --git a/yarn.lock b/yarn.lock
index af46f1feac1..c323a5c38db 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5278,11 +5278,6 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
-react-indexed-db-hook@^1.0.14:
-  version "1.0.14"
-  resolved "https://registry.npmmirror.com/react-indexed-db-hook/-/react-indexed-db-hook-1.0.14.tgz#a29cd732d592735b6a68dfc94316b7a4a091e6be"
-  integrity sha512-tQ6rWofgXUCBhZp9pRpWzthzPbjqcll5uXMo07lbQTKl47VyL9nw9wfVswRxxzS5yj5Sq/VHUkNUjamWbA/M/w==
-
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"

From 94bc880b7f2a4a96b425b13d092e37c56510f071 Mon Sep 17 00:00:00 2001
From: lloydzhou <lloydzhou@qq.com>
Date: Tue, 16 Jul 2024 01:45:15 +0800
Subject: [PATCH 23/43] fixed typescript error

---
 app/components/sd.tsx | 17 ++++++-----------
 app/utils/chat.ts     |  2 +-
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/app/components/sd.tsx b/app/components/sd.tsx
index e06ee168324..19684c24088 100644
--- a/app/components/sd.tsx
+++ b/app/components/sd.tsx
@@ -253,17 +253,12 @@ export function Sd() {
                           onClick={async () => {
                             if (await showConfirm(Locale.Sd.Danger.Delete)) {
                               // remove img_data + remove item in list
-                              removeImage(item.img_data).finally(
-                                () => {
-                                  sdStore.draw = sdImages.filter(
-                                    (i: any) => i.id !== item.id,
-                                  );
-                                  sdStore.getNextId();
-                                },
-                                (error) => {
-                                  console.error(error);
-                                },
-                              );
+                              removeImage(item.img_data).finally(() => {
+                                sdStore.draw = sdImages.filter(
+                                  (i: any) => i.id !== item.id,
+                                );
+                                sdStore.getNextId();
+                              });
                             }
                           }}
                         />
diff --git a/app/utils/chat.ts b/app/utils/chat.ts
index 55127f50e75..be9908906ce 100644
--- a/app/utils/chat.ts
+++ b/app/utils/chat.ts
@@ -64,7 +64,7 @@ export function base64Image2Blob(base64Data: string, contentType: string) {
   return new Blob([byteArray], { type: contentType });
 }
 
-export function uploadImage(file: File): Promise<string> {
+export function uploadImage(file: Blob): Promise<string> {
   const body = new FormData();
   body.append("file", file);
   return fetch(UPLOAD_URL, {

From 5267ad46daa41a546f94fe5303a85424e29fb1d5 Mon Sep 17 00:00:00 2001
From: lloydzhou <lloydzhou@qq.com>
Date: Tue, 16 Jul 2024 11:51:43 +0800
Subject: [PATCH 24/43] add header for service worker upload api

---
 public/serviceWorker.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/public/serviceWorker.js b/public/serviceWorker.js
index b9b80c319ef..154f2247e9b 100644
--- a/public/serviceWorker.js
+++ b/public/serviceWorker.js
@@ -22,9 +22,16 @@ async function upload(request, url) {
     ext = file.type.split('/').pop()
   }
   const fileUrl = `${url.origin}/api/cache/${nanoid()}.${ext}`
-  // console.debug('file', file, fileUrl)
+  // console.debug('file', file, fileUrl, request)
   const cache = await caches.open(CHATGPT_NEXT_WEB_FILE_CACHE)
-  await cache.put(new Request(fileUrl), new Response(file))
+  await cache.put(new Request(fileUrl), new Response(file, {
+    headers: {
+      'content-type': file.type,
+      'content-length': file.size,
+      'cache-control': 'no-cache', // file already store in disk
+      'server': 'ServiceWorker',
+    }
+  }))
   return Response.json({ code: 0, data: fileUrl })
 }
 

From eb7c7cdcb6e6c85d6528c68fe51337130ae4cb98 Mon Sep 17 00:00:00 2001
From: lloydzhou <lloydzhou@qq.com>
Date: Tue, 16 Jul 2024 16:37:55 +0800
Subject: [PATCH 25/43] =?UTF-8?q?=E6=9B=B4=E6=96=B0serviceworker=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/serviceWorker.js         | 1 +
 public/serviceWorkerRegister.js | 9 ++++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/public/serviceWorker.js b/public/serviceWorker.js
index 154f2247e9b..b8443e87891 100644
--- a/public/serviceWorker.js
+++ b/public/serviceWorker.js
@@ -7,6 +7,7 @@ self.addEventListener("activate", function (event) {
 });
 
 self.addEventListener("install", function (event) {
+  self.skipWaiting();  // 立即启用新的版本
   event.waitUntil(
     caches.open(CHATGPT_NEXT_WEB_CACHE).then(function (cache) {
       return cache.addAll([]);
diff --git a/public/serviceWorkerRegister.js b/public/serviceWorkerRegister.js
index 8405f21aaab..735ab9a131e 100644
--- a/public/serviceWorkerRegister.js
+++ b/public/serviceWorkerRegister.js
@@ -2,8 +2,15 @@ if ('serviceWorker' in navigator) {
   window.addEventListener('load', function () {
     navigator.serviceWorker.register('/serviceWorker.js').then(function (registration) {
       console.log('ServiceWorker registration successful with scope: ', registration.scope);
+      registration.update().then(res => {
+        console.log('ServiceWorker registration update: ', res);
+      });
     }, function (err) {
       console.error('ServiceWorker registration failed: ', err);
     });
+    navigator.serviceWorker.addEventListener('controllerchange', function() {
+      console.log('ServiceWorker controllerchange ');
+      window.location.reload(true);
+    });
   });
-}
\ No newline at end of file
+}

From 49151dabf57104045c77a52147490506ad7300b2 Mon Sep 17 00:00:00 2001
From: lloydzhou <lloydzhou@qq.com>
Date: Tue, 16 Jul 2024 23:18:34 +0800
Subject: [PATCH 26/43] hotfix

---
 app/store/sd.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/store/sd.ts b/app/store/sd.ts
index d40c53a8525..bf3e6450cdc 100644
--- a/app/store/sd.ts
+++ b/app/store/sd.ts
@@ -67,8 +67,8 @@ export const useSdStore = createPersistStore<
               this.getNextId();
               return;
             }
+            const self = this;
             if (resData.finish_reason === "SUCCESS") {
-              const self = this;
               uploadImage(base64Image2Blob(resData.image, "image/png"))
                 .then((img_data) => {
                   console.debug("uploadImage success", img_data, self);

From e468fecf12efda9cb116cae495f75c28d83d9b16 Mon Sep 17 00:00:00 2001
From: lloydzhou <lloydzhou@qq.com>
Date: Sat, 20 Jul 2024 20:43:42 +0800
Subject: [PATCH 27/43] update

---
 app/store/sd.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/store/sd.ts b/app/store/sd.ts
index bf3e6450cdc..0d8693f4e56 100644
--- a/app/store/sd.ts
+++ b/app/store/sd.ts
@@ -83,7 +83,7 @@ export const useSdStore = createPersistStore<
                   self.updateDraw({
                     ...data,
                     status: "error",
-                    error: JSON.stringify(resData),
+                    error: JSON.stringify(e),
                   });
                 });
             } else {

From 2fd68bcac3f8aa9e8227b9f93acb4518e7e1165a Mon Sep 17 00:00:00 2001
From: "Mr. Z" <112755085+ZTH7@users.noreply.github.com>
Date: Sun, 21 Jul 2024 16:42:34 +0800
Subject: [PATCH 28/43] Fix defaultModel undefined error

---
 app/utils/model.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/utils/model.ts b/app/utils/model.ts
index 55a5ee0d67d..dc4b1f55cc7 100644
--- a/app/utils/model.ts
+++ b/app/utils/model.ts
@@ -98,10 +98,9 @@ export function collectModelTableWithDefaultModel(
   defaultModel: string,
 ) {
   let modelTable = collectModelTable(models, customModels);
-  if (defaultModel && defaultModel !== "") {
+  if (defaultModel && defaultModel !== "" && defaultModel in modelTable) {
     modelTable[defaultModel] = {
       ...modelTable[defaultModel],
-      name: defaultModel,
       available: true,
       isDefault: true,
     };

From aa4e8550127f66c5c77c557045fbc81f8aedb1cb Mon Sep 17 00:00:00 2001
From: "Mr. Z" <112755085+ZTH7@users.noreply.github.com>
Date: Mon, 22 Jul 2024 16:41:11 +0800
Subject: [PATCH 29/43] Compatibility changes

---
 app/utils/model.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/utils/model.ts b/app/utils/model.ts
index dc4b1f55cc7..a0b0d6b65fa 100644
--- a/app/utils/model.ts
+++ b/app/utils/model.ts
@@ -98,9 +98,11 @@ export function collectModelTableWithDefaultModel(
   defaultModel: string,
 ) {
   let modelTable = collectModelTable(models, customModels);
-  if (defaultModel && defaultModel !== "" && defaultModel in modelTable) {
+  if (defaultModel && defaultModel !== "") {
     modelTable[defaultModel] = {
       ...modelTable[defaultModel],
+      name: modelTable[defaultModel]?.name ?? defaultModel,
+      displayName: modelTable[defaultModel]?.displayName ?? defaultModel,
       available: true,
       isDefault: true,
     };

From 9d55adbaf22e91a335f489d98a3d8f86f99f5778 Mon Sep 17 00:00:00 2001
From: Dogtiti <499960698@qq.com>
Date: Tue, 23 Jul 2024 00:51:58 +0800
Subject: [PATCH 30/43] refator: sd

---
 .gitignore                                   |   2 +
 app/components/home.tsx                      |  69 +++--
 app/components/sd.tsx                        | 278 ------------------
 app/components/sd/index.tsx                  |   2 +
 app/components/{ => sd}/sd-panel.module.scss |  22 +-
 app/components/{ => sd}/sd-panel.tsx         |  58 ++--
 app/components/sd/sd-sidebar.tsx             |  65 +++++
 app/components/{ => sd}/sd.module.scss       |   0
 app/components/sd/sd.tsx                     | 292 +++++++++++++++++++
 app/components/sidebar.tsx                   | 217 +++++++-------
 app/icons/sd.svg                             |  12 +
 app/styles/globals.scss                      |   3 +-
 12 files changed, 579 insertions(+), 441 deletions(-)
 delete mode 100644 app/components/sd.tsx
 create mode 100644 app/components/sd/index.tsx
 rename app/components/{ => sd}/sd-panel.module.scss (58%)
 rename app/components/{ => sd}/sd-panel.tsx (82%)
 create mode 100644 app/components/sd/sd-sidebar.tsx
 rename app/components/{ => sd}/sd.module.scss (100%)
 create mode 100644 app/components/sd/sd.tsx
 create mode 100644 app/icons/sd.svg

diff --git a/.gitignore b/.gitignore
index a24c6e047d5..2ff556f646e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -44,3 +44,5 @@ dev
 
 *.key
 *.key.pub
+
+masks.json
diff --git a/app/components/home.tsx b/app/components/home.tsx
index aacd2326480..57611271573 100644
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -59,7 +59,7 @@ const Sd = dynamic(async () => (await import("./sd")).Sd, {
   loading: () => <Loading noLogo />,
 });
 
-const SdPanel = dynamic(async () => (await import("./sd-panel")).SdPanel, {
+const SdPanel = dynamic(async () => (await import("./sd")).SdPanel, {
   loading: () => <Loading noLogo />,
 });
 
@@ -130,12 +130,22 @@ const loadAsyncGoogleFont = () => {
   document.head.appendChild(linkEl);
 };
 
+export function WindowContent(props: { children: React.ReactNode }) {
+  return (
+    <div className={styles["window-content"]} id={SlotID.AppBody}>
+      {props?.children}
+    </div>
+  );
+}
+
 function Screen() {
   const config = useAppConfig();
   const location = useLocation();
-  const isHome =
-    location.pathname === Path.Home || location.pathname === Path.SdPanel;
+  const isHome = location.pathname === Path.Home;
   const isAuth = location.pathname === Path.Auth;
+  const isSd = location.pathname === Path.Sd;
+  const isSdPanel = location.pathname === Path.SdPanel;
+
   const isMobileScreen = useMobileScreen();
   const shouldTightBorder =
     getClientConfig()?.isApp || (config.tightBorder && !isMobileScreen);
@@ -143,35 +153,36 @@ function Screen() {
   useEffect(() => {
     loadAsyncGoogleFont();
   }, []);
+
+  const renderContent = () => {
+    if (isAuth) return <AuthPage />;
+    if (isSd) return <Sd />;
+    if (isSdPanel) return <SdPanel />;
+    return (
+      <>
+        <SideBar className={isHome ? styles["sidebar-show"] : ""} />
+        <WindowContent>
+          <Routes>
+            <Route path={Path.Home} element={<Chat />} />
+            <Route path={Path.NewChat} element={<NewChat />} />
+            <Route path={Path.Masks} element={<MaskPage />} />
+            <Route path={Path.Chat} element={<Chat />} />
+            <Route path={Path.Sd} element={<Sd />} />
+            <Route path={Path.SdPanel} element={<Sd />} />
+            <Route path={Path.Settings} element={<Settings />} />
+          </Routes>
+        </WindowContent>
+      </>
+    );
+  };
+
   return (
     <div
-      className={
-        styles.container +
-        ` ${shouldTightBorder ? styles["tight-container"] : styles.container} ${
-          getLang() === "ar" ? styles["rtl-screen"] : ""
-        }`
-      }
+      className={`${styles.container} ${
+        shouldTightBorder ? styles["tight-container"] : styles.container
+      } ${getLang() === "ar" ? styles["rtl-screen"] : ""}`}
     >
-      {isAuth ? (
-        <>
-          <AuthPage />
-        </>
-      ) : (
-        <>
-          <SideBar className={isHome ? styles["sidebar-show"] : ""} />
-          <div className={styles["window-content"]} id={SlotID.AppBody}>
-            <Routes>
-              <Route path={Path.Home} element={<Chat />} />
-              <Route path={Path.NewChat} element={<NewChat />} />
-              <Route path={Path.Masks} element={<MaskPage />} />
-              <Route path={Path.Chat} element={<Chat />} />
-              <Route path={Path.Sd} element={<Sd />} />
-              <Route path={Path.SdPanel} element={<Sd />} />
-              <Route path={Path.Settings} element={<Settings />} />
-            </Routes>
-          </div>
-        </>
-      )}
+      {renderContent()}
     </div>
   );
 }
diff --git a/app/components/sd.tsx b/app/components/sd.tsx
deleted file mode 100644
index 19684c24088..00000000000
--- a/app/components/sd.tsx
+++ /dev/null
@@ -1,278 +0,0 @@
-import chatStyles from "@/app/components/chat.module.scss";
-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 } from "@/app/constant";
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import {
-  copyToClipboard,
-  getMessageTextContent,
-  useMobileScreen,
-} from "@/app/utils";
-import { useNavigate } from "react-router-dom";
-import { useAppConfig } from "@/app/store";
-import MinIcon from "@/app/icons/min.svg";
-import MaxIcon from "@/app/icons/max.svg";
-import { getClientConfig } from "@/app/config/client";
-import { ChatAction } from "@/app/components/chat";
-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 { useSdStore } from "@/app/store/sd";
-import locales from "@/app/locales";
-import LoadingIcon from "../icons/three-dots.svg";
-import ErrorIcon from "../icons/delete.svg";
-import { Property } from "csstype";
-import {
-  showConfirm,
-  showImageModal,
-  showModal,
-} from "@/app/components/ui-lib";
-import { removeImage } from "@/app/utils/chat";
-
-function getSdTaskStatus(item: any) {
-  let s: string;
-  let color: Property.Color | undefined = undefined;
-  switch (item.status) {
-    case "success":
-      s = Locale.Sd.Status.Success;
-      color = "green";
-      break;
-    case "error":
-      s = Locale.Sd.Status.Error;
-      color = "red";
-      break;
-    case "wait":
-      s = Locale.Sd.Status.Wait;
-      color = "yellow";
-      break;
-    case "running":
-      s = Locale.Sd.Status.Running;
-      color = "blue";
-      break;
-    default:
-      s = item.status.toUpperCase();
-  }
-  return (
-    <p className={styles["line-1"]} title={item.error} style={{ color: color }}>
-      <span>
-        {locales.Sd.Status.Name}: {s}
-      </span>
-      {item.status === "error" && (
-        <span
-          className="clickable"
-          onClick={() => {
-            showModal({
-              title: locales.Sd.Detail,
-              children: (
-                <div style={{ color: color, userSelect: "text" }}>
-                  {item.error}
-                </div>
-              ),
-            });
-          }}
-        >
-          {" "}
-          - {item.error}
-        </span>
-      )}
-    </p>
-  );
-}
-
-export function Sd() {
-  const isMobileScreen = useMobileScreen();
-  const navigate = useNavigate();
-  const clientConfig = useMemo(() => getClientConfig(), []);
-  const showMaxIcon = !isMobileScreen && !clientConfig?.isApp;
-  const config = useAppConfig();
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const sdStore = useSdStore();
-  const [sdImages, setSdImages] = useState(sdStore.draw);
-
-  useEffect(() => {
-    setSdImages(sdStore.draw);
-  }, [sdStore.currentId]);
-
-  return (
-    <div className={chatStyles.chat} key={"1"}>
-      <div className="window-header" data-tauri-drag-region>
-        {isMobileScreen && (
-          <div className="window-actions">
-            <div className={"window-action-button"}>
-              <IconButton
-                icon={<ReturnIcon />}
-                bordered
-                title={Locale.Chat.Actions.ChatList}
-                onClick={() => navigate(Path.SdPanel)}
-              />
-            </div>
-          </div>
-        )}
-        <div className={`window-header-title ${chatStyles["chat-body-title"]}`}>
-          <div className={`window-header-main-title`}>Stability AI</div>
-          <div className="window-header-sub-title">
-            {Locale.Sd.SubTitle(sdImages.length || 0)}
-          </div>
-        </div>
-
-        <div className="window-actions">
-          {showMaxIcon && (
-            <div className="window-action-button">
-              <IconButton
-                icon={config.tightBorder ? <MinIcon /> : <MaxIcon />}
-                bordered
-                onClick={() => {
-                  config.update(
-                    (config) => (config.tightBorder = !config.tightBorder),
-                  );
-                }}
-              />
-            </div>
-          )}
-        </div>
-      </div>
-      <div className={chatStyles["chat-body"]} ref={scrollRef}>
-        <div className={styles["sd-img-list"]}>
-          {sdImages.length > 0 ? (
-            sdImages.map((item: any) => {
-              return (
-                <div
-                  key={item.id}
-                  style={{ display: "flex" }}
-                  className={styles["sd-img-item"]}
-                >
-                  {item.status === "success" ? (
-                    <img
-                      className={styles["img"]}
-                      src={item.img_data}
-                      alt={item.id}
-                      onClick={(e) =>
-                        showImageModal(
-                          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"]}>
-                      <ErrorIcon />
-                    </div>
-                  ) : (
-                    <div className={styles["pre-img"]}>
-                      <LoadingIcon />
-                    </div>
-                  )}
-                  <div
-                    style={{ marginLeft: "10px" }}
-                    className={styles["sd-img-item-info"]}
-                  >
-                    <p className={styles["line-1"]}>
-                      {locales.SdPanel.Prompt}:{" "}
-                      <span
-                        className="clickable"
-                        title={item.params.prompt}
-                        onClick={() => {
-                          showModal({
-                            title: locales.Sd.Detail,
-                            children: (
-                              <div style={{ userSelect: "text" }}>
-                                {item.params.prompt}
-                              </div>
-                            ),
-                          });
-                        }}
-                      >
-                        {item.params.prompt}
-                      </span>
-                    </p>
-                    <p>
-                      {locales.SdPanel.AIModel}: {item.model_name}
-                    </p>
-                    {getSdTaskStatus(item)}
-                    <p>{item.created_at}</p>
-                    <div className={chatStyles["chat-message-actions"]}>
-                      <div className={chatStyles["chat-input-actions"]}>
-                        <ChatAction
-                          text={Locale.Sd.Actions.Params}
-                          icon={<PromptIcon />}
-                          onClick={() => {
-                            showModal({
-                              title: locales.Sd.GenerateParams,
-                              children: (
-                                <div style={{ userSelect: "text" }}>
-                                  {Object.keys(item.params).map((key) => (
-                                    <div key={key} style={{ margin: "10px" }}>
-                                      <strong>{key}: </strong>
-                                      {item.params[key]}
-                                    </div>
-                                  ))}
-                                </div>
-                              ),
-                            });
-                          }}
-                        />
-                        <ChatAction
-                          text={Locale.Sd.Actions.Copy}
-                          icon={<CopyIcon />}
-                          onClick={() =>
-                            copyToClipboard(
-                              getMessageTextContent({
-                                role: "user",
-                                content: item.params.prompt,
-                              }),
-                            )
-                          }
-                        />
-                        <ChatAction
-                          text={Locale.Sd.Actions.Retry}
-                          icon={<ResetIcon />}
-                          onClick={() => {
-                            const reqData = {
-                              model: item.model,
-                              model_name: item.model_name,
-                              status: "wait",
-                              params: { ...item.params },
-                              created_at: new Date().toLocaleString(),
-                              img_data: "",
-                            };
-                            sdStore.sendTask(reqData);
-                          }}
-                        />
-                        <ChatAction
-                          text={Locale.Sd.Actions.Delete}
-                          icon={<DeleteIcon />}
-                          onClick={async () => {
-                            if (await showConfirm(Locale.Sd.Danger.Delete)) {
-                              // remove img_data + remove item in list
-                              removeImage(item.img_data).finally(() => {
-                                sdStore.draw = sdImages.filter(
-                                  (i: any) => i.id !== item.id,
-                                );
-                                sdStore.getNextId();
-                              });
-                            }
-                          }}
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              );
-            })
-          ) : (
-            <div>{locales.Sd.EmptyRecord}</div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/app/components/sd/index.tsx b/app/components/sd/index.tsx
new file mode 100644
index 00000000000..d442c22bcda
--- /dev/null
+++ b/app/components/sd/index.tsx
@@ -0,0 +1,2 @@
+export * from "./sd";
+export * from "./sd-panel";
diff --git a/app/components/sd-panel.module.scss b/app/components/sd/sd-panel.module.scss
similarity index 58%
rename from app/components/sd-panel.module.scss
rename to app/components/sd/sd-panel.module.scss
index 1b31faeaca5..c71ba557ab5 100644
--- a/app/components/sd-panel.module.scss
+++ b/app/components/sd/sd-panel.module.scss
@@ -10,7 +10,7 @@
     display: flex;
     align-items: center;
 
-    .ctrl-param-item-title{
+    .ctrl-param-item-title {
       font-size: 14px;
       font-weight: bolder;
       margin-bottom: 5px;
@@ -22,12 +22,24 @@
     font-weight: normal;
     margin-top: 3px;
   }
+  textarea {
+    appearance: none;
+    border-radius: 10px;
+    border: var(--border-in-light);
+    min-height: 36px;
+    box-sizing: border-box;
+    background: var(--white);
+    color: var(--black);
+    padding: 0 10px;
+    max-width: 50%;
+    font-family: inherit;
+  }
 }
 
-.ai-models{
-  button{
+.ai-models {
+  button {
     margin-bottom: 10px;
-    padding:10px;
+    padding: 10px;
     width: 100%;
   }
-}
\ No newline at end of file
+}
diff --git a/app/components/sd-panel.tsx b/app/components/sd/sd-panel.tsx
similarity index 82%
rename from app/components/sd-panel.tsx
rename to app/components/sd/sd-panel.tsx
index c6b28f22157..592aa0dad5d 100644
--- a/app/components/sd-panel.tsx
+++ b/app/components/sd/sd-panel.tsx
@@ -2,7 +2,7 @@ import styles from "./sd-panel.module.scss";
 import React, { useState } from "react";
 import { Select, showToast } from "@/app/components/ui-lib";
 import { IconButton } from "@/app/components/button";
-import locales from "@/app/locales";
+import Locale from "@/app/locales";
 import { nanoid } from "nanoid";
 import { StoreKey } from "@/app/constant";
 import { useSdStore } from "@/app/store/sd";
@@ -10,14 +10,14 @@ import { useSdStore } from "@/app/store/sd";
 const sdCommonParams = (model: string, data: any) => {
   return [
     {
-      name: locales.SdPanel.Prompt,
+      name: Locale.SdPanel.Prompt,
       value: "prompt",
       type: "textarea",
-      placeholder: locales.SdPanel.PleaseInput(locales.SdPanel.Prompt),
+      placeholder: Locale.SdPanel.PleaseInput(Locale.SdPanel.Prompt),
       required: true,
     },
     {
-      name: locales.SdPanel.ModelVersion,
+      name: Locale.SdPanel.ModelVersion,
       value: "model",
       type: "select",
       default: "sd3-medium",
@@ -29,13 +29,13 @@ const sdCommonParams = (model: string, data: any) => {
       ],
     },
     {
-      name: locales.SdPanel.NegativePrompt,
+      name: Locale.SdPanel.NegativePrompt,
       value: "negative_prompt",
       type: "textarea",
-      placeholder: locales.SdPanel.PleaseInput(locales.SdPanel.NegativePrompt),
+      placeholder: Locale.SdPanel.PleaseInput(Locale.SdPanel.NegativePrompt),
     },
     {
-      name: locales.SdPanel.AspectRatio,
+      name: Locale.SdPanel.AspectRatio,
       value: "aspect_ratio",
       type: "select",
       default: "1:1",
@@ -52,32 +52,32 @@ const sdCommonParams = (model: string, data: any) => {
       ],
     },
     {
-      name: locales.SdPanel.ImageStyle,
+      name: Locale.SdPanel.ImageStyle,
       value: "style",
       type: "select",
       default: "3d",
       support: ["core"],
       options: [
-        { name: locales.SdPanel.Styles.D3Model, value: "3d-model" },
-        { name: locales.SdPanel.Styles.AnalogFilm, value: "analog-film" },
-        { name: locales.SdPanel.Styles.Anime, value: "anime" },
-        { name: locales.SdPanel.Styles.Cinematic, value: "cinematic" },
-        { name: locales.SdPanel.Styles.ComicBook, value: "comic-book" },
-        { name: locales.SdPanel.Styles.DigitalArt, value: "digital-art" },
-        { name: locales.SdPanel.Styles.Enhance, value: "enhance" },
-        { name: locales.SdPanel.Styles.FantasyArt, value: "fantasy-art" },
-        { name: locales.SdPanel.Styles.Isometric, value: "isometric" },
-        { name: locales.SdPanel.Styles.LineArt, value: "line-art" },
-        { name: locales.SdPanel.Styles.LowPoly, value: "low-poly" },
+        { name: Locale.SdPanel.Styles.D3Model, value: "3d-model" },
+        { name: Locale.SdPanel.Styles.AnalogFilm, value: "analog-film" },
+        { name: Locale.SdPanel.Styles.Anime, value: "anime" },
+        { name: Locale.SdPanel.Styles.Cinematic, value: "cinematic" },
+        { name: Locale.SdPanel.Styles.ComicBook, value: "comic-book" },
+        { name: Locale.SdPanel.Styles.DigitalArt, value: "digital-art" },
+        { name: Locale.SdPanel.Styles.Enhance, value: "enhance" },
+        { name: Locale.SdPanel.Styles.FantasyArt, value: "fantasy-art" },
+        { name: Locale.SdPanel.Styles.Isometric, value: "isometric" },
+        { name: Locale.SdPanel.Styles.LineArt, value: "line-art" },
+        { name: Locale.SdPanel.Styles.LowPoly, value: "low-poly" },
         {
-          name: locales.SdPanel.Styles.ModelingCompound,
+          name: Locale.SdPanel.Styles.ModelingCompound,
           value: "modeling-compound",
         },
-        { name: locales.SdPanel.Styles.NeonPunk, value: "neon-punk" },
-        { name: locales.SdPanel.Styles.Origami, value: "origami" },
-        { name: locales.SdPanel.Styles.Photographic, value: "photographic" },
-        { name: locales.SdPanel.Styles.PixelArt, value: "pixel-art" },
-        { name: locales.SdPanel.Styles.TileTexture, value: "tile-texture" },
+        { name: Locale.SdPanel.Styles.NeonPunk, value: "neon-punk" },
+        { name: Locale.SdPanel.Styles.Origami, value: "origami" },
+        { name: Locale.SdPanel.Styles.Photographic, value: "photographic" },
+        { name: Locale.SdPanel.Styles.PixelArt, value: "pixel-art" },
+        { name: Locale.SdPanel.Styles.TileTexture, value: "tile-texture" },
       ],
     },
     {
@@ -89,7 +89,7 @@ const sdCommonParams = (model: string, data: any) => {
       max: 4294967294,
     },
     {
-      name: locales.SdPanel.OutFormat,
+      name: Locale.SdPanel.OutFormat,
       value: "output_format",
       type: "select",
       default: "png",
@@ -292,7 +292,7 @@ export function SdPanel() {
       reqParams[item.value] = params[item.value] ?? null;
       if (item.required) {
         if (!reqParams[item.value]) {
-          showToast(locales.SdPanel.ParamIsRequired(item.name));
+          showToast(Locale.SdPanel.ParamIsRequired(item.name));
           return;
         }
       }
@@ -311,7 +311,7 @@ export function SdPanel() {
   };
   return (
     <>
-      <ControlParamItem title={locales.SdPanel.AIModel}>
+      <ControlParamItem title={Locale.SdPanel.AIModel}>
         <div className={styles["ai-models"]}>
           {models.map((item) => {
             return (
@@ -332,7 +332,7 @@ export function SdPanel() {
         onChange={handleValueChange}
       ></ControlParam>
       <IconButton
-        text={locales.SdPanel.Submit}
+        text={Locale.SdPanel.Submit}
         type="primary"
         style={{ marginTop: "20px" }}
         shadow
diff --git a/app/components/sd/sd-sidebar.tsx b/app/components/sd/sd-sidebar.tsx
new file mode 100644
index 00000000000..9d85846d745
--- /dev/null
+++ b/app/components/sd/sd-sidebar.tsx
@@ -0,0 +1,65 @@
+import styles from "@/app/components/home.module.scss";
+
+import { IconButton } from "@/app/components/button";
+import GithubIcon from "@/app/icons/github.svg";
+import SDIcon from "@/app/icons/sd.svg";
+import ReturnIcon from "@/app/icons/return.svg";
+import Locale from "@/app/locales";
+
+import { Path, REPO_URL } from "@/app/constant";
+
+import { useNavigate } from "react-router-dom";
+import dynamic from "next/dynamic";
+import {
+  SideBarContainer,
+  SideBarBody,
+  useDragSideBar,
+  useHotKey,
+} from "@/app/components/sidebar";
+
+const SdPanel = dynamic(
+  async () => (await import("@/app/components/sd/sd-panel")).SdPanel,
+  {
+    loading: () => null,
+  },
+);
+
+export function SideBar(props: { className?: string }) {
+  useHotKey();
+  const { onDragStart, shouldNarrow } = useDragSideBar();
+  const navigate = useNavigate();
+
+  return (
+    <SideBarContainer
+      onDragStart={onDragStart}
+      shouldNarrow={shouldNarrow}
+      {...props}
+    >
+      <div className={styles["sidebar-header"]} data-tauri-drag-region>
+        <div className={styles["sidebar-title"]} data-tauri-drag-region>
+          <IconButton
+            icon={<ReturnIcon />}
+            bordered
+            title={Locale.Chat.Actions.ChatList}
+            onClick={() => navigate(Path.Chat)}
+          />
+        </div>
+        <div className={styles["sidebar-logo"] + " no-dark"}>
+          <SDIcon width={38} height={38} />
+        </div>
+      </div>
+      <SideBarBody>
+        <SdPanel />
+      </SideBarBody>
+      <div className={styles["sidebar-tail"]}>
+        <div className={styles["sidebar-actions"]}>
+          <div className={styles["sidebar-action"]}>
+            <a href={REPO_URL} target="_blank" rel="noopener noreferrer">
+              <IconButton icon={<GithubIcon />} shadow />
+            </a>
+          </div>
+        </div>
+      </div>
+    </SideBarContainer>
+  );
+}
diff --git a/app/components/sd.module.scss b/app/components/sd/sd.module.scss
similarity index 100%
rename from app/components/sd.module.scss
rename to app/components/sd/sd.module.scss
diff --git a/app/components/sd/sd.tsx b/app/components/sd/sd.tsx
new file mode 100644
index 00000000000..547a877ee37
--- /dev/null
+++ b/app/components/sd/sd.tsx
@@ -0,0 +1,292 @@
+import chatStyles from "@/app/components/chat.module.scss";
+import styles from "@/app/components/sd/sd.module.scss";
+import { IconButton } from "@/app/components/button";
+import ReturnIcon from "@/app/icons/return.svg";
+import Locale from "@/app/locales";
+import { Path } from "@/app/constant";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import {
+  copyToClipboard,
+  getMessageTextContent,
+  useMobileScreen,
+} from "@/app/utils";
+import { useNavigate } from "react-router-dom";
+import { useAppConfig } from "@/app/store";
+import MinIcon from "@/app/icons/min.svg";
+import MaxIcon from "@/app/icons/max.svg";
+import { getClientConfig } from "@/app/config/client";
+import { ChatAction } from "@/app/components/chat";
+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 { useSdStore } from "@/app/store/sd";
+import locales from "@/app/locales";
+import LoadingIcon from "@/app/icons/three-dots.svg";
+import ErrorIcon from "@/app/icons/delete.svg";
+import { Property } from "csstype";
+import {
+  showConfirm,
+  showImageModal,
+  showModal,
+} from "@/app/components/ui-lib";
+import { removeImage } from "@/app/utils/chat";
+import { SideBar } from "./sd-sidebar";
+import { WindowContent } from "@/app/components/home";
+
+function getSdTaskStatus(item: any) {
+  let s: string;
+  let color: Property.Color | undefined = undefined;
+  switch (item.status) {
+    case "success":
+      s = Locale.Sd.Status.Success;
+      color = "green";
+      break;
+    case "error":
+      s = Locale.Sd.Status.Error;
+      color = "red";
+      break;
+    case "wait":
+      s = Locale.Sd.Status.Wait;
+      color = "yellow";
+      break;
+    case "running":
+      s = Locale.Sd.Status.Running;
+      color = "blue";
+      break;
+    default:
+      s = item.status.toUpperCase();
+  }
+  return (
+    <p className={styles["line-1"]} title={item.error} style={{ color: color }}>
+      <span>
+        {locales.Sd.Status.Name}: {s}
+      </span>
+      {item.status === "error" && (
+        <span
+          className="clickable"
+          onClick={() => {
+            showModal({
+              title: locales.Sd.Detail,
+              children: (
+                <div style={{ color: color, userSelect: "text" }}>
+                  {item.error}
+                </div>
+              ),
+            });
+          }}
+        >
+          {" "}
+          - {item.error}
+        </span>
+      )}
+    </p>
+  );
+}
+
+export function Sd() {
+  const isMobileScreen = useMobileScreen();
+  const navigate = useNavigate();
+  const clientConfig = useMemo(() => getClientConfig(), []);
+  const showMaxIcon = !isMobileScreen && !clientConfig?.isApp;
+  const config = useAppConfig();
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const sdStore = useSdStore();
+  const [sdImages, setSdImages] = useState(sdStore.draw);
+
+  useEffect(() => {
+    setSdImages(sdStore.draw);
+  }, [sdStore.currentId]);
+
+  return (
+    <>
+      <SideBar />
+      <WindowContent>
+        <div className={chatStyles.chat} key={"1"}>
+          <div className="window-header" data-tauri-drag-region>
+            {isMobileScreen && (
+              <div className="window-actions">
+                <div className={"window-action-button"}>
+                  <IconButton
+                    icon={<ReturnIcon />}
+                    bordered
+                    title={Locale.Chat.Actions.ChatList}
+                    onClick={() => navigate(Path.SdPanel)}
+                  />
+                </div>
+              </div>
+            )}
+            <div
+              className={`window-header-title ${chatStyles["chat-body-title"]}`}
+            >
+              <div className={`window-header-main-title`}>Stability AI</div>
+              <div className="window-header-sub-title">
+                {Locale.Sd.SubTitle(sdImages.length || 0)}
+              </div>
+            </div>
+
+            <div className="window-actions">
+              {showMaxIcon && (
+                <div className="window-action-button">
+                  <IconButton
+                    icon={config.tightBorder ? <MinIcon /> : <MaxIcon />}
+                    bordered
+                    onClick={() => {
+                      config.update(
+                        (config) => (config.tightBorder = !config.tightBorder),
+                      );
+                    }}
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+          <div className={chatStyles["chat-body"]} ref={scrollRef}>
+            <div className={styles["sd-img-list"]}>
+              {sdImages.length > 0 ? (
+                sdImages.map((item: any) => {
+                  return (
+                    <div
+                      key={item.id}
+                      style={{ display: "flex" }}
+                      className={styles["sd-img-item"]}
+                    >
+                      {item.status === "success" ? (
+                        <img
+                          className={styles["img"]}
+                          src={item.img_data}
+                          alt={item.id}
+                          onClick={(e) =>
+                            showImageModal(
+                              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"]}>
+                          <ErrorIcon />
+                        </div>
+                      ) : (
+                        <div className={styles["pre-img"]}>
+                          <LoadingIcon />
+                        </div>
+                      )}
+                      <div
+                        style={{ marginLeft: "10px" }}
+                        className={styles["sd-img-item-info"]}
+                      >
+                        <p className={styles["line-1"]}>
+                          {locales.SdPanel.Prompt}:{" "}
+                          <span
+                            className="clickable"
+                            title={item.params.prompt}
+                            onClick={() => {
+                              showModal({
+                                title: locales.Sd.Detail,
+                                children: (
+                                  <div style={{ userSelect: "text" }}>
+                                    {item.params.prompt}
+                                  </div>
+                                ),
+                              });
+                            }}
+                          >
+                            {item.params.prompt}
+                          </span>
+                        </p>
+                        <p>
+                          {locales.SdPanel.AIModel}: {item.model_name}
+                        </p>
+                        {getSdTaskStatus(item)}
+                        <p>{item.created_at}</p>
+                        <div className={chatStyles["chat-message-actions"]}>
+                          <div className={chatStyles["chat-input-actions"]}>
+                            <ChatAction
+                              text={Locale.Sd.Actions.Params}
+                              icon={<PromptIcon />}
+                              onClick={() => {
+                                showModal({
+                                  title: locales.Sd.GenerateParams,
+                                  children: (
+                                    <div style={{ userSelect: "text" }}>
+                                      {Object.keys(item.params).map((key) => (
+                                        <div
+                                          key={key}
+                                          style={{ margin: "10px" }}
+                                        >
+                                          <strong>{key}: </strong>
+                                          {item.params[key]}
+                                        </div>
+                                      ))}
+                                    </div>
+                                  ),
+                                });
+                              }}
+                            />
+                            <ChatAction
+                              text={Locale.Sd.Actions.Copy}
+                              icon={<CopyIcon />}
+                              onClick={() =>
+                                copyToClipboard(
+                                  getMessageTextContent({
+                                    role: "user",
+                                    content: item.params.prompt,
+                                  }),
+                                )
+                              }
+                            />
+                            <ChatAction
+                              text={Locale.Sd.Actions.Retry}
+                              icon={<ResetIcon />}
+                              onClick={() => {
+                                const reqData = {
+                                  model: item.model,
+                                  model_name: item.model_name,
+                                  status: "wait",
+                                  params: { ...item.params },
+                                  created_at: new Date().toLocaleString(),
+                                  img_data: "",
+                                };
+                                sdStore.sendTask(reqData);
+                              }}
+                            />
+                            <ChatAction
+                              text={Locale.Sd.Actions.Delete}
+                              icon={<DeleteIcon />}
+                              onClick={async () => {
+                                if (
+                                  await showConfirm(Locale.Sd.Danger.Delete)
+                                ) {
+                                  // remove img_data + remove item in list
+                                  removeImage(item.img_data).finally(() => {
+                                    sdStore.draw = sdImages.filter(
+                                      (i: any) => i.id !== item.id,
+                                    );
+                                    sdStore.getNextId();
+                                  });
+                                }
+                              }}
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })
+              ) : (
+                <div>{locales.Sd.EmptyRecord}</div>
+              )}
+            </div>
+          </div>
+        </div>
+      </WindowContent>
+    </>
+  );
+}
diff --git a/app/components/sidebar.tsx b/app/components/sidebar.tsx
index dbe2f2d1a5f..79af7e121e9 100644
--- a/app/components/sidebar.tsx
+++ b/app/components/sidebar.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useMemo, useState } from "react";
+import { useEffect, useRef, useMemo, useState } from "react";
 
 import styles from "./home.module.scss";
 
@@ -15,7 +15,7 @@ import DragIcon from "../icons/drag.svg";
 
 import Locale from "../locales";
 
-import { ModelType, useAppConfig, useChatStore } from "../store";
+import { useAppConfig, useChatStore } from "../store";
 
 import {
   DEFAULT_SIDEBAR_WIDTH,
@@ -27,20 +27,16 @@ import {
   REPO_URL,
 } from "../constant";
 
-import { Link, useLocation, useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { isIOS, useMobileScreen } from "../utils";
 import dynamic from "next/dynamic";
-import { Selector, showConfirm, showToast } from "./ui-lib";
+import { showConfirm, Selector } from "./ui-lib";
 
 const ChatList = dynamic(async () => (await import("./chat-list")).ChatList, {
   loading: () => null,
 });
 
-const SdPanel = dynamic(async () => (await import("./sd-panel")).SdPanel, {
-  loading: () => null,
-});
-
-function useHotKey() {
+export function useHotKey() {
   const chatStore = useChatStore();
 
   useEffect(() => {
@@ -59,7 +55,7 @@ function useHotKey() {
   });
 }
 
-function useDragSideBar() {
+export function useDragSideBar() {
   const limit = (x: number) => Math.min(MAX_SIDEBAR_WIDTH, x);
 
   const config = useAppConfig();
@@ -132,39 +128,21 @@ function useDragSideBar() {
     shouldNarrow,
   };
 }
-
-export function SideBar(props: { className?: string }) {
-  const chatStore = useChatStore();
-
-  // drag side bar
-  const { onDragStart, shouldNarrow } = useDragSideBar();
-  const navigate = useNavigate();
-  const config = useAppConfig();
+export function SideBarContainer(props: {
+  children: React.ReactNode;
+  onDragStart: (e: MouseEvent) => void;
+  shouldNarrow: boolean;
+  className?: string;
+}) {
   const isMobileScreen = useMobileScreen();
   const isIOSMobile = useMemo(
     () => isIOS() && isMobileScreen,
     [isMobileScreen],
   );
-  const [showPluginSelector, setShowPluginSelector] = useState(false);
-  const location = useLocation();
-
-  useHotKey();
-
-  let bodyComponent: React.JSX.Element;
-  let isChat: boolean = false;
-  switch (location.pathname) {
-    case Path.Sd:
-    case Path.SdPanel:
-      bodyComponent = <SdPanel />;
-      break;
-    default:
-      isChat = true;
-      bodyComponent = <ChatList narrow={shouldNarrow} />;
-  }
-  // @ts-ignore
+  const { children, className, onDragStart, shouldNarrow } = props;
   return (
     <div
-      className={`${styles.sidebar} ${props.className} ${
+      className={`${styles.sidebar} ${className} ${
         shouldNarrow && styles["narrow-sidebar"]
       }`}
       style={{
@@ -172,6 +150,25 @@ export function SideBar(props: { className?: string }) {
         transition: isMobileScreen && isIOSMobile ? "none" : undefined,
       }}
     >
+      {children}
+      <div
+        className={styles["sidebar-drag"]}
+        onPointerDown={(e) => onDragStart(e as any)}
+      >
+        <DragIcon />
+      </div>
+    </div>
+  );
+}
+
+export function SideBarHeader(props: { shouldNarrow: boolean }) {
+  const navigate = useNavigate();
+  const config = useAppConfig();
+  const { shouldNarrow } = props;
+  const [showPluginSelector, setShowPluginSelector] = useState(false);
+
+  return (
+    <>
       <div className={styles["sidebar-header"]} data-tauri-drag-region>
         <div className={styles["sidebar-title"]} data-tauri-drag-region>
           NextChat
@@ -206,68 +203,6 @@ export function SideBar(props: { className?: string }) {
           shadow
         />
       </div>
-
-      <div
-        className={styles["sidebar-body"]}
-        onClick={(e) => {
-          if (isChat && e.target === e.currentTarget) {
-            navigate(Path.Home);
-          }
-        }}
-      >
-        {bodyComponent}
-      </div>
-
-      <div className={styles["sidebar-tail"]}>
-        <div className={styles["sidebar-actions"]}>
-          {isChat && (
-            <div className={styles["sidebar-action"] + " " + styles.mobile}>
-              <IconButton
-                icon={<DeleteIcon />}
-                onClick={async () => {
-                  if (await showConfirm(Locale.Home.DeleteChat)) {
-                    chatStore.deleteSession(chatStore.currentSessionIndex);
-                  }
-                }}
-              />
-            </div>
-          )}
-          <div className={styles["sidebar-action"]}>
-            <Link to={Path.Settings}>
-              <IconButton icon={<SettingsIcon />} shadow />
-            </Link>
-          </div>
-          <div className={styles["sidebar-action"]}>
-            <a href={REPO_URL} target="_blank" rel="noopener noreferrer">
-              <IconButton icon={<GithubIcon />} shadow />
-            </a>
-          </div>
-        </div>
-        {isChat && (
-          <div>
-            <IconButton
-              icon={<AddIcon />}
-              text={shouldNarrow ? undefined : Locale.Home.NewChat}
-              onClick={() => {
-                if (config.dontShowMaskSplashScreen) {
-                  chatStore.newSession();
-                  navigate(Path.Chat);
-                } else {
-                  navigate(Path.NewChat);
-                }
-              }}
-              shadow
-            />
-          </div>
-        )}
-      </div>
-
-      <div
-        className={styles["sidebar-drag"]}
-        onPointerDown={(e) => onDragStart(e as any)}
-      >
-        <DragIcon />
-      </div>
       {showPluginSelector && (
         <Selector
           items={[
@@ -289,6 +224,92 @@ export function SideBar(props: { className?: string }) {
           }}
         />
       )}
+    </>
+  );
+}
+
+export function SideBarBody(props: {
+  children: React.ReactNode;
+  onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}) {
+  const { onClick, children } = props;
+  return (
+    <div className={styles["sidebar-body"]} onClick={onClick}>
+      {children}
     </div>
   );
 }
+
+export function SideBarTail(props: { shouldNarrow: boolean }) {
+  const { shouldNarrow } = props;
+  const chatStore = useChatStore();
+  const navigate = useNavigate();
+  const config = useAppConfig();
+  return (
+    <div className={styles["sidebar-tail"]}>
+      <div className={styles["sidebar-actions"]}>
+        <div className={styles["sidebar-action"] + " " + styles.mobile}>
+          <IconButton
+            icon={<DeleteIcon />}
+            onClick={async () => {
+              if (await showConfirm(Locale.Home.DeleteChat)) {
+                chatStore.deleteSession(chatStore.currentSessionIndex);
+              }
+            }}
+          />
+        </div>
+        <div className={styles["sidebar-action"]}>
+          <Link to={Path.Settings}>
+            <IconButton icon={<SettingsIcon />} shadow />
+          </Link>
+        </div>
+        <div className={styles["sidebar-action"]}>
+          <a href={REPO_URL} target="_blank" rel="noopener noreferrer">
+            <IconButton icon={<GithubIcon />} shadow />
+          </a>
+        </div>
+      </div>
+      <div>
+        <IconButton
+          icon={<AddIcon />}
+          text={shouldNarrow ? undefined : Locale.Home.NewChat}
+          onClick={() => {
+            if (config.dontShowMaskSplashScreen) {
+              chatStore.newSession();
+              navigate(Path.Chat);
+            } else {
+              navigate(Path.NewChat);
+            }
+          }}
+          shadow
+        />
+      </div>
+    </div>
+  );
+}
+
+export function SideBar(props: { className?: string }) {
+  useHotKey();
+  const { onDragStart, shouldNarrow } = useDragSideBar();
+  const navigate = useNavigate();
+
+  return (
+    <SideBarContainer
+      onDragStart={onDragStart}
+      shouldNarrow={shouldNarrow}
+      {...props}
+    >
+      <SideBarHeader shouldNarrow={shouldNarrow} />
+      <SideBarBody
+        onClick={(e) => {
+          if (e.target === e.currentTarget) {
+            navigate(Path.Home);
+          }
+        }}
+      >
+        <ChatList narrow={shouldNarrow} />
+      </SideBarBody>
+      <SideBarTail shouldNarrow={shouldNarrow} />
+    </SideBarContainer>
+  );
+}
diff --git a/app/icons/sd.svg b/app/icons/sd.svg
new file mode 100644
index 00000000000..1c5e730211a
--- /dev/null
+++ b/app/icons/sd.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.21em" height="1em" viewBox="0 0 256 213">
+    <defs>
+        <linearGradient id="logosStabilityAiIcon0" x1="50%" x2="50%" y1="0%" y2="100%">
+            <stop offset="0%" stop-color="#9d39ff" />
+            <stop offset="100%" stop-color="#a380ff" />
+        </linearGradient>
+    </defs>
+    <path fill="url(#logosStabilityAiIcon0)"
+        d="M72.418 212.45c49.478 0 81.658-26.205 81.658-65.626c0-30.572-19.572-49.998-54.569-58.043l-22.469-6.74c-19.71-4.424-31.215-9.738-28.505-23.312c2.255-11.292 9.002-17.667 24.69-17.667c49.872 0 68.35 17.667 68.35 17.667V16.237S123.583 0 73.223 0C25.757 0 0 24.424 0 62.236c0 30.571 17.85 48.35 54.052 56.798q3.802.95 3.885.976q8.26 2.556 22.293 6.755c18.504 4.425 23.262 9.121 23.262 23.2c0 12.872-13.374 20.19-31.074 20.19C21.432 170.154 0 144.36 0 144.36v47.078s13.402 21.01 72.418 21.01" />
+    <path fill="#e80000"
+        d="M225.442 209.266c17.515 0 30.558-12.67 30.558-29.812c0-17.515-12.67-29.813-30.558-29.813c-17.515 0-30.185 12.298-30.185 29.813s12.67 29.812 30.185 29.812" />
+</svg>
\ No newline at end of file
diff --git a/app/styles/globals.scss b/app/styles/globals.scss
index f612e462e2a..3c59f2d44f7 100644
--- a/app/styles/globals.scss
+++ b/app/styles/globals.scss
@@ -226,8 +226,7 @@ input[type="range"]::-ms-thumb:hover {
 
 input[type="number"],
 input[type="text"],
-input[type="password"],
-textarea {
+input[type="password"] {
   appearance: none;
   border-radius: 10px;
   border: var(--border-in-light);

From 6b98b141791ba2c8b3fd1861ba001280b6f5be23 Mon Sep 17 00:00:00 2001
From: Dogtiti <499960698@qq.com>
Date: Tue, 23 Jul 2024 20:24:56 +0800
Subject: [PATCH 31/43] fix: sd mobile

---
 app/components/home.tsx          |   8 +-
 app/components/sd/index.tsx      |   1 +
 app/components/sd/sd-new.tsx     |  85 ++++++++++++
 app/components/sd/sd-sidebar.tsx |  38 +++---
 app/components/sd/sd.tsx         |   2 +-
 app/components/sidebar.tsx       | 219 ++++++++++++++++---------------
 app/constant.ts                  |   2 +-
 app/icons/history.svg            |  10 ++
 app/locales/cn.ts                |   2 +
 app/locales/en.ts                |   2 +
 10 files changed, 237 insertions(+), 132 deletions(-)
 create mode 100644 app/components/sd/sd-new.tsx
 create mode 100644 app/icons/history.svg

diff --git a/app/components/home.tsx b/app/components/home.tsx
index 57611271573..19ecb730f52 100644
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -59,7 +59,7 @@ const Sd = dynamic(async () => (await import("./sd")).Sd, {
   loading: () => <Loading noLogo />,
 });
 
-const SdPanel = dynamic(async () => (await import("./sd")).SdPanel, {
+const SdNew = dynamic(async () => (await import("./sd")).SdNew, {
   loading: () => <Loading noLogo />,
 });
 
@@ -144,7 +144,7 @@ function Screen() {
   const isHome = location.pathname === Path.Home;
   const isAuth = location.pathname === Path.Auth;
   const isSd = location.pathname === Path.Sd;
-  const isSdPanel = location.pathname === Path.SdPanel;
+  const isSdNew = location.pathname === Path.SdNew;
 
   const isMobileScreen = useMobileScreen();
   const shouldTightBorder =
@@ -157,7 +157,7 @@ function Screen() {
   const renderContent = () => {
     if (isAuth) return <AuthPage />;
     if (isSd) return <Sd />;
-    if (isSdPanel) return <SdPanel />;
+    if (isSdNew) return <SdNew />;
     return (
       <>
         <SideBar className={isHome ? styles["sidebar-show"] : ""} />
@@ -167,8 +167,6 @@ function Screen() {
             <Route path={Path.NewChat} element={<NewChat />} />
             <Route path={Path.Masks} element={<MaskPage />} />
             <Route path={Path.Chat} element={<Chat />} />
-            <Route path={Path.Sd} element={<Sd />} />
-            <Route path={Path.SdPanel} element={<Sd />} />
             <Route path={Path.Settings} element={<Settings />} />
           </Routes>
         </WindowContent>
diff --git a/app/components/sd/index.tsx b/app/components/sd/index.tsx
index d442c22bcda..f2808bd3e9c 100644
--- a/app/components/sd/index.tsx
+++ b/app/components/sd/index.tsx
@@ -1,2 +1,3 @@
 export * from "./sd";
 export * from "./sd-panel";
+export * from "./sd-new";
diff --git a/app/components/sd/sd-new.tsx b/app/components/sd/sd-new.tsx
new file mode 100644
index 00000000000..77e70d64fc6
--- /dev/null
+++ b/app/components/sd/sd-new.tsx
@@ -0,0 +1,85 @@
+import homeStyles from "@/app/components/home.module.scss";
+
+import { IconButton } from "@/app/components/button";
+import GithubIcon from "@/app/icons/github.svg";
+import ReturnIcon from "@/app/icons/return.svg";
+import Locale from "@/app/locales";
+import HistoryIcon from "@/app/icons/history.svg";
+
+import { Path, REPO_URL } from "@/app/constant";
+
+import { useNavigate } from "react-router-dom";
+import dynamic from "next/dynamic";
+import {
+  SideBarContainer,
+  SideBarBody,
+  SideBarTail,
+  useDragSideBar,
+  useHotKey,
+} from "@/app/components/sidebar";
+
+const SdPanel = dynamic(
+  async () => (await import("@/app/components/sd")).SdPanel,
+  {
+    loading: () => null,
+  },
+);
+
+export function SdNew() {
+  useHotKey();
+  const { onDragStart, shouldNarrow } = useDragSideBar();
+  const navigate = useNavigate();
+  return (
+    <SideBarContainer
+      onDragStart={onDragStart}
+      shouldNarrow={shouldNarrow}
+      className={homeStyles["sidebar-show"]}
+    >
+      <div
+        className="window-header"
+        data-tauri-drag-region
+        style={{
+          paddingLeft: 0,
+          paddingRight: 0,
+        }}
+      >
+        {
+          <div className="window-actions">
+            <div className="window-action-button">
+              <IconButton
+                icon={<ReturnIcon />}
+                bordered
+                title={Locale.Sd.Actions.ReturnHome}
+                onClick={() => navigate(Path.Home)}
+              />
+            </div>
+          </div>
+        }
+
+        <div className={`window-header-title`}>
+          <div className={`window-header-main-title`}>Stability</div>
+        </div>
+        <div className="window-actions">
+          <div className="window-action-button">
+            <IconButton
+              icon={<HistoryIcon />}
+              bordered
+              title={Locale.Sd.Actions.History}
+              onClick={() => navigate(Path.Sd)}
+            />
+          </div>
+        </div>
+      </div>
+      <SideBarBody>
+        <SdPanel />
+      </SideBarBody>
+      <SideBarTail
+        primaryAction={
+          <a href={REPO_URL} target="_blank" rel="noopener noreferrer">
+            <IconButton icon={<GithubIcon />} shadow />
+          </a>
+        }
+      />
+    </SideBarContainer>
+  );
+}
diff --git a/app/components/sd/sd-sidebar.tsx b/app/components/sd/sd-sidebar.tsx
index 9d85846d745..93909218fa0 100644
--- a/app/components/sd/sd-sidebar.tsx
+++ b/app/components/sd/sd-sidebar.tsx
@@ -1,5 +1,3 @@
-import styles from "@/app/components/home.module.scss";
-
 import { IconButton } from "@/app/components/button";
 import GithubIcon from "@/app/icons/github.svg";
 import SDIcon from "@/app/icons/sd.svg";
@@ -13,12 +11,14 @@ import dynamic from "next/dynamic";
 import {
   SideBarContainer,
   SideBarBody,
+  SideBarHeader,
+  SideBarTail,
   useDragSideBar,
   useHotKey,
 } from "@/app/components/sidebar";
 
 const SdPanel = dynamic(
-  async () => (await import("@/app/components/sd/sd-panel")).SdPanel,
+  async () => (await import("@/app/components/sd")).SdPanel,
   {
     loading: () => null,
   },
@@ -35,31 +35,27 @@ export function SideBar(props: { className?: string }) {
       shouldNarrow={shouldNarrow}
       {...props}
     >
-      <div className={styles["sidebar-header"]} data-tauri-drag-region>
-        <div className={styles["sidebar-title"]} data-tauri-drag-region>
+      <SideBarHeader
+        title={
           <IconButton
             icon={<ReturnIcon />}
             bordered
-            title={Locale.Chat.Actions.ChatList}
-            onClick={() => navigate(Path.Chat)}
+            title={Locale.Sd.Actions.ReturnHome}
+            onClick={() => navigate(Path.Home)}
           />
-        </div>
-        <div className={styles["sidebar-logo"] + " no-dark"}>
-          <SDIcon width={38} height={38} />
-        </div>
-      </div>
+        }
+        logo={<SDIcon width={38} height={38} />}
+      ></SideBarHeader>
       <SideBarBody>
         <SdPanel />
       </SideBarBody>
-      <div className={styles["sidebar-tail"]}>
-        <div className={styles["sidebar-actions"]}>
-          <div className={styles["sidebar-action"]}>
-            <a href={REPO_URL} target="_blank" rel="noopener noreferrer">
-              <IconButton icon={<GithubIcon />} shadow />
-            </a>
-          </div>
-        </div>
-      </div>
+      <SideBarTail
+        primaryAction={
+          <a href={REPO_URL} target="_blank" rel="noopener noreferrer">
+            <IconButton icon={<GithubIcon />} shadow />
+          </a>
+        }
+      />
     </SideBarContainer>
   );
 }
diff --git a/app/components/sd/sd.tsx b/app/components/sd/sd.tsx
index 547a877ee37..83326e5eb6e 100644
--- a/app/components/sd/sd.tsx
+++ b/app/components/sd/sd.tsx
@@ -111,7 +111,7 @@ export function Sd() {
                     icon={<ReturnIcon />}
                     bordered
                     title={Locale.Chat.Actions.ChatList}
-                    onClick={() => navigate(Path.SdPanel)}
+                    onClick={() => navigate(Path.SdNew)}
                   />
                 </div>
               </div>
diff --git a/app/components/sidebar.tsx b/app/components/sidebar.tsx
index 79af7e121e9..5db77170e3f 100644
--- a/app/components/sidebar.tsx
+++ b/app/components/sidebar.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useMemo, useState } from "react";
+import React, { useEffect, useRef, useMemo, useState, Fragment } from "react";
 
 import styles from "./home.module.scss";
 
@@ -161,70 +161,24 @@ export function SideBarContainer(props: {
   );
 }
 
-export function SideBarHeader(props: { shouldNarrow: boolean }) {
-  const navigate = useNavigate();
-  const config = useAppConfig();
-  const { shouldNarrow } = props;
-  const [showPluginSelector, setShowPluginSelector] = useState(false);
-
+export function SideBarHeader(props: {
+  title?: string | React.ReactNode;
+  subTitle?: string | React.ReactNode;
+  logo?: React.ReactNode;
+  children?: React.ReactNode;
+}) {
+  const { title, subTitle, logo, children } = props;
   return (
-    <>
+    <Fragment>
       <div className={styles["sidebar-header"]} data-tauri-drag-region>
         <div className={styles["sidebar-title"]} data-tauri-drag-region>
-          NextChat
-        </div>
-        <div className={styles["sidebar-sub-title"]}>
-          Build your own AI assistant.
+          {title}
         </div>
-        <div className={styles["sidebar-logo"] + " no-dark"}>
-          <ChatGptIcon />
-        </div>
-      </div>
-
-      <div className={styles["sidebar-header-bar"]}>
-        <IconButton
-          icon={<MaskIcon />}
-          text={shouldNarrow ? undefined : Locale.Mask.Name}
-          className={styles["sidebar-bar-button"]}
-          onClick={() => {
-            if (config.dontShowMaskSplashScreen !== true) {
-              navigate(Path.NewChat, { state: { fromHome: true } });
-            } else {
-              navigate(Path.Masks, { state: { fromHome: true } });
-            }
-          }}
-          shadow
-        />
-        <IconButton
-          icon={<PluginIcon />}
-          text={shouldNarrow ? undefined : Locale.Plugin.Name}
-          className={styles["sidebar-bar-button"]}
-          onClick={() => setShowPluginSelector(true)}
-          shadow
-        />
+        <div className={styles["sidebar-sub-title"]}>{subTitle}</div>
+        <div className={styles["sidebar-logo"] + " no-dark"}>{logo}</div>
       </div>
-      {showPluginSelector && (
-        <Selector
-          items={[
-            {
-              title: "👇 Please select the plugin you need to use",
-              value: "-",
-              disable: true,
-            },
-            ...PLUGINS.map((item) => {
-              return {
-                title: item.name,
-                value: item.path,
-              };
-            }),
-          ]}
-          onClose={() => setShowPluginSelector(false)}
-          onSelection={(s) => {
-            navigate(s[0], { state: { fromHome: true } });
-          }}
-        />
-      )}
-    </>
+      {children}
+    </Fragment>
   );
 }
 
@@ -240,50 +194,16 @@ export function SideBarBody(props: {
   );
 }
 
-export function SideBarTail(props: { shouldNarrow: boolean }) {
-  const { shouldNarrow } = props;
-  const chatStore = useChatStore();
-  const navigate = useNavigate();
-  const config = useAppConfig();
+export function SideBarTail(props: {
+  primaryAction?: React.ReactNode;
+  secondaryAction?: React.ReactNode;
+}) {
+  const { primaryAction, secondaryAction } = props;
+
   return (
     <div className={styles["sidebar-tail"]}>
-      <div className={styles["sidebar-actions"]}>
-        <div className={styles["sidebar-action"] + " " + styles.mobile}>
-          <IconButton
-            icon={<DeleteIcon />}
-            onClick={async () => {
-              if (await showConfirm(Locale.Home.DeleteChat)) {
-                chatStore.deleteSession(chatStore.currentSessionIndex);
-              }
-            }}
-          />
-        </div>
-        <div className={styles["sidebar-action"]}>
-          <Link to={Path.Settings}>
-            <IconButton icon={<SettingsIcon />} shadow />
-          </Link>
-        </div>
-        <div className={styles["sidebar-action"]}>
-          <a href={REPO_URL} target="_blank" rel="noopener noreferrer">
-            <IconButton icon={<GithubIcon />} shadow />
-          </a>
-        </div>
-      </div>
-      <div>
-        <IconButton
-          icon={<AddIcon />}
-          text={shouldNarrow ? undefined : Locale.Home.NewChat}
-          onClick={() => {
-            if (config.dontShowMaskSplashScreen) {
-              chatStore.newSession();
-              navigate(Path.Chat);
-            } else {
-              navigate(Path.NewChat);
-            }
-          }}
-          shadow
-        />
-      </div>
+      <div className={styles["sidebar-actions"]}>{primaryAction}</div>
+      <div className={styles["sidebar-actions"]}>{secondaryAction}</div>
     </div>
   );
 }
@@ -291,7 +211,10 @@ export function SideBarTail(props: { shouldNarrow: boolean }) {
 export function SideBar(props: { className?: string }) {
   useHotKey();
   const { onDragStart, shouldNarrow } = useDragSideBar();
+  const [showPluginSelector, setShowPluginSelector] = useState(false);
   const navigate = useNavigate();
+  const config = useAppConfig();
+  const chatStore = useChatStore();
 
   return (
     <SideBarContainer
@@ -299,7 +222,55 @@ export function SideBar(props: { className?: string }) {
       shouldNarrow={shouldNarrow}
       {...props}
     >
-      <SideBarHeader shouldNarrow={shouldNarrow} />
+      <SideBarHeader
+        title="NextChat"
+        subTitle="Build your own AI assistant."
+        logo={<ChatGptIcon />}
+      >
+        <div className={styles["sidebar-header-bar"]}>
+          <IconButton
+            icon={<MaskIcon />}
+            text={shouldNarrow ? undefined : Locale.Mask.Name}
+            className={styles["sidebar-bar-button"]}
+            onClick={() => {
+              if (config.dontShowMaskSplashScreen !== true) {
+                navigate(Path.NewChat, { state: { fromHome: true } });
+              } else {
+                navigate(Path.Masks, { state: { fromHome: true } });
+              }
+            }}
+            shadow
+          />
+          <IconButton
+            icon={<PluginIcon />}
+            text={shouldNarrow ? undefined : Locale.Plugin.Name}
+            className={styles["sidebar-bar-button"]}
+            onClick={() => setShowPluginSelector(true)}
+            shadow
+          />
+        </div>
+        {showPluginSelector && (
+          <Selector
+            items={[
+              {
+                title: "👇 Please select the plugin you need to use",
+                value: "-",
+                disable: true,
+              },
+              ...PLUGINS.map((item) => {
+                return {
+                  title: item.name,
+                  value: item.path,
+                };
+              }),
+            ]}
+            onClose={() => setShowPluginSelector(false)}
+            onSelection={(s) => {
+              navigate(s[0], { state: { fromHome: true } });
+            }}
+          />
+        )}
+      </SideBarHeader>
       <SideBarBody
         onClick={(e) => {
           if (e.target === e.currentTarget) {
@@ -309,7 +280,47 @@ export function SideBar(props: { className?: string }) {
       >
         <ChatList narrow={shouldNarrow} />
       </SideBarBody>
-      <SideBarTail shouldNarrow={shouldNarrow} />
+      <SideBarTail
+        primaryAction={
+          <>
+            <div className={styles["sidebar-action"] + " " + styles.mobile}>
+              <IconButton
+                icon={<DeleteIcon />}
+                onClick={async () => {
+                  if (await showConfirm(Locale.Home.DeleteChat)) {
+                    chatStore.deleteSession(chatStore.currentSessionIndex);
+                  }
+                }}
+              />
+            </div>
+            <div className={styles["sidebar-action"]}>
+              <Link to={Path.Settings}>
+                <IconButton icon={<SettingsIcon />} shadow />
+              </Link>
+            </div>
+            <div className={styles["sidebar-action"]}>
+              <a href={REPO_URL} target="_blank" rel="noopener noreferrer">
+                <IconButton icon={<GithubIcon />} shadow />
+              </a>
+            </div>
+          </>
+        }
+        secondaryAction={
+          <IconButton
+            icon={<AddIcon />}
+            text={shouldNarrow ? undefined : Locale.Home.NewChat}
+            onClick={() => {
+              if (config.dontShowMaskSplashScreen) {
+                chatStore.newSession();
+                navigate(Path.Chat);
+              } else {
+                navigate(Path.NewChat);
+              }
+            }}
+            shadow
+          />
+        }
+      />
     </SideBarContainer>
   );
 }
diff --git a/app/constant.ts b/app/constant.ts
index 8f13d61039d..1065aa14a27 100644
--- a/app/constant.ts
+++ b/app/constant.ts
@@ -34,7 +34,7 @@ export enum Path {
   Masks = "/masks",
   Auth = "/auth",
   Sd = "/sd",
-  SdPanel = "/sd-panel",
+  SdNew = "/sd-new",
 }
 
 export enum ApiPath {
diff --git a/app/icons/history.svg b/app/icons/history.svg
new file mode 100644
index 00000000000..e7b47c02255
--- /dev/null
+++ b/app/icons/history.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M5.81836 6.72729V14H13.0911" stroke="#333" stroke-width="4" stroke-linecap="round"
+        stroke-linejoin="round" />
+    <path
+        d="M4 24C4 35.0457 12.9543 44 24 44V44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C16.598 4 10.1351 8.02111 6.67677 13.9981"
+        stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M24.005 12L24.0038 24.0088L32.4832 32.4882" stroke="#333" stroke-width="4"
+        stroke-linecap="round" stroke-linejoin="round" />
+</svg>
\ No newline at end of file
diff --git a/app/locales/cn.ts b/app/locales/cn.ts
index a6391913d52..6370cf76f8f 100644
--- a/app/locales/cn.ts
+++ b/app/locales/cn.ts
@@ -564,6 +564,8 @@ const cn = {
       Copy: "复制提示词",
       Delete: "删除",
       Retry: "重试",
+      ReturnHome: "返回首页",
+      History: "查看历史",
     },
     EmptyRecord: "暂无绘画记录",
     Status: {
diff --git a/app/locales/en.ts b/app/locales/en.ts
index 0bbea0c163a..24784946c02 100644
--- a/app/locales/en.ts
+++ b/app/locales/en.ts
@@ -570,6 +570,8 @@ const en: LocaleType = {
       Copy: "Copy Prompt",
       Delete: "Delete",
       Retry: "Retry",
+      ReturnHome: "Return Home",
+      History: "History",
     },
     EmptyRecord: "No images yet",
     Status: {

From 82e6fd7bb5498e6bd758d927a30a9bfea6e6ba80 Mon Sep 17 00:00:00 2001
From: Dogtiti <499960698@qq.com>
Date: Tue, 23 Jul 2024 21:43:55 +0800
Subject: [PATCH 32/43] feat: move sd config to store

---
 app/components/sd/sd-new.tsx     |  42 +++++
 app/components/sd/sd-panel.tsx   | 254 ++++++++++++++-----------------
 app/components/sd/sd-sidebar.tsx |  42 +++++
 app/components/sd/sd.tsx         |  57 +++++--
 app/store/sd.ts                  |  33 +++-
 5 files changed, 274 insertions(+), 154 deletions(-)

diff --git a/app/components/sd/sd-new.tsx b/app/components/sd/sd-new.tsx
index 77e70d64fc6..682cbfb2fd0 100644
--- a/app/components/sd/sd-new.tsx
+++ b/app/components/sd/sd-new.tsx
@@ -17,6 +17,9 @@ import {
   useDragSideBar,
   useHotKey,
 } from "@/app/components/sidebar";
+import { getParams, getModelParamBasicData } from "./sd-panel";
+import { useSdStore } from "@/app/store/sd";
+import { showToast } from "@/app/components/ui-lib";
 
 const SdPanel = dynamic(
   async () => (await import("@/app/components/sd")).SdPanel,
@@ -29,6 +32,37 @@ export function SdNew() {
   useHotKey();
   const { onDragStart, shouldNarrow } = useDragSideBar();
   const navigate = useNavigate();
+  const sdStore = useSdStore();
+  const currentModel = sdStore.currentModel;
+  const params = sdStore.currentParams;
+  const setParams = sdStore.setCurrentParams;
+
+  const handleSubmit = () => {
+    const columns = getParams?.(currentModel, params);
+    const reqParams: any = {};
+    for (let i = 0; i < columns.length; i++) {
+      const item = columns[i];
+      reqParams[item.value] = params[item.value] ?? null;
+      if (item.required) {
+        if (!reqParams[item.value]) {
+          showToast(Locale.SdPanel.ParamIsRequired(item.name));
+          return;
+        }
+      }
+    }
+    let data: any = {
+      model: currentModel.value,
+      model_name: currentModel.name,
+      status: "wait",
+      params: reqParams,
+      created_at: new Date().toLocaleString(),
+      img_data: "",
+    };
+    sdStore.sendTask(data, () => {
+      setParams(getModelParamBasicData(columns, params, true));
+      navigate(Path.Sd);
+    });
+  };
   return (
     <SideBarContainer
       onDragStart={onDragStart}
@@ -79,6 +113,14 @@ export function SdNew() {
             <IconButton icon={<GithubIcon />} shadow />
           </a>
         }
+        secondaryAction={
+          <IconButton
+            text={Locale.SdPanel.Submit}
+            type="primary"
+            shadow
+            onClick={handleSubmit}
+          ></IconButton>
+        }
       />
     </SideBarContainer>
   );
diff --git a/app/components/sd/sd-panel.tsx b/app/components/sd/sd-panel.tsx
index 592aa0dad5d..c27fbd54e2c 100644
--- a/app/components/sd/sd-panel.tsx
+++ b/app/components/sd/sd-panel.tsx
@@ -1,110 +1,110 @@
 import styles from "./sd-panel.module.scss";
-import React, { useState } from "react";
-import { Select, showToast } from "@/app/components/ui-lib";
+import React from "react";
+import { Select } from "@/app/components/ui-lib";
 import { IconButton } from "@/app/components/button";
 import Locale from "@/app/locales";
-import { nanoid } from "nanoid";
-import { StoreKey } from "@/app/constant";
 import { useSdStore } from "@/app/store/sd";
 
+export const params = [
+  {
+    name: Locale.SdPanel.Prompt,
+    value: "prompt",
+    type: "textarea",
+    placeholder: Locale.SdPanel.PleaseInput(Locale.SdPanel.Prompt),
+    required: true,
+  },
+  {
+    name: Locale.SdPanel.ModelVersion,
+    value: "model",
+    type: "select",
+    default: "sd3-medium",
+    support: ["sd3"],
+    options: [
+      { name: "SD3 Medium", value: "sd3-medium" },
+      { name: "SD3 Large", value: "sd3-large" },
+      { name: "SD3 Large Turbo", value: "sd3-large-turbo" },
+    ],
+  },
+  {
+    name: Locale.SdPanel.NegativePrompt,
+    value: "negative_prompt",
+    type: "textarea",
+    placeholder: Locale.SdPanel.PleaseInput(Locale.SdPanel.NegativePrompt),
+  },
+  {
+    name: Locale.SdPanel.AspectRatio,
+    value: "aspect_ratio",
+    type: "select",
+    default: "1:1",
+    options: [
+      { name: "1:1", value: "1:1" },
+      { name: "16:9", value: "16:9" },
+      { name: "21:9", value: "21:9" },
+      { name: "2:3", value: "2:3" },
+      { name: "3:2", value: "3:2" },
+      { name: "4:5", value: "4:5" },
+      { name: "5:4", value: "5:4" },
+      { name: "9:16", value: "9:16" },
+      { name: "9:21", value: "9:21" },
+    ],
+  },
+  {
+    name: Locale.SdPanel.ImageStyle,
+    value: "style",
+    type: "select",
+    default: "3d-model",
+    support: ["core"],
+    options: [
+      { name: Locale.SdPanel.Styles.D3Model, value: "3d-model" },
+      { name: Locale.SdPanel.Styles.AnalogFilm, value: "analog-film" },
+      { name: Locale.SdPanel.Styles.Anime, value: "anime" },
+      { name: Locale.SdPanel.Styles.Cinematic, value: "cinematic" },
+      { name: Locale.SdPanel.Styles.ComicBook, value: "comic-book" },
+      { name: Locale.SdPanel.Styles.DigitalArt, value: "digital-art" },
+      { name: Locale.SdPanel.Styles.Enhance, value: "enhance" },
+      { name: Locale.SdPanel.Styles.FantasyArt, value: "fantasy-art" },
+      { name: Locale.SdPanel.Styles.Isometric, value: "isometric" },
+      { name: Locale.SdPanel.Styles.LineArt, value: "line-art" },
+      { name: Locale.SdPanel.Styles.LowPoly, value: "low-poly" },
+      {
+        name: Locale.SdPanel.Styles.ModelingCompound,
+        value: "modeling-compound",
+      },
+      { name: Locale.SdPanel.Styles.NeonPunk, value: "neon-punk" },
+      { name: Locale.SdPanel.Styles.Origami, value: "origami" },
+      { name: Locale.SdPanel.Styles.Photographic, value: "photographic" },
+      { name: Locale.SdPanel.Styles.PixelArt, value: "pixel-art" },
+      { name: Locale.SdPanel.Styles.TileTexture, value: "tile-texture" },
+    ],
+  },
+  {
+    name: "Seed",
+    value: "seed",
+    type: "number",
+    default: 0,
+    min: 0,
+    max: 4294967294,
+  },
+  {
+    name: Locale.SdPanel.OutFormat,
+    value: "output_format",
+    type: "select",
+    default: "png",
+    options: [
+      { name: "PNG", value: "png" },
+      { name: "JPEG", value: "jpeg" },
+      { name: "WebP", value: "webp" },
+    ],
+  },
+];
+
 const sdCommonParams = (model: string, data: any) => {
-  return [
-    {
-      name: Locale.SdPanel.Prompt,
-      value: "prompt",
-      type: "textarea",
-      placeholder: Locale.SdPanel.PleaseInput(Locale.SdPanel.Prompt),
-      required: true,
-    },
-    {
-      name: Locale.SdPanel.ModelVersion,
-      value: "model",
-      type: "select",
-      default: "sd3-medium",
-      support: ["sd3"],
-      options: [
-        { name: "SD3 Medium", value: "sd3-medium" },
-        { name: "SD3 Large", value: "sd3-large" },
-        { name: "SD3 Large Turbo", value: "sd3-large-turbo" },
-      ],
-    },
-    {
-      name: Locale.SdPanel.NegativePrompt,
-      value: "negative_prompt",
-      type: "textarea",
-      placeholder: Locale.SdPanel.PleaseInput(Locale.SdPanel.NegativePrompt),
-    },
-    {
-      name: Locale.SdPanel.AspectRatio,
-      value: "aspect_ratio",
-      type: "select",
-      default: "1:1",
-      options: [
-        { name: "1:1", value: "1:1" },
-        { name: "16:9", value: "16:9" },
-        { name: "21:9", value: "21:9" },
-        { name: "2:3", value: "2:3" },
-        { name: "3:2", value: "3:2" },
-        { name: "4:5", value: "4:5" },
-        { name: "5:4", value: "5:4" },
-        { name: "9:16", value: "9:16" },
-        { name: "9:21", value: "9:21" },
-      ],
-    },
-    {
-      name: Locale.SdPanel.ImageStyle,
-      value: "style",
-      type: "select",
-      default: "3d",
-      support: ["core"],
-      options: [
-        { name: Locale.SdPanel.Styles.D3Model, value: "3d-model" },
-        { name: Locale.SdPanel.Styles.AnalogFilm, value: "analog-film" },
-        { name: Locale.SdPanel.Styles.Anime, value: "anime" },
-        { name: Locale.SdPanel.Styles.Cinematic, value: "cinematic" },
-        { name: Locale.SdPanel.Styles.ComicBook, value: "comic-book" },
-        { name: Locale.SdPanel.Styles.DigitalArt, value: "digital-art" },
-        { name: Locale.SdPanel.Styles.Enhance, value: "enhance" },
-        { name: Locale.SdPanel.Styles.FantasyArt, value: "fantasy-art" },
-        { name: Locale.SdPanel.Styles.Isometric, value: "isometric" },
-        { name: Locale.SdPanel.Styles.LineArt, value: "line-art" },
-        { name: Locale.SdPanel.Styles.LowPoly, value: "low-poly" },
-        {
-          name: Locale.SdPanel.Styles.ModelingCompound,
-          value: "modeling-compound",
-        },
-        { name: Locale.SdPanel.Styles.NeonPunk, value: "neon-punk" },
-        { name: Locale.SdPanel.Styles.Origami, value: "origami" },
-        { name: Locale.SdPanel.Styles.Photographic, value: "photographic" },
-        { name: Locale.SdPanel.Styles.PixelArt, value: "pixel-art" },
-        { name: Locale.SdPanel.Styles.TileTexture, value: "tile-texture" },
-      ],
-    },
-    {
-      name: "Seed",
-      value: "seed",
-      type: "number",
-      default: 0,
-      min: 0,
-      max: 4294967294,
-    },
-    {
-      name: Locale.SdPanel.OutFormat,
-      value: "output_format",
-      type: "select",
-      default: "png",
-      options: [
-        { name: "PNG", value: "png" },
-        { name: "JPEG", value: "jpeg" },
-        { name: "WebP", value: "webp" },
-      ],
-    },
-  ].filter((item) => {
+  return params.filter((item) => {
     return !(item.support && !item.support.includes(model));
   });
 };
 
-const models = [
+export const models = [
   {
     name: "Stable Image Ultra",
     value: "ultra",
@@ -162,7 +162,7 @@ export function ControlParam(props: {
 }) {
   return (
     <>
-      {props.columns.map((item) => {
+      {props.columns?.map((item) => {
         let element: null | JSX.Element;
         switch (item.type) {
           case "textarea":
@@ -251,7 +251,7 @@ export function ControlParam(props: {
   );
 }
 
-const getModelParamBasicData = (
+export const getModelParamBasicData = (
   columns: any[],
   data: any,
   clearText?: boolean,
@@ -268,47 +268,28 @@ const getModelParamBasicData = (
   return newParams;
 };
 
+export const getParams = (model: any, params: any) => {
+  return models.find((m) => m.value === model.value)?.params(params) || [];
+};
+
 export function SdPanel() {
-  const [currentModel, setCurrentModel] = useState(models[0]);
-  const [params, setParams] = useState(
-    getModelParamBasicData(currentModel.params({}), {}),
-  );
+  const sdStore = useSdStore();
+  const currentModel = sdStore.currentModel;
+  const setCurrentModel = sdStore.setCurrentModel;
+  const params = sdStore.currentParams;
+  const setParams = sdStore.setCurrentParams;
+
   const handleValueChange = (field: string, val: any) => {
-    setParams((prevParams: any) => ({
-      ...prevParams,
+    setParams({
+      ...params,
       [field]: val,
-    }));
+    });
   };
   const handleModelChange = (model: any) => {
     setCurrentModel(model);
     setParams(getModelParamBasicData(model.params({}), params));
   };
-  const sdStore = useSdStore();
-  const handleSubmit = () => {
-    const columns = currentModel.params(params);
-    const reqParams: any = {};
-    for (let i = 0; i < columns.length; i++) {
-      const item = columns[i];
-      reqParams[item.value] = params[item.value] ?? null;
-      if (item.required) {
-        if (!reqParams[item.value]) {
-          showToast(Locale.SdPanel.ParamIsRequired(item.name));
-          return;
-        }
-      }
-    }
-    let data: any = {
-      model: currentModel.value,
-      model_name: currentModel.name,
-      status: "wait",
-      params: reqParams,
-      created_at: new Date().toLocaleString(),
-      img_data: "",
-    };
-    sdStore.sendTask(data, () => {
-      setParams(getModelParamBasicData(columns, params, true));
-    });
-  };
+
   return (
     <>
       <ControlParamItem title={Locale.SdPanel.AIModel}>
@@ -327,17 +308,10 @@ export function SdPanel() {
         </div>
       </ControlParamItem>
       <ControlParam
-        columns={currentModel.params(params) as any[]}
+        columns={getParams?.(currentModel, params) as any[]}
         data={params}
         onChange={handleValueChange}
       ></ControlParam>
-      <IconButton
-        text={Locale.SdPanel.Submit}
-        type="primary"
-        style={{ marginTop: "20px" }}
-        shadow
-        onClick={handleSubmit}
-      ></IconButton>
     </>
   );
 }
diff --git a/app/components/sd/sd-sidebar.tsx b/app/components/sd/sd-sidebar.tsx
index 93909218fa0..fcb97d300de 100644
--- a/app/components/sd/sd-sidebar.tsx
+++ b/app/components/sd/sd-sidebar.tsx
@@ -17,6 +17,10 @@ import {
   useHotKey,
 } from "@/app/components/sidebar";
 
+import { getParams, getModelParamBasicData } from "./sd-panel";
+import { useSdStore } from "@/app/store/sd";
+import { showToast } from "@/app/components/ui-lib";
+
 const SdPanel = dynamic(
   async () => (await import("@/app/components/sd")).SdPanel,
   {
@@ -28,6 +32,36 @@ export function SideBar(props: { className?: string }) {
   useHotKey();
   const { onDragStart, shouldNarrow } = useDragSideBar();
   const navigate = useNavigate();
+  const sdStore = useSdStore();
+  const currentModel = sdStore.currentModel;
+  const params = sdStore.currentParams;
+  const setParams = sdStore.setCurrentParams;
+
+  const handleSubmit = () => {
+    const columns = getParams?.(currentModel, params);
+    const reqParams: any = {};
+    for (let i = 0; i < columns.length; i++) {
+      const item = columns[i];
+      reqParams[item.value] = params[item.value] ?? null;
+      if (item.required) {
+        if (!reqParams[item.value]) {
+          showToast(Locale.SdPanel.ParamIsRequired(item.name));
+          return;
+        }
+      }
+    }
+    let data: any = {
+      model: currentModel.value,
+      model_name: currentModel.name,
+      status: "wait",
+      params: reqParams,
+      created_at: new Date().toLocaleString(),
+      img_data: "",
+    };
+    sdStore.sendTask(data, () => {
+      setParams(getModelParamBasicData(columns, params, true));
+    });
+  };
 
   return (
     <SideBarContainer
@@ -55,6 +89,14 @@ export function SideBar(props: { className?: string }) {
             <IconButton icon={<GithubIcon />} shadow />
           </a>
         }
+        secondaryAction={
+          <IconButton
+            text={Locale.SdPanel.Submit}
+            type="primary"
+            shadow
+            onClick={handleSubmit}
+          ></IconButton>
+        }
       />
     </SideBarContainer>
   );
diff --git a/app/components/sd/sd.tsx b/app/components/sd/sd.tsx
index 83326e5eb6e..9a14530462d 100644
--- a/app/components/sd/sd.tsx
+++ b/app/components/sd/sd.tsx
@@ -33,6 +33,7 @@ import {
 import { removeImage } from "@/app/utils/chat";
 import { SideBar } from "./sd-sidebar";
 import { WindowContent } from "@/app/components/home";
+import { params } from "./sd-panel";
 
 function getSdTaskStatus(item: any) {
   let s: string;
@@ -216,15 +217,53 @@ export function Sd() {
                                   title: locales.Sd.GenerateParams,
                                   children: (
                                     <div style={{ userSelect: "text" }}>
-                                      {Object.keys(item.params).map((key) => (
-                                        <div
-                                          key={key}
-                                          style={{ margin: "10px" }}
-                                        >
-                                          <strong>{key}: </strong>
-                                          {item.params[key]}
-                                        </div>
-                                      ))}
+                                      {Object.keys(item.params).map((key) => {
+                                        let label = key;
+                                        let value = item.params[key];
+                                        switch (label) {
+                                          case "prompt":
+                                            label = Locale.SdPanel.Prompt;
+                                            break;
+                                          case "negative_prompt":
+                                            label =
+                                              Locale.SdPanel.NegativePrompt;
+                                            break;
+                                          case "aspect_ratio":
+                                            label = Locale.SdPanel.AspectRatio;
+                                            break;
+                                          case "seed":
+                                            label = "Seed";
+                                            value = value || 0;
+                                            break;
+                                          case "output_format":
+                                            label = Locale.SdPanel.OutFormat;
+                                            value = value?.toUpperCase();
+                                            break;
+                                          case "style":
+                                            label = Locale.SdPanel.ImageStyle;
+                                            value = params
+                                              .find(
+                                                (item) =>
+                                                  item.value === "style",
+                                              )
+                                              ?.options?.find(
+                                                (item) => item.value === value,
+                                              )?.name;
+                                            break;
+                                          default:
+                                            break;
+                                        }
+
+                                        return (
+                                          <div
+                                            key={key}
+                                            style={{ margin: "10px" }}
+                                          >
+                                            <strong>{label}: </strong>
+                                            {value}
+                                          </div>
+                                        );
+                                      })}
                                     </div>
                                   ),
                                 });
diff --git a/app/store/sd.ts b/app/store/sd.ts
index 0d8693f4e56..4c8162b52f4 100644
--- a/app/store/sd.ts
+++ b/app/store/sd.ts
@@ -1,25 +1,40 @@
 import { StabilityPath, StoreKey } from "@/app/constant";
-import { showToast } from "@/app/components/ui-lib";
 import { getHeaders } from "@/app/client/api";
 import { createPersistStore } from "@/app/utils/store";
 import { nanoid } from "nanoid";
 import { uploadImage, base64Image2Blob } from "@/app/utils/chat";
+import { models, getModelParamBasicData } from "@/app/components/sd/sd-panel";
+
+const defaultModel = {
+  name: models[0].name,
+  value: models[0].value,
+};
+
+const defaultParams = getModelParamBasicData(models[0].params({}), {});
+
+const DEFAULT_SD_STATE = {
+  currentId: 0,
+  draw: [],
+  currentModel: defaultModel,
+  currentParams: defaultParams,
+};
 
 export const useSdStore = createPersistStore<
   {
     currentId: number;
     draw: any[];
+    currentModel: typeof defaultModel;
+    currentParams: any;
   },
   {
     getNextId: () => number;
     sendTask: (data: any, okCall?: Function) => void;
     updateDraw: (draw: any) => void;
+    setCurrentModel: (model: any) => void;
+    setCurrentParams: (data: any) => void;
   }
 >(
-  {
-    currentId: 0,
-    draw: [],
-  },
+  DEFAULT_SD_STATE,
   (set, _get) => {
     function get() {
       return {
@@ -111,6 +126,14 @@ export const useSdStore = createPersistStore<
           }
         });
       },
+      setCurrentModel(model: any) {
+        set({ currentModel: model });
+      },
+      setCurrentParams(data: any) {
+        set({
+          currentParams: data,
+        });
+      },
     };
 
     return methods;

From 908ee0060f4e3a84afb63a182eee49b774b7e812 Mon Sep 17 00:00:00 2001
From: Dogtiti <499960698@qq.com>
Date: Tue, 23 Jul 2024 22:23:34 +0800
Subject: [PATCH 33/43] chore: remove sd new

---
 app/components/home.tsx          |   6 +-
 app/components/sd/index.tsx      |   1 -
 app/components/sd/sd-new.tsx     | 127 -------------------------------
 app/components/sd/sd-sidebar.tsx |  58 +++++++++++---
 app/components/sd/sd.tsx         |  12 ++-
 5 files changed, 57 insertions(+), 147 deletions(-)
 delete mode 100644 app/components/sd/sd-new.tsx

diff --git a/app/components/home.tsx b/app/components/home.tsx
index 19ecb730f52..40929b240c9 100644
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -59,10 +59,6 @@ const Sd = dynamic(async () => (await import("./sd")).Sd, {
   loading: () => <Loading noLogo />,
 });
 
-const SdNew = dynamic(async () => (await import("./sd")).SdNew, {
-  loading: () => <Loading noLogo />,
-});
-
 export function useSwitchTheme() {
   const config = useAppConfig();
 
@@ -157,7 +153,7 @@ function Screen() {
   const renderContent = () => {
     if (isAuth) return <AuthPage />;
     if (isSd) return <Sd />;
-    if (isSdNew) return <SdNew />;
+    if (isSdNew) return <Sd />;
     return (
       <>
         <SideBar className={isHome ? styles["sidebar-show"] : ""} />
diff --git a/app/components/sd/index.tsx b/app/components/sd/index.tsx
index f2808bd3e9c..d442c22bcda 100644
--- a/app/components/sd/index.tsx
+++ b/app/components/sd/index.tsx
@@ -1,3 +1,2 @@
 export * from "./sd";
 export * from "./sd-panel";
-export * from "./sd-new";
diff --git a/app/components/sd/sd-new.tsx b/app/components/sd/sd-new.tsx
deleted file mode 100644
index 682cbfb2fd0..00000000000
--- a/app/components/sd/sd-new.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import homeStyles from "@/app/components/home.module.scss";
-
-import { IconButton } from "@/app/components/button";
-import GithubIcon from "@/app/icons/github.svg";
-import ReturnIcon from "@/app/icons/return.svg";
-import Locale from "@/app/locales";
-import HistoryIcon from "@/app/icons/history.svg";
-
-import { Path, REPO_URL } from "@/app/constant";
-
-import { useNavigate } from "react-router-dom";
-import dynamic from "next/dynamic";
-import {
-  SideBarContainer,
-  SideBarBody,
-  SideBarTail,
-  useDragSideBar,
-  useHotKey,
-} from "@/app/components/sidebar";
-import { getParams, getModelParamBasicData } from "./sd-panel";
-import { useSdStore } from "@/app/store/sd";
-import { showToast } from "@/app/components/ui-lib";
-
-const SdPanel = dynamic(
-  async () => (await import("@/app/components/sd")).SdPanel,
-  {
-    loading: () => null,
-  },
-);
-
-export function SdNew() {
-  useHotKey();
-  const { onDragStart, shouldNarrow } = useDragSideBar();
-  const navigate = useNavigate();
-  const sdStore = useSdStore();
-  const currentModel = sdStore.currentModel;
-  const params = sdStore.currentParams;
-  const setParams = sdStore.setCurrentParams;
-
-  const handleSubmit = () => {
-    const columns = getParams?.(currentModel, params);
-    const reqParams: any = {};
-    for (let i = 0; i < columns.length; i++) {
-      const item = columns[i];
-      reqParams[item.value] = params[item.value] ?? null;
-      if (item.required) {
-        if (!reqParams[item.value]) {
-          showToast(Locale.SdPanel.ParamIsRequired(item.name));
-          return;
-        }
-      }
-    }
-    let data: any = {
-      model: currentModel.value,
-      model_name: currentModel.name,
-      status: "wait",
-      params: reqParams,
-      created_at: new Date().toLocaleString(),
-      img_data: "",
-    };
-    sdStore.sendTask(data, () => {
-      setParams(getModelParamBasicData(columns, params, true));
-      navigate(Path.Sd);
-    });
-  };
-  return (
-    <SideBarContainer
-      onDragStart={onDragStart}
-      shouldNarrow={shouldNarrow}
-      className={homeStyles["sidebar-show"]}
-    >
-      <div
-        className="window-header"
-        data-tauri-drag-region
-        style={{
-          paddingLeft: 0,
-          paddingRight: 0,
-        }}
-      >
-        {
-          <div className="window-actions">
-            <div className="window-action-button">
-              <IconButton
-                icon={<ReturnIcon />}
-                bordered
-                title={Locale.Sd.Actions.ReturnHome}
-                onClick={() => navigate(Path.Home)}
-              />
-            </div>
-          </div>
-        }
-
-        <div className={`window-header-title`}>
-          <div className={`window-header-main-title`}>Stability</div>
-        </div>
-        <div className="window-actions">
-          <div className="window-action-button">
-            <IconButton
-              icon={<HistoryIcon />}
-              bordered
-              title={Locale.Sd.Actions.History}
-              onClick={() => navigate(Path.Sd)}
-            />
-          </div>
-        </div>
-      </div>
-      <SideBarBody>
-        <SdPanel />
-      </SideBarBody>
-      <SideBarTail
-        primaryAction={
-          <a href={REPO_URL} target="_blank" rel="noopener noreferrer">
-            <IconButton icon={<GithubIcon />} shadow />
-          </a>
-        }
-        secondaryAction={
-          <IconButton
-            text={Locale.SdPanel.Submit}
-            type="primary"
-            shadow
-            onClick={handleSubmit}
-          ></IconButton>
-        }
-      />
-    </SideBarContainer>
-  );
-}
diff --git a/app/components/sd/sd-sidebar.tsx b/app/components/sd/sd-sidebar.tsx
index fcb97d300de..4510a7c460f 100644
--- a/app/components/sd/sd-sidebar.tsx
+++ b/app/components/sd/sd-sidebar.tsx
@@ -2,6 +2,7 @@ import { IconButton } from "@/app/components/button";
 import GithubIcon from "@/app/icons/github.svg";
 import SDIcon from "@/app/icons/sd.svg";
 import ReturnIcon from "@/app/icons/return.svg";
+import HistoryIcon from "@/app/icons/history.svg";
 import Locale from "@/app/locales";
 
 import { Path, REPO_URL } from "@/app/constant";
@@ -20,6 +21,7 @@ import {
 import { getParams, getModelParamBasicData } from "./sd-panel";
 import { useSdStore } from "@/app/store/sd";
 import { showToast } from "@/app/components/ui-lib";
+import { useMobileScreen } from "@/app/utils";
 
 const SdPanel = dynamic(
   async () => (await import("@/app/components/sd")).SdPanel,
@@ -30,6 +32,7 @@ const SdPanel = dynamic(
 
 export function SideBar(props: { className?: string }) {
   useHotKey();
+  const isMobileScreen = useMobileScreen();
   const { onDragStart, shouldNarrow } = useDragSideBar();
   const navigate = useNavigate();
   const sdStore = useSdStore();
@@ -69,17 +72,50 @@ export function SideBar(props: { className?: string }) {
       shouldNarrow={shouldNarrow}
       {...props}
     >
-      <SideBarHeader
-        title={
-          <IconButton
-            icon={<ReturnIcon />}
-            bordered
-            title={Locale.Sd.Actions.ReturnHome}
-            onClick={() => navigate(Path.Home)}
-          />
-        }
-        logo={<SDIcon width={38} height={38} />}
-      ></SideBarHeader>
+      {isMobileScreen ? (
+        <div
+          className="window-header"
+          data-tauri-drag-region
+          style={{
+            paddingLeft: 0,
+            paddingRight: 0,
+          }}
+        >
+          <div className="window-actions">
+            <div className="window-action-button">
+              <IconButton
+                icon={<ReturnIcon />}
+                bordered
+                title={Locale.Sd.Actions.ReturnHome}
+                onClick={() => navigate(Path.Home)}
+              />
+            </div>
+          </div>
+          <SDIcon width={50} height={50} />
+          <div className="window-actions">
+            <div className="window-action-button">
+              <IconButton
+                icon={<HistoryIcon />}
+                bordered
+                title={Locale.Sd.Actions.History}
+                onClick={() => navigate(Path.SdNew)}
+              />
+            </div>
+          </div>
+        </div>
+      ) : (
+        <SideBarHeader
+          title={
+            <IconButton
+              icon={<ReturnIcon />}
+              bordered
+              title={Locale.Sd.Actions.ReturnHome}
+              onClick={() => navigate(Path.Home)}
+            />
+          }
+          logo={<SDIcon width={38} height={38} />}
+        ></SideBarHeader>
+      )}
       <SideBarBody>
         <SdPanel />
       </SideBarBody>
diff --git a/app/components/sd/sd.tsx b/app/components/sd/sd.tsx
index 9a14530462d..c4ed6fa3213 100644
--- a/app/components/sd/sd.tsx
+++ b/app/components/sd/sd.tsx
@@ -1,5 +1,7 @@
 import chatStyles from "@/app/components/chat.module.scss";
 import styles from "@/app/components/sd/sd.module.scss";
+import homeStyles from "@/app/components/home.module.scss";
+
 import { IconButton } from "@/app/components/button";
 import ReturnIcon from "@/app/icons/return.svg";
 import Locale from "@/app/locales";
@@ -10,7 +12,7 @@ import {
   getMessageTextContent,
   useMobileScreen,
 } from "@/app/utils";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { useAppConfig } from "@/app/store";
 import MinIcon from "@/app/icons/min.svg";
 import MaxIcon from "@/app/icons/max.svg";
@@ -24,6 +26,7 @@ import { useSdStore } from "@/app/store/sd";
 import locales from "@/app/locales";
 import LoadingIcon from "@/app/icons/three-dots.svg";
 import ErrorIcon from "@/app/icons/delete.svg";
+import SDIcon from "@/app/icons/sd.svg";
 import { Property } from "csstype";
 import {
   showConfirm,
@@ -88,12 +91,14 @@ function getSdTaskStatus(item: any) {
 export function Sd() {
   const isMobileScreen = useMobileScreen();
   const navigate = useNavigate();
+  const location = useLocation();
   const clientConfig = useMemo(() => getClientConfig(), []);
   const showMaxIcon = !isMobileScreen && !clientConfig?.isApp;
   const config = useAppConfig();
   const scrollRef = useRef<HTMLDivElement>(null);
   const sdStore = useSdStore();
   const [sdImages, setSdImages] = useState(sdStore.draw);
+  const isSd = location.pathname === Path.Sd;
 
   useEffect(() => {
     setSdImages(sdStore.draw);
@@ -101,7 +106,7 @@ export function Sd() {
 
   return (
     <>
-      <SideBar />
+      <SideBar className={isSd ? homeStyles["sidebar-show"] : ""} />
       <WindowContent>
         <div className={chatStyles.chat} key={"1"}>
           <div className="window-header" data-tauri-drag-region>
@@ -112,7 +117,7 @@ export function Sd() {
                     icon={<ReturnIcon />}
                     bordered
                     title={Locale.Chat.Actions.ChatList}
-                    onClick={() => navigate(Path.SdNew)}
+                    onClick={() => navigate(Path.Sd)}
                   />
                 </div>
               </div>
@@ -140,6 +145,7 @@ export function Sd() {
                   />
                 </div>
               )}
+              {isMobileScreen && <SDIcon width={50} height={50} />}
             </div>
           </div>
           <div className={chatStyles["chat-body"]} ref={scrollRef}>

From 3935c725c9741b5fda2b74ca79fef5c968983842 Mon Sep 17 00:00:00 2001
From: Dogtiti <499960698@qq.com>
Date: Tue, 23 Jul 2024 22:44:09 +0800
Subject: [PATCH 34/43] feat: sd setting

---
 app/components/settings.tsx | 41 +++++++++++++++++++++++++++++++++++++
 app/constant.ts             |  3 ++-
 app/locales/cn.ts           | 11 ++++++++++
 app/locales/en.ts           | 11 ++++++++++
 app/store/access.ts         |  6 ++++--
 app/store/sd.ts             |  4 ++--
 6 files changed, 71 insertions(+), 5 deletions(-)

diff --git a/app/components/settings.tsx b/app/components/settings.tsx
index e95722f1d28..bde3a792ae7 100644
--- a/app/components/settings.tsx
+++ b/app/components/settings.tsx
@@ -65,6 +65,7 @@ import {
   ServiceProvider,
   SlotID,
   UPDATE_URL,
+  Stability,
 } from "../constant";
 import { Prompt, SearchService, usePromptStore } from "../store/prompt";
 import { ErrorBoundary } from "./error";
@@ -1041,6 +1042,45 @@ export function Settings() {
     </>
   );
 
+  const stabilityConfigComponent = accessStore.provider ===
+    ServiceProvider.Stability && (
+    <>
+      <ListItem
+        title={Locale.Settings.Access.Stability.Endpoint.Title}
+        subTitle={
+          Locale.Settings.Access.Stability.Endpoint.SubTitle +
+          Stability.ExampleEndpoint
+        }
+      >
+        <input
+          type="text"
+          value={accessStore.stabilityUrl}
+          placeholder={Stability.ExampleEndpoint}
+          onChange={(e) =>
+            accessStore.update(
+              (access) => (access.stabilityUrl = e.currentTarget.value),
+            )
+          }
+        ></input>
+      </ListItem>
+      <ListItem
+        title={Locale.Settings.Access.Stability.ApiKey.Title}
+        subTitle={Locale.Settings.Access.Stability.ApiKey.SubTitle}
+      >
+        <PasswordInput
+          value={accessStore.stabilityApiKey}
+          type="text"
+          placeholder={Locale.Settings.Access.Stability.ApiKey.Placeholder}
+          onChange={(e) => {
+            accessStore.update(
+              (access) => (access.stabilityApiKey = e.currentTarget.value),
+            );
+          }}
+        />
+      </ListItem>
+    </>
+  );
+
   return (
     <ErrorBoundary>
       <div className="window-header" data-tauri-drag-region>
@@ -1324,6 +1364,7 @@ export function Settings() {
                   {baiduConfigComponent}
                   {byteDanceConfigComponent}
                   {alibabaConfigComponent}
+                  {stabilityConfigComponent}
                 </>
               )}
             </>
diff --git a/app/constant.ts b/app/constant.ts
index 1065aa14a27..e5da3b9e1d2 100644
--- a/app/constant.ts
+++ b/app/constant.ts
@@ -116,8 +116,9 @@ export enum ModelProvider {
   Qwen = "Qwen",
 }
 
-export const StabilityPath = {
+export const Stability = {
   GeneratePath: "v2beta/stable-image/generate",
+  ExampleEndpoint: "https://api.stability.ai",
 };
 
 export const Anthropic = {
diff --git a/app/locales/cn.ts b/app/locales/cn.ts
index 6370cf76f8f..795c04de010 100644
--- a/app/locales/cn.ts
+++ b/app/locales/cn.ts
@@ -389,6 +389,17 @@ const cn = {
           SubTitle: "样例：",
         },
       },
+      Stability: {
+        ApiKey: {
+          Title: "接口密钥",
+          SubTitle: "使用自定义 Stability API Key",
+          Placeholder: "Stability API Key",
+        },
+        Endpoint: {
+          Title: "接口地址",
+          SubTitle: "样例：",
+        },
+      },
       CustomModel: {
         Title: "自定义模型名",
         SubTitle: "增加自定义模型可选项，使用英文逗号隔开",
diff --git a/app/locales/en.ts b/app/locales/en.ts
index 24784946c02..4327851732c 100644
--- a/app/locales/en.ts
+++ b/app/locales/en.ts
@@ -372,6 +372,17 @@ const en: LocaleType = {
           SubTitle: "Example: ",
         },
       },
+      Stability: {
+        ApiKey: {
+          Title: "Stability API Key",
+          SubTitle: "Use a custom Stability API Key",
+          Placeholder: "Stability API Key",
+        },
+        Endpoint: {
+          Title: "Endpoint Address",
+          SubTitle: "Example: ",
+        },
+      },
       CustomModel: {
         Title: "Custom Models",
         SubTitle: "Custom model options, seperated by comma",
diff --git a/app/store/access.ts b/app/store/access.ts
index 24d7e175ae9..a81fbd9875f 100644
--- a/app/store/access.ts
+++ b/app/store/access.ts
@@ -39,8 +39,6 @@ const DEFAULT_ALIBABA_URL = isApp
   ? DEFAULT_API_HOST + "/api/proxy/alibaba"
   : ApiPath.Alibaba;
 
-console.log("DEFAULT_ANTHROPIC_URL", DEFAULT_ANTHROPIC_URL);
-
 const DEFAULT_ACCESS_STATE = {
   accessCode: "",
   useCustomConfig: false,
@@ -80,6 +78,10 @@ const DEFAULT_ACCESS_STATE = {
   alibabaUrl: DEFAULT_ALIBABA_URL,
   alibabaApiKey: "",
 
+  //stability
+  stabilityUrl: "",
+  stabilityApiKey: "",
+
   // server config
   needCode: true,
   hideUserApiKey: false,
diff --git a/app/store/sd.ts b/app/store/sd.ts
index 4c8162b52f4..3c47ca57b97 100644
--- a/app/store/sd.ts
+++ b/app/store/sd.ts
@@ -1,4 +1,4 @@
-import { StabilityPath, StoreKey } from "@/app/constant";
+import { Stability, StoreKey } from "@/app/constant";
 import { getHeaders } from "@/app/client/api";
 import { createPersistStore } from "@/app/utils/store";
 import { nanoid } from "nanoid";
@@ -63,7 +63,7 @@ export const useSdStore = createPersistStore<
         }
         const headers = getHeaders();
         delete headers["Content-Type"];
-        fetch(`/api/stability/${StabilityPath.GeneratePath}/${data.model}`, {
+        fetch(`/api/stability/${Stability.GeneratePath}/${data.model}`, {
           method: "POST",
           headers: {
             ...headers,

From 2a1c05a0283539275b98387a2fe203301f122873 Mon Sep 17 00:00:00 2001
From: Dogtiti <499960698@qq.com>
Date: Wed, 24 Jul 2024 20:04:22 +0800
Subject: [PATCH 35/43] fix: bugs

---
 app/components/sd/sd-sidebar.tsx | 3 ++-
 app/components/sd/sd.tsx         | 1 -
 app/constant.ts                  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/sd/sd-sidebar.tsx b/app/components/sd/sd-sidebar.tsx
index 4510a7c460f..b49d7f7bbc0 100644
--- a/app/components/sd/sd-sidebar.tsx
+++ b/app/components/sd/sd-sidebar.tsx
@@ -63,6 +63,7 @@ export function SideBar(props: { className?: string }) {
     };
     sdStore.sendTask(data, () => {
       setParams(getModelParamBasicData(columns, params, true));
+      navigate(Path.SdNew);
     });
   };
 
@@ -113,7 +114,7 @@ export function SideBar(props: { className?: string }) {
               onClick={() => navigate(Path.Home)}
             />
           }
-          logo={<SDIcon width={38} height={38} />}
+          logo={<SDIcon width={38} height={"100%"} />}
         ></SideBarHeader>
       )}
       <SideBarBody>
diff --git a/app/components/sd/sd.tsx b/app/components/sd/sd.tsx
index c4ed6fa3213..f35d0e0cd57 100644
--- a/app/components/sd/sd.tsx
+++ b/app/components/sd/sd.tsx
@@ -80,7 +80,6 @@ function getSdTaskStatus(item: any) {
             });
           }}
         >
-          {" "}
           - {item.error}
         </span>
       )}
diff --git a/app/constant.ts b/app/constant.ts
index e5da3b9e1d2..4130d6704ad 100644
--- a/app/constant.ts
+++ b/app/constant.ts
@@ -87,7 +87,6 @@ export const REQUEST_TIMEOUT_MS = 60000;
 export const EXPORT_MESSAGE_CLASS_NAME = "export-markdown";
 
 export enum ServiceProvider {
-  Stability = "Stability",
   OpenAI = "OpenAI",
   Azure = "Azure",
   Google = "Google",
@@ -95,6 +94,7 @@ export enum ServiceProvider {
   Baidu = "Baidu",
   ByteDance = "ByteDance",
   Alibaba = "Alibaba",
+  Stability = "Stability",
 }
 
 // Google API safety settings, see https://ai.google.dev/gemini-api/docs/safety-settings

From fd441d9303b9d77bf21e9e93c19e31f4e36b3b7f Mon Sep 17 00:00:00 2001
From: Dogtiti <499960698@qq.com>
Date: Wed, 24 Jul 2024 20:41:41 +0800
Subject: [PATCH 36/43] feat: discovery icon

---
 app/components/chat.tsx    | 7 +++++++
 app/components/sidebar.tsx | 6 +++---
 app/icons/discovery.svg    | 7 +++++++
 app/locales/cn.ts          | 3 +++
 app/locales/en.ts          | 3 +++
 5 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 app/icons/discovery.svg

diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index 9c2a6e47f27..19166c3419d 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -37,6 +37,7 @@ import AutoIcon from "../icons/auto.svg";
 import BottomIcon from "../icons/bottom.svg";
 import StopIcon from "../icons/pause.svg";
 import RobotIcon from "../icons/robot.svg";
+import PluginIcon from "../icons/plugin.svg";
 
 import {
   ChatMessage,
@@ -587,6 +588,12 @@ export function ChatActions(props: {
         icon={<RobotIcon />}
       />
 
+      <ChatAction
+        onClick={() => showToast(Locale.WIP)}
+        text={Locale.Plugin.Name}
+        icon={<PluginIcon />}
+      />
+
       {showModelSelector && (
         <Selector
           defaultSelectedValue={`${currentModel}@${currentProviderName}`}
diff --git a/app/components/sidebar.tsx b/app/components/sidebar.tsx
index 5db77170e3f..dbcf7c5db41 100644
--- a/app/components/sidebar.tsx
+++ b/app/components/sidebar.tsx
@@ -10,8 +10,8 @@ import AddIcon from "../icons/add.svg";
 import CloseIcon from "../icons/close.svg";
 import DeleteIcon from "../icons/delete.svg";
 import MaskIcon from "../icons/mask.svg";
-import PluginIcon from "../icons/plugin.svg";
 import DragIcon from "../icons/drag.svg";
+import DiscoveryIcon from "../icons/discovery.svg";
 
 import Locale from "../locales";
 
@@ -242,8 +242,8 @@ export function SideBar(props: { className?: string }) {
             shadow
           />
           <IconButton
-            icon={<PluginIcon />}
-            text={shouldNarrow ? undefined : Locale.Plugin.Name}
+            icon={<DiscoveryIcon />}
+            text={shouldNarrow ? undefined : Locale.Discovery.Name}
             className={styles["sidebar-bar-button"]}
             onClick={() => setShowPluginSelector(true)}
             shadow
diff --git a/app/icons/discovery.svg b/app/icons/discovery.svg
new file mode 100644
index 00000000000..d6b91346c86
--- /dev/null
+++ b/app/icons/discovery.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.2rem" height="1.2rem" viewBox="0 0 24 24">
+    <g fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+        <circle cx="12" cy="12" r="9" />
+        <path
+            d="M11.307 9.739L15 9l-.739 3.693a2 2 0 0 1-1.568 1.569L9 15l.739-3.693a2 2 0 0 1 1.568-1.568" />
+    </g>
+</svg>
\ No newline at end of file
diff --git a/app/locales/cn.ts b/app/locales/cn.ts
index 795c04de010..3de062eefa6 100644
--- a/app/locales/cn.ts
+++ b/app/locales/cn.ts
@@ -458,6 +458,9 @@ const cn = {
   Plugin: {
     Name: "插件",
   },
+  Discovery: {
+    Name: "发现",
+  },
   FineTuned: {
     Sysmessage: "你是一个助手",
   },
diff --git a/app/locales/en.ts b/app/locales/en.ts
index 4327851732c..5b42663cfe7 100644
--- a/app/locales/en.ts
+++ b/app/locales/en.ts
@@ -465,6 +465,9 @@ const en: LocaleType = {
   Plugin: {
     Name: "Plugin",
   },
+  Discovery: {
+    Name: "Discovery",
+  },
   FineTuned: {
     Sysmessage: "You are an assistant that",
   },

From 8f6e5d73a246bf00d944e98f655bce558226a485 Mon Sep 17 00:00:00 2001
From: lloydzhou <lloydzhou@qq.com>
Date: Thu, 25 Jul 2024 12:31:30 +0800
Subject: [PATCH 37/43] hotfix: can send sd task in client

---
 app/client/api.ts   | 22 +++++++++++++---------
 app/constant.ts     |  1 +
 app/store/access.ts |  6 +++++-
 app/store/sd.ts     | 36 +++++++++++++++++++++++++++---------
 4 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/app/client/api.ts b/app/client/api.ts
index c0c71480cd0..102a4220ff2 100644
--- a/app/client/api.ts
+++ b/app/client/api.ts
@@ -168,6 +168,19 @@ export class ClientApi {
   }
 }
 
+export function getBearerToken(
+  apiKey: string,
+  noBearer: boolean = false,
+): string {
+  return validString(apiKey)
+    ? `${noBearer ? "" : "Bearer "}${apiKey.trim()}`
+    : "";
+}
+
+export function validString(x: string): boolean {
+  return x?.length > 0;
+}
+
 export function getHeaders() {
   const accessStore = useAccessStore.getState();
   const chatStore = useChatStore.getState();
@@ -214,15 +227,6 @@ export function getHeaders() {
     return isAzure ? "api-key" : isAnthropic ? "x-api-key" : "Authorization";
   }
 
-  function getBearerToken(apiKey: string, noBearer: boolean = false): string {
-    return validString(apiKey)
-      ? `${noBearer ? "" : "Bearer "}${apiKey.trim()}`
-      : "";
-  }
-
-  function validString(x: string): boolean {
-    return x?.length > 0;
-  }
   const {
     isGoogle,
     isAzure,
diff --git a/app/constant.ts b/app/constant.ts
index 4130d6704ad..a6904c7a8b5 100644
--- a/app/constant.ts
+++ b/app/constant.ts
@@ -46,6 +46,7 @@ export enum ApiPath {
   Baidu = "/api/baidu",
   ByteDance = "/api/bytedance",
   Alibaba = "/api/alibaba",
+  Stability = "/api/stability",
 }
 
 export enum SlotID {
diff --git a/app/store/access.ts b/app/store/access.ts
index a81fbd9875f..a204d35c9c3 100644
--- a/app/store/access.ts
+++ b/app/store/access.ts
@@ -39,6 +39,10 @@ const DEFAULT_ALIBABA_URL = isApp
   ? DEFAULT_API_HOST + "/api/proxy/alibaba"
   : ApiPath.Alibaba;
 
+const DEFAULT_STABILITY_URL = isApp
+  ? DEFAULT_API_HOST + "/api/proxy/stability"
+  : ApiPath.Stability;
+
 const DEFAULT_ACCESS_STATE = {
   accessCode: "",
   useCustomConfig: false,
@@ -79,7 +83,7 @@ const DEFAULT_ACCESS_STATE = {
   alibabaApiKey: "",
 
   //stability
-  stabilityUrl: "",
+  stabilityUrl: DEFAULT_STABILITY_URL,
   stabilityApiKey: "",
 
   // server config
diff --git a/app/store/sd.ts b/app/store/sd.ts
index 3c47ca57b97..1bbc9d6089c 100644
--- a/app/store/sd.ts
+++ b/app/store/sd.ts
@@ -1,9 +1,15 @@
-import { Stability, StoreKey } from "@/app/constant";
-import { getHeaders } from "@/app/client/api";
+import {
+  Stability,
+  StoreKey,
+  ACCESS_CODE_PREFIX,
+  ApiPath,
+} from "@/app/constant";
+import { getBearerToken } from "@/app/client/api";
 import { createPersistStore } from "@/app/utils/store";
 import { nanoid } from "nanoid";
 import { uploadImage, base64Image2Blob } from "@/app/utils/chat";
 import { models, getModelParamBasicData } from "@/app/components/sd/sd-panel";
+import { useAccessStore } from "./access";
 
 const defaultModel = {
   name: models[0].name,
@@ -57,18 +63,30 @@ export const useSdStore = createPersistStore<
         okCall?.();
       },
       stabilityRequestCall(data: any) {
+        const accessStore = useAccessStore.getState();
+        let prefix = ApiPath.Stability;
+        let bearerToken = "";
+        if (accessStore.useCustomConfig) {
+          prefix = accessStore.stabilityUrl || ApiPath.Stability;
+          bearerToken = getBearerToken(accessStore.stabilityApiKey);
+        }
+        if (!bearerToken && accessStore.enabledAccessControl()) {
+          bearerToken = getBearerToken(
+            ACCESS_CODE_PREFIX + accessStore.accessCode,
+          );
+        }
+        const headers = {
+          Accept: "application/json",
+          Authorization: bearerToken,
+        };
+        const path = `${prefix}/${Stability.GeneratePath}/${data.model}`;
         const formData = new FormData();
         for (let paramsKey in data.params) {
           formData.append(paramsKey, data.params[paramsKey]);
         }
-        const headers = getHeaders();
-        delete headers["Content-Type"];
-        fetch(`/api/stability/${Stability.GeneratePath}/${data.model}`, {
+        fetch(path, {
           method: "POST",
-          headers: {
-            ...headers,
-            Accept: "application/json",
-          },
+          headers,
           body: formData,
         })
           .then((response) => response.json())

From 8f14de51087438639dd491c843deb18576ad50da Mon Sep 17 00:00:00 2001
From: lloydzhou <lloydzhou@qq.com>
Date: Thu, 25 Jul 2024 12:34:35 +0800
Subject: [PATCH 38/43] hotfix: ts check

---
 app/store/sd.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/store/sd.ts b/app/store/sd.ts
index 1bbc9d6089c..87e2c7f86fc 100644
--- a/app/store/sd.ts
+++ b/app/store/sd.ts
@@ -64,10 +64,10 @@ export const useSdStore = createPersistStore<
       },
       stabilityRequestCall(data: any) {
         const accessStore = useAccessStore.getState();
-        let prefix = ApiPath.Stability;
+        let prefix: string = ApiPath.Stability as string;
         let bearerToken = "";
         if (accessStore.useCustomConfig) {
-          prefix = accessStore.stabilityUrl || ApiPath.Stability;
+          prefix = accessStore.stabilityUrl || (ApiPath.Stability as string);
           bearerToken = getBearerToken(accessStore.stabilityApiKey);
         }
         if (!bearerToken && accessStore.enabledAccessControl()) {

From 6cc0a5a1a4ab28a3e85ed49453686004d6b3fbb3 Mon Sep 17 00:00:00 2001
From: lloydzhou <lloydzhou@qq.com>
Date: Thu, 25 Jul 2024 12:36:48 +0800
Subject: [PATCH 39/43] remove code

---
 app/constant.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/constant.ts b/app/constant.ts
index a6904c7a8b5..4e62ec9a48e 100644
--- a/app/constant.ts
+++ b/app/constant.ts
@@ -60,7 +60,6 @@ export enum FileName {
 }
 
 export enum StoreKey {
-  File = "chat-next-web-file",
   Chat = "chat-next-web-store",
   Access = "access-control",
   Config = "app-config",

From ecd78b3bdd9e06d6afb9313d645d47f132c4830c Mon Sep 17 00:00:00 2001
From: lloydzhou <lloydzhou@qq.com>
Date: Thu, 25 Jul 2024 17:23:21 +0800
Subject: [PATCH 40/43] hotfix cache upload image

---
 public/serviceWorker.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/public/serviceWorker.js b/public/serviceWorker.js
index c58b2cc5aba..bf7727b6795 100644
--- a/public/serviceWorker.js
+++ b/public/serviceWorker.js
@@ -15,6 +15,10 @@ self.addEventListener("install", function (event) {
   );
 });
 
+function jsonify(data) {
+  return Response(JSON.stringify(data), { headers: { 'content-type': 'application/json' } })
+}
+
 async function upload(request, url) {
   const formData = await request.formData()
   const file = formData.getAll('file')[0]
@@ -33,13 +37,13 @@ async function upload(request, url) {
       'server': 'ServiceWorker',
     }
   }))
-  return Response.json({ code: 0, data: fileUrl })
+  return jsonify({ code: 0, data: fileUrl })
 }
 
 async function remove(request, url) {
   const cache = await caches.open(CHATGPT_NEXT_WEB_FILE_CACHE)
   const res = await cache.delete(request.url)
-  return Response.json({ code: 0 })
+  return jsonify({ code: 0 })
 }
 
 self.addEventListener("fetch", (e) => {

From 6f0846b2afc34ef363171cd81bbbb70246fec243 Mon Sep 17 00:00:00 2001
From: lloydzhou <lloydzhou@qq.com>
Date: Thu, 25 Jul 2024 17:26:16 +0800
Subject: [PATCH 41/43] hotfix cache upload image

---
 public/serviceWorker.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/serviceWorker.js b/public/serviceWorker.js
index bf7727b6795..e88a4a4efe4 100644
--- a/public/serviceWorker.js
+++ b/public/serviceWorker.js
@@ -16,7 +16,7 @@ self.addEventListener("install", function (event) {
 });
 
 function jsonify(data) {
-  return Response(JSON.stringify(data), { headers: { 'content-type': 'application/json' } })
+  return new Response(JSON.stringify(data), { headers: { 'content-type': 'application/json' } })
 }
 
 async function upload(request, url) {

From 5c04d3c5eafe20aa9d799fe60ec9df49df251846 Mon Sep 17 00:00:00 2001
From: "Mr. Z" <112755085+ZTH7@users.noreply.github.com>
Date: Thu, 25 Jul 2024 17:59:15 +0800
Subject: [PATCH 42/43] Change method

---
 app/utils/model.ts | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/app/utils/model.ts b/app/utils/model.ts
index a0b0d6b65fa..cc924f40f01 100644
--- a/app/utils/model.ts
+++ b/app/utils/model.ts
@@ -99,13 +99,25 @@ export function collectModelTableWithDefaultModel(
 ) {
   let modelTable = collectModelTable(models, customModels);
   if (defaultModel && defaultModel !== "") {
-    modelTable[defaultModel] = {
-      ...modelTable[defaultModel],
-      name: modelTable[defaultModel]?.name ?? defaultModel,
-      displayName: modelTable[defaultModel]?.displayName ?? defaultModel,
-      available: true,
-      isDefault: true,
-    };
+    const [modelName, providerName] = defaultModel.split("@");
+    if (providerName && providerName != "") {
+      modelTable[defaultModel] = {
+        ...modelTable[defaultModel],
+        name: modelTable[defaultModel]?.name ?? modelName,
+        displayName:
+          modelTable[defaultModel]?.displayName ??
+          modelName + "(" + providerName + ")",
+        available: true,
+        isDefault: true,
+      };
+    } else {
+      for (const key of Object.keys(modelTable)) {
+        if (modelTable[key].available && key.startsWith(modelName)) {
+          modelTable[key].isDefault = true;
+          break;
+        }
+      }
+    }
   }
   return modelTable;
 }

From c4334d4e5fcca05b92bd6c8a6b5b25f187f1f540 Mon Sep 17 00:00:00 2001
From: "Mr. Z" <112755085+ZTH7@users.noreply.github.com>
Date: Thu, 25 Jul 2024 20:03:54 +0800
Subject: [PATCH 43/43] Update model.ts

---
 app/utils/model.ts | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/app/utils/model.ts b/app/utils/model.ts
index cc924f40f01..4de0eb8d96a 100644
--- a/app/utils/model.ts
+++ b/app/utils/model.ts
@@ -99,20 +99,13 @@ export function collectModelTableWithDefaultModel(
 ) {
   let modelTable = collectModelTable(models, customModels);
   if (defaultModel && defaultModel !== "") {
-    const [modelName, providerName] = defaultModel.split("@");
-    if (providerName && providerName != "") {
-      modelTable[defaultModel] = {
-        ...modelTable[defaultModel],
-        name: modelTable[defaultModel]?.name ?? modelName,
-        displayName:
-          modelTable[defaultModel]?.displayName ??
-          modelName + "(" + providerName + ")",
-        available: true,
-        isDefault: true,
-      };
+    if (defaultModel.includes('@')) {
+      if (defaultModel in modelTable) {
+        modelTable[defaultModel].isDefault = true;
+      }
     } else {
       for (const key of Object.keys(modelTable)) {
-        if (modelTable[key].available && key.startsWith(modelName)) {
+        if (modelTable[key].available && key.split('@').shift() == defaultModel) {
           modelTable[key].isDefault = true;
           break;
         }