forked from extern/easydiffusion
make pretty
This commit is contained in:
caranicas
parent
8158ead1a2
commit
c1c4a2933e
File diff suppressed because it is too large
Load Diff
22
ui/frontend/build_src/package-lock.json
generated
22
ui/frontend/build_src/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
}
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -7,9 +7,10 @@
|
||||
background-color: rgb(32, 33, 36);
|
||||
grid-template-columns: 360px 1fr;
|
||||
grid-template-rows: 100px 1fr 300px;
|
||||
grid-template-areas: "header header header"
|
||||
"create display display"
|
||||
"footer footer footer";
|
||||
grid-template-areas:
|
||||
"header header header"
|
||||
"create display display"
|
||||
"footer footer footer";
|
||||
}
|
||||
|
||||
/* Very basic mobile stacked UI*/
|
||||
@ -17,10 +18,11 @@
|
||||
.App {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 100px 1fr 1fr 300px;
|
||||
grid-template-areas: "header"
|
||||
"create"
|
||||
"display"
|
||||
"footer";
|
||||
grid-template-areas:
|
||||
"header"
|
||||
"create"
|
||||
"display"
|
||||
"footer";
|
||||
}
|
||||
}
|
||||
|
||||
@ -38,23 +40,23 @@
|
||||
|
||||
.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) {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
overflow: hidden !important;
|
||||
clip: rect(0, 0, 0, 0) !important;
|
||||
white-space: nowrap !important;
|
||||
border: 0 !important;
|
||||
.visually-hidden,
|
||||
.visually-hidden-focusable:not(:focus):not(:focus-within) {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
overflow: hidden !important;
|
||||
clip: rect(0, 0, 0, 0) !important;
|
||||
white-space: nowrap !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
/* TODO proper utility classes */
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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,11 +23,11 @@ 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`);
|
||||
const data = await response.json();
|
||||
const data = await response.json();
|
||||
return data[0];
|
||||
};
|
||||
|
||||
@ -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 { 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;
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
input[size="4"] {
|
||||
width: 4.5rem;
|
||||
}
|
||||
width: 4.5rem;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,4 +15,4 @@ export const CompletedImages = () => {
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
}
|
||||
};
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
@ -4,5 +4,4 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -7,4 +7,4 @@
|
||||
|
||||
.status-display {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
.starting {
|
||||
color: #f0ad4e;
|
||||
color: #f0ad4e;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #d9534f;
|
||||
color: #d9534f;
|
||||
}
|
||||
|
||||
.success {
|
||||
color: #5cb85c;
|
||||
}
|
||||
color: #5cb85c;
|
||||
}
|
||||
|
||||
@ -15,4 +15,4 @@ body {
|
||||
/* this are used while we still have the original app code in the index.html */
|
||||
/* display: none; */
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,37 +1,32 @@
|
||||
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(
|
||||
{
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
refetchOnWindowFocus: false,
|
||||
refetchOnReconnect : false,
|
||||
refetchOnMount : false,
|
||||
staleTime: Infinity,
|
||||
},
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
refetchOnWindowFocus: false,
|
||||
refetchOnReconnect: false,
|
||||
refetchOnMount: false,
|
||||
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>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<App />
|
||||
<ReactQueryDevtools initialIsOpen={true} />
|
||||
</QueryClientProvider>
|
||||
</React.StrictMode>
|
||||
)
|
||||
);
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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,27 +12,57 @@ 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;
|
||||
};
|
||||
};
|
||||
|
||||
interface ImageCreateState {
|
||||
parallelCount: number;
|
||||
@ -45,7 +75,7 @@ interface ImageCreateState {
|
||||
|
||||
toggleTag: (tag: string) => void;
|
||||
hasTag: (tag: string) => boolean;
|
||||
selectedTags:() => string[]
|
||||
selectedTags: () => string[];
|
||||
builtRequest: () => ImageRequest;
|
||||
|
||||
uiOptions: ImageCreationUiOptions;
|
||||
@ -56,7 +86,7 @@ interface ImageCreateState {
|
||||
toggleUseFaceCorrection: () => void;
|
||||
isUsingFaceCorrection: () => boolean;
|
||||
toggleUseRandomSeed: () => void;
|
||||
isRandomSeed: () => boolean;
|
||||
isRandomSeed: () => boolean;
|
||||
toggleUseAutoSave: () => void;
|
||||
isUseAutoSave: () => boolean;
|
||||
toggleSoundEnabled: () => void;
|
||||
@ -64,185 +94,231 @@ interface ImageCreateState {
|
||||
}
|
||||
|
||||
// devtools breaks TS
|
||||
// @ts-ignore
|
||||
export const useImageCreate = create<ImageCreateState>(devtools((set, get) => ({
|
||||
|
||||
parallelCount: 1,
|
||||
export const useImageCreate = create<ImageCreateState>(
|
||||
// @ts-ignore
|
||||
devtools((set, get) => ({
|
||||
parallelCount: 1,
|
||||
|
||||
requestOptions:{
|
||||
prompt: 'a photograph of an astronaut riding a horse',
|
||||
seed: useRandomSeed(),
|
||||
num_outputs: 1,
|
||||
num_inference_steps: 50,
|
||||
guidance_scale: 7.5,
|
||||
width: 512,
|
||||
height: 512,
|
||||
prompt_strength: 0.8,
|
||||
// allow_nsfw: false,
|
||||
turbo: true,
|
||||
use_cpu: false,
|
||||
use_full_precision: true,
|
||||
save_to_disk_path: 'null',
|
||||
use_face_correction: null,
|
||||
use_upscale: 'RealESRGAN_x4plus',
|
||||
show_only_filtered_image: false,
|
||||
} as ImageRequest,
|
||||
requestOptions: {
|
||||
prompt: "a photograph of an astronaut riding a horse",
|
||||
seed: useRandomSeed(),
|
||||
num_outputs: 1,
|
||||
num_inference_steps: 50,
|
||||
guidance_scale: 7.5,
|
||||
width: 512,
|
||||
height: 512,
|
||||
prompt_strength: 0.8,
|
||||
// allow_nsfw: false,
|
||||
turbo: true,
|
||||
use_cpu: false,
|
||||
use_full_precision: true,
|
||||
save_to_disk_path: "null",
|
||||
use_face_correction: null,
|
||||
use_upscale: "RealESRGAN_x4plus",
|
||||
show_only_filtered_image: false,
|
||||
} as ImageRequest,
|
||||
|
||||
tags: [] as string[],
|
||||
tags: [] as string[],
|
||||
|
||||
setParallelCount: (count: number) => set(produce((state) => {
|
||||
state.parallelCount = count;
|
||||
})),
|
||||
setParallelCount: (count: number) =>
|
||||
set(
|
||||
produce((state) => {
|
||||
state.parallelCount = count;
|
||||
})
|
||||
),
|
||||
|
||||
setRequestOptions: (key: keyof ImageRequest, value: any) => {
|
||||
set( produce((state) => {
|
||||
state.requestOptions[key] = value;
|
||||
}))
|
||||
},
|
||||
setRequestOptions: (key: keyof ImageRequest, value: any) => {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.requestOptions[key] = value;
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
getValueForRequestKey: (key: keyof ImageRequest) => {
|
||||
return get().requestOptions[key];
|
||||
},
|
||||
|
||||
toggleTag: (tag: string) => {
|
||||
set( produce((state) => {
|
||||
const index = state.tags.indexOf(tag);
|
||||
if (index > -1) {
|
||||
state.tags.splice(index, 1);
|
||||
} else {
|
||||
state.tags.push(tag);
|
||||
getValueForRequestKey: (key: keyof ImageRequest) => {
|
||||
return get().requestOptions[key];
|
||||
},
|
||||
|
||||
toggleTag: (tag: string) => {
|
||||
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) => {
|
||||
return get().tags.indexOf(tag) > -1;
|
||||
},
|
||||
|
||||
selectedTags: () => {
|
||||
return get().tags;
|
||||
},
|
||||
|
||||
// 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 request = {
|
||||
...requestOptions,
|
||||
prompt,
|
||||
};
|
||||
// if we arent using auto save clear the save path
|
||||
if (!state.uiOptions.isUseAutoSave) {
|
||||
// maybe this is "None" ?
|
||||
// TODO check this
|
||||
request.save_to_disk_path = null;
|
||||
}
|
||||
// if we arent using face correction clear the face correction
|
||||
if (!state.uiOptions.isCheckUseFaceCorrection) {
|
||||
request.use_face_correction = null;
|
||||
}
|
||||
// if we arent using upscaling clear the upscaling
|
||||
if (!state.uiOptions.isCheckedUseUpscaling) {
|
||||
request.use_upscale = null;
|
||||
}
|
||||
}))
|
||||
},
|
||||
|
||||
hasTag: (tag:string) => {
|
||||
return get().tags.indexOf(tag) > -1;
|
||||
},
|
||||
return request;
|
||||
},
|
||||
|
||||
selectedTags: () => {
|
||||
return get().tags;
|
||||
},
|
||||
uiOptions: {
|
||||
// TODO proper persistence of all UI / user settings centrally somewhere?
|
||||
// localStorage.getItem('ui:advancedSettingsIsOpen') === 'true',
|
||||
advancedSettingsIsOpen: false,
|
||||
imageModifierIsOpen: false,
|
||||
isCheckedUseUpscaling: false,
|
||||
isCheckUseFaceCorrection: true,
|
||||
isUseRandomSeed: true,
|
||||
isUseAutoSave: false,
|
||||
isSoundEnabled: true,
|
||||
},
|
||||
|
||||
// the request body to send to the server
|
||||
// this is a computed value, just adding the tags to the request
|
||||
builtRequest: () => {
|
||||
toggleAdvancedSettingsIsOpen: () => {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.uiOptions.advancedSettingsIsOpen =
|
||||
!state.uiOptions.advancedSettingsIsOpen;
|
||||
localStorage.setItem(
|
||||
"ui:advancedSettingsIsOpen",
|
||||
state.uiOptions.advancedSettingsIsOpen
|
||||
);
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
const state = get();
|
||||
const requestOptions = state.requestOptions;
|
||||
const tags = state.tags;
|
||||
toggleImageModifiersIsOpen: () => {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.uiOptions.imageModifierIsOpen =
|
||||
!state.uiOptions.imageModifierIsOpen;
|
||||
localStorage.setItem(
|
||||
"ui:imageModifierIsOpen",
|
||||
state.uiOptions.imageModifierIsOpen
|
||||
);
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
// join all the tags with a comma and add it to the prompt
|
||||
const prompt = `${requestOptions.prompt} ${tags.join(',')}`;
|
||||
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
|
||||
);
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
const request = {
|
||||
...requestOptions,
|
||||
prompt
|
||||
}
|
||||
// if we arent using auto save clear the save path
|
||||
if(!state.uiOptions.isUseAutoSave){
|
||||
// maybe this is "None" ?
|
||||
// TODO check this
|
||||
request.save_to_disk_path = null;
|
||||
}
|
||||
// if we arent using face correction clear the face correction
|
||||
if(!state.uiOptions.isCheckUseFaceCorrection){
|
||||
request.use_face_correction = null;
|
||||
}
|
||||
// if we arent using upscaling clear the upscaling
|
||||
if(!state.uiOptions.isCheckedUseUpscaling){
|
||||
request.use_upscale = null;
|
||||
}
|
||||
isUsingUpscaling: () => {
|
||||
return get().uiOptions.isCheckedUseUpscaling;
|
||||
},
|
||||
|
||||
return request;
|
||||
},
|
||||
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
|
||||
);
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
uiOptions: {
|
||||
// TODO proper persistence of all UI / user settings centrally somewhere?
|
||||
// localStorage.getItem('ui:advancedSettingsIsOpen') === 'true',
|
||||
advancedSettingsIsOpen:false,
|
||||
imageModifierIsOpen: false,
|
||||
isCheckedUseUpscaling: false,
|
||||
isCheckUseFaceCorrection: true,
|
||||
isUseRandomSeed: true,
|
||||
isUseAutoSave: false,
|
||||
isSoundEnabled: true,
|
||||
},
|
||||
isUsingFaceCorrection: () => {
|
||||
return get().uiOptions.isCheckUseFaceCorrection;
|
||||
},
|
||||
|
||||
toggleAdvancedSettingsIsOpen: () => {
|
||||
set( produce((state) => {
|
||||
state.uiOptions.advancedSettingsIsOpen = !state.uiOptions.advancedSettingsIsOpen;
|
||||
localStorage.setItem('ui:advancedSettingsIsOpen', state.uiOptions.advancedSettingsIsOpen);
|
||||
}))
|
||||
},
|
||||
toggleUseRandomSeed: () => {
|
||||
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
|
||||
);
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
toggleImageModifiersIsOpen: () => {
|
||||
set( produce((state) => {
|
||||
state.uiOptions.imageModifierIsOpen = !state.uiOptions.imageModifierIsOpen;
|
||||
localStorage.setItem('ui:imageModifierIsOpen', state.uiOptions.imageModifierIsOpen);
|
||||
}))
|
||||
},
|
||||
isRandomSeed: () => {
|
||||
return get().uiOptions.isUseRandomSeed;
|
||||
},
|
||||
|
||||
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);
|
||||
}))
|
||||
},
|
||||
toggleUseAutoSave: () => {
|
||||
//isUseAutoSave
|
||||
//save_to_disk_path
|
||||
set(
|
||||
produce((state) => {
|
||||
state.uiOptions.isUseAutoSave = !state.uiOptions.isUseAutoSave;
|
||||
localStorage.setItem(
|
||||
"ui:isUseAutoSave",
|
||||
state.uiOptions.isUseAutoSave
|
||||
);
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
isUsingUpscaling: () => {
|
||||
return get().uiOptions.isCheckedUseUpscaling;
|
||||
},
|
||||
|
||||
toggleUseFaceCorrection: () => {
|
||||
set( produce((state) => {
|
||||
state.uiOptions.isCheckUseFaceCorrection = !state.uiOptions.isCheckUseFaceCorrection;
|
||||
state.use_face_correction = state.uiOptions.isCheckUseFaceCorrection ? 'GFPGANv1.3' : null;
|
||||
localStorage.setItem('ui:isCheckUseFaceCorrection', state.uiOptions.isCheckUseFaceCorrection);
|
||||
}))
|
||||
},
|
||||
|
||||
isUsingFaceCorrection: () => {
|
||||
return get().uiOptions.isCheckUseFaceCorrection;
|
||||
},
|
||||
|
||||
|
||||
toggleUseRandomSeed: () => {
|
||||
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);
|
||||
}))
|
||||
},
|
||||
|
||||
isRandomSeed: () => {
|
||||
return get().uiOptions.isUseRandomSeed;
|
||||
},
|
||||
|
||||
toggleUseAutoSave: () => {
|
||||
//isUseAutoSave
|
||||
//save_to_disk_path
|
||||
set( produce((state) => {
|
||||
state.uiOptions.isUseAutoSave = !state.uiOptions.isUseAutoSave;
|
||||
localStorage.setItem('ui:isUseAutoSave', state.uiOptions.isUseAutoSave);
|
||||
}))
|
||||
},
|
||||
|
||||
isUseAutoSave: () => {
|
||||
return get().uiOptions.isUseAutoSave;
|
||||
},
|
||||
|
||||
toggleSoundEnabled: () => {
|
||||
set( produce((state) => {
|
||||
state.uiOptions.isSoundEnabled = !state.uiOptions.isSoundEnabled;
|
||||
//localStorage.setItem('ui:isSoundEnabled', state.uiOptions.isSoundEnabled);
|
||||
}))
|
||||
},
|
||||
|
||||
isSoundEnabled: () => {
|
||||
return get().uiOptions.isSoundEnabled;
|
||||
},
|
||||
|
||||
})));
|
||||
isUseAutoSave: () => {
|
||||
return get().uiOptions.isUseAutoSave;
|
||||
},
|
||||
|
||||
toggleSoundEnabled: () => {
|
||||
set(
|
||||
produce((state) => {
|
||||
state.uiOptions.isSoundEnabled = !state.uiOptions.isSoundEnabled;
|
||||
//localStorage.setItem('ui:isSoundEnabled', state.uiOptions.isSoundEnabled);
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
isSoundEnabled: () => {
|
||||
return get().uiOptions.isSoundEnabled;
|
||||
},
|
||||
}))
|
||||
);
|
||||
|
||||
@ -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) => {
|
||||
state.currentImage = { display: ImageData, options: imageOptions };
|
||||
state.images.set(ImageData, imageOptions)
|
||||
}));
|
||||
}
|
||||
}));
|
||||
set(
|
||||
produce((state) => {
|
||||
state.currentImage = { display: ImageData, options: imageOptions };
|
||||
state.images.set(ImageData, imageOptions);
|
||||
})
|
||||
);
|
||||
},
|
||||
}));
|
||||
|
||||
@ -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[];
|
||||
images: ImageRequest[];
|
||||
completedImageIds: string[];
|
||||
addNewImage: (id:string, imgRec: ImageRequest) => void
|
||||
addNewImage: (id: string, imgRec: ImageRequest) => void;
|
||||
hasQueuedImages: () => boolean;
|
||||
firstInQueue: () => ImageRequest | [];
|
||||
removeFirstInQueue: () => void;
|
||||
@ -19,29 +19,31 @@ export const useImageQueue = create<ImageQueueState>((set, get) => ({
|
||||
images: new Array(),
|
||||
completedImageIds: new Array(),
|
||||
// use produce to make sure we don't mutate state
|
||||
addNewImage: (id: string, imgRec: ImageRequest, isRandom= false) => {
|
||||
set( produce((state) => {
|
||||
|
||||
let { seed } = imgRec;
|
||||
if (isRandom) {
|
||||
seed = useRandomSeed();
|
||||
}
|
||||
state.images.push({ id, options: {...imgRec, seed} });
|
||||
}));
|
||||
addNewImage: (id: string, imgRec: ImageRequest, isRandom = false) => {
|
||||
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) => {
|
||||
const image = state.images.shift();
|
||||
state.completedImageIds.push(image.id);
|
||||
}));
|
||||
}
|
||||
set(
|
||||
produce((state) => {
|
||||
const image = state.images.shift();
|
||||
state.completedImageIds.push(image.id);
|
||||
})
|
||||
);
|
||||
},
|
||||
}));
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
export function useRandomSeed(){
|
||||
export function useRandomSeed() {
|
||||
return Math.floor(Math.random() * 10000);
|
||||
};
|
||||
}
|
||||
|
||||
@ -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]`,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
})
|
||||
});
|
||||
|
||||
2746
ui/frontend/dist/index.html
vendored
2746
ui/frontend/dist/index.html
vendored
File diff suppressed because it is too large
Load Diff
4
ui/frontend/dist/index.js
vendored
4
ui/frontend/dist/index.js
vendored
File diff suppressed because one or more lines are too long
9
ui/frontend/dist/modifiers.json
vendored
9
ui/frontend/dist/modifiers.json
vendored
@ -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",
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user