extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-02-03 12:09:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #13 from caranicas/beta-react-advanced-settings

Browse Source 
Beta react advanced settings
This commit is contained in:
caranicas 2022-09-15 15:38:46 -04:00 committed by GitHub
commit 0e5b01f897
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 514 additions and 350 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/advancedsettings.css.ts Normal file
View File

@ -0,0 +1,34 @@
import { style, globalStyle } from "@vanilla-extract/css";
export const AdvancedSettingsList = style({
// font-size: 9pt;
// margin-bottom: 5px;
// padding-left: 10px;
// list-style-type: none;
fontSize: "9pt",
marginBottom: "5px",
paddingLeft: "10px",
listStyleType: "none",
});
export const AdvancedSettingItem = style({
paddingBottom: "5px",
});
export const MenuButton = style({
display: "block",
width: "100%",
textAlign: "left",
backgroundColor: "transparent",
color: "#fff",
border: "0 none",
cursor: "pointer",
padding: "0",
marginBottom: "10px",
});
globalStyle(`${MenuButton}> h4`, {
color: "#e7ba71",
marginTop: "5px !important",
});

70
ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/gpuSettings/index.tsx Normal file
View File

@ -0,0 +1,70 @@
import React, { useState } from "react";
import { useImageCreate } from "../../../../../store/imageCreateStore";
import {
MenuButton, //@ts-ignore
} from "../advancedsettings.css.ts";
export default function GpuSettings() {
const turbo = useImageCreate((state) => state.getValueForRequestKey("turbo"));
const use_cpu = useImageCreate((state) =>
state.getValueForRequestKey("use_cpu")
);
const use_full_precision = useImageCreate((state) =>
state.getValueForRequestKey("use_full_precision")
);
const setRequestOption = useImageCreate((state) => state.setRequestOptions);
const [gpuOpen, setGpuOpen] = useState(false);
const toggleGpuOpen = () => {
setGpuOpen(!gpuOpen);
};
return (
<div>
<button type="button" className={MenuButton} onClick={toggleGpuOpen}>
<h4>GPU Settings</h4>
</button>
{gpuOpen && (
<>
<div>
<label>
<input
checked={turbo}
onChange={(e) => setRequestOption("turbo", e.target.checked)}
type="checkbox"
/>
Turbo mode (generates images faster, but uses an additional 1 GB
of GPU memory)
</label>
</div>
<div>
<label>
<input
type="checkbox"
checked={use_cpu}
onChange={(e) => setRequestOption("use_cpu", e.target.checked)}
/>
Use CPU instead of GPU (warning: this will be *very* slow)
</label>
</div>
<div>
<label>
<input
checked={use_full_precision}
onChange={(e) =>
setRequestOption("use_full_precision", e.target.checked)
}
type="checkbox"
/>
Use full precision (for GPU-only. warning: this will consume more
VRAM)
</label>
</div>
</>
)}
</div>
);
}

100
ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx Normal file
View File

@ -0,0 +1,100 @@
import React, { useState } from "react";
import { useImageCreate } from "../../../../../store/imageCreateStore";
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()
);
const use_upscale = useImageCreate((state) =>
state.getValueForRequestKey("use_upscale")
);
const show_only_filtered_image = useImageCreate((state) =>
state.getValueForRequestKey("show_only_filtered_image")
);
const toggleUseFaceCorrection = useImageCreate(
(state) => state.toggleUseFaceCorrection
);
const toggleUseUpscaling = useImageCreate(
(state) => state.toggleUseUpscaling
);
const setRequestOption = useImageCreate((state) => state.setRequestOptions);
const [improvementOpen, setImprovementOpen] = useState(true);
const toggleImprovementOpen = () => {
setImprovementOpen(!improvementOpen);
};
return (
<div>
<button
type="button"
className={MenuButton}
onClick={toggleImprovementOpen}
>
<h4>Improvement Settings</h4>
</button>
{improvementOpen && (
<>
<div>
<label>
<input
type="checkbox"
checked={isUsingFaceCorrection}
onChange={(e) => toggleUseFaceCorrection()}
/>
Fix incorrect faces and eyes (uses GFPGAN)
</label>
</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="RealESRGAN_x4plus">RealESRGAN_x4plus</option>
<option value="RealESRGAN_x4plus_anime_6B">
RealESRGAN_x4plus_anime_6B
</option>
</select>
</label>
</div>
<div>
<label>
<input
type="checkbox"
checked={show_only_filtered_image}
onChange={(e) =>
setRequestOption("show_only_filtered_image", e.target.checked)
}
/>
Show only filtered image
</label>
</div>
</>
)}
</div>
);
}

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

