holm/easydiffusion
1
0
Fork 0
forked from extern/easydiffusion
Code Issues Pull Requests 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1148
ui/frontend/build_src/index.html
View File

File diff suppressed because it is too large Load Diff

22
ui/frontend/build_src/package-lock.json generated
View File

@ -21,6 +21,7 @@
"@types/react-dom": "^18.0.6",
"@types/uuid": "^8.3.4",
"@vitejs/plugin-react": "^2.0.1",
"prettier": "^2.7.1",
"typescript": "^4.6.4",
"vite": "^3.0.7"
}
@ -1326,6 +1327,21 @@
"node": "^10 || ^12 || >=14"
}
},
"node_modules/prettier": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
"integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
"dev": true,
"bin": {
"prettier": "bin-prettier.js"
},
"engines": {
"node": ">=10.13.0"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/react": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@ -2418,6 +2434,12 @@
"source-map-js": "^1.0.2"
}
},
"prettier": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
"integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
"dev": true
},
"react": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",

2
ui/frontend/build_src/package.json
View File

@ -4,6 +4,7 @@
"version": "0.0.0",
"type": "module",
"scripts": {
"pretty": "prettier --write .",
"dev": "vite",
"build": "tsc && vite build --emptyOutDir",
"preview": "vite preview"
@ -22,6 +23,7 @@
"@types/react-dom": "^18.0.6",
"@types/uuid": "^8.3.4",
"@vitejs/plugin-react": "^2.0.1",
"prettier": "^2.7.1",
"typescript": "^4.6.4",
"vite": "^3.0.7"
}

9
ui/frontend/build_src/public/modifiers.json
View File

@ -62,14 +62,7 @@
],
[
"Pen",
[
"Chalk",
"Colored Pencil",
"Graphite",
"Ink",
"Oil Paint",
"Pastel Art"
]
["Chalk", "Colored Pencil", "Graphite", "Ink", "Oil Paint", "Pastel Art"]
],
[
"Carving and Etching",

10
ui/frontend/build_src/src/App.css
View File

@ -7,7 +7,8 @@
background-color: rgb(32, 33, 36);
grid-template-columns: 360px 1fr;
grid-template-rows: 100px 1fr 300px;
grid-template-areas: "header header header"
grid-template-areas:
"header header header"
"create display display"
"footer footer footer";
}
@ -17,7 +18,8 @@
.App {
grid-template-columns: 1fr;
grid-template-rows: 100px 1fr 1fr 300px;
grid-template-areas: "header"
grid-template-areas:
"header"
"create"
"display"
"footer";
@ -38,11 +40,11 @@
.footer-layout {
grid-area: footer;
}
/* Copypasta from Bootstrap, makes content visually hidden but still accessible for screenreaders */
.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
position: absolute !important;
width: 1px !important;
height: 1px !important;

26
ui/frontend/build_src/src/App.tsx
View File

@ -1,30 +1,26 @@
import React, {useEffect, useState} from 'react'
import './App.css'
import React, { useEffect, useState } from "react";
import "./App.css";
import { useQuery } from "@tanstack/react-query";
import { getSaveDirectory } from './api'
import { getSaveDirectory } from "./api";
import { useImageCreate } from "./store/imageCreateStore";
// Todo - import components here
import HeaderDisplay from './components/headerDisplay';
import CreationPanel from './components/creationPanel';
import DisplayPanel from './components/displayPanel';
import FooterDisplay from './components/footerDisplay';
import HeaderDisplay from "./components/headerDisplay";
import CreationPanel from "./components/creationPanel";
import DisplayPanel from "./components/displayPanel";
import FooterDisplay from "./components/footerDisplay";
function App() {
// Get the original save directory
const setRequestOption = useImageCreate((state) => state.setRequestOptions);
const { status, data } = useQuery(
['SaveDir'], getSaveDirectory,
);
const { status, data } = useQuery(["SaveDir"], getSaveDirectory);
useEffect(() => {
if(status === 'success') {
if (status === "success") {
setRequestOption("save_to_disk_path", data);
}
}, [setRequestOption, status, data]);
return (
<div className="App">
<header className="header-layout">
@ -40,7 +36,7 @@ function App() {
<FooterDisplay></FooterDisplay>
</footer>
</div>
)
);
}
export default App
export default App;

25
ui/frontend/build_src/src/api/index.ts
View File

@ -2,21 +2,19 @@
* basic server health
*/
import type {ImageRequest} from '../store/imageCreateStore';
import type { ImageRequest } from "../store/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
const API_URL = import.meta.env.DEV ? 'http://localhost:9000' : '';
const API_URL = import.meta.env.DEV ? "http://localhost:9000" : "";
export const HEALTH_PING_INTERVAL = 5000; // 5 seconds
export const healthPing = async () => {
const pingUrl = `${API_URL}/ping`;
let response = await fetch(pingUrl)
let response = await fetch(pingUrl);
const data = await response.json();
return data;
}
};
/**
* the local list of modifications
@ -25,7 +23,7 @@ export const loadModifications = async () => {
const response = await fetch(`${API_URL}/modifiers.json`);
const data = await response.json();
return data;
}
};
export const getSaveDirectory = async () => {
const response = await fetch(`${API_URL}/output_dir`);
@ -37,21 +35,18 @@ export const getSaveDirectory = async () => {
* post a new request for an image
*/
export const MakeImageKey = 'MakeImage';
export const MakeImageKey = "MakeImage";
export const doMakeImage = async (reqBody: ImageRequest) => {
const { seed, num_outputs } = reqBody;
const res = await fetch(`${API_URL}/image`, {
method: 'POST',
method: "POST",
headers: {
'Content-Type': 'application/json'
"Content-Type": "application/json",
},
body: JSON.stringify(reqBody)
body: JSON.stringify(reqBody),
});
const data = await res.json();
return data;
}
};

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

