mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2024-12-25 16:38:55 +01:00
Merge pull request #18 from caranicas/beta-react-display
Beta react display
This commit is contained in:
commit
691acb647e
File diff suppressed because it is too large
Load Diff
@ -1,7 +1,7 @@
|
||||
import { ReactLocation, Router } from "@tanstack/react-location";
|
||||
|
||||
import Home from "./components/layouts/Home";
|
||||
import Settings from "./components/layouts/Settings";
|
||||
import Home from "./pages/Home";
|
||||
import Settings from "./pages/Settings";
|
||||
|
||||
const location = new ReactLocation();
|
||||
|
||||
|
@ -2,7 +2,7 @@
|
||||
* basic server health
|
||||
*/
|
||||
|
||||
import type { ImageRequest } from "../store/imageCreateStore";
|
||||
import type { ImageRequest } from "../stores/imageCreateStore";
|
||||
|
||||
// when we are on dev we want to specifiy 9000 as the port for the backend
|
||||
// when we are on prod we want be realtive to the current url
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React from "react";
|
||||
import { useImageCreate } from "../../../store/imageCreateStore";
|
||||
import { useImageCreate } from "../../../stores/imageCreateStore";
|
||||
|
||||
type ModifierTagProps = {
|
||||
name: string;
|
||||
|
@ -1,49 +0,0 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import {
|
||||
AppLayout,
|
||||
HeaderLayout,
|
||||
CreateLayout,
|
||||
DisplayLayout,
|
||||
FooterLayout, // @ts-ignore
|
||||
} from "./home.css.ts";
|
||||
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { getSaveDirectory } from "../../../api";
|
||||
import { useImageCreate } from "../../../store/imageCreateStore";
|
||||
|
||||
// Todo - import components here
|
||||
import HeaderDisplay from "../../organisms/headerDisplay";
|
||||
import CreationPanel from "../../organisms/creationPanel";
|
||||
import DisplayPanel from "../../organisms/displayPanel";
|
||||
import FooterDisplay from "../../organisms/footerDisplay";
|
||||
|
||||
function Editor() {
|
||||
// Get the original save directory
|
||||
const setRequestOption = useImageCreate((state) => state.setRequestOptions);
|
||||
const { status, data } = useQuery(["SaveDir"], getSaveDirectory);
|
||||
useEffect(() => {
|
||||
if (status === "success") {
|
||||
setRequestOption("save_to_disk_path", data);
|
||||
}
|
||||
}, [setRequestOption, status, data]);
|
||||
|
||||
return (
|
||||
<div className={AppLayout}>
|
||||
<header className={HeaderLayout}>
|
||||
<HeaderDisplay></HeaderDisplay>
|
||||
</header>
|
||||
<nav className={CreateLayout}>
|
||||
<CreationPanel></CreationPanel>
|
||||
</nav>
|
||||
<main className={DisplayLayout}>
|
||||
<DisplayPanel></DisplayPanel>
|
||||
</main>
|
||||
<footer className={FooterLayout}>
|
||||
<FooterDisplay></FooterDisplay>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Editor;
|
@ -0,0 +1,92 @@
|
||||
// @ts-nocheck
|
||||
import React, { useRef, useEffect } from "react";
|
||||
|
||||
// https://github.com/embiem/react-canvas-draw
|
||||
|
||||
type DrawImageProps = {
|
||||
imageData: string;
|
||||
};
|
||||
|
||||
export default function DrawImage({ imageData }: DrawImageProps) {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
|
||||
const draw = (ctx: CanvasRenderingContext2D) => {
|
||||
ctx.fillStyle = "red";
|
||||
ctx.fillRect(0, 0, 100, 100);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current;
|
||||
if (canvas) {
|
||||
if (imageData) {
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (ctx) {
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
ctx.drawImage(img, 0, 0);
|
||||
};
|
||||
img.src = imageData;
|
||||
}
|
||||
} else {
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (ctx) {
|
||||
draw(ctx);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.log("canvas is null");
|
||||
}
|
||||
}, [imageData, draw]);
|
||||
|
||||
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;
|
||||
|
||||
console.log("x: " + x + " y: " + y);
|
||||
|
||||
ctx.moveTo(x, y);
|
||||
ctx.lineTo(x + 1, y + 1);
|
||||
ctx.stroke();
|
||||
}
|
||||
};
|
||||
|
||||
const _handleMouseUp = (
|
||||
e: React.MouseEvent<HTMLCanvasElement, MouseEvent>
|
||||
) => {
|
||||
console.log("mouse up");
|
||||
const canvas = canvasRef.current;
|
||||
if (canvas) {
|
||||
const ctx = canvas.getContext("2d");
|
||||
// if (ctx) {
|
||||
// draw(ctx);
|
||||
// }
|
||||
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>
|
||||
</div>
|
||||
);
|
||||
}
|
@ -0,0 +1,34 @@
|
||||
import { style } from "@vanilla-extract/css";
|
||||
|
||||
export const generatedImage = style({
|
||||
position: "relative",
|
||||
width: "512px",
|
||||
height: "512px",
|
||||
});
|
||||
|
||||
export const imageContain = style({
|
||||
width: "512px",
|
||||
height: "512px",
|
||||
backgroundColor: "black",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
});
|
||||
|
||||
export const image = style({
|
||||
width: "512px",
|
||||
height: "512px",
|
||||
objectFit: "contain",
|
||||
});
|
||||
|
||||
export const saveButton = style({
|
||||
position: "absolute",
|
||||
bottom: "10px",
|
||||
left: "10px",
|
||||
});
|
||||
|
||||
export const useButton = style({
|
||||
position: "absolute",
|
||||
bottom: "10px",
|
||||
right: "10px",
|
||||
});
|
@ -1,11 +1,14 @@
|
||||
import React, { useCallback } from "react";
|
||||
|
||||
import {
|
||||
ImageRequest,
|
||||
useImageCreate,
|
||||
} from "../../../../store/imageCreateStore";
|
||||
import { ImageRequest, useImageCreate } from "../../../stores/imageCreateStore";
|
||||
|
||||
import "./generatedImage.css";
|
||||
import {
|
||||
generatedImage,
|
||||
imageContain,
|
||||
image,
|
||||
saveButton,
|
||||
useButton, //@ts-ignore
|
||||
} from "./generatedImage.css.ts";
|
||||
|
||||
type GeneretaedImageProps = {
|
||||
imageData: string;
|
||||
@ -35,10 +38,8 @@ export default function GeneratedImage({
|
||||
//Most important information is the prompt
|
||||
let underscoreName = prompt.replace(/[^a-zA-Z0-9]/g, "_");
|
||||
underscoreName = underscoreName.substring(0, 100);
|
||||
|
||||
// name and the top level metadata
|
||||
let fileName = `${underscoreName}_Seed-${seed}_Steps-${num_inference_steps}_Guidance-${guidance_scale}`;
|
||||
|
||||
// Add the face correction and upscale
|
||||
if (use_face_correction) {
|
||||
fileName += `_FaceCorrection-${use_face_correction}`;
|
||||
@ -46,13 +47,10 @@ export default function GeneratedImage({
|
||||
if (use_upscale) {
|
||||
fileName += `_Upscale-${use_upscale}`;
|
||||
}
|
||||
|
||||
// Add the width and height
|
||||
fileName += `_${width}x${height}`;
|
||||
|
||||
// add the file extension
|
||||
fileName += `.png`;
|
||||
|
||||
// return fileName
|
||||
return fileName;
|
||||
};
|
||||
@ -71,14 +69,14 @@ export default function GeneratedImage({
|
||||
// className={[statusClass, className].join(" ")}
|
||||
|
||||
return (
|
||||
<div className={["generated-image", className].join(" ")}>
|
||||
<div className={[generatedImage, className].join(" ")}>
|
||||
<p>{metadata.prompt}</p>
|
||||
<div className="image-contain">
|
||||
<img src={imageData} alt="generated" />
|
||||
<button id="save-button" onClick={_handleSave}>
|
||||
<div className={imageContain}>
|
||||
<img className={image} src={imageData} alt="generated" />
|
||||
<button className={saveButton} onClick={_handleSave}>
|
||||
Save
|
||||
</button>
|
||||
<button id="use-button" onClick={_handleUseAsInput}>
|
||||
<button className={useButton} onClick={_handleUseAsInput}>
|
||||
Use as Input
|
||||
</button>
|
||||
</div>
|
@ -1,5 +1,7 @@
|
||||
import React, { useState } from "react";
|
||||
import { useImageCreate } from "../../../../../store/imageCreateStore";
|
||||
import React from "react";
|
||||
import { useImageCreate } from "../../../../../stores/imageCreateStore";
|
||||
|
||||
import { useCreateUI } from "../../creationPanelUIStore";
|
||||
|
||||
import {
|
||||
MenuButton, //@ts-ignore
|
||||
@ -16,11 +18,8 @@ export default function GpuSettings() {
|
||||
|
||||
const setRequestOption = useImageCreate((state) => state.setRequestOptions);
|
||||
|
||||
const [gpuOpen, setGpuOpen] = useState(false);
|
||||
|
||||
const toggleGpuOpen = () => {
|
||||
setGpuOpen(!gpuOpen);
|
||||
};
|
||||
const gpuOpen = useCreateUI((state) => state.isOpenAdvGPUSettings);
|
||||
const toggleGpuOpen = useCreateUI((state) => state.toggleAdvGPUSettings);
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
@ -1,5 +1,7 @@
|
||||
import React, { useState } from "react";
|
||||
import { useImageCreate } from "../../../../../store/imageCreateStore";
|
||||
import React from "react";
|
||||
import { useImageCreate } from "../../../../../stores/imageCreateStore";
|
||||
|
||||
import { useCreateUI } from "../../creationPanelUIStore";
|
||||
|
||||
import {
|
||||
MenuButton, //@ts-ignore
|
||||
@ -7,7 +9,6 @@ import {
|
||||
|
||||
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()
|
||||
);
|
||||
@ -24,17 +25,14 @@ export default function ImprovementSettings() {
|
||||
(state) => state.toggleUseFaceCorrection
|
||||
);
|
||||
|
||||
const toggleUseUpscaling = useImageCreate(
|
||||
(state) => state.toggleUseUpscaling
|
||||
);
|
||||
|
||||
const setRequestOption = useImageCreate((state) => state.setRequestOptions);
|
||||
|
||||
const [improvementOpen, setImprovementOpen] = useState(true);
|
||||
|
||||
const toggleImprovementOpen = () => {
|
||||
setImprovementOpen(!improvementOpen);
|
||||
};
|
||||
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,5 +1,6 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { useImageCreate } from "../../../../store/imageCreateStore";
|
||||
import { useCreateUI } from "../creationPanelUIStore";
|
||||
|
||||
import {
|
||||
AdvancedSettingsList,
|
||||
AdvancedSettingItem, // @ts-ignore
|
||||
@ -30,12 +31,12 @@ function SettingsList() {
|
||||
}
|
||||
|
||||
export default function AdvancedSettings() {
|
||||
const advancedSettingsIsOpen = useImageCreate(
|
||||
(state) => state.uiOptions.advancedSettingsIsOpen
|
||||
const advancedSettingsIsOpen = useCreateUI(
|
||||
(state) => state.isOpenAdvancedSettings
|
||||
);
|
||||
|
||||
const toggleAdvancedSettingsIsOpen = useImageCreate(
|
||||
(state) => state.toggleAdvancedSettingsIsOpen
|
||||
const toggleAdvancedSettingsIsOpen = useCreateUI(
|
||||
(state) => state.toggleAdvancedSettings
|
||||
);
|
||||
|
||||
return (
|
||||
|
@ -1,5 +1,6 @@
|
||||
import React, { useState } from "react";
|
||||
import { useImageCreate } from "../../../../../store/imageCreateStore";
|
||||
import { useImageCreate } from "../../../../../stores/imageCreateStore";
|
||||
import { useCreateUI } from "../../creationPanelUIStore";
|
||||
|
||||
import {
|
||||
MenuButton, //@ts-ignore
|
||||
@ -45,11 +46,10 @@ export default function PropertySettings() {
|
||||
state.getValueForRequestKey("height")
|
||||
);
|
||||
|
||||
const [propertyOpen, setPropertyOpen] = useState(true);
|
||||
|
||||
const togglePropertyOpen = () => {
|
||||
setPropertyOpen(!propertyOpen);
|
||||
};
|
||||
const propertyOpen = useCreateUI((state) => state.isOpenAdvPropertySettings);
|
||||
const togglePropertyOpen = useCreateUI(
|
||||
(state) => state.toggleAdvPropertySettings
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
@ -1,5 +1,7 @@
|
||||
import React, { useState } from "react";
|
||||
import { useImageCreate } from "../../../../../store/imageCreateStore";
|
||||
import React from "react";
|
||||
import { useImageCreate } from "../../../../../stores/imageCreateStore";
|
||||
|
||||
import { useCreateUI } from "../../creationPanelUIStore";
|
||||
|
||||
import {
|
||||
MenuButton, //@ts-ignore
|
||||
@ -23,11 +25,10 @@ export default function WorkflowSettings() {
|
||||
(state) => state.toggleSoundEnabled
|
||||
);
|
||||
|
||||
const [workflowOpen, setWorkflowOpen] = useState(true);
|
||||
|
||||
const toggleWorkflowOpen = () => {
|
||||
setWorkflowOpen(!workflowOpen);
|
||||
};
|
||||
const workflowOpen = useCreateUI((state) => state.isOpenAdvWorkflowSettings);
|
||||
const toggleWorkflowOpen = useCreateUI(
|
||||
(state) => state.toggleAdvWorkflowSettings
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React from "react";
|
||||
|
||||
import { useImageCreate } from "../../../../../store/imageCreateStore";
|
||||
import { useImageCreate } from "../../../../../stores/imageCreateStore";
|
||||
import ModifierTag from "../../../../atoms/modifierTag";
|
||||
|
||||
export default function ActiveTags() {
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React, { ChangeEvent } from "react";
|
||||
import { useImageCreate } from "../../../../store/imageCreateStore";
|
||||
import { useImageCreate } from "../../../../stores/imageCreateStore";
|
||||
|
||||
import {
|
||||
CreationBasicMain,
|
||||
|
@ -1,7 +1,7 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import { useImageCreate } from "../../../../../store/imageCreateStore";
|
||||
import { useImageQueue } from "../../../../../store/imageQueueStore";
|
||||
import { useImageCreate } from "../../../../../stores/imageCreateStore";
|
||||
import { useImageQueue } from "../../../../../stores/imageQueueStore";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
|
||||
import { useRandomSeed } from "../../../../../utils";
|
||||
@ -14,6 +14,7 @@ export default function MakeButton() {
|
||||
const parallelCount = useImageCreate((state) => state.parallelCount);
|
||||
const builtRequest = useImageCreate((state) => state.builtRequest);
|
||||
const addNewImage = useImageQueue((state) => state.addNewImage);
|
||||
const hasQueue = useImageQueue((state) => state.hasQueuedImages());
|
||||
const isRandomSeed = useImageCreate((state) => state.isRandomSeed());
|
||||
const setRequestOption = useImageCreate((state) => state.setRequestOptions);
|
||||
|
||||
@ -72,7 +73,11 @@ export default function MakeButton() {
|
||||
};
|
||||
|
||||
return (
|
||||
<button className={MakeButtonStyle} onClick={makeImages}>
|
||||
<button
|
||||
className={MakeButtonStyle}
|
||||
onClick={makeImages}
|
||||
disabled={hasQueue}
|
||||
>
|
||||
Make
|
||||
</button>
|
||||
);
|
||||
|
@ -8,4 +8,8 @@ export const MakeButtonStyle = style({
|
||||
color: "white",
|
||||
padding: "8px",
|
||||
borderRadius: "5px",
|
||||
|
||||
":disabled": {
|
||||
backgroundColor: "rgb(38, 77, 141, 0.5)",
|
||||
},
|
||||
});
|
||||
|
@ -8,7 +8,7 @@ import {
|
||||
ImageFixer,
|
||||
XButton, // @ts-ignore
|
||||
} from "./seedImage.css.ts";
|
||||
import { useImageCreate } from "../../../../../store/imageCreateStore";
|
||||
import { useImageCreate } from "../../../../../stores/imageCreateStore";
|
||||
|
||||
// TODO : figure out why this needs props to be passed in.. fixes a type error
|
||||
// when the component is used in the parent component
|
||||
|
@ -0,0 +1,92 @@
|
||||
import create from "zustand";
|
||||
import produce from "immer";
|
||||
import { persist } from "zustand/middleware";
|
||||
import { devtools } from "zustand/middleware";
|
||||
|
||||
export type ImageCreationUIOptions = {
|
||||
isOpenAdvancedSettings: boolean;
|
||||
isOpenAdvImprovementSettings: boolean;
|
||||
isOpenAdvPropertySettings: boolean;
|
||||
isOpenAdvWorkflowSettings: boolean;
|
||||
isOpenAdvGPUSettings: boolean;
|
||||
|
||||
isOpenImageModifier: boolean;
|
||||
imageMofidiersMap: object;
|
||||
|
||||
toggleAdvancedSettings: () => void;
|
||||
toggleAdvImprovementSettings: () => void;
|
||||
toggleAdvPropertySettings: () => void;
|
||||
toggleAdvWorkflowSettings: () => void;
|
||||
toggleAdvGPUSettings: () => void;
|
||||
|
||||
toggleImageModifier: () => void;
|
||||
// addImageModifier: (modifier: string) => void;
|
||||
};
|
||||
|
||||
export const useCreateUI = create<ImageCreationUIOptions>(
|
||||
//@ts-ignore
|
||||
persist(
|
||||
(set, get) => ({
|
||||
isOpenAdvancedSettings: false,
|
||||
isOpenAdvImprovementSettings: false,
|
||||
isOpenAdvPropertySettings: false,
|
||||
isOpenAdvWorkflowSettings: false,
|
||||
isOpenAdvGPUSettings: false,
|
||||
isOpenImageModifier: false,
|
||||
imageMofidiersMap: {},
|
||||
|
||||
toggleAdvancedSettings: () => {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.isOpenAdvancedSettings = !state.isOpenAdvancedSettings;
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
toggleAdvImprovementSettings: () => {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.isOpenAdvImprovementSettings =
|
||||
!state.isOpenAdvImprovementSettings;
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
toggleAdvPropertySettings: () => {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.isOpenAdvPropertySettings = !state.isOpenAdvPropertySettings;
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
toggleAdvWorkflowSettings: () => {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.isOpenAdvWorkflowSettings = !state.isOpenAdvWorkflowSettings;
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
toggleAdvGPUSettings: () => {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.isOpenAdvGPUSettings = !state.isOpenAdvGPUSettings;
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
toggleImageModifier: () => {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.isOpenImageModifier = !state.isOpenImageModifier;
|
||||
})
|
||||
);
|
||||
},
|
||||
}),
|
||||
{
|
||||
name: "createUI",
|
||||
// getStorage: () => localStorage,
|
||||
}
|
||||
)
|
||||
);
|
@ -3,7 +3,8 @@ import React, { useEffect, useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { loadModifications } from "../../../../api";
|
||||
|
||||
import { useImageCreate } from "../../../../store/imageCreateStore";
|
||||
import { useImageCreate } from "../../../../stores/imageCreateStore";
|
||||
import { useCreateUI } from "../creationPanelUIStore";
|
||||
|
||||
import ModifierTag from "../../../atoms/modifierTag";
|
||||
|
||||
@ -12,8 +13,6 @@ type ModifierListProps = {
|
||||
};
|
||||
|
||||
function ModifierList({ tags }: ModifierListProps) {
|
||||
// const setImageOptions = useImageCreate((state) => state.setImageOptions);
|
||||
// const imageOptions = useImageCreate((state) => state.imageOptions);
|
||||
return (
|
||||
<ul className="modifier-list">
|
||||
{tags.map((tag) => (
|
||||
@ -50,13 +49,22 @@ function ModifierGrouping({ title, tags }: ModifierGroupingProps) {
|
||||
}
|
||||
|
||||
export default function ImageModifers() {
|
||||
const { status, data } = useQuery(["modifications"], loadModifications);
|
||||
// const { status, data } = useQuery(["modifications"], loadModifications);
|
||||
|
||||
const imageModifierIsOpen = useImageCreate(
|
||||
(state) => state.uiOptions.imageModifierIsOpen
|
||||
);
|
||||
const toggleImageModifiersIsOpen = useImageCreate(
|
||||
(state) => state.toggleImageModifiersIsOpen
|
||||
// const imageModifierIsOpen = useImageCreate(
|
||||
// (state) => state.uiOptions.imageModifierIsOpen
|
||||
// );
|
||||
// const toggleImageModifiersIsOpen = useImageCreate(
|
||||
// (state) => state.toggleImageModifiersIsOpen
|
||||
// );
|
||||
|
||||
const allModifiers = useImageCreate((state) => state.allModifiers);
|
||||
|
||||
console.log("allModifiers", allModifiers);
|
||||
|
||||
const imageModifierIsOpen = useCreateUI((state) => state.isOpenImageModifier);
|
||||
const toggleImageModifiersIsOpen = useCreateUI(
|
||||
(state) => state.toggleImageModifier
|
||||
);
|
||||
|
||||
const handleClick = () => {
|
||||
@ -77,8 +85,9 @@ export default function ImageModifers() {
|
||||
{/* @ts-ignore */}
|
||||
{imageModifierIsOpen &&
|
||||
// @ts-ignore
|
||||
data.map((item, index) => {
|
||||
allModifiers.map((item, index) => {
|
||||
return (
|
||||
// @ts-ignore
|
||||
<ModifierGrouping key={item[0]} title={item[0]} tags={item[1]} />
|
||||
);
|
||||
})}
|
||||
|
@ -0,0 +1,18 @@
|
||||
const Mockifiers = [
|
||||
[
|
||||
"Drawing Style",
|
||||
[
|
||||
"Cel Shading",
|
||||
"Children's Drawing",
|
||||
"Crosshatch",
|
||||
"Detailed and Intricate",
|
||||
"Doodle",
|
||||
"Dot Art",
|
||||
"Line Art",
|
||||
"Sketch",
|
||||
],
|
||||
],
|
||||
["Visual Style", ["2D", "8-bit", "16-bit", "Anaglyph", "Anime", "CGI"]],
|
||||
];
|
||||
|
||||
export default Mockifiers;
|
@ -1,22 +0,0 @@
|
||||
.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;
|
||||
}
|
@ -0,0 +1,31 @@
|
||||
import { style } from "@vanilla-extract/css";
|
||||
|
||||
export const displayPanel = style({
|
||||
padding: "10px",
|
||||
// width: '512px',
|
||||
// height: '512px',
|
||||
});
|
||||
|
||||
export const displayContainer = style({
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
overflow: "hidden",
|
||||
});
|
||||
|
||||
export const CurrentDisplay = style({
|
||||
width: "512px",
|
||||
height: "100%",
|
||||
});
|
||||
|
||||
export const previousImages = style({
|
||||
marginLeft: "30px",
|
||||
display: "flex",
|
||||
flex: "auto",
|
||||
flexWrap: "wrap",
|
||||
});
|
||||
|
||||
export const previousImage = style({
|
||||
margin: "0 10px",
|
||||
});
|
@ -1,19 +0,0 @@
|
||||
.generated-image {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image-contain {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#save-button {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
#use-button {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
@ -1,7 +1,7 @@
|
||||
import React, { useEffect, useState, useRef } from "react";
|
||||
import { useImageQueue } from "../../../store/imageQueueStore";
|
||||
import { useImageQueue } from "../../../stores/imageQueueStore";
|
||||
|
||||
import { ImageRequest, useImageCreate } from "../../../store/imageCreateStore";
|
||||
import { ImageRequest, useImageCreate } from "../../../stores/imageCreateStore";
|
||||
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
|
||||
@ -9,9 +9,16 @@ import { doMakeImage, MakeImageKey } from "../../../api";
|
||||
|
||||
import AudioDing from "./audioDing";
|
||||
|
||||
import GeneratedImage from "./generatedImage";
|
||||
import GeneratedImage from "../../molecules/generatedImage";
|
||||
// import DrawImage from "../../molecules/drawImage";
|
||||
|
||||
import "./displayPanel.css";
|
||||
import {
|
||||
displayPanel,
|
||||
displayContainer,
|
||||
CurrentDisplay,
|
||||
previousImages,
|
||||
previousImage, //@ts-ignore
|
||||
} from "./displayPanel.css.ts";
|
||||
|
||||
type CompletedImagesType = {
|
||||
id: string;
|
||||
@ -89,18 +96,22 @@ export default function DisplayPanel() {
|
||||
}, [setCompletedImages, queryClient, completedIds]);
|
||||
|
||||
return (
|
||||
<div className="display-panel">
|
||||
<h1>Display Panel</h1>
|
||||
<div className={displayPanel}>
|
||||
<AudioDing ref={dingRef}></AudioDing>
|
||||
{completedImages.length > 0 && (
|
||||
<div id="display-container">
|
||||
<GeneratedImage
|
||||
key={completedImages[0].id}
|
||||
imageData={completedImages[0].data}
|
||||
metadata={completedImages[0].info}
|
||||
/>
|
||||
<div className={displayContainer}>
|
||||
<div className={CurrentDisplay}>
|
||||
{/* TODO Put the in painting controls here */}
|
||||
{/* <DrawImage imageData={completedImages[0].data}></DrawImage> */}
|
||||
|
||||
<div id="previous-images">
|
||||
<GeneratedImage
|
||||
key={completedImages[0].id}
|
||||
imageData={completedImages[0].data}
|
||||
metadata={completedImages[0].info}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={previousImages}>
|
||||
{completedImages.map((image, index) => {
|
||||
if (void 0 !== image) {
|
||||
if (index == 0) {
|
||||
@ -109,7 +120,7 @@ export default function DisplayPanel() {
|
||||
|
||||
return (
|
||||
<GeneratedImage
|
||||
className="previous-image"
|
||||
className={previousImage}
|
||||
key={image.id}
|
||||
imageData={image.data}
|
||||
metadata={image.info}
|
||||
|
@ -6,9 +6,9 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
|
||||
|
||||
import { enableMapSet } from "immer";
|
||||
import Editor from "./components/layouts/Home";
|
||||
import Editor from "./pages/Home";
|
||||
|
||||
import App from "./App";
|
||||
import App from "./app";
|
||||
|
||||
import "./styles.css.ts";
|
||||
|
||||
|
9
ui/frontend/build_src/src/pages/Experimental/index.tsx
Normal file
9
ui/frontend/build_src/src/pages/Experimental/index.tsx
Normal file
@ -0,0 +1,9 @@
|
||||
import React from "react";
|
||||
|
||||
export default function Beta() {
|
||||
return (
|
||||
<div>
|
||||
<h1>Beta</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
71
ui/frontend/build_src/src/pages/Home/index.tsx
Normal file
71
ui/frontend/build_src/src/pages/Home/index.tsx
Normal file
@ -0,0 +1,71 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import {
|
||||
AppLayout,
|
||||
HeaderLayout,
|
||||
CreateLayout,
|
||||
DisplayLayout,
|
||||
FooterLayout, // @ts-ignore
|
||||
} from "./home.css.ts";
|
||||
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { getSaveDirectory, loadModifications } from "../../api";
|
||||
import Mockifiers from "../../components/organisms/creationPanel/imageModifiers/modifiers.mock";
|
||||
|
||||
import { useImageCreate } from "../../stores/imageCreateStore";
|
||||
|
||||
// Todo - import components here
|
||||
import HeaderDisplay from "../../components/organisms/headerDisplay";
|
||||
import CreationPanel from "../../components/organisms/creationPanel";
|
||||
import DisplayPanel from "../../components/organisms/displayPanel";
|
||||
import FooterDisplay from "../../components/organisms/footerDisplay";
|
||||
|
||||
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 setAllModifiers = useImageCreate((state) => state.setAllModifiers);
|
||||
|
||||
useEffect(() => {
|
||||
if (statusSave === "success") {
|
||||
setRequestOption("save_to_disk_path", dataSave);
|
||||
}
|
||||
}, [setRequestOption, statusSave, dataSave]);
|
||||
|
||||
useEffect(() => {
|
||||
if (statusMods === "success") {
|
||||
setAllModifiers(dataMoads);
|
||||
} else if (statusMods === "error") {
|
||||
// @ts-ignore
|
||||
setAllModifiers(Mockifiers);
|
||||
}
|
||||
}, [setRequestOption, statusMods, dataMoads]);
|
||||
|
||||
return (
|
||||
<div className={AppLayout}>
|
||||
<header className={HeaderLayout}>
|
||||
<HeaderDisplay></HeaderDisplay>
|
||||
</header>
|
||||
<nav className={CreateLayout}>
|
||||
<CreationPanel></CreationPanel>
|
||||
</nav>
|
||||
<main className={DisplayLayout}>
|
||||
<DisplayPanel></DisplayPanel>
|
||||
</main>
|
||||
<footer className={FooterLayout}>
|
||||
<FooterDisplay></FooterDisplay>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Editor;
|
@ -5,10 +5,8 @@ import { devtools } from "zustand/middleware";
|
||||
import { useRandomSeed } from "../utils";
|
||||
|
||||
export type ImageCreationUiOptions = {
|
||||
advancedSettingsIsOpen: boolean;
|
||||
imageModifierIsOpen: boolean;
|
||||
isCheckedUseUpscaling: boolean;
|
||||
isCheckUseFaceCorrection: boolean;
|
||||
// isCheckedUseUpscaling: boolean;
|
||||
// isCheckUseFaceCorrection: boolean;
|
||||
isUseRandomSeed: boolean;
|
||||
isUseAutoSave: boolean;
|
||||
isSoundEnabled: boolean;
|
||||
@ -58,31 +56,36 @@ export type ImageRequest = {
|
||||
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;
|
||||
};
|
||||
|
||||
type ModifiersList = string[];
|
||||
type ModifiersOptions = string | ModifiersList[];
|
||||
type ModifiersOptionList = ModifiersOptions[];
|
||||
|
||||
interface ImageCreateState {
|
||||
parallelCount: number;
|
||||
requestOptions: ImageRequest;
|
||||
allModifiers: ModifiersOptionList;
|
||||
tags: string[];
|
||||
|
||||
setParallelCount: (count: number) => void;
|
||||
setRequestOptions: (key: keyof ImageRequest, value: any) => void;
|
||||
getValueForRequestKey: (key: keyof ImageRequest) => any;
|
||||
setAllModifiers: (modifiers: ModifiersOptionList) => void;
|
||||
|
||||
setModifierOptions: (key: string, value: any) => void;
|
||||
toggleTag: (tag: string) => void;
|
||||
hasTag: (tag: string) => boolean;
|
||||
selectedTags: () => string[];
|
||||
builtRequest: () => ImageRequest;
|
||||
|
||||
uiOptions: ImageCreationUiOptions;
|
||||
toggleAdvancedSettingsIsOpen: () => void;
|
||||
toggleImageModifiersIsOpen: () => void;
|
||||
toggleUseUpscaling: () => void;
|
||||
isUsingUpscaling: () => boolean;
|
||||
// isUsingUpscaling: () => boolean;
|
||||
toggleUseFaceCorrection: () => void;
|
||||
isUsingFaceCorrection: () => boolean;
|
||||
toggleUseRandomSeed: () => void;
|
||||
@ -118,8 +121,19 @@ 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) =>
|
||||
set(
|
||||
produce((state) => {
|
||||
@ -139,6 +153,14 @@ export const useImageCreate = create<ImageCreateState>(
|
||||
return get().requestOptions[key];
|
||||
},
|
||||
|
||||
setAllModifiers: (modifiers: ModifiersOptionList) => {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.allModifiers = modifiers;
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
toggleTag: (tag: string) => {
|
||||
set(
|
||||
produce((state) => {
|
||||
@ -180,96 +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',
|
||||
advancedSettingsIsOpen: false,
|
||||
imageModifierIsOpen: false,
|
||||
isCheckedUseUpscaling: false,
|
||||
isCheckUseFaceCorrection: true,
|
||||
isUseRandomSeed: true,
|
||||
isUseAutoSave: false,
|
||||
isSoundEnabled: false,
|
||||
},
|
||||
|
||||
toggleAdvancedSettingsIsOpen: () => {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.uiOptions.advancedSettingsIsOpen =
|
||||
!state.uiOptions.advancedSettingsIsOpen;
|
||||
localStorage.setItem(
|
||||
"ui:advancedSettingsIsOpen",
|
||||
state.uiOptions.advancedSettingsIsOpen
|
||||
);
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
toggleImageModifiersIsOpen: () => {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.uiOptions.imageModifierIsOpen =
|
||||
!state.uiOptions.imageModifierIsOpen;
|
||||
localStorage.setItem(
|
||||
"ui:imageModifierIsOpen",
|
||||
state.uiOptions.imageModifierIsOpen
|
||||
);
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
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: () => {
|
@ -1,8 +1,6 @@
|
||||
import create from "zustand";
|
||||
import produce from "immer";
|
||||
|
||||
// import { devtools } from 'zustand/middleware'
|
||||
|
||||
interface ImageDisplayState {
|
||||
imageOptions: Map<string, any>;
|
||||
currentImage: object | null;
|
2
ui/frontend/dist/index.css
vendored
2
ui/frontend/dist/index.css
vendored
@ -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}
|
||||
|
1250
ui/frontend/dist/index.html
vendored
1250
ui/frontend/dist/index.html
vendored
File diff suppressed because it is too large
Load Diff
28
ui/frontend/dist/index.js
vendored
28
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