forked from extern/easydiffusion
Merge pull request #7 from caranicas/beta-react-file-responses
file metadata and saveing
This commit is contained in:
commit
fcc196f452
@ -22,10 +22,7 @@ export const healthPing = async () => {
|
|||||||
* the local list of modifications
|
* the local list of modifications
|
||||||
*/
|
*/
|
||||||
export const loadModifications = async () => {
|
export const loadModifications = async () => {
|
||||||
const url = `${API_URL}/modifiers.json`;
|
const response = await fetch(`${API_URL}/modifiers.json`);
|
||||||
|
|
||||||
console.log('loadModifications', url);
|
|
||||||
const response = await fetch(url);
|
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
|
@ -201,7 +201,6 @@ function SettingsList() {
|
|||||||
<input
|
<input
|
||||||
value={steps}
|
value={steps}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
console.log('ON CHNAGE num_inference_steps', e.target.value)
|
|
||||||
setRequestOption("num_inference_steps", e.target.value)
|
setRequestOption("num_inference_steps", e.target.value)
|
||||||
}}
|
}}
|
||||||
size={4}
|
size={4}
|
||||||
|
@ -37,10 +37,8 @@ function ModifierGrouping({title, tags}: ModifierGroupingProps) {
|
|||||||
// and persist if we wanted to
|
// and persist if we wanted to
|
||||||
const [isExpanded, setIsExpanded] = useState(false);
|
const [isExpanded, setIsExpanded] = useState(false);
|
||||||
|
|
||||||
// console.log('grouping', title, tags)
|
|
||||||
|
|
||||||
const _toggleExpand = () => {
|
const _toggleExpand = () => {
|
||||||
// console.log('toggle expand')
|
|
||||||
setIsExpanded(!isExpanded);
|
setIsExpanded(!isExpanded);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -64,13 +62,8 @@ export default function ImageModifers() {
|
|||||||
(state) => state.toggleImageModifiersIsOpen
|
(state) => state.toggleImageModifiersIsOpen
|
||||||
);
|
);
|
||||||
|
|
||||||
// useEffect(() => {
|
|
||||||
// console.log("imageModifers", status, data);
|
|
||||||
// }, [status, data]);
|
|
||||||
|
|
||||||
|
|
||||||
const handleClick = () => {
|
const handleClick = () => {
|
||||||
// debugger;
|
|
||||||
toggleImageModifiersIsOpen();
|
toggleImageModifiersIsOpen();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -22,17 +22,13 @@ export default function CreationPanel() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const _handleFileSelect = (event: ChangeEvent<HTMLInputElement>) => {
|
const _handleFileSelect = (event: ChangeEvent<HTMLInputElement>) => {
|
||||||
//console.log("file select", event);
|
|
||||||
//@ts-ignore
|
//@ts-ignore
|
||||||
const file = event.target.files[0];
|
const file = event.target.files[0];
|
||||||
|
|
||||||
// console.log("file", file);
|
|
||||||
|
|
||||||
if (file) {
|
if (file) {
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
reader.onload = (e) => {
|
reader.onload = (e) => {
|
||||||
if (e.target) {
|
if (e.target) {
|
||||||
debugger;
|
|
||||||
setRequestOption("init_image", e.target.result);
|
setRequestOption("init_image", e.target.result);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -11,7 +11,6 @@ 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 = useImageCreate((state) => state.toggleTag);
|
||||||
|
|
||||||
console.log('has tag', hasTag)
|
|
||||||
|
|
||||||
const _toggleTag = () => {
|
const _toggleTag = () => {
|
||||||
toggleTag(name);
|
toggleTag(name);
|
||||||
|
@ -6,13 +6,12 @@ import { doMakeImage, MakeImageKey } from "../../../api";
|
|||||||
import { useQuery } from "@tanstack/react-query";
|
import { useQuery } from "@tanstack/react-query";
|
||||||
import GeneratedImage from "../generatedImage";
|
import GeneratedImage from "../generatedImage";
|
||||||
|
|
||||||
|
// TODO move this logic to the display panel
|
||||||
export default function CurrentImage() {
|
export default function CurrentImage() {
|
||||||
|
|
||||||
const [imageData, setImageData] = useState(null);
|
const [imageData, setImageData] = useState(null);
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
const {id, options} = useImageQueue((state) => state.firstInQueue());
|
const {id, options} = useImageQueue((state) => state.firstInQueue());
|
||||||
console.log('CurrentImage id', id)
|
|
||||||
|
|
||||||
const removeFirstInQueue = useImageQueue((state) => state.removeFirstInQueue);
|
const removeFirstInQueue = useImageQueue((state) => state.removeFirstInQueue);
|
||||||
|
|
||||||
@ -27,11 +26,9 @@ export default function CurrentImage() {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// query is done
|
// query is done
|
||||||
if(status === 'success') {
|
if(status === 'success') {
|
||||||
console.log("success");
|
|
||||||
|
|
||||||
// check to make sure that the image was created
|
// check to make sure that the image was created
|
||||||
if(data.status === 'succeeded') {
|
if(data.status === 'succeeded') {
|
||||||
console.log("succeeded");
|
|
||||||
setImageData(data.output[0].data);
|
setImageData(data.output[0].data);
|
||||||
removeFirstInQueue();
|
removeFirstInQueue();
|
||||||
}
|
}
|
||||||
@ -40,10 +37,12 @@ export default function CurrentImage() {
|
|||||||
}, [status, data, removeFirstInQueue]);
|
}, [status, data, removeFirstInQueue]);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="current-display">
|
<></>
|
||||||
<h1>Current Image</h1>
|
// <div className="current-display">
|
||||||
{imageData && <GeneratedImage imageData={imageData} />}
|
// <h1>Current Image</h1>
|
||||||
</div>
|
// {imageData && <GeneratedImage imageData={imageData} />}
|
||||||
|
// </div>
|
||||||
);
|
);
|
||||||
};
|
};
|
@ -1,15 +1,59 @@
|
|||||||
import React from "react";
|
import React, {useCallback} from "react";
|
||||||
|
|
||||||
|
|
||||||
import { useImageCreate } from "../../../store/imageCreateStore";
|
import { ImageRequest, useImageCreate } from "../../../store/imageCreateStore";
|
||||||
|
|
||||||
export default function GeneratedImage({ imageData }: { imageData: string }) {
|
type GeneretaedImageProps = {
|
||||||
|
imageData: string;
|
||||||
|
metadata: ImageRequest;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default function GeneratedImage({ imageData, metadata}: GeneretaedImageProps) {
|
||||||
|
|
||||||
const setRequestOption = useImageCreate((state) => state.setRequestOptions);
|
const setRequestOption = useImageCreate((state) => state.setRequestOptions);
|
||||||
|
|
||||||
|
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)
|
||||||
|
|
||||||
|
// name and the top level metadata
|
||||||
|
let fileName = `${underscoreName}_Seed-${seed}_Steps-${num_inference_steps}_Guidance-${guidance_scale}`;
|
||||||
|
|
||||||
|
// Add the face correction and upscale
|
||||||
|
if(use_face_correction) {
|
||||||
|
fileName += `_FaceCorrection-${use_face_correction}`;
|
||||||
|
}
|
||||||
|
if(use_upscale) {
|
||||||
|
fileName += `_Upscale-${use_upscale}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add the width and height
|
||||||
|
fileName += `_${width}x${height}`;
|
||||||
|
|
||||||
|
// add the file extension
|
||||||
|
fileName += `.png`
|
||||||
|
|
||||||
|
// return fileName
|
||||||
|
return fileName;
|
||||||
|
}
|
||||||
|
|
||||||
const _handleSave = () => {
|
const _handleSave = () => {
|
||||||
const link = document.createElement("a");
|
const link = document.createElement("a");
|
||||||
link.download = "image.png";
|
link.download = createFileName();
|
||||||
link.href = imageData;
|
link.href = imageData;
|
||||||
link.click();
|
link.click();
|
||||||
};
|
};
|
||||||
|
@ -16,6 +16,7 @@ import GeneratedImage from "./generatedImage";
|
|||||||
type CompletedImagesType = {
|
type CompletedImagesType = {
|
||||||
id: string;
|
id: string;
|
||||||
data: string;
|
data: string;
|
||||||
|
info: ImageRequest;
|
||||||
}
|
}
|
||||||
export default function DisplayPanel() {
|
export default function DisplayPanel() {
|
||||||
|
|
||||||
@ -31,17 +32,15 @@ export default function DisplayPanel() {
|
|||||||
return imageData;
|
return imageData;
|
||||||
});
|
});
|
||||||
|
|
||||||
console.log('completedQueries', completedQueries);
|
|
||||||
|
|
||||||
if (completedQueries.length > 0) {
|
if (completedQueries.length > 0) {
|
||||||
// map the completedImagesto a new array
|
// map the completedImagesto a new array
|
||||||
// and then set the state
|
// and then set the state
|
||||||
const temp = completedQueries.map((query, index ) => {
|
const temp = completedQueries.map((query, index ) => {
|
||||||
// debugger;
|
|
||||||
if(void 0 !== query) {
|
if(void 0 !== query) {
|
||||||
//@ts-ignore
|
//@ts-ignore
|
||||||
return query.output.map((data)=>{
|
return query.output.map((data)=>{
|
||||||
return {id: `${completedIds[index]}-${data.seed}`, data: data.data}
|
// @ts-ignore
|
||||||
|
return {id: `${completedIds[index]}-${data.seed}`, data: data.data, info: {...query.request, seed:data.seed } }
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -61,11 +60,11 @@ export default function DisplayPanel() {
|
|||||||
<div>
|
<div>
|
||||||
<CurrentImage />
|
<CurrentImage />
|
||||||
{completedImages.map((image, index) => {
|
{completedImages.map((image, index) => {
|
||||||
if(index == 0){
|
// if(index == 0){
|
||||||
return null;
|
// return null;
|
||||||
}
|
// }
|
||||||
if(void 0 !== image) {
|
if(void 0 !== image) {
|
||||||
return <GeneratedImage key={image.id} imageData={image.data} />;
|
return <GeneratedImage key={image.id} imageData={image.data} metadata={image.info}/>;
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
console.warn('image is undefined', image, index);
|
console.warn('image is undefined', image, index);
|
||||||
|
@ -15,18 +15,12 @@ export default function StatusDisplay({className}: {className?: string}) {
|
|||||||
const [statusClass, setStatusClass] = useState('starting');
|
const [statusClass, setStatusClass] = useState('starting');
|
||||||
|
|
||||||
|
|
||||||
// doing this here for the time being, to show the data getting loaded
|
|
||||||
// but this will be moved to the status display when it is created
|
// 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(() => {
|
|
||||||
console.log('health data', data);
|
|
||||||
}, [data]);
|
|
||||||
|
|
||||||
|
|
||||||
// const data = {};
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
console.log('status', status);
|
|
||||||
|
|
||||||
if (status === 'loading') {
|
if (status === 'loading') {
|
||||||
setStatusMessage(startingMessage);
|
setStatusMessage(startingMessage);
|
||||||
|
@ -67,13 +67,13 @@ interface ImageCreateState {
|
|||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
export const useImageCreate = create<ImageCreateState>(devtools((set, get) => ({
|
export const useImageCreate = create<ImageCreateState>(devtools((set, get) => ({
|
||||||
|
|
||||||
parallelCount: 1,
|
parallelCount: 2,
|
||||||
|
|
||||||
requestOptions:{
|
requestOptions:{
|
||||||
prompt: 'a photograph of an astronaut riding a horse',
|
prompt: 'a photograph of an astronaut riding a horse',
|
||||||
seed: useRandomSeed(),
|
seed: useRandomSeed(),
|
||||||
num_outputs: 1,
|
num_outputs: 2,
|
||||||
num_inference_steps: 50,
|
num_inference_steps: 5,
|
||||||
guidance_scale: 7.5,
|
guidance_scale: 7.5,
|
||||||
width: 512,
|
width: 512,
|
||||||
height: 512,
|
height: 512,
|
||||||
|
24
ui/frontend/dist/index.js
vendored
24
ui/frontend/dist/index.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user