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

make pretty

Browse Source
This commit is contained in:
caranicas
2022-09-14 14:49:23 -04:00
parent 8158ead1a2
commit c1c4a2933e
36 changed files with 3936 additions and 3307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ui/frontend/build_src/src/components/creationPanel/advancedSettings/advancedSettings.css
View File

@ -1,3 +1,3 @@
input[size="4"] {
width: 4.5rem;
}
width: 4.5rem;
}

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

@ -1,4 +1,4 @@
import React, {useEffect} from "react";
import React, { useEffect } from "react";
import { useImageCreate } from "../../../store/imageCreateStore";
import "./advancedSettings.css";
@ -22,313 +22,319 @@ const IMAGE_DIMENSIONS = [
];
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 toggleUseFaceCorrection = useImageCreate(
(state) => state.toggleUseFaceCorrection
);
const isUsingFaceCorrection = useImageCreate((state) =>
state.isUsingFaceCorrection()
);
const toggleUseRandomSeed = useImageCreate((state) => state.toggleUseRandomSeed);
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 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')));
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>
</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}>
<option value="RealESRGAN_x4plus">RealESRGAN_x4plus</option>
<option value="RealESRGAN_x4plus_anime_6B">RealESRGAN_x4plus_anime_6B</option>
</select>
</label>
</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>
{/* 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}
/>
{/*IMAGE CORRECTION */}
<li>
<label>
<input
type="checkbox"
checked={isUsingFaceCorrection}
onChange={(e) => toggleUseFaceCorrection()}
/>
Fix incorrect faces and eyes (uses GFPGAN)
</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}
</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}
>
<option value="RealESRGAN_x4plus">RealESRGAN_x4plus</option>
<option value="RealESRGAN_x4plus_anime_6B">
RealESRGAN_x4plus_anime_6B
</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>
</ul>
)
</select>
</label>
</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>
{/* 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>
</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
);
@ -346,7 +352,7 @@ export default function AdvancedSettings() {
>
<h4>Advanced Settings</h4>
</button>
{advancedSettingsIsOpen && <SettingsList/>}
{advancedSettingsIsOpen && <SettingsList />}
</div>
);
}

54
ui/frontend/build_src/src/components/creationPanel/creationPanel.css
View File

@ -1,48 +1,48 @@
.panel-box-toggle-btn {
display: block;
width: 100%;
text-align: left;
background-color: transparent;
color: #fff;
border: 0 none;
cursor: pointer;
display: block;
width: 100%;
text-align: left;
background-color: transparent;
color: #fff;
border: 0 none;
cursor: pointer;
}
.selected-tags {
margin: 10px 0;
margin: 10px 0;
}
.selected-tags ul {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
li {
list-style: none;
list-style: none;
}
.modifier-list{
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
.modifier-list {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
.modifierTag {
display: inline-block;
padding: 6px;
background-color: rgb(38, 77, 141);
color: #fff;
border-radius: 5px;
margin: 5px;
display: inline-block;
padding: 6px;
background-color: rgb(38, 77, 141);
color: #fff;
border-radius: 5px;
margin: 5px;
}
.modifierTag.selected {
background-color: rgb(131, 11, 121);
background-color: rgb(131, 11, 121);
}
.modifierTag p {
margin: 0;
}
margin: 0;
}

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

@ -1,4 +1,4 @@
import React, {useEffect, useState} from "react";
import React, { useEffect, useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { loadModifications } from "../../../api";
@ -7,23 +7,22 @@ import { useImageCreate } from "../../../store/imageCreateStore";
import ModifierTag from "../modierTag";
type ModifierListProps = {
tags: string[];
}
};
function ModifierList({tags}: ModifierListProps) {
function ModifierList({ tags }: ModifierListProps) {
// const setImageOptions = useImageCreate((state) => state.setImageOptions);
// const imageOptions = useImageCreate((state) => state.imageOptions);
return(
return (
<ul className="modifier-list">
{tags.map((tag) => (
<li key={tag} >
<li key={tag}>
<ModifierTag name={tag} />
</li>
))}
</ul>
)
);
}
type ModifierGroupingProps = {
@ -31,13 +30,11 @@ type ModifierGroupingProps = {
tags: string[];
};
function ModifierGrouping({title, tags}: ModifierGroupingProps) {
function ModifierGrouping({ title, tags }: ModifierGroupingProps) {
// doing this localy for now, but could move to a store
// and persist if we wanted to
const [isExpanded, setIsExpanded] = useState(false);
const _toggleExpand = () => {
setIsExpanded(!isExpanded);
};
@ -53,7 +50,7 @@ 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
@ -62,7 +59,6 @@ export default function ImageModifers() {
(state) => state.toggleImageModifiersIsOpen
);
const handleClick = () => {
toggleImageModifiersIsOpen();
};
@ -79,11 +75,13 @@ export default function ImageModifers() {
</button>
{/* @ts-ignore */}
{imageModifierIsOpen && data.map((item, index) => {
return (
<ModifierGrouping key={item[0]} title={item[0]} tags={item[1]}/>
)
})}
{imageModifierIsOpen &&
// @ts-ignore
data.map((item, index) => {
return (
<ModifierGrouping key={item[0]} title={item[0]} tags={item[1]} />
);
})}
</div>
);
}
}

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

