45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
// islands/AsyncImageGenerater.tsx
|
|
import { useState } from "preact/hooks";
|
|
import { ImageFile } from "../utils/types.ts";
|
|
import ImageGenerater from "./ImageGenerater.tsx";
|
|
|
|
export function AsyncImageGenerater() {
|
|
const [popup, setPopup] = useState<
|
|
{
|
|
imageFile: ImageFile;
|
|
role: string;
|
|
resolve: (value: ImageFile | null) => void;
|
|
} | null
|
|
>(null);
|
|
|
|
// Show the popup and return a Promise for the answer
|
|
const imageGenerate = (
|
|
imageFile: ImageFile,
|
|
role: string,
|
|
): Promise<ImageFile | null> => {
|
|
return new Promise((resolve) => {
|
|
setPopup({ imageFile, role, resolve });
|
|
});
|
|
};
|
|
|
|
// Render the popup if needed
|
|
// Priority for text_1: image_text (user's description) > image_file (sanitized filename)
|
|
// image_text preserves the user's original typed description with spaces/casing
|
|
// image_file is the sanitized filename with underscores and timestamp
|
|
const popupImageGenerater = popup
|
|
? (
|
|
<ImageGenerater
|
|
text_1={popup.imageFile.image_text || popup.imageFile.image_file || ""}
|
|
image_data={popup.imageFile.image_data}
|
|
role={popup.role}
|
|
recordingCallback={(answer: any) => {
|
|
popup.resolve(answer);
|
|
setPopup(null);
|
|
}}
|
|
/>
|
|
)
|
|
: null;
|
|
|
|
return [imageGenerate, popupImageGenerater] as const;
|
|
}
|