Merge pull request #7 from caranicas/beta-react-file-responses

file metadata and saveing
This commit is contained in:
caranicas 2022-09-14 14:28:10 -04:00 committed by GitHub
commit fcc196f452
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 78 additions and 58 deletions

View File

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

View File

@ -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}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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,

File diff suppressed because one or more lines are too long