@ -8,12 +8,15 @@ import ModifierTag from "./modierTag";
import { useImageCreate } from "../../store/imageCreateStore";
import './creationPanel.css';
import "./creationPanel.css";
export default function CreationPanel() {
const promptText = useImageCreate((state) => state.getValueForRequestKey("prompt"));
const init_image = useImageCreate((state) => state.getValueForRequestKey("init_image"));
const promptText = useImageCreate((state) =>
state.getValueForRequestKey("prompt")
);
const init_image = useImageCreate((state) =>
state.getValueForRequestKey("init_image")
);
const setRequestOption = useImageCreate((state) => state.setRequestOptions);
const selectedtags = useImageCreate((state) => state.selectedTags());
@ -49,15 +52,29 @@ export default function CreationPanel() {
<input type="file" accept="image/*" />
</div> */}
<div id="editor-inputs-init-image" className="row">
<label ><b>Initial Image:</b> (optional) </label>
<input id="init_image" name="init_image" type="file" onChange={_handleFileSelect}/><br/>
<label>
<b>Initial Image:</b> (optional){" "}
</label>
<input
id="init_image"
name="init_image"
type="file"
onChange={_handleFileSelect}
/>
<br />
<div id="init_image_preview" className="image_preview">
{ init_image &&
<img id="init_image_preview" src={init_image} width="100" height="100" />
}
<button id="init_image_clear" className="image_clear_btn">X</button>
{init_image && (
<img
id="init_image_preview"
src={init_image}
width="100"
height="100"
/>
)}
<button id="init_image_clear" className="image_clear_btn">
X
</button>
</div>
</div>

42
ui/frontend/build_src/src/components/creationPanel/makeButton/index.tsx
View File

@ -1,19 +1,17 @@
import React, {useEffect, useState}from "react";
import React, { useEffect, useState } from "react";
import { useImageCreate } from "../../../store/imageCreateStore";
import { useImageQueue } from "../../../store/imageQueueStore";
import {v4 as uuidv4} from 'uuid';
import { useImageQueue } from "../../../store/imageQueueStore";
import { v4 as uuidv4 } from "uuid";
import { useRandomSeed } from "../../../utils";
export default function MakeButton() {
const parallelCount = useImageCreate((state) => state.parallelCount);
const builtRequest = useImageCreate((state) => state.builtRequest);
const addNewImage = useImageQueue((state) => state.addNewImage);
const makeImages = () => {
const makeImages = () => {
// the request that we have built
const req = builtRequest();
// the actual number of request we will make
@ -23,49 +21,43 @@ export default function MakeButton() {
// if making fewer images than the parallel count
// then it is only 1 request
if( parallelCount > num_outputs ) {
if (parallelCount > num_outputs) {
requests.push(num_outputs);
}
else {
} else {
// while we have at least 1 image to make
while (num_outputs >= 1) {
// subtract the parallel count from the number of images to make
num_outputs -= parallelCount;
// if we are still 0 or greater we can make the full parallel count
if(num_outputs <= 0) {
requests.push(parallelCount)
if (num_outputs <= 0) {
requests.push(parallelCount);
}
// otherwise we can only make the remaining images
else {
requests.push(Math.abs(num_outputs))
requests.push(Math.abs(num_outputs));
}
}
}
// make the requests
requests.forEach((num, index) => {
// get the seed we want to use
let seed = req.seed;
if(index !== 0) {
if (index !== 0) {
// we want to use a random seed for subsequent requests
seed = useRandomSeed();
}
// add the request to the queue
addNewImage(uuidv4(), {
...req,
...req,
// updated the number of images to make
num_outputs: num,
// update the seed
seed: seed
})
seed: seed,
});
});
};
return (
<button onClick={makeImages}>Make</button>
);
}
return <button onClick={makeImages}>Make</button>;
}

13
ui/frontend/build_src/src/components/creationPanel/modierTag/index.tsx
View File

@ -1,17 +1,16 @@
import React from "react";
import { useImageCreate } from "../../../store/imageCreateStore";
type ModifierTagProps = {
name: string;
}
};
export default function ModifierTag({name}: ModifierTagProps) {
const hasTag = useImageCreate((state) => state.hasTag(name)) ? "selected" : "";
export default function ModifierTag({ name }: ModifierTagProps) {
const hasTag = useImageCreate((state) => state.hasTag(name))
? "selected"
: "";
const toggleTag = useImageCreate((state) => state.toggleTag);
const _toggleTag = () => {
toggleTag(name);
};
@ -21,4 +20,4 @@ export default function ModifierTag({name}: ModifierTagProps) {
<p>{name}</p>
</div>
);
}
}

2
ui/frontend/build_src/src/components/displayPanel/completedImages/index.tsx
View File

@ -15,4 +15,4 @@ export const CompletedImages = () => {
// </div>
// </div>
// );
}
};

17
ui/frontend/build_src/src/components/displayPanel/currentImage/index.tsx
View File

@ -8,13 +8,12 @@ import GeneratedImage from "../generatedImage";
// TODO move this logic to the display panel
export default function CurrentImage() {
const [imageData, setImageData] = useState(null);
// @ts-ignore
const {id, options} = useImageQueue((state) => state.firstInQueue());
const { id, options } = useImageQueue((state) => state.firstInQueue());
const removeFirstInQueue = useImageQueue((state) => state.removeFirstInQueue);
const { status, data } = useQuery(
[MakeImageKey, id],
() => doMakeImage(options),
@ -23,21 +22,17 @@ export default function CurrentImage() {
}
);
useEffect(() => {
useEffect(() => {
// query is done
if(status === 'success') {
if (status === "success") {
// check to make sure that the image was created
if(data.status === 'succeeded') {
if (data.status === "succeeded") {
setImageData(data.output[0].data);
removeFirstInQueue();
}
}
}, [status, data, removeFirstInQueue]);
return (
<></>
// <div className="current-display">
@ -45,4 +40,4 @@ export default function CurrentImage() {
// {imageData && <GeneratedImage imageData={imageData} />}
// </div>
);
};
}

55
ui/frontend/build_src/src/components/displayPanel/generatedImage/index.tsx
View File

@ -1,43 +1,42 @@
import React, {useCallback} from "react";
import React, { useCallback } from "react";
import { ImageRequest, useImageCreate } from "../../../store/imageCreateStore";
type GeneretaedImageProps = {
imageData: string;
metadata: ImageRequest;
}
export default function GeneratedImage({ imageData, metadata}: GeneretaedImageProps) {
};
export default function GeneratedImage({
imageData,
metadata,
}: GeneretaedImageProps) {
const setRequestOption = useImageCreate((state) => state.setRequestOptions);
const createFileName = () => {
const {
prompt,
seed,
num_inference_steps,
guidance_scale,
use_face_correction,
const createFileName = () => {
const {
prompt,
seed,
num_inference_steps,
guidance_scale,
use_face_correction,
use_upscale,
width,
height,
} = metadata;
//Most important information is the prompt
let underscoreName = prompt.replace(/[^a-zA-Z0-9]/g, '_')
underscoreName = underscoreName.substring(0, 100)
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) {
if (use_face_correction) {
fileName += `_FaceCorrection-${use_face_correction}`;
}
if(use_upscale) {
if (use_upscale) {
fileName += `_Upscale-${use_upscale}`;
}
@ -45,12 +44,12 @@ export default function GeneratedImage({ imageData, metadata}: GeneretaedImagePr
fileName += `_${width}x${height}`;
// add the file extension
fileName += `.png`
fileName += `.png`;
// return fileName
return fileName;
}
};
const _handleSave = () => {
const link = document.createElement("a");
link.download = createFileName();
@ -61,12 +60,10 @@ export default function GeneratedImage({ imageData, metadata}: GeneretaedImagePr
const _handleUseAsInput = () => {
console.log(" TODO : use as input");
setRequestOption("init_image", imageData);
// initImageSelector.value = null
// initImagePreview.src = imgBody
// imgUseBtn.addEventListener('click', function() {
// initImageSelector.value = null
// initImagePreview.src = imgBody
@ -80,18 +77,14 @@ export default function GeneratedImage({ imageData, metadata}: GeneretaedImagePr
// seedField.value = seed
// seedField.disabled = false
// })
}
};
return (
<div className="generated-image">
<p>Your image</p>
<img src={imageData} alt="generated" />
<button onClick={_handleSave}>
Save
</button>
<button onClick={_handleUseAsInput}>
Use as Input
</button>
<button onClick={_handleSave}>Save</button>
<button onClick={_handleUseAsInput}>Use as Input</button>
</div>
);
}
}

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

@ -1,10 +1,9 @@
import React, {useEffect, useState} from "react";
import React, { useEffect, useState } from "react";
import { useImageQueue } from "../../store/imageQueueStore";
import { ImageRequest } from '../../store/imageCreateStore';
import { useQueryClient } from '@tanstack/react-query'
import { ImageRequest } from "../../store/imageCreateStore";
import { useQueryClient } from "@tanstack/react-query";
import { MakeImageKey } from "../../api";
@ -12,47 +11,50 @@ import CurrentImage from "./currentImage";
import GeneratedImage from "./generatedImage";
type CompletedImagesType = {
id: string;
data: string;
info: ImageRequest;
}
};
export default function DisplayPanel() {
const queryClient = useQueryClient();
const [completedImages, setCompletedImages] = useState<CompletedImagesType[]>([]);
const [completedImages, setCompletedImages] = useState<CompletedImagesType[]>(
[]
);
const completedIds = useImageQueue((state) => state.completedImageIds);
useEffect(() => {
const testReq = {} as ImageRequest;
const completedQueries = completedIds.map((id) => {
const imageData = queryClient.getQueryData([MakeImageKey,id])
const imageData = queryClient.getQueryData([MakeImageKey, id]);
return imageData;
});
if (completedQueries.length > 0) {
// map the completedImagesto a new array
// map the completedImagesto a new array
// and then set the state
const temp = completedQueries.map((query, index ) => {
if(void 0 !== query) {
//@ts-ignore
return query.output.map((data)=>{
// @ts-ignore
return {id: `${completedIds[index]}-${data.seed}`, data: data.data, info: {...query.request, seed:data.seed } }
})
}
}).flat().reverse();
const temp = completedQueries
.map((query, index) => {
if (void 0 !== query) {
//@ts-ignore
return query.output.map((data) => {
// @ts-ignore
return {
id: `${completedIds[index]}-${data.seed}`,
data: data.data,
//@ts-ignore
info: { ...query.request, seed: data.seed },
};
});
}
})
.flat()
.reverse();
setCompletedImages(temp);
}
else {
} else {
setCompletedImages([]);
}
},[setCompletedImages, queryClient, completedIds]);
}, [setCompletedImages, queryClient, completedIds]);
return (
<div className="display-panel">
@ -63,16 +65,20 @@ export default function DisplayPanel() {
// if(index == 0){
// return null;
// }
if(void 0 !== image) {
return <GeneratedImage key={image.id} imageData={image.data} metadata={image.info}/>;
}
else {
console.warn('image is undefined', image, index);
if (void 0 !== image) {
return (
<GeneratedImage
key={image.id}
imageData={image.data}
metadata={image.info}
/>
);
} else {
console.warn("image is undefined", image, index);
return null;
}
})}
</div>
</div>
);
};
}

3
ui/frontend/build_src/src/components/footerDisplay/footerDisplay.css
View File

@ -4,5 +4,4 @@
flex-direction: column;
align-items: center;
justify-content: center;
}
}

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

@ -1,18 +1,56 @@
import React from "react";
import './footerDisplay.css';
import "./footerDisplay.css";
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"/></a> to help cover the cost of development and maintenance! Thank you for your support!</p>
<p>Please feel free to join the <a href="https://discord.com/invite/u9yhsFmEkB" target="_blank">discord community</a> or <a href="https://github.com/cmdr2/stable-diffusion-ui/issues" target="_blank">file an issue</a> if you have any problems or suggestions in using this interface.</p>
<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" />
</a>{" "}
to help cover the cost of development and maintenance! Thank you for
your support!
</p>
<p>
Please feel free to join the{" "}
<a href="https://discord.com/invite/u9yhsFmEkB" target="_blank">
discord community
</a>{" "}
or{" "}
<a
href="https://github.com/cmdr2/stable-diffusion-ui/issues"
target="_blank"
>
file an issue
</a>{" "}
if you have any problems or suggestions in using this interface.
</p>
<div id="footer-legal">
<p><b>Disclaimer:</b> The authors of this project are not responsible for any content generated using this interface.</p>
<p>This license of this software forbids you from sharing any content that violates any laws, produce any harm to a person, disseminate any personal information that would be meant for harm, <br/>spread misinformation and target vulnerable groups. For the full list of restrictions please read <a href="https://github.com/cmdr2/stable-diffusion-ui/blob/main/LICENSE" target="_blank">the license</a>.</p>
<p>By using this software, you consent to the terms and conditions of the license.</p>
<p>
<b>Disclaimer:</b> The authors of this project are not responsible for
any content generated using this interface.
</p>
<p>
This license of this software forbids you from sharing any content
that violates any laws, produce any harm to a person, disseminate any
personal information that would be meant for harm, <br />
spread misinformation and target vulnerable groups. For the full list
of restrictions please read{" "}
<a
href="https://github.com/cmdr2/stable-diffusion-ui/blob/main/LICENSE"
target="_blank"
>
the license
</a>
.
</p>
<p>
By using this software, you consent to the terms and conditions of the
license.
</p>
</div>
</div>
);
}

