From 7fde9327a2ef0d9664276855f735ec6715063045 Mon Sep 17 00:00:00 2001 From: licoy Date: Tue, 2 Jul 2024 15:19:44 +0800 Subject: [PATCH] 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 33f152594..3cbec7b97 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>; + 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]} > @@ -135,7 +179,7 @@ export function ControlParam(props: { { - handleValueChange(item.value, e.currentTarget.value); + props.onChange(item.value, parseInt(e.currentTarget.value)); }} /> @@ -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); }} /> @@ -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 ( <> @@ -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() { ); diff --git a/app/locales/cn.ts b/app/locales/cn.ts index 892cc19fa..9fa0c9c2d 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 373307f06..b807ee8ec 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", + }, }, };