Files
easydiffusion/ui/frontend/build_src/src/components/displayPanel/generatedImage/index.tsx
2022-09-14 17:56:38 -04:00

91 lines
2.3 KiB
TypeScript

import React, { useCallback } from "react";
import { ImageRequest, useImageCreate } from "../../../store/imageCreateStore";
type GeneretaedImageProps = {
imageData: string;
metadata: ImageRequest;
};
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,
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 link = document.createElement("a");
link.download = createFileName();
link.href = imageData;
link.click();
};
const _handleUseAsInput = () => {
debugger;
setRequestOption("init_image", imageData);
// initImageSelector.value = null
// initImagePreview.src = imgBody
// imgUseBtn.addEventListener('click', function() {
// initImageSelector.value = null
// initImagePreview.src = imgBody
// initImagePreviewContainer.style.display = 'block'
// promptStrengthContainer.style.display = 'block'
// // maskSetting.style.display = 'block'
// randomSeedField.checked = false
// 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>
</div>
);
}