@ -22,54 +22,78 @@ 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 toggleUseFaceCorrection = useImageCreate((state) => state.toggleUseFaceCorrection);
const isUsingFaceCorrection = useImageCreate((state) => state.isUsingFaceCorrection());
const toggleUseUpscaling = useImageCreate((state) => state.toggleUseUpscaling);
const toggleUseUpscaling = useImageCreate(
(state) => state.toggleUseUpscaling
);
const isUsingUpscaling = useImageCreate((state) => state.isUsingUpscaling());
const toggleUseRandomSeed = useImageCreate((state) => state.toggleUseRandomSeed);
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()
}
onChange={(e) => toggleUseFaceCorrection()}
/>
Fix incorrect faces and eyes (uses GFPGAN)
</label>
@ -79,14 +103,19 @@ function SettingsList() {
<input
type="checkbox"
checked={isUsingUpscaling}
onChange={(e) =>
toggleUseUpscaling()
}
onChange={(e) => toggleUseUpscaling()}
/>
Upscale the image to 4x resolution using
<select id="upscale_model" name="upscale_model" disabled={!isUsingUpscaling} value={use_upscale}>
<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>
<option value="RealESRGAN_x4plus_anime_6B">
RealESRGAN_x4plus_anime_6B
</option>
</select>
</label>
</li>
@ -100,7 +129,6 @@ function SettingsList() {
}
/>
Show only filtered image
</label>
</li>
{/* SEED */}
@ -110,9 +138,7 @@ function SettingsList() {
<input
size={10}
value={seed}
onChange={(e) =>
setRequestOption("seed", e.target.value)
}
onChange={(e) => setRequestOption("seed", e.target.value)}
disabled={isRandomSeed}
placeholder="random"
/>
@ -121,9 +147,7 @@ function SettingsList() {
<input
type="checkbox"
checked={isRandomSeed}
onChange={(e) =>
toggleUseRandomSeed()
}
onChange={(e) => toggleUseRandomSeed()}
/>{" "}
Random Image
</label>
@ -146,9 +170,7 @@ function SettingsList() {
<input
type="number"
value={parallelCount}
onChange={(e) =>
setParallelCount(parseInt(e.target.value, 10))
}
onChange={(e) => setParallelCount(parseInt(e.target.value, 10))}
size={4}
/>
</label>
@ -159,9 +181,7 @@ function SettingsList() {
Width:
<select
value={width}
onChange={(e) =>
setRequestOption("width", e.target.value)
}
onChange={(e) => setRequestOption("width", e.target.value)}
>
{IMAGE_DIMENSIONS.map((dimension) => (
<option
@ -179,9 +199,7 @@ function SettingsList() {
Height:
<select
value={height}
onChange={(e) =>
setRequestOption("height", e.target.value)
}
onChange={(e) => setRequestOption("height", e.target.value)}
>
{IMAGE_DIMENSIONS.map((dimension) => (
<option
@ -201,7 +219,7 @@ function SettingsList() {
<input
value={steps}
onChange={(e) => {
setRequestOption("num_inference_steps", e.target.value)
setRequestOption("num_inference_steps", e.target.value);
}}
size={4}
/>
@ -213,9 +231,7 @@ function SettingsList() {
Guidance Scale:
<input
value={guidance_scale}
onChange={(e) =>
setRequestOption("guidance_scale", e.target.value)
}
onChange={(e) => setRequestOption("guidance_scale", e.target.value)}
type="range"
min="0"
max="20"
@ -247,9 +263,7 @@ function SettingsList() {
<label>
<input
checked={isUseAutoSave}
onChange={(e) =>
toggleUseAutoSave()
}
onChange={(e) => toggleUseAutoSave()}
type="checkbox"
/>
Automatically save to{" "}
@ -273,9 +287,7 @@ function SettingsList() {
<label>
<input
checked={isSoundEnabled}
onChange={(e) =>
toggleSoundEnabled()
}
onChange={(e) => toggleSoundEnabled()}
type="checkbox"
/>
Play sound on task completion
@ -286,13 +298,11 @@ function SettingsList() {
<label>
<input
checked={turbo}
onChange={(e) =>
setRequestOption("turbo", e.target.checked)
}
onChange={(e) => setRequestOption("turbo", e.target.checked)}
type="checkbox"
/>
Turbo mode (generates images faster, but uses an additional 1 GB
of GPU memory)
Turbo mode (generates images faster, but uses an additional 1 GB of
GPU memory)
</label>
</li>
<li>
@ -300,9 +310,7 @@ function SettingsList() {
<input
type="checkbox"
checked={use_cpu}
onChange={(e) =>
setRequestOption("use_cpu", e.target.checked)
}
onChange={(e) => setRequestOption("use_cpu", e.target.checked)}
/>
Use CPU instead of GPU (warning: this will be *very* slow)
</label>
@ -320,15 +328,13 @@ function SettingsList() {
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
);

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

@ -7,10 +7,9 @@ import { useImageCreate } from "../../../store/imageCreateStore";
import ModifierTag from "../modierTag";
type ModifierListProps = {
tags: string[];
}
};
function ModifierList({ tags }: ModifierListProps) {
// const setImageOptions = useImageCreate((state) => state.setImageOptions);
@ -23,7 +22,7 @@ function ModifierList({tags}: ModifierListProps) {
</li>
))}
</ul>
)
);
}
type ModifierGroupingProps = {
@ -32,12 +31,10 @@ type 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);
};
@ -62,7 +59,6 @@ export default function ImageModifers() {
(state) => state.toggleImageModifiersIsOpen
);
const handleClick = () => {
toggleImageModifiersIsOpen();
};
@ -79,10 +75,12 @@ export default function ImageModifers() {
</button>
{/* @ts-ignore */}
{imageModifierIsOpen && data.map((item, index) => {
{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>

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

@ -2,18 +2,16 @@ import React, {useEffect, useState}from "react";
import { useImageCreate } from "../../../store/imageCreateStore";
import { useImageQueue } from "../../../store/imageQueueStore";
import {v4 as uuidv4} from 'uuid';
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 = () => {
// the request that we have built
const req = builtRequest();
// the actual number of request we will make
@ -25,9 +23,7 @@ export default function MakeButton() {
// then it is only 1 request
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
@ -35,18 +31,17 @@ export default function MakeButton() {
// if we are still 0 or greater we can make the full parallel count
if (num_outputs <= 0) {
requests.push(parallelCount)
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) {
@ -59,13 +54,10 @@ export default function MakeButton() {
// 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>;
}

9
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" : "";
const hasTag = useImageCreate((state) => state.hasTag(name))
? "selected"
: "";
const toggleTag = useImageCreate((state) => state.toggleTag);
const _toggleTag = () => {
toggleTag(name);
};

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

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

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

@ -8,7 +8,6 @@ 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());
@ -25,19 +24,15 @@ export default function CurrentImage() {
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>
);
};
}

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

@ -1,20 +1,19 @@
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,
@ -27,8 +26,8 @@ export default function GeneratedImage({ imageData, metadata}: GeneretaedImagePr
} = 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}`;
@ -45,11 +44,11 @@ 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");
@ -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>
);
}

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

@ -1,10 +1,9 @@
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,48 +11,51 @@ 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
// and then set the state
const temp = completedQueries.map((query, index ) => {
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 } }
return {
id: `${completedIds[index]}-${data.seed}`,
data: data.data,
//@ts-ignore
info: { ...query.request, seed: data.seed },
};
});
}
})
}
}).flat().reverse();
.flat()
.reverse();
setCompletedImages(temp);
}
else {
} else {
setCompletedImages([]);
}
}, [setCompletedImages, queryClient, completedIds]);
return (
<div className="display-panel">
<h1>Display Panel</h1>
@ -64,15 +66,19 @@ export default function DisplayPanel() {
// 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);
return (
<GeneratedImage
key={image.id}
imageData={image.data}
metadata={image.info}
/>
);
} else {
console.warn("image is undefined", image, index);
return null;
}
})}
</div>
</div>
);
};
}

1
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>
);
}

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>
);
};
}

52
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';
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>
</>
);
};
}

27
ui/frontend/build_src/src/main.tsx
View File

@ -1,19 +1,15 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import React from "react";
import ReactDOM from "react-dom/client";
import {
QueryClient,
QueryClientProvider,
} from '@tanstack/react-query';
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { enableMapSet } from 'immer';
import App from './App'
import './index.css'
import { enableMapSet } from "immer";
import App from "./App";
import "./index.css";
const queryClient = new QueryClient(
{
const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
@ -22,16 +18,15 @@ const queryClient = new QueryClient(
staleTime: Infinity,
},
},
}
);
});
enableMapSet();
// application entry point
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode>
<QueryClientProvider client={queryClient}>
<App />
<ReactQueryDevtools initialIsOpen={true} />
</QueryClientProvider>
</React.StrictMode>
)
);

9
ui/frontend/build_src/src/modifiers.json
View File

@ -43,14 +43,7 @@
],
[
"Pen",
[
"Chalk",
"Colored Pencil",
"Graphite",
"Ink",
"Oil Paint",
"Pastel Art"
]
["Chalk", "Colored Pencil", "Graphite", "Ink", "Oil Paint", "Pastel Art"]
],
[
"Carving and Etching",

192
ui/frontend/build_src/src/store/imageCreateStore.ts
View File

@ -1,8 +1,8 @@
import create from 'zustand';
import produce from 'immer';
import { devtools } from 'zustand/middleware'
import create from "zustand";
import produce from "immer";
import { devtools } from "zustand/middleware";
import { useRandomSeed } from '../utils';
import { useRandomSeed } from "../utils";
export type ImageCreationUiOptions = {
advancedSettingsIsOpen: boolean;
@ -12,23 +12,53 @@ export type ImageCreationUiOptions = {
isUseRandomSeed: boolean;
isUseAutoSave: boolean;
isSoundEnabled: boolean;
}
};
export type ImageRequest = {
prompt: string;
seed: number;
num_outputs: number;
num_inference_steps: number;
guidance_scale: number
width: 128 | 192 | 256 | 320 | 384 | 448 | 512 | 576 | 640 | 704 | 768 | 832 | 896 | 960 | 1024;
height: 128 | 192 | 256 | 320 | 384 | 448 | 512 | 576 | 640 | 704 | 768 | 832 | 896 | 960 | 1024;
guidance_scale: number;
width:
| 128
| 192
| 256
| 320
| 384
| 448
| 512
| 576
| 640
| 704
| 768
| 832
| 896
| 960
| 1024;
height:
| 128
| 192
| 256
| 320
| 384
| 448
| 512
| 576
| 640
| 704
| 768
| 832
| 896
| 960
| 1024;
// allow_nsfw: boolean;
turbo: boolean;
use_cpu: boolean;
use_full_precision: boolean;
save_to_disk_path: null | string;
use_face_correction: null | 'GFPGANv1.3';
use_upscale: null| 'RealESRGAN_x4plus' | 'RealESRGAN_x4plus_anime_6B';
use_face_correction: null | "GFPGANv1.3";
use_upscale: null | "RealESRGAN_x4plus" | "RealESRGAN_x4plus_anime_6B";
show_only_filtered_image: boolean;
init_image: undefined | string;
prompt_strength: undefined | number;
@ -45,7 +75,7 @@ interface ImageCreateState {
toggleTag: (tag: string) => void;
hasTag: (tag: string) => boolean;
selectedTags:() => string[]
selectedTags: () => string[];
builtRequest: () => ImageRequest;
uiOptions: ImageCreationUiOptions;
@ -64,13 +94,13 @@ interface ImageCreateState {
}
// devtools breaks TS
export const useImageCreate = create<ImageCreateState>(
// @ts-ignore
export const useImageCreate = create<ImageCreateState>(devtools((set, get) => ({
devtools((set, get) => ({
parallelCount: 1,
requestOptions: {
prompt: 'a photograph of an astronaut riding a horse',
prompt: "a photograph of an astronaut riding a horse",
seed: useRandomSeed(),
num_outputs: 1,
num_inference_steps: 50,
@ -82,22 +112,27 @@ export const useImageCreate = create<ImageCreateState>(devtools((set, get) => ({
turbo: true,
use_cpu: false,
use_full_precision: true,
save_to_disk_path: 'null',
save_to_disk_path: "null",
use_face_correction: null,
use_upscale: 'RealESRGAN_x4plus',
use_upscale: "RealESRGAN_x4plus",
show_only_filtered_image: false,
} as ImageRequest,
tags: [] as string[],
setParallelCount: (count: number) => set(produce((state) => {
setParallelCount: (count: number) =>
set(
produce((state) => {
state.parallelCount = count;
})),
})
),
setRequestOptions: (key: keyof ImageRequest, value: any) => {
set( produce((state) => {
set(
produce((state) => {
state.requestOptions[key] = value;
}))
})
);
},
getValueForRequestKey: (key: keyof ImageRequest) => {
@ -105,14 +140,16 @@ export const useImageCreate = create<ImageCreateState>(devtools((set, get) => ({
},
toggleTag: (tag: string) => {
set( produce((state) => {
set(
produce((state) => {
const index = state.tags.indexOf(tag);
if (index > -1) {
state.tags.splice(index, 1);
} else {
state.tags.push(tag);
}
}))
})
);
},
hasTag: (tag: string) => {
@ -126,18 +163,17 @@ export const useImageCreate = create<ImageCreateState>(devtools((set, get) => ({
// the request body to send to the server
// this is a computed value, just adding the tags to the request
builtRequest: () => {
const state = get();
const requestOptions = state.requestOptions;
const tags = state.tags;
// join all the tags with a comma and add it to the prompt
const prompt = `${requestOptions.prompt} ${tags.join(',')}`;
const prompt = `${requestOptions.prompt} ${tags.join(",")}`;
const request = {
...requestOptions,
prompt
}
prompt,
};
// if we arent using auto save clear the save path
if (!state.uiOptions.isUseAutoSave) {
// maybe this is "None" ?
@ -169,25 +205,46 @@ export const useImageCreate = create<ImageCreateState>(devtools((set, get) => ({
},
toggleAdvancedSettingsIsOpen: () => {
set( produce((state) => {
state.uiOptions.advancedSettingsIsOpen = !state.uiOptions.advancedSettingsIsOpen;
localStorage.setItem('ui:advancedSettingsIsOpen', state.uiOptions.advancedSettingsIsOpen);
}))
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);
}))
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' : null;
localStorage.setItem('ui:isCheckedUseUpscaling', state.uiOptions.isCheckedUseUpscaling);
}))
set(
produce((state) => {
state.uiOptions.isCheckedUseUpscaling =
!state.uiOptions.isCheckedUseUpscaling;
state.requestOptions.use_upscale = state.uiOptions
.isCheckedUseUpscaling
? "RealESRGAN_x4plus"
: null;
localStorage.setItem(
"ui:isCheckedUseUpscaling",
state.uiOptions.isCheckedUseUpscaling
);
})
);
},
isUsingUpscaling: () => {
@ -195,24 +252,38 @@ export const useImageCreate = create<ImageCreateState>(devtools((set, get) => ({
},
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);
}))
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
);
})
);
},
isUsingFaceCorrection: () => {
return get().uiOptions.isCheckUseFaceCorrection;
},
toggleUseRandomSeed: () => {
set( produce((state) => {
set(
produce((state) => {
state.uiOptions.isUseRandomSeed = !state.uiOptions.isUseRandomSeed;
state.requestOptions.seed = state.uiOptions.isUseRandomSeed ? useRandomSeed() : state.requestOptions.seed;
localStorage.setItem('ui:isUseRandomSeed', state.uiOptions.isUseRandomSeed);
}))
state.requestOptions.seed = state.uiOptions.isUseRandomSeed
? useRandomSeed()
: state.requestOptions.seed;
localStorage.setItem(
"ui:isUseRandomSeed",
state.uiOptions.isUseRandomSeed
);
})
);
},
isRandomSeed: () => {
@ -222,10 +293,15 @@ export const useImageCreate = create<ImageCreateState>(devtools((set, get) => ({
toggleUseAutoSave: () => {
//isUseAutoSave
//save_to_disk_path
set( produce((state) => {
set(
produce((state) => {
state.uiOptions.isUseAutoSave = !state.uiOptions.isUseAutoSave;
localStorage.setItem('ui:isUseAutoSave', state.uiOptions.isUseAutoSave);
}))
localStorage.setItem(
"ui:isUseAutoSave",
state.uiOptions.isUseAutoSave
);
})
);
},
isUseAutoSave: () => {
@ -233,16 +309,16 @@ export const useImageCreate = create<ImageCreateState>(devtools((set, get) => ({
},
toggleSoundEnabled: () => {
set( produce((state) => {
set(
produce((state) => {
state.uiOptions.isSoundEnabled = !state.uiOptions.isSoundEnabled;
//localStorage.setItem('ui:isSoundEnabled', state.uiOptions.isSoundEnabled);
}))
})
);
},
isSoundEnabled: () => {
return get().uiOptions.isSoundEnabled;
},
})));
}))
);

16
ui/frontend/build_src/src/store/imageDisplayStore.ts
View File

@ -1,12 +1,12 @@
import create from 'zustand';
import produce from 'immer';
import create from "zustand";
import produce from "immer";
// import { devtools } from 'zustand/middleware'
interface ImageDisplayState {
imageOptions: Map<string, any>;
currentImage: object | null;
addNewImage: (ImageData: string, imageOptions: any) => void
addNewImage: (ImageData: string, imageOptions: any) => void;
}
export const useImageDisplay = create<ImageDisplayState>((set) => ({
@ -14,9 +14,11 @@ export const useImageDisplay = create<ImageDisplayState>((set) => ({
currentImage: null,
// use produce to make sure we don't mutate state
addNewImage: (ImageData: string, imageOptions: any) => {
set( produce((state) => {
set(
produce((state) => {
state.currentImage = { display: ImageData, options: imageOptions };
state.images.set(ImageData, imageOptions)
}));
}
state.images.set(ImageData, imageOptions);
})
);
},
}));

28
ui/frontend/build_src/src/store/imageQueueStore.ts
View File

@ -1,13 +1,13 @@
import create from 'zustand';
import produce from 'immer';
import { useRandomSeed } from '../utils';
import create from "zustand";
import produce from "immer";
import { useRandomSeed } from "../utils";
import { ImageRequest } from './imageCreateStore';
import { ImageRequest } from "./imageCreateStore";
interface ImageQueueState {
images: ImageRequest[];
completedImageIds: string[];
addNewImage: (id:string, imgRec: ImageRequest) => void
addNewImage: (id: string, imgRec: ImageRequest) => void;
hasQueuedImages: () => boolean;
firstInQueue: () => ImageRequest | [];
removeFirstInQueue: () => void;
@ -20,28 +20,30 @@ export const useImageQueue = create<ImageQueueState>((set, get) => ({
completedImageIds: new Array(),
// use produce to make sure we don't mutate state
addNewImage: (id: string, imgRec: ImageRequest, isRandom = false) => {
set( produce((state) => {
set(
produce((state) => {
let { seed } = imgRec;
if (isRandom) {
seed = useRandomSeed();
}
state.images.push({ id, options: { ...imgRec, seed } });
}));
})
);
},
hasQueuedImages: () => {
return get().images.length > 0;
},
firstInQueue: () => {
return get().images[0] as ImageRequest || [];
return (get().images[0] as ImageRequest) || [];
},
removeFirstInQueue: () => {
set( produce((state) => {
set(
produce((state) => {
const image = state.images.shift();
state.completedImageIds.push(image.id);
})
);
},
}));
}
}));

2
ui/frontend/build_src/src/utils.ts
View File

@ -1,3 +1,3 @@
export function useRandomSeed() {
return Math.floor(Math.random() * 10000);
};
}

15
ui/frontend/build_src/vite.config.ts
View File

@ -1,5 +1,5 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
@ -9,16 +9,15 @@ export default defineConfig({
},
build: {
// make sure everythign is in the same directory
outDir: '../dist',
outDir: "../dist",
rollupOptions: {
output: {
// dont hash the file names
// maybe once we update the python server?
entryFileNames: `[name].js`,
chunkFileNames: `[name].js`,
assetFileNames: `[name].[ext]`
}
}
assetFileNames: `[name].[ext]`,
},
})
},
},
});

1148
ui/frontend/dist/index.html vendored
View File

File diff suppressed because it is too large Load Diff

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

File diff suppressed because one or more lines are too long

9
ui/frontend/dist/modifiers.json vendored
View File

@ -62,14 +62,7 @@
],
[
"Pen",
[
"Chalk",
"Colored Pencil",
"Graphite",
"Ink",
"Oil Paint",
"Pastel Art"
]
["Chalk", "Colored Pencil", "Graphite", "Ink", "Oil Paint", "Pastel Art"]
],
[
"Carving and Etching",

2
ui/index.html
View File

@ -298,7 +298,7 @@
</div>
<div id="editor-inputs-init-image" class="row">
<label for="init_image"><b>Initial Image:</b> (optional) </label> <input id="init_image" name="init_image" type="file" /> </button><br/>
<label for="init_image"><b>Initial Image:</b> (optional) </label> <input id="init_image" name="init_image" type="file" /><br/>
<div id="init_image_preview_container" class="image_preview_container">
<img id="init_image_preview" src="" width="100" height="100" />
<button id="init_image_clear" class="image_clear_btn">X</button>