2
ui/frontend/build_src/src/components/headerDisplay/headerDisplay.css
View File

@ -7,4 +7,4 @@
.status-display {
margin-left: 10px;
}
}

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

@ -2,7 +2,7 @@ import React from "react";
import StatusDisplay from "./statusDisplay";
import './headerDisplay.css';
import "./headerDisplay.css";
export default function HeaderDisplay() {
return (
@ -11,4 +11,4 @@ export default function HeaderDisplay() {
<StatusDisplay className="status-display"></StatusDisplay>
</div>
);
};
}

54
ui/frontend/build_src/src/components/headerDisplay/statusDisplay/index.tsx
View File

@ -1,45 +1,37 @@
import React, {useEffect, useState} from 'react'
import { useQuery } from '@tanstack/react-query';
import React, { useEffect, useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { healthPing, HEALTH_PING_INTERVAL } from '../../../api';
import { healthPing, HEALTH_PING_INTERVAL } from "../../../api";
const startingMessage = 'Stable Diffusion is starting...';
const successMessage = 'Stable Diffusion is ready to use!';
const errorMessage = 'Stable Diffusion is not running!';
const startingMessage = "Stable Diffusion is starting...";
const successMessage = "Stable Diffusion is ready to use!";
const errorMessage = "Stable Diffusion is not running!";
import './statusDisplay.css';
export default function StatusDisplay({className}: {className?: string}) {
import "./statusDisplay.css";
export default function StatusDisplay({ className }: { className?: string }) {
const [statusMessage, setStatusMessage] = useState(startingMessage);
const [statusClass, setStatusClass] = useState('starting');
const [statusClass, setStatusClass] = useState("starting");
// but this will be moved to the status display when it is created
const {status, data} = useQuery(['health'], healthPing, {refetchInterval: HEALTH_PING_INTERVAL});
const { status, data } = useQuery(["health"], healthPing, {
refetchInterval: HEALTH_PING_INTERVAL,
});
useEffect(() => {
if (status === 'loading') {
if (status === "loading") {
setStatusMessage(startingMessage);
setStatusClass('starting');
}
else if (status === 'error') {
setStatusClass("starting");
} else if (status === "error") {
setStatusMessage(errorMessage);
setStatusClass('error');
}
else if (status === 'success') {
if(data[0] === 'OK') {
setStatusClass("error");
} else if (status === "success") {
if (data[0] === "OK") {
setStatusMessage(successMessage);
setStatusClass('success');
}
else {
setStatusClass("success");
} else {
setStatusMessage(errorMessage);
setStatusClass('error');
setStatusClass("error");
}
}
}, [status, data]);
@ -47,7 +39,7 @@ export default function StatusDisplay({className}: {className?: string}) {
return (
<>
{/* alittle hacky but joins the class names, will probably need a better css in js solution or tailwinds*/}
<p className={[statusClass, className].join(' ')}>{statusMessage}</p>
<p className={[statusClass, className].join(" ")}>{statusMessage}</p>
</>
);
};
}

8
ui/frontend/build_src/src/components/headerDisplay/statusDisplay/statusDisplay.css
View File

@ -1,11 +1,11 @@
.starting {
color: #f0ad4e;
color: #f0ad4e;
}
.error {
color: #d9534f;
color: #d9534f;
}
.success {
color: #5cb85c;
}
color: #5cb85c;
}