mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2024-12-25 16:38:55 +01:00
build and pretty
This commit is contained in:
caranicas
parent
94a208bd91
commit
64d97a3232
@ -31,15 +31,13 @@ export const getSaveDirectory = async () => {
|
||||
return data[0];
|
||||
};
|
||||
|
||||
|
||||
export const getConfig = async () => {
|
||||
const response = await fetch(`${API_URL}/app_config`);
|
||||
console.log('getConfig response', response);
|
||||
console.log("getConfig response", response);
|
||||
const data = await response.json();
|
||||
return data;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* post a new request for an image
|
||||
*/
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { style, globalStyle } from "@vanilla-extract/css";
|
||||
|
||||
|
||||
export const DrawImageMain = style({
|
||||
position: "relative",
|
||||
width: "512px",
|
||||
@ -18,4 +17,4 @@ globalStyle(`${DrawImageMain} > img`, {
|
||||
position: "absolute",
|
||||
top: "0",
|
||||
left: "0",
|
||||
});
|
||||
});
|
||||
|
||||
@ -8,9 +8,8 @@ type DrawImageProps = {
|
||||
};
|
||||
|
||||
import {
|
||||
DrawImageMain
|
||||
} from //@ts-ignore
|
||||
'./drawImage.css.ts';
|
||||
DrawImageMain, //@ts-ignore
|
||||
} from "./drawImage.css.ts";
|
||||
|
||||
export default function DrawImage({ imageData }: DrawImageProps) {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
@ -26,7 +25,6 @@ export default function DrawImage({ imageData }: DrawImageProps) {
|
||||
nativeEvent: { offsetX, offsetY },
|
||||
} = e;
|
||||
|
||||
|
||||
setIsDrawing(true);
|
||||
};
|
||||
|
||||
@ -45,7 +43,6 @@ export default function DrawImage({ imageData }: DrawImageProps) {
|
||||
const _handleMouseMove = (
|
||||
e: React.MouseEvent<HTMLCanvasElement, MouseEvent>
|
||||
) => {
|
||||
|
||||
if (isDrawing) {
|
||||
const canvas = canvasRef.current;
|
||||
if (canvas) {
|
||||
@ -61,9 +58,9 @@ export default function DrawImage({ imageData }: DrawImageProps) {
|
||||
|
||||
// Sets the end of the lines drawn
|
||||
// to a round shape.
|
||||
ctx.lineCap = 'round';
|
||||
ctx.lineCap = "round";
|
||||
|
||||
ctx.strokeStyle = 'white';
|
||||
ctx.strokeStyle = "white";
|
||||
// The cursor to start drawing
|
||||
// moves to this coordinate
|
||||
ctx.moveTo(offsetX, offsetY);
|
||||
@ -76,7 +73,6 @@ export default function DrawImage({ imageData }: DrawImageProps) {
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@ -21,7 +21,6 @@ export default function SeedImage(_props: any) {
|
||||
|
||||
const isInPaintingMode = useImageCreate((state) => state.isInpainting);
|
||||
|
||||
|
||||
const setRequestOption = useImageCreate((state) => state.setRequestOptions);
|
||||
|
||||
const _startFileSelect = () => {
|
||||
@ -49,9 +48,8 @@ export default function SeedImage(_props: any) {
|
||||
|
||||
if (isInPaintingMode) {
|
||||
toggleInpainting();
|
||||
};
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={ImageInputDisplay}>
|
||||
@ -84,11 +82,10 @@ export default function SeedImage(_props: any) {
|
||||
<input
|
||||
type="checkbox"
|
||||
onChange={(e) => {
|
||||
toggleInpainting()
|
||||
toggleInpainting();
|
||||
}}
|
||||
checked={isInPaintingMode}
|
||||
>
|
||||
</input>
|
||||
></input>
|
||||
Use for Inpainting
|
||||
</label>
|
||||
</>
|
||||
|
||||
@ -31,7 +31,6 @@ export default function DisplayPanel() {
|
||||
|
||||
const isInPaintingMode = useImageCreate((state) => state.isInpainting);
|
||||
|
||||
|
||||
/* FETCHING */
|
||||
// @ts-ignore
|
||||
const { id, options } = useImageQueue((state) => state.firstInQueue());
|
||||
@ -65,7 +64,6 @@ export default function DisplayPanel() {
|
||||
);
|
||||
const completedIds = useImageQueue((state) => state.completedImageIds);
|
||||
|
||||
|
||||
const init_image = useImageCreate((state) =>
|
||||
state.getValueForRequestKey("init_image")
|
||||
);
|
||||
@ -107,10 +105,7 @@ export default function DisplayPanel() {
|
||||
<div className={displayPanel}>
|
||||
<AudioDing ref={dingRef}></AudioDing>
|
||||
<div className={displayContainer}>
|
||||
{isInPaintingMode &&
|
||||
<DrawImage imageData={init_image}></DrawImage>
|
||||
|
||||
}
|
||||
{isInPaintingMode && <DrawImage imageData={init_image}></DrawImage>}
|
||||
|
||||
{completedImages.length > 0 && (
|
||||
<>
|
||||
@ -145,9 +140,7 @@ export default function DisplayPanel() {
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -12,4 +12,3 @@ globalStyle(`${HeaderDisplayMain} > h1`, {
|
||||
fontWeight: "bold",
|
||||
marginRight: "10px",
|
||||
});
|
||||
|
||||
|
||||
@ -6,42 +6,37 @@ import { getConfig } from "../../../api";
|
||||
import StatusDisplay from "./statusDisplay";
|
||||
|
||||
import {
|
||||
HeaderDisplayMain
|
||||
} from //@ts-ignore
|
||||
'./headerDisplay.css.ts'
|
||||
|
||||
HeaderDisplayMain, //@ts-ignore
|
||||
} from "./headerDisplay.css.ts";
|
||||
|
||||
export default function HeaderDisplay() {
|
||||
|
||||
// but this will be moved to the status display when it is created
|
||||
const { status, data } = useQuery(["config"], getConfig)
|
||||
const { status, data } = useQuery(["config"], getConfig);
|
||||
|
||||
const [version, setVersion] = useState("2.1.0");
|
||||
const [release, setRelease] = useState('');
|
||||
const [release, setRelease] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
if (status === 'success') {
|
||||
if (status === "success") {
|
||||
// TODO also pass down the actual version
|
||||
const { update_branch } = data;
|
||||
|
||||
// just hard coded for now
|
||||
setVersion('v2.1');
|
||||
setVersion("v2.1");
|
||||
|
||||
if (update_branch === 'main') {
|
||||
setRelease('(stable)')
|
||||
}
|
||||
else {
|
||||
setRelease('(beta)')
|
||||
if (update_branch === "main") {
|
||||
setRelease("(stable)");
|
||||
} else {
|
||||
setRelease("(beta)");
|
||||
}
|
||||
}
|
||||
|
||||
}, [status, data, setVersion, setVersion])
|
||||
|
||||
}, [status, data, setVersion, setVersion]);
|
||||
|
||||
return (
|
||||
<div className={HeaderDisplayMain}>
|
||||
<h1>Stable Diffusion UI {version} {release} </h1>
|
||||
<h1>
|
||||
Stable Diffusion UI {version} {release}{" "}
|
||||
</h1>
|
||||
<StatusDisplay className="status-display"></StatusDisplay>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { style } from "@vanilla-extract/css";
|
||||
|
||||
|
||||
// TODO MOVE TO GLOBAL CSS
|
||||
export const StartingStatus = style({
|
||||
color: "#f0ad4e",
|
||||
|
||||
@ -6,7 +6,6 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
|
||||
|
||||
import { enableMapSet } from "immer";
|
||||
import Editor from "./pages/Home";
|
||||
|
||||
import App from "./app";
|
||||
|
||||
|
||||
@ -17,37 +17,37 @@ export type ImageRequest = {
|
||||
num_inference_steps: number;
|
||||
guidance_scale: number;
|
||||
width:
|
||||
| 128
|
||||
| 192
|
||||
| 256
|
||||
| 320
|
||||
| 384
|
||||
| 448
|
||||
| 512
|
||||
| 576
|
||||
| 640
|
||||
| 704
|
||||
| 768
|
||||
| 832
|
||||
| 896
|
||||
| 960
|
||||
| 1024;
|
||||
| 128
|
||||
| 192
|
||||
| 256
|
||||
| 320
|
||||
| 384
|
||||
| 448
|
||||
| 512
|
||||
| 576
|
||||
| 640
|
||||
| 704
|
||||
| 768
|
||||
| 832
|
||||
| 896
|
||||
| 960
|
||||
| 1024;
|
||||
height:
|
||||
| 128
|
||||
| 192
|
||||
| 256
|
||||
| 320
|
||||
| 384
|
||||
| 448
|
||||
| 512
|
||||
| 576
|
||||
| 640
|
||||
| 704
|
||||
| 768
|
||||
| 832
|
||||
| 896
|
||||
| 960
|
||||
| 1024;
|
||||
| 128
|
||||
| 192
|
||||
| 256
|
||||
| 320
|
||||
| 384
|
||||
| 448
|
||||
| 512
|
||||
| 576
|
||||
| 640
|
||||
| 704
|
||||
| 768
|
||||
| 832
|
||||
| 896
|
||||
| 960
|
||||
| 1024;
|
||||
// allow_nsfw: boolean;
|
||||
turbo: boolean;
|
||||
use_cpu: boolean;
|
||||
@ -219,7 +219,7 @@ export const useImageCreate = create<ImageCreateState>(
|
||||
produce((state) => {
|
||||
const isSeting =
|
||||
typeof state.getValueForRequestKey("use_face_correction") ===
|
||||
"string"
|
||||
"string"
|
||||
? null
|
||||
: "GFPGANv1.3";
|
||||
state.requestOptions.use_face_correction = isSeting;
|
||||
@ -289,7 +289,6 @@ export const useImageCreate = create<ImageCreateState>(
|
||||
state.isInpainting = !state.isInpainting;
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
},
|
||||
}))
|
||||
);
|
||||
|
||||
2
ui/frontend/dist/index.css
vendored
2
ui/frontend/dist/index.css
vendored
@ -1 +1 @@
|
||||
._1qevocv0{position:relative;width:100%;height:100%;pointer-events:auto;display:grid;background-color:#202124;grid-template-columns:400px 1fr;grid-template-rows:100px 1fr 50px;grid-template-areas:"header header header" "create display display" "create footer footer"}._1qevocv1{grid-area:header}._1qevocv2{grid-area:create;overflow:auto}._1qevocv3{grid-area:display;overflow:auto}._1qevocv4{grid-area:footer}@media screen and (max-width: 800px){._1qevocv0{grid-template-columns:1fr;grid-template-rows:100px 1fr 1fr 50px;grid-template-areas:"header" "create" "display" "footer"}}.starting{color:#f0ad4e}.error{color:#d9534f}.success{color:#5cb85c}.header-display{color:#fff;display:flex;align-items:center;justify-content:center}.status-display{margin-left:10px}._11d5x3d0{font-size:9pt;margin-bottom:5px;padding-left:10px;list-style-type:none}._11d5x3d1{padding-bottom:5px}._11d5x3d2{display:block;width:100%;text-align:left;background-color:transparent;color:#fff;border:0 none;cursor:pointer;padding:0;margin-bottom:10px}._11d5x3d2>h4{color:#e7ba71;margin-top:5px!important}.create-layout{padding:10px}.panel-box-toggle-btn{display:block;width:100%;text-align:left;background-color:transparent;color:#fff;border:0 none;cursor:pointer}.selected-tags{margin:10px 0}.selected-tags ul{margin:0;padding:0;display:flex;flex-wrap:wrap}li{list-style:none}.modifier-list{display:flex;flex-wrap:wrap;margin:0;padding:0}.modifierTag{display:inline-block;padding:6px;background-color:#264d8d;color:#fff;border-radius:5px;margin:5px}.modifierTag.selected{background-color:#830b79}.modifierTag p{margin:0}input[type=file]{color:transparent}.cjcdm20{position:relative;width:100%;height:100%;padding:0 10px}._1how28i0{position:relative;width:100%}._1how28i0>*{margin-bottom:10px}._1how28i1>p{font-size:1.5em;font-weight:700;margin-bottom:10px}._1how28i1>textarea{font-size:1.2em;font-weight:700;font-family:Arial;width:100%;resize:vertical;height:100px}._1rn4m8a0{display:flex}._1rn4m8a1{margin-bottom:5px;display:block}._1rn4m8a2{display:none}._1rn4m8a3{background-color:#264d8d;font-size:1.2em;font-weight:700;color:#fff;padding:8px;border-radius:5px}._1rn4m8a4{margin-left:20px}._1rn4m8a5{position:absolute;transform:translate(-50%) translateY(-35%);background:black;color:#fff;border:2pt solid #ccc;padding:0;cursor:pointer;outline:inherit;border-radius:8pt;width:16pt;height:16pt;font-family:Verdana;font-size:8pt}._1hnlbmt0{width:100%;background-color:#264d8d;font-size:1.5em;font-weight:700;color:#fff;padding:8px;border-radius:5px}._1hnlbmt0:disabled{background-color:#264d8d80}._1yvg52n0{position:relative;width:512px;height:512px}._1yvg52n1{width:512px;height:512px;background-color:#000;display:flex;justify-content:center;align-items:center}._1yvg52n2{width:512px;height:512px;object-fit:contain}._1yvg52n3{position:absolute;bottom:10px;left:10px}._1yvg52n4{position:absolute;bottom:10px;right:10px}._688lcr0{padding:10px}._688lcr1{display:flex;flex-direction:row;height:100%;width:100%;overflow:hidden}._688lcr2{width:512px;height:100%}._688lcr3{margin-left:30px;display:flex;flex:auto;flex-wrap:wrap}._688lcr4{margin:0 10px}.footer-display{color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}body{margin:0;min-width:320px;min-height:100vh}#root{position:absolute;top:0;left:0;width:100vw;height:100vh;overflow:hidden}*{box-sizing:border-box}p,h3,h4{margin:0}textarea{margin:0;padding:0;border:none}
|
||||
._1qevocv0{position:relative;width:100%;height:100%;pointer-events:auto;display:grid;background-color:#202124;grid-template-columns:400px 1fr;grid-template-rows:100px 1fr 50px;grid-template-areas:"header header header" "create display display" "create footer footer"}._1qevocv1{grid-area:header}._1qevocv2{grid-area:create;overflow:auto}._1qevocv3{grid-area:display;overflow:auto}._1qevocv4{grid-area:footer}@media screen and (max-width: 800px){._1qevocv0{grid-template-columns:1fr;grid-template-rows:100px 1fr 1fr 50px;grid-template-areas:"header" "create" "display" "footer"}}._1jo75h0{color:#f0ad4e}._1jo75h1{color:#d9534f}._1jo75h2{color:#5cb85c}._1v2cc580{color:#fff;display:flex;align-items:center;justify-content:center}._1v2cc580>h1{font-size:1.5em;font-weight:700;margin-right:10px}._11d5x3d0{font-size:9pt;margin-bottom:5px;padding-left:10px;list-style-type:none}._11d5x3d1{padding-bottom:5px}._11d5x3d2{display:block;width:100%;text-align:left;background-color:transparent;color:#fff;border:0 none;cursor:pointer;padding:0;margin-bottom:10px}._11d5x3d2>h4{color:#e7ba71;margin-top:5px!important}.create-layout{padding:10px}.panel-box-toggle-btn{display:block;width:100%;text-align:left;background-color:transparent;color:#fff;border:0 none;cursor:pointer}.selected-tags{margin:10px 0}.selected-tags ul{margin:0;padding:0;display:flex;flex-wrap:wrap}li{list-style:none}.modifier-list{display:flex;flex-wrap:wrap;margin:0;padding:0}.modifierTag{display:inline-block;padding:6px;background-color:#264d8d;color:#fff;border-radius:5px;margin:5px}.modifierTag.selected{background-color:#830b79}.modifierTag p{margin:0}input[type=file]{color:transparent}.cjcdm20{position:relative;width:100%;height:100%;padding:0 10px}._1how28i0{position:relative;width:100%}._1how28i0>*{margin-bottom:10px}._1how28i1>p{font-size:1.5em;font-weight:700;margin-bottom:10px}._1how28i1>textarea{font-size:1.2em;font-weight:700;font-family:Arial;width:100%;resize:vertical;height:100px}._1rn4m8a0{display:flex}._1rn4m8a1{margin-bottom:5px;display:block}._1rn4m8a2{display:none}._1rn4m8a3{background-color:#264d8d;font-size:1.2em;font-weight:700;color:#fff;padding:8px;border-radius:5px}._1rn4m8a4{margin-left:20px}._1rn4m8a5{position:absolute;transform:translate(-50%) translateY(-35%);background:black;color:#fff;border:2pt solid #ccc;padding:0;cursor:pointer;outline:inherit;border-radius:8pt;width:16pt;height:16pt;font-family:Verdana;font-size:8pt}._1hnlbmt0{width:100%;background-color:#264d8d;font-size:1.5em;font-weight:700;color:#fff;padding:8px;border-radius:5px}._1hnlbmt0:disabled{background-color:#264d8d80}._1yvg52n0{position:relative;width:512px;height:512px}._1yvg52n1{width:512px;height:512px;background-color:#000;display:flex;justify-content:center;align-items:center}._1yvg52n2{width:512px;height:512px;object-fit:contain}._1yvg52n3{position:absolute;bottom:10px;left:10px}._1yvg52n4{position:absolute;bottom:10px;right:10px}.fma0ug0{position:relative;width:512px;height:512px}.fma0ug0>canvas{position:absolute;top:0;left:0;opacity:.5}.fma0ug0>img{position:absolute;top:0;left:0}._688lcr0{padding:10px}._688lcr1{display:flex;flex-direction:row;height:100%;width:100%;overflow:hidden}._688lcr2{width:512px;height:100%}._688lcr3{margin-left:30px;display:flex;flex:auto;flex-wrap:wrap}._688lcr4{margin:0 10px}.footer-display{color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}body{margin:0;min-width:320px;min-height:100vh}#root{position:absolute;top:0;left:0;width:100vw;height:100vh;overflow:hidden}*{box-sizing:border-box}p,h3,h4{margin:0}textarea{margin:0;padding:0;border:none}
|
||||
|
||||
34
ui/frontend/dist/index.js
vendored
34
ui/frontend/dist/index.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user