extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2024-11-23 00:33:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

persistent state and reduced unneeded boolean logic

Browse Source
This commit is contained in:
caranicas 2022-09-16 13:29:32 -04:00
parent cf12abfc7f
commit 80d9d88de1
19 changed files with 180 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
ui/frontend/build_src/src/components/molecules/drawImage/index.tsx
View File

@ -1,4 +1,5 @@
import React, {useRef, useEffect} from "react";
// @ts-nocheck
import React, { useRef, useEffect } from "react";
// https://github.com/embiem/react-canvas-draw
@ -6,9 +7,7 @@ type DrawImageProps = {
imageData: string;
};
export default function DrawImage({imageData}: DrawImageProps) {
export default function DrawImage({ imageData }: DrawImageProps) {
const canvasRef = useRef<HTMLCanvasElement>(null);
const draw = (ctx: CanvasRenderingContext2D) => {
@ -19,8 +18,7 @@ export default function DrawImage({imageData}: DrawImageProps) {
useEffect(() => {
const canvas = canvasRef.current;
if (canvas) {
if(imageData){
if (imageData) {
const ctx = canvas.getContext("2d");
if (ctx) {
const img = new Image();
@ -29,37 +27,40 @@ export default function DrawImage({imageData}: DrawImageProps) {
};
img.src = imageData;
}
}
else {
} else {
const ctx = canvas.getContext("2d");
if (ctx) {
draw(ctx);
}
}
}
else {
} else {
console.log("canvas is null");
}
}, [imageData, draw]);
const _handleMouseDown = (e: React.MouseEvent<HTMLCanvasElement, MouseEvent>) => {
const _handleMouseDown = (
e: React.MouseEvent<HTMLCanvasElement, MouseEvent>
) => {
console.log("mouse down", e);
const canvas = canvasRef.current;
if (canvas) {
const ctx = canvas.getContext("2d");
ctx.strokeStyle = '#ff0000';
const {nativeEvent: {x, y}} = e;
ctx.strokeStyle = "#ff0000";
const {
nativeEvent: { x, y },
} = e;
console.log("x: " + x + " y: " + y);
ctx.moveTo(x,y);
ctx.lineTo(x+1,y+1);
ctx.moveTo(x, y);
ctx.lineTo(x + 1, y + 1);
ctx.stroke();
}
};
const _handleMouseUp = (e: React.MouseEvent<HTMLCanvasElement, MouseEvent>) => {
const _handleMouseUp = (
e: React.MouseEvent<HTMLCanvasElement, MouseEvent>
) => {
console.log("mouse up");
const canvas = canvasRef.current;
if (canvas) {
@ -67,25 +68,25 @@ export default function DrawImage({imageData}: DrawImageProps) {
// if (ctx) {
// draw(ctx);
// }
const {nativeEvent: {x, y}} = e;
ctx.moveTo(x,y);
ctx.lineTo(x+1,y+1);
const {
nativeEvent: { x, y },
} = e;
ctx.moveTo(x, y);
ctx.lineTo(x + 1, y + 1);
ctx.stroke();
ctx.closePath();
}
};
return (
<div>
<canvas
ref={canvasRef}
width={512}
height={512}
onMouseDown={_handleMouseDown}
onMouseUp={_handleMouseUp}
></canvas>
<canvas
ref={canvasRef}
width={512}
height={512}
onMouseDown={_handleMouseDown}
onMouseUp={_handleMouseUp}
></canvas>
</div>
);
}
}

39
ui/frontend/build_src/src/components/molecules/generatedImage/generatedImage.css.ts
View File

@ -1,35 +1,34 @@
import { style } from '@vanilla-extract/css'
import { style } from "@vanilla-extract/css";
export const generatedImage = style({
position: 'relative',
width: '512px',
height: '512px',
position: "relative",
width: "512px",
height: "512px",
});
export const imageContain = style({
width:'512px',
height:'512px',
backgroundColor: 'black',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: "512px",
height: "512px",
backgroundColor: "black",
display: "flex",
justifyContent: "center",
alignItems: "center",
});
export const image = style({
width:'512px',
height:'512px',
objectFit: 'contain',
width: "512px",
height: "512px",
objectFit: "contain",
});
export const saveButton = style({
position: 'absolute',
bottom: '10px',
left: '10px',
position: "absolute",
bottom: "10px",
left: "10px",
});
export const useButton = style({
position: 'absolute',
bottom: '10px',
right: '10px',
position: "absolute",
bottom: "10px",
right: "10px",
});

10
ui/frontend/build_src/src/components/molecules/generatedImage/index.tsx
View File

@ -1,18 +1,14 @@
import React, { useCallback } from "react";
import {
ImageRequest,
useImageCreate,
} from "../../../stores/imageCreateStore";
import { ImageRequest, useImageCreate } from "../../../stores/imageCreateStore";
import {
generatedImage,
imageContain,
image,
saveButton,
useButton,
} from //@ts-ignore
"./generatedImage.css.ts";
useButton, //@ts-ignore
} from "./generatedImage.css.ts";
type GeneretaedImageProps = {
imageData: string;

2
ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/gpuSettings/index.tsx
View File

@ -1,10 +1,8 @@
import React from "react";
import { useImageCreate } from "../../../../../stores/imageCreateStore";
import { useCreateUI } from "../../creationPanelUIStore";
import {
MenuButton, //@ts-ignore
} from "../advancedsettings.css.ts";

21
ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx
View File

@ -3,14 +3,12 @@ import { useImageCreate } from "../../../../../stores/imageCreateStore";
import { useCreateUI } from "../../creationPanelUIStore";
import {
MenuButton, //@ts-ignore
} from "../advancedsettings.css.ts";
export default function ImprovementSettings() {
// these are conditionals that should be retired and inferred from the store
const isUsingUpscaling = useImageCreate((state) => state.isUsingUpscaling());
const isUsingFaceCorrection = useImageCreate((state) =>
state.isUsingFaceCorrection()
);
@ -27,14 +25,14 @@ export default function ImprovementSettings() {
(state) => state.toggleUseFaceCorrection
);
const toggleUseUpscaling = useImageCreate(
(state) => state.toggleUseUpscaling
);
const setRequestOption = useImageCreate((state) => state.setRequestOptions);
const improvementOpen = useCreateUI((state) => state.isOpenAdvImprovementSettings);
const toggleImprovementOpen = useCreateUI((state) => state.toggleAdvImprovementSettings);
const improvementOpen = useCreateUI(
(state) => state.isOpenAdvImprovementSettings
);
const toggleImprovementOpen = useCreateUI(
(state) => state.toggleAdvImprovementSettings
);
return (
<div>
@ -59,21 +57,16 @@ export default function ImprovementSettings() {
</div>
<div>
<label>
<input
type="checkbox"
checked={isUsingUpscaling}
onChange={(e) => toggleUseUpscaling()}
/>
Upscale the image to 4x resolution using
<select
id="upscale_model"
name="upscale_model"
disabled={!isUsingUpscaling}
value={use_upscale}
onChange={(e) => {
setRequestOption("use_upscale", e.target.value);
}}
>
<option value="">No Uscaling</option>
<option value="RealESRGAN_x4plus">RealESRGAN_x4plus</option>
<option value="RealESRGAN_x4plus_anime_6B">
RealESRGAN_x4plus_anime_6B

1
ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx
View File

@ -31,7 +31,6 @@ function SettingsList() {
}
export default function AdvancedSettings() {
const advancedSettingsIsOpen = useCreateUI(
(state) => state.isOpenAdvancedSettings
);

4
ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx
View File

@ -47,7 +47,9 @@ export default function PropertySettings() {
);
const propertyOpen = useCreateUI((state) => state.isOpenAdvPropertySettings);
const togglePropertyOpen = useCreateUI((state) => state.toggleAdvPropertySettings);
const togglePropertyOpen = useCreateUI(
(state) => state.toggleAdvPropertySettings
);
return (
<div>

6
ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/workflowSettings/index.tsx
View File

@ -26,9 +26,9 @@ export default function WorkflowSettings() {
);
const workflowOpen = useCreateUI((state) => state.isOpenAdvWorkflowSettings);
const toggleWorkflowOpen = useCreateUI((state) => state.toggleAdvWorkflowSettings);
const toggleWorkflowOpen = useCreateUI(
(state) => state.toggleAdvWorkflowSettings
);
return (
<div>

2
ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/makeButton.css.ts
View File

@ -9,7 +9,7 @@ export const MakeButtonStyle = style({
padding: "8px",
borderRadius: "5px",
':disabled': {
":disabled": {
backgroundColor: "rgb(38, 77, 141, 0.5)",
},
});

27
ui/frontend/build_src/src/components/organisms/creationPanel/creationPanelUIStore.ts
View File

@ -1,11 +1,9 @@
import create from "zustand";
import produce from "immer";
import { persist } from 'zustand/middleware'
import { persist } from "zustand/middleware";
import { devtools } from "zustand/middleware";
export type ImageCreationUIOptions = {
isOpenAdvancedSettings: boolean;
isOpenAdvImprovementSettings: boolean;
isOpenAdvPropertySettings: boolean;
@ -23,14 +21,12 @@ export type ImageCreationUIOptions = {
toggleImageModifier: () => void;
// addImageModifier: (modifier: string) => void;
};
export const useCreateUI = create<ImageCreationUIOptions>(
//@ts-ignore
persist(
(set, get ) => ({
(set, get) => ({
isOpenAdvancedSettings: false,
isOpenAdvImprovementSettings: false,
isOpenAdvPropertySettings: false,
@ -50,7 +46,8 @@ export const useCreateUI = create<ImageCreationUIOptions>(
toggleAdvImprovementSettings: () => {
set(
produce((state) => {
state.isOpenAdvImprovementSettings = !state.isOpenAdvImprovementSettings;
state.isOpenAdvImprovementSettings =
!state.isOpenAdvImprovementSettings;
})
);
},
@ -63,7 +60,7 @@ export const useCreateUI = create<ImageCreationUIOptions>(
);
},
toggleAdvWorkflowSettings: () => {
toggleAdvWorkflowSettings: () => {
set(
produce((state) => {
state.isOpenAdvWorkflowSettings = !state.isOpenAdvWorkflowSettings;
@ -86,10 +83,10 @@ export const useCreateUI = create<ImageCreationUIOptions>(
})
);
},
}),
{
name: 'createUI',
// getStorage: () => localStorage,
}
));
}),
{
name: "createUI",
// getStorage: () => localStorage,
}
)
);

7
ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx
View File

@ -6,7 +6,6 @@ import { loadModifications } from "../../../../api";
import { useImageCreate } from "../../../../stores/imageCreateStore";
import { useCreateUI } from "../creationPanelUIStore";
import ModifierTag from "../../../atoms/modifierTag";
type ModifierListProps = {
@ -14,7 +13,6 @@ type ModifierListProps = {
};
function ModifierList({ tags }: ModifierListProps) {
return (
<ul className="modifier-list">
{tags.map((tag) => (
@ -64,14 +62,11 @@ export default function ImageModifers() {
console.log("allModifiers", allModifiers);
const imageModifierIsOpen = useCreateUI(
(state) => state.isOpenImageModifier
);
const imageModifierIsOpen = useCreateUI((state) => state.isOpenImageModifier);
const toggleImageModifiersIsOpen = useCreateUI(
(state) => state.toggleImageModifier
);
const handleClick = () => {
toggleImageModifiersIsOpen();
};

18
ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/modifiers.mock.ts
View File

@ -9,20 +9,10 @@ const Mockifiers = [
"Doodle",
"Dot Art",
"Line Art",
"Sketch"
]
],
[
"Visual Style",
[
"2D",
"8-bit",
"16-bit",
"Anaglyph",
"Anime",
"CGI",
]
"Sketch",
],
],
["Visual Style", ["2D", "8-bit", "16-bit", "Anaglyph", "Anime", "CGI"]],
];
export default Mockifiers;
export default Mockifiers;

30
ui/frontend/build_src/src/components/organisms/displayPanel/displayPanel.css.ts
View File

@ -1,33 +1,31 @@
import { style } from '@vanilla-extract/css'
import { style } from "@vanilla-extract/css";
export const displayPanel = style({
padding: '10px',
padding: "10px",
// width: '512px',
// height: '512px',
});
export const displayContainer = style({
display: 'flex',
flexDirection: 'row',
height: '100%',
width: '100%',
overflow: 'hidden',
display: "flex",
flexDirection: "row",
height: "100%",
width: "100%",
overflow: "hidden",
});
export const CurrentDisplay = style({
width: '512px',
height:'100%',
width: "512px",
height: "100%",
});
export const previousImages = style({
marginLeft: '30px',
display: 'flex',
flex: 'auto',
flexWrap: 'wrap',
marginLeft: "30px",
display: "flex",
flex: "auto",
flexWrap: "wrap",
});
export const previousImage = style({
margin: '0 10px',
margin: "0 10px",
});

10
ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx
View File

@ -10,16 +10,15 @@ import { doMakeImage, MakeImageKey } from "../../../api";
import AudioDing from "./audioDing";
import GeneratedImage from "../../molecules/generatedImage";
import DrawImage from "../../molecules/drawImage";
// import DrawImage from "../../molecules/drawImage";
import {
displayPanel,
displayContainer,
CurrentDisplay,
previousImages,
previousImage
} from //@ts-ignore
"./displayPanel.css.ts";
previousImage, //@ts-ignore
} from "./displayPanel.css.ts";
type CompletedImagesType = {
id: string;
@ -101,7 +100,6 @@ export default function DisplayPanel() {
<AudioDing ref={dingRef}></AudioDing>
{completedImages.length > 0 && (
<div className={displayContainer}>
<div className={CurrentDisplay}>
{/* TODO Put the in painting controls here */}
{/* <DrawImage imageData={completedImages[0].data}></DrawImage> */}
@ -111,8 +109,6 @@ export default function DisplayPanel() {
imageData={completedImages[0].data}
metadata={completedImages[0].info}
/>
</div>
<div className={previousImages}>

3
ui/frontend/build_src/src/pages/Experimental/index.tsx
View File

@ -1,10 +1,9 @@
import React from "react";
export default function Beta() {
return (
<div>
<h1>Beta</h1>
</div>
);
};
}

13
ui/frontend/build_src/src/pages/Home/index.tsx
View File

@ -24,8 +24,14 @@ function Editor() {
// Get the original save directory
const setRequestOption = useImageCreate((state) => state.setRequestOptions);
const { status: statusSave, data: dataSave } = useQuery(["SaveDir"], getSaveDirectory);
const { status: statusMods, data: dataMoads } = useQuery(["modifications"], loadModifications);
const { status: statusSave, data: dataSave } = useQuery(
["SaveDir"],
getSaveDirectory
);
const { status: statusMods, data: dataMoads } = useQuery(
["modifications"],
loadModifications
);
const setAllModifiers = useImageCreate((state) => state.setAllModifiers);
@ -38,8 +44,7 @@ function Editor() {
useEffect(() => {
if (statusMods === "success") {
setAllModifiers(dataMoads);
}
else if (statusMods === "error") {
} else if (statusMods === "error") {
// @ts-ignore
setAllModifiers(Mockifiers);
}

137
ui/frontend/build_src/src/stores/imageCreateStore.ts
View File

@ -5,8 +5,8 @@ import { devtools } from "zustand/middleware";
import { useRandomSeed } from "../utils";
export type ImageCreationUiOptions = {
isCheckedUseUpscaling: boolean;
isCheckUseFaceCorrection: boolean;
// isCheckedUseUpscaling: boolean;
// isCheckUseFaceCorrection: boolean;
isUseRandomSeed: boolean;
isUseAutoSave: boolean;
isSoundEnabled: boolean;
@ -19,44 +19,44 @@ 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;
use_full_precision: boolean;
save_to_disk_path: null | string;
use_face_correction: null | "GFPGANv1.3";
use_upscale: null | "RealESRGAN_x4plus" | "RealESRGAN_x4plus_anime_6B";
use_upscale: null | "RealESRGAN_x4plus" | "RealESRGAN_x4plus_anime_6B" | "";
show_only_filtered_image: boolean;
init_image: undefined | string;
prompt_strength: undefined | number;
@ -85,7 +85,7 @@ interface ImageCreateState {
uiOptions: ImageCreationUiOptions;
toggleUseUpscaling: () => void;
isUsingUpscaling: () => boolean;
// isUsingUpscaling: () => boolean;
toggleUseFaceCorrection: () => void;
isUsingFaceCorrection: () => boolean;
toggleUseRandomSeed: () => void;
@ -121,8 +121,17 @@ export const useImageCreate = create<ImageCreateState>(
show_only_filtered_image: true,
} as ImageRequest,
// selected tags
tags: [] as string[],
uiOptions: {
// TODO proper persistence of all UI / user settings centrally somewhere?
// localStorage.getItem('ui:advancedSettingsIsOpen') === 'true',
isUseRandomSeed: true,
isUseAutoSave: false,
isSoundEnabled: false,
},
allModifiers: [[[]]] as ModifiersOptionList,
setParallelCount: (count: number) =>
@ -152,7 +161,6 @@ export const useImageCreate = create<ImageCreateState>(
);
},
toggleTag: (tag: string) => {
set(
produce((state) => {
@ -194,70 +202,33 @@ export const useImageCreate = create<ImageCreateState>(
// TODO check this
request.save_to_disk_path = null;
}
// if we arent using face correction clear the face correction
if (!state.uiOptions.isCheckUseFaceCorrection) {
request.use_face_correction = null;
}
// a bit of a hack. figure out what a clean value to pass to the server is
// if we arent using upscaling clear the upscaling
if (!state.uiOptions.isCheckedUseUpscaling) {
if (request.use_upscale === "") {
request.use_upscale = null;
}
return request;
},
uiOptions: {
// TODO proper persistence of all UI / user settings centrally somewhere?
// localStorage.getItem('ui:advancedSettingsIsOpen') === 'true',
isCheckedUseUpscaling: false,
isCheckUseFaceCorrection: true,
isUseRandomSeed: true,
isUseAutoSave: false,
isSoundEnabled: false,
},
toggleUseUpscaling: () => {
set(
produce((state) => {
state.uiOptions.isCheckedUseUpscaling =
!state.uiOptions.isCheckedUseUpscaling;
state.requestOptions.use_upscale = state.uiOptions
.isCheckedUseUpscaling
? "RealESRGAN_x4plus"
: undefined;
localStorage.setItem(
"ui:isCheckedUseUpscaling",
state.uiOptions.isCheckedUseUpscaling
);
})
);
},
isUsingUpscaling: () => {
return get().uiOptions.isCheckedUseUpscaling;
},
toggleUseFaceCorrection: () => {
set(
produce((state) => {
state.uiOptions.isCheckUseFaceCorrection =
!state.uiOptions.isCheckUseFaceCorrection;
state.use_face_correction = state.uiOptions.isCheckUseFaceCorrection
? "GFPGANv1.3"
: null;
// localStorage.setItem(
// "ui:isCheckUseFaceCorrection",
// state.uiOptions.isCheckUseFaceCorrection
// );
const isSeting =
typeof state.getValueForRequestKey("use_face_correction") ===
"string"
? null
: "GFPGANv1.3";
state.requestOptions.use_face_correction = isSeting;
})
);
},
isUsingFaceCorrection: () => {
return get().uiOptions.isCheckUseFaceCorrection;
const isUsing =
typeof get().getValueForRequestKey("use_face_correction") === "string";
return isUsing;
},
toggleUseRandomSeed: () => {

2
ui/frontend/dist/index.css vendored
View File

@ -1 +1 @@
._1cjn8au0{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"}._1cjn8au1{grid-area:header}._1cjn8au2{grid-area:create;overflow:auto}._1cjn8au3{grid-area:display;overflow:auto}._1cjn8au4{grid-area:footer}@media screen and (max-width: 800px){._1cjn8au0{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}.generated-image,.image-contain{position:relative}#save-button{position:absolute;top:10px;left:10px}#use-button{position:absolute;top:10px;right:10px}.display-panel{padding:10px}#display-container{display:flex;flex-direction:row;height:100%;width:100%;overflow:hidden}#previous-images{margin-left:30px;display:flex;flex:auto;flex-wrap:wrap}.previous-image{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"}}.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}

28
ui/frontend/dist/index.js vendored
View File

File diff suppressed because one or more lines are too long