@ -1,343 +1,34 @@
import React, { useEffect } from "react";
import { useImageCreate } from "../../../../store/imageCreateStore";
// import "./advancedSettings.css";
import {
AdvancedSettingsList,
AdvancedSettingItem, // @ts-ignore
} from "./advancedsettings.css.ts";
// todo: move this someplace more global
const IMAGE_DIMENSIONS = [
{ value: 128, label: "128 (*)" },
{ value: 192, label: "192" },
{ value: 256, label: "256 (*)" },
{ value: 320, label: "320" },
{ value: 384, label: "384" },
{ value: 448, label: "448" },
{ value: 512, label: "512 (*)" },
{ value: 576, label: "576" },
{ value: 640, label: "640" },
{ value: 704, label: "704" },
{ value: 768, label: "768 (*)" },
{ value: 832, label: "832" },
{ value: 896, label: "896" },
{ value: 960, label: "960" },
{ value: 1024, label: "1024 (*)" },
];
import ImprovementSettings from "./improvementSettings";
import PropertySettings from "./propertySettings";
import WorkflowSettings from "./workflowSettings";
import GpuSettings from "./gpuSettings";
function SettingsList() {
const parallelCount = useImageCreate((state) => state.parallelCount);
const setParallelCount = useImageCreate((state) => state.setParallelCount);
const setRequestOption = useImageCreate((state) => state.setRequestOptions);
const toggleUseFaceCorrection = useImageCreate(
(state) => state.toggleUseFaceCorrection
);
const isUsingFaceCorrection = useImageCreate((state) =>
state.isUsingFaceCorrection()
);
const toggleUseUpscaling = useImageCreate(
(state) => state.toggleUseUpscaling
);
const isUsingUpscaling = useImageCreate((state) => state.isUsingUpscaling());
const toggleUseRandomSeed = useImageCreate(
(state) => state.toggleUseRandomSeed
);
const isRandomSeed = useImageCreate((state) => state.isRandomSeed());
const toggleUseAutoSave = useImageCreate((state) => state.toggleUseAutoSave);
const isUseAutoSave = useImageCreate((state) => state.isUseAutoSave());
const toggleSoundEnabled = useImageCreate(
(state) => state.toggleSoundEnabled
);
const isSoundEnabled = useImageCreate((state) => state.isSoundEnabled());
const use_upscale = useImageCreate((state) =>
state.getValueForRequestKey("use_upscale")
);
const show_only_filtered_image = useImageCreate((state) =>
state.getValueForRequestKey("show_only_filtered_image")
);
const seed = useImageCreate((state) => state.getValueForRequestKey("seed"));
const width = useImageCreate((state) => state.getValueForRequestKey("width"));
const num_outputs = useImageCreate((state) =>
state.getValueForRequestKey("num_outputs")
);
const height = useImageCreate((state) =>
state.getValueForRequestKey("height")
);
const steps = useImageCreate((state) =>
state.getValueForRequestKey("num_inference_steps")
);
const guidance_scale = useImageCreate((state) =>
state.getValueForRequestKey("guidance_scale")
);
const prompt_strength = useImageCreate((state) =>
state.getValueForRequestKey("prompt_strength")
);
const save_to_disk_path = useImageCreate((state) =>
state.getValueForRequestKey("save_to_disk_path")
);
const turbo = useImageCreate((state) => state.getValueForRequestKey("turbo"));
const use_cpu = useImageCreate((state) =>
state.getValueForRequestKey("use_cpu")
);
const use_full_precision = useImageCreate((state) =>
state.getValueForRequestKey("use_full_precision")
);
return (
<ul id="editor-settings-entries">
{/*IMAGE CORRECTION */}
<li>
<label>
<input
type="checkbox"
checked={isUsingFaceCorrection}
onChange={(e) => toggleUseFaceCorrection()}
/>
Fix incorrect faces and eyes (uses GFPGAN)
</label>
<ul className={AdvancedSettingsList}>
<li className={AdvancedSettingItem}>
<ImprovementSettings />
</li>
<li>
<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="RealESRGAN_x4plus">RealESRGAN_x4plus</option>
<option value="RealESRGAN_x4plus_anime_6B">
RealESRGAN_x4plus_anime_6B
</option>
</select>
</label>
<li className={AdvancedSettingItem}>
<PropertySettings />
</li>
<li>
<label>
<input
type="checkbox"
checked={show_only_filtered_image}
onChange={(e) =>
setRequestOption("show_only_filtered_image", e.target.checked)
}
/>
Show only filtered image
</label>
<li className={AdvancedSettingItem}>
<WorkflowSettings />
</li>
{/* SEED */}
<li>
<label>
Seed:
<input
size={10}
value={seed}
onChange={(e) => setRequestOption("seed", e.target.value)}
disabled={isRandomSeed}
placeholder="random"
/>
</label>
<label>
<input
type="checkbox"
checked={isRandomSeed}
onChange={(e) => toggleUseRandomSeed()}
/>{" "}
Random Image
</label>
</li>
{/* COUNT */}
<li>
<label>
Number of images to make:{" "}
<input
type="number"
value={num_outputs}
onChange={(e) =>
setRequestOption("num_outputs", parseInt(e.target.value, 10))
}
size={4}
/>
</label>
<label>
Generate in parallel:
<input
type="number"
value={parallelCount}
onChange={(e) => setParallelCount(parseInt(e.target.value, 10))}
size={4}
/>
</label>
</li>
{/* DIMENTIONS */}
<li>
<label>
Width:
<select
value={width}
onChange={(e) => setRequestOption("width", e.target.value)}
>
{IMAGE_DIMENSIONS.map((dimension) => (
<option
key={"width-option_" + dimension.value}
value={dimension.value}
>
{dimension.label}
</option>
))}
</select>
</label>
</li>
<li>
<label>
Height:
<select
value={height}
onChange={(e) => setRequestOption("height", e.target.value)}
>
{IMAGE_DIMENSIONS.map((dimension) => (
<option
key={"height-option_" + dimension.value}
value={dimension.value}
>
{dimension.label}
</option>
))}
</select>
</label>
</li>
{/* STEPS */}
<li>
<label>
Number of inference steps:{" "}
<input
value={steps}
onChange={(e) => {
setRequestOption("num_inference_steps", e.target.value);
}}
size={4}
/>
</label>
</li>
{/* GUIDANCE SCALE */}
<li>
<label>
Guidance Scale:
<input
value={guidance_scale}
onChange={(e) => setRequestOption("guidance_scale", e.target.value)}
type="range"
min="0"
max="20"
step=".1"
/>
</label>
<span>{guidance_scale}</span>
</li>
{/* PROMPT STRENGTH */}
<li className="mb-4">
<label>
Prompt Strength:{" "}
<input
value={prompt_strength}
onChange={(e) =>
// setImageOptions({ promptStrength: Number(e.target.value) })
setRequestOption("prompt_strength", e.target.value)
}
type="range"
min="0"
max="1"
step=".05"
/>
</label>
<span>{prompt_strength}</span>
</li>
{/* AUTO SAVE */}
<li>
<label>
<input
checked={isUseAutoSave}
onChange={(e) => toggleUseAutoSave()}
type="checkbox"
/>
Automatically save to{" "}
</label>
<label>
<input
value={save_to_disk_path}
onChange={(e) =>
setRequestOption("save_to_disk_path", e.target.value)
}
size={40}
disabled={!isUseAutoSave}
/>
<span className="visually-hidden">
Path on disk where images will be saved
</span>
</label>
</li>
{/* SOUND */}
<li>
<label>
<input
checked={isSoundEnabled}
onChange={(e) => toggleSoundEnabled()}
type="checkbox"
/>
Play sound on task completion
</label>
</li>
{/* GENERATE */}
<li>
<label>
<input
checked={turbo}
onChange={(e) => setRequestOption("turbo", e.target.checked)}
type="checkbox"
/>
Turbo mode (generates images faster, but uses an additional 1 GB of
GPU memory)
</label>
</li>
<li>
<label>
<input
type="checkbox"
checked={use_cpu}
onChange={(e) => setRequestOption("use_cpu", e.target.checked)}
/>
Use CPU instead of GPU (warning: this will be *very* slow)
</label>
</li>
<li>
<label>
<input
checked={use_full_precision}
onChange={(e) =>
setRequestOption("use_full_precision", e.target.checked)
}
type="checkbox"
/>
Use full precision (for GPU-only. warning: this will consume more
VRAM)
</label>
<li className={AdvancedSettingItem}>
<GpuSettings />
</li>
</ul>
);
}
// {/* <!-- <li><input id="allow_nsfw" name="allow_nsfw" type="checkbox"/> <label htmlFor="allow_nsfw">Allow NSFW Content (You confirm you are above 18 years of age)</label></li> --> */}
export default function AdvancedSettings() {
const advancedSettingsIsOpen = useImageCreate(
(state) => state.uiOptions.advancedSettingsIsOpen
@ -354,7 +45,7 @@ export default function AdvancedSettings() {
onClick={toggleAdvancedSettingsIsOpen}
className="panel-box-toggle-btn"
>
<h4>Advanced Settings</h4>
<h3>Advanced Settings</h3>
</button>
{advancedSettingsIsOpen && <SettingsList />}
</div>

171
ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx Normal file
View File

@ -0,0 +1,171 @@
import React, { useState } from "react";
import { useImageCreate } from "../../../../../store/imageCreateStore";
import {
MenuButton, //@ts-ignore
} from "../advancedsettings.css.ts";
// todo: move this someplace more global
const IMAGE_DIMENSIONS = [
{ value: 128, label: "128 (*)" },
{ value: 192, label: "192" },
{ value: 256, label: "256 (*)" },
{ value: 320, label: "320" },
{ value: 384, label: "384" },
{ value: 448, label: "448" },
{ value: 512, label: "512 (*)" },
{ value: 576, label: "576" },
{ value: 640, label: "640" },
{ value: 704, label: "704" },
{ value: 768, label: "768 (*)" },
{ value: 832, label: "832" },
{ value: 896, label: "896" },
{ value: 960, label: "960" },
{ value: 1024, label: "1024 (*)" },
];
export default function PropertySettings() {
const setRequestOption = useImageCreate((state) => state.setRequestOptions);
const toggleUseRandomSeed = useImageCreate(
(state) => state.toggleUseRandomSeed
);
const isRandomSeed = useImageCreate((state) => state.isRandomSeed());
const seed = useImageCreate((state) => state.getValueForRequestKey("seed"));
const steps = useImageCreate((state) =>
state.getValueForRequestKey("num_inference_steps")
);
const guidance_scale = useImageCreate((state) =>
state.getValueForRequestKey("guidance_scale")
);
const prompt_strength = useImageCreate((state) =>
state.getValueForRequestKey("prompt_strength")
);
const width = useImageCreate((state) => state.getValueForRequestKey("width"));
const height = useImageCreate((state) =>
state.getValueForRequestKey("height")
);
const [propertyOpen, setPropertyOpen] = useState(true);
const togglePropertyOpen = () => {
setPropertyOpen(!propertyOpen);
};
return (
<div>
<button type="button" className={MenuButton} onClick={togglePropertyOpen}>
<h4>Property Settings</h4>
</button>
{propertyOpen && (
<>
<div>
<label>
Seed:
<input
size={10}
value={seed}
onChange={(e) => setRequestOption("seed", e.target.value)}
disabled={isRandomSeed}
placeholder="random"
/>
</label>
<label>
<input
type="checkbox"
checked={isRandomSeed}
onChange={(e) => toggleUseRandomSeed()}
/>{" "}
Random Image
</label>
</div>
<div>
<label>
Number of inference steps:{" "}
<input
value={steps}
onChange={(e) => {
setRequestOption("num_inference_steps", e.target.value);
}}
size={4}
/>
</label>
</div>
<div>
<label>
Guidance Scale:
<input
value={guidance_scale}
onChange={(e) =>
setRequestOption("guidance_scale", e.target.value)
}
type="range"
min="0"
max="20"
step=".1"
/>
</label>
<span>{guidance_scale}</span>
</div>
<div className="mb-4">
<label>
Prompt Strength:{" "}
<input
value={prompt_strength}
onChange={(e) =>
// setImageOptions({ promptStrength: Number(e.target.value) })
setRequestOption("prompt_strength", e.target.value)
}
type="range"
min="0"
max="1"
step=".05"
/>
</label>
<span>{prompt_strength}</span>
</div>
<div>
<label>
Width:
<select
value={width}
onChange={(e) => setRequestOption("width", e.target.value)}
>
{IMAGE_DIMENSIONS.map((dimension) => (
<option
key={"width-option_" + dimension.value}
value={dimension.value}
>
{dimension.label}
</option>
))}
</select>
</label>
</div>
<div>
<label>
Height:
<select
value={height}
onChange={(e) => setRequestOption("height", e.target.value)}
>
{IMAGE_DIMENSIONS.map((dimension) => (
<option
key={"height-option_" + dimension.value}
value={dimension.value}
>
{dimension.label}
</option>
))}
</select>
</label>
</div>
</>
)}
</div>
);
}

100
ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/workflowSettings/index.tsx Normal file
View File

@ -0,0 +1,100 @@
import React, { useState } from "react";
import { useImageCreate } from "../../../../../store/imageCreateStore";
import {
MenuButton, //@ts-ignore
} from "../advancedsettings.css.ts";
export default function WorkflowSettings() {
const num_outputs = useImageCreate((state) =>
state.getValueForRequestKey("num_outputs")
);
const parallelCount = useImageCreate((state) => state.parallelCount);
const isUseAutoSave = useImageCreate((state) => state.isUseAutoSave());
const save_to_disk_path = useImageCreate((state) =>
state.getValueForRequestKey("save_to_disk_path")
);
const isSoundEnabled = useImageCreate((state) => state.isSoundEnabled());
const setRequestOption = useImageCreate((state) => state.setRequestOptions);
const setParallelCount = useImageCreate((state) => state.setParallelCount);
const toggleUseAutoSave = useImageCreate((state) => state.toggleUseAutoSave);
const toggleSoundEnabled = useImageCreate(
(state) => state.toggleSoundEnabled
);
const [workflowOpen, setWorkflowOpen] = useState(true);
const toggleWorkflowOpen = () => {
setWorkflowOpen(!workflowOpen);
};
return (
<div>
<button type="button" className={MenuButton} onClick={toggleWorkflowOpen}>
<h4>Workflow Settings</h4>
</button>
{workflowOpen && (
<>
<div>
<label>
Number of images to make:{" "}
<input
type="number"
value={num_outputs}
onChange={(e) =>
setRequestOption("num_outputs", parseInt(e.target.value, 10))
}
size={4}
/>
</label>
</div>
<div>
<label>
Generate in parallel:
<input
type="number"
value={parallelCount}
onChange={(e) => setParallelCount(parseInt(e.target.value, 10))}
size={4}
/>
</label>
</div>
<div>
<label>
<input
checked={isUseAutoSave}
onChange={(e) => toggleUseAutoSave()}
type="checkbox"
/>
Automatically save to{" "}
</label>
<label>
<input
value={save_to_disk_path}
onChange={(e) =>
setRequestOption("save_to_disk_path", e.target.value)
}
size={40}
disabled={!isUseAutoSave}
/>
<span className="visually-hidden">
Path on disk where images will be saved
</span>
</label>
</div>
<div>
<label>
<input
checked={isSoundEnabled}
onChange={(e) => toggleSoundEnabled()}
type="checkbox"
/>
Play sound on task completion
</label>
</div>
</>
)}
</div>
);
}

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

@ -64,7 +64,6 @@ export default function SeedImage(_props: any) {
{init_image && (
<>
<img src={init_image} width="100" height="100" />
<button className={XButton} onClick={_handleClearImage}>
X
</button>

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

@ -15,11 +15,8 @@ export default function CreationPanel() {
return (
<div className={CreationPaneMain}>
<BasicCreation></BasicCreation>
<div className="advanced-create">
<AdvancedSettings></AdvancedSettings>
<ImageModifiers></ImageModifiers>
</div>
<AdvancedSettings></AdvancedSettings>
<ImageModifiers></ImageModifiers>
</div>
);
}

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

@ -103,7 +103,6 @@ export default function DisplayPanel() {
<div id="previous-images">
{completedImages.map((image, index) => {
if (void 0 !== image) {
debugger;
if (index == 0) {
return null;
}

4
ui/frontend/build_src/src/components/organisms/footerDisplay/index.tsx
View File

@ -2,13 +2,15 @@ import React from "react";
import "./footerDisplay.css";
import { API_URL } from "../../../api";
export default function FooterDisplay() {
return (
<div id="footer" className="panel-box">
<p>
If you found this project useful and want to help keep it alive, please{" "}
<a href="https://ko-fi.com/cmdr2_stablediffusion_ui" target="_blank">
<img src="./kofi.png" id="coffeeButton" />
<img src={`${API_URL}/kofi.png`} id="coffeeButton" />
</a>{" "}
to help cover the cost of development and maintenance! Thank you for
your support!

3
ui/frontend/build_src/src/styles.css.ts
View File

@ -19,7 +19,8 @@ globalStyle(`*`, {
boxSizing: "border-box",
});
globalStyle(`p`, {
/** RESET */
globalStyle(`p, h3, h4`, {
margin: 0,
});

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

@ -1 +1 @@
._1jvuph00{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"}._1jvuph01{grid-area:header}._1jvuph02{grid-area:create;overflow:auto}._1jvuph03{grid-area:display;overflow:auto}._1jvuph04{grid-area:footer}@media screen and (max-width: 800px){._1jvuph00{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}.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{margin:0}textarea{margin:0;padding:0;border:none}
._1jvuph00{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"}._1jvuph01{grid-area:header}._1jvuph02{grid-area:create;overflow:auto}._1jvuph03{grid-area:display;overflow:auto}._1jvuph04{grid-area:footer}@media screen and (max-width: 800px){._1jvuph00{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}

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

File diff suppressed because one or more lines are too long