Skip to content

Commit

Permalink
generation ETA
Browse files Browse the repository at this point in the history
  • Loading branch information
@KAJdev
KAJdev committed Jul 23, 2023
1 parent 44aac30 commit 753eb57
Show file tree
Hide file tree
Showing 4 changed files with 68 additions and 83 deletions.
59 changes: 7 additions & 52 deletions packages/stablestudio-ui/src/Comfy/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -226,10 +226,13 @@ export namespace Comfy {
id: inputID,
};

const cropped = await cropImage(image, newInput);
if (!cropped) continue;

responses.push(cropped);
responses.push({
id: image.id,
inputID: newInput.id,
created: new Date(),
src: URL.createObjectURL(image.blob),
finishReason: 0,
});
newInputs[inputID] = newInput;
}

Expand Down Expand Up @@ -292,51 +295,3 @@ export namespace Comfy {
);
};
}

function cropImage(
image: StableStudio.StableDiffusionImage,
input: Generation.Image.Input
) {
return new Promise<Generation.Image | void>((resolve) => {
const id = image.id;
const blob = image.blob;
if (!blob || !id) return resolve();

// crop image to box size
const croppedCanvas = document.createElement("canvas");
croppedCanvas.width = input.width;
croppedCanvas.height = input.height;

// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const croppedCtx = croppedCanvas.getContext("2d")!;

const img = new window.Image();
img.src = URL.createObjectURL(blob);
img.onload = () => {
croppedCtx.drawImage(
img,
0,
0,
input.width,
input.height,
0,
0,
input.width,
input.height
);

croppedCanvas.toBlob((blob) => {
if (blob) {
const objectURL = URL.createObjectURL(blob);
resolve({
id,
inputID: input.id,
created: new Date(),
src: objectURL,
finishReason: 0,
});
}
});
};
});
}
1 change: 1 addition & 0 deletions packages/stablestudio-ui/src/Generation/Image/Output/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ export function Output({ outputID, placeholder, divider }: Props) {
key={keys("image", images.length, images.length - index)}
placeholder={placeholder}
image={image}
outputID={output?.id}
progress={output?.progress}
scale={1}
example={
Expand Down
88 changes: 57 additions & 31 deletions packages/stablestudio-ui/src/Generation/Image/SpecialEffects/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export function SpecialEffects({
example,
onClick,
input,
output,
progress,
}: {
showing?: boolean;
Expand All @@ -23,10 +24,26 @@ export function SpecialEffects({
};
onClick?: () => void;
input?: ID;
output?: ID;
border?: boolean;
progress?: number;
}) {
if (!showing) return null;
const [starting] = useState(
output ? Generation.Image.Output.get(output).requestedAt : undefined
);
const [eta, setETA] = useState<number | undefined>();

useEffect(() => {
if (!loading) return;
if (typeof progress !== "number") return;
if (!starting) return;

const seconds = (Date.now() - starting.getTime()) / 1000;
const eta = seconds / progress - seconds;
setETA(eta);
}, [loading, progress, starting]);

return (
<div
className={classes(
Expand Down Expand Up @@ -80,37 +97,46 @@ export function SpecialEffects({
<div className="absolute flex h-full w-full items-center justify-center">
{loading &&
(typeof progress === "number" ? (
<div
className={classes(
variant === "small" ? "h-1/2 w-1/2" : "h-10 w-10"
)}
>
<CircularProgressbar
value={progress}
maxValue={1}
styles={{
// Customize the path, i.e. the "completed progress"
path: {
// Path color
stroke: "#ffffff",
// Whether to use rounded or flat corners on the ends - can use 'butt' or 'round'
strokeLinecap: "butt",
// Customize transition animation
transition: "stroke-dashoffset 0.5s ease 0s",
transformOrigin: "center center",
strokeWidth: 8,
},
// Customize the circle behind the path, i.e. the "total progress"
trail: {
// Trail color
stroke: "#4c4c4d",
// Whether to use rounded or flat corners on the ends - can use 'butt' or 'round'
strokeLinecap: "butt",
transformOrigin: "center center",
strokeWidth: 8,
},
}}
/>
<div className="relative flex flex-col items-center justify-center gap-1">
<div
className={classes(
variant === "small" ? "h-1/2 w-1/2" : "h-10 w-10"
)}
>
<CircularProgressbar
value={progress}
maxValue={1}
styles={{
// Customize the path, i.e. the "completed progress"
path: {
// Path color
stroke: "#ffffff",
// Whether to use rounded or flat corners on the ends - can use 'butt' or 'round'
strokeLinecap: "butt",
// Customize transition animation
transition: "stroke-dashoffset 0.5s ease 0s",
transformOrigin: "center center",
strokeWidth: 8,
},
// Customize the circle behind the path, i.e. the "total progress"
trail: {
// Trail color
stroke: "#4c4c4d",
// Whether to use rounded or flat corners on the ends - can use 'butt' or 'round'
strokeLinecap: "butt",
transformOrigin: "center center",
strokeWidth: 8,
},
}}
/>
</div>
<p className="absolute top-full mt-1">
{(eta ?? 0) > 0 && (
<span className="text-sm text-white">
{Math.round(eta ?? 0)}s
</span>
)}
</p>
</div>
) : (
<Theme.Loading.Spinner
Expand Down
3 changes: 3 additions & 0 deletions packages/stablestudio-ui/src/Generation/Image/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ type Props = Styleable &
hideControls?: boolean;
placeholder?: boolean;
progress?: number;
outputID?: ID;

onClick?: () => void;
onDelete?: () => void;
Expand All @@ -53,6 +54,7 @@ export function Image({
hideControls,
placeholder,
progress,
outputID,

scale,
preserveAspectRatio,
Expand Down Expand Up @@ -158,6 +160,7 @@ export function Image({
showing={shouldShowSpecialEffects}
loading={!placeholder && shouldShowSpecialEffects}
progress={progress}
output={outputID}
variant={(style.height ?? 512) < 48 ? "small" : undefined}
// example={example}
// onClick={example ? onTryTemplate : undefined}
Expand Down

0 comments on commit 753eb57

Please sign in to comment.