7x31
/
ChatGPT-Next-Web
mirror of https://github.com/Yidadaa/ChatGPT-Next-Web.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: move sd config to store

This commit is contained in:
Dogtiti 2024-07-23 21:43:55 +08:00
parent 6b98b14179
commit 82e6fd7bb5
5 changed files with 274 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
app/components/sd/sd-new.tsx
View File

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

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

@ -1,14 +1,11 @@
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";
const sdCommonParams = (model: string, data: any) => {
return [
export const params = [
{
name: Locale.SdPanel.Prompt,
value: "prompt",
@ -55,7 +52,7 @@ const sdCommonParams = (model: string, data: any) => {
name: Locale.SdPanel.ImageStyle,
value: "style",
type: "select",
default: "3d",
default: "3d-model",
support: ["core"],
options: [
{ name: Locale.SdPanel.Styles.D3Model, value: "3d-model" },
@ -99,12 +96,15 @@ const sdCommonParams = (model: string, data: any) => {
{ name: "WebP", value: "webp" },
],
},
].filter((item) => {
];
const sdCommonParams = (model: string, data: any) => {
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>
</>
);
}

42
app/components/sd/sd-sidebar.tsx
View File

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

47
app/components/sd/sd.tsx
View File

@ -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) => (
{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>{key}: </strong>
{item.params[key]}
<strong>{label}: </strong>
{value}
</div>
))}
);
})}
</div>
),
});

33
app/store/sd.ts
View File

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